Bug 1838572: Replace Certificate TextArea with FileUpload

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/form/form-field.tsx

@@ -18,23 +18,40 @@ export enum FormFieldType {
   SELECT = 'SELECT',
   CHECKBOX = 'CHECKBOX',
   INLINE_CHECKBOX = 'INLINE_CHECKBOX',
+  FILE_UPLOAD = 'FILE_UPLOAD',
   CUSTOM = 'CUSTOM',
 }
 
-const hasValue = new Set([FormFieldType.TEXT, FormFieldType.TEXT_AREA, FormFieldType.SELECT]);
+const hasValue = new Set([
+  FormFieldType.TEXT,
+  FormFieldType.TEXT_AREA,
+  FormFieldType.SELECT,
+  FormFieldType.FILE_UPLOAD,
+]);
 const hasIsDisabled = new Set([
   FormFieldType.TEXT,
   FormFieldType.SELECT,
   FormFieldType.CHECKBOX,
   FormFieldType.INLINE_CHECKBOX,
+  FormFieldType.FILE_UPLOAD,
   FormFieldType.CUSTOM,
 ]);
 const hasDisabled = new Set([FormFieldType.TEXT_AREA]);
 const hasIsChecked = new Set([FormFieldType.CHECKBOX, FormFieldType.INLINE_CHECKBOX]);
+const hasValidated = new Set([FormFieldType.FILE_UPLOAD]);
+const hasIsValid = new Set([
+  FormFieldType.TEXT,
+  FormFieldType.TEXT_AREA,
+  FormFieldType.SELECT,
+  FormFieldType.CHECKBOX,
+  FormFieldType.INLINE_CHECKBOX,
+  FormFieldType.CUSTOM,
+]);
 const hasIsRequired = new Set([
   FormFieldType.TEXT,
   FormFieldType.TEXT_AREA,
   FormFieldType.SELECT,
+  FormFieldType.FILE_UPLOAD,
   FormFieldType.CUSTOM,
 ]);
 const hasLabel = new Set([FormFieldType.INLINE_CHECKBOX]);
@@ -59,6 +76,7 @@ export const FormField: React.FC<FormFieldProps> = ({ children, isDisabled, valu
         const val = value || iGetFieldValue(field);
         const key = iGetFieldKey(field);
         const disabled = isDisabled || isFieldDisabled(field) || isLoading;
+        const isValid = iGetIn(field, ['validation', 'type']) !== ValidationErrorType.Error;
 
         return inject(
           children,
@@ -69,7 +87,8 @@ export const FormField: React.FC<FormFieldProps> = ({ children, isDisabled, valu
               isDisabled: set(hasIsDisabled, disabled),
               disabled: set(hasDisabled, disabled),
               isRequired: set(hasIsRequired, isFieldRequired(field)),
-              isValid: iGetIn(field, ['validation', 'type']) !== ValidationErrorType.Error,
+              isValid: set(hasIsValid, isValid),
+              validated: set(hasValidated, isValid ? undefined : 'error'),
               id: getFieldId(key),
               label: set(hasLabel, getFieldTitle(key)),
             },

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/redux/initial-state/providers/ovirt-initial-state.ts

@@ -12,6 +12,7 @@ export const getOvirtInitialState = (): OvirtSettings => {
     },
     [OvirtProviderField.CERTIFICATE]: {
       isHidden: hiddenByOvirtEngine,
+      filename: '',
     },
     [OvirtProviderField.USERNAME]: {
       isHidden: hiddenByOvirtEngine,

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/tabs/import-providers-tab/import-providers-tab.tsx

@@ -6,7 +6,7 @@ import { FormFieldMemoRow } from '../../form/form-field-row';
 import { FormField, FormFieldType } from '../../form/form-field';
 import { FormSelectPlaceholderOption } from '../../../form/form-select-placeholder-option';
 import { vmWizardActions } from '../../redux/actions';
-import { ImportProviderRenderableField, ImportProvidersField, VMImportProvider } from '../../types';
+import { ImportProviderRenderableField, ImportProvidersField } from '../../types';
 import { ActionType } from '../../redux/types';
 import { getPlaceholder } from '../../utils/renderable-field-utils';
 import { VMWareImportProvider } from './providers/vmware-import-provider/vmware-import-provider';
@@ -30,7 +30,6 @@ class ImportProvidersTabComponent extends React.Component<ImportProvidersTabComp
     return (
       <Form className="co-m-pane__body co-m-pane__form">
         <FormFieldMemoRow
-          key={ImportProvidersField.PROVIDER}
           field={this.getField(ImportProvidersField.PROVIDER)}
           fieldType={FormFieldType.SELECT}
         >
@@ -48,8 +47,8 @@ class ImportProvidersTabComponent extends React.Component<ImportProvidersTabComp
             </FormSelect>
           </FormField>
         </FormFieldMemoRow>
-        <OvirtImportProvider key={VMImportProvider.OVIRT} wizardReduxID={wizardReduxID} />
-        <VMWareImportProvider key={VMImportProvider.VMWARE} wizardReduxID={wizardReduxID} />
+        <OvirtImportProvider wizardReduxID={wizardReduxID} />
+        <VMWareImportProvider wizardReduxID={wizardReduxID} />
       </Form>
     );
   }

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/tabs/import-providers-tab/providers/ovirt-import-provider/ovirt-certificate.tsx

@@ -0,0 +1,124 @@
+import { connect } from 'react-redux';
+import * as React from 'react';
+import { FileUpload } from '@patternfly/react-core';
+import { ValidationErrorType, ValidationObject } from '@console/shared/src/utils/validation/types';
+import { iGetOvirtField } from '../../../../selectors/immutable/provider/ovirt/selectors';
+import { VMImportProvider, OvirtProviderField } from '../../../../types';
+import { vmWizardActions } from '../../../../redux/actions';
+import { ActionType } from '../../../../redux/types';
+import { iGet } from '../../../../../../utils/immutable';
+import { FormField, FormFieldType } from '../../../../form/form-field';
+import { FormFieldRow } from '../../../../form/form-field-row';
+import { getFieldId } from '../../../../utils/renderable-field-utils';
+
+const MAX_CERT_SIZE = 10 * 1024 * 1024;
+const MAX_CERT_SIZE_MSG = 'Maximum allowed size is 10 MiB';
+const READ_FAILED_MSG = 'Read failed';
+
+const OvirtCertificateConnected: React.FC<OvirtCertificateProps> = React.memo(
+  ({ certField, onCertChange }) => {
+    const mounted = React.useRef(true);
+    React.useEffect(() => () => (mounted.current = false), []);
+
+    const [isCertFileLoading, setCertFileLoading] = React.useState(false);
+    const [lastError, setLastError] = React.useState(null);
+
+    const additionalValidation: ValidationObject = lastError
+      ? { message: lastError, type: ValidationErrorType.Error }
+      : undefined;
+
+    const onCertificateChange = React.useCallback(
+      (value: string, filename: string) => {
+        if (mounted.current) {
+          if (lastError && !filename) {
+            setLastError(null);
+          }
+          onCertChange(value, filename);
+        }
+      },
+      [lastError, onCertChange],
+    );
+
+    const onCertFileReadStarted = React.useCallback(() => {
+      if (mounted.current) {
+        setCertFileLoading(true);
+        setLastError(null);
+      }
+    }, []);
+    const onCertFileReadFinished = React.useCallback(
+      () => mounted.current && setCertFileLoading(false),
+      [],
+    );
+
+    const onCertFileRejected = React.useCallback(() => {
+      if (mounted.current) {
+        setCertFileLoading(false);
+        setLastError(MAX_CERT_SIZE_MSG);
+      }
+    }, []);
+
+    const onCertFileReadFailed = React.useCallback(() => {
+      if (mounted.current) {
+        setCertFileLoading(false);
+        setLastError(READ_FAILED_MSG);
+      }
+    }, []);
+
+    return (
+      <FormFieldRow
+        field={certField}
+        fieldType={FormFieldType.FILE_UPLOAD}
+        validation={additionalValidation}
+        fieldHelp={
+          <a
+            href="https://ovirt.github.io/ovirt-engine-api-model/master/#_obtaining_the_ca_certificate"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Obtaining the CA certificate
+          </a>
+        }
+      >
+        <FormField>
+          <FileUpload
+            id={getFieldId(OvirtProviderField.CERTIFICATE)}
+            type="text"
+            filename={iGet(certField, 'filename')}
+            onReadStarted={onCertFileReadStarted}
+            onReadFinished={onCertFileReadFinished}
+            onReadFailed={onCertFileReadFailed}
+            isLoading={isCertFileLoading}
+            onChange={onCertificateChange}
+            dropzoneProps={{
+              maxSize: MAX_CERT_SIZE,
+              onDropRejected: onCertFileRejected,
+            }}
+          />
+        </FormField>
+      </FormFieldRow>
+    );
+  },
+);
+
+type OvirtCertificateProps = {
+  certField: any;
+  onCertChange: (value: string, filename: string) => void;
+};
+
+const stateToProps = (state, { wizardReduxID }) => ({
+  certField: iGetOvirtField(state, wizardReduxID, OvirtProviderField.CERTIFICATE),
+});
+
+const dispatchToProps = (dispatch, { wizardReduxID }) => ({
+  onCertChange: (value: string, filename: string) =>
+    dispatch(
+      vmWizardActions[ActionType.UpdateImportProviderField](
+        wizardReduxID,
+        VMImportProvider.OVIRT,
+        OvirtProviderField.CERTIFICATE,
+        { value, filename },
+      ),
+    ),
+});
+
+export const OvirtCertificate = connect(stateToProps, dispatchToProps)(OvirtCertificateConnected);

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/tabs/import-providers-tab/providers/ovirt-import-provider/ovirt-import-provider.scss

@@ -1,8 +1,3 @@
-.kubevirt-create-vm-modal__ovirt-provider-ca {
-  min-height: 15em;
-  resize: vertical;
-}
-
 .kubevirt-create-vm-modal__ovirt-provider-remember-password > input[type="checkbox"] {
   margin: -0.1em 0 0 !important;
 }