Global search fixes (#2409)

* fix: enable search accelerator via enter key * task: show search accelerator chip even if search is collapsed * task: advanced search modal updates * task: change recent items header text * task: increase font weight * fix: sync search keywords * fix: forward ref
zesty-io · Jan 3, 2024 · cfffc54 · cfffc54
1 parent 60d90f8
commit cfffc54
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 49 deletions.
diff --git a/src/shell/components/GlobalSearch/components/AdvancedSearch.tsx b/src/shell/components/GlobalSearch/components/AdvancedSearch.tsx
@@ -341,7 +341,7 @@ export const AdvancedSearch: FC<AdvancedSearch> = ({
             alignItems="center"
             justifyContent="space-between"
           >
-            <Typography variant="h5" fontWeight={600}>
+            <Typography variant="h5" fontWeight={700}>
               Advanced Search
             </Typography>
             <IconButton size="small" onClick={onClose}>
@@ -377,6 +377,40 @@ export const AdvancedSearch: FC<AdvancedSearch> = ({
                 onChange={(e) => updateSearchData({ keyword: e.target.value })}
               />
             </Box>
+            <Box>
+              <InputLabel>
+                Resource Type
+                <Tooltip
+                  placement="top"
+                  title="Use this filter when you want to only view search results for a single resource type such as a content item, model (schema), or code file."
+                >
+                  <InfoRoundedIcon
+                    sx={{ ml: 1, width: "12px", height: "12px" }}
+                    color="action"
+                  />
+                </Tooltip>
+              </InputLabel>
+              <Select
+                data-cy="AdvanceSearchResourceType"
+                displayEmpty
+                fullWidth
+                value={searchData.resourceType || ""}
+                onChange={(e) => {
+                  const { value } = e.target;
+
+                  updateSearchData({
+                    resourceType: value as ResourceType,
+                  });
+                }}
+              >
+                <MenuItem value="">Any Type</MenuItem>
+                {Object.entries(RESOURCE_TYPES).map(([value, text]) => (
+                  <MenuItem key={value} value={value}>
+                    {text}
+                  </MenuItem>
+                ))}
+              </Select>
+            </Box>
             <Box>
               <InputLabel>
                 Created By
@@ -434,41 +468,7 @@ export const AdvancedSearch: FC<AdvancedSearch> = ({
             </Box>
             <Box>
               <InputLabel>
-                Resource Type
-                <Tooltip
-                  placement="top"
-                  title="Use this filter when you want to only view search results for a single resource type such as a content item, model (schema), or code file."
-                >
-                  <InfoRoundedIcon
-                    sx={{ ml: 1, width: "12px", height: "12px" }}
-                    color="action"
-                  />
-                </Tooltip>
-              </InputLabel>
-              <Select
-                data-cy="AdvanceSearchResourceType"
-                displayEmpty
-                fullWidth
-                value={searchData.resourceType || ""}
-                onChange={(e) => {
-                  const { value } = e.target;
-
-                  updateSearchData({
-                    resourceType: value as ResourceType,
-                  });
-                }}
-              >
-                <MenuItem value="">Any Type</MenuItem>
-                {Object.entries(RESOURCE_TYPES).map(([value, text]) => (
-                  <MenuItem key={value} value={value}>
-                    {text}
-                  </MenuItem>
-                ))}
-              </Select>
-            </Box>
-            <Box>
-              <InputLabel>
-                Date
+                Date Modified
                 <Tooltip
                   placement="top"
                   title="Select the date range for which you want to see results for."

diff --git a/src/shell/components/GlobalSearch/index.tsx b/src/shell/components/GlobalSearch/index.tsx
@@ -287,6 +287,14 @@ export const GlobalSearch = () => {
     setMediaFolderKeyword(apiQueryTerm);
   }, [apiQueryTerm]);
 
+  useEffect(() => {
+    const paramsSearchKeyword = params?.get("q");
+
+    if (paramsSearchKeyword) {
+      setSearchKeyword(paramsSearchKeyword);
+    }
+  }, [params]);
+
   //@ts-ignore TODO fix typing for useMetaKey
   const shortcutHelpText = useMetaKey("k", () => {
     textfieldRef.current?.querySelector("input").focus();
@@ -451,8 +459,19 @@ export const GlobalSearch = () => {
               return;
             }
 
-            // string represents search term entered
             if (typeof newVal === "string") {
+              // The user has pressed enter while highlighting a search accelerator option
+              if (newVal === "SearchAccelerator") {
+                const isSearchAcceleratorSupportedApp =
+                  Object.keys(SEARCH_ACCELERATORS)?.includes(mainApp);
+
+                if (isSearchAcceleratorSupportedApp) {
+                  setChipSearchAccelerator(mainApp as ResourceType);
+                  return;
+                }
+              }
+
+              // The user has pressed enter while typing a query and has NOT highlighted any option
               if (AdditionalDropdownOptions.includes(newVal)) {
                 return;
               }
@@ -612,7 +631,11 @@ export const GlobalSearch = () => {
                     }}
                     key={option}
                   >
-                    Recent Modified {types[chipSearchAccelerator]}
+                    Recently{" "}
+                    {chipSearchAccelerator === "media"
+                      ? "Uploaded"
+                      : "Modified"}{" "}
+                    {types[chipSearchAccelerator]}
                   </ListSubheader>
                 );
               }
@@ -652,11 +675,7 @@ export const GlobalSearch = () => {
                 fullWidth
                 data-cy="global-search-textfield"
                 variant="outlined"
-                placeholder={
-                  Boolean(chipSearchAccelerator)
-                    ? ""
-                    : `Search Instance ${shortcutHelpText}`
-                }
+                placeholder={`Search Instance ${shortcutHelpText}`}
                 sx={{
                   height: "40px",
                   "& .Mui-focused": {
@@ -702,7 +721,7 @@ export const GlobalSearch = () => {
                   ...params.InputProps,
                   startAdornment: (
                     <InputAdornment position="start" sx={{ marginRight: 0 }}>
-                      {Boolean(chipSearchAccelerator) && open ? (
+                      {Boolean(chipSearchAccelerator) ? (
                         <Chip
                           data-cy={`active-global-search-accelerator-${chipSearchAccelerator}`}
                           variant="filled"

diff --git a/src/shell/components/withCursorPosition/index.tsx b/src/shell/components/withCursorPosition/index.tsx
@@ -1,7 +1,14 @@
-import { ComponentType, useEffect, useState, useRef } from "react";
+import {
+  ComponentType,
+  useEffect,
+  useState,
+  useRef,
+  forwardRef,
+  MutableRefObject,
+} from "react";
 
-export const withCursorPosition =
-  (WrappedComponent: ComponentType) => (props: any) => {
+export const withCursorPosition = (WrappedComponent: ComponentType) =>
+  forwardRef((props: any, ref: MutableRefObject<any>) => {
     const [cursorPosition, setCursorPosition] = useState<number>(0);
     const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -18,8 +25,9 @@ export const withCursorPosition =
     return (
       <WrappedComponent
         {...props}
+        ref={ref}
         inputRef={inputRef}
         onChange={handleChange}
       />
     );
-  };
+  });
diff --git a/src/shell/views/SearchPage/SearchPage.tsx b/src/shell/views/SearchPage/SearchPage.tsx
@@ -306,7 +306,7 @@ export const SearchPage: FC = () => {
             backgroundColor: "background.paper",
           }}
         >
-          <Typography variant="h6" color="text.primary">
+          <Typography variant="h6" color="text.primary" fontWeight={700}>
             {isLoading ? (
               <Skeleton variant="text" width={200} />
             ) : (