MGMT-17121: Cluster name show validation message when typing characters (#2516)

* Cluster name show validation message when typing characters

* Updating react-core version to avoid problems with Popover focus

Author: ammont82

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",

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"

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;
 };

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;

libs/ui-lib/lib/common/components/ui/PrismCode.tsx

@@ -49,7 +49,7 @@ const PrismCode: React.FC<PrismCodeProps> = ({
             onCopy={(e) => clipboardCopyFunc(e, code)}
             style={{ float: 'right', background: 'inherit' }}
           >
-            {}
+            {''}
           </ClipboardCopy>
         )}
         {tokens.map((line, i) => (

libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx

@@ -87,12 +87,14 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
       validate,
       idPostfix,
       richValidationMessages,
+      noDefaultOnChange,
+      onChange,
       ...props
     },
     ref: React.Ref<HTMLInputElement>,
   ) => {
     const [popoverOpen, setPopoverOpen] = React.useState(false);
-    const [field, { error, value, touched }] = useField<string>({
+    const [field, { error, value, touched }, { setTouched }] = useField<string>({
       name: props.name,
       validate,
     });
@@ -118,7 +120,19 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = 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);
+              }}
             />
           </InputGroupItem>
           <InputGroupItem>
@@ -135,6 +149,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
                   richValidationMessages={richValidationMessages as Record<string, string>}
                 />
               }
+              withFocusTrap={false}
             >
               <Button variant="plain" aria-label="Validation">
                 {!isValid ? (

libs/ui-lib/package.json

@@ -3,13 +3,13 @@
     "@openshift-assisted/locales": "workspace:*",
     "@openshift-assisted/types": "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",
     "axios-case-converter": "^0.11.1",
     "camel-case": "^4.1.2",
     "cidr-tools": "^4.3.0",
@@ -97,11 +97,11 @@
     "@sentry/browser": "^5.9 || ^6",
     "axios": ">=0.22.0 <1.0.0",
     "i18next": "^20.4 || ^21",
-    "monaco-editor": "^0.34.1",
+    "monaco-editor": "0.45.0",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18",
     "react-i18next": ">11.7.3",
-    "react-monaco-editor": "^0.51.0",
+    "react-monaco-editor": "^0.55.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^5.3.0",
     "react-tagsinput": "^3.20",