Merge pull request #1234 from yaacov/allow-edit-namespace-create-and-…

…filter 🐞 Allow to add and filter namespace when editing a plan
kubev2v · Jun 24, 2024 · 7e13ac0 · 7e13ac0
2 parents 5e4f923 + 6f01628
commit 7e13ac0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 25 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
@@ -278,6 +278,7 @@
   "No decryption keys defined": "No decryption keys defined",
   "No inventory data available.": "No inventory data available.",
   "No Mapping found.": "No Mapping found.",
+  "No namespace selected": "No namespace selected",
   "No NetworkMaps found.": "No NetworkMaps found.",
   "No networks in this category": "No networks in this category",
   "No owner": "No owner",

diff --git a/...ils/components/SettingsSection/modals/EditPlanTargetNamespace/EditPlanTargetNamespace.tsx b/...ils/components/SettingsSection/modals/EditPlanTargetNamespace/EditPlanTargetNamespace.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { useProviderInventory, useToggle } from 'src/modules/Providers/hooks';
+import { FilterableSelect } from 'src/components';
+import { useProviderInventory } from 'src/modules/Providers/hooks';
 import {
   EditModal,
   EditModalProps,
@@ -16,7 +17,7 @@ import {
   V1beta1Provider,
 } from '@kubev2v/types';
 import { K8sModel, k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core';
+import { Text } from '@patternfly/react-core';
 
 const onConfirm: OnConfirmHookType = async ({ resource, model, newValue }) => {
   const plan = resource as V1beta1Plan;
@@ -50,39 +51,29 @@ const OpenshiftNamespaceInputFactory: ({ resource }) => ModalInputComponentType
   const provider = resource as V1beta1Provider;
 
   const DropdownRenderer: React.FC<DropdownRendererProps> = ({ value, onChange }) => {
-    const [isOpen, onToggle] = useToggle(false);
+    const { t } = useForkliftTranslation();
 
     const { inventory: namespaces } = useProviderInventory<OpenShiftNetworkAttachmentDefinition[]>({
       provider,
       // eslint-disable-next-line @cspell/spellchecker
       subPath: 'namespaces?detail=4',
     });
 
-    const transferNetworks: string[] = (namespaces || []).map((n) => n?.object?.metadata?.name);
+    const options: string[] = (namespaces || []).map((n) => n?.object?.metadata?.name);
 
-    const dropdownItems = [
-      <DropdownItem key={''} description={'Undefined'} onClick={() => onChange('')}>
-        {'No namespace selected'}
-      </DropdownItem>,
-      ...(transferNetworks || []).map((n) => (
-        <DropdownItem key={n} description={`Namespace ${n}`} onClick={() => onChange(n)}>
-          {n}
-        </DropdownItem>
-      )),
-    ];
+    const dropdownItems = (options || []).map((n) => ({
+      itemId: n,
+      children: <Text>{n}</Text>,
+    }));
 
     return (
-      <Dropdown
-        onSelect={onToggle}
-        toggle={
-          <DropdownToggle id="select namespace" onToggle={onToggle}>
-            {value}
-          </DropdownToggle>
-        }
-        isOpen={isOpen}
-        dropdownItems={dropdownItems}
-        menuAppendTo="parent"
-      />
+      <FilterableSelect
+        selectOptions={dropdownItems}
+        value={value as string}
+        onSelect={onChange}
+        canCreate
+        placeholder={t('No namespace selected')}
+      ></FilterableSelect>
     );
   };