Refactor review tab for the create VM wizard

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard.scss

@@ -8,6 +8,13 @@
   flex-flow: wrap
 }
 
+.kubevirt-create-vm-modal__wizard-content .pf-c-wizard__main-body {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  padding-bottom: 0;
+}
+
 .pf-c-wizard__outer-wrap {
   min-height: inherit;
 }

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/form/form-field-review-row.scss

@@ -0,0 +1,3 @@
+.kubevirt-create-vm-modal__form-field-review-row {
+  margin-bottom: var(--pf-global--spacer--sm);
+}

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

@@ -1,27 +1,31 @@
 import * as React from 'react';
 import { getFieldTitle } from '../utils/renderable-field-utils';
-import { iGetFieldValue } from '../selectors/immutable/field';
 import { iGet } from '../../../utils/immutable';
-import { getCheckboxReadableValue } from '../../../utils/strings';
 import { FormFieldType } from './form-field';
+import { getReviewValue } from '../tabs/review-tab/utils';
+
+import './form-field-review-row.scss';
 
 type FormFieldReviewRowProps = {
   field: any;
-  fieldType: FormFieldType;
+  fieldType?: FormFieldType;
+  value?: any;
 };
 
-export const FormFieldReviewRow: React.FC<FormFieldReviewRowProps> = ({ fieldType, field }) => {
+export const FormFieldReviewRow: React.FC<FormFieldReviewRowProps> = ({
+  fieldType,
+  field,
+  value = undefined,
+}) => {
   const fieldKey = iGet(field, 'key');
-  const value = iGetFieldValue(field);
-  const reviewValue = [FormFieldType.CHECKBOX, FormFieldType.INLINE_CHECKBOX].includes(fieldType)
-    ? getCheckboxReadableValue(value)
-    : value;
-  if (!reviewValue) {
-    return null;
-  }
+  const fieldTitle = getFieldTitle(fieldKey);
+  const reviewValue = value || getReviewValue(field, fieldType) || (
+    <span className="text-secondary">{`No ${fieldTitle.toLowerCase()}`}</span>
+  );
+
   return (
     <>
-      <dt>{getFieldTitle(fieldKey)}</dt>
+      <dt>{fieldTitle}</dt>
       <dd>{reviewValue}</dd>
     </>
   );

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

@@ -7,8 +7,6 @@ import { iGet, iGetIn, iGetIsLoaded } from '../../../utils/immutable';
 import { FormRow } from '../../form/form-row';
 import { FormFieldContext } from './form-field-context';
 import { FormFieldType } from './form-field';
-import { FormFieldReviewContext } from './form-field-review-context';
-import { FormFieldReviewMemoRow, FormFieldReviewRow } from './form-field-review-row';
 
 const isLoading = (loadingResources?: { [k: string]: any }) =>
   loadingResources &&
@@ -73,29 +71,19 @@ export const FormFieldRow: React.FC<FieldFormRowProps> = ({
   if (!field || !fieldKey || isFieldHidden(field)) {
     return null;
   }
+  const Component = memoize ? FormFieldInnerMemoRow : FormFieldInnerRow;
 
   return (
-    <FormFieldReviewContext.Consumer>
-      {({ isReview }: { isReview: boolean }) => {
-        if (isReview) {
-          const Component = memoize ? FormFieldReviewMemoRow : FormFieldReviewRow;
-          return <Component key="review" field={field} fieldType={fieldType} />;
-        }
-        const Component = memoize ? FormFieldInnerMemoRow : FormFieldInnerRow;
-        return (
-          <Component
-            key="main"
-            field={field}
-            fieldType={fieldType}
-            fieldHelp={fieldHelp}
-            loadingResources={loadingResources}
-            validation={validation}
-          >
-            {children}
-          </Component>
-        );
-      }}
-    </FormFieldReviewContext.Consumer>
+    <Component
+      key="main"
+      field={field}
+      fieldType={fieldType}
+      fieldHelp={fieldHelp}
+      loadingResources={loadingResources}
+      validation={validation}
+    >
+      {children}
+    </Component>
   );
 };
 

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/selectors/combined.ts

@@ -0,0 +1,28 @@
+import { Map as ImmutableMap } from 'immutable';
+import { TemplateKind } from '@console/internal/module/k8s';
+import { ITemplate } from '../../../types/template';
+import { getTemplateOperatingSystems } from '../../../selectors/vm-template/advanced';
+import { concatImmutableLists, immutableListToShallowJS } from '../../../utils/immutable';
+import { operatingSystemsNative } from '../native/consts';
+
+export const getOS = ({ osID, iUserTemplates, openshiftFlag, iCommonTemplates }: GetOSParams) => {
+  const operatingSystems = openshiftFlag
+    ? getTemplateOperatingSystems(
+        immutableListToShallowJS<TemplateKind>(
+          concatImmutableLists(iUserTemplates, iCommonTemplates),
+        ),
+      )
+    : operatingSystemsNative;
+
+  return {
+    osID,
+    osName: (operatingSystems.find(({ id }) => id === osID) || {})?.name,
+  };
+};
+
+type GetOSParams = {
+  osID: string;
+  iUserTemplates: ImmutableMap<string, ITemplate>;
+  iCommonTemplates: ImmutableMap<string, ITemplate>;
+  openshiftFlag: boolean;
+};

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormSelect, FormSelectOption } from '@patternfly/react-core';
+import { Form, FormSelect, FormSelectOption } from '@patternfly/react-core';
 import { connect } from 'react-redux';
 import { iGet, iGetIn, immutableListToShallowJS } from '../../../../utils/immutable';
 import { FormFieldMemoRow } from '../../form/form-field-row';
@@ -9,7 +9,6 @@ import { vmWizardActions } from '../../redux/actions';
 import { ImportProviderRenderableField, ImportProvidersField, VMImportProvider } from '../../types';
 import { ActionType } from '../../redux/types';
 import { getPlaceholder } from '../../utils/renderable-field-utils';
-import { FormFieldForm } from '../../form/form-field-form';
 import { VMWareImportProvider } from './providers/vmware-import-provider/vmware-import-provider';
 import { iGetImportProviders } from '../../selectors/immutable/import-providers';
 import { OvirtImportProvider } from './providers/ovirt-import-provider/ovirt-import-provider';
@@ -29,7 +28,7 @@ class ImportProvidersTabComponent extends React.Component<ImportProvidersTabComp
     const { wizardReduxID } = this.props;
 
     return (
-      <FormFieldForm>
+      <Form>
         <FormFieldMemoRow
           key={ImportProvidersField.PROVIDER}
           field={this.getField(ImportProvidersField.PROVIDER)}
@@ -51,7 +50,7 @@ class ImportProvidersTabComponent extends React.Component<ImportProvidersTabComp
         </FormFieldMemoRow>
         <OvirtImportProvider key={VMImportProvider.OVIRT} wizardReduxID={wizardReduxID} />
         <VMWareImportProvider key={VMImportProvider.VMWARE} wizardReduxID={wizardReduxID} />
-      </FormFieldForm>
+      </Form>
     );
   }
 }

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/tabs/review-tab/advanced-tab.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { getBooleanAsEnabledValue } from '../../../../utils/strings';
+import { iGetCloudInitNoCloudStorage } from '../../selectors/immutable/storage';
+
+import './review-tab.scss';
+
+const AdvancedReviewConnected: React.FC<AdvancedReviewConnectedProps> = (props) => {
+  const { cloudInitEnabled } = props;
+
+  const cloudInitEnabledValue = getBooleanAsEnabledValue(cloudInitEnabled);
+
+  return (
+    <dl className="kubevirt-create-vm-modal__review-tab__data-list">
+      <dt>Cloud Init</dt>
+      <dd>{cloudInitEnabledValue}</dd>
+    </dl>
+  );
+};
+
+type AdvancedReviewConnectedProps = {
+  cloudInitEnabled: boolean;
+};
+
+const stateToProps = (state, { wizardReduxID }) => ({
+  cloudInitEnabled: !!iGetCloudInitNoCloudStorage(state, wizardReduxID),
+});
+
+export const AdvancedReviewTab = connect(stateToProps)(AdvancedReviewConnected);

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/tabs/review-tab/general-tab.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import {
+  iGetRelevantTemplateSelectors,
+  iGetVmSettings,
+} from '../../selectors/immutable/vm-settings';
+import { VMSettingsField, VMWizardProps } from '../../types';
+import { FormFieldReviewMemoRow } from '../../form/form-field-review-row';
+import { iGetCommonData, iGetLoadedCommonData } from '../../selectors/immutable/selectors';
+import { getField, getFieldValue, getFlavorValue } from './utils';
+import { getOS } from '../../selectors/combined';
+
+import './review-tab.scss';
+
+const GeneralReviewConnected: React.FC<GeneralReviewConnectedProps> = (props) => {
+  const {
+    iVMSettings,
+    iUserTemplates,
+    iCommonTemplates,
+    openshiftFlag,
+    relevantOptions,
+    isImport,
+    className,
+  } = props;
+
+  const flavorValue = getFlavorValue({
+    iVMSettings,
+    iUserTemplates,
+    iCommonTemplates,
+    relevantOptions,
+  });
+
+  const osName =
+    getOS({
+      osID: getFieldValue(iVMSettings, VMSettingsField.OPERATING_SYSTEM),
+      iUserTemplates,
+      openshiftFlag,
+      iCommonTemplates,
+    })?.osName || getField(VMSettingsField.OPERATING_SYSTEM, iVMSettings)?.get('display');
+
+  return (
+    <dl className={classNames('kubevirt-create-vm-modal__review-tab__data-list', className)}>
+      <FormFieldReviewMemoRow field={getField(VMSettingsField.NAME, iVMSettings)} />
+
+      <FormFieldReviewMemoRow field={getField(VMSettingsField.DESCRIPTION, iVMSettings)} />
+
+      {!isImport && (
+        <FormFieldReviewMemoRow
+          key={VMSettingsField.PROVISION_SOURCE_TYPE}
+          field={getField(VMSettingsField.PROVISION_SOURCE_TYPE, iVMSettings)}
+        />
+      )}
+
+      <FormFieldReviewMemoRow
+        field={getField(VMSettingsField.OPERATING_SYSTEM, iVMSettings)}
+        value={osName}
+      />
+
+      <FormFieldReviewMemoRow
+        field={getField(VMSettingsField.FLAVOR, iVMSettings)}
+        value={flavorValue}
+      />
+
+      <FormFieldReviewMemoRow field={getField(VMSettingsField.WORKLOAD_PROFILE, iVMSettings)} />
+    </dl>
+  );
+};
+
+type GeneralReviewConnectedProps = {
+  iVMSettings: any;
+  openshiftFlag: boolean;
+  iCommonTemplates: any;
+  iUserTemplates: any;
+  relevantOptions: any;
+  isImport: boolean;
+  className: string;
+};
+
+const stateToProps = (state, { wizardReduxID }) => ({
+  iVMSettings: iGetVmSettings(state, wizardReduxID),
+  openshiftFlag: iGetCommonData(state, wizardReduxID, VMWizardProps.openshiftFlag),
+  iCommonTemplates: iGetLoadedCommonData(state, wizardReduxID, VMWizardProps.commonTemplates),
+  iUserTemplates: iGetLoadedCommonData(state, wizardReduxID, VMWizardProps.userTemplates),
+  relevantOptions: iGetRelevantTemplateSelectors(state, wizardReduxID),
+  isImport: iGetCommonData(state, wizardReduxID, VMWizardProps.isProviderImport),
+});
+
+export const GeneralReview = connect(stateToProps)(GeneralReviewConnected);