Skip to content

Commit 210f80c

Browse files
aslilacaslilac
committed
:)
1 parent f7cc333 commit 210f80c

File tree

5 files changed

+78
-31
lines changed

5 files changed

+78
-31
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@ export const templateByName = (
3434
): QueryOptions<Template> => {
3535
return {
3636
queryKey: templateByNameKey(organization, name),
37-
queryFn: async () => API.getTemplateByName(organization, name),
37+
queryFn: async () => {
38+
return API.getTemplateByName(organization, name);
39+
},
3840
};
3941
};
4042

‎site/src/pages/CreateWorkspacePage/CreateWorkspaceExperimentRouter.tsx

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1+
import { templateByName } from "api/queries/templates";
2+
import { ErrorAlert } from "components/Alert/ErrorAlert";
3+
import { Loader } from "components/Loader/Loader";
14
import { useDashboard } from "modules/dashboard/useDashboard";
2-
import { createContext, type FC, useState } from "react";
5+
import { type FC, createContext } from "react";
6+
import { useQuery } from "react-query";
7+
import { useParams } from "react-router-dom";
38
import CreateWorkspacePage from "./CreateWorkspacePage";
49
import CreateWorkspacePageExperimental from "./CreateWorkspacePageExperimental";
5-
import { useParams } from "react-router-dom";
6-
import { useQuery } from "react-query";
7-
import { templateByName } from "api/queries/templates";
8-
import { Loader } from "components/Loader/Loader";
9-
import { ErrorAlert } from "components/Alert/ErrorAlert";
1010

1111
const CreateWorkspaceExperimentRouter: FC = () => {
1212
const { experiments } = useDashboard();
@@ -20,35 +20,47 @@ const CreateWorkspaceExperimentRouter: FC = () => {
2020
: { enabled: false },
2121
);
2222

23+
const optOutQuery = useQuery(
24+
templateQuery.data
25+
? {
26+
queryKey: [
27+
organizationName,
28+
"template",
29+
templateQuery.data.id,
30+
"optOut",
31+
],
32+
queryFn: () => ({
33+
templateId: templateQuery.data.id,
34+
optedOut:
35+
localStorage.getItem(optOutKey(templateQuery.data.id)) === "true",
36+
}),
37+
}
38+
: { enabled: false },
39+
);
40+
2341
if (dynamicParametersEnabled) {
24-
if (templateQuery.isLoading) {
42+
if (optOutQuery.isLoading) {
2543
return <Loader />;
2644
}
27-
if (!templateQuery.data) {
28-
return <ErrorAlert error={templateQuery.error} />;
45+
if (!optOutQuery.data) {
46+
return <ErrorAlert error={optOutQuery.error} />;
2947
}
3048

31-
const optOut = `parameters.${templateQuery.data.id}.optOut`;
32-
const [optedOut, setOptedOut] = useState(
33-
localStorage.getItem(optOut) == "true",
34-
);
35-
3649
const toggleOptedOut = () => {
37-
setOptedOut((prev) => {
38-
const next = !prev;
39-
localStorage.setItem(optOut, next.toString());
40-
return next;
41-
});
50+
const key = optOutKey(optOutQuery.data.templateId);
51+
const current = localStorage.getItem(key) === "true";
52+
localStorage.setItem(key, (!current).toString());
53+
optOutQuery.refetch();
4254
};
4355

4456
return (
45-
<CreateWorkspaceContext.Provider value={{ toggleOptedOut }}>
46-
{optedOut ? (
57+
<NewFormContext.Provider value={{ toggleOptedOut }}>
58+
{optOutQuery.data.optedOut ? (
4759
<CreateWorkspacePage />
4860
) : (
4961
<CreateWorkspacePageExperimental />
5062
)}
51-
</CreateWorkspaceContext.Provider>
63+
</NewFormContext.Provider>
5264
);
5365
}
5466

@@ -57,6 +69,8 @@ const CreateWorkspaceExperimentRouter: FC = () => {
5769

5870
export default CreateWorkspaceExperimentRouter;
5971

60-
const CreateWorkspaceContext = createContext<
72+
const optOutKey = (id: string) => `parameters.${id}.optOut`;
73+
74+
export const NewFormContext = createContext<
6175
{ toggleOptedOut: () => void } | undefined
6276
>(undefined);

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,11 @@ const CreateWorkspacePageExperimental: FC = () => {
6969
const templateQuery = useQuery(
7070
templateByName(organizationName, templateName),
7171
);
72-
const templateVersionPresetsQuery = useQuery({
73-
...templateVersionPresets(templateQuery.data?.active_version_id ?? ""),
74-
enabled: templateQuery.data !== undefined,
75-
});
72+
const templateVersionPresetsQuery = useQuery(
73+
templateQuery.data
74+
? templateVersionPresets(templateQuery.data.active_version_id)
75+
: { enabled: false },
76+
);
7677
const permissionsQuery = useQuery(
7778
templateQuery.data
7879
? checkAuthorization({

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import FormControlLabel from "@mui/material/FormControlLabel";
32
import FormHelperText from "@mui/material/FormHelperText";
43
import TextField from "@mui/material/TextField";
54
import type * as TypesGen from "api/typesGenerated";
@@ -29,7 +28,14 @@ import { Switch } from "components/Switch/Switch";
2928
import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
3029
import { type FormikContextType, useFormik } from "formik";
3130
import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName";
32-
import { type FC, useCallback, useEffect, useMemo, useState } from "react";
31+
import {
32+
type FC,
33+
useCallback,
34+
useContext,
35+
useEffect,
36+
useMemo,
37+
useState,
38+
} from "react";
3339
import {
3440
getFormHelpers,
3541
nameValidator,
@@ -47,6 +53,8 @@ import type {
4753
} from "./CreateWorkspacePage";
4854
import { ExternalAuthButton } from "./ExternalAuthButton";
4955
import type { CreateWorkspacePermissions } from "./permissions";
56+
import { NewFormContext } from "./CreateWorkspaceExperimentRouter";
57+
5058
export const Language = {
5159
duplicationWarning:
5260
"Duplicating a workspace only copies its parameters. No state from the old workspace is copied over.",
@@ -98,6 +106,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
98106
onSubmit,
99107
onCancel,
100108
}) => {
109+
const newFormContext = useContext(NewFormContext);
101110
const [owner, setOwner] = useState(defaultOwner);
102111
const [suggestedName, setSuggestedName] = useState(() =>
103112
generateWorkspaceName(),
@@ -238,6 +247,12 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
238247
</Stack>
239248
</PageHeader>
240249

250+
{newFormContext && (
251+
<button type="button" onClick={newFormContext.toggleOptedOut}>
252+
Try out the new workspace creation flow ✨
253+
</button>
254+
)}
255+
241256
<HorizontalForm
242257
name="create-workspace-form"
243258
onSubmit={form.handleSubmit}

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,14 @@ import {
2222
useValidationSchemaForDynamicParameters,
2323
} from "modules/workspaces/DynamicParameter/DynamicParameter";
2424
import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName";
25-
import { type FC, useCallback, useEffect, useId, useState } from "react";
25+
import {
26+
type FC,
27+
useCallback,
28+
useContext,
29+
useEffect,
30+
useId,
31+
useState,
32+
} from "react";
2633
import { getFormHelpers, nameValidator } from "utils/formUtils";
2734
import type { AutofillBuildParameter } from "utils/richParameters";
2835
import * as Yup from "yup";
@@ -32,6 +39,7 @@ import type {
3239
} from "./CreateWorkspacePage";
3340
import { ExternalAuthButton } from "./ExternalAuthButton";
3441
import type { CreateWorkspacePermissions } from "./permissions";
42+
import { NewFormContext } from "./CreateWorkspaceExperimentRouter";
3543

3644
export interface CreateWorkspacePageViewExperimentalProps {
3745
autofillParameters: AutofillBuildParameter[];
@@ -89,6 +97,7 @@ export const CreateWorkspacePageViewExperimental: FC<
8997
owner,
9098
setOwner,
9199
}) => {
100+
const newFormContext = useContext(NewFormContext);
92101
const [suggestedName, setSuggestedName] = useState(() =>
93102
generateWorkspaceName(),
94103
);
@@ -270,6 +279,12 @@ export const CreateWorkspacePageViewExperimental: FC<
270279
{template.deprecated && <Pill type="warning">Deprecated</Pill>}
271280
</header>
272281

282+
{newFormContext && (
283+
<button type="button" onClick={newFormContext.toggleOptedOut}>
284+
Go back to the classic workspace creation flow
285+
</button>
286+
)}
287+
273288
<form
274289
onSubmit={form.handleSubmit}
275290
aria-label="Create workspace form"

0 commit comments

Comments
 (0)