KBar buckets search (#1980)

portal-ui/src/screens/Console/CommandBar.tsx

@@ -24,6 +24,8 @@ import {
   KBarSearch,
   useMatches,
   useRegisterActions,
+  useKBar,
+  KBarState,
 } from "kbar";
 import { Action } from "kbar/lib/types";
 import { Theme } from "@mui/material/styles";
@@ -31,6 +33,11 @@ import makeStyles from "@mui/styles/makeStyles";
 import { routesAsKbarActions } from "./kbar-actions";
 import { Box } from "@mui/material";
 import { MenuExpandedIcon } from "../../icons/SidebarMenus";
+import { AppState } from "../../store";
+import { connect } from "react-redux";
+import useApi from "./Common/Hooks/useApi";
+import { useCallback, useEffect, useState } from "react";
+import { Bucket, BucketList } from "./Buckets/types";
 
 const useStyles = makeStyles((theme: Theme) => ({
   resultItem: {
@@ -81,19 +88,81 @@ const groupNameStyle = {
   borderBottom: "1px solid #eaeaea",
 };
 
-const CommandBar = ({
+const KBarStateChangeMonitor = ({
-  features,
+  onShow,
-  operatorMode,
+  onHide,
 }: {
-  operatorMode: boolean;
+  onShow?: () => void;
-  features: string[] | null;
+  onHide?: () => void;
 }) => {
-  const initialActions: Action[] = routesAsKbarActions(features, operatorMode);
+  const [isOpen, setIsOpen] = useState(false);
+  const { visualState } = useKBar((state: KBarState) => {
+    return {
+      visualState: state.visualState,
+    };
+  });
 
-  useRegisterActions(initialActions, [operatorMode]);
+  useEffect(() => {
+    if (visualState === "showing") {
+      setIsOpen(true);
+    } else {
+      setIsOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visualState]);
+
+  useEffect(() => {
+    if (isOpen) {
+      onShow?.();
+    } else {
+      onHide?.();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  //just to hook into the internal state of KBar. !
+  return null;
+};
+
+const CommandBar = ({
+  features = [],
+  operatorMode = false,
+}: {
+  operatorMode?: boolean;
+  features?: string[] | null;
+}) => {
+  const [buckets, setBuckets] = useState<Bucket[]>([]);
+
+  const [, invokeListBucketsApi] = useApi(
+    (res: BucketList) => {
+      setBuckets(res.buckets);
+    },
+    () => {}
+  );
+
+  const fetchBuckets = useCallback(() => {
+    invokeListBucketsApi("GET", `/api/v1/buckets`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const initialActions: Action[] = routesAsKbarActions(
+    features,
+    operatorMode,
+    buckets
+  );
+
+  useRegisterActions(initialActions, [operatorMode, buckets, features]);
+
+  //fetch buckets everytime the kbar is shown so that new buckets created elsewhere , within first page is also shown
 
   return (
     <KBarPortal>
+      <KBarStateChangeMonitor
+        onShow={fetchBuckets}
+        onHide={() => {
+          setBuckets([]);
+        }}
+      />
       <KBarPositioner
         style={{
           zIndex: 9999,
@@ -250,4 +319,11 @@ const ResultItem = React.forwardRef(
   }
 );
 
-export default CommandBar;
+const mapState = (state: AppState) => ({
+  operatorMode: state.system.operatorMode,
+  features: state.console.session.features,
+});
+
+const connector = connect(mapState, null);
+
+export default connector(CommandBar);

portal-ui/src/screens/Console/ConsoleKBar.tsx

@@ -20,13 +20,7 @@ import { AppState } from "../../store";
 import { connect } from "react-redux";
 import CommandBar from "./CommandBar";
 
-const ConsoleKBar = ({
+const ConsoleKBar = ({ features }: { features: string[] | null }) => {
-  features,
-  operatorMode,
-}: {
-  operatorMode: boolean;
-  features: string[] | null;
-}) => {
   // if we are hiding the menu also disable the k-bar so just return console
   if (features?.includes("hide-menu")) {
     return <Console />;
@@ -38,14 +32,13 @@ const ConsoleKBar = ({
         enableHistory: true,
       }}
     >
-      <CommandBar operatorMode={operatorMode} features={features} />
+      <CommandBar />
       <Console />
     </KBarProvider>
   );
 };
 
 const mapState = (state: AppState) => ({
-  operatorMode: state.system.operatorMode,
   features: state.console.session.features,
 });
 

portal-ui/src/screens/Console/kbar-actions.tsx

@@ -18,10 +18,12 @@ import { Action } from "kbar/lib/types";
 import history from "../../history";
 import { BucketsIcon } from "../../icons";
 import { validRoutes } from "./valid-routes";
+import { Bucket } from "./Buckets/types";
 
 export const routesAsKbarActions = (
   features: string[] | null,
-  operatorMode: boolean
+  operatorMode: boolean,
+  buckets: Bucket[]
 ) => {
   const initialActions: Action[] = [];
   const allowedMenuItems = validRoutes(features, operatorMode);
@@ -58,6 +60,20 @@ export const routesAsKbarActions = (
       icon: <BucketsIcon />,
     };
     initialActions.push(a);
+
+    if (buckets) {
+      buckets.map((buck) => [
+        initialActions.push({
+          id: buck.name,
+          name: buck.name,
+          section: "List of Buckets",
+          perform: () => {
+            history.push(`/buckets/${buck.name}/browse`);
+          },
+          icon: <BucketsIcon />,
+        }),
+      ]);
+    }
   }
   return initialActions;
 };