Schema: All models filter by user (#1824)

* task: added basic structure of filters

* task: add filter dropdown function

* task: dynamic button based on filter status

* task: moved hooks folder to components root dir

* task: added filters reducer

* task: add filter logic

* task: added filter logic for other filters

* task: added reusable flterbase component

* task: rename component

* task: use filterbutton component for lastupdate and people filters

* task: fixed height issue

* task: removed unused imports

* task: removed todo

* task: added user type and updated getUsers type

* task: added filter logic

* task: added user filter menu item

* task: made no results component reusable

* task: moved UserFilter and FilterButton to shell/components

* task: renamed props

* task: cleanup

* task: changed value type for filters

src/apps/schema/src/appRevamp/components/FieldList.tsx

@@ -24,7 +24,7 @@ import AddRoundedIcon from "@mui/icons-material/AddRounded";
 import SearchIcon from "@mui/icons-material/Search";
 import { AddFieldDivider } from "./AddFieldDivider";
 import { FieldsListRight } from "./FieldsListRight";
-import { NoSearchResults } from "./NoSearchResults";
+import { NoResults } from "./NoResults";
 import { ContentModelField } from "../../../../../shell/services/types";
 import { FieldEmptyState } from "./FieldEmptyState";
 import { SYSTEM_FIELDS, SystemField } from "./configs";
@@ -243,9 +243,10 @@ export const FieldList = ({ onNewFieldModalClick }: Props) => {
 
           {/* NO SEARCH RESULTS */}
           {!Boolean(filteredFields?.length) && search && (
-            <NoSearchResults
+            <NoResults
+              type="search"
               searchTerm={search}
-              onSearchAgain={handleSearchAgain}
+              onButtonClick={handleSearchAgain}
               sx={{
                 p: 3,
               }}

src/apps/schema/src/appRevamp/components/Filters/LastUpdated.tsx

@@ -1,4 +1,4 @@
-import { FilterButton } from "./FilterButton";
+import { FilterButton } from "../../../../../../shell/components/Filters";
 
 // TODO: Add functionality
 export const LastUpdated = () => {

src/apps/schema/src/appRevamp/components/Filters/ModelType.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import { FC, useState, Dispatch } from "react";
 import {
   Menu,
   MenuItem,
@@ -9,28 +9,29 @@ import {
 
 import { modelIconMap, modelNameMap } from "../../utils";
 import { ModelType as ModelSet } from "../../../../../../shell/services/types";
-import { FiltersProps } from "./index";
-import { FilterButton } from "./FilterButton";
+import { FilterButton } from "../../../../../../shell/components/Filters";
+import { ModelFilter } from "../ModelsTable";
 
 const MODEL_TYPE_FILTERS: ModelSet[] = ["templateset", "pageset", "dataset"];
 
-export const ModelType: FC<FiltersProps> = ({
-  activeFilters,
-  setActiveFilters,
-}) => {
+interface ModelTypeProps {
+  value: ModelSet | "";
+  onChange: Dispatch<Partial<ModelFilter>>;
+}
+export const ModelType: FC<ModelTypeProps> = ({ value, onChange }) => {
   const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLButtonElement | null>(
     null
   );
   const isFilterMenuOpen = Boolean(menuAnchorEl);
-  const activeModelTypeFilter: ModelSet | "" = activeFilters?.modelType;
+  const activeModelTypeFilter: ModelSet | "" = value;
 
   const handleOpenMenuClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     setMenuAnchorEl(e.currentTarget);
   };
 
   const handleFilterSelect = (filter: ModelSet) => {
     setMenuAnchorEl(null);
-    setActiveFilters({
+    onChange({
       modelType: filter,
     });
   };
@@ -43,7 +44,7 @@ export const ModelType: FC<FiltersProps> = ({
           modelNameMap[activeModelTypeFilter as ModelSet] || "Model Type"
         }
         onOpenMenu={handleOpenMenuClick}
-        onRemoveFilter={() => setActiveFilters({ modelType: "" })}
+        onRemoveFilter={() => onChange({ modelType: "" })}
       >
         <Menu
           open={isFilterMenuOpen}

src/apps/schema/src/appRevamp/components/Filters/index.tsx

@@ -3,24 +3,18 @@ import { Box } from "@mui/material";
 
 import { LastUpdated } from "./LastUpdated";
 import { ModelType } from "./ModelType";
-import { People } from "./People";
 import { ModelFilter } from "../ModelsTable";
+import { UserFilter } from "../../../../../../shell/components/Filters";
 
 export interface FiltersProps {
-  setActiveFilters: Dispatch<Partial<ModelFilter>>;
+  onChange: Dispatch<Partial<ModelFilter>>;
   activeFilters: ModelFilter;
 }
-export const Filters: FC<FiltersProps> = ({
-  setActiveFilters,
-  activeFilters,
-}) => {
+export const Filters: FC<FiltersProps> = ({ activeFilters, onChange }) => {
   return (
     <Box display="flex" gap={1.5} mb={2}>
-      <ModelType
-        setActiveFilters={setActiveFilters}
-        activeFilters={activeFilters}
-      />
-      <People />
+      <ModelType value={activeFilters.modelType} onChange={onChange} />
+      <UserFilter value={activeFilters.user} onChange={onChange} />
       <LastUpdated />
     </Box>
   );

src/apps/schema/src/appRevamp/components/ModelsTable.tsx

@@ -14,7 +14,7 @@ import { ContentModel, ModelType } from "../../../../../shell/services/types";
 import moment from "moment-timezone";
 import { useMemo, useState, useReducer } from "react";
 import { useHistory } from "react-router";
-import { NoSearchResults } from "./NoSearchResults";
+import { NoResults } from "./NoResults";
 import { modelIconMap, modelNameMap } from "../utils";
 import { Filters } from "./Filters";
 import { AllModelsEmptyState } from "./AllModelsEmptyState";
@@ -39,7 +39,7 @@ const ContentItemsCell = ({ ZUID }: any) => {
 
 export type ModelFilter = {
   modelType: ModelType | "";
-  people: string;
+  user: string;
   lastUpdated: string;
 };
 interface Props {
@@ -65,7 +65,7 @@ export const ModelsTable = ({ search, onEmptySearch }: Props) => {
         ...newFilter,
       };
     },
-    { modelType: "", people: "", lastUpdated: "" }
+    { modelType: "", user: "", lastUpdated: "" }
   );
 
   const filteredModels = useMemo(() => {
@@ -78,9 +78,9 @@ export const ModelsTable = ({ search, onEmptySearch }: Props) => {
           (activeFilters.modelType === ""
             ? true
             : model.type === activeFilters.modelType) &&
-          (activeFilters.people === ""
+          (activeFilters.user === ""
             ? true
-            : model.createdByUserZUID === activeFilters.people) &&
+            : model.createdByUserZUID === activeFilters.user) &&
           (activeFilters.lastUpdated === ""
             ? true
             : model.updatedAt === activeFilters.lastUpdated)
@@ -173,10 +173,7 @@ export const ModelsTable = ({ search, onEmptySearch }: Props) => {
       display="flex"
       flexDirection="column"
     >
-      <Filters
-        activeFilters={activeFilters}
-        setActiveFilters={setActiveFilters}
-      />
+      <Filters activeFilters={activeFilters} onChange={setActiveFilters} />
       <DataGridPro
         // @ts-expect-error - missing types for headerAlign and align on DataGridPro
         columns={columns}
@@ -199,11 +196,23 @@ export const ModelsTable = ({ search, onEmptySearch }: Props) => {
           },
         }}
       />
-      {!filteredModels?.length && !isFetching && (
+      {!filteredModels?.length && !isFetching && search && (
         <Box sx={{ mt: 10 }}>
-          <NoSearchResults
+          <NoResults
+            type="search"
             searchTerm={search}
-            onSearchAgain={() => onEmptySearch()}
+            onButtonClick={() => onEmptySearch()}
+          />
+        </Box>
+      )}
+
+      {!filteredModels?.length && !isFetching && !search && (
+        <Box sx={{ mt: 10 }}>
+          <NoResults
+            type="filter"
+            onButtonClick={() =>
+              setActiveFilters({ modelType: "", user: "", lastUpdated: "" })
+            }
           />
         </Box>
       )}

src/apps/schema/src/appRevamp/components/NoResults.tsx

@@ -0,0 +1,48 @@
+import { Box, Typography, Button, SxProps, SvgIcon } from "@mui/material";
+import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
+import RestartAltRounded from "@mui/icons-material/RestartAltRounded";
+
+import noSearchResults from "../../../../../../public/images/noSearchResults.svg";
+
+const TEXT_CONFIG = {
+  search: {
+    header: "Your search “{searchTerm}” could not find any results",
+    subHeader:
+      "Try adjusting your search. We suggest check all words are spelled correctly or try using different keywords.",
+    buttonText: "Search Again",
+    buttonIcon: SearchRoundedIcon,
+  },
+  filter: {
+    header: "No models were found",
+    subHeader: "Try adjusting the filters to find what you were looking for.",
+    buttonText: "Clear Filters",
+    buttonIcon: RestartAltRounded,
+  },
+};
+
+interface Props {
+  type: "search" | "filter";
+  searchTerm?: string;
+  onButtonClick: () => void;
+  sx?: SxProps;
+}
+export const NoResults = ({ type, searchTerm, onButtonClick, sx }: Props) => {
+  return (
+    <Box textAlign="center" sx={sx}>
+      <img src={noSearchResults} alt="No search results" />
+      <Typography pt={1.5} pb={1} variant="h4" fontWeight={600}>
+        {TEXT_CONFIG[type].header.replace("{searchTerm}", searchTerm)}
+      </Typography>
+      <Typography variant="body2" pb={3} color="text.secondary">
+        {TEXT_CONFIG[type].subHeader}
+      </Typography>
+      <Button
+        onClick={onButtonClick}
+        variant="contained"
+        startIcon={<SvgIcon component={TEXT_CONFIG[type].buttonIcon} />}
+      >
+        {TEXT_CONFIG[type].buttonText}
+      </Button>
+    </Box>
+  );
+};