Skip to content

Commit 108809c

Browse files
mtojekmtojek
committed
switch mui to input
1 parent 33406a0 commit 108809c

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
import userEvent from "@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
await waitForLoaderToBeRemoved();
3131

3232
const user = userEvent.setup();
33-
const workspaceName = within(
34-
screen.getByTestId("default-workspace-name"),
35-
).getByRole("textbox");
33+
const workspaceName = screen.getByRole("textbox", {
34+
name: "Workspace name",
35+
});
3636
await user.clear(workspaceName);
3737
await user.type(workspaceName, "my-first-workspace");
3838
const firstParameterField = screen.getByLabelText(
@@ -52,6 +52,6 @@ test("Users can fill the parameters and copy the open in coder url", async () =>
5252
const copyButton = screen.getByRole("button", { name: /copy/i });
5353
await userEvent.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
import FormControlLabel from "@mui/material/FormControlLabel";
33
import Radio from "@mui/material/Radio";
44
import RadioGroup from "@mui/material/RadioGroup";
5-
import TextField from "@mui/material/TextField";
65
import { API } from "api/api";
76
import type { 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 { type FC, useEffect, useState } from "react";
15+
import { type FC, 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
const deploymentUrl = `${window.location.protocol}//${window.location.host}`;
5960
const createWorkspaceUrl = `${deploymentUrl}/templates/${organization}/${templateName}/workspace`;
6061
const createWorkspaceParams = new URLSearchParams(buttonValues);
62+
if (createWorkspaceParams.get("name") === "") {
63+
createWorkspaceParams.delete("name"); // skip default workspace name if undefined
64+
}
6165
const buttonUrl = `${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
const buttonValues: ButtonValues = {
8690
mode: "manual",
91+
name: "",
8792
};
8893
for (const parameter of getInitialRichParameterValues(
8994
templateParameters,
@@ -108,6 +113,9 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
108113
}
109114
};
110115

116+
const hookId = useId();
117+
const defaultWorkspaceNameID = `${hookId}-default-ws`;
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+
<div className="flex flex-col gap-1">
157+
<Label className="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)