Skip to content

Commit 18a4cc1

Browse files
krishagarwal278krishagarwal278
committed
Fixed YAML editor link position
1 parent e4d40b8 commit 18a4cc1

4 files changed

Lines changed: 397 additions & 156 deletions

File tree

‎integration-tests/e2e/crud.cy.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ describe(`${PLUGIN_NAME}`, () => {
5151
nav.sidenav.clickNavLink(["Workloads", "CronTabs"]);
5252
common.resourceTitleShouldHaveText("CronTabs");
5353
listPage.clickCreateForm();
54-
cy.byTestID("page-heading").should("contain", "Create CronTab");
54+
cy.byTestID("page-heading").should("include.text", "Create CronTab");
5555
cy.log("Filling CronTab form");
5656
cy.byTestID("crontab-name").type(cronTabName);
5757
cy.byTestID("crontab-cronSpec").type(cronSpecValue);

‎locales/en/plugin__console-crontab-plugin.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,18 @@
1414
"Edit CronTab": "Edit CronTab",
1515
"Edit labels": "Edit labels",
1616
"Error creating CronTab: {{err}}": "Error creating CronTab: {{err}}",
17+
"Form View": "Form View",
1718
"Image": "Image",
1819
"Increase replicas": "Increase replicas",
20+
"Invalid YAML: {{err}}": "Invalid YAML: {{err}}",
1921
"Name": "Name",
2022
"Namespace": "Namespace",
2123
"Number of replicas": "Number of replicas",
2224
"replicas": "replicas",
2325
"Replicas": "Replicas",
2426
"Specifies the container image to be executed by the CronTab.": "Specifies the container image to be executed by the CronTab.",
25-
"The desired number of instances of this CronTab to run.": "The desired number of instances of this CronTab to run."
26-
}
27+
"The desired number of instances of this CronTab to run.": "The desired number of instances of this CronTab to run.",
28+
"YAML Editor": "YAML Editor",
29+
"YAML must include metadata.name or metadata.generateName": "YAML must include metadata.name or metadata.generateName",
30+
"YAML must include spec": "YAML must include spec"
31+
}

‎src/views/CronTabForm/CronTabForm.tsx‎

Lines changed: 151 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -139,163 +139,168 @@ export const CronTabForm: React.FC = () => {
139139
};
140140

141141
return (
142-
<PageSection isFilled={true} height="sizeToFit">
142+
<>
143+
<div data-test="page-heading">
144+
<PageHeader title={t("Create CronTab")} data-test="page-heading" />
145+
</div>
143146
<PageHeader
144-
title={t("Create CronTab")}
145147
linkProps={
146148
{
147149
label: showYaml ? t("Form View") : t("YAML Editor"),
148150
onClick: () => setShowYaml(!showYaml),
149151
} as PageHeaderLinkProps
150152
}
151153
/>
152-
153-
{showYaml ? (
154-
<>
155-
<CodeEditor
156-
value={yamlContent}
157-
onChange={(val) => setYamlContent(val)}
158-
// @ts-expect-error TODO: fix this
159-
height="500px"
160-
language="yaml"
161-
options={{
162-
wordWrap: "on",
163-
formatOnPaste: true,
164-
}}
165-
/>
166-
{error && <Alert variant="danger" title={error} />}
167-
<ActionGroup>
168-
<Button
169-
type="button"
170-
style={{ marginTop: "2rem", marginRight: "0.5rem" }}
171-
variant="primary"
172-
isDisabled={loading}
173-
onClick={handleYamlSubmit}
174-
isLoading={loading}
175-
>
176-
{t("Create")}
177-
</Button>
178-
<Button
179-
variant="secondary"
180-
style={{ marginTop: "2rem", marginLeft: "0.5rem" }}
181-
onClick={() => navigate(-1)}
182-
isDisabled={loading}
183-
>
184-
{t("Cancel")}
185-
</Button>
186-
</ActionGroup>
187-
</>
188-
) : (
189-
<Form>
190-
<FormGroup label={t("Name")} fieldId="crontab-name" isRequired>
191-
<TextInput
192-
id="crontab-name"
193-
data-test="crontab-name"
194-
name="name"
195-
onChange={(_e, value) => setName(value)}
196-
value={name}
197-
required
198-
/>
199-
<FormHelperText>
200-
<HelperText>
201-
<HelperTextItem>
202-
{t(
203-
"A unique identifier for this CronTab within the project."
204-
)}
205-
</HelperTextItem>
206-
</HelperText>
207-
</FormHelperText>
208-
</FormGroup>
209-
<FormGroup
210-
label={t("CronSpec")}
211-
fieldId="crontab-cronSpec"
212-
isRequired
213-
>
214-
<TextInput
215-
id="crontab-cronSpec"
216-
data-test="crontab-cronSpec"
217-
value={cronSpec || ""}
218-
onChange={(_e, value) => setCronSpec(value)}
219-
required
220-
/>
221-
<FormHelperText>
222-
<HelperText>
223-
<HelperTextItem>
224-
{t(
225-
"Defines the schedule on which the job will run (e.g., */5 * * * *)."
226-
)}
227-
</HelperTextItem>
228-
</HelperText>
229-
</FormHelperText>
230-
</FormGroup>
231-
<FormGroup label={t("Image")} fieldId="crontab-image" isRequired>
232-
<TextInput
233-
id="crontab-image"
234-
data-test="crontab-image"
235-
value={image || ""}
236-
onChange={(_e, value) => setImage(value)}
237-
required
238-
/>
239-
<FormHelperText>
240-
<HelperText>
241-
<HelperTextItem>
242-
{t(
243-
"Specifies the container image to be executed by the CronTab."
244-
)}
245-
</HelperTextItem>
246-
</HelperText>
247-
</FormHelperText>
248-
</FormGroup>
249-
<FormGroup
250-
label={t("Replicas")}
251-
fieldId="crontab-replicas"
252-
isRequired
253-
>
254-
<NumberInput
255-
id="crontab-replicas"
256-
data-test="crontab-replicas"
257-
value={replicas}
258-
onChange={onChangeReplicas}
259-
onMinus={onReplicasMinus}
260-
onPlus={onReplicasPlus}
261-
inputName={t("replicas")}
262-
inputAriaLabel={t("Number of replicas")}
263-
minusBtnAriaLabel={t("Decrease replicas")}
264-
plusBtnAriaLabel={t("Increase replicas")}
265-
required
266-
min={0}
154+
<PageSection isFilled={true} height="sizeToFit">
155+
{showYaml ? (
156+
<>
157+
<CodeEditor
158+
value={yamlContent}
159+
onChange={(val) => setYamlContent(val)}
160+
// @ts-expect-error TODO: fix this
161+
height="500px"
162+
language="yaml"
163+
options={{
164+
wordWrap: "on",
165+
formatOnPaste: true,
166+
}}
267167
/>
268-
<FormHelperText>
269-
<HelperText>
270-
<HelperTextItem>
271-
{t("The desired number of instances of this CronTab to run.")}
272-
</HelperTextItem>
273-
</HelperText>
274-
</FormHelperText>
275-
</FormGroup>
276-
{error && <Alert variant="danger" title={error} />}
277-
<ActionGroup>
278-
<Button
279-
type="button"
280-
variant="primary"
281-
isDisabled={loading || !name || !cronSpec || !image}
282-
onClick={handleSubmit}
283-
isLoading={loading}
284-
data-test="save-changes"
168+
{error && <Alert variant="danger" title={error} />}
169+
<ActionGroup>
170+
<Button
171+
type="button"
172+
style={{ marginTop: "2rem", marginRight: "0.5rem" }}
173+
variant="primary"
174+
isDisabled={loading}
175+
onClick={handleYamlSubmit}
176+
isLoading={loading}
177+
>
178+
{t("Create")}
179+
</Button>
180+
<Button
181+
variant="secondary"
182+
style={{ marginTop: "2rem", marginLeft: "0.5rem" }}
183+
onClick={() => navigate(-1)}
184+
isDisabled={loading}
185+
>
186+
{t("Cancel")}
187+
</Button>
188+
</ActionGroup>
189+
</>
190+
) : (
191+
<Form>
192+
<FormGroup label={t("Name")} fieldId="crontab-name" isRequired>
193+
<TextInput
194+
id="crontab-name"
195+
data-test="crontab-name"
196+
name="name"
197+
onChange={(_e, value) => setName(value)}
198+
value={name}
199+
required
200+
/>
201+
<FormHelperText>
202+
<HelperText>
203+
<HelperTextItem>
204+
{t(
205+
"A unique identifier for this CronTab within the project."
206+
)}
207+
</HelperTextItem>
208+
</HelperText>
209+
</FormHelperText>
210+
</FormGroup>
211+
<FormGroup
212+
label={t("CronSpec")}
213+
fieldId="crontab-cronSpec"
214+
isRequired
285215
>
286-
{t("Create")}
287-
</Button>
288-
<Button
289-
variant="secondary"
290-
isDisabled={loading}
291-
onClick={() => navigate(-1)}
216+
<TextInput
217+
id="crontab-cronSpec"
218+
data-test="crontab-cronSpec"
219+
value={cronSpec || ""}
220+
onChange={(_e, value) => setCronSpec(value)}
221+
required
222+
/>
223+
<FormHelperText>
224+
<HelperText>
225+
<HelperTextItem>
226+
{t(
227+
"Defines the schedule on which the job will run (e.g., */5 * * * *)."
228+
)}
229+
</HelperTextItem>
230+
</HelperText>
231+
</FormHelperText>
232+
</FormGroup>
233+
<FormGroup label={t("Image")} fieldId="crontab-image" isRequired>
234+
<TextInput
235+
id="crontab-image"
236+
data-test="crontab-image"
237+
value={image || ""}
238+
onChange={(_e, value) => setImage(value)}
239+
required
240+
/>
241+
<FormHelperText>
242+
<HelperText>
243+
<HelperTextItem>
244+
{t(
245+
"Specifies the container image to be executed by the CronTab."
246+
)}
247+
</HelperTextItem>
248+
</HelperText>
249+
</FormHelperText>
250+
</FormGroup>
251+
<FormGroup
252+
label={t("Replicas")}
253+
fieldId="crontab-replicas"
254+
isRequired
292255
>
293-
{t("Cancel")}
294-
</Button>
295-
</ActionGroup>
296-
</Form>
297-
)}
298-
</PageSection>
256+
<NumberInput
257+
id="crontab-replicas"
258+
data-test="crontab-replicas"
259+
value={replicas}
260+
onChange={onChangeReplicas}
261+
onMinus={onReplicasMinus}
262+
onPlus={onReplicasPlus}
263+
inputName={t("replicas")}
264+
inputAriaLabel={t("Number of replicas")}
265+
minusBtnAriaLabel={t("Decrease replicas")}
266+
plusBtnAriaLabel={t("Increase replicas")}
267+
required
268+
min={0}
269+
/>
270+
<FormHelperText>
271+
<HelperText>
272+
<HelperTextItem>
273+
{t(
274+
"The desired number of instances of this CronTab to run."
275+
)}
276+
</HelperTextItem>
277+
</HelperText>
278+
</FormHelperText>
279+
</FormGroup>
280+
{error && <Alert variant="danger" title={error} />}
281+
<ActionGroup>
282+
<Button
283+
type="button"
284+
variant="primary"
285+
isDisabled={loading || !name || !cronSpec || !image}
286+
onClick={handleSubmit}
287+
isLoading={loading}
288+
data-test="save-changes"
289+
>
290+
{t("Create")}
291+
</Button>
292+
<Button
293+
variant="secondary"
294+
isDisabled={loading}
295+
onClick={() => navigate(-1)}
296+
>
297+
{t("Cancel")}
298+
</Button>
299+
</ActionGroup>
300+
</Form>
301+
)}
302+
</PageSection>
303+
</>
299304
);
300305
};
301306

0 commit comments

Comments
 (0)