Implement initial advanced section

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

@@ -1,36 +1,43 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { Grid, GridItem } from '@patternfly/react-core';
-import { iGetVmSettings } from '../../selectors/immutable/vm-settings';
-import { FormFieldReviewMemoRow } from '../../form/form-field-review-row';
-import { VMSettingsField } from '../../types';
-import { getField } from './utils';
-import { FormFieldType } from '../../form/form-field';
+import { Grid, GridItem, Title } from '@patternfly/react-core';
+import { VMWizardStorage } from '../../types';
+import { getStorages } from '../../selectors/selectors';
+import { VolumeWrapper } from '../../../../k8s/wrapper/vm/volume-wrapper';
+import { VolumeType } from '../../../../constants/vm/storage';
+import {getBooleanAsEnabledValue} from '../../../../utils/strings';
+
+import './review-tab.scss';
 
 const AdvancedReviewConnected: React.FC<AdvancedReviewConnectedProps> = (props) => {
-  const { vmSettings } = props;
+  const { storages } = props;
+
+  const cloudInitEnabledValue = getBooleanAsEnabledValue(
+    storages.filter(
+      (storage) => new VolumeWrapper(storage.volume).getType() === VolumeType.CLOUD_INIT_NO_CLOUD,
+    ).length > 0,
+  );
 
-  // TODO Fill with actual values
   return (
-    <Grid>
-      <GridItem span={2}>
-        {' '}
-        <FormFieldReviewMemoRow
-          key={VMSettingsField.PROVISION_SOURCE_TYPE}
-          field={getField(VMSettingsField.PROVISION_SOURCE_TYPE, vmSettings)}
-          fieldType={FormFieldType.SELECT}
-        />
+    <Grid className="kubevirt-create-vm-modal__review-tab-section-container">
+      <GridItem span={1}>
+        <Title headingLevel="h4" size="sm">
+          Cloud Init
+        </Title>
       </GridItem>
+      <GridItem span={11}>{cloudInitEnabledValue}</GridItem>
     </Grid>
   );
 };
 
 type AdvancedReviewConnectedProps = {
-  vmSettings: any;
+  storages: VMWizardStorage[];
+  // vmSettings: any;
 };
 
 const stateToProps = (state, { wizardReduxID }) => ({
-  vmSettings: iGetVmSettings(state, wizardReduxID),
+  storages: getStorages(state, wizardReduxID),
+  // vmSettings: iGetVmSettings(state, wizardReduxID),
 });
 
 export const AdvancedReviewTab = connect(stateToProps)(AdvancedReviewConnected);

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

@@ -19,7 +19,7 @@ import { iGetFieldValue } from '../../selectors/immutable/field';
 import { getField } from './utils';
 import { VMSettings } from '../../redux/initial-state/types';
 
-import './general-tab.scss';
+import './review-tab.scss';
 
 const GeneralReviewConnected: React.FC<GeneralReviewConnectedProps> = (props) => {
   const { iVMSettings, iUserTemplates, iCommonTemplates, openshiftFlag, relevantOptions } = props;
@@ -53,7 +53,7 @@ const GeneralReviewConnected: React.FC<GeneralReviewConnectedProps> = (props) =>
     })?.osName || '';
 
   return (
-    <Grid className="kubevirt-create-vm-modal__general-tab-container">
+    <Grid className="kubevirt-create-vm-modal__review-tab-section-container">
       <FormFieldReviewMemoRow field={getField(VMSettingsField.NAME, iVMSettings)} />
 
       <FormFieldReviewMemoRow field={getField(VMSettingsField.DESCRIPTION, iVMSettings)} />

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

@@ -5,3 +5,8 @@
 .kubevirt-create-vm-modal__review-tab-lower-section {
   margin-top: 20px;
 }
+
+.kubevirt-create-vm-modal__review-tab-section-container {
+  margin-top: var(--pf-global--spacer--md);
+}
+

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

@@ -12,6 +12,7 @@ import { getField } from './utils';
 import { GeneralReview } from './general-tab';
 import { NetworkingReview } from './networking-review';
 import { StorageReview } from './storage-review';
+import { AdvancedReviewTab } from './advanced-tab';
 
 import './review-tab.scss';
 
@@ -55,6 +56,14 @@ export const ReviewTabConnected: React.FC<ReviewTabProps> = (props) => {
         wizardReduxID={wizardReduxID}
         className="kubevirt-create-vm-modal__review-tab-lower-section"
       />
+      <Title
+        headingLevel="h4"
+        size="lg"
+        className="kubevirt-create-vm-modal__review-tab-lower-section"
+      >
+        Advanced
+      </Title>
+      <AdvancedReviewTab wizardReduxID={wizardReduxID} />
       <Form>
         <FormFieldMemoRow
           field={getField(VMSettingsField.START_VM, vmSettings)}

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/tabs/review-tab/utils.ts

@@ -1,5 +1,5 @@
 import { FormFieldType } from '../../form/form-field';
-import { getCheckboxReadableValue } from '../../../../utils/strings';
+import { getBooleanReadableValue } from '../../../../utils/strings';
 import { iGetFieldValue } from '../../selectors/immutable/field';
 import {VMSettingsField} from "../../types";
 import {iGet} from "../../../../utils/immutable";
@@ -8,7 +8,7 @@ export const getReviewValue = (field: any, fieldType: FormFieldType) => {
   const value = iGetFieldValue(field);
 
   return [FormFieldType.CHECKBOX, FormFieldType.INLINE_CHECKBOX].includes(fieldType)
-    ? getCheckboxReadableValue(value)
+    ? getBooleanReadableValue(value)
     : value;
 };
 

frontend/packages/kubevirt-plugin/src/utils/strings.ts

@@ -22,7 +22,9 @@ export const getDialogUIError = (hasAllRequiredFilled) =>
 export const getSimpleDialogUIError = (hasAllRequiredFilled) =>
   hasAllRequiredFilled ? 'Some fields are not correct' : 'Required fields not completed';
 
-export const getCheckboxReadableValue = (value: boolean) => (value ? 'yes' : 'no');
+export const getBooleanReadableValue = (value: boolean) => (value ? 'yes' : 'no');
+
+export const getBooleanAsEnabledValue = (value: boolean) => (value ? 'Enabled' : 'Not Enabled');
 
 export const getSequenceName = (name: string, usedSequenceNames?: Set<string>) => {
   if (!usedSequenceNames) {