Feat/global search phase 7

cypress/e2e/search/search-bar.spec.js

@@ -91,6 +91,27 @@ describe("Global Search: Search Bar", () => {
 
     // Verify that user is navigated to search page with correct search param
     cy.location("pathname").should("equal", "/search");
-    cy.location("search").should("equal", `?q=${encodeURI(SEARCH_TERM)}`);
+    cy.location("search").should(
+      "equal",
+      `?q=${SEARCH_TERM.replaceAll(/\s/g, "+")}`
+    );
+  });
+
+  it("shows the search accelerators when search bar is opened", () => {
+    cy.waitOn(
+      "https://8-f48cf3a682-7fthvk.api.dev.zesty.io/v1/search/items*",
+      () => {
+        cy.visit("/search?q=cypress");
+      }
+    );
+
+    // Activate the global search bar
+    cy.getBySelector("global-search-textfield")
+      .find("input")
+      .should("exist")
+      .click();
+
+    // Verify that search accelerators are present
+    cy.getBySelector("global-search-accelerators").should("exist");
   });
 });

src/shell/components/GlobalAccountMenu/index.tsx

@@ -136,12 +136,11 @@ export const GlobalAccountMenu: FC<GlobalAccountMenuProps> = ({
         >
           <img src={youtubeIcon} alt="youtube" />
         </IconButton>
-        <IconButton size="small">
-          <img
-            src={slackIcon}
-            alt="slack"
-            onClick={() => handleOpenUrl("https://www.zesty.io/chat/")}
-          />
+        <IconButton
+          size="small"
+          onClick={() => handleOpenUrl("https://www.zesty.io/chat/")}
+        >
+          <img src={slackIcon} alt="slack" />
         </IconButton>
       </Stack>
     </Menu>

src/shell/components/ContentSearch/components/AdvancedSearch.tsx → src/shell/components/GlobalSearch/components/AdvancedSearch.tsx

@@ -33,8 +33,8 @@ import {
 import { DateFilterModal } from "../../../components/Filters/DateFilter/DateFilterModal";
 import { DateRangeFilterModal } from "../../../components/Filters/DateFilter/DateRangeFilterModal";
 import { PRESET_DATES, CUSTOM_DATES, RESOURCE_TYPES } from "./config";
+import { ResourceType } from "../../../services/types";
 
-type ResourceType = "content" | "schema" | null;
 interface User {
   firstName: string;
   lastName: string;
@@ -45,17 +45,19 @@ export interface SearchData {
   keyword: string;
   user: User | null;
   date: DateFilterValue | null;
-  resourceType: ResourceType;
+  resourceType: ResourceType | null;
 }
 interface AdvancedSearch {
   keyword: string;
   onClose: () => void;
   onSearch?: (searchData: SearchData) => void;
+  searchAccelerator?: ResourceType | null;
 }
 export const AdvancedSearch: FC<AdvancedSearch> = ({
   keyword,
   onClose,
   onSearch,
+  searchAccelerator = null,
 }) => {
   const history = useHistory();
   const location = useLocation();
@@ -95,6 +97,14 @@ export const AdvancedSearch: FC<AdvancedSearch> = ({
     }
   }, [keyword]);
 
+  useEffect(() => {
+    // Automatically set the resource type value when the user has already set
+    // a search accelerator on the search box input field
+    if (Boolean(searchAccelerator)) {
+      updateSearchData({ resourceType: searchAccelerator });
+    }
+  }, [searchAccelerator]);
+
   const handleSetSelectedDate = ({
     type,
     value,

src/shell/components/ContentSearch/components/GlobalSearchItem.tsx → src/shell/components/GlobalSearch/components/GlobalSearchItem.tsx

@@ -6,23 +6,43 @@ import {
   SvgIcon,
   ListItemSecondaryAction,
   IconButton,
+  Chip,
 } from "@mui/material";
 import { SvgIconComponent } from "@mui/icons-material";
 import CloseIcon from "@mui/icons-material/Close";
 
+import { ResourceType } from "../../../services/types";
+import { SEARCH_ACCELERATORS } from "./config";
+
 type GlobalSearchItemProps = HTMLAttributes<HTMLLIElement> & {
   text: string;
   icon: SvgIconComponent;
   isRemovable?: boolean;
   onRemove?: (keyword: string) => void;
+  searchAccelerator?: ResourceType | null;
 };
 export const GlobalSearchItem: FC<GlobalSearchItemProps> = ({
   text,
   icon,
   isRemovable = false,
   onRemove,
+  searchAccelerator,
   ...props
 }) => {
+  const onRequestRemove = () => {
+    if (!onRemove) {
+      return;
+    }
+
+    // Makes sure that we're removing the exact option containing the
+    // search accelerator if it was saved with it.
+    if (searchAccelerator) {
+      onRemove(`[in:${searchAccelerator}] ${text}`);
+    } else {
+      onRemove(text);
+    }
+  };
+
   return (
     <ListItem
       {...props}
@@ -49,6 +69,17 @@ export const GlobalSearchItem: FC<GlobalSearchItemProps> = ({
       <ListItemIcon sx={{ width: "32px", minWidth: "32px" }}>
         <SvgIcon component={icon} fontSize="small" />
       </ListItemIcon>
+      {Boolean(searchAccelerator) && (
+        <Chip
+          variant="filled"
+          color="primary"
+          size="small"
+          label={`in: ${SEARCH_ACCELERATORS[searchAccelerator]?.text}`}
+          sx={{
+            mr: 1,
+          }}
+        />
+      )}
       <ListItemText
         primary={text}
         primaryTypographyProps={{ variant: "body2", color: "text.secondary" }}
@@ -58,7 +89,7 @@ export const GlobalSearchItem: FC<GlobalSearchItemProps> = ({
           <IconButton
             data-cy="RemoveRecentSearchKeyword"
             size="small"
-            onClick={() => onRemove && onRemove(text)}
+            onClick={onRequestRemove}
           >
             <CloseIcon fontSize="small" />
           </IconButton>

src/shell/components/GlobalSearch/components/KeywordSearchItem.tsx

@@ -0,0 +1,38 @@
+import { FC, useMemo } from "react";
+import { ScheduleRounded, SearchRounded } from "@mui/icons-material";
+
+import { GlobalSearchItem } from "./GlobalSearchItem";
+import { ResourceType } from "../../../services/types";
+
+interface KeywordSearchItem {
+  text: string;
+  recentSearches: string[];
+  onItemClick: () => void;
+  searchAccelerator?: ResourceType | null;
+}
+export const KeywordSearchItem: FC<KeywordSearchItem> = ({
+  text,
+  recentSearches,
+  onItemClick,
+  searchAccelerator,
+  ...props
+}) => {
+  const isRecentKeyword: boolean = useMemo(() => {
+    return recentSearches?.includes(text);
+  }, [recentSearches, text]);
+
+  const icon = useMemo(() => {
+    return isRecentKeyword ? ScheduleRounded : SearchRounded;
+  }, [isRecentKeyword]);
+
+  return (
+    <GlobalSearchItem
+      {...props}
+      text={text}
+      data-cy="global-search-term"
+      icon={icon}
+      searchAccelerator={searchAccelerator}
+      onClick={onItemClick}
+    />
+  );
+};

src/shell/components/GlobalSearch/components/RecentSearchItem.tsx

@@ -0,0 +1,42 @@
+import { FC, useMemo } from "react";
+import { ScheduleRounded } from "@mui/icons-material";
+
+import { GlobalSearchItem } from "./GlobalSearchItem";
+import { ResourceType } from "../../../services/types";
+import { splitTextAndAccelerator } from "../utils";
+
+interface RecentSearchItemProps {
+  text: string;
+  onRemove: (keyword: string) => void;
+  onItemClick: (term: string, resourceType?: ResourceType | null) => void;
+  searchAccelerator?: ResourceType | null;
+}
+export const RecentSearchItem: FC<RecentSearchItemProps> = ({
+  text,
+  onRemove,
+  onItemClick,
+  searchAccelerator,
+  ...props
+}) => {
+  const splitTextResult = useMemo(() => {
+    return splitTextAndAccelerator(text);
+  }, [text]);
+
+  return (
+    <GlobalSearchItem
+      {...props}
+      text={splitTextResult.text}
+      isRemovable
+      data-cy="global-search-recent-keyword"
+      icon={ScheduleRounded}
+      onRemove={onRemove}
+      searchAccelerator={splitTextResult.resourceType as ResourceType}
+      onClick={() =>
+        onItemClick(
+          splitTextResult.text,
+          splitTextResult.resourceType as ResourceType
+        )
+      }
+    />
+  );
+};

src/shell/components/GlobalSearch/components/SearchAccelerator.tsx

@@ -0,0 +1,99 @@
+import { FC } from "react";
+import {
+  ListItem,
+  ListSubheader,
+  Button,
+  SvgIcon,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
+import ManageSearchRoundedIcon from "@mui/icons-material/ManageSearchRounded";
+
+import { SEARCH_ACCELERATORS } from "./config";
+import { ResourceType } from "../../../services/types";
+import { useGetActiveApp } from "../../../hooks/useGetActiveApp";
+
+interface SearchAcceleratorProps {
+  onAcceleratorClick: (type: ResourceType) => void;
+}
+export const SearchAccelerator: FC<SearchAcceleratorProps> = ({
+  onAcceleratorClick,
+  ...props
+}) => {
+  const { mainApp } = useGetActiveApp();
+  const isValidApp = Boolean(SEARCH_ACCELERATORS[mainApp as ResourceType]);
+
+  return (
+    <>
+      {isValidApp && (
+        <ListItem
+          {...props}
+          key="SearchAcceleratorSuggestion"
+          sx={{
+            height: "36px",
+            "&.Mui-focused": {
+              borderLeft: "4px solid",
+              borderColor: "primary.main",
+              backgroundColor: "action.hover",
+              pl: 1.5,
+            },
+          }}
+          onClick={() => onAcceleratorClick(mainApp as ResourceType)}
+        >
+          <ListItemIcon sx={{ width: "32px", minWidth: "32px" }}>
+            <ManageSearchRoundedIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText
+            primary={`Find in ${
+              SEARCH_ACCELERATORS[mainApp as ResourceType].text
+            }`}
+            primaryTypographyProps={{
+              variant: "body2",
+              color: "text.secondary",
+            }}
+          />
+        </ListItem>
+      )}
+      <ListSubheader
+        sx={{
+          fontSize: "12px",
+          fontWeight: 600,
+          lineHeight: "18px",
+          letterSpacing: "0.15px",
+          pt: 1,
+          px: 1.5,
+        }}
+      >
+        Search in ...
+      </ListSubheader>
+      <ListItem
+        data-cy="global-search-accelerators"
+        sx={{
+          gap: 1,
+          pt: 0.5,
+          px: 1.5,
+        }}
+      >
+        {Object.entries(SEARCH_ACCELERATORS)?.map(([key, value]) => (
+          <Button
+            data-cy={`global-search-accelerator-${key}`}
+            key={key}
+            variant="contained"
+            size="small"
+            sx={{
+              height: "24px",
+              letterSpacing: "0.16px",
+              lineHeight: "18px",
+              fontSize: "13px",
+              fontWeight: 400,
+            }}
+            startIcon={<SvgIcon component={value.icon} />}
+            onClick={() => onAcceleratorClick(key as ResourceType)}
+          >
+            {value.text}
+          </Button>
+        ))}
+      </ListItem>
+    </>
+  );
+};

src/shell/components/ContentSearch/components/config.ts → src/shell/components/GlobalSearch/components/config.ts

@@ -1,3 +1,11 @@
+import {
+  SvgIconComponent,
+  EditRounded,
+  CodeRounded,
+  ImageRounded,
+} from "@mui/icons-material";
+import { Database } from "@zesty-io/material";
+
 import {
   PresetType,
   DateFilterModalType,
@@ -64,3 +72,26 @@ export const RESOURCE_TYPES: Record<ResourceType, string> = {
   code: "Code Files",
   media: "Media",
 };
+
+interface SearchAccelerator {
+  icon: SvgIconComponent;
+  text: string;
+}
+export const SEARCH_ACCELERATORS: Record<ResourceType, SearchAccelerator> = {
+  content: {
+    icon: EditRounded,
+    text: "Content",
+  },
+  schema: {
+    icon: Database as SvgIconComponent,
+    text: "Schema",
+  },
+  media: {
+    icon: ImageRounded,
+    text: "Media",
+  },
+  code: {
+    icon: CodeRounded,
+    text: "Code",
+  },
+};