Jul 19, 2024 · Jul 1, 2024 · Jul 2, 2024 · Jul 3, 2024 · Jul 3, 2024 · Jul 3, 2024
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
  };
 };

 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
 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> = {
diff --git a/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.stories.tsx
  MockTemplateExample,
  MockTemplateExample2,
 } from "testHelpers/entities";
 import { getTemplatesByOrg } from "utils/templateAggregators";
 import { TemplatesPageView } from "./TemplatesPageView";

 const meta: Meta<typeof TemplatesPageView> = {
  args: {
    canCreateTemplates: true,
    error: undefined,
 templates:[
 templatesByOrg: getTemplatesByOrg([
      MockTemplate,
      {
        ...MockTemplate,
        display_name: "Deprecated",
        description: "Template is incompatible",
      },
    ],
    ]),
    examples: [],
  },
 };
  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,
  },
    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
 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,
  HelpTooltipTitle,
  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import {
  PageHeader,
 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";

 };

 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>
            <TemplateHelpTooltip />
          </Stack>
        </PageHeaderTitle>
        {templates && templates.length > 0 && (
        {!isEmpty && (
          <PageHeaderSubtitle>
            Select a template to create a workspace.
          </PageHeaderSubtitle>
        <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={{
              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
 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,
      </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/starterTemplates.ts → site/src/utils/templateAggregators.ts b/site/src/utils/starterTemplates.ts → site/src/utils/templateAggregators.ts
 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[],

  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;
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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),
		};
		};

Expand Down
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
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,6 +6,7 @@ import {
		MockTemplateExample,
		MockTemplateExample2,
		} from "testHelpers/entities";
		import { getTemplatesByOrg } from "utils/templateAggregators";
		import { TemplatesPageView } from "./TemplatesPageView";

		const meta: Meta<typeof TemplatesPageView> = {
Expand All		@@ -21,7 +22,7 @@ export const WithTemplates: Story = {
		args: {
		canCreateTemplates: true,
		error: undefined,
		templates:[
		templatesByOrg: getTemplatesByOrg([
		MockTemplate,
		{
		...MockTemplate,
Expand DownExpand Up		@@ -62,7 +63,7 @@ export const WithTemplates: Story = {
		display_name: "Deprecated",
		description: "Template is incompatible",
		},
		],
		]),
		examples: [],
		},
		};
Expand All		@@ -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,
		},
Expand All		@@ -90,7 +91,7 @@ export const Error: Story = {
		error: mockApiError({
		message: "Something went wrong fetching templates.",
		}),
		templates: undefined,
		templatesByOrg: undefined,
		examples: undefined,
		canCreateTemplates: false,
		},
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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,
Expand All		@@ -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,
Expand All		@@ -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";

Expand DownExpand Up		@@ -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>
Expand All		@@ -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>
Expand All		@@ -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={{
Expand All		@@ -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,
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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,
Expand All		@@ -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
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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[],
Expand All		@@ -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];
		}
		});
jaaydenh marked this conversation as resolved. OutdatedShow resolvedHide resolved

		return orgs;
		};
jaaydenh marked this conversation as resolved. Show resolvedHide resolved