feat: client side org filtering

jaaydenh · jaaydenh · commit 388e85a033af · 2024-07-15T16:35:38.000Z
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -47,10 +47,10 @@ export const templatesByOrganizationId = (
   };
 };
 
-export const templates = (config: TemplateFilter = {}) => {
+export const templates = (filter: TemplateFilter = {}) => {
   return {
-    queryKey: ["templates", config],
-    queryFn: () => API.getTemplates(config),
+    queryKey: ["templates", filter],
+    queryFn: () => API.getTemplates(filter),
   };
 };
 
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.tsx
@@ -5,7 +5,7 @@ import { templateExamples } from "api/queries/templates";
 import type { TemplateExample } from "api/typesGenerated";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { pageTitle } from "utils/page";
-import { getTemplatesByTag } from "utils/starterTemplates";
+import { getTemplatesByTag } from "utils/templateAggregators";
 import { StarterTemplatesPageView } from "./StarterTemplatesPageView";
 
 const StarterTemplatesPage: FC = () => {
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.stories.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.stories.tsx
@@ -5,7 +5,7 @@ import {
   MockTemplateExample,
   MockTemplateExample2,
 } from "testHelpers/entities";
-import { getTemplatesByTag } from "utils/starterTemplates";
+import { getTemplatesByTag } from "utils/templateAggregators";
 import { StarterTemplatesPageView } from "./StarterTemplatesPageView";
 
 const meta: Meta<typeof StarterTemplatesPageView> = {
diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx
@@ -11,7 +11,7 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
 import { TemplateExampleCard } from "modules/templates/TemplateExampleCard/TemplateExampleCard";
-import type { StarterTemplatesByTag } from "utils/starterTemplates";
+import type { StarterTemplatesByTag } from "utils/templateAggregators";
 
 const getTagLabel = (tag: string) => {
   const labelByTag: Record<string, string> = {
diff --git a/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.stories.tsx
@@ -6,6 +6,7 @@ import {
   MockTemplateExample,
   MockTemplateExample2,
 } from "testHelpers/entities";
+import { getTemplatesByOrg } from "utils/templateAggregators";
 import { TemplatesPageView } from "./TemplatesPageView";
 
 const meta: Meta<typeof TemplatesPageView> = {
@@ -21,7 +22,7 @@ export const WithTemplates: Story = {
   args: {
     canCreateTemplates: true,
     error: undefined,
-    templates: [
+    templatesByOrg: getTemplatesByOrg([
       MockTemplate,
       {
         ...MockTemplate,
@@ -62,7 +63,7 @@ export const WithTemplates: Story = {
         display_name: "Deprecated",
         description: "Template is incompatible",
       },
-    ],
+    ]),
     examples: [],
   },
 };
@@ -71,15 +72,15 @@ export const EmptyCanCreate: Story = {
   args: {
     canCreateTemplates: true,
     error: undefined,
-    templates: [],
+    templatesByOrg: getTemplatesByOrg([]),
     examples: [MockTemplateExample, MockTemplateExample2],
   },
 };
 
 export const EmptyCannotCreate: Story = {
   args: {
     error: undefined,
-    templates: [],
+    templatesByOrg: getTemplatesByOrg([]),
     examples: [MockTemplateExample, MockTemplateExample2],
     canCreateTemplates: false,
   },
@@ -90,7 +91,7 @@ export const Error: Story = {
     error: mockApiError({
       message: "Something went wrong fetching templates.",
     }),
-    templates: undefined,
+    templatesByOrg: undefined,
     examples: undefined,
     canCreateTemplates: false,
   },
diff --git a/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.tsx
@@ -1,7 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import type { FC } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import type { Template, TemplateExample } from "api/typesGenerated";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import type { TemplateExample } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import {
   HelpTooltip,
@@ -12,6 +12,7 @@ import {
   HelpTooltipTitle,
   HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
+import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import {
   PageHeader,
@@ -21,6 +22,7 @@ import {
 import { Stack } from "components/Stack/Stack";
 import { TemplateCard } from "modules/templates/TemplateCard/TemplateCard";
 import { docs } from "utils/docs";
+import type { TemplatesByOrg } from "utils/templateAggregators";
 import { CreateTemplateButton } from "../CreateTemplateButton";
 import { EmptyTemplates } from "../EmptyTemplates";
 
@@ -49,51 +51,32 @@ const TemplateHelpTooltip: FC = () => {
 };
 
 export interface TemplatesPageViewProps {
-  templates: Template[] | undefined;
+  templatesByOrg?: TemplatesByOrg;
   examples: TemplateExample[] | undefined;
   canCreateTemplates: boolean;
-  query: string | undefined;
   error?: unknown;
 }
 
-export type TemplatesByOrg = Record<
-  string,
-  { displayName: string; count: number }
->;
-
-const getTemplatesByOrg = (templates: Template[]): TemplatesByOrg => {
-  const orgs: TemplatesByOrg = {
-    all: { displayName: "All Organizations", count: 0 },
-  };
-
-  templates.forEach((template) => {
-    if (orgs[template.organization_name]) {
-      orgs[template.organization_name].count += 1;
-    } else {
-      orgs[template.organization_name] = {
-        displayName: template.organization_display_name,
-        count: 1,
-      };
-    }
-
-    orgs.all.count += 1;
-  });
-
-  return orgs;
+const sortOrgs = (templatesByOrg: TemplatesByOrg) => {
+  return templatesByOrg
+    ? Object.keys(templatesByOrg).sort((a, b) => a.localeCompare(b))
+    : undefined;
 };
 
 export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
-  templates,
+  templatesByOrg,
   examples,
   canCreateTemplates,
-  query,
   error,
 }) => {
   const navigate = useNavigate();
-  const isEmpty = templates && templates.length === 0;
-  const q = query?.split(":") || [];
-  const activeOrg = q[0] === "organization" ? query?.split(":")[1] : "all";
-  const templatesByOrg = getTemplatesByOrg(templates ?? []);
+  const [urlParams] = useSearchParams();
+  const isEmpty = templatesByOrg && templatesByOrg["all"].length === 0;
+  const orgs = templatesByOrg ? sortOrgs(templatesByOrg) : undefined;
+  const activeOrg = urlParams.get("org") ?? "all";
+  const visibleTemplates = templatesByOrg
+    ? templatesByOrg[activeOrg]
+    : undefined;
 
   return (
     <Margins>
@@ -108,7 +91,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
             <TemplateHelpTooltip />
           </Stack>
         </PageHeaderTitle>
-        {templates && templates.length > 0 && (
+        {!isEmpty && (
           <PageHeaderSubtitle>
             Select a template to create a workspace.
           </PageHeaderSubtitle>
@@ -119,19 +102,28 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
         <ErrorAlert error={error} css={{ marginBottom: 32 }} />
       )}
 
+      {Boolean(!templatesByOrg) && <Loader />}
+
       <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.entries(templatesByOrg).map(([key, value]) => (
-            <Link
-              key={key}
-              to={key !== "all" ? `?filter=organization:${key}` : "?"}
-              css={[styles.tagLink, key === activeOrg && styles.tagLinkActive]}
-            >
-              {value.displayName} ({value.count ?? 0})
-            </Link>
-          ))}
-        </Stack>
+        {templatesByOrg && orgs && (
+          <Stack
+            css={{ width: 208, flexShrink: 0, position: "sticky", top: 48 }}
+          >
+            <span css={styles.filterCaption}>ORGANIZATION</span>
+            {orgs.map((org) => (
+              <Link
+                key={org}
+                to={`?org=${org}`}
+                css={[
+                  styles.tagLink,
+                  org === activeOrg && styles.tagLinkActive,
+                ]}
+              >
+                {org} ({templatesByOrg[org].length})
+              </Link>
+            ))}
+          </Stack>
+        )}
 
         <div
           css={{
@@ -147,8 +139,8 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
               examples={examples ?? []}
             />
           ) : (
-            templates &&
-            templates.map((template) => (
+            visibleTemplates &&
+            visibleTemplates.map((template) => (
               <TemplateCard
                 css={(theme) => ({
                   backgroundColor: theme.palette.background.paper,
diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx
@@ -1,29 +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 { getTemplatesByOrg } from "utils/templateAggregators";
 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({ q: query }));
+  const templatesQuery = useQuery(templates());
+  const templatesByOrg = templatesQuery.data
+    ? getTemplatesByOrg(templatesQuery.data)
+    : undefined;
   const examplesQuery = useQuery({
     ...templateExamples(organizationId),
     enabled: permissions.createTemplates,
@@ -41,11 +41,10 @@ export const TemplatesPage: FC = () => {
       </Helmet>
       {multiOrgExperimentEnabled ? (
         <MultiOrgTemplatesPageView
-          error={error}
-          canCreateTemplates={permissions.createTemplates}
+          templatesByOrg={templatesByOrg}
           examples={examplesQuery.data}
-          templates={templatesQuery.data}
-          query={query}
+          canCreateTemplates={permissions.createTemplates}
+          error={error}
         />
       ) : (
         <TemplatesPageView
diff --git a/site/src/utils/templateAggregators.ts b/site/src/utils/templateAggregators.ts
@@ -1,6 +1,7 @@
-import type { TemplateExample } from "api/typesGenerated";
+import type { Template, TemplateExample } from "api/typesGenerated";
 
 export type StarterTemplatesByTag = Record<string, TemplateExample[]>;
+export type TemplatesByOrg = Record<string, Template[]>;
 
 export const getTemplatesByTag = (
   templates: TemplateExample[],
@@ -22,3 +23,20 @@ export const getTemplatesByTag = (
 
   return tags;
 };
+
+export const getTemplatesByOrg = (templates: Template[]): TemplatesByOrg => {
+  const orgs: TemplatesByOrg = {
+    all: templates,
+  };
+
+  templates.forEach((template) => {
+    const org = template.organization_name;
+    if (orgs[org]) {
+      orgs[org].push(template);
+    } else {
+      orgs[org] = [template];
+    }
+  });
+
+  return orgs;
+};
