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

Commit6b576aa

Browse files
committed
switch mui to input
1 parent33406a0 commit6b576aa

File tree

2 files changed

+40
-18
lines changed

2 files changed

+40
-18
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
renderWithAuth,
88
waitForLoaderToBeRemoved,
99
}from"testHelpers/renderHelpers";
10-
import{screen,within}from"@testing-library/react";
10+
import{screen}from"@testing-library/react";
1111
importuserEventfrom"@testing-library/user-event";
1212
import{API}from"api/api";
1313
import{TemplateLayout}from"pages/TemplatePage/TemplateLayout";
@@ -30,9 +30,9 @@ test("Users can fill the parameters and copy the open in coder url", async () =>
3030
awaitwaitForLoaderToBeRemoved();
3131

3232
constuser=userEvent.setup();
33-
constworkspaceName=within(
34-
screen.getByTestId("default-workspace-name"),
35-
).getByRole("textbox");
33+
constworkspaceName=screen.getByRole("textbox",{
34+
name:"Workspacename",
35+
});
3636
awaituser.clear(workspaceName);
3737
awaituser.type(workspaceName,"my-first-workspace");
3838
constfirstParameterField=screen.getByLabelText(
@@ -52,6 +52,6 @@ test("Users can fill the parameters and copy the open in coder url", async () =>
5252
constcopyButton=screen.getByRole("button",{name:/copy/i});
5353
awaituserEvent.click(copyButton);
5454
expect(window.navigator.clipboard.writeText).toBeCalledWith(
55-
`[![Open in Coder](http://localhost/open-in-coder.svg)](http://localhost/templates/${MockTemplate.organization_name}/${MockTemplate.name}/workspace?mode=manual&param.first_parameter=firstParameterValue&param.second_parameter=123456&name=my-first-workspace)`,
55+
`[![Open in Coder](http://localhost/open-in-coder.svg)](http://localhost/templates/${MockTemplate.organization_name}/${MockTemplate.name}/workspace?mode=manual&name=my-first-workspace&param.first_parameter=firstParameterValue&param.second_parameter=123456)`,
5656
);
5757
});

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

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@ import Button from "@mui/material/Button";
22
importFormControlLabelfrom"@mui/material/FormControlLabel";
33
importRadiofrom"@mui/material/Radio";
44
importRadioGroupfrom"@mui/material/RadioGroup";
5-
importTextFieldfrom"@mui/material/TextField";
65
import{API}from"api/api";
76
importtype{Template,TemplateVersionParameter}from"api/typesGenerated";
87
import{FormSection,VerticalForm}from"components/Form/Form";
8+
import{Input}from"components/Input/Input";
9+
import{Label}from"components/Label/Label";
910
import{Loader}from"components/Loader/Loader";
1011
import{RichParameterInput}from"components/RichParameterInput/RichParameterInput";
1112
import{useClipboard}from"hooks/useClipboard";
1213
import{CheckIcon,CopyIcon}from"lucide-react";
1314
import{useTemplateLayoutContext}from"pages/TemplatePage/TemplateLayout";
14-
import{typeFC,useEffect,useState}from"react";
15+
import{typeFC,useEffect,useId,useState}from"react";
1516
import{Helmet}from"react-helmet-async";
1617
import{useQuery}from"react-query";
1718
import{nameValidator}from"utils/formUtils";
@@ -58,6 +59,9 @@ function getClipboardCopyContent(
5859
constdeploymentUrl=`${window.location.protocol}//${window.location.host}`;
5960
constcreateWorkspaceUrl=`${deploymentUrl}/templates/${organization}/${templateName}/workspace`;
6061
constcreateWorkspaceParams=newURLSearchParams(buttonValues);
62+
if(createWorkspaceParams.get("name")===""){
63+
createWorkspaceParams.delete("name");// skip default workspace name if undefined
64+
}
6165
constbuttonUrl=`${createWorkspaceUrl}?${createWorkspaceParams.toString()}`;
6266

6367
return`[![Open in Coder](${deploymentUrl}/open-in-coder.svg)](${buttonUrl})`;
@@ -84,6 +88,7 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
8488
if(templateParameters&&!buttonValues){
8589
constbuttonValues:ButtonValues={
8690
mode:"manual",
91+
name:"",
8792
};
8893
for(constparameterofgetInitialRichParameterValues(
8994
templateParameters,
@@ -108,6 +113,9 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
108113
}
109114
};
110115

116+
consthookId=useId();
117+
constdefaultWorkspaceNameID=`${hookId}-default-workspace-name`;
118+
111119
return(
112120
<>
113121
<Helmet>
@@ -145,25 +153,39 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
145153
</RadioGroup>
146154
</FormSection>
147155

148-
<FormSection
149-
title="Workspace name"
150-
description="Default name for the new workspace"
151-
>
152-
<TextField
153-
data-testid="default-workspace-name"
154-
defaultValue={buttonValues.name}
155-
fullWidth
156+
<divclassName="flex flex-col gap-1">
157+
<LabelclassName="text-md"htmlFor={defaultWorkspaceNameID}>
158+
Workspace name
159+
</Label>
160+
<div
161+
className={"text-sm mb-3"}
162+
css={(theme)=>({
163+
color:theme.palette.text.secondary,
164+
})}
165+
>
166+
Default name for the new workspace
167+
</div>
168+
<Input
169+
id={defaultWorkspaceNameID}
170+
value={buttonValues.name}
156171
onChange={(event)=>{
157172
validateWorkspaceName(event.target.value);
158173
setButtonValues((buttonValues)=>({
159174
...buttonValues,
160175
name:event.target.value,
161176
}));
162177
}}
163-
error={workspaceNameError!==""}
164-
helperText={workspaceNameError}
165178
/>
166-
</FormSection>
179+
<div
180+
className="text-sm mt-1"
181+
role="alert"
182+
css={(theme)=>({
183+
color:theme.palette.error.main,
184+
})}
185+
>
186+
{workspaceNameError||"\u00A0"}
187+
</div>
188+
</div>
167189

168190
{templateParameters.length>0&&(
169191
<div

0 commit comments

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