Fixes Image selection dropdown scroll issue

frontend/src/components/NewDropdownSelect.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Truncate, Dropdown, MenuToggle, DropdownList, DropdownItem } from '@patternfly/react-core';
+
+export type SimpleDropdownOption = {
+  key: string;
+  label: string;
+  description?: React.ReactNode;
+  dropdownLabel?: React.ReactNode;
+  isPlaceholder?: boolean;
+};
+
+type SimpleDropdownProps = {
+  options: SimpleDropdownOption[];
+  value: string;
+  placeholder?: string;
+  onChange: (key: string, isPlaceholder: boolean) => void;
+  isFullWidth?: boolean;
+  isDisabled?: boolean;
+} & Omit<React.ComponentProps<typeof Dropdown>, 'isOpen' | 'toggle' | 'dropdownItems' | 'onChange'>;
+
+const NewDropdownSelect: React.FC<SimpleDropdownProps> = ({
+  isDisabled,
+  onChange,
+  options,
+  placeholder = 'Select...',
+  value,
+  isFullWidth,
+  ...props
+}) => {
+  const [open, setOpen] = React.useState(false);
+
+  const onToggleClick = () => {
+    setOpen(!open);
+  };
+  const selectedOption = options.find(({ key }) => key === value);
+  const selectedLabel = selectedOption?.label ?? placeholder;
+
+  const onSelect = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Dropdown
+      {...props}
+      isOpen={open}
+      onSelect={onSelect}
+      onOpenChange={(isOpen: boolean) => setOpen(isOpen)}
+      toggle={(toggleRef) => (
+        <MenuToggle
+          ref={toggleRef}
+          isDisabled={isDisabled}
+          isFullWidth={isFullWidth}
+          onClick={onToggleClick}
+          isExpanded={open}
+        >
+          <Truncate content={selectedLabel} className="truncate-no-min-width" />
+        </MenuToggle>
+      )}
+      shouldFocusToggleOnSelect
+    >
+      <DropdownList>
+        {[...options]
+          .sort((a, b) => (a.isPlaceholder === b.isPlaceholder ? 0 : a.isPlaceholder ? -1 : 1))
+          .map(({ key, dropdownLabel, label, description, isPlaceholder }) => (
+            <DropdownItem
+              key={key}
+              description={description}
+              onClick={() => {
+                onChange(key, !!isPlaceholder);
+                setOpen(false);
+              }}
+            >
+              {dropdownLabel ?? label}
+            </DropdownItem>
+          ))}
+      </DropdownList>
+    </Dropdown>
+  );
+};
+
+export default NewDropdownSelect;

frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamSelector.tsx

@@ -9,7 +9,7 @@ import {
   isCompatibleWithAccelerator,
 } from '~/pages/projects/screens/spawner/spawnerUtils';
 import { ImageStreamKind } from '~/k8sTypes';
-import SimpleDropdownSelect from '~/components/SimpleDropdownSelect';
+import NewDropdownSelect from '~/components/NewDropdownSelect';
 
 type ImageStreamSelectorProps = {
   imageStreams: ImageStreamKind[];
@@ -51,7 +51,8 @@ const ImageStreamSelector: React.FC<ImageStreamSelectorProps> = ({
 
   return (
     <FormGroup isRequired label="Image selection" fieldId="workbench-image-stream-selection">
-      <SimpleDropdownSelect
+      <NewDropdownSelect
+        isScrollable
         isFullWidth
         id="workbench-image-stream-selection"
         data-testid="workbench-image-stream-selection"