feat: quick suggestions click close (#7533)

Now recently visited projects, features, pages will also close the command bar.
Unleash · Jul 3, 2024 · 990ea1f · 990ea1f
1 parent fc95d45
commit 990ea1f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 11 deletions.
diff --git a/frontend/src/component/commandBar/CommandQuickSuggestions.tsx b/frontend/src/component/commandBar/CommandQuickSuggestions.tsx
@@ -13,6 +13,7 @@ const toListItemButton = (
     item: LastViewedPage,
     routes: Record<string, { path: string; route: string; title: string }>,
     index: number,
+    onClick: () => void,
 ) => {
     const key = `recently-visited-${index}`;
     if (item.featureId && item.projectId) {
@@ -21,6 +22,7 @@ const toListItemButton = (
                 key={key}
                 featureId={item.featureId}
                 projectId={item.projectId}
+                onClick={onClick}
             />
         );
     }
@@ -29,13 +31,19 @@ const toListItemButton = (
             <RecentlyVisitedProjectButton
                 key={key}
                 projectId={item.projectId}
+                onClick={onClick}
             />
         );
     }
     if (!item.pathName) return null;
     const name = routes[item.pathName]?.title ?? item.pathName;
     return (
-        <RecentlyVisitedPathButton key={key} path={item.pathName} name={name} />
+        <RecentlyVisitedPathButton
+            key={key}
+            path={item.pathName}
+            name={name}
+            onClick={onClick}
+        />
     );
 };
 
@@ -48,7 +56,7 @@ export const CommandQuickSuggestions = ({
 }) => {
     const { lastVisited } = useRecentlyVisited();
     const buttons = lastVisited.map((item, index) =>
-        toListItemButton(item, routes, index),
+        toListItemButton(item, routes, index, onClick),
     );
     return (
         <CommandResultGroup

diff --git a/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx b/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx
@@ -50,7 +50,11 @@ export interface CommandResultGroupItem {
     description?: string | null;
 }
 
-const ButtonItemIcon = ({ path }: { path: string }) => {
+const ButtonItemIcon = ({
+    path,
+}: {
+    path: string;
+}) => {
     if (path === '/projects') {
         return <StyledProjectIcon />;
     }
@@ -68,10 +72,16 @@ export const RecentlyVisitedPathButton = ({
     path,
     key,
     name,
-}: { path: string; key: string; name: string }) => {
+    onClick,
+}: {
+    path: string;
+    key: string;
+    name: string;
+    onClick: () => void;
+}) => {
     const { trackEvent } = usePlausibleTracker();
 
-    const onClick = () => {
+    const onItemClick = () => {
         trackEvent('command-bar', {
             props: {
                 eventType: `click`,
@@ -80,6 +90,7 @@ export const RecentlyVisitedPathButton = ({
                 pageType: name,
             },
         });
+        onClick();
     };
 
     return (
@@ -89,7 +100,7 @@ export const RecentlyVisitedPathButton = ({
             component={Link}
             to={path}
             sx={listItemButtonStyle}
-            onClick={onClick}
+            onClick={onItemClick}
         >
             <StyledListItemIcon>
                 <ButtonItemIcon path={path} />
@@ -106,19 +117,25 @@ export const RecentlyVisitedPathButton = ({
 export const RecentlyVisitedProjectButton = ({
     projectId,
     key,
-}: { projectId: string; key: string }) => {
+    onClick,
+}: {
+    projectId: string;
+    key: string;
+    onClick: () => void;
+}) => {
     const { trackEvent } = usePlausibleTracker();
     const { project, loading } = useProjectOverview(projectId);
     const projectDeleted = !project.name && !loading;
 
-    const onClick = () => {
+    const onItemClick = () => {
         trackEvent('command-bar', {
             props: {
                 eventType: `click`,
                 source: 'recently-visited',
                 eventTarget: 'Projects',
             },
         });
+        onClick();
     };
 
     if (projectDeleted) return null;
@@ -129,7 +146,7 @@ export const RecentlyVisitedProjectButton = ({
             component={Link}
             to={`/projects/${projectId}`}
             sx={listItemButtonStyle}
-            onClick={onClick}
+            onClick={onItemClick}
         >
             <StyledListItemIcon>
                 <StyledProjectIcon />
@@ -147,12 +164,14 @@ export const RecentlyVisitedFeatureButton = ({
     key,
     projectId,
     featureId,
+    onClick,
 }: {
     key: string;
     projectId: string;
     featureId: string;
+    onClick: () => void;
 }) => {
-    const onClick = () => {
+    const onItemClick = () => {
         const { trackEvent } = usePlausibleTracker();
 
         trackEvent('command-bar', {
@@ -162,6 +181,7 @@ export const RecentlyVisitedFeatureButton = ({
                 eventTarget: 'Flags',
             },
         });
+        onClick();
     };
     return (
         <ListItemButton
@@ -170,7 +190,7 @@ export const RecentlyVisitedFeatureButton = ({
             component={Link}
             to={`/projects/${projectId}/features/${featureId}`}
             sx={listItemButtonStyle}
-            onClick={onClick}
+            onClick={onItemClick}
         >
             <StyledListItemIcon>
                 <Icon>{'flag'}</Icon>