Skip to content

CONSOLE-4626: Creating YAML/Form view perspective switcher for Creating CronTabs #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
openshift-merge-bot merged 5 commits into from
Jul 21, 2025
Merged

CONSOLE-4626: Creating YAML/Form view perspective switcher for Creating CronTabs #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
66edc78
WIP: Getting error when editing YAML on clicking Link
krishagarwal278 Jul 7, 2025
e4d40b8
Added perspective switcher with YAML Editor
krishagarwal278 Jul 9, 2025
ea3fdd8
Changed Code Editor to YAML editor by changing console extensions
krishagarwal278 Jul 17, 2025
b619087
Replaced PageHeader with ListPageHeader for favorites modal
krishagarwal278 Jul 21, 2025
23ce57a
Merge branch 'main' into CONSOLE-4626
krishagarwal278 Jul 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 3 additions & 10 deletions console-extensions.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,20 +63,13 @@
}
},
{
"type": "console.resource/create",
"type": "console.page/route",
"properties": {
"name": "default",
"model": {
"group": "stable.example.com",
"kind": "CronTab",
"version": "v1"
},
"path": "/k8s/ns/:ns/stable.example.com~v1~CronTab/~new/form",
"component": {
"$codeRef": "CronTabForm"
},
"flags": {
"required": ["CRONTAB"]
}
"exact": true
Copy link
Copy Markdown
Member

@rhamilto rhamilto Jul 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is where it's good to have the side-by-side comparison!

This addition should really be protected by a flag. But note #35. The existing flags are in the wrong location, so they don't work. So let's merge this as is and I will add the flag in #35.

}
},
{
Expand Down
2 changes: 1 addition & 1 deletion integration-tests/e2e/crud.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ describe(`${PLUGIN_NAME}`, () => {
nav.sidenav.clickNavLink(["Workloads", "CronTabs"]);
common.resourceTitleShouldHaveText("CronTabs");
listPage.clickCreateForm();
cy.byTestID("page-heading").should("contain", "Create CronTab");
cy.byTestID("page-heading").should("include.text", "Create CronTab");
cy.log("Filling CronTab form");
cy.byTestID("crontab-name").type(cronTabName);
cy.byTestID("crontab-cronSpec").type(cronSpecValue);
Expand Down
1 change: 1 addition & 0 deletions locales/en/plugin__console-crontab-plugin.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"Edit annotations": "Edit annotations",
"Edit CronTab": "Edit CronTab",
"Edit labels": "Edit labels",
"Edit YAML": "Edit YAML",
"Error creating CronTab: {{err}}": "Error creating CronTab: {{err}}",
"Image": "Image",
"Increase replicas": "Increase replicas",
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,12 +88,14 @@
"webpack": "^5.68.0",
"@types/react": "17.0.40",
"@patternfly/react-core": "6.2.0",
"@patternfly/react-component-groups": "^6.2.1",
"@patternfly/react-icons": "6.2.0",
"@patternfly/react-table": "6.2.0",
"@patternfly/react-styles": "6.2.0",
"@patternfly/react-tokens": "6.2.0"
},
"dependencies": {
"react-tagsinput": "^3.20.0"
"react-tagsinput": "^3.20.0",
"@patternfly/react-component-groups": "^6.2.1"
}
}
225 changes: 121 additions & 104 deletions src/views/CronTabForm/CronTabForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
ActionGroup,
Button,
PageSection,
Title,
Alert,
NumberInput,
FormHelperText,
Expand All @@ -18,8 +17,9 @@ import {
useK8sModel,
k8sCreate,
useActiveNamespace,
ListPageHeader,
} from "@openshift-console/dynamic-plugin-sdk";
import { useNavigate } from "react-router-dom-v5-compat";
import { Link, useNavigate } from "react-router-dom-v5-compat";
import { useCronTabTranslation } from "@crontab-utils/hooks/useCronTabTranslation";
import { cronTabGroupVersionKind } from "src/utils/utils";
import { CronTabKind } from "@crontab-model/types";
Expand Down Expand Up @@ -76,110 +76,127 @@ export const CronTabForm: React.FC = () => {
setError(t("Error creating CronTab: {{err}}", { err: err.toString() }));
});
};

return (
<PageSection>
<Title headingLevel="h1" data-test="page-heading">
{t("Create CronTab")}
</Title>
<Form>
<FormGroup label={t("Name")} fieldId="crontab-name" isRequired>
<TextInput
id="crontab-name"
data-test="crontab-name"
name="name"
onChange={(_e, value) => setName(value)}
value={name}
required
/>
<FormHelperText>
<HelperText>
<HelperTextItem>
{t("A unique identifier for this CronTab within the project.")}
</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<FormGroup label={t("CronSpec")} fieldId="crontab-cronSpec" isRequired>
<TextInput
id="crontab-cronSpec"
data-test="crontab-cronSpec"
value={cronSpec || ""}
onChange={(_e, value) => setCronSpec(value)}
required
/>
<FormHelperText>
<HelperText>
<HelperTextItem>
{t(
"Defines the schedule on which the job will run (e.g., */5 * * * *)."
)}
</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<FormGroup label={t("Image")} fieldId="crontab-image" isRequired>
<TextInput
id="crontab-image"
data-test="crontab-image"
value={image || ""}
onChange={(_e, value) => setImage(value)}
required
/>
<FormHelperText>
<HelperText>
<HelperTextItem>
{t(
"Specifies the container image to be executed by the CronTab."
)}
</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<FormGroup label={t("Replicas")} fieldId="crontab-replicas" isRequired>
<NumberInput
id="crontab-replicas"
data-test="crontab-replicas"
value={replicas}
onChange={onChangeReplicas}
onMinus={onReplicasMinus}
onPlus={onReplicasPlus}
inputName={t("replicas")}
inputAriaLabel={t("Number of replicas")}
minusBtnAriaLabel={t("Decrease replicas")}
plusBtnAriaLabel={t("Increase replicas")}
required
min={0}
/>
<FormHelperText>
<HelperText>
<HelperTextItem>
{t("The desired number of instances of this CronTab to run.")}
</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
{error && <Alert variant="danger" title={error} />}
<ActionGroup>
<Button
type="button"
variant="primary"
isDisabled={loading || !name || !cronSpec || !image}
onClick={handleSubmit}
isLoading={loading}
data-test="save-changes"
>
{t("Create")}
</Button>
<Button
variant="secondary"
isDisabled={loading}
onClick={() => navigate(-1)}
<>
<div data-test="page-heading">
<ListPageHeader
title={t("Create CronTab")}
helpText={
<Link
to={`/k8s/ns/${namespace}/${cronTabGroupVersionKind.group}~${cronTabGroupVersionKind.version}~${cronTabGroupVersionKind.kind}/~new`}
>
{t("Edit YAML")}
</Link>
}
/>
</div>
<PageSection isFilled={true} height="sizeToFit">
<Form>
<FormGroup label={t("Name")} fieldId="crontab-name" isRequired>
<TextInput
id="crontab-name"
data-test="crontab-name"
name="name"
onChange={(_e, value) => setName(value)}
value={name}
required
/>
<FormHelperText>
<HelperText>
<HelperTextItem>
{t(
"A unique identifier for this CronTab within the project."
)}
</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<FormGroup label={t("CronSpec")} fieldId="crontab-cronSpec">
<TextInput
id="crontab-cronSpec"
data-test="crontab-cronSpec"
value={cronSpec || ""}
onChange={(_e, value) => setCronSpec(value)}
required
/>
<FormHelperText>
<HelperText>
<HelperTextItem>
{t(
"Defines the schedule on which the job will run (e.g., */5 * * * *)."
)}
</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<FormGroup label={t("Image")} fieldId="crontab-image" isRequired>
<TextInput
id="crontab-image"
data-test="crontab-image"
value={image || ""}
onChange={(_e, value) => setImage(value)}
/>
<FormHelperText>
<HelperText>
<HelperTextItem>
{t(
"Specifies the container image to be executed by the CronTab."
)}
</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<FormGroup
label={t("Replicas")}
fieldId="crontab-replicas"
isRequired
>
{t("Cancel")}
</Button>
</ActionGroup>
</Form>
</PageSection>
<NumberInput
id="crontab-replicas"
data-test="crontab-replicas"
value={replicas}
onChange={onChangeReplicas}
onMinus={onReplicasMinus}
onPlus={onReplicasPlus}
inputName={t("replicas")}
inputAriaLabel={t("Number of replicas")}
minusBtnAriaLabel={t("Decrease replicas")}
plusBtnAriaLabel={t("Increase replicas")}
required
min={0}
/>
<FormHelperText>
<HelperText>
<HelperTextItem>
{t("The desired number of instances of this CronTab to run.")}
</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
{error && <Alert variant="danger" title={error} />}
<ActionGroup>
<Button
type="button"
variant="primary"
isDisabled={loading || !name || !cronSpec || !image}
onClick={handleSubmit}
isLoading={loading}
data-test="save-changes"
>
{t("Create")}
</Button>
<Button
variant="secondary"
isDisabled={loading}
onClick={() => navigate(-1)}
>
{t("Cancel")}
</Button>
</ActionGroup>
</Form>
</PageSection>
</>
);
};

Expand Down
4 changes: 3 additions & 1 deletion src/views/CronTabList/CronTabList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,9 @@ const CronTabList: React.FC<CronTabListProps> = ({

const createURL = `/k8s/ns/${namespace || "default"}/${
cronTabGroupVersionKind.group
}~${cronTabGroupVersionKind.version}~${cronTabGroupVersionKind.kind}/~new`;
}~${cronTabGroupVersionKind.version}~${
cronTabGroupVersionKind.kind
}/~new/form`;

return (
<>
Expand Down
Loading