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 3, 2020 · fd79b5a · fd79b5a
1 parent 20c1c18
commit fd79b5a
Show file tree

Hide file tree

Showing 23 changed files with 172 additions and 229 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 { iGetUserTemplateName, iGetUserTemplateValidity } from './selectors/immutable/template';
 
 import './create-vm-wizard-footer.scss';
 
@@ -54,6 +55,8 @@ type CreateVMWizardFooterComponentProps = {
   isCreateTemplate: boolean;
   isProviderImport: boolean;
   isSimpleView: boolean;
+  userTemplateName: string;
+  isUserTemplateValid: boolean;
   onEdit: (activeStepID: VMWizardTab) => void;
   setActiveNS: (ns: string) => void;
 };
@@ -65,6 +68,8 @@ const CreateVMWizardFooterComponent: React.FC<CreateVMWizardFooterComponentProps
   isCreateTemplate,
   isProviderImport,
   isSimpleView,
+  userTemplateName,
+  isUserTemplateValid,
   goToStep,
   onEdit,
   setActiveNS,
@@ -89,6 +94,8 @@ const CreateVMWizardFooterComponent: React.FC<CreateVMWizardFooterComponentProps
         const areMainTabsHidden = VM_WIZARD_DIFFICULT_TABS.some((tab) => steps[tab].isHidden);
         const isLastStepValid = steps[VMWizardTab.RESULT].isValid;
 
+        const isValidUserTemplate = !userTemplateName || (userTemplateName && isUserTemplateValid);
+
         const { hasAllRequiredFilled, error: stepError } = steps[activeStepID];
         const isValid =
           activeStepID === VMWizardTab.REVIEW
@@ -117,11 +124,12 @@ const CreateVMWizardFooterComponent: React.FC<CreateVMWizardFooterComponentProps
         const isFinishingStep = [VMWizardTab.REVIEW, VMWizardTab.RESULT].includes(activeStepID);
         const isLastStep = activeStepID === VMWizardTab.RESULT;
 
-        const isNextButtonDisabled = isAnyStepLocked;
-        const isReviewButtonDisabled = isAnyStepLocked;
+        const isNextButtonDisabled = isAnyStepLocked || !isValidUserTemplate;
+        const isReviewButtonDisabled = isAnyStepLocked || !isValidUserTemplate;
 
         const hideBackButton = activeStep.hideBackButton || (isLastStep && isLastStepValid);
-        const isBackButtonDisabled = isFirstStep || isAnyStepLocked || isLastTabErrorFatal;
+        const isBackButtonDisabled =
+          isFirstStep || isAnyStepLocked || isLastTabErrorFatal || !isValidUserTemplate;
 
         return (
           <footer className={css(styles.wizardFooter)}>
@@ -249,6 +257,8 @@ const stateToProps = (state, { wizardReduxID }) => ({
   isLastTabErrorFatal: isLastStepErrorFatal(state, wizardReduxID),
   isWizardEmpty: _isWizardEmpty(state, wizardReduxID),
   isCreateTemplate: iGetCommonData(state, wizardReduxID, VMWizardProps.isCreateTemplate),
+  userTemplateName: iGetUserTemplateName(state, wizardReduxID),
+  isUserTemplateValid: iGetUserTemplateValidity(state, wizardReduxID),
   isProviderImport: iGetCommonData(state, wizardReduxID, VMWizardProps.isProviderImport),
   isSimpleView: iGetCommonData(state, wizardReduxID, VMWizardProps.isSimpleView),
 });

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
@@ -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 { iGetUserTemplateName } from './selectors/immutable/template';
 
 import './create-vm-wizard.scss';
 
@@ -69,6 +70,7 @@ type CreateVMWizardComponentProps = {
   dataIDReferences: IDReferences;
   reduxID: string;
   tabsMetadata: VMWizardTabsMetadata;
+  userTemplateName: string;
   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, userTemplateName } = this.props;
     if (isCreateTemplate) {
       return CREATE_VM_TEMPLATE;
     }
     if (isProviderImport) {
       return IMPORT_VM;
     }
-    return CREATE_VM;
+    return userTemplateName ? `${CREATE_VM} from ${userTemplateName} template` : 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),
+  userTemplateName: iGetUserTemplateName(state, reduxID),
   // fetch data from store to detect and fire changes
   ...[...DetectCommonDataChanges]
     .filter((v) => v !== VMWizardProps.storageClassConfigMap) // passed directly
@@ -307,7 +310,11 @@ const wizardDispatchToProps = (dispatch, props) => ({
         data: {
           isCreateTemplate: props.isCreateTemplate,
           isProviderImport: props.isProviderImport,
-          userTemplateName: props.userTemplateName,
+          userTemplateName: {
+            value: props.userTemplateName,
+            initialized: false,
+            isValid: true,
+          },
           storageClassConfigMap: undefined,
           isSimpleView: props.isSimpleView,
         },

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
@@ -10,6 +10,32 @@ import { K8sKind } from '@console/internal/module/k8s';
 import { TemplateModel } from '@console/internal/models';
 import { DataVolumeModel, VirtualMachineModel } from '../../../models';
 import { getExtraWSQueries } from '../selectors/selectors';
+import { iGetUserTemplateName, iGetUserTemplateValidity } from '../selectors/immutable/template';
+
+const userTemplateError = (state: any, wizardReduxID: string): Error => {
+  const uTemplatesFirehoseResult = iGetCommonData(
+    state,
+    wizardReduxID,
+    VMWizardProps.commonTemplates,
+  );
+  const uTemplatesLoadError = iGet(uTemplatesFirehoseResult, 'loadError');
+  const uTempatesLoaded = iGet(uTemplatesFirehoseResult, 'loaded');
+  if (uTemplatesLoadError || !uTempatesLoaded) {
+    return null;
+  }
+
+  const userTemplateName = iGetUserTemplateName(state, wizardReduxID);
+  if (userTemplateName && !iGetUserTemplateValidity(state, wizardReduxID)) {
+    return {
+      title: 'Invalid template',
+      message: `Template ${userTemplateName} does not exist`,
+      key: VMWizardProps.userTemplateName,
+      variant: AlertVariant.danger,
+    };
+  }
+
+  return null;
+};
 
 const asError = ({
   state,
@@ -67,6 +93,7 @@ const stateToProps = (state, { wizardReduxID }) => {
         isList: true,
         model: TemplateModel,
       }),
+      userTemplateError(state, wizardReduxID),
     );
   }
 

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
@@ -37,7 +37,8 @@ import {
 } from '../../selectors/immutable/vm-settings';
 import { iGetLoadedCommonData, iGetName } from '../../selectors/immutable/selectors';
 import { iGetRelevantTemplate } from '../../../../selectors/immutable/template/combined';
-import { iGetPrameterValue } from '../../../../selectors/immutable/common';
+import { iGetPrameterValue, iGetAnnotation } from '../../../../selectors/immutable/common';
+import { iGetUserTemplateName } from '../../selectors/immutable/template';
 
 const ROOT_DISK_NAME = 'rootdisk';
 const WINTOOLS_DISK_NAME = 'windows-guest-tools';
@@ -161,7 +162,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 userTemplate = iGetUserTemplateName(state, id);
 
   if (provisionSource === ProvisionSource.URL) {
     const iStorageClassConfigMap = iGetLoadedCommonData(

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,27 @@ export const vmWizardInternalActions: VMWizardInternalActions = {
     },
     type: InternalActionType.Update,
   }),
+  [InternalActionType.UpdateUserTemplateName]: (id, value) => ({
+    payload: {
+      id,
+      value,
+    },
+    type: InternalActionType.UpdateUserTemplateName,
+  }),
+  [InternalActionType.UpdateUserTemplateInit]: (id, value) => ({
+    payload: {
+      id,
+      value,
+    },
+    type: InternalActionType.UpdateUserTemplateInit,
+  }),
+  [InternalActionType.UpdateUserTemplateValidity]: (id, value) => ({
+    payload: {
+      id,
+      value,
+    },
+    type: InternalActionType.UpdateUserTemplateValidity,
+  }),
   [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
@@ -15,6 +15,7 @@ import { iGetStorages } from '../../selectors/immutable/storage';
 import { iGetImportProviders } from '../../selectors/immutable/import-providers';
 import { iGetCommonData, iGetLoadedCommonData } from '../../selectors/immutable/selectors';
 import { ImportProvidersSettings, VMSettings } from '../initial-state/types';
+import { iGetUserTemplateName } from '../../selectors/immutable/template';
 
 export const createVMAction = (id: string) => (dispatch, getState) => {
   dispatch(
@@ -43,6 +44,7 @@ export const createVMAction = (id: string) => (dispatch, getState) => {
 
   const iUserTemplates = iGetLoadedCommonData(state, id, VMWizardProps.userTemplates);
   const iCommonTemplates = iGetLoadedCommonData(state, id, VMWizardProps.commonTemplates);
+  const userTemplateName = iGetUserTemplateName(state, id);
 
   const params = {
     enhancedK8sMethods,
@@ -56,6 +58,7 @@ export const createVMAction = (id: string) => (dispatch, getState) => {
     openshiftFlag,
     isTemplate: isCreateTemplate,
     isProviderImport,
+    userTemplateName,
   };
 
   const create = isCreateTemplate ? createVMTemplate : _createVM;

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
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import { fromJS, Map as ImmutableMap } from 'immutable';
-import { ImportProvidersField, VMWizardTab } from '../types';
+import { ImportProvidersField, VMWizardTab, VMWizardProps } from '../types';
 import { iGet } from '../../../utils/immutable';
 import { DeviceType } from '../../../constants/vm';
 import { InternalActionType, WizardInternalAction } from './types';
@@ -172,6 +172,21 @@ export default (state, action: WizardInternalAction) => {
       return setTabKeys(state, VMWizardTab.RESULT, action);
     case InternalActionType.Update:
       return mergeDeepInSpecial(state, [dialogID], fromJS(payload.value));
+    case InternalActionType.UpdateUserTemplateName:
+      return state.setIn(
+        [dialogID, 'commonData', 'data', VMWizardProps.userTemplateName, 'value'],
+        payload.value,
+      );
+    case InternalActionType.UpdateUserTemplateInit:
+      return state.setIn(
+        [dialogID, 'commonData', 'data', VMWizardProps.userTemplateName, 'initialized'],
+        payload.value,
+      );
+    case InternalActionType.UpdateUserTemplateValidity:
+      return state.setIn(
+        [dialogID, 'commonData', 'data', VMWizardProps.userTemplateName, 'isValid'],
+        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,
@@ -62,11 +61,12 @@ import { selectVM } from '../../../../selectors/vm-template/basic';
 import { convertToHighestUnitFromUnknown } from '../../../form/size-unit-utils';
 import { isCustomFlavor, toUIFlavor } from '../../../../selectors/vm-like/flavor';
 import { generateDataVolumeName } from '../../../../utils';
+import { iGetUserTemplateName } from '../../selectors/immutable/template';
 
 export const prefillVmTemplateUpdater = ({ id, dispatch, getState }: UpdateOptions) => {
   const state = getState();
 
-  const userTemplateName = iGetVmSettingValue(state, id, VMSettingsField.USER_TEMPLATE);
+  const userTemplateName = iGetUserTemplateName(state, id);
 
   const iUserTemplates = iGetLoadedCommonData(state, id, VMWizardProps.userTemplates);
   const isProviderImport = iGetCommonData(state, id, VMWizardProps.isProviderImport);