From 335ea3c516b07886a8d453e60eda9611b75638ca Mon Sep 17 00:00:00 2001 From: yaacov Date: Tue, 18 Jun 2024 17:59:07 +0300 Subject: [PATCH] Allow to create new namespaces Signed-off-by: yaacov --- .../en/plugin__forklift-console-plugin.json | 3 +- .../FilterableSelect/FilterableSelect.tsx | 12 ++ .../migrate/components/PlansCreateForm.tsx | 177 ++++++------------ .../views/migrate/reducer/helpers.ts | 14 +- .../views/migrate/reducer/reducer.ts | 1 - 5 files changed, 76 insertions(+), 131 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 index ae8fb3b11..03a42fdab 100644 --- a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json +++ b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json @@ -83,6 +83,7 @@ "Create a migration plan and select VMs from the source provider for migration.": "Create a migration plan and select VMs from the source provider for migration.", "Create migration plan": "Create migration plan", "Create NetworkMap": "Create NetworkMap", + "Create new namespace:": "Create new namespace:", "Create new provider": "Create new provider", "Create Plan": "Create Plan", "Create provider": "Create provider", @@ -144,8 +145,6 @@ "Edit provider web UI link": "Edit provider web UI link", "Edit Snapshot polling interval (seconds)": "Edit Snapshot polling interval (seconds)", "Edit StorageMap": "Edit StorageMap", - "Edit target namespace": "Edit target namespace", - "Edit target provider": "Edit target provider", "Edit URL": "Edit URL", "Edit VDDK init image": "Edit VDDK init image", "Empty": "Empty", diff --git a/packages/forklift-console-plugin/src/components/FilterableSelect/FilterableSelect.tsx b/packages/forklift-console-plugin/src/components/FilterableSelect/FilterableSelect.tsx index e22267a82..ea698c1fb 100644 --- a/packages/forklift-console-plugin/src/components/FilterableSelect/FilterableSelect.tsx +++ b/packages/forklift-console-plugin/src/components/FilterableSelect/FilterableSelect.tsx @@ -31,6 +31,12 @@ export interface FilterableSelectProps { noResultFoundLabel?: ReactNode; /** Label to display for the option to create a new item */ createNewOptionLabel?: ReactNode; + /** Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. */ + isDisabled?: boolean; + /** Indicates if the menu should be without the outer box-shadow */ + isPlain?: boolean; + /** Indicates if the menu should be scrollable */ + isScrollable?: boolean; } /** @@ -48,6 +54,9 @@ export const FilterableSelect: React.FunctionComponent = placeholder = 'Select item', noResultFoundLabel = 'No results found', createNewOptionLabel = 'Create new option:', + isDisabled = false, + isPlain = false, + isScrollable = false, }) => { const [isOpen, setIsOpen] = React.useState(false); const [selectedItem, setSelectedItem] = React.useState(value); @@ -265,6 +274,9 @@ export const FilterableSelect: React.FunctionComponent = setInputValue(selectedItem); }} toggle={toggle} + aria-disabled={isDisabled} + isPlain={isPlain} + isScrollable={isScrollable} > {selectOptions.map((option, index) => ( diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx index b9a3dc81c..f6d5b1ef6 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx +++ b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx @@ -1,7 +1,7 @@ import React, { ReactNode, useState } from 'react'; +import { FilterableSelect } from 'src/components'; import SectionHeading from 'src/components/headers/SectionHeading'; import { useForkliftTranslation } from 'src/utils/i18n'; -import { isProviderLocalOpenshift } from 'src/utils/resources'; import { FormGroupWithHelpText } from '@kubev2v/common'; import { @@ -141,8 +141,6 @@ export const PlansCreateForm = ({ } = state; const [isNameEdited, setIsNameEdited] = useState(true); - const [isTargetProviderEdited, setIsTargetProviderEdited] = useState(false); - const [isTargetNamespaceEdited, setIsTargetNamespaceEdited] = useState(false); const networkMessages = buildNetworkMessages(t); const storageMessages = buildStorageMessages(t); @@ -215,124 +213,71 @@ export const PlansCreateForm = ({ className="forklift--create-vm-migration-plan--section-header" /> - {isTargetProviderEdited || - validation.targetProvider === 'error' || - !plan.spec.provider?.destination ? ( -
- - dispatch(setPlanTargetProvider(value))} - validated={validation.targetProvider} - id="targetProvider" - isDisabled={flow.editingDone} - > - {[ - , - ...availableProviders - .filter(getIsTarget) - .map((provider, index) => ( - - )), - ]} - - -
- ) : ( - +
+ setIsTargetProviderEdited(true)} - isDisabled={flow.editingDone} - /> - )} - {isTargetNamespaceEdited || - validation.targetNamespace === 'error' || - !plan.spec.targetNamespace ? ( - - + dispatch(setPlanTargetProvider(value))} + id="targetProvider" + isDisabled={flow.editingDone} > - dispatch(setPlanTargetNamespace(value))} - validated={validation.targetNamespace} - id="targetNamespace" - isDisabled={flow.editingDone} - > - {[ - , - ...availableTargetNamespaces.map((ns, index) => ( + {[ + , + ...availableProviders + .filter(getIsTarget) + .map((provider, index) => ( )), - ]} - - - - ) : ( - p?.metadata?.name === plan.spec.provider?.destination?.name, - ), - )} - /> - } - ariaEditLabel={t('Edit target namespace')} - onEdit={() => setIsTargetNamespaceEdited(true)} - isDisabled={flow.editingDone} - /> - )} + ]} + +
+ + +
+ + ({ + itemId: ns?.name, + isDisabled: + namespacesUsedBySelectedVms.includes(ns?.name) && + plan.spec.provider?.destination?.name === plan.spec.provider.source.name, + children: ns?.name, + }))} + value={plan.spec.targetNamespace} + onSelect={(value) => dispatch(setPlanTargetNamespace(value as string))} + isDisabled={flow.editingDone} + isScrollable + canCreate + createNewOptionLabel={t('Create new namespace:')} + /> + +
? 'success' : 'error'; -export const validateTargetNamespace = ( - namespace: string, - availableNamespaces: OpenShiftNamespace[], - alreadyInUseBySelectedVms: boolean, -) => - validateK8sName(namespace) && - availableNamespaces?.find((n) => n.name === namespace) && - !alreadyInUseBySelectedVms - ? 'success' - : 'error'; +export const validateTargetNamespace = (namespace: string, alreadyInUseBySelectedVms: boolean) => + !!namespace && validateK8sName(namespace) && !alreadyInUseBySelectedVms ? 'success' : 'error'; export const setTargetProvider = ( draft: Draft, @@ -114,7 +105,6 @@ export const setTargetNamespace = ( plan.spec.targetNamespace = targetNamespace; draft.validation.targetNamespace = validateTargetNamespace( targetNamespace, - draft.existingResources.targetNamespaces, alreadyInUseBySelectedVms({ namespace: targetNamespace, namespacesUsedBySelectedVms, diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/reducer/reducer.ts b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/reducer/reducer.ts index 2b2615e7c..e522a4213 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/reducer/reducer.ts +++ b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/reducer/reducer.ts @@ -168,7 +168,6 @@ const handlers: { validation.targetNamespace = validateTargetNamespace( plan.spec.targetNamespace, - availableTargetNamespaces, alreadyInUse(plan.spec.targetNamespace), ); if (validation.targetNamespace === 'success') {