Switch to use <EuiSuperselect /> component to list docker registery in router deployment (caraml-dev#396)

* switch to use euisuperselect to list docker registery

* Address review comments - remove extra space, fix indentation

Author: vinoth-gojek

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}
+    />
   );
-};
+};

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) {