Skip to content

Commit 7c28011

Browse files
committed
chore: cleanup
1 parent afb5361 commit 7c28011

File tree

3 files changed

+112
-14
lines changed

3 files changed

+112
-14
lines changed
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)
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