chore: cmd+k enhancements (#596)

keephq · Nov 30, 2023 · 4c7aaee · 4c7aaee · vercel · Nov 30, 2023
1 parent 5f6c30a
commit 4c7aaee
Show file tree

Hide file tree

Showing 6 changed files with 238 additions and 116 deletions.
diff --git a/keep-ui/app/alerts/alerts.tsx b/keep-ui/app/alerts/alerts.tsx
@@ -63,8 +63,8 @@ export default function Alerts({
   const [groupedByAlerts, setGroupedByAlerts] = useState<{
     [key: string]: Alert[];
   }>({});
-  const [alertNameSearchString, setAlertNameSearchString] = useState<string>(
-    searchParams?.get("searchQuery") || ""
+  const [alertSearchString, setAlertSearchString] = useState<string>(
+    searchParams?.get("searchQuery") || searchParams?.get("fingerprint") || ""
   );
   const [selectedStatus, setSelectedStatus] = useState<string[]>([]);
   const [selectedAssignees, setSelectedAssignees] = useState<string[]>([]);
@@ -225,13 +225,14 @@ export default function Alerts({
 
   function searchAlert(alert: Alert): boolean {
     return (
-      alertNameSearchString === "" ||
-      alertNameSearchString === undefined ||
-      alertNameSearchString === null ||
-      alert.name.toLowerCase().includes(alertNameSearchString.toLowerCase()) ||
+      alertSearchString === "" ||
+      alertSearchString === undefined ||
+      alertSearchString === null ||
+      alert.name.toLowerCase().includes(alertSearchString.toLowerCase()) ||
       alert.description
         ?.toLowerCase()
-        .includes(alertNameSearchString.toLowerCase()) ||
+        .includes(alertSearchString.toLowerCase()) ||
+      alert.fingerprint === alertSearchString ||
       false
     );
   }
@@ -302,9 +303,9 @@ export default function Alerts({
             className="max-w-[280px] ml-2.5"
             icon={MagnifyingGlassIcon}
             placeholder="Search Alert..."
-            value={alertNameSearchString}
+            value={alertSearchString}
             onChange={(e) => {
-              setAlertNameSearchString(e.target.value);
+              setAlertSearchString(e.target.value);
               router.push(
                 pathname +
                   "?" +

diff --git a/keep-ui/app/command-menu.tsx b/keep-ui/app/command-menu.tsx
@@ -1,146 +1,222 @@
 "use client";
 
-import { Command } from 'cmdk'
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { GitHubLogoIcon, FileTextIcon, TwitterLogoIcon } from '@radix-ui/react-icons'
-
-import '../styles/linear.scss';
+import { Command } from "cmdk";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import {
+  GitHubLogoIcon,
+  FileTextIcon,
+  TwitterLogoIcon,
+} from "@radix-ui/react-icons";
+import {
+  GlobeAltIcon,
+  UserGroupIcon,
+  EnvelopeIcon,
+  KeyIcon,
+  BriefcaseIcon,
+} from "@heroicons/react/24/outline";
 
+import "../styles/linear.scss";
 
 export function CMDK() {
- const [open, setOpen] = useState(false)
- const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const router = useRouter();
 
   // Toggle the menu when ⌘K is pressed
   useEffect(() => {
     const down = (e: any) => {
-      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((open) => !open);
       }
-    }
+    };
 
-    document.addEventListener('keydown', down)
-    return () => document.removeEventListener('keydown', down)
-  }, [])
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
   return (
     <div className="linear">
       <Command.Dialog open={open} onOpenChange={setOpen}>
         <div cmdk-linear-badge="">Keep Command Palette</div>
         <Command.Input autoFocus placeholder="Type a command or search..." />
         <Command.Group heading="Navigate">
-            <Command.List>
+          <Command.List>
             <Command.Empty>No results found.</Command.Empty>
             {navigationItems.map(({ icon, label, shortcut, navigate }) => {
-                return (
-                    <Command.Item key={label} value={label} onSelect={() => {
-                        setOpen((open) => !open);
-                        router.push(navigate!);
-                    }}>
-                    {icon}
-                    {label}
-                    <div cmdk-linear-shortcuts="">
+              return (
+                <Command.Item
+                  key={label}
+                  value={label}
+                  onSelect={() => {
+                    setOpen((open) => !open);
+                    router.push(navigate!);
+                  }}
+                >
+                  {icon}
+                  {label}
+                  <div cmdk-linear-shortcuts="">
                     {shortcut.map((key) => {
-                        return <kbd key={key}>{key}</kbd>
+                      return <kbd key={key}>{key}</kbd>;
                     })}
-                    </div>
+                  </div>
                 </Command.Item>
-                )
+              );
             })}
-            </Command.List>
+          </Command.List>
         </Command.Group>
         <Command.Group heading="External sources">
-            <Command.List>
+          <Command.List>
             {externalItems.map(({ icon, label, shortcut, navigate }) => {
-                return (
-                    <Command.Item key={label} value={label} onSelect={() => {
-                        setOpen((open) => !open);
-                        window.open(navigate, "_blank");
-                    }}>
-                    {icon}
-                    {label}
-                    <div cmdk-linear-shortcuts="">
+              return (
+                <Command.Item
+                  key={label}
+                  value={label}
+                  onSelect={() => {
+                    setOpen((open) => !open);
+                    window.open(navigate, "_blank");
+                  }}
+                >
+                  {icon}
+                  {label}
+                  <div cmdk-linear-shortcuts="">
                     {shortcut.map((key) => {
-                        return <kbd key={key}>{key}</kbd>
+                      return <kbd key={key}>{key}</kbd>;
                     })}
-                    </div>
+                  </div>
                 </Command.Item>
-                )
+              );
             })}
-            </Command.List>
+          </Command.List>
         </Command.Group>
       </Command.Dialog>
     </div>
-  )
+  );
 }
 
 const navigationItems = [
+  {
+    icon: <ConnectIntegrationIcon />,
+    label: "Go to the providers page",
+    shortcut: ["p"],
+    navigate: "/providers",
+  },
   {
     icon: <GoToConsoleIcon />,
-    label: 'Go to alert console',
-    shortcut: ['G'],
-    navigate: '/alerts'
+    label: "Go to alert console",
+    shortcut: ["g"],
+    navigate: "/alerts",
   },
   {
-    icon: <ConnectIntegrationIcon />,
-    label: 'Go to the providers page',
-    shortcut: ['P'],
-    navigate: '/providers'
+    icon: <BriefcaseIcon />,
+    label: "Go to the workflows page",
+    shortcut: ["wf"],
+    navigate: "/workflows",
+  },
+  {
+    icon: <UserGroupIcon />,
+    label: "Go to users management",
+    shortcut: ["u"],
+    navigate: "/settings",
+  },
+  {
+    icon: <GlobeAltIcon />,
+    label: "Go to generic webhook",
+    shortcut: ["w"],
+    navigate: "/settings?selectedTab=webhook",
+  },
+  {
+    icon: <EnvelopeIcon />,
+    label: "Go to SMTP settings",
+    shortcut: ["s"],
+    navigate: "/settings?selectedTab=smtp",
   },
   {
-    icon: <CreateAlertIcon />,
-    label: 'Go to alert workflow builder',
-    shortcut: ['D'],
-    navigate: '/workflows/builder'
-  }
-]
+    icon: <KeyIcon />,
+    label: "Go to API key",
+    shortcut: ["a"],
+    navigate: "/settings?selectedTab=api-key",
+  },
+];
 
 const externalItems = [
-        {
-        icon: <FileTextIcon />,
-        label: 'Keep Docs',
-        shortcut: ['⇧', 'D'],
-        navigate: 'https://docs.keephq.dev'
-      },
-      {
-        icon: <GitHubLogoIcon />,
-        label: 'Keep Source code',
-        shortcut: ['⇧', 'C'],
-        navigate: 'https://github.com/keephq/keep'
-      },
-      {
-        icon: <TwitterLogoIcon />,
-        label: 'Keep Twitter',
-        shortcut: ['⇧', 'T'],
-        navigate: 'https://twitter.com/keepalerting'
-      }
-]
+  {
+    icon: <FileTextIcon />,
+    label: "Keep Docs",
+    shortcut: ["⇧", "D"],
+    navigate: "https://docs.keephq.dev",
+  },
+  {
+    icon: <GitHubLogoIcon />,
+    label: "Keep Source code",
+    shortcut: ["⇧", "C"],
+    navigate: "https://github.com/keephq/keep",
+  },
+  {
+    icon: <TwitterLogoIcon />,
+    label: "Keep Twitter",
+    shortcut: ["⇧", "T"],
+    navigate: "https://twitter.com/keepalerting",
+  },
+];
 
 function ConnectIntegrationIcon() {
   return (
-    <svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
-    <path d="M1581.235 734.118c0 217.976-177.317 395.294-395.294 395.294H960.06c-217.977 0-395.294-177.318-395.294-395.294V564.706h1016.47v169.412Zm225.883-282.353h-338.824V0h-112.941v451.765H790.647V0H677.706v451.765H338.882v112.94h112.942v169.413c0 280.207 228.028 508.235 508.235 508.235h56.47v395.294c0 93.402-76.009 169.412-169.411 169.412-93.403 0-169.412-76.01-169.412-169.412 0-155.633-126.72-282.353-282.353-282.353S113 1482.014 113 1637.647V1920h112.941v-282.353c0-93.402 76.01-169.412 169.412-169.412s169.412 76.01 169.412 169.412c0 155.633 126.72 282.353 282.353 282.353 155.746 0 282.353-126.72 282.353-282.353v-395.294h56.47c280.207 0 508.235-228.028 508.235-508.235V564.706h112.942V451.765Z" fill-rule="evenodd"/>
-</svg>
-  )
+    <svg
+      fill="#000000"
+      width="800px"
+      height="800px"
+      viewBox="0 0 1920 1920"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1581.235 734.118c0 217.976-177.317 395.294-395.294 395.294H960.06c-217.977 0-395.294-177.318-395.294-395.294V564.706h1016.47v169.412Zm225.883-282.353h-338.824V0h-112.941v451.765H790.647V0H677.706v451.765H338.882v112.94h112.942v169.413c0 280.207 228.028 508.235 508.235 508.235h56.47v395.294c0 93.402-76.009 169.412-169.411 169.412-93.403 0-169.412-76.01-169.412-169.412 0-155.633-126.72-282.353-282.353-282.353S113 1482.014 113 1637.647V1920h112.941v-282.353c0-93.402 76.01-169.412 169.412-169.412s169.412 76.01 169.412 169.412c0 155.633 126.72 282.353 282.353 282.353 155.746 0 282.353-126.72 282.353-282.353v-395.294h56.47c280.207 0 508.235-228.028 508.235-508.235V564.706h112.942V451.765Z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  );
 }
 
 function GoToConsoleIcon() {
   return (
-    <svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 6l2.702 2.5L5 11zm0 12l2.702-2.5L5 13zm5-9h10V8H10zm0 7h7v-1h-7zM1 3h22v18H1zm1 17h20V4H2z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
-  )
+    <svg
+      width="800px"
+      height="800px"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M5 6l2.702 2.5L5 11zm0 12l2.702-2.5L5 13zm5-9h10V8H10zm0 7h7v-1h-7zM1 3h22v18H1zm1 17h20V4H2z" />
+      <path fill="none" d="M0 0h24v24H0z" />
+    </svg>
+  );
 }
 
 function CreateAlertIcon() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" width="800px" height="800px" viewBox="0 0 24 24"><path d="M10.01 21.01c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99h-3.98zm8.87-4.19V11c0-3.25-2.25-5.97-5.29-6.69v-.72C13.59 2.71 12.88 2 12 2s-1.59.71-1.59 1.59v.72C7.37 5.03 5.12 7.75 5.12 11v5.82L3 18.94V20h18v-1.06l-2.12-2.12zM16 13.01h-3v3h-2v-3H8V11h3V8h2v3h3v2.01z"/></svg>
-  )
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#000000"
+      width="800px"
+      height="800px"
+      viewBox="0 0 24 24"
+    >
+      <path d="M10.01 21.01c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99h-3.98zm8.87-4.19V11c0-3.25-2.25-5.97-5.29-6.69v-.72C13.59 2.71 12.88 2 12 2s-1.59.71-1.59 1.59v.72C7.37 5.03 5.12 7.75 5.12 11v5.82L3 18.94V20h18v-1.06l-2.12-2.12zM16 13.01h-3v3h-2v-3H8V11h3V8h2v3h3v2.01z" />
+    </svg>
+  );
 }
 
 function GoToDashboardIcon() {
   return (
-    <svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
-     <path d="M833.935 1063.327c28.913 170.315 64.038 348.198 83.464 384.79 27.557 51.84 92.047 71.944 144 44.387 51.84-27.558 71.717-92.273 44.16-144.113-19.426-36.593-146.937-165.46-271.624-285.064Zm-43.821-196.405c61.553 56.923 370.899 344.81 415.285 428.612 56.696 106.842 15.811 239.887-91.144 296.697-32.64 17.28-67.765 25.411-102.325 25.411-78.72 0-154.955-42.353-194.371-116.555-44.386-83.802-109.102-501.346-121.638-584.245-3.501-23.717 8.245-47.21 29.365-58.277 21.346-11.294 47.096-8.02 64.828 8.357ZM960.045 281.99c529.355 0 960 430.757 960 960 0 77.139-8.922 153.148-26.654 225.882l-10.39 43.144h-524.386v-112.942h434.258c9.487-50.71 14.231-103.115 14.231-156.084 0-467.125-380.047-847.06-847.059-847.06-467.125 0-847.059 379.935-847.059 847.06 0 52.97 4.744 105.374 14.118 156.084h487.454v112.942H36.977l-10.39-43.144C8.966 1395.137.044 1319.128.044 1241.99c0-529.243 430.645-960 960-960Zm542.547 390.686 79.85 79.85-112.716 112.715-79.85-79.85 112.716-112.715Zm-1085.184 0L530.123 785.39l-79.85 79.85L337.56 752.524l79.849-79.85Zm599.063-201.363v159.473H903.529V471.312h112.942Z" fill-rule="evenodd"/>
+    <svg
+      fill="#000000"
+      width="800px"
+      height="800px"
+      viewBox="0 0 1920 1920"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M833.935 1063.327c28.913 170.315 64.038 348.198 83.464 384.79 27.557 51.84 92.047 71.944 144 44.387 51.84-27.558 71.717-92.273 44.16-144.113-19.426-36.593-146.937-165.46-271.624-285.064Zm-43.821-196.405c61.553 56.923 370.899 344.81 415.285 428.612 56.696 106.842 15.811 239.887-91.144 296.697-32.64 17.28-67.765 25.411-102.325 25.411-78.72 0-154.955-42.353-194.371-116.555-44.386-83.802-109.102-501.346-121.638-584.245-3.501-23.717 8.245-47.21 29.365-58.277 21.346-11.294 47.096-8.02 64.828 8.357ZM960.045 281.99c529.355 0 960 430.757 960 960 0 77.139-8.922 153.148-26.654 225.882l-10.39 43.144h-524.386v-112.942h434.258c9.487-50.71 14.231-103.115 14.231-156.084 0-467.125-380.047-847.06-847.059-847.06-467.125 0-847.059 379.935-847.059 847.06 0 52.97 4.744 105.374 14.118 156.084h487.454v112.942H36.977l-10.39-43.144C8.966 1395.137.044 1319.128.044 1241.99c0-529.243 430.645-960 960-960Zm542.547 390.686 79.85 79.85-112.716 112.715-79.85-79.85 112.716-112.715Zm-1085.184 0L530.123 785.39l-79.85 79.85L337.56 752.524l79.849-79.85Zm599.063-201.363v159.473H903.529V471.312h112.942Z"
+        fill-rule="evenodd"
+      />
     </svg>
-  )
+  );
 }
diff --git a/keep-ui/app/navbar-inner.tsx b/keep-ui/app/navbar-inner.tsx
@@ -5,7 +5,11 @@ import { signOut } from "next-auth/react";
 import { Fragment } from "react";
 import {
   Bars3Icon,
+  BellAlertIcon,
+  BriefcaseIcon,
   DocumentTextIcon,
+  EnvelopeOpenIcon,
+  PuzzlePieceIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
 import Link from "next/link";
@@ -17,9 +21,14 @@ import { User } from "next-auth";
 import { InternalConfig } from "types/internal-config";
 
 const navigation = [
-  { name: "Providers", href: "/providers" },
-  { name: "Alerts", href: "/alerts" },
-  { name: "Workflows", href: "/workflows" },
+  { name: "Providers", href: "/providers", icon: PuzzlePieceIcon },
+  { name: "Alerts", href: "/alerts", icon: BellAlertIcon },
+  { name: "Workflows", href: "/workflows", icon: BriefcaseIcon },
+  // {
+  //   name: "Notifications Hub",
+  //   href: "/notifications-hub",
+  //   icon: EnvelopeOpenIcon,
+  // },
 ];
 
 function classNames(...classes: string[]) {
@@ -108,6 +117,7 @@ export default function NavbarInner({ user }: { user?: User }) {
                       )}
                       aria-current={pathname === item.href ? "page" : undefined}
                     >
+                      <Icon icon={item.icon} color="gray" />
                       {item.name}
                     </Link>
                   ))}