Thanks to visit codestin.com
Credit goes to github.com

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)