feat: update template filter api logic

coder · jaaydenh · Jul 19, 2024 · Jul 1, 2024 · Jul 2, 2024 · Jul 3, 2024
commit 461202e2cff2db560bf197d837a855d7cb4fedda
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -187,8 +187,7 @@ export const watchBuildLogsByTemplateVersionId = (
 
   const proto = location.protocol === "https:" ? "wss:" : "ws:";
   const socket = new WebSocket(
-    `${proto}//${
-      location.host
+    `${proto}//${location.host
     }/api/v2/templateversions/${versionId}/logs?${searchParams.toString()}`,
   );
 
@@ -270,8 +269,7 @@ export const watchBuildLogsByBuildId = (
   }
   const proto = location.protocol === "https:" ? "wss:" : "ws:";
   const socket = new WebSocket(
-    `${proto}//${
-      location.host
+    `${proto}//${location.host
     }/api/v2/workspacebuilds/${buildId}/logs?${searchParams.toString()}`,
   );
   socket.binaryType = "blob";
@@ -382,7 +380,7 @@ export class MissingBuildParameters extends Error {
  * lexical scope.
  */
 class ApiMethods {
-  constructor(protected readonly axios: AxiosInstance) {}
+  constructor(protected readonly axios: AxiosInstance) { }
 
   login = async (
     email: string,
@@ -599,21 +597,10 @@ class ApiMethods {
   };
 
   getTemplates = async (
-    options?: TemplateOptions,
+    options?: TypesGen.TemplateFilter,
   ): Promise<TypesGen.Template[]> => {
-    const params: Record<string, string> = {};
-    if (options?.deprecated !== undefined) {
-      // Just want to check if it isn't undefined. If it has
-      // a boolean value, convert it to a string and include
-      // it as a param.
-      params["deprecated"] = String(options.deprecated);
-    }
-
-    const response = await this.axios.get<TypesGen.Template[]>(
-      `/api/v2/templates`,
-      { params },
-    );
-
+    const url = getURLWithSearchParams("/api/v2/templates", options);
+    const response = await this.axios.get<TypesGen.Template[]>(url);
     return response.data;
   };
 

diff --git a/site/src/api/queries/audits.ts b/site/src/api/queries/audits.ts
@@ -1,14 +1,14 @@
 import { API } from "api/api";
 import type { AuditLogResponse } from "api/typesGenerated";
-import { useFilterParamsKey } from "components/Filter/filter";
 import type { UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
+import { filterParamsKey } from "utils/filters";
 
 export function paginatedAudits(
   searchParams: URLSearchParams,
 ): UsePaginatedQueryOptions<AuditLogResponse, string> {
   return {
     searchParams,
-    queryPayload: () => searchParams.get(useFilterParamsKey) ?? "",
+    queryPayload: () => searchParams.get(filterParamsKey) ?? "",
     queryKey: ({ payload, pageNumber }) => {
       return ["auditLogs", payload, pageNumber] as const;
     },

diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -1,6 +1,7 @@
 import type { MutationOptions, QueryClient, QueryOptions } from "react-query";
 import { API } from "api/api";
 import type {
+  TemplateFilter,
   CreateTemplateRequest,
   CreateTemplateVersionRequest,
   ProvisionerJob,
@@ -46,15 +47,10 @@ export const templatesByOrganizationId = (
   };
 };
 
-const getTemplatesQueryKey = (deprecated?: boolean) => [
-  "templates",
-  deprecated,
-];
-
-export const templates = (deprecated?: boolean) => {
+export const templates = (config: TemplateFilter = {}) => {
   return {
-    queryKey: getTemplatesQueryKey(deprecated),
-    queryFn: () => API.getTemplates({ deprecated }),
+    queryKey: ["templates", config],
+    queryFn: () => API.getTemplates(config),
   };
 };
 

diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
@@ -16,6 +16,7 @@ import {
 import { InputGroup } from "components/InputGroup/InputGroup";
 import { SearchField } from "components/SearchField/SearchField";
 import { useDebouncedFunction } from "hooks/debounce";
+import { filterParamsKey } from "utils/filters";
 
 export type PresetFilter = {
   name: string;
@@ -35,21 +36,19 @@ type UseFilterConfig = {
   onUpdate?: (newValue: string) => void;
 };
 
-export const useFilterParamsKey = "filter";
-
 export const useFilter = ({
   fallbackFilter = "",
   searchParamsResult,
   onUpdate,
 }: UseFilterConfig) => {
   const [searchParams, setSearchParams] = searchParamsResult;
-  const query = searchParams.get(useFilterParamsKey) ?? fallbackFilter;
+  const query = searchParams.get(filterParamsKey) ?? fallbackFilter;
 
   const update = (newValues: string | FilterValues) => {
     const serialized =
       typeof newValues === "string" ? newValues : stringifyFilter(newValues);
 
-    searchParams.set(useFilterParamsKey, serialized);
+    searchParams.set(filterParamsKey, serialized);
     setSearchParams(searchParams);
 
     if (onUpdate !== undefined) {

diff --git a/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.tsx
@@ -52,6 +52,7 @@ export interface TemplatesPageViewProps {
   templates: Template[] | undefined;
   examples: TemplateExample[] | undefined;
   canCreateTemplates: boolean;
+  query: string | undefined;
   error?: unknown;
 }
 
@@ -79,14 +80,12 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
   templates,
   examples,
   canCreateTemplates,
+  query,
   error,
 }) => {
-  const [urlParams] = useSearchParams();
-  const isEmpty = templates && templates.length === 0;
   const navigate = useNavigate();
-
-  const activeOrg = urlParams.get("org") ?? "all";
-
+  const isEmpty = templates && templates.length === 0;
+  const activeOrg = query?.split(":")[1] ?? "all";
   const templatesByOrg = getTemplatesByOrg(templates ?? []);
 
   return (
@@ -109,15 +108,17 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
         )}
       </PageHeader>
 
-      {Boolean(error) && <ErrorAlert error={error} />}
+      {Boolean(error) && (
+        <ErrorAlert error={error} css={{ marginBottom: 32 }} />
+      )}
 
       <Stack direction="row" spacing={4} alignItems="flex-start">
         <Stack css={{ width: 208, flexShrink: 0, position: "sticky", top: 48 }}>
           <span css={styles.filterCaption}>ORGANIZATION</span>
           {Object.keys(templatesByOrg).map((org) => (
             <Link
               key={org}
-              to={`?org=${org}`}
+              to={org !== "all" ? `?filter=organization:${org}` : "?"}
               css={[styles.tagLink, org === activeOrg && styles.tagLinkActive]}
             >
               {org === "all" ? "All Organizations" : org} (

diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx
@@ -1,25 +1,29 @@
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
+import { useSearchParams } from "react-router-dom";
 import {
   templateExamples,
   templatesByOrganizationId,
   templates,
 } from "api/queries/templates";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { useDashboard } from "modules/dashboard/useDashboard";
+import { filterParamsKey } from "utils/filters";
 import { pageTitle } from "utils/page";
 import { TemplatesPageView as MultiOrgTemplatesPageView } from "./MultiOrgTemplatePage/TemplatesPageView";
 import { TemplatesPageView } from "./TemplatePage/TemplatesPageView";
 
 export const TemplatesPage: FC = () => {
   const { permissions } = useAuthenticated();
   const { organizationId, experiments } = useDashboard();
+  const [searchParams] = useSearchParams();
+  const query = searchParams.get(filterParamsKey) || undefined;
 
   const templatesByOrganizationIdQuery = useQuery(
     templatesByOrganizationId(organizationId),
   );
-  const templatesQuery = useQuery(templates());
+  const templatesQuery = useQuery(templates({ q: query }));
   const examplesQuery = useQuery({
     ...templateExamples(organizationId),
     enabled: permissions.createTemplates,
@@ -41,6 +45,7 @@ export const TemplatesPage: FC = () => {
           canCreateTemplates={permissions.createTemplates}
           examples={examplesQuery.data}
           templates={templatesQuery.data}
+          query={query}
         />
       ) : (
         <TemplatesPageView

diff --git a/site/src/utils/filters.ts b/site/src/utils/filters.ts
@@ -4,3 +4,4 @@ export function prepareQuery(query: string | undefined): string | undefined;
 export function prepareQuery(query?: string): string | undefined {
   return query?.trim().replace(/  +/g, " ");
 }
+export const filterParamsKey = "filter";