From d66935cd19a7ae565849f2f25c393bf74ffc0866 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Wed, 10 May 2023 11:39:49 +0800
Subject: [PATCH 1/3] task: added resource type filter

---
 .../components/AdvancedSearch.tsx             | 57 ++++++++++++++++++-
 .../ContentSearch/components/config.ts        |  9 +++
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/src/shell/components/ContentSearch/components/AdvancedSearch.tsx b/src/shell/components/ContentSearch/components/AdvancedSearch.tsx
index 9df7273250..60e12c28d0 100644
--- a/src/shell/components/ContentSearch/components/AdvancedSearch.tsx
+++ b/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="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, fugiat?"
+                >
+                  <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,
                 });
               }}
             >
diff --git a/src/shell/components/ContentSearch/components/config.ts b/src/shell/components/ContentSearch/components/config.ts
index 01f68a1e97..7187842ac8 100644
--- a/src/shell/components/ContentSearch/components/config.ts
+++ b/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",
+};

From 85d6fa5a284a828d064831549f3060b48bea9d23 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Thu, 11 May 2023 13:56:04 +0800
Subject: [PATCH 2/3] task: updated tooltip text

---
 .../components/ContentSearch/components/AdvancedSearch.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shell/components/ContentSearch/components/AdvancedSearch.tsx b/src/shell/components/ContentSearch/components/AdvancedSearch.tsx
index 60e12c28d0..3c5be3856c 100644
--- a/src/shell/components/ContentSearch/components/AdvancedSearch.tsx
+++ b/src/shell/components/ContentSearch/components/AdvancedSearch.tsx
@@ -324,7 +324,7 @@ export const AdvancedSearch: FC<AdvancedSearch> = ({ keyword, onClose }) => {
                 Resource Type
                 <Tooltip
                   placement="top"
-                  title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, fugiat?"
+                  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" }}

From 35cbfbfc293de8ec0aaa6a9cc434f5e0e8f0338a Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Thu, 11 May 2023 14:23:42 +0800
Subject: [PATCH 3/3] task: add resource type filter component in search page

---
 .../SearchPage/Filters/ResourceTypeFilter.tsx | 71 +++++++++++++++++++
 src/shell/views/SearchPage/Filters/index.tsx  |  5 ++
 2 files changed, 76 insertions(+)
 create mode 100644 src/shell/views/SearchPage/Filters/ResourceTypeFilter.tsx

diff --git a/src/shell/views/SearchPage/Filters/ResourceTypeFilter.tsx b/src/shell/views/SearchPage/Filters/ResourceTypeFilter.tsx
new file mode 100644
index 0000000000..ae79654dc4
--- /dev/null
+++ b/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>
+    </>
+  );
+};
diff --git a/src/shell/views/SearchPage/Filters/index.tsx b/src/shell/views/SearchPage/Filters/index.tsx
index 3fee784dea..2d609ba8f7 100644
--- a/src/shell/views/SearchPage/Filters/index.tsx
+++ b/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")}