From b414acf37aa3aa0545d8467ad4d535064552d0e5 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 12 Aug 2024 23:21:41 +0000 Subject: [PATCH 1/8] start adding ui elements --- coderd/database/modelqueries.go | 1 + coderd/database/queries.sql.go | 42 +++++---- coderd/database/queries/templates.sql | 16 ++-- coderd/searchquery/search.go | 11 +-- site/src/api/api.ts | 7 ++ .../pages/TemplatesPage/TemplatesFilter.tsx | 87 +++++++++++++++++++ .../pages/TemplatesPage/TemplatesPageView.tsx | 3 + .../WorkspacesPage/WorkspacesPageView.tsx | 6 +- .../src/pages/WorkspacesPage/filter/menus.tsx | 3 +- 9 files changed, 144 insertions(+), 32 deletions(-) create mode 100644 site/src/pages/TemplatesPage/TemplatesFilter.tsx diff --git a/coderd/database/modelqueries.go b/coderd/database/modelqueries.go index 83763ca55ec92..620cf44684829 100644 --- a/coderd/database/modelqueries.go +++ b/coderd/database/modelqueries.go @@ -75,6 +75,7 @@ func (q *sqlQuerier) GetAuthorizedTemplates(ctx context.Context, arg GetTemplate rows, err := q.db.QueryContext(ctx, query, arg.Deleted, arg.OrganizationID, + arg.OrganizationName, arg.ExactName, arg.FuzzyName, pq.Array(arg.IDs), diff --git a/coderd/database/queries.sql.go b/coderd/database/queries.sql.go index ba8129584ccda..475d9f240b5d4 100644 --- a/coderd/database/queries.sql.go +++ b/coderd/database/queries.sql.go @@ -7826,29 +7826,35 @@ WHERE organization_id = $2 ELSE true END - -- Filter by exact name + -- Filter by organization_name AND CASE WHEN $3 :: text != '' THEN - LOWER("name") = LOWER($3) + LOWER("organization_name") = LOWER($3) ELSE true END - -- Filter by name, matching on substring - AND CASE - WHEN $4 :: text != '' THEN - lower(name) ILIKE '%' || lower($4) || '%' - ELSE true + -- Filter by exact name + AND CASE + WHEN $4 :: text != '' THEN + LOWER("name") = LOWER($4) + ELSE true + END + -- Filter by name, matching on substring + AND CASE + WHEN $5 :: text != '' THEN + lower(name) ILIKE '%' || lower($5) || '%' + ELSE true END -- Filter by ids AND CASE - WHEN array_length($5 :: uuid[], 1) > 0 THEN - id = ANY($5) + WHEN array_length($6 :: uuid[], 1) > 0 THEN + id = ANY($6) ELSE true END -- Filter by deprecated AND CASE - WHEN $6 :: boolean IS NOT NULL THEN + WHEN $7 :: boolean IS NOT NULL THEN CASE - WHEN $6 :: boolean THEN + WHEN $7 :: boolean THEN deprecated != '' ELSE deprecated = '' @@ -7861,18 +7867,20 @@ ORDER BY (name, id) ASC ` type GetTemplatesWithFilterParams struct { - Deleted bool `db:"deleted" json:"deleted"` - OrganizationID uuid.UUID `db:"organization_id" json:"organization_id"` - ExactName string `db:"exact_name" json:"exact_name"` - FuzzyName string `db:"fuzzy_name" json:"fuzzy_name"` - IDs []uuid.UUID `db:"ids" json:"ids"` - Deprecated sql.NullBool `db:"deprecated" json:"deprecated"` + Deleted bool `db:"deleted" json:"deleted"` + OrganizationID uuid.UUID `db:"organization_id" json:"organization_id"` + OrganizationName string `db:"organization_name" json:"organization_name"` + ExactName string `db:"exact_name" json:"exact_name"` + FuzzyName string `db:"fuzzy_name" json:"fuzzy_name"` + IDs []uuid.UUID `db:"ids" json:"ids"` + Deprecated sql.NullBool `db:"deprecated" json:"deprecated"` } func (q *sqlQuerier) GetTemplatesWithFilter(ctx context.Context, arg GetTemplatesWithFilterParams) ([]Template, error) { rows, err := q.db.QueryContext(ctx, getTemplatesWithFilter, arg.Deleted, arg.OrganizationID, + arg.OrganizationName, arg.ExactName, arg.FuzzyName, pq.Array(arg.IDs), diff --git a/coderd/database/queries/templates.sql b/coderd/database/queries/templates.sql index a2bfa8ae01497..23fa8d297fcd2 100644 --- a/coderd/database/queries/templates.sql +++ b/coderd/database/queries/templates.sql @@ -22,17 +22,23 @@ WHERE organization_id = @organization_id ELSE true END + -- Filter by organization_name + AND CASE + WHEN @organization_name :: text != '' THEN + LOWER("organization_name") = LOWER(@organization_name) + ELSE true + END -- Filter by exact name AND CASE WHEN @exact_name :: text != '' THEN LOWER("name") = LOWER(@exact_name) ELSE true END - -- Filter by name, matching on substring - AND CASE - WHEN @fuzzy_name :: text != '' THEN - lower(name) ILIKE '%' || lower(@fuzzy_name) || '%' - ELSE true + -- Filter by name, matching on substring + AND CASE + WHEN @fuzzy_name :: text != '' THEN + lower(name) ILIKE '%' || lower(@fuzzy_name) || '%' + ELSE true END -- Filter by ids AND CASE diff --git a/coderd/searchquery/search.go b/coderd/searchquery/search.go index 78966a255de92..148561af8fd25 100644 --- a/coderd/searchquery/search.go +++ b/coderd/searchquery/search.go @@ -198,11 +198,12 @@ func Templates(ctx context.Context, db database.Store, query string) (database.G parser := httpapi.NewQueryParamParser() filter := database.GetTemplatesWithFilterParams{ - FuzzyName: parser.String(values, "", "name"), - Deleted: parser.Boolean(values, false, "deleted"), - ExactName: parser.String(values, "", "exact_name"), - IDs: parser.UUIDs(values, []uuid.UUID{}, "ids"), - Deprecated: parser.NullableBoolean(values, sql.NullBool{}, "deprecated"), + Deleted: parser.Boolean(values, false, "deleted"), + OrganizationName: parser.String(values, "", "organization"), + ExactName: parser.String(values, "", "exact_name"), + FuzzyName: parser.String(values, "", "name"), + IDs: parser.UUIDs(values, []uuid.UUID{}, "ids"), + Deprecated: parser.NullableBoolean(values, sql.NullBool{}, "deprecated"), } // Convert the "organization" parameter to an organization uuid. This can require diff --git a/site/src/api/api.ts b/site/src/api/api.ts index 397f5e0378d75..047014a77af27 100644 --- a/site/src/api/api.ts +++ b/site/src/api/api.ts @@ -651,6 +651,13 @@ class ApiMethods { return response.data; }; + getMyOrganizations = async (): Promise => { + const response = await this.axios.get( + "/api/v2/users/me/organizations", + ); + return response.data; + }; + /** * @param organization Can be the organization's ID or name */ diff --git a/site/src/pages/TemplatesPage/TemplatesFilter.tsx b/site/src/pages/TemplatesPage/TemplatesFilter.tsx new file mode 100644 index 0000000000000..4ff5ccd0a2df2 --- /dev/null +++ b/site/src/pages/TemplatesPage/TemplatesFilter.tsx @@ -0,0 +1,87 @@ +import type { FC } from "react"; +import { useSearchParams } from "react-router-dom"; +import { + Filter, + MenuSkeleton, + SearchFieldSkeleton, + useFilter, +} from "components/Filter/filter"; +import { useFilterMenu } from "components/Filter/menu"; +import { + SelectFilter, + SelectFilterOption, +} from "components/Filter/SelectFilter"; +import { API } from "api/api"; +import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { docs } from "utils/docs"; +import { Organization } from "api/typesGenerated"; + +export const TemplatesFilter: FC = () => { + const searchParamsResult = useSearchParams(); + const filter = useFilter({ + fallbackFilter: "deprecated:false", + searchParamsResult, + onUpdate: () => {}, // reset pagination + }); + + const organizationMenu = useFilterMenu({ + onChange: (option) => + filter.update({ ...filter.values, template: option?.value }), + value: filter.values.organization, + id: "status", + getSelectedOption: async () => { + if (!filter.values.organization) { + return null; + } + + const org = await API.getOrganization(filter.values.organization); + return orgOption(org); + }, + getOptions: async () => { + const orgs = await API.getMyOrganizations(); + return orgs.map(orgOption); + }, + }); + + return ( + + + + } + skeleton={ + <> + + + + } + /> + ); +}; + +const orgOption = (org: Organization): SelectFilterOption => ({ + label: org.display_name || org.name, + value: org.name, + startIcon: ( + + ), +}); diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 9c0138ad08cdc..835b663187d26 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -46,6 +46,7 @@ import { formatTemplateActiveDevelopers, } from "utils/templates"; import { EmptyTemplates } from "./EmptyTemplates"; +import { TemplatesFilter } from "./TemplatesFilter"; export const Language = { developerCount: (activeCount: number): string => { @@ -220,6 +221,8 @@ export const TemplatesPageView: FC = ({ )} + + {error ? ( ) : ( diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 48f78e71f28e2..dd7fd89b192e6 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -6,7 +6,7 @@ import StopOutlined from "@mui/icons-material/StopOutlined"; import LoadingButton from "@mui/lab/LoadingButton"; import Button from "@mui/material/Button"; import Divider from "@mui/material/Divider"; -import type { ComponentProps } from "react"; +import type { ComponentProps, FC } from "react"; import type { UseQueryResult } from "react-query"; import { hasError, isApiValidationError } from "api/errors"; import type { Template, Workspace } from "api/typesGenerated"; @@ -65,7 +65,7 @@ export interface WorkspacesPageViewProps { canChangeVersions: boolean; } -export const WorkspacesPageView = ({ +export const WorkspacesPageView: FC = ({ workspaces, error, limit, @@ -86,7 +86,7 @@ export const WorkspacesPageView = ({ templatesFetchStatus, canCreateTemplate, canChangeVersions, -}: WorkspacesPageViewProps) => { +}) => { // Let's say the user has 5 workspaces, but tried to hit page 100, which does // not exist. In this case, the page is not valid and we want to show a better // error message. diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx index 5502f05e082cb..a4d23cd70ad94 100644 --- a/site/src/pages/WorkspacesPage/filter/menus.tsx +++ b/site/src/pages/WorkspacesPage/filter/menus.tsx @@ -43,8 +43,7 @@ export const useTemplateFilterMenu = ({ template.display_name.toLowerCase().includes(query.toLowerCase()), ); return filteredTemplates.map((template) => ({ - label: - template.display_name !== "" ? template.display_name : template.name, + label: template.display_name || template.name, value: template.name, startIcon: , })); From d65c61976f3d810e10076ea1e1619d36d66c28cb Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 13 Aug 2024 17:29:08 +0000 Subject: [PATCH 2/8] wire it all up --- site/src/api/api.ts | 12 +++++++++-- site/src/api/queries/templates.ts | 13 ++++++------ .../pages/TemplatesPage/TemplatesFilter.tsx | 20 ++++++++----------- .../src/pages/TemplatesPage/TemplatesPage.tsx | 12 ++++++++++- .../pages/TemplatesPage/TemplatesPageView.tsx | 5 ++++- 5 files changed, 40 insertions(+), 22 deletions(-) diff --git a/site/src/api/api.ts b/site/src/api/api.ts index 047014a77af27..53fd0fef4f63d 100644 --- a/site/src/api/api.ts +++ b/site/src/api/api.ts @@ -304,9 +304,17 @@ export type GetTemplatesOptions = Readonly<{ readonly deprecated?: boolean; }>; +export type GetTemplatesQuery = Readonly<{ + readonly q: string; +}>; + function normalizeGetTemplatesOptions( - options: GetTemplatesOptions = {}, + options: GetTemplatesOptions | GetTemplatesQuery = {}, ): Record { + if ("q" in options) { + return options; + } + const params: Record = {}; if (options.deprecated !== undefined) { params["deprecated"] = String(options.deprecated); @@ -679,7 +687,7 @@ class ApiMethods { }; getTemplates = async ( - options?: GetTemplatesOptions, + options?: GetTemplatesOptions | GetTemplatesQuery, ): Promise => { const params = normalizeGetTemplatesOptions(options); const response = await this.axios.get( diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts index c6d0f0ac74c4d..7068613687911 100644 --- a/site/src/api/queries/templates.ts +++ b/site/src/api/queries/templates.ts @@ -1,5 +1,5 @@ import type { MutationOptions, QueryClient, QueryOptions } from "react-query"; -import { API, type GetTemplatesOptions } from "api/api"; +import { API, type GetTemplatesQuery, type GetTemplatesOptions } from "api/api"; import type { CreateTemplateRequest, CreateTemplateVersionRequest, @@ -38,12 +38,13 @@ export const templateByName = ( }; }; -const getTemplatesQueryKey = (options?: GetTemplatesOptions) => [ - "templates", - options?.deprecated, -]; +const getTemplatesQueryKey = ( + options?: GetTemplatesOptions | GetTemplatesQuery, +) => ["templates", options]; -export const templates = (options?: GetTemplatesOptions) => { +export const templates = ( + options?: GetTemplatesOptions | GetTemplatesQuery, +) => { return { queryKey: getTemplatesQueryKey(options), queryFn: () => API.getTemplates(options), diff --git a/site/src/pages/TemplatesPage/TemplatesFilter.tsx b/site/src/pages/TemplatesPage/TemplatesFilter.tsx index 4ff5ccd0a2df2..51aaed2222756 100644 --- a/site/src/pages/TemplatesPage/TemplatesFilter.tsx +++ b/site/src/pages/TemplatesPage/TemplatesFilter.tsx @@ -1,10 +1,9 @@ import type { FC } from "react"; -import { useSearchParams } from "react-router-dom"; import { Filter, MenuSkeleton, SearchFieldSkeleton, - useFilter, + type useFilter, } from "components/Filter/filter"; import { useFilterMenu } from "components/Filter/menu"; import { @@ -16,19 +15,16 @@ import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { docs } from "utils/docs"; import { Organization } from "api/typesGenerated"; -export const TemplatesFilter: FC = () => { - const searchParamsResult = useSearchParams(); - const filter = useFilter({ - fallbackFilter: "deprecated:false", - searchParamsResult, - onUpdate: () => {}, // reset pagination - }); +interface TemplatesFilterProps { + filter: ReturnType; +} +export const TemplatesFilter: FC = ({ filter }) => { const organizationMenu = useFilterMenu({ onChange: (option) => - filter.update({ ...filter.values, template: option?.value }), + filter.update({ ...filter.values, organization: option?.value }), value: filter.values.organization, - id: "status", + id: "organization", getSelectedOption: async () => { if (!filter.values.organization) { return null; @@ -47,7 +43,7 @@ export const TemplatesFilter: FC = () => { { const { permissions } = useAuthenticated(); const { showOrganizations } = useDashboard(); - const templatesQuery = useQuery(templates()); + const searchParamsResult = useSearchParams(); + const filter = useFilter({ + fallbackFilter: "deprecated:false", + searchParamsResult, + onUpdate: () => {}, // reset pagination + }); + + const templatesQuery = useQuery(templates({ q: filter.query })); const examplesQuery = useQuery({ ...templateExamples(), enabled: permissions.createTemplates, @@ -25,6 +34,7 @@ export const TemplatesPage: FC = () => { = ({ showOrganizations, template }) => { export interface TemplatesPageViewProps { error?: unknown; + filter: ReturnType; showOrganizations: boolean; canCreateTemplates: boolean; examples: TemplateExample[] | undefined; @@ -182,6 +184,7 @@ export interface TemplatesPageViewProps { export const TemplatesPageView: FC = ({ error, + filter, showOrganizations, canCreateTemplates, examples, @@ -221,7 +224,7 @@ export const TemplatesPageView: FC = ({ )} - + {error ? ( From 232b31bb62c71e8b9e7e28ed38a298e739946718 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 13 Aug 2024 17:34:48 +0000 Subject: [PATCH 3/8] >:( --- site/src/pages/TemplatesPage/TemplatesFilter.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/src/pages/TemplatesPage/TemplatesFilter.tsx b/site/src/pages/TemplatesPage/TemplatesFilter.tsx index 51aaed2222756..e959301a83ca9 100644 --- a/site/src/pages/TemplatesPage/TemplatesFilter.tsx +++ b/site/src/pages/TemplatesPage/TemplatesFilter.tsx @@ -1,4 +1,6 @@ import type { FC } from "react"; +import { API } from "api/api"; +import type { Organization } from "api/typesGenerated"; import { Filter, MenuSkeleton, @@ -8,12 +10,10 @@ import { import { useFilterMenu } from "components/Filter/menu"; import { SelectFilter, - SelectFilterOption, + type SelectFilterOption, } from "components/Filter/SelectFilter"; -import { API } from "api/api"; import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { docs } from "utils/docs"; -import { Organization } from "api/typesGenerated"; interface TemplatesFilterProps { filter: ReturnType; From dfd2f3aee22108238cf218ced046ded29d287afe Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 13 Aug 2024 17:38:46 +0000 Subject: [PATCH 4/8] xs --- site/src/pages/TemplatesPage/TemplatesFilter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TemplatesPage/TemplatesFilter.tsx b/site/src/pages/TemplatesPage/TemplatesFilter.tsx index e959301a83ca9..00217dafb0c94 100644 --- a/site/src/pages/TemplatesPage/TemplatesFilter.tsx +++ b/site/src/pages/TemplatesPage/TemplatesFilter.tsx @@ -75,7 +75,7 @@ const orgOption = (org: Organization): SelectFilterOption => ({ startIcon: ( From 2f419678ec5f99888733721a76105389c21f2a7f Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 14 Aug 2024 15:49:57 +0000 Subject: [PATCH 5/8] never mind, steven is great --- coderd/database/modelqueries.go | 1 - coderd/database/queries.sql.go | 36 +++++++++++---------------- coderd/database/queries/templates.sql | 6 ----- coderd/searchquery/search.go | 11 ++++---- 4 files changed, 19 insertions(+), 35 deletions(-) diff --git a/coderd/database/modelqueries.go b/coderd/database/modelqueries.go index 620cf44684829..83763ca55ec92 100644 --- a/coderd/database/modelqueries.go +++ b/coderd/database/modelqueries.go @@ -75,7 +75,6 @@ func (q *sqlQuerier) GetAuthorizedTemplates(ctx context.Context, arg GetTemplate rows, err := q.db.QueryContext(ctx, query, arg.Deleted, arg.OrganizationID, - arg.OrganizationName, arg.ExactName, arg.FuzzyName, pq.Array(arg.IDs), diff --git a/coderd/database/queries.sql.go b/coderd/database/queries.sql.go index 1d1acb57fe9ff..547e24a0f628c 100644 --- a/coderd/database/queries.sql.go +++ b/coderd/database/queries.sql.go @@ -7875,35 +7875,29 @@ WHERE organization_id = $2 ELSE true END - -- Filter by organization_name - AND CASE - WHEN $3 :: text != '' THEN - LOWER("organization_name") = LOWER($3) - ELSE true - END -- Filter by exact name AND CASE - WHEN $4 :: text != '' THEN - LOWER("name") = LOWER($4) + WHEN $3 :: text != '' THEN + LOWER("name") = LOWER($3) ELSE true END -- Filter by name, matching on substring AND CASE - WHEN $5 :: text != '' THEN - lower(name) ILIKE '%' || lower($5) || '%' + WHEN $4 :: text != '' THEN + lower(name) ILIKE '%' || lower($4) || '%' ELSE true END -- Filter by ids AND CASE - WHEN array_length($6 :: uuid[], 1) > 0 THEN - id = ANY($6) + WHEN array_length($5 :: uuid[], 1) > 0 THEN + id = ANY($5) ELSE true END -- Filter by deprecated AND CASE - WHEN $7 :: boolean IS NOT NULL THEN + WHEN $6 :: boolean IS NOT NULL THEN CASE - WHEN $7 :: boolean THEN + WHEN $6 :: boolean THEN deprecated != '' ELSE deprecated = '' @@ -7916,20 +7910,18 @@ ORDER BY (name, id) ASC ` type GetTemplatesWithFilterParams struct { - Deleted bool `db:"deleted" json:"deleted"` - OrganizationID uuid.UUID `db:"organization_id" json:"organization_id"` - OrganizationName string `db:"organization_name" json:"organization_name"` - ExactName string `db:"exact_name" json:"exact_name"` - FuzzyName string `db:"fuzzy_name" json:"fuzzy_name"` - IDs []uuid.UUID `db:"ids" json:"ids"` - Deprecated sql.NullBool `db:"deprecated" json:"deprecated"` + Deleted bool `db:"deleted" json:"deleted"` + OrganizationID uuid.UUID `db:"organization_id" json:"organization_id"` + ExactName string `db:"exact_name" json:"exact_name"` + FuzzyName string `db:"fuzzy_name" json:"fuzzy_name"` + IDs []uuid.UUID `db:"ids" json:"ids"` + Deprecated sql.NullBool `db:"deprecated" json:"deprecated"` } func (q *sqlQuerier) GetTemplatesWithFilter(ctx context.Context, arg GetTemplatesWithFilterParams) ([]Template, error) { rows, err := q.db.QueryContext(ctx, getTemplatesWithFilter, arg.Deleted, arg.OrganizationID, - arg.OrganizationName, arg.ExactName, arg.FuzzyName, pq.Array(arg.IDs), diff --git a/coderd/database/queries/templates.sql b/coderd/database/queries/templates.sql index 23fa8d297fcd2..84df9633a1a53 100644 --- a/coderd/database/queries/templates.sql +++ b/coderd/database/queries/templates.sql @@ -22,12 +22,6 @@ WHERE organization_id = @organization_id ELSE true END - -- Filter by organization_name - AND CASE - WHEN @organization_name :: text != '' THEN - LOWER("organization_name") = LOWER(@organization_name) - ELSE true - END -- Filter by exact name AND CASE WHEN @exact_name :: text != '' THEN diff --git a/coderd/searchquery/search.go b/coderd/searchquery/search.go index 148561af8fd25..500eae2723336 100644 --- a/coderd/searchquery/search.go +++ b/coderd/searchquery/search.go @@ -198,12 +198,11 @@ func Templates(ctx context.Context, db database.Store, query string) (database.G parser := httpapi.NewQueryParamParser() filter := database.GetTemplatesWithFilterParams{ - Deleted: parser.Boolean(values, false, "deleted"), - OrganizationName: parser.String(values, "", "organization"), - ExactName: parser.String(values, "", "exact_name"), - FuzzyName: parser.String(values, "", "name"), - IDs: parser.UUIDs(values, []uuid.UUID{}, "ids"), - Deprecated: parser.NullableBoolean(values, sql.NullBool{}, "deprecated"), + Deleted: parser.Boolean(values, false, "deleted"), + ExactName: parser.String(values, "", "exact_name"), + FuzzyName: parser.String(values, "", "name"), + IDs: parser.UUIDs(values, []uuid.UUID{}, "ids"), + Deprecated: parser.NullableBoolean(values, sql.NullBool{}, "deprecated"), } // Convert the "organization" parameter to an organization uuid. This can require From 5f0883549517dccd9a95628e1e94eaca778a37af Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 14 Aug 2024 20:25:28 +0000 Subject: [PATCH 6/8] feedback --- site/src/components/Filter/filter.tsx | 34 +++++++++++-------- .../pages/TemplatesPage/TemplatesFilter.tsx | 3 +- .../pages/TemplatesPage/TemplatesPageView.tsx | 8 ++--- 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx index 29b34118408a4..fb36276571b92 100644 --- a/site/src/components/Filter/filter.tsx +++ b/site/src/components/Filter/filter.tsx @@ -137,7 +137,7 @@ type FilterProps = { filter: ReturnType; skeleton: ReactNode; isLoading: boolean; - learnMoreLink: string; + learnMoreLink?: string; learnMoreLabel2?: string; learnMoreLink2?: string; error?: unknown; @@ -240,7 +240,7 @@ export const Filter: FC = ({ interface PresetMenuProps { presets: PresetFilter[]; - learnMoreLink: string; + learnMoreLink?: string; learnMoreLabel2?: string; learnMoreLink2?: string; onSelect: (query: string) => void; @@ -293,19 +293,23 @@ const PresetMenu: FC = ({ {presetFilter.name} ))} - - { - setIsOpen(false); - }} - > - - View advanced filtering - + {learnMoreLink && ( + <> + + { + setIsOpen(false); + }} + > + + View advanced filtering + + + )} {learnMoreLink2 && learnMoreLabel2 && ( = ({ filter }) => { { query: "", name: "All templates" }, { query: "deprecated:true", name: "Deprecated templates" }, ]} - learnMoreLink={docs("/templates#template-filtering")} + // TODO: Add docs for this + // learnMoreLink={docs("/templates#template-filtering")} isLoading={false} filter={filter} options={ diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx index 4b61e90f68081..2a929db7549d0 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx @@ -217,11 +217,9 @@ export const TemplatesPageView: FC = ({ - {templates && templates.length > 0 && ( - - Select a template to create a workspace. - - )} + + Select a template to create a workspace. + From 4f20032d7e1f086dbc7303446e2fa05837f03530 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 14 Aug 2024 20:28:30 +0000 Subject: [PATCH 7/8] :| --- site/src/pages/TemplatesPage/TemplatesFilter.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/pages/TemplatesPage/TemplatesFilter.tsx b/site/src/pages/TemplatesPage/TemplatesFilter.tsx index f8579c167fb53..a8390069c6c00 100644 --- a/site/src/pages/TemplatesPage/TemplatesFilter.tsx +++ b/site/src/pages/TemplatesPage/TemplatesFilter.tsx @@ -13,7 +13,6 @@ import { type SelectFilterOption, } from "components/Filter/SelectFilter"; import { UserAvatar } from "components/UserAvatar/UserAvatar"; -import { docs } from "utils/docs"; interface TemplatesFilterProps { filter: ReturnType; From 6a2fafdda26616d199e3295837e50e1d48eb3d6d Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 14 Aug 2024 20:51:23 +0000 Subject: [PATCH 8/8] yea bb --- .../src/pages/TemplatesPage/TemplatesPageView.stories.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx index 63707e67a3c0f..b88a5d578cdc6 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react"; +import { getDefaultFilterProps } from "components/Filter/storyHelpers"; import { chromaticWithTablet } from "testHelpers/chromatic"; import { mockApiError, @@ -14,6 +15,13 @@ const meta: Meta = { decorators: [withDashboardProvider], parameters: { chromatic: chromaticWithTablet }, component: TemplatesPageView, + args: { + ...getDefaultFilterProps({ + query: "deprecated:false", + menus: {}, + values: {}, + }), + }, }; export default meta;