From be214e9ed494f562261c6fe5a894018e45260e8f Mon Sep 17 00:00:00 2001
From: vinoth-gojek <s.vinothkumar@gojek.com>
Date: Tue, 26 Nov 2024 15:15:43 +0800
Subject: [PATCH] Switch to use <EuiSuperselect /> component to list docker
 registery in router deployment (#396)

* switch to use euisuperselect to list docker registery

* Address review comments - remove extra space, fix indentation
---
 .../DockerRegistryPopover.js                  | 44 ++++---------------
 .../SelectDockerImageComboBox.js              |  2 +-
 2 files changed, 10 insertions(+), 36 deletions(-)

diff --git a/ui/src/components/form/docker_image_combo_box/DockerRegistryPopover.js b/ui/src/components/form/docker_image_combo_box/DockerRegistryPopover.js
index 8de615cd1..c6ffb2958 100644
--- a/ui/src/components/form/docker_image_combo_box/DockerRegistryPopover.js
+++ b/ui/src/components/form/docker_image_combo_box/DockerRegistryPopover.js
@@ -1,40 +1,14 @@
-import React, { useState } from "react";
-import { EuiButtonEmpty, EuiContextMenu, EuiPopover } from "@elastic/eui";
-import { flattenPanelTree } from "@caraml-dev/ui-lib";
+import { EuiSuperSelect } from "@elastic/eui";
 
 export const DockerRegistryPopover = ({ value, registryOptions, onChange }) => {
-  const [isOpen, setOpen] = useState(false);
-
-  const panels = flattenPanelTree({
-    id: 0,
-    items: registryOptions.map((registry) => ({
-      name: registry.inputDisplay,
-      value: registry.value,
-      icon: "logoDocker",
-      onClick: () => {
-        togglePopover();
-        onChange(registry.value);
-      },
-    })),
-  });
-
-  const togglePopover = () => setOpen(!isOpen);
 
   return (
-    <EuiPopover
-      button={
-        <EuiButtonEmpty
-          size="xs"
-          iconType="arrowDown"
-          iconSide="right"
-          onClick={togglePopover}>
-          {(registryOptions.find((o) => o.value === value) || {}).inputDisplay}
-        </EuiButtonEmpty>
-      }
-      isOpen={isOpen}
-      closePopover={togglePopover}
-      panelPaddingSize="s">
-      <EuiContextMenu initialPanelId={0} panels={panels} />
-    </EuiPopover>
+    <EuiSuperSelect
+      fullWidth
+      options={registryOptions}
+      valueOfSelected={value}
+      itemLayoutAlign="top"
+      onChange={onChange}
+    />
   );
-};
+};
\ No newline at end of file
diff --git a/ui/src/components/form/docker_image_combo_box/SelectDockerImageComboBox.js b/ui/src/components/form/docker_image_combo_box/SelectDockerImageComboBox.js
index 3280e7cae..ed9a45ac4 100644
--- a/ui/src/components/form/docker_image_combo_box/SelectDockerImageComboBox.js
+++ b/ui/src/components/form/docker_image_combo_box/SelectDockerImageComboBox.js
@@ -1,7 +1,7 @@
 import React from "react";
-import { DockerRegistryPopover } from "./DockerRegistryPopover";
 import "./SelectDockerImageComboBox.scss";
 import { EuiComboBoxSelect } from "../combo_box/EuiComboBoxSelect";
+import { DockerRegistryPopover } from "./DockerRegistryPopover";
 
 const extractRegistry = (image, registries) => {
   if (image) {