Bug 1871103: Remove 'Template' dropdown field from VM wizard

When creating a VM from template the title will be: `Create Virtual Machine from <template name> template` Signed-off-by: Ido Rosenzwig <irosenzw@redhat.com>
openshift · Sep 10, 2020 · 7656c41 · 7656c41
1 parent 6c62db8
commit 7656c41
Show file tree

Hide file tree

Showing 29 changed files with 235 additions and 448 deletions.
diff --git a/...tend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard-footer.tsx b/...tend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard-footer.tsx
@@ -36,6 +36,7 @@ import {
 import { vmWizardActions } from './redux/actions';
 import { ActionType } from './redux/types';
 import { getGoToStep } from './selectors/selectors';
+import { iGetLoadError, iGetIsLoaded } from '../../utils/immutable';
 
 import './create-vm-wizard-footer.scss';
 
@@ -54,6 +55,7 @@ type CreateVMWizardFooterComponentProps = {
   isCreateTemplate: boolean;
   isProviderImport: boolean;
   isSimpleView: boolean;
+  isInvalidUserTemplate: boolean;
   onEdit: (activeStepID: VMWizardTab) => void;
   setActiveNS: (ns: string) => void;
 };
@@ -68,6 +70,7 @@ const CreateVMWizardFooterComponent: React.FC<CreateVMWizardFooterComponentProps
   goToStep,
   onEdit,
   setActiveNS,
+  isInvalidUserTemplate,
 }) => {
   const [showError, setShowError, checkValidity] = useShowErrorToggler();
   const activeNS = getActiveNamespace();
@@ -118,7 +121,7 @@ const CreateVMWizardFooterComponent: React.FC<CreateVMWizardFooterComponentProps
         const isLastStep = activeStepID === VMWizardTab.RESULT;
 
         const isNextButtonDisabled = isAnyStepLocked;
-        const isReviewButtonDisabled = isAnyStepLocked;
+        const isReviewButtonDisabled = isAnyStepLocked || isInvalidUserTemplate;
 
         const hideBackButton = activeStep.hideBackButton || (isLastStep && isLastStepValid);
         const isBackButtonDisabled = isFirstStep || isAnyStepLocked || isLastTabErrorFatal;
@@ -243,15 +246,23 @@ const CreateVMWizardFooterComponent: React.FC<CreateVMWizardFooterComponentProps
   );
 };
 
-const stateToProps = (state, { wizardReduxID }) => ({
-  goToStep: getGoToStep(state, wizardReduxID),
-  steps: getStepsMetadata(state, wizardReduxID),
-  isLastTabErrorFatal: isLastStepErrorFatal(state, wizardReduxID),
-  isWizardEmpty: _isWizardEmpty(state, wizardReduxID),
-  isCreateTemplate: iGetCommonData(state, wizardReduxID, VMWizardProps.isCreateTemplate),
-  isProviderImport: iGetCommonData(state, wizardReduxID, VMWizardProps.isProviderImport),
-  isSimpleView: iGetCommonData(state, wizardReduxID, VMWizardProps.isSimpleView),
-});
+const stateToProps = (state, { wizardReduxID }) => {
+  const iUserTemplate = iGetCommonData(state, wizardReduxID, VMWizardProps.userTemplate);
+  const isInvalidUserTemplate = iUserTemplate
+    ? !iGetIsLoaded(iUserTemplate) || !!iGetLoadError(iUserTemplate)
+    : false;
+
+  return {
+    goToStep: getGoToStep(state, wizardReduxID),
+    steps: getStepsMetadata(state, wizardReduxID),
+    isLastTabErrorFatal: isLastStepErrorFatal(state, wizardReduxID),
+    isWizardEmpty: _isWizardEmpty(state, wizardReduxID),
+    isCreateTemplate: iGetCommonData(state, wizardReduxID, VMWizardProps.isCreateTemplate),
+    isProviderImport: iGetCommonData(state, wizardReduxID, VMWizardProps.isProviderImport),
+    isSimpleView: iGetCommonData(state, wizardReduxID, VMWizardProps.isSimpleView),
+    isInvalidUserTemplate,
+  };
+};
 
 const dispatchToProps = (dispatch, { wizardReduxID }) => ({
   //  no callback like this can be passed through the Wizard component

diff --git a/frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard.tsx b/frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard.tsx
@@ -38,7 +38,7 @@ import { CREATE_VM, CREATE_VM_TEMPLATE, IMPORT_VM, TabTitleResolver } from './st
 import { vmWizardActions } from './redux/actions';
 import { ActionType } from './redux/types';
 import { getResultInitialState } from './redux/initial-state/result-tab-initial-state';
-import { iGetCommonData } from './selectors/immutable/selectors';
+import { iGetCommonData, iGetName, iGetLoadedCommonData } from './selectors/immutable/selectors';
 import { getExtraWSQueries } from './selectors/selectors';
 import {
   getStepsMetadata,
@@ -58,6 +58,7 @@ import { CloudInitTab } from './tabs/cloud-init-tab/cloud-init-tab';
 import { useStorageClassConfigMapWrapped } from '../../hooks/storage-class-config-map';
 import { ValidTabGuard } from './tabs/valid-tab-guard';
 import { FirehoseResourceEnhanced } from '../../types/custom';
+import { ITemplate } from '../../types/template';
 
 import './create-vm-wizard.scss';
 
@@ -69,6 +70,7 @@ type CreateVMWizardComponentProps = {
   dataIDReferences: IDReferences;
   reduxID: string;
   tabsMetadata: VMWizardTabsMetadata;
+  iUserTemplate: ITemplate;
   onInitialize: () => void;
   onClose: (disposeOnly: boolean) => void;
   createVM: () => void;
@@ -131,14 +133,14 @@ class CreateVMWizardComponent extends React.Component<CreateVMWizardComponentPro
   };
 
   getWizardTitle() {
-    const { isCreateTemplate, isProviderImport } = this.props;
+    const { isCreateTemplate, isProviderImport, iUserTemplate } = this.props;
     if (isCreateTemplate) {
       return CREATE_VM_TEMPLATE;
     }
     if (isProviderImport) {
       return IMPORT_VM;
     }
-    return CREATE_VM;
+    return iUserTemplate ? `${CREATE_VM} from ${iGetName(iUserTemplate)}` : CREATE_VM;
   }
 
   goBackToEditingSteps = () =>
@@ -291,6 +293,7 @@ class CreateVMWizardComponent extends React.Component<CreateVMWizardComponentPro
 const wizardStateToProps = (state, { reduxID }) => ({
   isLastTabErrorFatal: isLastStepErrorFatal(state, reduxID),
   tabsMetadata: getStepsMetadata(state, reduxID),
+  iUserTemplate: iGetLoadedCommonData(state, reduxID, VMWizardProps.userTemplate),
   // fetch data from store to detect and fire changes
   ...[...DetectCommonDataChanges]
     .filter((v) => v !== VMWizardProps.storageClassConfigMap) // passed directly
@@ -307,7 +310,7 @@ const wizardDispatchToProps = (dispatch, props) => ({
         data: {
           isCreateTemplate: props.isCreateTemplate,
           isProviderImport: props.isProviderImport,
-          userTemplateName: props.userTemplateName,
+          isUserTemplateInitialized: false,
           storageClassConfigMap: undefined,
           isSimpleView: props.isSimpleView,
         },
@@ -359,6 +362,8 @@ export const CreateVMWizardPageComponent: React.FC<CreateVMWizardPageComponentPr
 }) => {
   const activeNamespace = match && match.params && match.params.ns;
   const searchParams = new URLSearchParams(location && location.search);
+  const userMode = searchParams.get('mode') || VMWizardMode.VM;
+  const userTemplateName = (userMode === VMWizardMode.VM && searchParams.get('template')) || '';
 
   let resources: FirehoseResourceEnhanced[] = [];
 
@@ -376,11 +381,6 @@ export const CreateVMWizardPageComponent: React.FC<CreateVMWizardPageComponentPr
 
     if (flags[FLAGS.OPENSHIFT]) {
       resources.push(
-        getResource(TemplateModel, {
-          namespace: activeNamespace,
-          prop: VMWizardProps.userTemplates,
-          matchLabels: { [TEMPLATE_TYPE_LABEL]: TEMPLATE_TYPE_VM },
-        }),
         getResource(TemplateModel, {
           namespace: 'openshift',
           prop: VMWizardProps.commonTemplates,
@@ -391,6 +391,28 @@ export const CreateVMWizardPageComponent: React.FC<CreateVMWizardPageComponentPr
           prop: VMWizardProps.openshiftCNVBaseImages,
         }),
       );
+
+      if (userMode === VMWizardMode.TEMPLATE) {
+        resources.push(
+          getResource(TemplateModel, {
+            namespace: activeNamespace,
+            prop: VMWizardProps.userTemplates,
+            matchLabels: { [TEMPLATE_TYPE_LABEL]: TEMPLATE_TYPE_VM },
+          }),
+        );
+      }
+
+      if (userTemplateName) {
+        resources.push(
+          getResource(TemplateModel, {
+            name: userTemplateName,
+            namespace: activeNamespace,
+            prop: VMWizardProps.userTemplate,
+            isList: false,
+            matchLabels: { [TEMPLATE_TYPE_LABEL]: TEMPLATE_TYPE_VM },
+          }),
+        );
+      }
     }
     resources.push(...wsResources);
   }
@@ -402,8 +424,6 @@ export const CreateVMWizardPageComponent: React.FC<CreateVMWizardPageComponentPr
   dataIDReferences[VMWizardProps.activeNamespace] = ['UI', 'activeNamespace'];
   dataIDReferences[VMWizardProps.openshiftFlag] = [featureReducerName, FLAGS.OPENSHIFT];
 
-  const userMode = searchParams.get('mode') || VMWizardMode.VM;
-  const userTemplateName = (userMode === VMWizardMode.VM && searchParams.get('template')) || '';
   const isSimpleView =
     userMode === VMWizardMode.IMPORT &&
     searchParams.get('view')?.toLowerCase() !== VMWizardView.ADVANCED; // normal mode defaults to advanced
@@ -413,7 +433,6 @@ export const CreateVMWizardPageComponent: React.FC<CreateVMWizardPageComponentPr
       <CreateVMWizard
         isCreateTemplate={userMode === VMWizardMode.TEMPLATE}
         isProviderImport={userMode === VMWizardMode.IMPORT}
-        userTemplateName={userTemplateName}
         isSimpleView={isSimpleView}
         dataIDReferences={dataIDReferences}
         storageClassConfigMap={storageClassConfigMap}

diff --git a/...kubevirt-plugin/src/components/create-vm-wizard/error-components/resource-load-errors.tsx b/...kubevirt-plugin/src/components/create-vm-wizard/error-components/resource-load-errors.tsx
@@ -60,14 +60,19 @@ const stateToProps = (state, { wizardReduxID }) => {
         isList: true,
         model: TemplateModel,
       }),
-      asError({
-        state,
-        wizardReduxID,
-        key: VMWizardProps.userTemplates,
-        isList: true,
-        model: TemplateModel,
-      }),
     );
+
+    if (iGetCommonData(state, wizardReduxID, VMWizardProps.userTemplate)) {
+      errors.push(
+        asError({
+          state,
+          wizardReduxID,
+          key: VMWizardProps.userTemplate,
+          isList: false,
+          model: TemplateModel,
+        }),
+      );
+    }
   }
 
   errors.push(

diff --git a/...t-plugin/src/components/create-vm-wizard/redux/initial-state/storage-tab-initial-state.ts b/...t-plugin/src/components/create-vm-wizard/redux/initial-state/storage-tab-initial-state.ts
@@ -35,7 +35,11 @@ import {
   iGetProvisionSource,
   iGetRelevantTemplateSelectors,
 } from '../../selectors/immutable/vm-settings';
-import { iGetLoadedCommonData, iGetName } from '../../selectors/immutable/selectors';
+import {
+  iGetLoadedCommonData,
+  iGetName,
+  iGetCommonData,
+} from '../../selectors/immutable/selectors';
 import { iGetRelevantTemplate } from '../../../../selectors/immutable/template/combined';
 import { iGetPrameterValue } from '../../../../selectors/immutable/common';
 
@@ -161,7 +165,7 @@ export const getNewProvisionSourceStorage = (state: any, id: string): VMWizardSt
     id,
     VMSettingsField.CLONE_COMMON_BASE_DISK_IMAGE,
   );
-  const userTemplate = iGetVmSettingValue(state, id, VMSettingsField.USER_TEMPLATE);
+  const iUserTemplate = iGetCommonData(state, id, VMWizardProps.userTemplate);
 
   if (provisionSource === ProvisionSource.URL) {
     const iStorageClassConfigMap = iGetLoadedCommonData(
@@ -175,7 +179,7 @@ export const getNewProvisionSourceStorage = (state: any, id: string): VMWizardSt
   if (provisionSource === ProvisionSource.CONTAINER) {
     return containerStorage;
   }
-  if (provisionSource === ProvisionSource.DISK && !userTemplate && cloneCommonBaseDiskImage) {
+  if (provisionSource === ProvisionSource.DISK && !iUserTemplate && cloneCommonBaseDiskImage) {
     const iStorageClassConfigMap = iGetLoadedCommonData(
       state,
       id,
@@ -188,8 +192,7 @@ export const getNewProvisionSourceStorage = (state: any, id: string): VMWizardSt
     }
 
     const iCommonTemplates = iGetLoadedCommonData(state, id, VMWizardProps.commonTemplates);
-    const iTemplate =
-      iCommonTemplates && iGetRelevantTemplate(null, iCommonTemplates, relevantOptions);
+    const iTemplate = iCommonTemplates && iGetRelevantTemplate(iCommonTemplates, relevantOptions);
     const pvcName = iGetPrameterValue(iTemplate, TEMPLATE_DATAVOLUME_NAME_PARAMETER);
     const pvcNamespace = iGetPrameterValue(iTemplate, TEMPLATE_DATAVOLUME_NAMESPACE_PARAMETER);
 

diff --git a/...ugin/src/components/create-vm-wizard/redux/initial-state/vm-settings-tab-initial-state.ts b/...ugin/src/components/create-vm-wizard/redux/initial-state/vm-settings-tab-initial-state.ts
@@ -1,12 +1,12 @@
 import { OrderedSet } from 'immutable';
 import { CommonData, VMSettingsField, VMWizardProps } from '../../types';
-import { asDisabled, asHidden, asRequired } from '../../utils/utils';
+import { asHidden, asRequired } from '../../utils/utils';
 import { ProvisionSource } from '../../../../constants/vm/provision-source';
 import { InitialStepStateGetter, VMSettings } from './types';
 
 export const getInitialVmSettings = (data: CommonData): VMSettings => {
   const {
-    data: { isCreateTemplate, isProviderImport, userTemplateName },
+    data: { isCreateTemplate, isProviderImport },
   } = data;
 
   const hiddenByProvider = asHidden(isProviderImport, VMWizardProps.isProviderImport);
@@ -18,20 +18,12 @@ export const getInitialVmSettings = (data: CommonData): VMSettings => {
     : asHidden(false);
   const hiddenByOperatingSystem = asHidden(true, VMSettingsField.OPERATING_SYSTEM);
 
-  const isVM = !isCreateTemplate && !isProviderImport;
-
   const fields = {
     [VMSettingsField.NAME]: {
       isRequired: asRequired(true),
     },
     [VMSettingsField.HOSTNAME]: {},
     [VMSettingsField.DESCRIPTION]: {},
-    [VMSettingsField.USER_TEMPLATE]: {
-      isHidden: hiddenByProviderOrTemplate,
-      isDisabled: asDisabled(!!userTemplateName, VMWizardProps.userTemplateName),
-      initialized: !(isVM && userTemplateName),
-      value: userTemplateName || undefined,
-    },
     [VMSettingsField.OPERATING_SYSTEM]: {
       isRequired: asRequired(true),
     },

diff --git a/frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/redux/internal-actions.ts b/frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/redux/internal-actions.ts
@@ -37,6 +37,14 @@ export const vmWizardInternalActions: VMWizardInternalActions = {
     },
     type: InternalActionType.Update,
   }),
+  [InternalActionType.UpdateCommonDataValue]: (id, path, value) => ({
+    payload: {
+      id,
+      path,
+      value,
+    },
+    type: InternalActionType.UpdateCommonDataValue,
+  }),
   [InternalActionType.UpdateCommonData]: (id, value) => ({
     payload: {
       id,

diff --git a/.../packages/kubevirt-plugin/src/components/create-vm-wizard/redux/main-actions/create-vm.ts b/.../packages/kubevirt-plugin/src/components/create-vm-wizard/redux/main-actions/create-vm.ts
@@ -41,7 +41,7 @@ export const createVMAction = (id: string) => (dispatch, getState) => {
   const isProviderImport = iGetCommonData<boolean>(state, id, VMWizardProps.isProviderImport);
   const openshiftFlag = iGetCommonData<boolean>(state, id, VMWizardProps.openshiftFlag);
 
-  const iUserTemplates = iGetLoadedCommonData(state, id, VMWizardProps.userTemplates);
+  const iUserTemplate = iGetLoadedCommonData(state, id, VMWizardProps.userTemplate);
   const iCommonTemplates = iGetLoadedCommonData(state, id, VMWizardProps.commonTemplates);
 
   const params = {
@@ -50,7 +50,7 @@ export const createVMAction = (id: string) => (dispatch, getState) => {
     vmSettings,
     networks,
     storages,
-    iUserTemplates,
+    iUserTemplate,
     iCommonTemplates,
     namespace,
     openshiftFlag,

diff --git a/frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/redux/reducers.ts b/frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/redux/reducers.ts
@@ -172,6 +172,8 @@ export default (state, action: WizardInternalAction) => {
       return setTabKeys(state, VMWizardTab.RESULT, action);
     case InternalActionType.Update:
       return mergeDeepInSpecial(state, [dialogID], fromJS(payload.value));
+    case InternalActionType.UpdateCommonDataValue:
+      return state.setIn([dialogID, 'commonData', 'data', ...payload.path], payload.value);
     case InternalActionType.UpdateCommonData:
       return setObjectValues(
         setObjectValues(state, [dialogID, 'commonData', 'data'], payload.value.data),

diff --git a/...in/src/components/create-vm-wizard/redux/state-update/prefill-vm-template-state-update.ts b/...in/src/components/create-vm-wizard/redux/state-update/prefill-vm-template-state-update.ts
@@ -1,6 +1,5 @@
 import { createBasicLookup, getName } from '@console/shared/src';
 import { InternalActionType, UpdateOptions } from '../types';
-import { iGetVmSettingValue } from '../../selectors/immutable/vm-settings';
 import {
   CloudInitField,
   VMSettingsField,
@@ -10,12 +9,8 @@ import {
   VMWizardStorage,
   VMWizardStorageType,
 } from '../../types';
-import {
-  iGetCommonData,
-  iGetLoadedCommonData,
-  iGetName,
-} from '../../selectors/immutable/selectors';
-import { immutableListToShallowJS } from '../../../../utils/immutable';
+import { iGetCommonData, iGetLoadedCommonData } from '../../selectors/immutable/selectors';
+import { immutableListToShallowJS, toShallowJS } from '../../../../utils/immutable';
 import { iGetNetworks } from '../../selectors/immutable/networks';
 import { podNetwork } from '../initial-state/networks-tab-initial-state';
 import { vmWizardInternalActions } from '../internal-actions';
@@ -66,17 +61,10 @@ import { generateDataVolumeName } from '../../../../utils';
 export const prefillVmTemplateUpdater = ({ id, dispatch, getState }: UpdateOptions) => {
   const state = getState();
 
-  const userTemplateName = iGetVmSettingValue(state, id, VMSettingsField.USER_TEMPLATE);
-
-  const iUserTemplates = iGetLoadedCommonData(state, id, VMWizardProps.userTemplates);
+  const iUserTemplate = iGetLoadedCommonData(state, id, VMWizardProps.userTemplate);
   const isProviderImport = iGetCommonData(state, id, VMWizardProps.isProviderImport);
   const activeNamespace = iGetCommonData(state, id, VMWizardProps.activeNamespace);
 
-  const iUserTemplate =
-    userTemplateName && iUserTemplates
-      ? iUserTemplates.find((template) => iGetName(template) === userTemplateName)
-      : null;
-
   let isCloudInitForm = null;
   const vmSettingsUpdate = {
     // ensure the the form is reset when "None" template is selected
@@ -112,7 +100,7 @@ export const prefillVmTemplateUpdater = ({ id, dispatch, getState }: UpdateOptio
   }
 
   if (iUserTemplate) {
-    const userTemplate = iUserTemplate.toJS();
+    const userTemplate = toShallowJS(iUserTemplate);
 
     const vm = selectVM(userTemplate);
     const dataVolumes = immutableListToShallowJS<V1alpha1DataVolume>(