Jul 19, 2024 · Jul 1, 2024 · Jul 2, 2024 · Jul 3, 2024 · Jul 3, 2024 · Jul 3, 2024
diff --git a/codersdk/organizations.go b/codersdk/organizations.go
 }

 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.
 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
    return response.data;
  };

 getTemplates = async (
 getTemplatesByOrganizationId = async (
    organizationId: string,
    options?: TemplateOptions,
  ): Promise<TypesGen.Template[]> => {
    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
 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
 import type { MutationOptions, QueryClient, QueryOptions } from "react-query";
 import { API } from "api/api";
 import type {
  TemplateFilter,
  CreateTemplateRequest,
  CreateTemplateVersionRequest,
  ProvisionerJob,
  };
 };

 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),
  };
 };


 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
 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;
  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
 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
 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
 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
  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
 } 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> = {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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.
Expand All		@@ -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()
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -578,7 +578,7 @@ class ApiMethods {
		return response.data;
		};

		getTemplates = async (
		getTemplatesByOrganizationId = async (
		organizationId: string,
		options?: TemplateOptions,
		): Promise<TypesGen.Template[]> => {
Expand All		@@ -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,
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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;
		},
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,7 @@
		import type { MutationOptions, QueryClient, QueryOptions } from "react-query";
		import { API } from "api/api";
		import type {
		TemplateFilter,
		CreateTemplateRequest,
		CreateTemplateVersionRequest,
		ProvisionerJob,
Expand DownExpand Up		@@ -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),
		};
		};

Expand DownExpand Up		@@ -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),
		};
		};
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
Expand All		@@ -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) {
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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,
		},
		},
		};
Original file line number	Diff line number	Diff line change
		@@ -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
Copy link Member aslilacJul 15, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. super minor nit, I tend to call these sorts of captures`attrs`, but there's definitely precedent for calling it`whateverProps` too. maybe this is something we should consolidate on... Copy link ContributorAuthor jaaydenhJul 16, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I was following the pattern in the files I was working on. In other code bases/the React docs, this is often called ...props as well. I think it depends if we want to call them based on what they are, "props" or how they are used, props on divs "divProps" or attributes on divs "attrs"
		}) => {
		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>>;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 = () => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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> = {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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> = {
Expand Down