OCPBUGS-29616 OCPBUGS-31613 Add validation for vSphere fields

Handle submit errors correctly

frontend/packages/vsphere-plugin/__tests__/utils.spec.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { ConnectionFormContextValues } from '../src/components/types';
+import { ConnectionFormFormikValues } from '../src/components/types';
 import { mergeCloudProviderConfig } from '../src/components/utils';
 
-const config: ConnectionFormContextValues = {
+const config: ConnectionFormFormikValues = {
   username: 'my-username',
   password: 'my-password',
   vcenter: 'https://1.2.3.4/something',

frontend/packages/vsphere-plugin/locales/en/vsphere-plugin.json

@@ -12,36 +12,37 @@
   "Failed to patch {{secret}}": "Failed to patch {{secret}}",
   "Failed to create {{secret}} secret": "Failed to create {{secret}} secret",
   "Failed to load kubecontrollermanager": "Failed to load kubecontrollermanager",
+  "Not found.": "Not found.",
   "Failed to patch kubecontrollermanager": "Failed to patch kubecontrollermanager",
   "Failed to patch {{cm}}": "Failed to patch {{cm}}",
   "Failed to create {{cm}} ConfigMap": "Failed to create {{cm}} ConfigMap",
   "Failed to add taint to node {{node}}": "Failed to add taint to node {{node}}",
   "Failed to patch infrastructure spec": "Failed to patch infrastructure spec",
-  "Provide <1>datacenter</1> folder which contains VMs of the cluster, example: /<3>{{datacenter}}</3>/<5>vm</5>/<7>[MY_VMS_TOP_FOLDER]</7>.": "Provide <1>datacenter</1> folder which contains VMs of the cluster, example: /<3>{{datacenter}}</3>/<5>vm</5>/<7>[MY_VMS_TOP_FOLDER]</7>.",
-  "Enter the name of the vSphere data center that contains the virtual machines currently backing-up the cluster.": "Enter the name of the vSphere data center that contains the virtual machines currently backing-up the cluster.",
-  "Warning: Updating this value once the configuration has been saved will detach any existing PersistentVolumes.": "Warning: Updating this value once the configuration has been saved will detach any existing PersistentVolumes.",
-  "Select the data store in the vSphere data center that is to store the persistent data volumes.": "Select the data store in the vSphere data center that is to store the persistent data volumes.",
-  "Warning: Updating this value will break any existing PersistentVolumes.": "Warning: Updating this value will break any existing PersistentVolumes.",
+  "Unexpected error": "Unexpected error",
   "vCenter": "vCenter",
-  "Enter the network address of the vCenter server. It can either be a domain name or IP address. It appears in the vSphere web client URL. Example:  ": "Enter the network address of the vCenter server. It can either be a domain name or IP address. It appears in the vSphere web client URL. Example:  ",
-  "Can be either domain name or IP address. See tooltip for details.": "Can be either domain name or IP address. See tooltip for details.",
+  "Enter the network address of the vCenter server. It can either be a domain name or IP address": "Enter the network address of the vCenter server. It can either be a domain name or IP address",
   "vCenter cluster": "vCenter cluster",
   "Enter the name of the vSphere vCenter cluster where OpenShift Container Platform is installed.": "Enter the name of the vSphere vCenter cluster where OpenShift Container Platform is installed.",
   "Username": "Username",
   "Enter the vSphere vCenter username. An incorrect username will render the cluster nodes unschedulable (known issue: OCPBUGS-2353).": "Enter the vSphere vCenter username. An incorrect username will render the cluster nodes unschedulable (known issue: OCPBUGS-2353).",
   "Password": "Password",
   "Enter the vSphere vCenter password. The password will be stored in a Secret in the kube-system namespace for this cluster. An incorrect password will render the cluster nodes unschedulable (known issue: OCPBUGS-2353).": "Enter the vSphere vCenter password. The password will be stored in a Secret in the kube-system namespace for this cluster. An incorrect password will render the cluster nodes unschedulable (known issue: OCPBUGS-2353).",
   "Datacenter": "Datacenter",
+  "Enter the name of the vSphere data center that contains the virtual machines currently backing-up the cluster.": "Enter the name of the vSphere data center that contains the virtual machines currently backing-up the cluster.",
+  "Warning: Updating this value once the configuration has been saved will detach any existing PersistentVolumes.": "Warning: Updating this value once the configuration has been saved will detach any existing PersistentVolumes.",
   "Default data store": "Default data store",
+  "Select the data store in the vSphere data center that is to store the persistent data volumes.": "Select the data store in the vSphere data center that is to store the persistent data volumes.",
+  "Warning: Updating this value will break any existing PersistentVolumes.": "Warning: Updating this value will break any existing PersistentVolumes.",
   "Virtual Machine Folder": "Virtual Machine Folder",
+  "Provide <1>datacenter</1> folder which contains VMs of the cluster.": "Provide <1>datacenter</1> folder which contains VMs of the cluster.",
+  "Saving": "Saving",
+  "Save configuration": "Save configuration",
+  "Cancel": "Cancel",
   "vSphere Problem Detector (can be outdated)": "vSphere Problem Detector (can be outdated)",
-  "Retry": "Retry",
   "Delayed propagation of configuration": "Delayed propagation of configuration",
   "The configuration process updates operator statuses and reboots nodes. This process typically takes about an hour. Existing resources such as previously bound Persistent Volume Claims might become disconnected.": "The configuration process updates operator statuses and reboots nodes. This process typically takes about an hour. Existing resources such as previously bound Persistent Volume Claims might become disconnected.",
   "Note, that existing resources (like already bound PVCs) might get broken by these changes.": "Note, that existing resources (like already bound PVCs) might get broken by these changes.",
-  "Cancel": "Cancel",
-  "Saving": "Saving",
-  "Save configuration": "Save configuration",
+  "An error occured.": "An error occured.",
   "vSphere connection configuration": "vSphere connection configuration",
   "Pending": "Pending",
   "Error": "Error",
@@ -55,5 +56,7 @@
   "Kube API Server": "Kube API Server",
   "Kube Controller Manager": "Kube Controller Manager",
   "Storage": "Storage",
+  "Failed to fetch infrastructure resource": "Failed to fetch infrastructure resource",
+  "An error occured": "An error occured",
   "Help": "Help"
 }

frontend/packages/vsphere-plugin/package.json

@@ -8,7 +8,9 @@
   },
   "dependencies": {
     "@console/dynamic-plugin-sdk": "0.0.0-fixed",
-    "ini": "4.1.1"
+    "formik": "^2.4.5",
+    "ini": "4.1.1",
+    "yup": "^0.27.0"
   },
   "consolePlugin": {
     "entry": "src/plugin.ts",

frontend/packages/vsphere-plugin/src/PopoverHelpButton.tsx

@@ -4,15 +4,10 @@ import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/ico
 import { useTranslation } from 'react-i18next';
 
 export const PopoverHelpButton: React.FC<{ content: React.ReactNode }> = ({ content }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('vsphere-plugin');
   return (
-    <Popover aria-label={t('vsphere-plugin~Help')} bodyContent={content}>
-      <Button
-        aria-label={t('vsphere-plugin~Help')}
-        variant="link"
-        isInline
-        className="co-field-level-help"
-      >
+    <Popover aria-label={t('Help')} bodyContent={content}>
+      <Button aria-label={t('Help')} variant="link" isInline className="co-field-level-help">
         <OutlinedQuestionCircleIcon className="co-field-level-help__icon" />
       </Button>
     </Popover>

frontend/packages/vsphere-plugin/src/components/ClusterOverview/VSphereStatus.tsx

@@ -8,7 +8,7 @@ import {
 } from '@console/dynamic-plugin-sdk/dist/core/lib/lib-core';
 import { ConfigMap } from '../../resources';
 import { getVSphereHealth } from '../getVSphereHealth';
-import { VSphereConnection } from '../VSphereConnection';
+import { VSphereConnectionModal } from '../VSphereConnectionModal';
 import { VSphereOperatorStatuses } from '../VSphereOperatorStatuses';
 import './VSphereStatus.css';
 
@@ -25,7 +25,11 @@ const VSphereStatus: React.FC<PrometheusHealthPopupProps> = ({ hide, responses,
   ) {
     const cloudProviderConfig = k8sResult.data as ConfigMap;
     return (
-      <VSphereConnection hide={hide} cloudProviderConfig={cloudProviderConfig} health={health} />
+      <VSphereConnectionModal
+        hide={hide}
+        cloudProviderConfig={cloudProviderConfig}
+        health={health}
+      />
     );
   }
 

frontend/packages/vsphere-plugin/src/components/TextField.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import {
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  TextInput,
+  TextInputProps,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { useField } from 'formik';
+
+interface TextFieldProps extends TextInputProps {
+  name: string;
+  helperText?: React.ReactNode;
+}
+
+const TextField = React.forwardRef(
+  (
+    { helperText, onChange: onParentChange, ...props }: TextFieldProps,
+    ref: React.Ref<HTMLInputElement>,
+  ) => {
+    const [field, meta, { setValue }] = useField({
+      name: props.name,
+    });
+
+    const onChange = (_ev, value: string) => {
+      setValue(value);
+      onParentChange?.(_ev, value);
+    };
+
+    const fieldId = `textfield-${props.name}`;
+    const hasError = meta.touched && !!meta.error;
+
+    return (
+      <FormGroup id={`form-control__${fieldId}`} fieldId={fieldId}>
+        <TextInput
+          {...field}
+          {...props}
+          ref={ref}
+          id={fieldId}
+          onChange={onChange}
+          validated={hasError ? 'error' : 'default'}
+        />
+
+        {helperText && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem variant={'default'}>{helperText}</HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
+        {hasError && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem icon={<ExclamationCircleIcon />} variant={'error'}>
+                {meta.error}
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
+      </FormGroup>
+    );
+  },
+);
+
+TextField.displayName = 'TextField';
+
+export default TextField;