Jul 19, 2024 · Jul 1, 2024 · Jul 2, 2024 · Jul 3, 2024 · Jul 3, 2024 · Jul 3, 2024
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?: TemplateOptions,
  ): Promise<TypesGen.Template[]> => {
    const params: Record<string, string> = {};
    if (options?.deprecated !== undefined) {
      // Just want to check if it isn't undefined. If it has
      // a boolean value, convert it to a string and include
      // it as a param.
      params["deprecated"] = String(options.deprecated);
    }

    const response = await this.axios.get<TypesGen.Template[]>(
      `/api/v2/templates`,
      { params },
    );

    return response.data;
  };

  getTemplateByName = async (
    organizationId: string,
    name: string,
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
  };
 };

 constgetTemplatesQueryKey = (organizationId: string, deprecated?: boolean) => [
 constgetTemplatesByOrganizationIdQueryKey = (organizationId: string, deprecated?: boolean) => [
  organizationId,
  "templates",
  deprecated,
 ];

 export consttemplates = (organizationId: string, deprecated?: boolean) => {
 export consttemplatesByOrganizationId = (organizationId: string, deprecated?: boolean) => {
  return {
    queryKey: getTemplatesQueryKey(organizationId, deprecated),
    queryFn: () => API.getTemplates(organizationId, { deprecated }),
    queryKey: getTemplatesByOrganizationIdQueryKey(organizationId, deprecated),
    queryFn: () => API.getTemplatesByOrganizationId(organizationId, { deprecated }),
  };
 };

 const getTemplatesQueryKey = (deprecated?: boolean) => [
  "templates",
  deprecated,
 ];

 export const templates = (deprecated?: boolean) => {
  return {
    queryKey: getTemplatesQueryKey(deprecated),
    queryFn: () => API.getTemplates({ deprecated }),
  };
 };


 export const templateExamples = (organizationId: string) => {
  return {
    queryKey: [...getTemplatesQueryKey(organizationId), "examples"],
    queryKey: [...getTemplatesByOrganizationIdQueryKey(organizationId), "examples"],
    queryFn: () => API.getTemplateExamples(organizationId),
  };
 };
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 { templateExamples, templates } from "api/queries/templates";
 import { myOrganizations } from "api/queries/users";
 import { templateExamples, templatesByOrganizationId, templates, } from "api/queries/templates";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { pageTitle } from "utils/page";
 import { TemplatesPageView } from "./TemplatesPageView";
 import {TemplatesPageViewV2 } from "./TemplatesPageViewV2";
 import { TemplatesPageViewas MultiOrgTemplatesPageView} from "./MultiOrgTemplatePage/TemplatesPageView";
 import {TemplatesPageView } from "./TemplatePage/TemplatesPageView";

 export const TemplatesPage: FC = () => {
  const { permissions } = useAuthenticated();
  const { organizationId, experiments } = useDashboard();

  constorganizationsQuery = useQuery(myOrganizations());
  const templatesQuery = useQuery(templates(organizationId));
  consttemplatesByOrganizationIdQuery = useQuery(templatesByOrganizationId(organizationId));
  const templatesQuery = useQuery(templates());
  const examplesQuery = useQuery({
    ...templateExamples(organizationId),
    enabled: permissions.createTemplates,
  });
  const error =templatesQuery.error || examplesQuery.error ||organizationsQuery.error;
  const error =templatesByOrganizationIdQuery.error || examplesQuery.error ||templatesQuery.error;
  const multiOrgExperimentEnabled = experiments.includes("multi-organization");

  return (
        <title>{pageTitle("Templates")}</title>
      </Helmet>
      {multiOrgExperimentEnabled ? (
        <TemplatesPageViewV2
        <MultiOrgTemplatesPageView
          error={error}
          canCreateTemplates={permissions.createTemplates}
          examples={examplesQuery.data}
          templates={templatesQuery.data}
          organizations={organizationsQuery.data}
        />
    ) : (
        <TemplatesPageView
          error={error}
          canCreateTemplates={permissions.createTemplates}
          examples={examplesQuery.data}
          templates={templatesQuery.data}
          templates={templatesByOrganizationIdQuery.data}
        />
    )}
    </>
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
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,25 @@ class ApiMethods {
		return response.data;
		};

		getTemplates = async (
		options?: TemplateOptions,
		): Promise<TypesGen.Template[]> => {
		const params: Record<string, string> = {};
		if (options?.deprecated !== undefined) {
		// Just want to check if it isn't undefined. If it has
		// a boolean value, convert it to a string and include
		// it as a param.
		params["deprecated"] = String(options.deprecated);
		}

		const response = await this.axios.get<TypesGen.Template[]>(
		`/api/v2/templates`,
		{ params },
		);

		return response.data;
		};

		getTemplateByName = async (
		organizationId: string,
		name: string,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -30,16 +30,28 @@ export const templateByName = (
		};
		};

		constgetTemplatesQueryKey = (organizationId: string, deprecated?: boolean) => [
		constgetTemplatesByOrganizationIdQueryKey = (organizationId: string, deprecated?: boolean) => [
		organizationId,
		"templates",
		deprecated,
		];

		export consttemplates = (organizationId: string, deprecated?: boolean) => {
		export consttemplatesByOrganizationId = (organizationId: string, deprecated?: boolean) => {
		return {
		queryKey: getTemplatesQueryKey(organizationId, deprecated),
		queryFn: () => API.getTemplates(organizationId, { deprecated }),
		queryKey: getTemplatesByOrganizationIdQueryKey(organizationId, deprecated),
		queryFn: () => API.getTemplatesByOrganizationId(organizationId, { deprecated }),
		};
		};

		const getTemplatesQueryKey = (deprecated?: boolean) => [
		"templates",
		deprecated,
		];

		export const templates = (deprecated?: boolean) => {
		return {
		queryKey: getTemplatesQueryKey(deprecated),
		queryFn: () => API.getTemplates({ deprecated }),
		};
		};

Expand DownExpand Up		@@ -92,7 +104,7 @@ 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
		@@ -1,25 +1,24 @@
		import type { FC } from "react";
		import { Helmet } from "react-helmet-async";
		import { useQuery } from "react-query";
		import { templateExamples, templates } from "api/queries/templates";
		import { myOrganizations } from "api/queries/users";
		import { templateExamples, templatesByOrganizationId, templates, } from "api/queries/templates";
		import { useAuthenticated } from "contexts/auth/RequireAuth";
		import { useDashboard } from "modules/dashboard/useDashboard";
		import { pageTitle } from "utils/page";
		import { TemplatesPageView } from "./TemplatesPageView";
		import {TemplatesPageViewV2 } from "./TemplatesPageViewV2";
		import { TemplatesPageViewas MultiOrgTemplatesPageView} from "./MultiOrgTemplatePage/TemplatesPageView";
		import {TemplatesPageView } from "./TemplatePage/TemplatesPageView";

		export const TemplatesPage: FC = () => {
		const { permissions } = useAuthenticated();
		const { organizationId, experiments } = useDashboard();

		constorganizationsQuery = useQuery(myOrganizations());
		const templatesQuery = useQuery(templates(organizationId));
		consttemplatesByOrganizationIdQuery = useQuery(templatesByOrganizationId(organizationId));
		const templatesQuery = useQuery(templates());
		const examplesQuery = useQuery({
		...templateExamples(organizationId),
		enabled: permissions.createTemplates,
		});
		const error =templatesQuery.error \|\| examplesQuery.error \|\|organizationsQuery.error;
		const error =templatesByOrganizationIdQuery.error \|\| examplesQuery.error \|\|templatesQuery.error;
		const multiOrgExperimentEnabled = experiments.includes("multi-organization");

		return (
Expand All		@@ -28,19 +27,18 @@ export const TemplatesPage: FC = () => {
		<title>{pageTitle("Templates")}</title>
		</Helmet>
		{multiOrgExperimentEnabled ? (
		<TemplatesPageViewV2
		<MultiOrgTemplatesPageView
		error={error}
		canCreateTemplates={permissions.createTemplates}
		examples={examplesQuery.data}
		templates={templatesQuery.data}
		organizations={organizationsQuery.data}
		/>
		) : (
		<TemplatesPageView
		error={error}
		canCreateTemplates={permissions.createTemplates}
		examples={examplesQuery.data}
		templates={templatesQuery.data}
		templates={templatesByOrganizationIdQuery.data}
		/>
		)}
		</>
Expand Down