Apply formatting to command palette components

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
feast-dev · franciscojavierarceo · May 6, 2025 · May 6, 2025 · May 6, 2025 · May 6, 2025
commit 3bf4c839a9f2a877346767129829d5c93cdb7a0f
@@ -27,7 +27,7 @@ const commandPaletteStyles: Record<string, React.CSSProperties> = {
     zIndex: 9999,
     display: "flex",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
   },
   modal: {
     width: "600px",
@@ -38,40 +38,40 @@ const commandPaletteStyles: Record<string, React.CSSProperties> = {
     boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
     overflow: "hidden",
     display: "flex",
-    flexDirection: "column"
+    flexDirection: "column",
   },
   modalHeader: {
     padding: "16px",
     borderBottom: "1px solid #D3DAE6",
     position: "sticky",
     top: 0,
     backgroundColor: "white",
-    zIndex: 1
+    zIndex: 1,
   },
   modalBody: {
     padding: "0 16px 16px",
     maxHeight: "calc(80vh - 60px)",
-    overflowY: "auto"
+    overflowY: "auto",
   },
   searchResults: {
-    marginTop: "8px"
+    marginTop: "8px",
   },
   categoryGroup: {
-    marginBottom: "8px"
+    marginBottom: "8px",
   },
   searchResultItem: {
     padding: "8px 0",
-    borderBottom: "1px solid #eee"
+    borderBottom: "1px solid #eee",
   },
   searchResultItemLast: {
     padding: "8px 0",
-    borderBottom: "none"
+    borderBottom: "none",
   },
   itemDescription: {
     fontSize: "0.85em",
     color: "#666",
-    marginTop: "4px"
-  }
+    marginTop: "4px",
+  },
 };
 
 interface CommandPaletteProps {
@@ -161,18 +161,20 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
     };
   });
 
-  console.log("CommandPalette isOpen:", isOpen, "categories:", categories.length); // Debug log
+  console.log(
+    "CommandPalette isOpen:",
+    isOpen,
+    "categories:",
+    categories.length,
+  ); // Debug log
 
   if (!isOpen) {
     console.log("CommandPalette not rendering due to isOpen=false");
     return null;
   }
 
   return (
-    <div
-      style={commandPaletteStyles.overlay}
-      onClick={onClose}
-    >
+    <div style={commandPaletteStyles.overlay} onClick={onClose}>
       <div
         style={commandPaletteStyles.modal}
         onClick={(e) => e.stopPropagation()}
@@ -181,9 +183,7 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
         <div style={commandPaletteStyles.modalHeader}>
           <h2 style={{ margin: 0 }}>Search Registry</h2>
         </div>
-        <div
-          style={commandPaletteStyles.modalBody}
-        >
+        <div style={commandPaletteStyles.modalBody}>
           <EuiFieldSearch
             placeholder="Search across Feature Views, Features, Entities, etc."
             value={searchText}
@@ -204,7 +204,10 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
                 searchResults
                   .filter((result) => result.items.length > 0)
                   .map((result) => (
-                    <div key={result.title} style={commandPaletteStyles.categoryGroup}>
+                    <div
+                      key={result.title}
+                      style={commandPaletteStyles.categoryGroup}
+                    >
                       <EuiPanel hasBorder={true} paddingSize="m">
                         <EuiTitle size="xs">
                           <h3>
@@ -233,7 +236,10 @@ const CommandPalette: React.FC<CommandPaletteProps> = ({
                                       window.location.href = item.link;
                                     }, 50);
                                   }}
-                                  style={{ color: '#0077cc', textDecoration: 'none' }}
+                                  style={{
+                                    color: "#0077cc",
+                                    textDecoration: "none",
+                                  }}
                                 >
                                   <strong>{item.name}</strong>
                                 </a>

@@ -9,7 +9,14 @@ const GlobalSearchShortcut: React.FC<GlobalSearchShortcutProps> = ({
 }) => {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      console.log("Key pressed:", event.key, "metaKey:", event.metaKey, "ctrlKey:", event.ctrlKey);
+      console.log(
+        "Key pressed:",
+        event.key,
+        "metaKey:",
+        event.metaKey,
+        "ctrlKey:",
+        event.ctrlKey,
+      );
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
         console.log("Cmd+K detected, preventing default and calling onOpen");
         event.preventDefault();

@@ -90,10 +90,17 @@ const Layout = () => {
     setIsCommandPaletteOpen(true);
     console.log("Command palette state should be updated to true");
   };
-  
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      console.log("Layout key pressed:", event.key, "metaKey:", event.metaKey, "ctrlKey:", event.ctrlKey);
+      console.log(
+        "Layout key pressed:",
+        event.key,
+        "metaKey:",
+        event.metaKey,
+        "ctrlKey:",
+        event.ctrlKey,
+      );
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
         console.log("Layout detected Cmd+K, preventing default");
         event.preventDefault();
@@ -164,7 +171,10 @@ const Layout = () => {
                     style={{ width: "600px", maxWidth: "90%" }}
                   >
                     <RegistrySearch ref={searchRef} categories={categories} />
-                    <button onClick={handleSearchOpen} style={{ marginTop: "10px" }}>
+                    <button
+                      onClick={handleSearchOpen}
+                      style={{ marginTop: "10px" }}
+                    >
                       Open Command Palette (Test)
                     </button>
                   </EuiFlexItem>