new updated TargetSelect.tsx

cryostatio · Jan 17, 2024 · 62f4905 · 62f4905
1 parent d40c33b
commit 62f4905
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 24 deletions.
diff --git a/src/app/Recordings/Filters/NameFilter.tsx b/src/app/Recordings/Filters/NameFilter.tsx
@@ -67,7 +67,7 @@ export const NameFilter: React.FC<NameFilterProps> = ({ recordings, filteredName
       return [{ isDisabled: true, children: `No results found for "${filterValue}"`, value: undefined }];
     }
     return filteredNameOptions.map((n) => ({ children: n, value: n }));
-  }, [filteredNameOptions]);
+  }, [filterValue, filteredNameOptions]);
 
   const toggle = React.useCallback(
     (toggleRef: React.Ref<MenuToggleElement>) => (

diff --git a/src/app/TargetView/TargetSelect.tsx b/src/app/TargetView/TargetSelect.tsx
@@ -21,9 +21,9 @@ import { NoTargetSelected } from '@app/TargetView/NoTargetSelected';
 import { SerializedTarget } from '@app/TargetView/SerializedTarget';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { getFromLocalStorage } from '@app/utils/LocalStorage';
-import { Card, CardBody, CardExpandableContent, CardHeader, CardTitle } from '@patternfly/react-core';
-import { Select, SelectGroup, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
-import { ContainerNodeIcon } from '@patternfly/react-icons';
+import { portalRoot } from '@app/utils/utils';
+import { Card, CardBody, CardExpandableContent, CardHeader, CardTitle, Dropdown, SelectGroup, SelectOption, SelectList, MenuToggle, SearchInput, MenuSearch, MenuSearchInput, DropdownGroup } from '@patternfly/react-core';
+import { ContainerNodeIcon, SearchIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 
 export interface TargetSelectProps {
@@ -105,13 +105,15 @@ export const TargetSelect: React.FC<TargetSelectProps> = ({ onSelect, simple, ..
       Array.from(groupNames)
         .map((name) => (
           <SelectGroup key={name} label={name}>
-            {targets
+            <SelectList>
+              {targets
               .filter((t) => (t.annotations?.cryostat['REALM'] || 'Others') === name)
               .map((t: Target) => (
-                <SelectOption key={t.connectUrl} value={t} isPlaceholder={false}>
+                <SelectOption key={t.connectUrl} value={t}>
                   {!t.alias || t.alias === t.connectUrl ? `${t.connectUrl}` : `${t.alias} (${t.connectUrl})`}
                 </SelectOption>
               ))}
+              </SelectList>
           </SelectGroup>
         ))
         .sort((a, b) => `${a.props['label']}`.localeCompare(`${b.props['label']}`)),
@@ -165,25 +167,40 @@ export const TargetSelect: React.FC<TargetSelectProps> = ({ onSelect, simple, ..
       ) : (
         <>
           <CardBody>
-            <Select
-              placeholderText="Select a target"
-              toggleIcon={<ContainerNodeIcon />}
-              variant={SelectVariant.single}
-              hasInlineFilter
-              inlineFilterPlaceholderText="Filter by target"
-              isGrouped
-              onFilter={handleTargetFilter}
-              onSelect={handleSelect}
-              onToggle={setDropdownOpen}
-              selections={selected?.alias || selected?.connectUrl}
-              isFlipEnabled={true}
-              menuAppendTo="parent"
-              maxHeight="20em"
+            <Dropdown
               isOpen={isDropdownOpen}
-              aria-label="Select Target"
-            >
-              {selectOptions}
-            </Select>
+              placeholder="Select a target"
+              toggle={(toggleRef)=>(
+                <MenuToggle
+                aria-label="Select Target"
+                ref={toggleRef}
+                onClick={() => handleSelect(undefined,undefined,true)}
+                isExpanded={isExpanded}
+                icon={<ContainerNodeIcon />}
+                variant='plain'
+                >
+                  {selected?.alias || selected?.connectUrl}
+                </MenuToggle>
+              )}
+              popperProps={{
+                appendTo: portalRoot,
+                enableFlip: true,
+                //maxHeight="20em"
+              }}
+              >
+                <MenuSearch>
+                  <MenuSearchInput>
+                    <SearchIcon />
+                    <SearchInput
+                    placeholder='Filter by target'
+                    onSearch={handleTargetFilter}
+                    />
+                  </MenuSearchInput>
+                </MenuSearch>
+                <DropdownGroup label="Targets">
+                {selectOptions}
+                </DropdownGroup>
+            </Dropdown>
           </CardBody>
           <CardExpandableContent>
             <CardBody>{!selected ? <NoTargetSelected /> : <SerializedTarget target={selected} />}</CardBody>