diff --git a/portal-ui/src/screens/Console/CommandBar.tsx b/portal-ui/src/screens/Console/CommandBar.tsx index 211ff2c0c..9c7af0713 100644 --- a/portal-ui/src/screens/Console/CommandBar.tsx +++ b/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 = ({ - features, - operatorMode, +const KBarStateChangeMonitor = ({ + onShow, + onHide, }: { - operatorMode: boolean; - features: string[] | null; + onShow?: () => void; + 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([]); + + 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 ( + { + setBuckets([]); + }} + /> ({ + operatorMode: state.system.operatorMode, + features: state.console.session.features, +}); + +const connector = connect(mapState, null); + +export default connector(CommandBar); diff --git a/portal-ui/src/screens/Console/ConsoleKBar.tsx b/portal-ui/src/screens/Console/ConsoleKBar.tsx index 111320524..5756863e0 100644 --- a/portal-ui/src/screens/Console/ConsoleKBar.tsx +++ b/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 = ({ - features, - operatorMode, -}: { - operatorMode: boolean; - features: string[] | null; -}) => { +const ConsoleKBar = ({ features }: { features: string[] | null }) => { // if we are hiding the menu also disable the k-bar so just return console if (features?.includes("hide-menu")) { return ; @@ -38,14 +32,13 @@ const ConsoleKBar = ({ enableHistory: true, }} > - + ); }; const mapState = (state: AppState) => ({ - operatorMode: state.system.operatorMode, features: state.console.session.features, }); diff --git a/portal-ui/src/screens/Console/kbar-actions.tsx b/portal-ui/src/screens/Console/kbar-actions.tsx index 3d0ec6cc1..c3a850a1b 100644 --- a/portal-ui/src/screens/Console/kbar-actions.tsx +++ b/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: , }; 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: , + }), + ]); + } } return initialActions; };