reintroduce central search

Author: KelvinTegelaar

src/components/CippComponents/CippCentralSearch.jsx

@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+  Grid,
+  Card,
+  CardContent,
+  Typography,
+  Box,
+} from "@mui/material";
+import { useRouter } from "next/router";
+import { nativeMenuItems } from "/src/layouts/config";
+
+/**
+ * Recursively collects only leaf items (those without sub-items).
+ * If an item has an `items` array, we skip that item itself (treat it as a "folder")
+ * and continue flattening deeper.
+ */
+function getLeafItems(items = []) {
+  let result = [];
+
+  for (const item of items) {
+    if (item.items && Array.isArray(item.items) && item.items.length > 0) {
+      // recurse into children
+      result = result.concat(getLeafItems(item.items));
+    } else {
+      // no child items => this is a leaf
+      result.push(item);
+    }
+  }
+
+  return result;
+}
+
+export const CippCentralSearch = ({ handleClose, open }) => {
+  const router = useRouter();
+  const [searchValue, setSearchValue] = useState("");
+
+  // Flatten the menu items once
+  const flattenedMenuItems = getLeafItems(nativeMenuItems);
+
+  const handleChange = (event) => {
+    setSearchValue(event.target.value);
+  };
+
+  // Optionally handle Enter key
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      // do something if needed, e.g., analytics or highlight
+    }
+  };
+
+  // Filter leaf items by matching title or path
+  const normalizedSearch = searchValue.trim().toLowerCase();
+  const filteredItems = flattenedMenuItems.filter((leaf) => {
+    const inTitle = leaf.title?.toLowerCase().includes(normalizedSearch);
+    const inPath = leaf.path?.toLowerCase().includes(normalizedSearch);
+    // If there's no search value, show no results (you could change this logic)
+    return normalizedSearch ? inTitle || inPath : false;
+  });
+
+  // Helper to bold‐highlight the matched text
+  const highlightMatch = (text = "") => {
+    if (!normalizedSearch) return text;
+    const parts = text.split(new RegExp(`(${normalizedSearch})`, "gi"));
+    return parts.map((part, i) =>
+      part.toLowerCase() === normalizedSearch ? (
+        <Typography component="span" fontWeight="bold" key={i}>
+          {part}
+        </Typography>
+      ) : (
+        part
+      )
+    );
+  };
+
+  // Click handler: shallow navigate with Next.js
+  const handleCardClick = (path) => {
+    router.push(path, undefined, { shallow: true });
+    handleClose();
+  };
+
+  return (
+    <Dialog fullWidth maxWidth="sm" onClose={handleClose} open={open}>
+      <DialogTitle>CIPP Search</DialogTitle>
+      <DialogContent />
+      <DialogContent>
+        <Box>
+          <TextField
+            fullWidth
+            label="Search any menu item or page in CIPP"
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            value={searchValue}
+            autoFocus
+          />
+
+          {/* Show results or "No results" */}
+          {searchValue.trim().length > 0 ? (
+            filteredItems.length > 0 ? (
+              <Grid container spacing={2} mt={2}>
+                {filteredItems.map((item, index) => (
+                  <Grid item xs={12} sm={12} md={12} key={index}>
+                    <Card
+                      variant="outlined"
+                      sx={{ height: "100%", cursor: "pointer" }}
+                      onClick={() => handleCardClick(item.path)}
+                    >
+                      <CardContent>
+                        <Typography variant="h6">{highlightMatch(item.title)}</Typography>
+                        <Typography variant="body2" color="textSecondary">
+                          Path: {highlightMatch(item.path)}
+                        </Typography>
+                      </CardContent>
+                    </Card>
+                  </Grid>
+                ))}
+              </Grid>
+            ) : (
+              <Box mt={2}>No results found.</Box>
+            )
+          ) : (
+            <Box mt={2}>
+              <Typography variant="body2">Type something to search by title or path.</Typography>
+            </Box>
+          )}
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button color="inherit" onClick={handleClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

src/layouts/top-nav.js

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import NextLink from "next/link";
 import PropTypes from "prop-types";
 import Bars3Icon from "@heroicons/react/24/outline/Bars3Icon";
@@ -11,9 +11,13 @@ import { paths } from "../paths";
 import { AccountPopover } from "./account-popover";
 import { CippTenantSelector } from "../components/CippComponents/CippTenantSelector";
 import { NotificationsPopover } from "./notifications-popover";
+import { useDialog } from "../hooks/use-dialog";
+import { MagnifyingGlassCircleIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { CippCentralSearch } from "../components/CippComponents/CippCentralSearch";
 const TOP_NAV_HEIGHT = 64;
 
 export const TopNav = (props) => {
+  const searchDialog = useDialog();
   const { onNavOpen } = props;
   const settings = useSettings();
   const mdDown = useMediaQuery((theme) => theme.breakpoints.down("md"));
@@ -24,6 +28,23 @@ export const TopNav = (props) => {
     });
   }, [settings]);
 
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "k") {
+        event.preventDefault();
+        openSearch();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  const openSearch = () => {
+    searchDialog.handleOpen();
+  };
+
   return (
     <Box
       component="header"
@@ -85,6 +106,12 @@ export const TopNav = (props) => {
               </SvgIcon>
             </IconButton>
           )}
+          <IconButton color="inherit" onClick={() => openSearch()}>
+            <SvgIcon color="action" fontSize="small">
+              <MagnifyingGlassIcon />
+            </SvgIcon>
+          </IconButton>
+          <CippCentralSearch open={searchDialog.open} handleClose={searchDialog.handleClose} />
           <NotificationsPopover />
           <AccountPopover
             onThemeSwitch={handleThemeSwitch}