[MTV-1880] Fix 'Project' select issues, add 'Plan name' back to step …

…1 of migration plan wizard Signed-off-by: Jeff Puzzo <[email protected]>
kubev2v · Jan 13, 2025 · 5b5f5d5 · 5b5f5d5
1 parent cc62d29
commit 5b5f5d5
Show file tree

Hide file tree

Showing 16 changed files with 168 additions and 146 deletions.
diff --git a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json
@@ -158,7 +158,6 @@
   "Edit migration plan transfer network": "Edit migration plan transfer network",
   "Edit NetworkMap": "Edit NetworkMap",
   "Edit Plan": "Edit Plan",
-  "Edit plan name": "Edit plan name",
   "Edit Precopy interval (minutes)": "Edit Precopy interval (minutes)",
   "Edit Provider": "Edit Provider",
   "Edit Provider Credentials": "Edit Provider Credentials",

diff --git a/...s/create/components/ProjectNameSelect.tsx → ...c/components/common/ProjectNameSelect.tsx b/...s/create/components/ProjectNameSelect.tsx → ...c/components/common/ProjectNameSelect.tsx
diff --git a/packages/forklift-console-plugin/src/components/common/index.ts b/packages/forklift-console-plugin/src/components/common/index.ts
@@ -0,0 +1 @@
+export * from './ProjectNameSelect';
diff --git a/packages/forklift-console-plugin/src/components/index.ts b/packages/forklift-console-plugin/src/components/index.ts
@@ -1,6 +1,7 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
 export * from './actions';
 export * from './cells';
+export * from './common';
 export * from './ConsoleTimestamp';
 export * from './empty-states';
 export * from './FilterableSelect';

diff --git a/packages/forklift-console-plugin/src/modules/Plans/components/PlansAddButton.tsx b/packages/forklift-console-plugin/src/modules/Plans/components/PlansAddButton.tsx
@@ -8,26 +8,28 @@ import { useForkliftTranslation } from 'src/utils/i18n';
 import { PlanModelRef } from '@kubev2v/types';
 import { Button } from '@patternfly/react-core';
 
-export const PlansAddButton: React.FC<{ namespace: string; dataTestId?: string }> = ({
-  namespace,
-  dataTestId,
-}) => {
+interface PlansAddButtonProps {
+  namespace?: string;
+  dataTestId?: string;
+}
+
+export const PlansAddButton: React.FC<PlansAddButtonProps> = ({ namespace, dataTestId }) => {
   const { t } = useForkliftTranslation();
   const history = useHistory();
   const { setData } = useCreateVmMigrationData();
   const hasSufficientProviders = useHasSufficientProviders(namespace);
 
-  const PlansListURL = getResourceUrl({
+  const plansListURL = getResourceUrl({
     reference: PlanModelRef,
-    namespace: namespace,
+    namespace,
     namespaced: namespace !== undefined,
   });
 
   const onClick = () => {
     setData({
       selectedVms: [],
     });
-    history.push(`${PlansListURL}/~new`);
+    history.push(`${plansListURL}/~new`);
   };
 
   return (

diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/PlanCreatePage.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/create/PlanCreatePage.tsx
@@ -21,7 +21,6 @@ export const PlanCreatePage: React.FC<{ namespace: string }> = ({ namespace }) =
   // Get optional initial state context
   const { data } = useCreateVmMigrationData();
   const history = useHistory();
-  const startAtStep = data?.provider !== undefined ? 2 : 1;
   const [activeNamespace, setActiveNamespace] = useActiveNamespace();
   const defaultNamespace = process?.env?.DEFAULT_NAMESPACE || 'default';
   const projectName =
@@ -40,7 +39,7 @@ export const PlanCreatePage: React.FC<{ namespace: string }> = ({ namespace }) =
     groupVersionKind: ProviderModelGroupVersionKind,
     namespaced: true,
     isList: true,
-    namespace,
+    namespace: namespace || projectName,
   });
 
   const selectedProvider =
@@ -59,6 +58,13 @@ export const PlanCreatePage: React.FC<{ namespace: string }> = ({ namespace }) =
   });
   useSaveEffect(state, dispatch);
 
+  const isFirstStepValid =
+    state.underConstruction.plan.metadata.name &&
+    state.validation.planName !== 'error' &&
+    state.underConstruction.projectName &&
+    state.validation.projectName !== 'error' &&
+    filterState?.selectedVMs?.length > 0;
+
   const steps = [
     {
       id: 'step-1',
@@ -74,7 +80,7 @@ export const PlanCreatePage: React.FC<{ namespace: string }> = ({ namespace }) =
           selectedProvider={selectedProvider}
         />
       ),
-      enableNext: filterState?.selectedVMs?.length > 0,
+      enableNext: isFirstStepValid,
     },
     {
       id: 'step-2',
@@ -93,7 +99,7 @@ export const PlanCreatePage: React.FC<{ namespace: string }> = ({ namespace }) =
           Object.values(state?.validation || []).some((validation) => validation === 'error') ||
           state?.validation?.planName === 'default'
         ),
-      canJumpTo: filterState?.selectedVMs?.length > 0,
+      canJumpTo: isFirstStepValid,
       nextButtonText: 'Create migration plan',
     },
   ];
@@ -116,7 +122,6 @@ export const PlanCreatePage: React.FC<{ namespace: string }> = ({ namespace }) =
             dispatch(startCreate());
           }}
           onClose={() => history.goBack()}
-          startAtStep={startAtStep}
         />
       </PageSection>
     </>

diff --git a/...ages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanCreateForm.tsx b/...ages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanCreateForm.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
+import { ProjectNameSelect, useProjectNameSelectOptions } from 'src/components/common';
 import { SelectableCard } from 'src/modules/Providers/utils/components/Gallery/SelectableCard';
 import { SelectableGallery } from 'src/modules/Providers/utils/components/Gallery/SelectableGallery';
 import { VmData } from 'src/modules/Providers/views';
 import { useCreateVmMigrationData } from 'src/modules/Providers/views/migrate';
 import {
   PageAction,
+  setPlanName,
   setProjectName as setProjectNameAction,
 } from 'src/modules/Providers/views/migrate/reducer/actions';
 import { CreateVmMigrationPageState } from 'src/modules/Providers/views/migrate/types';
@@ -19,7 +21,8 @@ import { PlanCreatePageState } from '../states';
 import { ChipsToolbarProviders } from './ChipsToolbarProviders';
 import { createProviderCardItems } from './createProviderCardItems';
 import { FiltersToolbarProviders } from './FiltersToolbarProviders';
-import { ProjectNameSelect } from './ProjectNameSelect';
+import { PlanNameTextField } from './PlanNameTextField';
+import { ProviderCardEmptyState } from './ProvidersEmptyState';
 
 export type PlanCreateFormProps = {
   providers: V1beta1Provider[];
@@ -40,35 +43,48 @@ export type PlanCreateFormProps = {
 export const PlanCreateForm: React.FC<PlanCreateFormProps> = ({
   providers,
   filterState,
+  state,
   projectName,
   filterDispatch,
   dispatch,
 }) => {
   const { t } = useForkliftTranslation();
   const { data, setData } = useCreateVmMigrationData();
-  const providerCardItems = createProviderCardItems(providers);
-  const providerNamespaces = [
-    ...new Set(providers.map((provider) => provider.metadata?.namespace)),
-  ];
+  const projectNameOptions = useProjectNameSelectOptions(projectName);
+  const providerCardItems = createProviderCardItems(
+    providers.filter((provider) => provider.metadata.namespace === projectName),
+  );
 
-  const onChange = (id: string) => {
+  const onProviderChange = React.useCallback((id: string) => {
     filterDispatch({ type: 'SELECT_PROVIDER', payload: id || '' });
-  };
+  }, []);
 
   return (
     <div className="forklift-create-provider-edit-section">
       <Form isWidthLimited className="forklift-section-secret-edit">
+        <PlanNameTextField
+          isRequired
+          value={state.underConstruction.plan.metadata.name}
+          validated={state.validation.planName}
+          isDisabled={state.flow.editingDone}
+          onChange={(_, value) => {
+            dispatch(setPlanName(value?.trim() ?? ''));
+            setData({ ...data, planName: value });
+          }}
+        />
+
         <ProjectNameSelect
           value={projectName}
-          options={providerNamespaces.map((namespace) => ({
-            value: namespace,
-            content: namespace,
-          }))}
+          options={projectNameOptions}
           onSelect={(value) => {
             dispatch(setProjectNameAction(value));
             setData({ ...data, projectName: value });
+
+            // Reset provider when target project name changes
+            if (value !== projectName) {
+              onProviderChange('');
+            }
           }}
-          isDisabled={!providers.length}
           popoverHelpContent={
             <ForkliftTrans>
               The project that your migration plan will be created in. Only projects with providers
@@ -77,47 +93,51 @@ export const PlanCreateForm: React.FC<PlanCreateFormProps> = ({
           }
         />
 
-        <FormGroupWithHelpText fieldId="type">
-          <FiltersToolbarProviders
-            className="forklift--create-plan--filters-toolbar"
-            filterState={filterState}
-            filterDispatch={filterDispatch}
-          />
-          <ChipsToolbarProviders filterState={filterState} filterDispatch={filterDispatch} />
-
-          {filterState.selectedProviderUID ? (
-            <Flex>
-              <FlexItem className="forklift--create-provider-edit-card-selected">
-                <SelectableCard
-                  title={providerCardItems[filterState.selectedProviderUID]?.title}
-                  titleLogo={providerCardItems[filterState.selectedProviderUID]?.logo}
-                  onChange={() => onChange('')}
-                  isSelected
-                  isCompact
-                  content={
-                    <Tooltip
-                      content={
-                        <div>{t('Click to select a different provider from the list.')}</div>
-                      }
-                    >
-                      <HelperText>
-                        <HelperTextItem variant="indeterminate">
-                          {t('Click to unselect.')}
-                        </HelperTextItem>
-                      </HelperText>
-                    </Tooltip>
-                  }
-                />
-              </FlexItem>
-            </Flex>
-          ) : (
-            <SelectableGallery
-              selectedID={filterState.selectedProviderUID}
-              items={providerCardItems}
-              onChange={onChange}
+        {Object.values(providerCardItems).length ? (
+          <FormGroupWithHelpText fieldId="type">
+            <FiltersToolbarProviders
+              className="forklift--create-plan--filters-toolbar"
+              filterState={filterState}
+              filterDispatch={filterDispatch}
             />
-          )}
-        </FormGroupWithHelpText>
+            <ChipsToolbarProviders filterState={filterState} filterDispatch={filterDispatch} />
+
+            {filterState.selectedProviderUID ? (
+              <Flex>
+                <FlexItem className="forklift--create-provider-edit-card-selected">
+                  <SelectableCard
+                    title={providerCardItems[filterState.selectedProviderUID]?.title}
+                    titleLogo={providerCardItems[filterState.selectedProviderUID]?.logo}
+                    onChange={() => onProviderChange('')}
+                    isSelected
+                    isCompact
+                    content={
+                      <Tooltip
+                        content={
+                          <div>{t('Click to select a different provider from the list.')}</div>
+                        }
+                      >
+                        <HelperText>
+                          <HelperTextItem variant="indeterminate">
+                            {t('Click to unselect.')}
+                          </HelperTextItem>
+                        </HelperText>
+                      </Tooltip>
+                    }
+                  />
+                </FlexItem>
+              </Flex>
+            ) : (
+              <SelectableGallery
+                selectedID={filterState.selectedProviderUID}
+                items={providerCardItems}
+                onChange={onProviderChange}
+              />
+            )}
+          </FormGroupWithHelpText>
+        ) : (
+          <ProviderCardEmptyState projectName={projectName} />
+        )}
       </Form>
     </div>
   );

diff --git a/...s/forklift-console-plugin/src/modules/Plans/views/create/components/PlanNameTextField.tsx b/...s/forklift-console-plugin/src/modules/Plans/views/create/components/PlanNameTextField.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Validation } from 'src/modules/Providers';
-import { ForkliftTrans, useForkliftTranslation } from 'src/utils';
+import { useForkliftTranslation } from 'src/utils';
 
 import { FormGroupWithHelpText } from '@kubev2v/common';
 import { TextInput } from '@patternfly/react-core';
@@ -30,10 +30,8 @@ export const PlanNameTextField: React.FC<PlanNameTextFieldProps> = ({
       fieldId="planName"
       {...(isUpdated && {
         validated: validated,
-        helperTextInvalid: (
-          <ForkliftTrans>
-            Name is required and must be a unique within a namespace and valid Kubernetes name.
-          </ForkliftTrans>
+        helperTextInvalid: t(
+          'Name is required and must be a unique within a namespace and valid Kubernetes name.',
         ),
       })}
     >

diff --git a/...forklift-console-plugin/src/modules/Plans/views/create/components/ProvidersEmptyState.tsx b/...forklift-console-plugin/src/modules/Plans/views/create/components/ProvidersEmptyState.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { ProvidersAddButton } from 'src/modules/Providers';
+import { ForkliftTrans, useForkliftTranslation } from 'src/utils';
+
+import {
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
+  EmptyStateIcon,
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+interface ProviderCardEmptyStateProps {
+  projectName: string;
+}
+
+export const ProviderCardEmptyState: React.FC<ProviderCardEmptyStateProps> = ({ projectName }) => {
+  const { t } = useForkliftTranslation();
+
+  return (
+    <EmptyState>
+      <EmptyStateHeader
+        titleText={t('No providers found')}
+        headingLevel="h4"
+        icon={<EmptyStateIcon icon={SearchIcon} />}
+      />
+      <EmptyStateBody>
+        <ForkliftTrans>
+          {projectName} project does not contain any providers. To select a source provider, create
+          a provider in this project or select a different project.
+        </ForkliftTrans>
+      </EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <ProvidersAddButton buttonProps={{ variant: 'link' }} />
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
+};
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/list/PlansListPage.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/list/PlansListPage.tsx
@@ -156,9 +156,7 @@ const PlansListPage: React.FC<{
 
   const EmptyState = (
     <EmptyState_
-      AddButton={
-        <PlansAddButton namespace={namespace} dataTestId="add-network-map-button-empty-state" />
-      }
+      AddButton={<PlansAddButton dataTestId="add-network-map-button-empty-state" />}
       namespace={namespace}
     />
   );
@@ -167,11 +165,7 @@ const PlansListPage: React.FC<{
     <ModalHOC>
       <StandardPage
         data-testid="network-maps-list"
-        addButton={
-          permissions.canCreate && (
-            <PlansAddButton namespace={namespace} dataTestId="add-network-map-button" />
-          )
-        }
+        addButton={permissions.canCreate && <PlansAddButton dataTestId="add-network-map-button" />}
         dataSource={[data || [], plansLoaded, plansLoadError]}
         RowMapper={PlanRow}
         fieldsMetadata={fieldsMetadataFactory(t)}

diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/ProvidersCreatePage.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/ProvidersCreatePage.tsx
@@ -182,7 +182,15 @@ export const ProvidersCreatePage: React.FC<{
     // try to create a provider with secret
     // add spec.secret
     try {
-      provider = await createProvider(state.newProvider, secret);
+      provider = await createProvider(
+        {
+          ...state.newProvider,
+          ...(state.projectName && {
+            metadata: { ...state.newProvider.metadata, namespace: state.projectName },
+          }),
+        },
+        secret,
+      );
     } catch (err) {
       dispatch({
         type: 'SET_API_ERROR',