Merge pull request #2091 from upalatucci/refactor-diskmodal

CNV-44890: Refactor diskmodal

locales/en/plugin__kubevirt-plugin.json

@@ -907,7 +907,6 @@
   "PersistentVolumeClaim is required.": "PersistentVolumeClaim is required.",
   "PersistentVolumeClaim name": "PersistentVolumeClaim name",
   "PersistentVolumeClaim project": "PersistentVolumeClaim project",
-  "PersistentVolumeClaim size": "PersistentVolumeClaim size",
   "Phase": "Phase",
   "pick an operating system": "pick an operating system",
   "Please <2>approve this certificate</2> and try again": "Please <2>approve this certificate</2> and try again",
@@ -1306,6 +1305,7 @@
   "Use BIOS when bootloading the guest OS (Default)": "Use BIOS when bootloading the guest OS (Default)",
   "Use commas to separate between IP addresses": "Use commas to separate between IP addresses",
   "Use cron formatting to set when and how often to look for new imports.": "Use cron formatting to set when and how often to look for new imports.",
+  "Use DataSource": "Use DataSource",
   "Use existing": "Use existing",
   "Use existing volume": "Use existing volume",
   "Use existing volume snapshot": "Use existing volume snapshot",

src/utils/components/DiskModal/BlankDiskModal.tsx

@@ -0,0 +1,73 @@
+import React, { FC } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import { getNamespace } from '@kubevirt-utils/resources/shared';
+import { isEmpty } from '@kubevirt-utils/utils/utils';
+import { Form } from '@patternfly/react-core';
+import { isRunning } from '@virtualmachines/utils';
+
+import TabModal from '../TabModal/TabModal';
+
+import AdvancedSettings from './components/AdvancedSettings/AdvancedSettings';
+import BootSourceCheckbox from './components/BootSourceCheckbox/BootSourceCheckbox';
+import DiskInterfaceSelect from './components/DiskInterfaceSelect/DiskInterfaceSelect';
+import DiskNameInput from './components/DiskNameInput/DiskNameInput';
+import DiskSizeInput from './components/DiskSizeInput/DiskSizeInput';
+import DiskTypeSelect from './components/DiskTypeSelect/DiskTypeSelect';
+import PendingChanges from './components/PendingChanges';
+import StorageClassAndPreallocation from './components/StorageClassAndPreallocation/StorageClassAndPreallocation';
+import { getDefaultCreateValues, getDefaultEditValues } from './utils/form';
+import { diskModalTitle } from './utils/helpers';
+import { submit } from './utils/submit';
+import { SourceTypes, V1DiskFormState, V1DiskModalProps } from './utils/types';
+
+const BlankDiskModal: FC<V1DiskModalProps> = ({
+  editDiskName,
+  isCreated,
+  isOpen,
+  onClose,
+  onSubmit,
+  vm,
+}) => {
+  const isVMRunning = isRunning(vm);
+
+  const isEditDisk = !isEmpty(editDiskName);
+
+  const methods = useForm<V1DiskFormState>({
+    defaultValues: isEditDisk
+      ? getDefaultEditValues(vm, editDiskName)
+      : getDefaultCreateValues(vm, SourceTypes.BLANK),
+    mode: 'all',
+  });
+
+  const {
+    formState: { isSubmitting, isValid },
+    handleSubmit,
+  } = methods;
+
+  return (
+    <FormProvider {...methods}>
+      <TabModal
+        closeOnSubmit={isValid}
+        headerText={diskModalTitle(isEditDisk, isVMRunning)}
+        isLoading={isSubmitting}
+        isOpen={isOpen}
+        onClose={onClose}
+        onSubmit={() => handleSubmit(async (data) => submit(data, vm, editDiskName, onSubmit))()}
+      >
+        <PendingChanges isVMRunning={isVMRunning} />
+        <Form>
+          <BootSourceCheckbox editDiskName={editDiskName} isDisabled={isVMRunning} vm={vm} />
+          <DiskNameInput />
+          <DiskSizeInput isCreated={isCreated} namespace={getNamespace(vm)} />
+          <DiskTypeSelect isVMRunning={isVMRunning} />
+          <DiskInterfaceSelect isVMRunning={isVMRunning} />
+          {!isCreated && <StorageClassAndPreallocation vm={vm} />}
+          <AdvancedSettings />
+        </Form>
+      </TabModal>
+    </FormProvider>
+  );
+};
+
+export default BlankDiskModal;

src/utils/components/DiskModal/ClonePVCDiskModal.tsx

@@ -0,0 +1,75 @@
+import React, { FC } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import { getNamespace } from '@kubevirt-utils/resources/shared';
+import { isEmpty } from '@kubevirt-utils/utils/utils';
+import { Form } from '@patternfly/react-core';
+import { isRunning } from '@virtualmachines/utils';
+
+import TabModal from '../TabModal/TabModal';
+
+import AdvancedSettings from './components/AdvancedSettings/AdvancedSettings';
+import BootSourceCheckbox from './components/BootSourceCheckbox/BootSourceCheckbox';
+import DiskInterfaceSelect from './components/DiskInterfaceSelect/DiskInterfaceSelect';
+import DiskNameInput from './components/DiskNameInput/DiskNameInput';
+import DiskSizeInput from './components/DiskSizeInput/DiskSizeInput';
+import DiskSourceClonePVCSelect from './components/DiskSourceSelect/components/DiskSourceClonePVCSelect/DiskSourceClonePVCSelect';
+import DiskTypeSelect from './components/DiskTypeSelect/DiskTypeSelect';
+import PendingChanges from './components/PendingChanges';
+import StorageClassAndPreallocation from './components/StorageClassAndPreallocation/StorageClassAndPreallocation';
+import { getDefaultCreateValues, getDefaultEditValues } from './utils/form';
+import { diskModalTitle } from './utils/helpers';
+import { submit } from './utils/submit';
+import { SourceTypes, V1DiskFormState, V1DiskModalProps } from './utils/types';
+
+const ClonePVCDiskModal: FC<V1DiskModalProps> = ({
+  editDiskName,
+  isCreated,
+  isOpen,
+  onClose,
+  onSubmit,
+  vm,
+}) => {
+  const isVMRunning = isRunning(vm);
+
+  const isEditDisk = !isEmpty(editDiskName);
+
+  const methods = useForm<V1DiskFormState>({
+    defaultValues: isEditDisk
+      ? getDefaultEditValues(vm, editDiskName)
+      : getDefaultCreateValues(vm, SourceTypes.CLONE_PVC),
+    mode: 'all',
+  });
+
+  const {
+    formState: { isSubmitting, isValid },
+    handleSubmit,
+  } = methods;
+
+  return (
+    <FormProvider {...methods}>
+      <TabModal
+        closeOnSubmit={isValid}
+        headerText={diskModalTitle(isEditDisk, isVMRunning)}
+        isLoading={isSubmitting}
+        isOpen={isOpen}
+        onClose={onClose}
+        onSubmit={() => handleSubmit(async (data) => submit(data, vm, editDiskName, onSubmit))()}
+      >
+        <PendingChanges isVMRunning={isVMRunning} />
+        <Form>
+          <BootSourceCheckbox editDiskName={editDiskName} isDisabled={isVMRunning} vm={vm} />
+          <DiskNameInput />
+          {!isCreated && <DiskSourceClonePVCSelect />}
+          <DiskSizeInput isCreated={isCreated} namespace={getNamespace(vm)} />
+          <DiskTypeSelect isVMRunning={isVMRunning} />
+          <DiskInterfaceSelect isVMRunning={isVMRunning} />
+          {!isCreated && <StorageClassAndPreallocation vm={vm} />}
+          <AdvancedSettings />
+        </Form>
+      </TabModal>
+    </FormProvider>
+  );
+};
+
+export default ClonePVCDiskModal;

src/utils/components/DiskModal/ContainerDiskModal.tsx

@@ -0,0 +1,73 @@
+import React, { FC } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import { isEmpty } from '@kubevirt-utils/utils/utils';
+import { Form } from '@patternfly/react-core';
+import { isRunning } from '@virtualmachines/utils';
+
+import TabModal from '../TabModal/TabModal';
+
+import AdvancedSettings from './components/AdvancedSettings/AdvancedSettings';
+import BootSourceCheckbox from './components/BootSourceCheckbox/BootSourceCheckbox';
+import DiskInterfaceSelect from './components/DiskInterfaceSelect/DiskInterfaceSelect';
+import DiskNameInput from './components/DiskNameInput/DiskNameInput';
+import DynamicSize from './components/DiskSizeInput/DynamicSize';
+import DiskSourceContainer from './components/DiskSourceSelect/components/DiskSourceContainer/DiskSourceContainer';
+import DiskTypeSelect from './components/DiskTypeSelect/DiskTypeSelect';
+import PendingChanges from './components/PendingChanges';
+import { CONTAINERDISK_IMAGE_FIELD } from './components/utils/constants';
+import { getDefaultCreateValues, getDefaultEditValues } from './utils/form';
+import { diskModalTitle, getOS } from './utils/helpers';
+import { submit } from './utils/submit';
+import { SourceTypes, V1DiskFormState, V1DiskModalProps } from './utils/types';
+
+const ContainerDiskModal: FC<V1DiskModalProps> = ({
+  editDiskName,
+  isOpen,
+  onClose,
+  onSubmit,
+  vm,
+}) => {
+  const os = getOS(vm);
+  const isVMRunning = isRunning(vm);
+
+  const isEditDisk = !isEmpty(editDiskName);
+
+  const methods = useForm<V1DiskFormState>({
+    defaultValues: isEditDisk
+      ? getDefaultEditValues(vm, editDiskName)
+      : getDefaultCreateValues(vm, SourceTypes.EPHEMERAL),
+    mode: 'all',
+  });
+
+  const {
+    formState: { isSubmitting, isValid },
+    handleSubmit,
+  } = methods;
+
+  return (
+    <FormProvider {...methods}>
+      <TabModal
+        closeOnSubmit={isValid}
+        headerText={diskModalTitle(isEditDisk, isVMRunning)}
+        isLoading={isSubmitting}
+        isOpen={isOpen}
+        onClose={onClose}
+        onSubmit={() => handleSubmit(async (data) => submit(data, vm, editDiskName, onSubmit))()}
+      >
+        <PendingChanges isVMRunning={isVMRunning} />
+        <Form>
+          <BootSourceCheckbox editDiskName={editDiskName} isDisabled={isVMRunning} vm={vm} />
+          <DiskNameInput />
+          <DiskSourceContainer fieldName={CONTAINERDISK_IMAGE_FIELD} os={os} />
+          <DynamicSize />
+          <DiskTypeSelect isVMRunning={isVMRunning} />
+          <DiskInterfaceSelect isVMRunning={isVMRunning} />
+          <AdvancedSettings />
+        </Form>
+      </TabModal>
+    </FormProvider>
+  );
+};
+
+export default ContainerDiskModal;

src/utils/components/DiskModal/DiskModal.tsx

@@ -1,127 +1,42 @@
 import React, { FC } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
 
-import { useCDIUpload } from '@kubevirt-utils/hooks/useCDIUpload/useCDIUpload';
-import { UPLOAD_STATUS } from '@kubevirt-utils/hooks/useCDIUpload/utils';
-import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
-import { getBootDisk } from '@kubevirt-utils/resources/vm';
-import { generatePrettyName, kubevirtConsole } from '@kubevirt-utils/utils/utils';
-import { Form } from '@patternfly/react-core';
-import { isRunning } from '@virtualmachines/utils';
+import { getName } from '@kubevirt-utils/resources/shared';
+import { getDataVolumeTemplates, getVolumes } from '@kubevirt-utils/resources/vm';
 
-import { PendingChangesAlert } from '../PendingChanges/PendingChangesAlert/PendingChangesAlert';
-import TabModal from '../TabModal/TabModal';
+import { modalsBySource } from './utils/constants';
+import { getSourceFromVolume } from './utils/helpers';
+import { V1DiskModalProps } from './utils/types';
 
-import AdvancedSettings from './components/AdvancedSettings/AdvancedSettings';
-import BootSourceCheckbox from './components/BootSourceCheckbox/BootSourceCheckbox';
-import DiskInterfaceSelect from './components/DiskInterfaceSelect/DiskInterfaceSelect';
-import DiskNameInput from './components/DiskNameInput/DiskNameInput';
-import DiskSizeInput from './components/DiskSizeInput/DiskSizeInput';
-import { getSelectedDiskSourceComponent } from './components/DiskSourceSelect/utils/utils';
-import DiskTypeSelect from './components/DiskTypeSelect/DiskTypeSelect';
-import StorageClassAndPreallocation from './components/StorageClassAndPreallocation/StorageClassAndPreallocation';
-import { getInitialStateDiskForm } from './utils/constants';
-import {
-  addDisk,
-  checkDifferentStorageClassFromBootPVC,
-  editCreatedDisk,
-  editDraftDisk,
-} from './utils/helpers';
-import { DiskFormState, DiskModalProps } from './utils/types';
-
-const DiskModal: FC<DiskModalProps> = ({
-  createOwnerReference = true,
-  customize = false,
-  headerText,
-  initialFormData = null,
-  isEditDisk = false,
-  isEditingCreatedDisk = false,
+const DiskModal: FC<V1DiskModalProps> = ({
+  createDiskSource,
+  editDiskName,
+  isCreated,
   isOpen,
   onClose,
   onSubmit,
   onUploadedDataVolume,
   vm,
 }) => {
-  const { t } = useKubevirtTranslation();
-  const { upload, uploadData } = useCDIUpload();
-  const isVMRunning = isRunning(vm);
-
-  const methods = useForm<DiskFormState>({
-    defaultValues: initialFormData ?? {
-      diskName: generatePrettyName('disk'),
-      ...getInitialStateDiskForm(isVMRunning),
-    },
-    mode: 'all',
-  });
+  const diskVolume = getVolumes(vm)?.find((volume) => volume.name === editDiskName);
+  const dataVolumeTemplate = getDataVolumeTemplates(vm)?.find(
+    (dv) => getName(dv) === diskVolume?.dataVolume?.name,
+  );
 
-  const {
-    formState: { isSubmitting, isValid },
-    handleSubmit,
-  } = methods;
+  const editDiskSource = getSourceFromVolume(diskVolume, dataVolumeTemplate);
 
-  const diskSource = initialFormData?.diskSource;
+  const Modal = modalsBySource[createDiskSource || editDiskSource];
 
   return (
-    <FormProvider {...methods}>
-      <TabModal
-        onClose={() => {
-          if (upload?.uploadStatus === UPLOAD_STATUS.UPLOADING) {
-            upload.cancelUpload().catch(kubevirtConsole.error);
-          }
-          onClose();
-        }}
-        onSubmit={() =>
-          handleSubmit((data) => {
-            if (isEditingCreatedDisk || customize)
-              return editDraftDisk(vm, initialFormData, data, onSubmit);
-
-            if (isEditDisk)
-              return editCreatedDisk(initialFormData, data, uploadData, {
-                createOwnerReference,
-                onSubmit,
-                onUploadedDataVolume,
-                vm,
-              });
-
-            return addDisk(data, uploadData, {
-              createOwnerReference,
-              onSubmit,
-              onUploadedDataVolume,
-              vm,
-            });
-          })()
-        }
-        closeOnSubmit={isValid}
-        headerText={headerText}
-        isLoading={isSubmitting}
-        isOpen={isOpen}
-      >
-        {isVMRunning && (
-          <PendingChangesAlert title={t(' Adding hot plugged disk')}>
-            {t(
-              'Additional disks types and interfaces are available when the VirtualMachine is stopped.',
-            )}
-          </PendingChangesAlert>
-        )}
-        <Form>
-          <BootSourceCheckbox
-            initialBootDiskName={getBootDisk(vm)?.name}
-            isDisabled={isVMRunning}
-          />
-          <DiskNameInput />
-          {getSelectedDiskSourceComponent(vm, upload)[diskSource]}
-          <DiskSizeInput isEditingCreatedDisk={isEditingCreatedDisk} />
-          <DiskTypeSelect isVMRunning={isVMRunning} />
-          <DiskInterfaceSelect isVMRunning={isVMRunning} />
-          <StorageClassAndPreallocation
-            checkSC={(selectedStorageClass) =>
-              checkDifferentStorageClassFromBootPVC(vm, selectedStorageClass)
-            }
-          />
-          <AdvancedSettings />
-        </Form>
-      </TabModal>
-    </FormProvider>
+    <Modal
+      createDiskSource={createDiskSource}
+      editDiskName={editDiskName}
+      isCreated={isCreated}
+      isOpen={isOpen}
+      onClose={onClose}
+      onSubmit={onSubmit}
+      onUploadedDataVolume={onUploadedDataVolume}
+      vm={vm}
+    />
   );
 };