Global Search: Resource type filter (#2039)

* task: added resource type filter

* task: updated tooltip text

* task: add resource type filter component in search page

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

@@ -32,8 +32,9 @@ import {
 } from "../../../components/Filters/DateFilter/types";
 import { DateFilterModal } from "../../../components/Filters/DateFilter/DateFilterModal";
 import { DateRangeFilterModal } from "../../../components/Filters/DateFilter/DateRangeFilterModal";
-import { PRESET_DATES, CUSTOM_DATES } from "./config";
+import { PRESET_DATES, CUSTOM_DATES, RESOURCE_TYPES } from "./config";
 
+type ResourceType = "content" | "schema" | null;
 interface User {
   firstName: string;
   lastName: string;
@@ -44,6 +45,7 @@ export interface SearchData {
   keyword: string;
   user: User | null;
   date: DateFilterValue | null;
+  resourceType: ResourceType;
 }
 interface AdvancedSearch {
   keyword: string;
@@ -66,6 +68,7 @@ export const AdvancedSearch: FC<AdvancedSearch> = ({ keyword, onClose }) => {
       keyword: "",
       user: null,
       date: null,
+      resourceType: null,
     }
   );
   const isCustomDate = CUSTOM_DATES.map((d) => d.value).includes(
@@ -158,7 +161,7 @@ export const AdvancedSearch: FC<AdvancedSearch> = ({ keyword, onClose }) => {
 
   const handleSearchClicked = () => {
     const isOnSearchPage = location.pathname === "/search";
-    const { keyword, user, date } = searchData;
+    const { keyword, user, date, resourceType } = searchData;
     const searchParams = new URLSearchParams();
 
     if (keyword) {
@@ -199,6 +202,10 @@ export const AdvancedSearch: FC<AdvancedSearch> = ({ keyword, onClose }) => {
       }
     }
 
+    if (resourceType) {
+      searchParams.set("resource", resourceType);
+    }
+
     if (keyword) {
       onClose();
 
@@ -312,6 +319,51 @@ export const AdvancedSearch: FC<AdvancedSearch> = ({ keyword, onClose }) => {
                 sx={{ height: "40px" }}
               />
             </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 || ""}
+                sx={{
+                  "& .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input.MuiOutlinedInput-input":
+                    {
+                      color:
+                        searchData.resourceType === null
+                          ? "text.disabled"
+                          : "text.primary",
+                    },
+                }}
+                onChange={(e) => {
+                  const { value } = e.target;
+
+                  updateSearchData({
+                    resourceType: value as ResourceType,
+                  });
+                }}
+              >
+                <MenuItem value="" disabled sx={{ display: "none" }}>
+                  Select
+                </MenuItem>
+                {Object.entries(RESOURCE_TYPES).map(([value, text]) => (
+                  <MenuItem key={value} value={value}>
+                    {text}
+                  </MenuItem>
+                ))}
+              </Select>
+            </Box>
             <Box>
               <InputLabel>
                 Date Modified
@@ -387,6 +439,7 @@ export const AdvancedSearch: FC<AdvancedSearch> = ({ keyword, onClose }) => {
                   keyword: "",
                   user: null,
                   date: null,
+                  resourceType: null,
                 });
               }}
             >

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

@@ -56,3 +56,12 @@ export const CUSTOM_DATES: CustomDate[] = [
     value: "daterange",
   },
 ];
+
+interface ResourceType {
+  content: string;
+  schema: string;
+}
+export const RESOURCE_TYPES: ResourceType = {
+  content: "Content Items",
+  schema: "Models",
+};

src/shell/views/SearchPage/Filters/ResourceTypeFilter.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { FC, useState } from "react";
+import { Menu, MenuItem } from "@mui/material";
+
+import { FilterButton } from "../../../components/Filters";
+
+interface ResourceTypeOptions {
+  content: string;
+  schema: string;
+}
+const RESOURCE_TYPE_OPTIONS: ResourceTypeOptions = {
+  content: "Content Items",
+  schema: "Models",
+};
+
+export type ResourceType = "content" | "schema" | "";
+interface ResourceTypeFilter {
+  onChange: (value: ResourceType | "") => void;
+  value?: ResourceType;
+}
+export const ResourceTypeFilter: FC<ResourceTypeFilter> = ({
+  onChange,
+  value,
+}) => {
+  const [anchorRef, setAnchorRef] = useState<HTMLElement | null>(null);
+
+  return (
+    <>
+      <FilterButton
+        filterId="resourceType"
+        isFilterActive={Boolean(value)}
+        buttonText={
+          RESOURCE_TYPE_OPTIONS[value as Exclude<ResourceType, "">] ||
+          "Resource Type"
+        }
+        onOpenMenu={(e: React.MouseEvent<HTMLButtonElement>) =>
+          setAnchorRef(e.currentTarget)
+        }
+        onRemoveFilter={() => onChange("")}
+      />
+      <Menu
+        data-cy="ResourceTypeFilterMenu"
+        anchorEl={anchorRef}
+        open={Boolean(anchorRef)}
+        onClose={() => setAnchorRef(null)}
+        PaperProps={{
+          sx: {
+            mt: 1,
+          },
+        }}
+      >
+        {Object.entries(RESOURCE_TYPE_OPTIONS).map(([filter, text]) => (
+          <MenuItem
+            key={filter}
+            value={filter}
+            selected={value === filter}
+            sx={{
+              height: 40,
+            }}
+            onClick={() => {
+              onChange(filter as ResourceType);
+              setAnchorRef(null);
+            }}
+          >
+            {text}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+};

src/shell/views/SearchPage/Filters/index.tsx

@@ -10,6 +10,7 @@ import {
 } from "../../../components/Filters/";
 import { useGetUsersQuery } from "../../../services/accounts";
 import { DateFilterValue } from "../../../components/Filters/DateFilter";
+import { ResourceTypeFilter, ResourceType } from "./ResourceTypeFilter";
 
 export const Filters = () => {
   const [params, setParams] = useParams();
@@ -139,6 +140,10 @@ export const Filters = () => {
         value={(params.get("sort") as FilterValues) || "modified"}
         onChange={(value) => setParams(value, "sort")}
       />
+      <ResourceTypeFilter
+        onChange={(value) => setParams(value, "resource")}
+        value={(params.get("resource") as ResourceType) || ""}
+      />
       <UserFilter
         value={params.get("user") || ""}
         onChange={(value) => setParams(value, "user")}