refactor(ui/modals): replace bootbox with react solution [EE-4541] (#8010)

app/react/docker/images/ItemView/RegistrySelectPrompt.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+
+import { Registry } from '@/react/portainer/environments/environment.service/registries';
+
+import { Modal, OnSubmit, openModal } from '@@/modals';
+import { Button } from '@@/buttons';
+import { PortainerSelect } from '@@/form-components/PortainerSelect';
+
+interface Props {
+  registries: Registry[];
+  onSubmit: OnSubmit<Registry['Id']>;
+  defaultValue: Registry['Id'];
+}
+
+function RegistrySelectPrompt({ onSubmit, defaultValue, registries }: Props) {
+  const title = 'Which registry do you want to use?';
+  const [registryId, setRegistryId] = useState(defaultValue);
+  const options = registries2Options(registries);
+
+  return (
+    <Modal onDismiss={() => onSubmit()} aria-label={title}>
+      <Modal.Header title={title} />
+
+      <Modal.Body>
+        <PortainerSelect
+          onChange={setRegistryId}
+          value={registryId}
+          options={options}
+        />
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={() => onSubmit()} color="default">
+          Cancel
+        </Button>
+        <Button onClick={() => onSubmit(registryId)} color="primary">
+          Update
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+export function selectRegistry(
+  registries: Registry[],
+  defaultValue: Registry['Id']
+) {
+  return openModal(RegistrySelectPrompt, {
+    registries,
+    defaultValue,
+  });
+}
+
+function registries2Options(registries: Registry[]) {
+  return registries.map((r) => ({
+    label: r.Name,
+    value: r.Id,
+  }));
+}