Skip to content

Commit c59d300

Browse files
jaaydenhjaaydenh
committed
feat: update template filter api logic
1 parent 5ae5508 commit c59d300

File tree

7 files changed

+30
-41
lines changed

7 files changed

+30
-41
lines changed

‎site/src/api/api.ts

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -187,8 +187,7 @@ export const watchBuildLogsByTemplateVersionId = (
187187

188188
const proto = location.protocol === "https:" ? "wss:" : "ws:";
189189
const socket = new WebSocket(
190-
`${proto}//${
191-
location.host
190+
`${proto}//${location.host
192191
}/api/v2/templateversions/${versionId}/logs?${searchParams.toString()}`,
193192
);
194193

@@ -270,8 +269,7 @@ export const watchBuildLogsByBuildId = (
270269
}
271270
const proto = location.protocol === "https:" ? "wss:" : "ws:";
272271
const socket = new WebSocket(
273-
`${proto}//${
274-
location.host
272+
`${proto}//${location.host
275273
}/api/v2/workspacebuilds/${buildId}/logs?${searchParams.toString()}`,
276274
);
277275
socket.binaryType = "blob";
@@ -382,7 +380,7 @@ export class MissingBuildParameters extends Error {
382380
* lexical scope.
383381
*/
384382
class ApiMethods {
385-
constructor(protected readonly axios: AxiosInstance) {}
383+
constructor(protected readonly axios: AxiosInstance) { }
386384

387385
login = async (
388386
email: string,
@@ -577,21 +575,10 @@ class ApiMethods {
577575
};
578576

579577
getTemplates = async (
580-
options?: TemplateOptions,
578+
options?: TypesGen.TemplateFilter,
581579
): Promise<TypesGen.Template[]> => {
582-
const params: Record<string, string> = {};
583-
if (options?.deprecated !== undefined) {
584-
// Just want to check if it isn't undefined. If it has
585-
// a boolean value, convert it to a string and include
586-
// it as a param.
587-
params["deprecated"] = String(options.deprecated);
588-
}
589-
590-
const response = await this.axios.get<TypesGen.Template[]>(
591-
`/api/v2/templates`,
592-
{ params },
593-
);
594-
580+
const url = getURLWithSearchParams("/api/v2/templates", options);
581+
const response = await this.axios.get<TypesGen.Template[]>(url);
595582
return response.data;
596583
};
597584

‎site/src/api/queries/audits.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { API } from "api/api";
22
import type { AuditLogResponse } from "api/typesGenerated";
3-
import { useFilterParamsKey } from "components/Filter/filter";
43
import type { UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
4+
import { filterParamsKey } from "utils/filters";
55

66
export function paginatedAudits(
77
searchParams: URLSearchParams,
88
): UsePaginatedQueryOptions<AuditLogResponse, string> {
99
return {
1010
searchParams,
11-
queryPayload: () => searchParams.get(useFilterParamsKey) ?? "",
11+
queryPayload: () => searchParams.get(filterParamsKey) ?? "",
1212
queryKey: ({ payload, pageNumber }) => {
1313
return ["auditLogs", payload, pageNumber] as const;
1414
},

‎site/src/api/queries/templates.ts

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { MutationOptions, QueryClient, QueryOptions } from "react-query";
22
import { API } from "api/api";
33
import type {
4+
TemplateFilter,
45
CreateTemplateRequest,
56
CreateTemplateVersionRequest,
67
ProvisionerJob,
@@ -46,15 +47,10 @@ export const templatesByOrganizationId = (
4647
};
4748
};
4849

49-
const getTemplatesQueryKey = (deprecated?: boolean) => [
50-
"templates",
51-
deprecated,
52-
];
53-
54-
export const templates = (deprecated?: boolean) => {
50+
export const templates = (config: TemplateFilter = {}) => {
5551
return {
56-
queryKey: getTemplatesQueryKey(deprecated),
57-
queryFn: () => API.getTemplates({ deprecated }),
52+
queryKey: ["templates", config],
53+
queryFn: () => API.getTemplates(config),
5854
};
5955
};
6056

‎site/src/components/Filter/filter.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
import { InputGroup } from "components/InputGroup/InputGroup";
1717
import { SearchField } from "components/SearchField/SearchField";
1818
import { useDebouncedFunction } from "hooks/debounce";
19+
import { filterParamsKey } from "utils/filters";
1920

2021
export type PresetFilter = {
2122
name: string;
@@ -35,21 +36,19 @@ type UseFilterConfig = {
3536
onUpdate?: (newValue: string) => void;
3637
};
3738

38-
export const useFilterParamsKey = "filter";
39-
4039
export const useFilter = ({
4140
fallbackFilter = "",
4241
searchParamsResult,
4342
onUpdate,
4443
}: UseFilterConfig) => {
4544
const [searchParams, setSearchParams] = searchParamsResult;
46-
const query = searchParams.get(useFilterParamsKey) ?? fallbackFilter;
45+
const query = searchParams.get(filterParamsKey) ?? fallbackFilter;
4746

4847
const update = (newValues: string | FilterValues) => {
4948
const serialized =
5049
typeof newValues === "string" ? newValues : stringifyFilter(newValues);
5150

52-
searchParams.set(useFilterParamsKey, serialized);
51+
searchParams.set(filterParamsKey, serialized);
5352
setSearchParams(searchParams);
5453

5554
if (onUpdate !== undefined) {

‎site/src/pages/TemplatesPage/MultiOrgTemplatePage/TemplatesPageView.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export interface TemplatesPageViewProps {
5252
templates: Template[] | undefined;
5353
examples: TemplateExample[] | undefined;
5454
canCreateTemplates: boolean;
55+
query: string | undefined;
5556
error?: unknown;
5657
}
5758

@@ -79,14 +80,12 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
7980
templates,
8081
examples,
8182
canCreateTemplates,
83+
query,
8284
error,
8385
}) => {
84-
const [urlParams] = useSearchParams();
85-
const isEmpty = templates && templates.length === 0;
8686
const navigate = useNavigate();
87-
88-
const activeOrg = urlParams.get("org") ?? "all";
89-
87+
const isEmpty = templates && templates.length === 0;
88+
const activeOrg = query?.split(":")[1] ?? "all";
9089
const templatesByOrg = getTemplatesByOrg(templates ?? []);
9190

9291
return (
@@ -109,15 +108,17 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
109108
)}
110109
</PageHeader>
111110

112-
{Boolean(error) && <ErrorAlert error={error} />}
111+
{Boolean(error) && (
112+
<ErrorAlert error={error} css={{ marginBottom: 32 }} />
113+
)}
113114

114115
<Stack direction="row" spacing={4} alignItems="flex-start">
115116
<Stack css={{ width: 208, flexShrink: 0, position: "sticky", top: 48 }}>
116117
<span css={styles.filterCaption}>ORGANIZATION</span>
117118
{Object.keys(templatesByOrg).map((org) => (
118119
<Link
119120
key={org}
120-
to={`?org=${org}`}
121+
to={org !== "all" ? `?filter=organization:${org}` : "?"}
121122
css={[styles.tagLink, org === activeOrg && styles.tagLinkActive]}
122123
>
123124
{org === "all" ? "All Organizations" : org} (

‎site/src/pages/TemplatesPage/TemplatesPage.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
11
import type { FC } from "react";
22
import { Helmet } from "react-helmet-async";
33
import { useQuery } from "react-query";
4+
import { useSearchParams } from "react-router-dom";
45
import {
56
templateExamples,
67
templatesByOrganizationId,
78
templates,
89
} from "api/queries/templates";
910
import { useAuthenticated } from "contexts/auth/RequireAuth";
1011
import { useDashboard } from "modules/dashboard/useDashboard";
12+
import { filterParamsKey } from "utils/filters";
1113
import { pageTitle } from "utils/page";
1214
import { TemplatesPageView as MultiOrgTemplatesPageView } from "./MultiOrgTemplatePage/TemplatesPageView";
1315
import { TemplatesPageView } from "./TemplatePage/TemplatesPageView";
1416

1517
export const TemplatesPage: FC = () => {
1618
const { permissions } = useAuthenticated();
1719
const { organizationId, experiments } = useDashboard();
20+
const [searchParams] = useSearchParams();
21+
const query = searchParams.get(filterParamsKey) || undefined;
1822

1923
const templatesByOrganizationIdQuery = useQuery(
2024
templatesByOrganizationId(organizationId),
2125
);
22-
const templatesQuery = useQuery(templates());
26+
const templatesQuery = useQuery(templates({ q: query }));
2327
const examplesQuery = useQuery({
2428
...templateExamples(organizationId),
2529
enabled: permissions.createTemplates,
@@ -41,6 +45,7 @@ export const TemplatesPage: FC = () => {
4145
canCreateTemplates={permissions.createTemplates}
4246
examples={examplesQuery.data}
4347
templates={templatesQuery.data}
48+
query={query}
4449
/>
4550
) : (
4651
<TemplatesPageView

‎site/src/utils/filters.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ export function prepareQuery(query: string | undefined): string | undefined;
44
export function prepareQuery(query?: string): string | undefined {
55
return query?.trim().replace(/ +/g, " ");
66
}
7+
export const filterParamsKey = "filter";

0 commit comments

Comments
 (0)