diff --git a/codersdk/organizations.go b/codersdk/organizations.go index 02bc818312ee5..750df452f953f 100644 --- a/codersdk/organizations.go +++ b/codersdk/organizations.go @@ -405,9 +405,8 @@ func (c *Client) TemplatesByOrganization(ctx context.Context, organizationID uui } type TemplateFilter struct { - OrganizationID uuid.UUID `json:"organization_id,omitempty" format:"uuid" typescript:"-"` - FilterQuery string `json:"q,omitempty"` - ExactName string `json:"exact_name,omitempty" typescript:"-"` + OrganizationID uuid.UUID + ExactName string } // asRequestOption returns a function that can be used in (*Client).Request. @@ -425,11 +424,6 @@ 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 07010543a63e5..c030b2ed93973 100644 --- a/site/src/api/api.ts +++ b/site/src/api/api.ts @@ -599,7 +599,7 @@ class ApiMethods { return response.data; }; - getTemplatesByOrganizationId = async ( + getTemplates = async ( organizationId: string, options?: TemplateOptions, ): Promise => { @@ -619,14 +619,6 @@ 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 dbdfea48ff742..1dce9a29eaab8 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(filterParamsKey) ?? "", + queryPayload: () => searchParams.get(useFilterParamsKey) ?? "", 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 312e6269498bc..2d0485b8f347b 100644 --- a/site/src/api/queries/templates.ts +++ b/site/src/api/queries/templates.ts @@ -1,7 +1,6 @@ import type { MutationOptions, QueryClient, QueryOptions } from "react-query"; import { API } from "api/api"; import type { - TemplateFilter, CreateTemplateRequest, CreateTemplateVersionRequest, ProvisionerJob, @@ -31,26 +30,16 @@ export const templateByName = ( }; }; -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 }), - }; -}; +const getTemplatesQueryKey = (organizationId: string, deprecated?: boolean) => [ + organizationId, + "templates", + deprecated, +]; -export const templates = (filter?: TemplateFilter) => { +export const templates = (organizationId: string, deprecated?: boolean) => { return { - queryKey: ["templates", filter], - queryFn: () => API.getTemplates(filter), + queryKey: getTemplatesQueryKey(organizationId, deprecated), + queryFn: () => API.getTemplates(organizationId, { deprecated }), }; }; @@ -103,10 +92,7 @@ export const setGroupRole = ( export const templateExamples = (organizationId: string) => { return { - queryKey: [ - ...getTemplatesByOrganizationIdQueryKey(organizationId), - "examples", - ], + queryKey: [...getTemplatesQueryKey(organizationId), "examples"], queryFn: () => API.getTemplateExamples(organizationId), }; }; diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts index 2b69bf7b90424..7578d599021a9 100644 --- a/site/src/api/typesGenerated.ts +++ b/site/src/api/typesGenerated.ts @@ -1255,7 +1255,8 @@ export interface TemplateExample { // From codersdk/organizations.go export interface TemplateFilter { - readonly q?: string; + readonly OrganizationID: string; + readonly ExactName: string; } // From codersdk/templates.go diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx index f37510dbd2a00..b26ce444a805f 100644 --- a/site/src/components/Filter/filter.tsx +++ b/site/src/components/Filter/filter.tsx @@ -16,7 +16,6 @@ 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; @@ -36,19 +35,21 @@ 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(filterParamsKey) ?? fallbackFilter; + const query = searchParams.get(useFilterParamsKey) ?? fallbackFilter; const update = (newValues: string | FilterValues) => { const serialized = typeof newValues === "string" ? newValues : stringifyFilter(newValues); - searchParams.set(filterParamsKey, serialized); + searchParams.set(useFilterParamsKey, 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 deleted file mode 100644 index 863b7a9a2bc0d..0000000000000 --- a/site/src/modules/templates/TemplateCard/TemplateCard.stories.tsx +++ /dev/null @@ -1,40 +0,0 @@ -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 deleted file mode 100644 index aa4a6bcf45c50..0000000000000 --- a/site/src/modules/templates/TemplateCard/TemplateCard.tsx +++ /dev/null @@ -1,144 +0,0 @@ -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 0e524e67749ff..d52c92a12df82 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/templateAggregators"; +import { getTemplatesByTag } from "utils/starterTemplates"; 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 c2bb6a11f38b2..228e8cae4ed9d 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/templateAggregators"; +import { getTemplatesByTag } from "utils/starterTemplates"; import { StarterTemplatesPageView } from "./StarterTemplatesPageView"; const meta: Meta = { diff --git a/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx b/site/src/pages/StarterTemplatesPage/StarterTemplatesPageView.tsx index 9d32a069cbf69..e0a6c4b975747 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/templateAggregators"; +import type { StarterTemplatesByTag } from "utils/starterTemplates"; 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 deleted file mode 100644 index 10eacf0ae6f85..0000000000000 --- a/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.stories.tsx +++ /dev/null @@ -1,154 +0,0 @@ -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 deleted file mode 100644 index 095930fa16c94..0000000000000 --- a/site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.tsx +++ /dev/null @@ -1,185 +0,0 @@ -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/TemplatesPage.tsx b/site/src/pages/TemplatesPage/TemplatesPage.tsx index d8b60562f7d0d..75c98d5221320 100644 --- a/site/src/pages/TemplatesPage/TemplatesPage.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPage.tsx @@ -1,59 +1,34 @@ import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { useQuery } from "react-query"; -import { - templateExamples, - templatesByOrganizationId, - templates, -} from "api/queries/templates"; +import { templateExamples, templates } from "api/queries/templates"; import { useAuthenticated } from "contexts/auth/RequireAuth"; import { useDashboard } from "modules/dashboard/useDashboard"; import { pageTitle } from "utils/page"; -import { getTemplatesByOrg } from "utils/templateAggregators"; -import { TemplatesPageView as MultiOrgTemplatesPageView } from "./MultiOrgTemplatePage/TemplatesPageView"; -import { TemplatesPageView } from "./TemplatePage/TemplatesPageView"; +import { TemplatesPageView } from "./TemplatesPageView"; export const TemplatesPage: FC = () => { const { permissions } = useAuthenticated(); - const { organizationId, experiments } = useDashboard(); + const { organizationId } = useDashboard(); - const templatesByOrganizationIdQuery = useQuery( - templatesByOrganizationId(organizationId), - ); - const templatesQuery = useQuery(templates()); - const templatesByOrg = templatesQuery.data - ? getTemplatesByOrg(templatesQuery.data) - : undefined; + const templatesQuery = useQuery(templates(organizationId)); const examplesQuery = useQuery({ ...templateExamples(organizationId), enabled: permissions.createTemplates, }); - const error = - templatesByOrganizationIdQuery.error || - examplesQuery.error || - templatesQuery.error; - const multiOrgExperimentEnabled = experiments.includes("multi-organization"); + const error = templatesQuery.error || examplesQuery.error; return ( <> {pageTitle("Templates")} - {multiOrgExperimentEnabled ? ( - - ) : ( - - )} + ); }; diff --git a/site/src/pages/TemplatesPage/TemplatePage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx similarity index 100% rename from site/src/pages/TemplatesPage/TemplatePage/TemplatesPageView.stories.tsx rename to site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx diff --git a/site/src/pages/TemplatesPage/TemplatePage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx similarity index 98% rename from site/src/pages/TemplatesPage/TemplatePage/TemplatesPageView.tsx rename to site/src/pages/TemplatesPage/TemplatesPageView.tsx index 7cf4d968f8e28..fd7be676da6cb 100644 --- a/site/src/pages/TemplatesPage/TemplatePage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/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/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx index 944e32580acaf..277716f6a959c 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 { templatesByOrganizationId } from "api/queries/templates"; +import { templates } from "api/queries/templates"; import type { Workspace } from "api/typesGenerated"; import { useFilter } from "components/Filter/filter"; import { useUserFilterMenu } from "components/Filter/UserFilter"; @@ -41,9 +41,7 @@ const WorkspacesPage: FC = () => { const { permissions } = useAuthenticated(); const { entitlements, organizationId } = useDashboard(); - const templatesQuery = useQuery( - templatesByOrganizationId(organizationId, false), - ); + const templatesQuery = useQuery(templates(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 1ef95002ab404..0316f158e87c9 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.getTemplatesByOrganizationId(organizationId); + const templates = await API.getTemplates(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.getTemplatesByOrganizationId(organizationId); + const templates = await API.getTemplates(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 4ccd1cb398d7c..164ef633b5244 100644 --- a/site/src/utils/filters.ts +++ b/site/src/utils/filters.ts @@ -4,4 +4,3 @@ 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 new file mode 100644 index 0000000000000..edbc690eba052 --- /dev/null +++ b/site/src/utils/starterTemplates.ts @@ -0,0 +1,24 @@ +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 deleted file mode 100644 index 93f368263b79b..0000000000000 --- a/site/src/utils/templateAggregators.ts +++ /dev/null @@ -1,46 +0,0 @@ -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 }; -};