From 66edc787d1dd71cdf72fce65d35415a17bd48ee5 Mon Sep 17 00:00:00 2001 From: Krish Agarwal Date: Mon, 7 Jul 2025 13:54:09 -0400 Subject: [PATCH 1/4] WIP: Getting error when editing YAML on clicking Link --- src/views/CronTabForm/CronTabForm.tsx | 300 ++++++++++++++++++-------- 1 file changed, 205 insertions(+), 95 deletions(-) diff --git a/src/views/CronTabForm/CronTabForm.tsx b/src/views/CronTabForm/CronTabForm.tsx index c29c37d..0b449a0 100644 --- a/src/views/CronTabForm/CronTabForm.tsx +++ b/src/views/CronTabForm/CronTabForm.tsx @@ -18,11 +18,14 @@ import { useK8sModel, k8sCreate, useActiveNamespace, + YAMLEditor, } from "@openshift-console/dynamic-plugin-sdk"; import { 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"; +import yaml from "js-yaml"; +import { defaultCronTabYamlTemplate } from "src/templates/crontab-yaml"; export const CronTabForm: React.FC = () => { const [model] = useK8sModel(cronTabGroupVersionKind); @@ -32,6 +35,10 @@ export const CronTabForm: React.FC = () => { const [replicas, setReplicas] = useState(0); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); + const [showYaml, setShowYaml] = useState(false); + const [yamlContent, setYamlContent] = useState( + defaultCronTabYamlTemplate.trim() + ); const navigate = useNavigate(); const { t } = useCronTabTranslation(); const [namespace] = useActiveNamespace(); @@ -76,109 +83,212 @@ export const CronTabForm: React.FC = () => { setError(t("Error creating CronTab: {{err}}", { err: err.toString() })); }); }; + + const handleYamlSubmit = () => { + setLoading(true); + setError(""); + try { + const loaded = yaml.load(yamlContent) as Partial | undefined; + if ( + !loaded || + !loaded.metadata || + !(loaded.metadata.name || loaded.metadata.generateName) + ) { + throw new Error( + t("YAML must include metadata.name or metadata.generateName") + ); + } + if (!loaded.spec) { + throw new Error(t("YAML must include spec")); + } + + const data: CronTabKind = { + apiVersion: (loaded.apiVersion as string) || CRONTAB_APIGROUP_VERSION, + kind: (loaded.kind as string) || CRONTAB_KIND, + metadata: { + ...loaded.metadata, + namespace, + }, + spec: { + cronSpec, + image, + replicas: replicas ? replicas : 0, + }, + }; + + k8sCreate({ model, data }) + .then(() => { + setLoading(false); + navigate( + `/k8s/ns/${namespace}/${cronTabGroupVersionKind.group}~${cronTabGroupVersionKind.version}~${cronTabGroupVersionKind.kind}` + ); + }) + .catch((err) => { + setLoading(false); + setError( + t("Error creating CronTab: {{err}}", { err: err.toString() }) + ); + }); + } catch (err) { + setLoading(false); + setError(t("Invalid YAML: {{err}}", { err: (err as Error).message })); + } + }; + return ( {t("Create CronTab")} -
- - setName(value)} - value={name} - required - /> - - - - {t("A unique identifier for this CronTab within the project.")} - - - - - - setCronSpec(value)} - required - /> - - - - {t( - "Defines the schedule on which the job will run (e.g., */5 * * * *)." - )} - - - - - - setImage(value)} - required - /> - - - - {t( - "Specifies the container image to be executed by the CronTab." - )} - - - - - - setShowYaml(!showYaml)}> + {showYaml ? t("Form View") : t("YAML Editor")} + + + {showYaml ? ( + <> + setYamlContent(val as string)} + minHeight="0" + height="500px" + options={{ + wordWrap: "on", + formatOnPaste: true, + }} /> - - - - {t("The desired number of instances of this CronTab to run.")} - - - - - {error && } - - + + + + ) : ( + + + setName(value)} + value={name} + required + /> + + + + {t( + "A unique identifier for this CronTab within the project." + )} + + + + + - {t("Create")} - - - - + + + + + {t("The desired number of instances of this CronTab to run.")} + + + + + {error && } + + + + + + )}
); }; From e4d40b8167914899af28eebe75eab318252fc39f Mon Sep 17 00:00:00 2001 From: Krish Agarwal Date: Wed, 9 Jul 2025 17:08:41 -0400 Subject: [PATCH 2/4] Added perspective switcher with YAML Editor --- package.json | 4 +++- src/views/CronTabForm/CronTabForm.tsx | 32 ++++++++++++++++----------- 2 files changed, 22 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 346e427..83b8676 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/views/CronTabForm/CronTabForm.tsx b/src/views/CronTabForm/CronTabForm.tsx index 0b449a0..fbd643e 100644 --- a/src/views/CronTabForm/CronTabForm.tsx +++ b/src/views/CronTabForm/CronTabForm.tsx @@ -6,7 +6,6 @@ import { ActionGroup, Button, PageSection, - Title, Alert, NumberInput, FormHelperText, @@ -18,7 +17,7 @@ import { useK8sModel, k8sCreate, useActiveNamespace, - YAMLEditor, + CodeEditor, } from "@openshift-console/dynamic-plugin-sdk"; import { useNavigate } from "react-router-dom-v5-compat"; import { useCronTabTranslation } from "@crontab-utils/hooks/useCronTabTranslation"; @@ -26,6 +25,10 @@ import { cronTabGroupVersionKind } from "src/utils/utils"; import { CronTabKind } from "@crontab-model/types"; import yaml from "js-yaml"; import { defaultCronTabYamlTemplate } from "src/templates/crontab-yaml"; +import { + PageHeader, + PageHeaderLinkProps, +} from "@patternfly/react-component-groups"; export const CronTabForm: React.FC = () => { const [model] = useK8sModel(cronTabGroupVersionKind); @@ -136,22 +139,25 @@ export const CronTabForm: React.FC = () => { }; return ( - - - {t("Create CronTab")} - - + + setShowYaml(!showYaml), + } as PageHeaderLinkProps + } + /> {showYaml ? ( <> - setYamlContent(val as string)} - minHeight="0" + onChange={(val) => setYamlContent(val)} + // @ts-expect-error TODO: fix this height="500px" + language="yaml" options={{ wordWrap: "on", formatOnPaste: true, From ea3fdd8ef5d38d932b5e860208dd9be4639c6349 Mon Sep 17 00:00:00 2001 From: Krish Agarwal Date: Thu, 17 Jul 2025 16:46:11 -0400 Subject: [PATCH 3/4] Changed Code Editor to YAML editor by changing console extensions --- console-extensions.json | 13 +- integration-tests/e2e/crud.cy.ts | 2 +- .../en/plugin__console-crontab-plugin.json | 1 + src/views/CronTabForm/CronTabForm.tsx | 137 ++-------- src/views/CronTabList/CronTabList.tsx | 4 +- yarn.lock | 245 +++++++++++++++++- 6 files changed, 266 insertions(+), 136 deletions(-) diff --git a/console-extensions.json b/console-extensions.json index d3dc52c..57be8ea 100644 --- a/console-extensions.json +++ b/console-extensions.json @@ -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 } }, { diff --git a/integration-tests/e2e/crud.cy.ts b/integration-tests/e2e/crud.cy.ts index ae9fb2d..0314c8e 100644 --- a/integration-tests/e2e/crud.cy.ts +++ b/integration-tests/e2e/crud.cy.ts @@ -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); diff --git a/locales/en/plugin__console-crontab-plugin.json b/locales/en/plugin__console-crontab-plugin.json index 89e79b0..66c242a 100644 --- a/locales/en/plugin__console-crontab-plugin.json +++ b/locales/en/plugin__console-crontab-plugin.json @@ -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", diff --git a/src/views/CronTabForm/CronTabForm.tsx b/src/views/CronTabForm/CronTabForm.tsx index fbd643e..c5cfc22 100644 --- a/src/views/CronTabForm/CronTabForm.tsx +++ b/src/views/CronTabForm/CronTabForm.tsx @@ -17,18 +17,12 @@ import { useK8sModel, k8sCreate, useActiveNamespace, - CodeEditor, } from "@openshift-console/dynamic-plugin-sdk"; import { 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"; -import yaml from "js-yaml"; -import { defaultCronTabYamlTemplate } from "src/templates/crontab-yaml"; -import { - PageHeader, - PageHeaderLinkProps, -} from "@patternfly/react-component-groups"; +import { PageHeader } from "@patternfly/react-component-groups"; export const CronTabForm: React.FC = () => { const [model] = useK8sModel(cronTabGroupVersionKind); @@ -38,10 +32,6 @@ export const CronTabForm: React.FC = () => { const [replicas, setReplicas] = useState(0); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); - const [showYaml, setShowYaml] = useState(false); - const [yamlContent, setYamlContent] = useState( - defaultCronTabYamlTemplate.trim() - ); const navigate = useNavigate(); const { t } = useCronTabTranslation(); const [namespace] = useActiveNamespace(); @@ -87,105 +77,23 @@ export const CronTabForm: React.FC = () => { }); }; - const handleYamlSubmit = () => { - setLoading(true); - setError(""); - try { - const loaded = yaml.load(yamlContent) as Partial | undefined; - if ( - !loaded || - !loaded.metadata || - !(loaded.metadata.name || loaded.metadata.generateName) - ) { - throw new Error( - t("YAML must include metadata.name or metadata.generateName") - ); - } - if (!loaded.spec) { - throw new Error(t("YAML must include spec")); - } - - const data: CronTabKind = { - apiVersion: (loaded.apiVersion as string) || CRONTAB_APIGROUP_VERSION, - kind: (loaded.kind as string) || CRONTAB_KIND, - metadata: { - ...loaded.metadata, - namespace, - }, - spec: { - cronSpec, - image, - replicas: replicas ? replicas : 0, - }, - }; - - k8sCreate({ model, data }) - .then(() => { - setLoading(false); - navigate( - `/k8s/ns/${namespace}/${cronTabGroupVersionKind.group}~${cronTabGroupVersionKind.version}~${cronTabGroupVersionKind.kind}` - ); - }) - .catch((err) => { - setLoading(false); - setError( - t("Error creating CronTab: {{err}}", { err: err.toString() }) - ); - }); - } catch (err) { - setLoading(false); - setError(t("Invalid YAML: {{err}}", { err: (err as Error).message })); - } - }; - return ( - - setShowYaml(!showYaml), - } as PageHeaderLinkProps - } - /> - - {showYaml ? ( - <> - setYamlContent(val)} - // @ts-expect-error TODO: fix this - height="500px" - language="yaml" - options={{ - wordWrap: "on", - formatOnPaste: true, - }} - /> - {error && } - - - - - - ) : ( + <> +
+ { + e.preventDefault(); + navigate( + `/k8s/ns/${namespace}/${cronTabGroupVersionKind.group}~${cronTabGroupVersionKind.version}~${cronTabGroupVersionKind.kind}/~new` + ); + }, + }} + /> +
+
{ - + { data-test="crontab-image" value={image || ""} onChange={(_e, value) => setImage(value)} - required /> @@ -294,8 +197,8 @@ export const CronTabForm: React.FC = () => { - )} -
+ + ); }; diff --git a/src/views/CronTabList/CronTabList.tsx b/src/views/CronTabList/CronTabList.tsx index d6d1b12..2ae1909 100644 --- a/src/views/CronTabList/CronTabList.tsx +++ b/src/views/CronTabList/CronTabList.tsx @@ -73,7 +73,9 @@ const CronTabList: React.FC = ({ const createURL = `/k8s/ns/${namespace || "default"}/${ cronTabGroupVersionKind.group - }~${cronTabGroupVersionKind.version}~${cronTabGroupVersionKind.kind}/~new`; + }~${cronTabGroupVersionKind.version}~${ + cronTabGroupVersionKind.kind + }/~new/form`; return ( <> diff --git a/yarn.lock b/yarn.lock index dac480e..497a6cf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -51,6 +51,11 @@ dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.3.1", "@babel/runtime@^7.8.3": + version "7.27.6" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.27.6.tgz#ec4070a04d76bae8ddbb10770ba55714a417b7c6" + integrity sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q== + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" @@ -134,6 +139,18 @@ resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70" integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw== +"@emotion/is-prop-valid@^0.7.3": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc" + integrity sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA== + dependencies: + "@emotion/memoize" "0.7.1" + +"@emotion/memoize@0.7.1": + version "0.7.1" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f" + integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg== + "@eslint/eslintrc@^1.4.1": version "1.4.1" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.1.tgz#af58772019a2d271b7e2d4c23ff4ddcba3ccfb3e" @@ -313,7 +330,18 @@ semver "^7.3.7" yup "^0.32.11" -"@patternfly/react-core@6.2.0", "@patternfly/react-core@^6.2.0": +"@patternfly/react-component-groups@^6.2.1": + version "6.2.1" + resolved "https://registry.yarnpkg.com/@patternfly/react-component-groups/-/react-component-groups-6.2.1.tgz#2b4d184d128426c9b72366c0da4fa5c488febd06" + integrity sha512-bPiPoVOR+mS3xdMpAv/xkbT9+PVvNhfE22JdUG2pfmWXXTP7BsmFgRo4mouSDqqDTdXz+ZDYKRkxGR5FpKMJyQ== + dependencies: + "@patternfly/react-core" "^6.0.0" + "@patternfly/react-icons" "^6.0.0" + "@patternfly/react-table" "^6.0.0" + clsx "^2.1.1" + react-jss "^10.10.0" + +"@patternfly/react-core@6.2.0", "@patternfly/react-core@^6.0.0", "@patternfly/react-core@^6.2.0": version "6.2.0" resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.2.0.tgz#8cd2e5b3716352ab21859f3aebeeafd42f72035e" integrity sha512-yh5de7Tv1ft8c4+xHi5wr49yk4E/FgOXsxj3bl2VjdieTxXmZEmeWcqeYFXoUdnMSqCay4Mt5k6gyRYgO0y9oQ== @@ -325,7 +353,7 @@ react-dropzone "^14.3.5" tslib "^2.8.1" -"@patternfly/react-icons@6.2.0", "@patternfly/react-icons@^6.2.0": +"@patternfly/react-icons@6.2.0", "@patternfly/react-icons@^6.0.0", "@patternfly/react-icons@^6.2.0": version "6.2.0" resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.2.0.tgz#a140b893b8fa945c891fbf4bd797d992be8ec5f6" integrity sha512-moGLd1qM80+yjVVVEl+aNHQn7K5ANMUgyQZ4ECxnA/vjPlWmNZSJ1imsaCxYrywp9zzO0yZ5uN5wO/Z2hdz3MA== @@ -335,7 +363,7 @@ resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.2.0.tgz#0a1dec5bd81d74158cc33b6d1f0eedeb1a2665a8" integrity sha512-Cv2flqlc8GEuzshjQrLj1qfYAVx9IDOudi46yfiOIvG7GUPdDCH+Ib4XGC/oZry7qj1Dwr78BJ6QOinM1cSiog== -"@patternfly/react-table@6.2.0": +"@patternfly/react-table@6.2.0", "@patternfly/react-table@^6.0.0": version "6.2.0" resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-6.2.0.tgz#23396b0539a35f75870455b709c86ef580443b0f" integrity sha512-6FwyzvaajgN5x/qrpPWax+GNyRllAd1dHhrgpZqZbeWyoywEifr1K2dxYmYNzMKOyYj9jEK0NnCWWIzFvaVfDg== @@ -1577,6 +1605,11 @@ cloneable-readable@^1.0.0: process-nextick-args "^2.0.0" readable-stream "^2.3.5" +clsx@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999" + integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA== + color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -1802,6 +1835,15 @@ css-functions-list@^3.2.0: resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.2.0.tgz#8290b7d064bf483f48d6559c10e98dc4d1ad19ee" integrity sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg== +css-jss@10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/css-jss/-/css-jss-10.10.0.tgz#bd51fbd255cc24597ac0f0f32368394794d37ef3" + integrity sha512-YyMIS/LsSKEGXEaVJdjonWe18p4vXLo8CMA4FrW/kcaEyqdIGKCFXao31gbJddXEdIxSXFFURWrenBJPlKTgAA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "^10.10.0" + jss-preset-default "^10.10.0" + css-loader@^6.5.1: version "6.7.3" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.3.tgz#1e8799f3ccc5874fdd55461af51137fcc5befbcd" @@ -1835,6 +1877,14 @@ css-tree@^2.3.1: mdn-data "2.0.30" source-map-js "^1.0.1" +css-vendor@^2.0.8: + version "2.0.8" + resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d" + integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ== + dependencies: + "@babel/runtime" "^7.8.3" + is-in-browser "^1.0.2" + css-what@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" @@ -3189,7 +3239,7 @@ history@^5.3.0: dependencies: "@babel/runtime" "^7.7.6" -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -3320,6 +3370,11 @@ human-signals@^2.1.0: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0" integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw== +hyphenate-style-name@^1.0.3: + version "1.1.0" + resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436" + integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw== + i18next-conv@^12.1.1: version "12.1.1" resolved "https://registry.yarnpkg.com/i18next-conv/-/i18next-conv-12.1.1.tgz#cda23ddda849083454aac857547b04a3605168f4" @@ -3604,6 +3659,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1: dependencies: is-extglob "^2.1.1" +is-in-browser@^1.0.2, is-in-browser@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835" + integrity sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g== + is-installed-globally@~0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520" @@ -3898,6 +3958,140 @@ jsprim@^2.0.2: json-schema "0.4.0" verror "1.10.0" +jss-plugin-camel-case@10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz#27ea159bab67eb4837fa0260204eb7925d4daa1c" + integrity sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw== + dependencies: + "@babel/runtime" "^7.3.1" + hyphenate-style-name "^1.0.3" + jss "10.10.0" + +jss-plugin-compose@10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss-plugin-compose/-/jss-plugin-compose-10.10.0.tgz#00d7a79adf7fcfe4927a792febdf0deceb0a7cd2" + integrity sha512-F5kgtWpI2XfZ3Z8eP78tZEYFdgTIbpA/TMuX3a8vwrNolYtN1N4qJR/Ob0LAsqIwCMLojtxN7c7Oo/+Vz6THow== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.10.0" + tiny-warning "^1.0.2" + +jss-plugin-default-unit@10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz#db3925cf6a07f8e1dd459549d9c8aadff9804293" + integrity sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.10.0" + +jss-plugin-expand@10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss-plugin-expand/-/jss-plugin-expand-10.10.0.tgz#5debd80554174ca2d9b9e38d85d4cb6f3e0393ab" + integrity sha512-ymT62W2OyDxBxr7A6JR87vVX9vTq2ep5jZLIdUSusfBIEENLdkkc0lL/Xaq8W9s3opUq7R0sZQpzRWELrfVYzA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.10.0" + +jss-plugin-extend@10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss-plugin-extend/-/jss-plugin-extend-10.10.0.tgz#94eb450847a8941777e77ea4533a579c1c578430" + integrity sha512-sKYrcMfr4xxigmIwqTjxNcHwXJIfvhvjTNxF+Tbc1NmNdyspGW47Ey6sGH8BcQ4FFQhLXctpWCQSpDwdNmXSwg== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.10.0" + tiny-warning "^1.0.2" + +jss-plugin-global@10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz#1c55d3c35821fab67a538a38918292fc9c567efd" + integrity sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.10.0" + +jss-plugin-nested@10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz#db872ed8925688806e77f1fc87f6e62264513219" + integrity sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.10.0" + tiny-warning "^1.0.2" + +jss-plugin-props-sort@10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz#67f4dd4c70830c126f4ec49b4b37ccddb680a5d7" + integrity sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.10.0" + +jss-plugin-rule-value-function@10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz#7d99e3229e78a3712f78ba50ab342e881d26a24b" + integrity sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.10.0" + tiny-warning "^1.0.2" + +jss-plugin-rule-value-observable@10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-observable/-/jss-plugin-rule-value-observable-10.10.0.tgz#d17b28c4401156bbe4cd0c4a73a80aad70613e8b" + integrity sha512-ZLMaYrR3QE+vD7nl3oNXuj79VZl9Kp8/u6A1IbTPDcuOu8b56cFdWRZNZ0vNr8jHewooEeq2doy8Oxtymr2ZPA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.10.0" + symbol-observable "^1.2.0" + +jss-plugin-template@10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss-plugin-template/-/jss-plugin-template-10.10.0.tgz#072cda74a94c91b02d3a895d9e2408fd978ce033" + integrity sha512-ocXZBIOJOA+jISPdsgkTs8wwpK6UbsvtZK5JI7VUggTD6LWKbtoxUzadd2TpfF+lEtlhUmMsCkTRNkITdPKa6w== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.10.0" + tiny-warning "^1.0.2" + +jss-plugin-vendor-prefixer@10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz#c01428ef5a89f2b128ec0af87a314d0c767931c7" + integrity sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg== + dependencies: + "@babel/runtime" "^7.3.1" + css-vendor "^2.0.8" + jss "10.10.0" + +jss-preset-default@10.10.0, jss-preset-default@^10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-10.10.0.tgz#c8209449a0f6d232526c2ba3a3a6ec69ee97e023" + integrity sha512-GL175Wt2FGhjE+f+Y3aWh+JioL06/QWFgZp53CbNNq6ZkVU0TDplD8Bxm9KnkotAYn3FlplNqoW5CjyLXcoJ7Q== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.10.0" + jss-plugin-camel-case "10.10.0" + jss-plugin-compose "10.10.0" + jss-plugin-default-unit "10.10.0" + jss-plugin-expand "10.10.0" + jss-plugin-extend "10.10.0" + jss-plugin-global "10.10.0" + jss-plugin-nested "10.10.0" + jss-plugin-props-sort "10.10.0" + jss-plugin-rule-value-function "10.10.0" + jss-plugin-rule-value-observable "10.10.0" + jss-plugin-template "10.10.0" + jss-plugin-vendor-prefixer "10.10.0" + +jss@10.10.0, jss@^10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.10.0.tgz#a75cc85b0108c7ac8c7b7d296c520a3e4fbc6ccc" + integrity sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw== + dependencies: + "@babel/runtime" "^7.3.1" + csstype "^3.0.2" + is-in-browser "^1.1.3" + tiny-warning "^1.0.2" + "jsx-ast-utils@^2.4.1 || ^3.0.0": version "3.3.3" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea" @@ -4888,7 +5082,7 @@ promise-map-series@^0.3.0: resolved "https://registry.yarnpkg.com/promise-map-series/-/promise-map-series-0.3.0.tgz#41873ca3652bb7a042b387d538552da9b576f8a1" integrity sha512-3npG2NGhTc8BWBolLLf8l/92OxMGaRLbqvIh9wjCHhDXNvk4zsxaTaCpiCunW09qWPrN2zeNSNwRLVBrQQtutA== -prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -5010,6 +5204,11 @@ raw-body@2.5.1: iconv-lite "0.4.24" unpipe "1.0.0" +react-display-name@^0.2.4: + version "0.2.5" + resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.5.tgz#304c7cbfb59ee40389d436e1a822c17fe27936c6" + integrity sha512-I+vcaK9t4+kypiSgaiVWAipqHRXYmZIuAiS8vzFvXHHXVigg/sMKwlRgLy6LH2i3rmP+0Vzfl5lFsFRwF1r3pg== + react-dom@^17.0.1: version "17.0.2" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" @@ -5056,6 +5255,23 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-jss@^10.10.0: + version "10.10.0" + resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-10.10.0.tgz#d08ab3257b0eed01e15d6d8275840055c279b0da" + integrity sha512-WLiq84UYWqNBF6579/uprcIUnM1TSywYq6AIjKTTTG5ziJl9Uy+pwuvpN3apuyVwflMbD60PraeTKT7uWH9XEQ== + dependencies: + "@babel/runtime" "^7.3.1" + "@emotion/is-prop-valid" "^0.7.3" + css-jss "10.10.0" + hoist-non-react-statics "^3.2.0" + is-in-browser "^1.1.3" + jss "10.10.0" + jss-preset-default "10.10.0" + prop-types "^15.6.0" + shallow-equal "^1.2.0" + theming "^3.3.0" + tiny-warning "^1.0.2" + react-redux@7.2.2: version "7.2.2" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz#03862e803a30b6b9ef8582dadcc810947f74b736" @@ -5647,6 +5863,11 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +shallow-equal@^1.2.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da" + integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA== + shebang-command@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea" @@ -6093,6 +6314,16 @@ text-table@^0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw== +theming@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/theming/-/theming-3.3.0.tgz#dacabf04aa689edde35f1e1c117ec6de73fbf870" + integrity sha512-u6l4qTJRDaWZsqa8JugaNt7Xd8PPl9+gonZaIe28vAhqgHMIG/DOyFPqiKN/gQLQYj05tHv+YQdNILL4zoiAVA== + dependencies: + hoist-non-react-statics "^3.3.0" + prop-types "^15.5.8" + react-display-name "^0.2.4" + tiny-warning "^1.0.2" + throttleit@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c" @@ -6136,7 +6367,7 @@ tiny-invariant@^1.0.2: resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642" integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw== -tiny-warning@^1.0.0: +tiny-warning@^1.0.0, tiny-warning@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== @@ -6887,4 +7118,4 @@ yup@^0.32.11: lodash-es "^4.17.21" nanoclone "^0.2.1" property-expr "^2.0.4" - toposort "^2.0.2" \ No newline at end of file + toposort "^2.0.2" From b61908727490f9ac5803d3acf09b1f0cd11b9acb Mon Sep 17 00:00:00 2001 From: Krish Agarwal Date: Mon, 21 Jul 2025 10:15:30 -0400 Subject: [PATCH 4/4] Replaced PageHeader with ListPageHeader for favorites modal --- src/views/CronTabForm/CronTabForm.tsx | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/views/CronTabForm/CronTabForm.tsx b/src/views/CronTabForm/CronTabForm.tsx index c5cfc22..ac5e5b2 100644 --- a/src/views/CronTabForm/CronTabForm.tsx +++ b/src/views/CronTabForm/CronTabForm.tsx @@ -17,12 +17,12 @@ 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"; -import { PageHeader } from "@patternfly/react-component-groups"; export const CronTabForm: React.FC = () => { const [model] = useK8sModel(cronTabGroupVersionKind); @@ -80,17 +80,15 @@ export const CronTabForm: React.FC = () => { return ( <>
- { - e.preventDefault(); - navigate( - `/k8s/ns/${namespace}/${cronTabGroupVersionKind.group}~${cronTabGroupVersionKind.version}~${cronTabGroupVersionKind.kind}/~new` - ); - }, - }} + helpText={ + + {t("Edit YAML")} + + } />