diff --git a/codersdk/organizations.go b/codersdk/organizations.go index 0841bdba8554f..998c891aff564 100644 --- 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 index e60da675ccaa9..535e984088ba9 100644 --- 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 => { @@ -598,6 +598,14 @@ class ApiMethods { return response.data; }; + getTemplates = async ( + options?: TypesGen.TemplateFilter, + ): Promise => { + const url = getURLWithSearchParams("/api/v2/templates", options); + const response = await this.axios.get(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 index 1dce9a29eaab8..dbdfea48ff742 100644 --- 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 { 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 index 2d0485b8f347b..312e6269498bc 100644 --- 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 index 34b3285f1603b..944e5bbc37f9e 100644 --- a/site/src/api/typesGenerated.ts +++ b/site/src/api/typesGenerated.ts @@ -1224,8 +1224,7 @@ export interface TemplateExample { // From codersdk/organizations.go export interface TemplateFilter { - readonly OrganizationID: string; - readonly ExactName: string; + readonly q?: string; } // From codersdk/templates.go diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx index b26ce444a805f..f37510dbd2a00 100644 --- 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 new file mode 100644 index 0000000000000..863b7a9a2bc0d --- /dev/null +++ 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 = { + title: "modules/templates/TemplateCard", + parameters: { chromatic }, + component: TemplateCard, + args: { + template: MockTemplate, + }, +}; + +export default meta; +type Story = StoryObj; + +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 new file mode 100644 index 0000000000000..aa4a6bcf45c50 --- /dev/null +++ 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 & { + template: Template; +}; + +export const TemplateCard: FC = ({ + 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 ( +
navigate(templatePageLink)} + onKeyDown={handleKeyDown} + > +
+
+ 0 + ? template.display_name + : template.name + } + subtitle={template.organization_display_name} + avatar={ + hasIcon && ( + + ) + } + /> +
+
+ {template.active_user_count}{" "} + {template.active_user_count === 1 ? "user" : "users"} +
+
+ +
+ +

{template.description}

+ +
+ +
+ {template.deprecated ? ( + + ) : ( + + )} +
+
+ ); +}; + +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>; diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPage.tsx index d52c92a12df82..0e524e67749ff 100644 --- 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 index 228e8cae4ed9d..c2bb6a11f38b2 100644 --- 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 = { diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx index e0a6c4b975747..9d32a069cbf69 100644 --- 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 = { diff --git a/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.stories.tsx new file mode 100644 index 0000000000000..10eacf0ae6f85 --- /dev/null +++ b/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.stories.tsx @@ -0,0 +1,154 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { chromaticWithTablet } from "testHelpers/chromatic"; +import { + mockApiError, + MockTemplate, + MockTemplateExample, + MockTemplateExample2, +} from "testHelpers/entities"; +import { getTemplatesByOrg } from "utils/templateAggregators"; +import { TemplatesPageView } from "./TemplatesPageView"; + +const meta: Meta = { + title: "pages/MultiOrgTemplatesPage", + parameters: { chromatic: chromaticWithTablet }, + component: TemplatesPageView, +}; + +export default meta; +type Story = StoryObj; + +export const WithTemplatesSingleOrgs: Story = { + args: { + canCreateTemplates: true, + error: undefined, + templatesByOrg: getTemplatesByOrg([ + MockTemplate, + { + ...MockTemplate, + active_user_count: -1, + description: "🚀 Some new template that has no activity data", + icon: "/icon/goland.svg", + }, + { + ...MockTemplate, + active_user_count: 150, + description: "😮 Wow, this one has a bunch of usage!", + icon: "", + }, + { + ...MockTemplate, + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ", + }, + { + ...MockTemplate, + name: "template-without-icon", + display_name: "No Icon", + description: "This one has no icon", + icon: "", + }, + { + ...MockTemplate, + name: "template-without-icon-deprecated", + display_name: "Deprecated No Icon", + description: "This one has no icon and is deprecated", + deprecated: true, + deprecation_message: "This template is so old, it's deprecated", + icon: "", + }, + { + ...MockTemplate, + name: "deprecated-template", + display_name: "Deprecated", + description: "Template is incompatible", + }, + ]), + examples: [], + }, +}; + +export const WithTemplatesMultipleOrgs: Story = { + args: { + canCreateTemplates: true, + error: undefined, + templatesByOrg: getTemplatesByOrg([ + MockTemplate, + { + ...MockTemplate, + organization_id: "fc0774ce-cc9e-48d4-80ae-88f7a4d4a8a1", + organization_name: "first-org", + organization_display_name: "First Org", + active_user_count: -1, + description: "🚀 Some new template that has no activity data", + icon: "/icon/goland.svg", + }, + { + ...MockTemplate, + organization_id: "fc0774ce-cc9e-48d4-80ae-88f7a4d4a8a1", + organization_name: "first-org", + organization_display_name: "First Org", + active_user_count: 150, + description: "😮 Wow, this one has a bunch of usage!", + icon: "", + }, + { + ...MockTemplate, + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ", + }, + { + ...MockTemplate, + name: "template-without-icon", + display_name: "No Icon", + description: "This one has no icon", + icon: "", + }, + { + ...MockTemplate, + name: "template-without-icon-deprecated", + display_name: "Deprecated No Icon", + description: "This one has no icon and is deprecated", + deprecated: true, + deprecation_message: "This template is so old, it's deprecated", + icon: "", + }, + { + ...MockTemplate, + name: "deprecated-template", + display_name: "Deprecated", + description: "Template is incompatible", + }, + ]), + examples: [], + }, +}; + +export const EmptyCanCreate: Story = { + args: { + canCreateTemplates: true, + error: undefined, + templatesByOrg: getTemplatesByOrg([]), + examples: [MockTemplateExample, MockTemplateExample2], + }, +}; + +export const EmptyCannotCreate: Story = { + args: { + error: undefined, + templatesByOrg: getTemplatesByOrg([]), + examples: [MockTemplateExample, MockTemplateExample2], + canCreateTemplates: false, + }, +}; + +export const Error: Story = { + args: { + error: mockApiError({ + message: "Something went wrong fetching templates.", + }), + templatesByOrg: undefined, + examples: undefined, + canCreateTemplates: false, + }, +}; diff --git a/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.tsx new file mode 100644 index 0000000000000..095930fa16c94 --- /dev/null +++ b/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.tsx @@ -0,0 +1,185 @@ +import type { Interpolation, Theme } from "@emotion/react"; +import type { FC } from "react"; +import { Link, useNavigate, useSearchParams } from "react-router-dom"; +import type { TemplateExample } from "api/typesGenerated"; +import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { + HelpTooltip, + HelpTooltipContent, + HelpTooltipLink, + HelpTooltipLinksGroup, + HelpTooltipText, + HelpTooltipTitle, + HelpTooltipTrigger, +} from "components/HelpTooltip/HelpTooltip"; +import { Loader } from "components/Loader/Loader"; +import { Margins } from "components/Margins/Margins"; +import { + PageHeader, + PageHeaderSubtitle, + PageHeaderTitle, +} from "components/PageHeader/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 const Language = { + templateTooltipTitle: "What is a template?", + templateTooltipText: + "Templates allow you to create a common configuration for your workspaces using Terraform.", + templateTooltipLink: "Manage templates", +}; + +const TemplateHelpTooltip: FC = () => { + return ( + + + + {Language.templateTooltipTitle} + {Language.templateTooltipText} + + + {Language.templateTooltipLink} + + + + + ); +}; + +export interface TemplatesPageViewProps { + templatesByOrg?: TemplatesByOrg; + examples: TemplateExample[] | undefined; + canCreateTemplates: boolean; + error?: unknown; +} + +export const TemplatesPageView: FC = ({ + templatesByOrg, + examples, + canCreateTemplates, + error, +}) => { + const navigate = useNavigate(); + const [urlParams] = useSearchParams(); + const isEmpty = templatesByOrg && templatesByOrg["all"].length === 0; + const activeOrg = urlParams.get("org") ?? "all"; + const visibleTemplates = templatesByOrg + ? templatesByOrg[activeOrg] + : undefined; + + return ( + + + } + > + + + Templates + + + + {!isEmpty && ( + + Select a template to create a workspace. + + )} + + + {Boolean(error) && ( + + )} + + {Boolean(!templatesByOrg) && } + + + {templatesByOrg && Object.keys(templatesByOrg).length > 2 && ( + + ORGANIZATION + {Object.entries(templatesByOrg).map((org) => ( + + {org[0] === "all" ? "all" : org[1][0].organization_display_name}{" "} + ({org[1].length}) + + ))} + + )} + +
+ {isEmpty ? ( + + ) : ( + visibleTemplates && + visibleTemplates.map((template) => ( + ({ + backgroundColor: theme.palette.background.paper, + })} + template={template} + key={template.id} + /> + )) + )} +
+ + + ); +}; + +const styles = { + filterCaption: (theme) => ({ + textTransform: "uppercase", + fontWeight: 600, + fontSize: 12, + color: theme.palette.text.secondary, + letterSpacing: "0.1em", + }), + tagLink: (theme) => ({ + color: theme.palette.text.secondary, + textDecoration: "none", + fontSize: 14, + textTransform: "capitalize", + + "&:hover": { + color: theme.palette.text.primary, + }, + }), + tagLinkActive: (theme) => ({ + color: theme.palette.text.primary, + fontWeight: 600, + }), + secondary: (theme) => ({ + color: theme.palette.text.secondary, + }), + actionButton: (theme) => ({ + transition: "none", + color: theme.palette.text.secondary, + "&:hover": { + borderColor: theme.palette.text.primary, + }, + }), +} satisfies Record>; diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatePage/TemplatesPageView.stories.tsx similarity index 100% rename from site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx rename to site/src/pages/TemplatesPage/TemplatePage/TemplatesPageView.stories.tsx diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatePage/TemplatesPageView.tsx similarity index 98% rename from site/src/pages/TemplatesPage/TemplatesPageView.tsx rename to site/src/pages/TemplatesPage/TemplatePage/TemplatesPageView.tsx index fd7be676da6cb..7cf4d968f8e28 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatePage/TemplatesPageView.tsx @@ -43,8 +43,8 @@ import { formatTemplateBuildTime, formatTemplateActiveDevelopers, } from "utils/templates"; -import { CreateTemplateButton } from "./CreateTemplateButton"; -import { EmptyTemplates } from "./EmptyTemplates"; +import { CreateTemplateButton } from "../CreateTemplateButton"; +import { EmptyTemplates } from "../EmptyTemplates"; export const Language = { developerCount: (activeCount: number): string => { diff --git a/site/src/pages/TemplatesPage/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx index 75c98d5221320..d8b60562f7d0d 100644 --- a/site/src/pages/TemplatesPage/TemplatesPage.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPage.tsx @@ -1,34 +1,59 @@ import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { useQuery } from "react-query"; -import { templateExamples, templates } from "api/queries/templates"; +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 { 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 } = useDashboard(); + const { organizationId, experiments } = useDashboard(); - const templatesQuery = useQuery(templates(organizationId)); + const templatesByOrganizationIdQuery = useQuery( + templatesByOrganizationId(organizationId), + ); + const templatesQuery = useQuery(templates()); + const templatesByOrg = templatesQuery.data + ? getTemplatesByOrg(templatesQuery.data) + : undefined; const examplesQuery = useQuery({ ...templateExamples(organizationId), enabled: permissions.createTemplates, }); - const error = templatesQuery.error || examplesQuery.error; + const error = + templatesByOrganizationIdQuery.error || + examplesQuery.error || + templatesQuery.error; + const multiOrgExperimentEnabled = experiments.includes("multi-organization"); return ( <> {pageTitle("Templates")} - + {multiOrgExperimentEnabled ? ( + + ) : ( + + )} ); }; diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx index 277716f6a959c..944e32580acaf 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx @@ -2,7 +2,7 @@ import { type FC, useEffect, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useQuery } from "react-query"; import { useSearchParams } from "react-router-dom"; -import { templates } from "api/queries/templates"; +import { templatesByOrganizationId } from "api/queries/templates"; import type { Workspace } from "api/typesGenerated"; import { useFilter } from "components/Filter/filter"; import { useUserFilterMenu } from "components/Filter/UserFilter"; @@ -41,7 +41,9 @@ const WorkspacesPage: FC = () => { const { permissions } = useAuthenticated(); const { entitlements, organizationId } = useDashboard(); - const templatesQuery = useQuery(templates(organizationId, false)); + const templatesQuery = useQuery( + templatesByOrganizationId(organizationId, false), + ); const filterProps = useWorkspacesFilter({ searchParamsResult, diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx index 0316f158e87c9..1ef95002ab404 100644 --- a/site/src/pages/WorkspacesPage/filter/menus.tsx +++ b/site/src/pages/WorkspacesPage/filter/menus.tsx @@ -27,7 +27,7 @@ export const useTemplateFilterMenu = ({ id: "template", getSelectedOption: async () => { // Show all templates including deprecated - const templates = await API.getTemplates(organizationId); + const templates = await API.getTemplatesByOrganizationId(organizationId); const template = templates.find((template) => template.name === value); if (template) { return { @@ -40,7 +40,7 @@ export const useTemplateFilterMenu = ({ }, getOptions: async (query) => { // Show all templates including deprecated - const templates = await API.getTemplates(organizationId); + const templates = await API.getTemplatesByOrganizationId(organizationId); const filteredTemplates = templates.filter( (template) => template.name.toLowerCase().includes(query.toLowerCase()) || diff --git a/site/src/utils/filters.ts b/site/src/utils/filters.ts index 164ef633b5244..4ccd1cb398d7c 100644 --- a/site/src/utils/filters.ts +++ b/site/src/utils/filters.ts @@ -4,3 +4,4 @@ export function prepareQuery(query: string | undefined): string | undefined; export function prepareQuery(query?: string): string | undefined { return query?.trim().replace(/ +/g, " "); } +export const filterParamsKey = "filter"; diff --git a/site/src/utils/starterTemplates.ts b/site/src/utils/starterTemplates.ts deleted file mode 100644 index edbc690eba052..0000000000000 --- a/site/src/utils/starterTemplates.ts +++ /dev/null @@ -1,24 +0,0 @@ -import type { TemplateExample } from "api/typesGenerated"; - -export type StarterTemplatesByTag = Record; - -export const getTemplatesByTag = ( - templates: TemplateExample[], -): StarterTemplatesByTag => { - const tags: StarterTemplatesByTag = { - all: templates, - }; - - templates.forEach((template) => { - template.tags.forEach((tag) => { - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- this can be undefined - if (tags[tag]) { - tags[tag].push(template); - } else { - tags[tag] = [template]; - } - }); - }); - - return tags; -}; diff --git a/site/src/utils/templateAggregators.ts b/site/src/utils/templateAggregators.ts new file mode 100644 index 0000000000000..93f368263b79b --- /dev/null +++ b/site/src/utils/templateAggregators.ts @@ -0,0 +1,46 @@ +import type { Template, TemplateExample } from "api/typesGenerated"; + +export type StarterTemplatesByTag = Record; +export type TemplatesByOrg = Record; + +export const getTemplatesByTag = ( + templates: TemplateExample[], +): StarterTemplatesByTag => { + const tags: StarterTemplatesByTag = { + all: templates, + }; + + for (const template of templates) { + for (const tag of template.tags) { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- this can be undefined + if (tags[tag]) { + tags[tag].push(template); + } else { + tags[tag] = [template]; + } + } + } + + return tags; +}; + +export const getTemplatesByOrg = (templates: Template[]): TemplatesByOrg => { + const orgs: TemplatesByOrg = {}; + + for (const template of templates) { + const org = template.organization_id; + if (orgs[org]) { + orgs[org].push(template); + } else { + orgs[org] = [template]; + } + } + + const sortedOrgs = Object.fromEntries( + Object.entries(orgs).sort(([, a], [, b]) => + a[0].organization_name.localeCompare(b[0].organization_name), + ), + ); + + return { all: templates, ...sortedOrgs }; +};