From 408d7126d04cb6d30cf5b93a8d78afc9ff00b5af Mon Sep 17 00:00:00 2001 From: Montse Ortega Date: Wed, 20 Mar 2024 15:41:02 +0100 Subject: [PATCH] MGMT-17121: Cluster name show validation message when typing characters (#2516) (#2528) * Cluster name show validation message when typing characters * Updating react-core version to avoid problems with Popover focus --- apps/assisted-ui/package.json | 18 +- libs/ui-lib-tests/package.json | 4 +- .../DownloadIpxeScript.tsx | 2 +- .../clusterConfiguration/DownloadIso.tsx | 2 +- .../lib/common/components/ui/PrismCode.tsx | 2 +- .../components/ui/formik/RichInputField.tsx | 17 +- libs/ui-lib/package.json | 18 +- yarn.lock | 222 ++++++++++++------ 8 files changed, 186 insertions(+), 99 deletions(-) diff --git a/apps/assisted-ui/package.json b/apps/assisted-ui/package.json index 7a664b2302..3af21cff60 100644 --- a/apps/assisted-ui/package.json +++ b/apps/assisted-ui/package.json @@ -2,24 +2,24 @@ "dependencies": { "@openshift-assisted/ui-lib": "workspace:*", "@openshift-console/dynamic-plugin-sdk": "0.0.3", - "@patternfly/patternfly": "5.1.0", - "@patternfly/react-code-editor": "5.1.2", - "@patternfly/react-core": "5.1.2", - "@patternfly/react-icons": "5.1.2", - "@patternfly/react-styles": "5.1.2", - "@patternfly/react-table": "5.1.2", - "@patternfly/react-tokens": "5.1.2", + "@patternfly/patternfly": "5.2.0", + "@patternfly/react-code-editor": "5.2.0", + "@patternfly/react-core": "5.2.0", + "@patternfly/react-icons": "5.2.0", + "@patternfly/react-styles": "5.2.0", + "@patternfly/react-table": "5.2.0", + "@patternfly/react-tokens": "5.2.0", "@reduxjs/toolkit": "^1.9.1", "@sentry/browser": "^5.9 || ^6", "axios": ">=0.22.0 <2.0.0", "i18next": "^20.4.0", "i18next-browser-languagedetector": "^6.1.2", "lodash": "^4", - "monaco-editor": "^0.34.1", + "monaco-editor": "0.45.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^11.11.4", - "react-monaco-editor": "^0.51.0", + "react-monaco-editor": "^0.55.0", "react-redux": "^8.0.5", "react-router-dom": "^5.3.3", "react-tagsinput": "^3.20", diff --git a/libs/ui-lib-tests/package.json b/libs/ui-lib-tests/package.json index 9bcab5096d..43242d7cb8 100644 --- a/libs/ui-lib-tests/package.json +++ b/libs/ui-lib-tests/package.json @@ -7,8 +7,8 @@ "@openshift-assisted/ui-lib": "workspace:*", "@testing-library/cypress": "^9.0.0", "@types/lodash": "^4.14.121", - "cypress": "13.2.0", - "cypress-file-upload": "^5.0.7", + "cypress": "13.6.2", + "cypress-file-upload": "5.0.8", "cypress-fill-command": "^1.0.2", "lodash": "^4.17.15", "start-server-and-test": "^2.0.0" diff --git a/libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIpxeScript.tsx b/libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIpxeScript.tsx index 4f7a586095..48f6253333 100644 --- a/libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIpxeScript.tsx +++ b/libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIpxeScript.tsx @@ -18,7 +18,7 @@ import { useTranslation } from '../../hooks/use-translation-wrapper'; export type DownloadISOProps = { isSNO?: boolean; fileName?: string; - downloadUrl?: string; + downloadUrl: string; onClose: () => void; onReset?: () => void; }; diff --git a/libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIso.tsx b/libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIso.tsx index 10ffa91692..cbaa232af4 100644 --- a/libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIso.tsx +++ b/libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIso.tsx @@ -20,7 +20,7 @@ export type DownloadISOProps = { hasDHCP?: boolean; isSNO?: boolean; fileName?: string; - downloadUrl?: string; + downloadUrl: string; onClose: () => void; onReset?: () => void; docVersion?: string; diff --git a/libs/ui-lib/lib/common/components/ui/PrismCode.tsx b/libs/ui-lib/lib/common/components/ui/PrismCode.tsx index a8cd5020df..2781062da5 100644 --- a/libs/ui-lib/lib/common/components/ui/PrismCode.tsx +++ b/libs/ui-lib/lib/common/components/ui/PrismCode.tsx @@ -49,7 +49,7 @@ const PrismCode: React.FC = ({ onCopy={(e) => clipboardCopyFunc(e, code)} style={{ float: 'right', background: 'inherit' }} > - {} + {''} )} {tokens.map((line, i) => ( diff --git a/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx b/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx index bc3e9f0889..f317f6e7c6 100644 --- a/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx +++ b/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx @@ -87,12 +87,14 @@ const RichInputField: React.FC = React.forwardRef( validate, idPostfix, richValidationMessages, + noDefaultOnChange, + onChange, ...props }, ref: React.Ref, ) => { const [popoverOpen, setPopoverOpen] = React.useState(false); - const [field, { error, value, touched }] = useField({ + const [field, { error, value, touched }, { setTouched }] = useField({ name: props.name, validate, }); @@ -118,7 +120,19 @@ const RichInputField: React.FC = React.forwardRef( id={fieldId} isRequired={isRequired} aria-describedby={`${fieldId}-helper`} + onChange={(event, val) => { + !popoverOpen && setPopoverOpen(true); + !noDefaultOnChange && field.onChange(event); + onChange && onChange(event); + if (!touched && val?.length) { + setTouched(true); + } + }} className="rich-input__text" + onBlur={() => { + setPopoverOpen(false); + setTouched(true); + }} /> @@ -135,6 +149,7 @@ const RichInputField: React.FC = React.forwardRef( richValidationMessages={richValidationMessages as Record} /> } + withFocusTrap={false} >