coder · jaaydenh · Jul 19, 2024 · Jul 1, 2024 · Jul 2, 2024 · Jul 3, 2024
diff --git a/codersdk/organizations.go b/codersdk/organizations.go
@@ -367,8 +367,9 @@ func (c *Client) TemplatesByOrganization(ctx context.Context, organizationID uui
 }
 
 type TemplateFilter struct {
-	OrganizationID uuid.UUID
-	ExactName      string
+	OrganizationID uuid.UUID `json:"organization_id,omitempty" format:"uuid" typescript:"-"`
+	FilterQuery    string    `json:"q,omitempty"`
+	ExactName      string    `json:"exact_name,omitempty" typescript:"-"`
 }
 
 // asRequestOption returns a function that can be used in (*Client).Request.
@@ -386,6 +387,11 @@ func (f TemplateFilter) asRequestOption() RequestOption {
 			params = append(params, fmt.Sprintf("exact_name:%q", f.ExactName))
 		}
 
+		if f.FilterQuery != "" {
+			// If custom stuff is added, just add it on here.
+			params = append(params, f.FilterQuery)
+		}
+
 		q := r.URL.Query()
 		q.Set("q", strings.Join(params, " "))
 		r.URL.RawQuery = q.Encode()

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -578,7 +578,7 @@ class ApiMethods {
     return response.data;
   };
 
-  getTemplates = async (
+  getTemplatesByOrganizationId = async (
     organizationId: string,
     options?: TemplateOptions,
   ): Promise<TypesGen.Template[]> => {
@@ -598,6 +598,14 @@ class ApiMethods {
     return response.data;
   };
 
+  getTemplates = async (
+    options?: TypesGen.TemplateFilter,
+  ): Promise<TypesGen.Template[]> => {
+    const url = getURLWithSearchParams("/api/v2/templates", options);
+    const response = await this.axios.get<TypesGen.Template[]>(url);
+    return response.data;
+  };
+
   getTemplateByName = async (
     organizationId: string,
     name: string,

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,
@@ -30,16 +31,26 @@ export const templateByName = (
   };
 };
 
-const getTemplatesQueryKey = (organizationId: string, deprecated?: boolean) => [
-  organizationId,
-  "templates",
-  deprecated,
-];
+const getTemplatesByOrganizationIdQueryKey = (
+  organizationId: string,
+  deprecated?: boolean,
+) => [organizationId, "templates", deprecated];
+
+export const templatesByOrganizationId = (
+  organizationId: string,
+  deprecated?: boolean,
+) => {
+  return {
+    queryKey: getTemplatesByOrganizationIdQueryKey(organizationId, deprecated),
+    queryFn: () =>
+      API.getTemplatesByOrganizationId(organizationId, { deprecated }),
+  };
+};
 
-export const templates = (organizationId: string, deprecated?: boolean) => {
+export const templates = (filter?: TemplateFilter) => {
   return {
-    queryKey: getTemplatesQueryKey(organizationId, deprecated),
-    queryFn: () => API.getTemplates(organizationId, { deprecated }),
+    queryKey: ["templates", filter],
+    queryFn: () => API.getTemplates(filter),
   };
 };
 
@@ -92,7 +103,10 @@ export const setGroupRole = (
 
 export const templateExamples = (organizationId: string) => {
   return {
-    queryKey: [...getTemplatesQueryKey(organizationId), "examples"],
+    queryKey: [
+      ...getTemplatesByOrganizationIdQueryKey(organizationId),
+      "examples",
+    ],
     queryFn: () => API.getTemplateExamples(organizationId),
   };
 };

diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
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/modules/templates/TemplateCard/TemplateCard.stories.tsx b/site/src/modules/templates/TemplateCard/TemplateCard.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
+import { MockTemplate } from "testHelpers/entities";
+import { TemplateCard } from "./TemplateCard";
+
+const meta: Meta<typeof TemplateCard> = {
+  title: "modules/templates/TemplateCard",
+  parameters: { chromatic },
+  component: TemplateCard,
+  args: {
+    template: MockTemplate,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateCard>;
+
+export const Template: Story = {};
+
+export const DeprecatedTemplate: Story = {
+  args: {
+    template: {
+      ...MockTemplate,
+      deprecated: true,
+    },
+  },
+};
+
+export const LongContentTemplate: Story = {
+  args: {
+    template: {
+      ...MockTemplate,
+      display_name: "Very Long Template Name",
+      organization_display_name: "Very Long Organization Name",
+      description:
+        "This is a very long test description. This is a very long test description. This is a very long test description. This is a very long test description",
+      active_user_count: 999,
+    },
+  },
+};
diff --git a/site/src/modules/templates/TemplateCard/TemplateCard.tsx b/site/src/modules/templates/TemplateCard/TemplateCard.tsx
@@ -0,0 +1,144 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined";
+import Button from "@mui/material/Button";
+import type { FC, HTMLAttributes } from "react";
+import { Link as RouterLink, useNavigate } from "react-router-dom";
+import type { Template } from "api/typesGenerated";
+import { ExternalAvatar } from "components/Avatar/Avatar";
+import { AvatarData } from "components/AvatarData/AvatarData";
+import { DeprecatedBadge } from "components/Badges/Badges";
+
+type TemplateCardProps = HTMLAttributes<HTMLDivElement> & {
+  template: Template;
+};
+
+export const TemplateCard: FC<TemplateCardProps> = ({
+  template,
+  ...divProps
+}) => {
+  const navigate = useNavigate();
+  const templatePageLink = `/templates/${template.name}`;
+  const hasIcon = template.icon && template.icon !== "";
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && e.currentTarget === e.target) {
+      navigate(templatePageLink);
+    }
+  };
+
+  return (
+    <div
+      css={styles.card}
+      {...divProps}
+      role="button"
+      tabIndex={0}
+      onClick={() => navigate(templatePageLink)}
+      onKeyDown={handleKeyDown}
+    >
+      <div css={styles.header}>
+        <div>
+          <AvatarData
+            title={
+              template.display_name.length > 0
+                ? template.display_name
+                : template.name
+            }
+            subtitle={template.organization_display_name}
+            avatar={
+              hasIcon && (
+                <ExternalAvatar variant="square" fitImage src={template.icon} />
+              )
+            }
+          />
+        </div>
+        <div>
+          {template.active_user_count}{" "}
+          {template.active_user_count === 1 ? "user" : "users"}
+        </div>
+      </div>
+
+      <div>
+        <span css={styles.description}>
+          <p>{template.description}</p>
+        </span>
+      </div>
+
+      <div css={styles.useButtonContainer}>
+        {template.deprecated ? (
+          <DeprecatedBadge />
+        ) : (
+          <Button
+            component={RouterLink}
+            css={styles.actionButton}
+            className="actionButton"
+            fullWidth
+            startIcon={<ArrowForwardOutlined />}
+            title={`Create a workspace using the ${template.display_name} template`}
+            to={`/templates/${template.name}/workspace`}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            Create Workspace
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  card: (theme) => ({
+    width: "320px",
+    padding: 24,
+    borderRadius: 6,
+    border: `1px solid ${theme.palette.divider}`,
+    textAlign: "left",
+    color: "inherit",
+    display: "flex",
+    flexDirection: "column",
+    cursor: "pointer",
+    "&:hover": {
+      color: theme.experimental.l2.hover.text,
+      borderColor: theme.experimental.l2.hover.text,
+    },
+  }),
+
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 24,
+  },
+
+  icon: {
+    flexShrink: 0,
+    paddingTop: 4,
+    width: 32,
+    height: 32,
+  },
+
+  description: (theme) => ({
+    fontSize: 13,
+    color: theme.palette.text.secondary,
+    lineHeight: "1.6",
+    display: "block",
+  }),
+
+  useButtonContainer: {
+    display: "flex",
+    gap: 12,
+    flexDirection: "column",
+    paddingTop: 24,
+    marginTop: "auto",
+    alignItems: "center",
+  },
+
+  actionButton: (theme) => ({
+    transition: "none",
+    color: theme.palette.text.secondary,
+    "&:hover": {
+      borderColor: theme.palette.text.primary,
+    },
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
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> = {