wire it all up

coder · aslilac · Aug 14, 2024 · Aug 12, 2024 · Aug 13, 2024 · Aug 13, 2024
commit d65c61976f3d810e10076ea1e1619d36d66c28cb
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -304,9 +304,17 @@ export type GetTemplatesOptions = Readonly<{
   readonly deprecated?: boolean;
 }>;
 
+export type GetTemplatesQuery = Readonly<{
+  readonly q: string;
+}>;
+
 function normalizeGetTemplatesOptions(
-  options: GetTemplatesOptions = {},
+  options: GetTemplatesOptions | GetTemplatesQuery = {},
 ): Record<string, string> {
+  if ("q" in options) {
+    return options;
+  }
+
   const params: Record<string, string> = {};
   if (options.deprecated !== undefined) {
     params["deprecated"] = String(options.deprecated);
@@ -679,7 +687,7 @@ class ApiMethods {
   };
 
   getTemplates = async (
-    options?: GetTemplatesOptions,
+    options?: GetTemplatesOptions | GetTemplatesQuery,
   ): Promise<TypesGen.Template[]> => {
     const params = normalizeGetTemplatesOptions(options);
     const response = await this.axios.get<TypesGen.Template[]>(

diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -1,5 +1,5 @@
 import type { MutationOptions, QueryClient, QueryOptions } from "react-query";
-import { API, type GetTemplatesOptions } from "api/api";
+import { API, type GetTemplatesQuery, type GetTemplatesOptions } from "api/api";
 import type {
   CreateTemplateRequest,
   CreateTemplateVersionRequest,
@@ -38,12 +38,13 @@ export const templateByName = (
   };
 };
 
-const getTemplatesQueryKey = (options?: GetTemplatesOptions) => [
-  "templates",
-  options?.deprecated,
-];
+const getTemplatesQueryKey = (
+  options?: GetTemplatesOptions | GetTemplatesQuery,
+) => ["templates", options];
 
-export const templates = (options?: GetTemplatesOptions) => {
+export const templates = (
+  options?: GetTemplatesOptions | GetTemplatesQuery,
+) => {
   return {
     queryKey: getTemplatesQueryKey(options),
     queryFn: () => API.getTemplates(options),

diff --git a/site/src/pages/TemplatesPage/TemplatesFilter.tsx b/site/src/pages/TemplatesPage/TemplatesFilter.tsx
@@ -1,34 +1,30 @@
 import type { FC } from "react";
-import { useSearchParams } from "react-router-dom";
 import {
   Filter,
   MenuSkeleton,
   SearchFieldSkeleton,
-  useFilter,
+  type useFilter,
 } from "components/Filter/filter";
 import { useFilterMenu } from "components/Filter/menu";
 import {
  SelectFilter,
  SelectFilterOption,
 } from "components/Filter/SelectFilter";
 import { API } from "api/api";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { docs } from "utils/docs";
 import { Organization } from "api/typesGenerated";
 
-export const TemplatesFilter: FC = () => {
-  const searchParamsResult = useSearchParams();
-  const filter = useFilter({
-    fallbackFilter: "deprecated:false",
-    searchParamsResult,
-    onUpdate: () => {}, // reset pagination
-  });
+interface TemplatesFilterProps {
+  filter: ReturnType<typeof useFilter>;
+}
 
+export const TemplatesFilter: FC<TemplatesFilterProps> = ({ filter }) => {
   const organizationMenu = useFilterMenu({
     onChange: (option) =>
-      filter.update({ ...filter.values, template: option?.value }),
+      filter.update({ ...filter.values, organization: option?.value }),
     value: filter.values.organization,
-    id: "status",
+    id: "organization",
     getSelectedOption: async () => {
       if (!filter.values.organization) {
         return null;
@@ -47,7 +43,7 @@
     <Filter
       presets={[
         { query: "", name: "All templates" },
-        { query: "deprecated", name: "Deprecated templates" },
+        { query: "deprecated:true", name: "Deprecated templates" },
       ]}
       learnMoreLink={docs("/templates#template-filtering")}
       isLoading={false}

diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx
@@ -1,7 +1,9 @@
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
+import { useSearchParams } from "react-router-dom";
 import { templateExamples, templates } from "api/queries/templates";
+import { useFilter } from "components/Filter/filter";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { pageTitle } from "utils/page";
@@ -11,7 +13,14 @@ export const TemplatesPage: FC = () => {
   const { permissions } = useAuthenticated();
   const { showOrganizations } = useDashboard();
 
-  const templatesQuery = useQuery(templates());
+  const searchParamsResult = useSearchParams();
+  const filter = useFilter({
+    fallbackFilter: "deprecated:false",
+    searchParamsResult,
+    onUpdate: () => {}, // reset pagination
+  });
+
+  const templatesQuery = useQuery(templates({ q: filter.query }));
   const examplesQuery = useQuery({
     ...templateExamples(),
     enabled: permissions.createTemplates,
@@ -25,6 +34,7 @@ export const TemplatesPage: FC = () => {
       </Helmet>
       <TemplatesPageView
         error={error}
+        filter={filter}
         showOrganizations={showOrganizations}
         canCreateTemplates={permissions.createTemplates}
         examples={examplesQuery.data}

diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -17,6 +17,7 @@ import { ExternalAvatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/AvatarData/AvatarData";
 import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton";
 import { DeprecatedBadge } from "components/Badges/Badges";
+import type { useFilter } from "components/Filter/filter";
 import {
   HelpTooltip,
   HelpTooltipContent,
@@ -174,6 +175,7 @@ const TemplateRow: FC<TemplateRowProps> = ({ showOrganizations, template }) => {
 
 export interface TemplatesPageViewProps {
   error?: unknown;
+  filter: ReturnType<typeof useFilter>;
   showOrganizations: boolean;
   canCreateTemplates: boolean;
   examples: TemplateExample[] | undefined;
@@ -182,6 +184,7 @@ export interface TemplatesPageViewProps {
 
 export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
   error,
+  filter,
   showOrganizations,
   canCreateTemplates,
   examples,
@@ -221,7 +224,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
         )}
       </PageHeader>
 
-      <TemplatesFilter />
+      <TemplatesFilter filter={filter} />
 
       {error ? (
         <ErrorAlert error={error} />