Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit7c28011

Browse files
committed
chore: cleanup
1 parentafb5361 commit7c28011

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{typeFC,createContext}from"react";
5+
import{ExperimentalFormContext}from"pages/CreateWorkspacePage/ExperimentalFormContext";
6+
importtype{FC}from"react";
7+
import{useQuery}from"react-query";
8+
import{useParams}from"react-router-dom";
39
importTemplateEmbedPagefrom"./TemplateEmbedPage";
410
importTemplateEmbedPageExperimentalfrom"./TemplateEmbedPageExperimental";
511

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

16+
const{organization:organizationName="default",template:templateName}=
17+
useParams()as{organization?:string;template:string};
18+
consttemplateQuery=useQuery(
19+
dynamicParametersEnabled
20+
?templateByName(organizationName,templateName)
21+
:{enabled:false},
22+
);
23+
24+
constoptOutQuery=useQuery(
25+
templateQuery.data
26+
?{
27+
queryKey:[
28+
organizationName,
29+
"template",
30+
templateQuery.data.id,
31+
"optOut",
32+
],
33+
queryFn:()=>{
34+
consttemplateId=templateQuery.data.id;
35+
constlocalStorageKey=optOutKey(templateId);
36+
conststoredOptOutString=localStorage.getItem(localStorageKey);
37+
38+
letoptOutResult: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<ErrorAlerterror={optOutQuery.error}/>;
63+
}
64+
65+
consttoggleOptedOut=()=>{
66+
constkey=optOutKey(optOutQuery.data.templateId);
67+
conststoredValue=localStorage.getItem(key);
68+
69+
constcurrent=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.Providervalue={{ toggleOptedOut}}>
78+
{optOutQuery.data.optedOut ?(
79+
<TemplateEmbedPage/>
80+
) :(
81+
<TemplateEmbedPageExperimental/>
82+
)}
83+
</ExperimentalFormContext.Provider>
84+
);
1785
}
1886

1987
return<TemplateEmbedPage/>;
2088
};
2189

2290
exportdefaultTemplateEmbedExperimentRouter;
91+
92+
constoptOutKey=(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
importRadioGroupfrom"@mui/material/RadioGroup";
55
import{API}from"api/api";
66
importtype{Template,TemplateVersionParameter}from"api/typesGenerated";
7+
import{ButtonasShadcnButton}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{typeFC,useEffect,useState}from"react";
14+
import{typeFC,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
typeButtonValues=Record<string,string>;
2123

@@ -64,6 +66,7 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
6466
template,
6567
templateParameters,
6668
})=>{
69+
constexperimentalFormContext=useContext(ExperimentalFormContext);
6770
const[buttonValues,setButtonValues]=useState<ButtonValues|undefined>();
6871
constclipboard=useClipboard({
6972
textToCopy:getClipboardCopyContent(
@@ -97,8 +100,19 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
97100
{!buttonValues||!templateParameters ?(
98101
<Loader/>
99102
) :(
100-
<divcss={{display:"flex",alignItems:"flex-start",gap:48}}>
101-
<divcss={{flex:1,maxWidth:400}}>
103+
<divclassName="flex items-start gap-12">
104+
<divclassName="max-w-3xl">
105+
{experimentalFormContext&&(
106+
<divclassName="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
typeFC,
2930
useCallback,
31+
useContext,
3032
useEffect,
3133
useMemo,
3234
useRef,
@@ -139,6 +141,7 @@ const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
139141
error,
140142
sendMessage,
141143
})=>{
144+
constexperimentalFormContext=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
<divclassName="flex items-start gap-12">
204-
<divclassName="max-w-screen-md gap-12">
207+
<divclassName="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)&&<ErrorAlerterror={error}/>}
206220
{diagnostics.length>0&&<Diagnosticsdiagnostics={diagnostics}/>}
207-
<VerticalForm>
221+
<divclassName="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
<ButtonPreviewtemplate={template}buttonValues={buttonValues}/>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp