[ENG-1013] prevent explorer parent context menu on DismissibleNotice (#1261)

prevent explorer parent context menu

interface/app/$libraryId/Explorer/DismissibleNotice.tsx

@@ -91,6 +91,7 @@ export default () => {
 			description={notice.description}
 			className="m-5"
 			storageKey={notice.key}
+			onContextMenu={(e) => e.preventDefault()}
 		/>
 	);
 };

interface/app/$libraryId/Explorer/index.tsx

@@ -41,29 +41,27 @@ export default function Explorer(props: PropsWithChildren<Props>) {
 	return (
 		<>
 			<ExplorerContextMenu>
-				<div className="flex-1 overflow-hidden">
-					<div
-						ref={explorer.scrollRef}
-						className="custom-scroll explorer-scroll relative h-screen overflow-x-hidden"
-						style={{
-							paddingTop: TOP_BAR_HEIGHT,
-							paddingRight: explorerStore.showInspector ? INSPECTOR_WIDTH : 0
-						}}
-					>
-						{explorer.items && explorer.items.length > 0 && <DismissibleNotice />}
+				<div
+					ref={explorer.scrollRef}
+					className="custom-scroll explorer-scroll flex-1 overflow-x-hidden"
+					style={{
+						paddingTop: TOP_BAR_HEIGHT,
+						paddingRight: explorerStore.showInspector ? INSPECTOR_WIDTH : 0
+					}}
+				>
+					{explorer.items && explorer.items.length > 0 && <DismissibleNotice />}
 
-						<View
-							contextMenu={props.contextMenu ? props.contextMenu() : <ContextMenu />}
-							emptyNotice={
-								props.emptyNotice ?? (
-									<EmptyNotice
-										icon={FolderNotchOpen}
-										message="This folder is empty"
-									/>
-								)
-							}
-						/>
-					</div>
+					<View
+						contextMenu={props.contextMenu ? props.contextMenu() : <ContextMenu />}
+						emptyNotice={
+							props.emptyNotice ?? (
+								<EmptyNotice
+									icon={FolderNotchOpen}
+									message="This folder is empty"
+								/>
+							)
+						}
+					/>
 				</div>
 			</ExplorerContextMenu>
 

interface/components/DismissibleNotice.tsx

@@ -7,7 +7,7 @@ import {
 	useDismissibleNoticeStore
 } from '~/hooks/useDismissibleNoticeStore';
 
-interface Props {
+interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
 	icon?: ReactNode;
 	title: string | ReactNode;
 	description: string;
@@ -17,31 +17,42 @@ interface Props {
 	storageKey: keyof typeof dismissibleNoticeStore;
 }
 
-export default (props: Props) => {
+export default ({
+	icon,
+	title,
+	description,
+	onDismiss,
+	onLearnMore,
+	storageKey,
+	className,
+	...props
+}: Props) => {
 	const dismissibleNoticeStore = useDismissibleNoticeStore();
 
-	if (dismissibleNoticeStore[props.storageKey]) return null;
+	if (dismissibleNoticeStore[storageKey]) return null;
+
 	return (
 		<div
 			className={clsx(
 				'rounded-md bg-gradient-to-l from-accent-deep via-accent-faint to-purple-500 p-1',
-				props.className
+				className
 			)}
+			{...props}
 		>
 			<div className="flex items-center rounded bg-app px-3 py-4">
-				{props.icon}
+				{icon}
 
 				<div className="flex flex-1 flex-col justify-center">
-					<h1 className="text-xl font-bold text-ink">{props.title}</h1>
-					<p className="text-xs text-ink-dull">{props.description}</p>
+					<h1 className="text-xl font-bold text-ink">{title}</h1>
+					<p className="text-xs text-ink-dull">{description}</p>
 				</div>
 
 				<div className="ml-6 mr-3 space-x-2">
-					{props.onLearnMore && (
+					{onLearnMore && (
 						<Button
 							variant="outline"
 							className="border-white/10 font-medium hover:border-white/20"
-							onClick={props.onLearnMore}
+							onClick={onLearnMore}
 						>
 							Learn More
 						</Button>
@@ -50,8 +61,8 @@ export default (props: Props) => {
 						variant="accent"
 						className="font-medium"
 						onClick={() => {
-							getDismissibleNoticeStore()[props.storageKey] = true;
-							props.onDismiss?.();
+							getDismissibleNoticeStore()[storageKey] = true;
+							onDismiss?.();
 						}}
 					>
 						Got it