Feat: Global Search Phase 5 (#2060)

finnar-bin · web-flow · commit 7ff8f2166ef0 · 2023-06-07T15:08:56.000-07:00
* Global Search: Add search page filters (#2008) * task: added sortby filter * task: rename sortby filter * task: add user filter * task: close menu on select * task: add select highlight * task: add date range to date filters * task: set params for daterange filter * task: set active filter text * task: remove date filter * task: pass active daterange value to daterange picker * fix: fixed ts error * Global Search: Search page wire filters (#2009) * task: added sortby filter * task: rename sortby filter * task: add user filter * task: close menu on select * task: add select highlight * task: add date range to date filters * task: set params for daterange filter * task: set active filter text * task: remove date filter * task: pass active daterange value to daterange picker * fix: fixed ts error * - do not open a new tab when filters are added - unpin specific tab when search queries are present - show search keyword on tab name for the search page * task: sort by function * task: user filter * task: background color update * task: spacing fix * task: date filter func * task: updated result count * task: fixed alignment * task: added no results for filter * Global Search: Advanced search button & modal (#2012) * task: added advanced search button * task: added filter button * chore: removed comment * task: added advanced search modal * task: fixed console errors * task: fixed console error * task: add form fields * task: added tooltips * Global Search: Wire advance search modal (#2015) * task: added advanced search button * task: added filter button * chore: removed comment * task: added advanced search modal * task: fixed console errors * task: fixed console error * task: add form fields * task: added tooltips * task: created hook for advance search data * task: moved search data to content search comp * task: added clear all function * task: wire user filter * task: import types * task: moved everything back into the advance search modal * task: moved date config to a separate file & added daterange modal * task: added date handling for single date picker * task: daterange handler * task: wired advance search page * task: wired advance search function * task: spacing and color update * fix: fixed search button not enabling * task: added cypress test scenarios * task: search page cypress tests * task: advance search modal cypress tests * task: added data-cy * task: updated cy get chaining * fix: height fix for the counter * task: added tooltips and changed date filter to modified at * task: vqa updates * task: adjusted border radius * Global Search: Save/remove recent searches (#2029) * task: always open the dropdown on click * task: add recent searches hook * task: add recent searches to dropdown * task: created separated component for global search items * task: updated subheader style * task: padding updates * task: cleanup * task: unfocus textfield when user selects an item * task: always show user typed value * task: removed comment * task: wire remove recent search * task: save a max of 50 recent search items * task: when user keyword exists as a saved recent search, render it as a recent search * task: hide suggestions when no user-typed keyword is present * task: fixed incorrect icon * task: remove manual JSON.parse/stringify * task: removed deep cloning * Global Search: Resource type filter (#2039) * task: added resource type filter * task: updated tooltip text * task: add resource type filter component in search page * Global Search Phase 4: Schema searching (#2041) * task: created util to get content title * task: changed how content result is being taken * task: created filtered models hook * task: show models in top suggestions * task: moved getting icon to utils * task: added model type keyword matching * task: changed model search hook * task: update comment * chore: added hook description * task: search models via user zuid * task: allow searching models via user name * task: changed how data is taken from rtk query * task: show models in search page results * task: render model list item * task: wire resource type filter * task: cleanup * task: added icons to dropdown options * Global Search: Include code files in top suggestions (#2048) * task: created util to get content title * task: changed how content result is being taken * task: created filtered models hook * task: show models in top suggestions * task: moved getting icon to utils * task: added model type keyword matching * task: changed model search hook * task: update comment * chore: added hook description * task: search models via user zuid * task: allow searching models via user name * task: changed how data is taken from rtk query * task: show models in search page results * task: render model list item * task: wire resource type filter * task: cleanup * task: create rtk query for scripts and stylesheets * task: add hook to filter code files * task: include code files in top suggestions * task: support view and snippet files for .html searches * task: remove unneeded special handling for .html search * task: add code to resource type filter dropdowns * task: fixed type errors * task: change type for resource types * task: add files to sesarch page results * task: add code file results to search page
diff --git a/src/shell/components/ContentSearch/components/config.ts b/src/shell/components/ContentSearch/components/config.ts
@@ -2,6 +2,7 @@ import {
   PresetType,
   DateFilterModalType,
 } from "../../../components/Filters/DateFilter/types";
+import { ResourceType } from "../../../services/types";
 
 interface PresetDate {
   text: string;
@@ -57,11 +58,8 @@ export const CUSTOM_DATES: CustomDate[] = [
   },
 ];
 
-interface ResourceType {
-  content: string;
-  schema: string;
-}
-export const RESOURCE_TYPES: ResourceType = {
+export const RESOURCE_TYPES: Record<ResourceType, string> = {
   content: "Content Items",
   schema: "Models",
+  code: "Code Files",
 };
diff --git a/src/shell/components/ContentSearch/index.tsx b/src/shell/components/ContentSearch/index.tsx
@@ -27,12 +27,14 @@ import useRecentSearches from "../../hooks/useRecentSearches";
 import { GlobalSearchItem } from "./components/GlobalSearchItem";
 import { getContentTitle, getItemIcon } from "./utils";
 import { useSearchModelsByKeyword } from "../../hooks/useSearchModelsByKeyword";
+import { useSearchCodeFilesByKeywords } from "../../hooks/useSearchCodeFilesByKeyword";
+import { ResourceType } from "../../services/types";
 
 const AdditionalDropdownOptions = ["RecentSearches", "AdvancedSearchButton"];
 const ElementId = "global-search-autocomplete";
 
 export interface Suggestion {
-  type: "schema" | "content";
+  type: ResourceType;
   ZUID: string;
   title: string;
   updatedAt: string;
@@ -45,7 +47,8 @@ const ContentSearch: FC = () => {
   const [open, setOpen] = useState(false);
   const [isAdvancedSearchOpen, setIsAdvancedSearchOpen] = useState(false);
   const [recentSearches, addSearchTerm, deleteSearchTerm] = useRecentSearches();
-  const [models, setKeyword] = useSearchModelsByKeyword();
+  const [models, setModelKeyword] = useSearchModelsByKeyword();
+  const [files, setFileKeyword] = useSearchCodeFilesByKeywords();
   const languages = useSelector((state: any) => state.languages);
   const history = useHistory();
   const location = useLocation();
@@ -74,26 +77,39 @@ const ContentSearch: FC = () => {
         };
       }) || [];
 
-    const modelSuggestions: Suggestion[] = models.map((model) => {
-      return {
-        type: "schema",
-        ZUID: model.ZUID,
-        title: model.label,
-        updatedAt: model.updatedAt,
-        url: `/schema/${model.ZUID}`,
-      };
-    });
+    const modelSuggestions: Suggestion[] =
+      models?.map((model) => {
+        return {
+          type: "schema",
+          ZUID: model.ZUID,
+          title: model.label,
+          updatedAt: model.updatedAt,
+          url: `/schema/${model.ZUID}`,
+        };
+      }) || [];
+
+    const codeFileSuggestions: Suggestion[] =
+      files?.map((file) => {
+        return {
+          type: "code",
+          ZUID: file.ZUID,
+          title: file.fileName?.split("/").pop(), // Removes the file path from the file name
+          updatedAt: file.updatedAt,
+          url: `/code/file/views/${file.ZUID}`,
+        };
+      }) || [];
 
     const consolidatedResults = [
       ...contentSuggestions,
       ...modelSuggestions,
+      ...codeFileSuggestions,
     ].sort(
       (a, b) =>
         new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
     );
 
     return consolidatedResults;
-  }, [contents, models]);
+  }, [contents, models, files]);
 
   const options = useMemo(() => {
     // Only show the first 5 recent searches when user has not typed in a query
@@ -108,7 +124,8 @@ const ContentSearch: FC = () => {
   }, [suggestions, recentSearches, value]);
 
   useEffect(() => {
-    setKeyword(value);
+    setModelKeyword(value);
+    setFileKeyword(value);
   }, [value]);
 
   //@ts-ignore TODO fix typing for useMetaKey
diff --git a/src/shell/components/ContentSearch/utils.ts b/src/shell/components/ContentSearch/utils.ts
@@ -1,7 +1,7 @@
 import { isEmpty } from "lodash";
 import { Database } from "@zesty-io/material";
-import { Create, SvgIconComponent } from "@mui/icons-material";
-import { ContentItem } from "../../services/types";
+import { Create, SvgIconComponent, CodeRounded } from "@mui/icons-material";
+import { ContentItem, ResourceType } from "../../services/types";
 
 export const getContentTitle = (
   content: ContentItem,
@@ -20,7 +20,7 @@ export const getContentTitle = (
   return langDisplay ? `${langDisplay}${title}` : title;
 };
 
-export const getItemIcon = (type: "schema" | "content") => {
+export const getItemIcon = (type: ResourceType) => {
   let icon;
 
   switch (type) {
@@ -32,6 +32,10 @@ export const getItemIcon = (type: "schema" | "content") => {
       icon = Database as SvgIconComponent;
       break;
 
+    case "code":
+      icon = CodeRounded;
+      break;
+
     default:
       break;
   }
diff --git a/src/shell/hooks/useSearchCodeFilesByKeyword.ts b/src/shell/hooks/useSearchCodeFilesByKeyword.ts
@@ -0,0 +1,61 @@
+import { useState, useMemo } from "react";
+import { isEmpty } from "lodash";
+
+import { WebView, Script, Stylesheet } from "../services/types";
+import {
+  useGetWebViewsQuery,
+  useGetStylesheetsQuery,
+  useGetScriptsQuery,
+} from "../services/instance";
+
+/**
+ * This hook is used to easily filter code files via a keyword that matches the ff:
+ * - File name
+ * - File ZUID
+ */
+export type File = Pick<
+  WebView | Script | Stylesheet,
+  keyof (WebView | Script | Stylesheet)
+>;
+type UseSearchCodeFilesByKeywords = [File[], (searchTerm: string) => void];
+export const useSearchCodeFilesByKeywords: () => UseSearchCodeFilesByKeywords =
+  () => {
+    const [searchTerm, setSearchTerm] = useState("");
+    const { data: webViews } = useGetWebViewsQuery({ status: "dev" });
+    const { data: stylesheets } = useGetStylesheetsQuery();
+    const { data: scripts } = useGetScriptsQuery();
+
+    // Create one array with all the files
+    const allFiles: File[] = useMemo(() => {
+      let files: File[] = [...(stylesheets ?? []), ...(scripts ?? [])];
+
+      if (!isEmpty(webViews)) {
+        const views = webViews.map(
+          ({ contentModelType, contentModelZUID, customZNode, ...rest }) => {
+            return rest;
+          }
+        );
+
+        files = [...files, ...views];
+      }
+
+      return files;
+    }, [webViews, stylesheets, scripts]);
+
+    // Filter files based on file name
+    const filteredFiles: File[] = useMemo(() => {
+      const term = searchTerm?.toLowerCase();
+
+      /**
+       * Matches the ff:
+       * - File name
+       * - File ZUID
+       */
+      return allFiles?.filter(
+        (file) =>
+          file.fileName?.toLowerCase().includes(term) || file.ZUID === term
+      );
+    }, [allFiles, searchTerm]);
+
+    return [filteredFiles, setSearchTerm];
+  };
diff --git a/src/shell/services/instance.ts b/src/shell/services/instance.ts
@@ -1,4 +1,5 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
 import instanceZUID from "../../utility/instanceZUID";
 import { getResponseData, prepareHeaders } from "./util";
 import { resolveResourceType } from "../../utility/resolveResourceType";
@@ -16,6 +17,8 @@ import {
   Web,
   Meta,
   ContentNavItem,
+  Stylesheet,
+  Script,
 } from "./types";
 import { batchApiRequests } from "../../utility/batchApiRequests";
 
@@ -36,6 +39,8 @@ export const instanceApi = createApi({
     "WebViews",
     "InstanceSettings",
     "SearchQuery",
+    "Stylesheets",
+    "Scripts",
   ],
   endpoints: (builder) => ({
     // https://www.zesty.io/docs/instances/api-reference/content/models/items/publishings/#Get-All-Item-Publishings
@@ -332,8 +337,13 @@ export const instanceApi = createApi({
       ],
     }),
     // https://www.zesty.io/docs/instances/api-reference/content/#Get-View(s)
-    getWebViews: builder.query<WebView[], void>({
-      query: () => `/web/views`,
+    getWebViews: builder.query<WebView[], void | { status?: "live" | "dev" }>({
+      query: (params) => {
+        return {
+          url: "web/views",
+          params: params || {},
+        };
+      },
       transformResponse: getResponseData,
       providesTags: ["WebViews"],
     }),
@@ -393,6 +403,18 @@ export const instanceApi = createApi({
       query: () => `/env/nav`,
       transformResponse: getResponseData,
     }),
+    // https://www.zesty.io/docs/instances/api-reference/web/stylesheets/#Get-Stylesheet(s)
+    getStylesheets: builder.query<Stylesheet[], void>({
+      query: () => `/web/stylesheets`,
+      transformResponse: getResponseData,
+      providesTags: ["Stylesheets"],
+    }),
+    // https://www.zesty.io/docs/instances/api-reference/web/scripts/#Get-Script(s)
+    getScripts: builder.query<Script[], void>({
+      query: () => `/web/scripts`,
+      transformResponse: getResponseData,
+      providesTags: ["Scripts"],
+    }),
   }),
 });
 
@@ -427,5 +449,7 @@ export const {
   useUpdateInstanceSettingMutation,
   useCreateContentItemMutation,
   useGetContentNavItemsQuery,
+  useGetStylesheetsQuery,
+  useGetScriptsQuery,
   useCreateInstanceSettingsMutation,
 } = instanceApi;
diff --git a/src/shell/services/types.ts b/src/shell/services/types.ts
@@ -406,3 +406,35 @@ export interface ContentNavItem {
   contentModelZUID?: string;
   parentZUID?: string;
 }
+
+export interface Stylesheet {
+  ZUID: string;
+  status: "live" | "dev";
+  type: string;
+  fileName: string;
+  code: string;
+  lastEditedID: number;
+  template: number;
+  module: number;
+  plugin: number;
+  version: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface Script {
+  ZUID: string;
+  status: "live" | "dev";
+  type: string;
+  fileName: string;
+  code: string;
+  lastEditedID: number;
+  template: number;
+  module: number;
+  plugin: number;
+  version: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export type ResourceType = "schema" | "content" | "code";
diff --git a/src/shell/views/SearchPage/Filters/ResourceTypeFilter.tsx b/src/shell/views/SearchPage/Filters/ResourceTypeFilter.tsx
@@ -7,8 +7,13 @@ import {
   ListItemText,
   SvgIcon,
 } from "@mui/material";
-import { SvgIconComponent, EditRounded } from "@mui/icons-material";
+import {
+  SvgIconComponent,
+  EditRounded,
+  CodeRounded,
+} from "@mui/icons-material";
 import { Database } from "@zesty-io/material";
+import { ResourceType } from "../../../services/types";
 
 import { FilterButton } from "../../../components/Filters";
 
@@ -26,12 +31,16 @@ const RESOURCE_TYPE_OPTIONS: ResourceTypeOptions = {
     text: "Models",
     icon: Database as SvgIconComponent,
   },
+  code: {
+    text: "Code Files",
+    icon: CodeRounded,
+  },
 };
 
-export type ResourceType = "content" | "schema" | "";
+export type ResourceCodes = ResourceType | "";
 interface ResourceTypeFilter {
-  onChange: (value: ResourceType | "") => void;
-  value?: ResourceType;
+  onChange: (value: ResourceCodes) => void;
+  value?: ResourceCodes;
 }
 export const ResourceTypeFilter: FC<ResourceTypeFilter> = ({
   onChange,
@@ -41,7 +50,7 @@ export const ResourceTypeFilter: FC<ResourceTypeFilter> = ({
 
   const getButtonText = (): string => {
     if (Boolean(value) && value in RESOURCE_TYPE_OPTIONS) {
-      return RESOURCE_TYPE_OPTIONS[value as Exclude<ResourceType, "">].text;
+      return RESOURCE_TYPE_OPTIONS[value as ResourceType].text;
     }
 
     return "Resource Type";
diff --git a/src/shell/views/SearchPage/Filters/index.tsx b/src/shell/views/SearchPage/Filters/index.tsx
@@ -10,7 +10,8 @@ import {
 } from "../../../components/Filters/";
 import { useGetUsersQuery } from "../../../services/accounts";
 import { DateFilterValue } from "../../../components/Filters/DateFilter";
-import { ResourceTypeFilter, ResourceType } from "./ResourceTypeFilter";
+import { ResourceTypeFilter } from "./ResourceTypeFilter";
+import { ResourceType } from "../../../services/types";
 
 export const Filters = () => {
   const [params, setParams] = useParams();
diff --git a/src/shell/views/SearchPage/List/Code.tsx b/src/shell/views/SearchPage/List/Code.tsx
diff --git a/src/shell/views/SearchPage/List/SearchPageList.tsx b/src/shell/views/SearchPage/List/SearchPageList.tsx
diff --git a/src/shell/views/SearchPage/SearchPage.tsx b/src/shell/views/SearchPage/SearchPage.tsx
