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

Skip to content

Commit 71d0a19

Browse files
jaaydenhjaaydenh
committed
chore: cleanup
1 parent 2758139 commit 71d0a19

File tree

3 files changed

+112
-14
lines changed

3 files changed

+112
-14
lines changed

‎site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedExperimentRouter.tsx

Lines changed: 77 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,92 @@
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 { type FC, createContext } from "react";
5+
import { ExperimentalFormContext } from "pages/CreateWorkspacePage/ExperimentalFormContext";
6+
import type { FC } from "react";
7+
import { useQuery } from "react-query";
8+
import { useParams } from "react-router-dom";
39
import TemplateEmbedPage from "./TemplateEmbedPage";
410
import TemplateEmbedPageExperimental from "./TemplateEmbedPageExperimental";
511

6-
// Similar context as in CreateWorkspaceExperimentRouter for maintaining consistency
7-
export const ExperimentalFormContext = createContext<
8-
{ toggleOptedOut: () => void } | undefined
9-
>(undefined);
10-
1112
const TemplateEmbedExperimentRouter: FC = () => {
1213
const { experiments } = useDashboard();
1314
const dynamicParametersEnabled = experiments.includes("dynamic-parameters");
1415

16+
const { organization: organizationName = "default", template: templateName } =
17+
useParams() as { organization?: string; template: string };
18+
const templateQuery = useQuery(
19+
dynamicParametersEnabled
20+
? templateByName(organizationName, templateName)
21+
: { enabled: false },
22+
);
23+
24+
const optOutQuery = useQuery(
25+
templateQuery.data
26+
? {
27+
queryKey: [
28+
organizationName,
29+
"template",
30+
templateQuery.data.id,
31+
"optOut",
32+
],
33+
queryFn: () => {
34+
const templateId = templateQuery.data.id;
35+
const localStorageKey = optOutKey(templateId);
36+
const storedOptOutString = localStorage.getItem(localStorageKey);
37+
38+
let optOutResult: boolean;
39+
40+
if (storedOptOutString !== null) {
41+
optOutResult = storedOptOutString === "true";
42+
} else {
43+
optOutResult = Boolean(
44+
templateQuery.data.use_classic_parameter_flow,
45+
);
46+
}
47+
48+
return {
49+
templateId: templateId,
50+
optedOut: optOutResult,
51+
};
52+
},
53+
}
54+
: { enabled: false },
55+
);
56+
1557
if (dynamicParametersEnabled) {
16-
return <TemplateEmbedPageExperimental />;
58+
if (optOutQuery.isLoading) {
59+
return <Loader />;
60+
}
61+
if (!optOutQuery.data) {
62+
return <ErrorAlert error={optOutQuery.error} />;
63+
}
64+
65+
const toggleOptedOut = () => {
66+
const key = optOutKey(optOutQuery.data.templateId);
67+
const storedValue = localStorage.getItem(key);
68+
69+
const current = storedValue
70+
? storedValue === "true"
71+
: Boolean(templateQuery.data?.use_classic_parameter_flow);
72+
73+
localStorage.setItem(key, (!current).toString());
74+
optOutQuery.refetch();
75+
};
76+
return (
77+
<ExperimentalFormContext.Provider value={{ toggleOptedOut }}>
78+
{optOutQuery.data.optedOut ? (
79+
<TemplateEmbedPage />
80+
) : (
81+
<TemplateEmbedPageExperimental />
82+
)}
83+
</ExperimentalFormContext.Provider>
84+
);
1785
}
1886

1987
return <TemplateEmbedPage />;
2088
};
2189

2290
export default TemplateEmbedExperimentRouter;
91+
92+
const optOutKey = (id: string) => `parameters.${id}.optOut`;

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,20 @@ import Radio from "@mui/material/Radio";
44
import RadioGroup from "@mui/material/RadioGroup";
55
import { API } from "api/api";
66
import type { Template, TemplateVersionParameter } from "api/typesGenerated";
7+
import { Button as ShadcnButton } from "components/Button/Button";
78
import { FormSection, VerticalForm } from "components/Form/Form";
89
import { Loader } from "components/Loader/Loader";
910
import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
1011
import { useClipboard } from "hooks/useClipboard";
1112
import { CheckIcon, CopyIcon } from "lucide-react";
1213
import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
13-
import { type FC, useEffect, useState } from "react";
14+
import { type FC, useContext, useEffect, useState } from "react";
1415
import { Helmet } from "react-helmet-async";
1516
import { useQuery } from "react-query";
1617
import { pageTitle } from "utils/page";
1718
import { getInitialRichParameterValues } from "utils/richParameters";
1819
import { paramsUsedToCreateWorkspace } from "utils/workspace";
20+
import { ExperimentalFormContext } from "../../CreateWorkspacePage/ExperimentalFormContext";
1921

2022
type ButtonValues = Record<string, string>;
2123

@@ -64,6 +66,7 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
6466
template,
6567
templateParameters,
6668
}) => {
69+
const experimentalFormContext = useContext(ExperimentalFormContext);
6770
const [buttonValues, setButtonValues] = useState<ButtonValues | undefined>();
6871
const clipboard = useClipboard({
6972
textToCopy: getClipboardCopyContent(
@@ -97,8 +100,19 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
97100
{!buttonValues || !templateParameters ? (
98101
<Loader />
99102
) : (
100-
<div css={{ display: "flex", alignItems: "flex-start", gap: 48 }}>
101-
<div css={{ flex: 1, maxWidth: 400 }}>
103+
<div className="flex items-start gap-12">
104+
<div className="max-w-3xl">
105+
{experimentalFormContext && (
106+
<div className="mb-4">
107+
<ShadcnButton
108+
size="sm"
109+
variant="outline"
110+
onClick={experimentalFormContext.toggleOptedOut}
111+
>
112+
Try out the new workspace creation flow ✨
113+
</ShadcnButton>
114+
</div>
115+
)}
102116
<VerticalForm>
103117
<FormSection
104118
title="Creation mode"

‎site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPageExperimental.tsx

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,20 @@ import type {
1515
} from "api/typesGenerated";
1616
import { ErrorAlert } from "components/Alert/ErrorAlert";
1717
import { Button } from "components/Button/Button";
18-
import { FormSection, VerticalForm } from "components/Form/Form";
18+
import { FormSection } from "components/Form/Form";
1919
import { Loader } from "components/Loader/Loader";
2020
import { useEffectEvent } from "hooks/hookPolyfills";
2121
import { useClipboard } from "hooks/useClipboard";
2222
import {
2323
Diagnostics,
2424
DynamicParameter,
2525
} from "modules/workspaces/DynamicParameter/DynamicParameter";
26+
import { ExperimentalFormContext } from "pages/CreateWorkspacePage/ExperimentalFormContext";
2627
import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
2728
import {
2829
type FC,
2930
useCallback,
31+
useContext,
3032
useEffect,
3133
useMemo,
3234
useRef,
@@ -139,6 +141,7 @@ const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
139141
error,
140142
sendMessage,
141143
}) => {
144+
const experimentalFormContext = useContext(ExperimentalFormContext);
142145
const [buttonValues, setButtonValues] = useState<ButtonValues | undefined>();
143146
const [localParameters, setLocalParameters] = useState<
144147
Record<string, string>
@@ -201,10 +204,21 @@ const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
201204
return (
202205
<>
203206
<div className="flex items-start gap-12">
204-
<div className="max-w-screen-md gap-12">
207+
<div className="flex flex-col gap-5 max-w-screen-md">
208+
{experimentalFormContext && (
209+
<div>
210+
<Button
211+
size="sm"
212+
variant="outline"
213+
onClick={experimentalFormContext.toggleOptedOut}
214+
>
215+
Go back to the classic template embed flow
216+
</Button>
217+
</div>
218+
)}
205219
{Boolean(error) && <ErrorAlert error={error} />}
206220
{diagnostics.length > 0 && <Diagnostics diagnostics={diagnostics} />}
207-
<VerticalForm>
221+
<div className="flex flex-col">
208222
<FormSection
209223
title="Creation mode"
210224
description="By changing the mode to automatic, when the user clicks the button, the workspace will be created automatically instead of showing a form to the user."
@@ -247,7 +261,7 @@ const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
247261
})}
248262
</div>
249263
)}
250-
</VerticalForm>
264+
</div>
251265
</div>
252266

253267
<ButtonPreview template={template} buttonValues={buttonValues} />

0 commit comments

Comments
 (0)