From 08233f1fc640ef8a0e7477e1663f3a912cc964ba Mon Sep 17 00:00:00 2001
From: yaacov <kobi.zamir@gmail.com>
Date: Tue, 18 Jun 2024 13:37:16 +0300
Subject: [PATCH] Filter network options in vmware provider host

Signed-off-by: yaacov <kobi.zamir@gmail.com>
---
 .../tabs/Hosts/modals/VSphereNetworkModal.tsx | 46 +++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx
index dc43b9d98..39e7cdef4 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode, useCallback, useReducer, useState } from 'react';
+import { FilterableSelect } from 'src/components';
 import { AlertMessageForModals, useModal } from 'src/modules/Providers/modals';
 import { validateNoSpaces } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
@@ -8,11 +9,11 @@ import { NetworkAdapters, V1beta1Provider } from '@kubev2v/types';
 import {
   Button,
   Form,
+  HelperText,
+  HelperTextItem,
   Modal,
   ModalVariant,
-  Select,
-  SelectOption,
-  SelectVariant,
+  Text,
   TextInput,
 } from '@patternfly/react-core';
 import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons';
@@ -203,27 +204,26 @@ export const VSphereNetworkModal: React.FC<VSphereNetworkModalProps> = ({
 
       <Form id="modal-with-form-form">
         <FormGroupWithHelpText label="Network" isRequired fieldId="network">
-          <Select
-            variant={SelectVariant.single}
-            placeholderText="Select a network"
+          <FilterableSelect
+            placeholder="Select a network"
             aria-label="Select Network"
-            onToggle={onSelectToggle}
-            onSelect={onSelect}
-            selections={
-              state.network ? `${state.network.name} - ${state.network.ipAddress}` : undefined
-            }
-            isOpen={state.isSelectOpen}
-            menuAppendTo={() => document.body}
-          >
-            {networkOptions.map((option) => (
-              <SelectOption
-                isDisabled={option.disabled}
-                key={option.key}
-                value={option.label}
-                description={option.description}
-              />
-            ))}
-          </Select>
+            onSelect={(value) => onSelect(null, value)}
+            value={state.network ? `${state.network.name} - ${state.network.ipAddress}` : undefined}
+            selectOptions={networkOptions.map((option) => ({
+              itemId: option.label,
+              isDisabled: option.disabled,
+              children: (
+                <>
+                  <Text>{option.label}</Text>
+                  {option.description && (
+                    <HelperText>
+                      <HelperTextItem variant="indeterminate">{option.description}</HelperTextItem>
+                    </HelperText>
+                  )}
+                </>
+              ),
+            }))}
+          />
         </FormGroupWithHelpText>
 
         {endpointType !== 'esxi' && (