Skip to content

Commit c207cae

Browse files
jaaydenhjaaydenh
committed
Feat: move org dropdown and add orgId search param
1 parent b96e7fd commit c207cae

File tree

16 files changed

+106
-72
lines changed

16 files changed

+106
-72
lines changed

‎site/src/modules/templates/TemplateCard/TemplateCard.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ export const TemplateCard: FC<TemplateCardProps> = ({
1717
...divProps
1818
}) => {
1919
const navigate = useNavigate();
20-
const templatePageLink = `/templates/${template.name}`;
20+
const organizationId =
21+
template.organization_id || "00000000-0000-0000-0000-000000000000";
22+
const templatePageLink = `/templates/${template.name}?orgId=${organizationId}`;
2123
const hasIcon = template.icon && template.icon !== "";
2224

2325
const handleKeyDown = (e: React.KeyboardEvent) => {

‎site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import TextField from "@mui/material/TextField";
22
import { useFormik } from "formik";
33
import camelCase from "lodash/camelCase";
44
import capitalize from "lodash/capitalize";
5-
import type { FC } from "react";
5+
import { useState, type FC } from "react";
66
import { useSearchParams } from "react-router-dom";
77
import * as Yup from "yup";
88
import type {
9+
Organization,
910
ProvisionerJobLog,
1011
ProvisionerType,
1112
Template,
@@ -20,6 +21,7 @@ import {
2021
FormFooter,
2122
} from "components/Form/Form";
2223
import { IconField } from "components/IconField/IconField";
24+
import { OrganizationAutocomplete } from "components/OrganizationAutocomplete/OrganizationAutocomplete";
2325
import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate";
2426
import {
2527
nameValidator,
@@ -53,6 +55,7 @@ export interface CreateTemplateData {
5355
user_variable_values?: VariableValue[];
5456
allow_everyone_group_access: boolean;
5557
provisioner_type: ProvisionerType;
58+
organization_id: string;
5659
}
5760

5861
const validationSchema = Yup.object({
@@ -85,6 +88,7 @@ const defaultInitialValues: CreateTemplateData = {
8588
allow_user_autostop: false,
8689
allow_everyone_group_access: true,
8790
provisioner_type: "terraform",
91+
organization_id: "",
8892
};
8993

9094
type GetInitialValuesParams = {
@@ -176,6 +180,7 @@ export type CreateTemplateFormProps = (
176180

177181
export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
178182
const [searchParams] = useSearchParams();
183+
const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
179184
const {
180185
onCancel,
181186
onSubmit,
@@ -188,6 +193,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
188193
allowAdvancedScheduling,
189194
variablesSectionRef,
190195
} = props;
196+
// TODO: if there is only 1 organization, set the dropdown to the default organizationId or hide it
191197

192198
const form = useFormik<CreateTemplateData>({
193199
initialValues: getInitialValues({
@@ -227,11 +233,20 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
227233
/>
228234
)}
229235

236+
<OrganizationAutocomplete
237+
{...getFieldHelpers("organization_id")}
238+
value={selectedOrg}
239+
onChange={(newValue) => {
240+
setSelectedOrg(newValue);
241+
return form.setFieldValue("organization_id", newValue?.id || "");
242+
}}
243+
size="medium"
244+
/>
245+
230246
<TextField
231247
{...getFieldHelpers("name")}
232248
disabled={isSubmitting}
233249
onChange={onChangeTrimmed(form)}
234-
autoFocus
235250
fullWidth
236251
required
237252
label="Name"

‎site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,14 @@ const CreateTemplatePage: FC = () => {
3232
onCreateVersion: setTemplateVersion,
3333
onTemplateVersionChanges: setTemplateVersion,
3434
});
35-
navigate(`/templates/${template.name}/files`);
35+
navigate(
36+
`/templates/${template.name}/files?orgId=${options.organizationId}`,
37+
);
3638
},
3739
onOpenBuildLogsDrawer: () => setIsBuildLogsOpen(true),
3840
error: createTemplateMutation.error,
3941
isCreating: createTemplateMutation.isLoading,
4042
variablesSectionRef,
41-
organizationId:
42-
searchParams.get("organizationId") ||
43-
"00000000-0000-0000-0000-000000000000",
4443
};
4544

4645
return (

‎site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,12 @@ export const DuplicateTemplateView: FC<CreateTemplatePageViewProps> = ({
2121
variablesSectionRef,
2222
error,
2323
isCreating,
24-
organizationId,
2524
}) => {
2625
const navigate = useNavigate();
2726
const { entitlements } = useDashboard();
2827
const [searchParams] = useSearchParams();
28+
const organizationId =
29+
searchParams.get("orgId") || "00000000-0000-0000-0000-000000000000";
2930
const templateByNameQuery = useQuery(
3031
templateByName(organizationId, searchParams.get("fromTemplate")!),
3132
);
@@ -77,7 +78,7 @@ export const DuplicateTemplateView: FC<CreateTemplatePageViewProps> = ({
7778
logs={templateVersionLogsQuery.data}
7879
onSubmit={async (formData) => {
7980
await onCreateTemplate({
80-
organizationId,
81+
organizationId: formData.organization_id,
8182
version: firstVersionFromFile(
8283
templateVersionQuery.data!.job.file_id,
8384
formData.user_variable_values,

‎site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ export const ImportStarterTemplateView: FC<CreateTemplatePageViewProps> = ({
2424
variablesSectionRef,
2525
error,
2626
isCreating,
27-
organizationId,
2827
}) => {
2928
const navigate = useNavigate();
3029
const { entitlements } = useDashboard();
@@ -74,7 +73,7 @@ export const ImportStarterTemplateView: FC<CreateTemplatePageViewProps> = ({
7473
logs={templateVersionLogsQuery.data}
7574
onSubmit={async (formData) => {
7675
await onCreateTemplate({
77-
organizationId,
76+
organizationId: formData.organization_id,
7877
version: firstVersionFromExample(
7978
templateExample!,
8079
formData.user_variable_values,

‎site/src/pages/CreateTemplatePage/UploadTemplateView.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export const UploadTemplateView: FC<CreateTemplatePageViewProps> = ({
1818
variablesSectionRef,
1919
isCreating,
2020
error,
21-
organizationId,
2221
}) => {
2322
const navigate = useNavigate();
2423

@@ -59,7 +58,7 @@ export const UploadTemplateView: FC<CreateTemplatePageViewProps> = ({
5958
}}
6059
onSubmit={async (formData) => {
6160
await onCreateTemplate({
62-
organizationId,
61+
organizationId: formData.organization_id,
6362
version: firstVersionFromFile(
6463
uploadedFile!.hash,
6564
formData.user_variable_values,

‎site/src/pages/CreateTemplatePage/types.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,4 @@ export type CreateTemplatePageViewProps = {
66
variablesSectionRef: React.RefObject<HTMLDivElement>;
77
error: unknown;
88
isCreating: boolean;
9-
organizationId: string;
109
};

‎site/src/pages/CreateTemplatesGalleryPage/CreateTemplatesPageView.tsx

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,13 @@ import Card from "@mui/material/Card";
33
import CardActionArea from "@mui/material/CardActionArea";
44
import CardContent from "@mui/material/CardContent";
55
import Stack from "@mui/material/Stack";
6-
import { useState, type FC } from "react";
6+
import type { FC } from "react";
77
import { Link as RouterLink } from "react-router-dom";
8-
import type { Organization } from "api/typesGenerated";
98
import { ErrorAlert } from "components/Alert/ErrorAlert";
109
import { ExternalImage } from "components/ExternalImage/ExternalImage";
1110
import { Loader } from "components/Loader/Loader";
1211
import { Margins } from "components/Margins/Margins";
13-
import { OrganizationAutocomplete } from "components/OrganizationAutocomplete/OrganizationAutocomplete";
1412
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
15-
// import { useDashboard } from "modules/dashboard/useDashboard";
1613
import type { StarterTemplatesByTag } from "utils/templateAggregators";
1714
import { StarterTemplates } from "./StarterTemplates";
1815

@@ -25,28 +22,12 @@ export const CreateTemplatesPageView: FC<CreateTemplatePageViewProps> = ({
2522
starterTemplatesByTag,
2623
error,
2724
}) => {
28-
const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
29-
const organizationId =
30-
selectedOrg?.id || "00000000-0000-0000-0000-000000000000";
31-
// TODO: if there is only 1 organization, set the dropdown to the default organizationId
32-
3325
return (
3426
<Margins>
3527
<PageHeader>
3628
<PageHeaderTitle>Create a Template</PageHeaderTitle>
3729
</PageHeader>
3830
<Stack spacing={8}>
39-
<Stack direction="row" spacing={7}>
40-
<h2 css={styles.sectionTitle}>Choose an Organization</h2>
41-
<OrganizationAutocomplete
42-
css={styles.autoComplete}
43-
value={selectedOrg}
44-
onChange={(newValue) => {
45-
setSelectedOrg(newValue);
46-
}}
47-
/>
48-
</Stack>
49-
5031
<Stack direction="row" spacing={7}>
5132
<h2 css={styles.sectionTitle}>Choose a starting point</h2>
5233
<div
@@ -60,7 +41,7 @@ export const CreateTemplatesPageView: FC<CreateTemplatePageViewProps> = ({
6041
<Card variant="outlined" sx={{ width: 320 }}>
6142
<CardActionArea
6243
component={RouterLink}
63-
to={`../templates/new?exampleId=scratch&organizationId=${organizationId}`}
44+
to="../templates/new?exampleId=scratch"
6445
sx={{ height: 115, padding: 1 }}
6546
>
6647
<CardContent>
@@ -91,7 +72,7 @@ export const CreateTemplatesPageView: FC<CreateTemplatePageViewProps> = ({
9172
<Card variant="outlined" sx={{ width: 320 }}>
9273
<CardActionArea
9374
component={RouterLink}
94-
to={`../templates/new?organizationId=${organizationId}`}
75+
to="../templates/new"
9576
sx={{ height: 115, padding: 1 }}
9677
>
9778
<CardContent>
@@ -126,20 +107,13 @@ export const CreateTemplatesPageView: FC<CreateTemplatePageViewProps> = ({
126107

127108
{Boolean(!starterTemplatesByTag) && <Loader />}
128109

129-
<StarterTemplates
130-
starterTemplatesByTag={starterTemplatesByTag}
131-
organizationId={organizationId}
132-
/>
110+
<StarterTemplates starterTemplatesByTag={starterTemplatesByTag} />
133111
</Stack>
134112
</Margins>
135113
);
136114
};
137115

138116
const styles = {
139-
autoComplete: {
140-
width: 415,
141-
},
142-
143117
sectionTitle: (theme) => ({
144118
color: theme.palette.text.primary,
145119
fontSize: 16,

‎site/src/pages/TemplatePage/TemplateLayout.tsx

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@ import {
66
useContext,
77
} from "react";
88
import { useQuery } from "react-query";
9-
import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
9+
import {
10+
Outlet,
11+
useLocation,
12+
useNavigate,
13+
useParams,
14+
useSearchParams,
15+
} from "react-router-dom";
1016
import { API } from "api/api";
1117
import type { AuthorizationRequest } from "api/typesGenerated";
1218
import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -72,8 +78,10 @@ export const TemplateLayout: FC<PropsWithChildren> = ({
7278
children = <Outlet />,
7379
}) => {
7480
const navigate = useNavigate();
75-
const { organizationId } = useDashboard();
7681
const { template: templateName } = useParams() as { template: string };
82+
const [searchParams] = useSearchParams();
83+
const organizationId =
84+
searchParams.get("orgId") || "00000000-0000-0000-0000-000000000000";
7785
const { data, error, isLoading } = useQuery({
7886
queryKey: ["template", templateName],
7987
queryFn: () => fetchTemplate(organizationId, templateName),
@@ -115,29 +123,41 @@ export const TemplateLayout: FC<PropsWithChildren> = ({
115123
>
116124
<Margins>
117125
<TabsList>
118-
<TabLink to={`/templates/${templateName}`} value="summary">
126+
<TabLink
127+
to={`/templates/${templateName}?orgId=${organizationId}`}
128+
value="summary"
129+
>
119130
Summary
120131
</TabLink>
121-
<TabLink to={`/templates/${templateName}/docs`} value="docs">
132+
<TabLink
133+
to={`/templates/${templateName}/docs?orgId=${organizationId}`}
134+
value="docs"
135+
>
122136
Docs
123137
</TabLink>
124138
{data.permissions.canUpdateTemplate && (
125-
<TabLink to={`/templates/${templateName}/files`} value="files">
139+
<TabLink
140+
to={`/templates/${templateName}/files?orgId=${organizationId}`}
141+
value="files"
142+
>
126143
Source Code
127144
</TabLink>
128145
)}
129146
<TabLink
130-
to={`/templates/${templateName}/versions`}
147+
to={`/templates/${templateName}/versions?orgId=${organizationId}`}
131148
value="versions"
132149
>
133150
Versions
134151
</TabLink>
135-
<TabLink to={`/templates/${templateName}/embed`} value="embed">
152+
<TabLink
153+
to={`/templates/${templateName}/embed?orgId=${organizationId}`}
154+
value="embed"
155+
>
136156
Embed
137157
</TabLink>
138158
{shouldShowInsights && (
139159
<TabLink
140-
to={`/templates/${templateName}/insights`}
160+
to={`/templates/${templateName}/insights?orgId=${organizationId}`}
141161
value="insights"
142162
>
143163
Insights

‎site/src/pages/TemplatePage/TemplatePageHeader.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,15 @@ type TemplateMenuProps = {
3939
templateName: string;
4040
templateVersion: string;
4141
templateId: string;
42+
organizationId: string;
4243
onDelete: () => void;
4344
};
4445

4546
const TemplateMenu: FC<TemplateMenuProps> = ({
4647
templateName,
4748
templateVersion,
4849
templateId,
50+
organizationId,
4951
onDelete,
5052
}) => {
5153
const dialogState = useDeletionDialogState(templateId, onDelete);
@@ -66,7 +68,9 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
6668
<MoreMenuContent>
6769
<MoreMenuItem
6870
onClick={() => {
69-
navigate(`/templates/${templateName}/settings`);
71+
navigate(
72+
`/templates/${templateName}/settings?orgId=${organizationId}`,
73+
);
7074
}}
7175
>
7276
<SettingsIcon />
@@ -76,7 +80,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
7680
<MoreMenuItem
7781
onClick={() => {
7882
navigate(
79-
`/templates/${templateName}/versions/${templateVersion}/edit`,
83+
`/templates/${templateName}/versions/${templateVersion}/edit?orgId=${organizationId}`,
8084
);
8185
}}
8286
>
@@ -86,7 +90,9 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
8690

8791
<MoreMenuItem
8892
onClick={() => {
89-
navigate(`/templates/new?fromTemplate=${templateName}`);
93+
navigate(
94+
`/templates/new?fromTemplate=${templateName}&orgId=${organizationId}`,
95+
);
9096
}}
9197
>
9298
<CopyIcon />
@@ -188,6 +194,7 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
188194
templateVersion={activeVersion.name}
189195
templateName={template.name}
190196
templateId={template.id}
197+
organizationId={template.organization_id}
191198
onDelete={onDeleteTemplate}
192199
/>
193200
)}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy