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

app/react/docker/containers/ItemView/ConfirmRecreationModal.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+
+import { Modal, OnSubmit, ModalType, openModal } from '@@/modals';
+import { Button } from '@@/buttons';
+import { SwitchField } from '@@/form-components/SwitchField';
+import { TextTip } from '@@/Tip/TextTip';
+
+interface Props {
+  onSubmit: OnSubmit<{ pullLatest: boolean }>;
+
+  cannotPullImage: boolean;
+}
+
+function ConfirmRecreationModal({ onSubmit, cannotPullImage }: Props) {
+  const [pullLatest, setPullLatest] = useState(false);
+
+  return (
+    <Modal
+      onDismiss={() => onSubmit()}
+      aria-label="confirm recreate container modal"
+    >
+      <Modal.Header title="Are you sure?" modalType={ModalType.Destructive} />
+
+      <Modal.Body>
+        <p>
+          You&apos;re about to recreate this container and any non-persisted
+          data will be lost. This container will be removed and another one will
+          be created using the same configuration.
+        </p>
+        <SwitchField
+          name="pullLatest"
+          label="Re-pull image"
+          checked={pullLatest}
+          onChange={setPullLatest}
+          disabled={cannotPullImage}
+        />
+        {cannotPullImage && (
+          <div className="mt-1 text-sm">
+            <TextTip color="orange">
+              Cannot re-pull as the image is inaccessible - either it no longer
+              exists or the tag or name is no longer correct.
+            </TextTip>
+          </div>
+        )}
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={() => onSubmit()} color="default">
+          Cancel
+        </Button>
+        <Button onClick={() => onSubmit({ pullLatest })} color="danger">
+          Recreate
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+export async function confirmContainerRecreation(cannotPullImage: boolean) {
+  return openModal(ConfirmRecreationModal, {
+    cannotPullImage,
+  });
+}

app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx

@@ -11,7 +11,7 @@ import {
 
 import * as notifications from '@/portainer/services/notifications';
 import { useAuthorizations, Authorized } from '@/react/hooks/useUser';
-import { confirmContainerDeletion } from '@/portainer/services/modal.service/prompt';
+import { confirmContainerDeletion } from '@/react/docker/containers/common/confirm-container-delete-modal';
 import { setPortainerAgentTargetHeader } from '@/portainer/services/http-request.helper';
 import {
   ContainerId,
@@ -242,7 +242,7 @@ export function ContainersDatatableActions({
     );
   }
 
-  function onRemoveClick(selectedItems: DockerContainer[]) {
+  async function onRemoveClick(selectedItems: DockerContainer[]) {
     const isOneContainerRunning = selectedItems.some(
       (container) => container.State === 'running'
     );
@@ -250,14 +250,13 @@ export function ContainersDatatableActions({
     const runningTitle = isOneContainerRunning ? 'running' : '';
     const title = `You are about to remove one or more ${runningTitle} containers.`;
 
-    confirmContainerDeletion(title, (result: string[]) => {
-      if (!result) {
-        return;
-      }
-      const cleanVolumes = !!result[0];
+    const result = await confirmContainerDeletion(title);
+    if (!result) {
+      return;
+    }
+    const { removeVolumes } = result;
 
-      removeSelectedContainers(selectedItems, cleanVolumes);
-    });
+    removeSelectedContainers(selectedItems, removeVolumes);
   }
 
   async function executeActionOnContainerList(

app/react/docker/containers/common/confirm-container-delete-modal.ts

@@ -0,0 +1,16 @@
+import { ModalType } from '@@/modals';
+import { openSwitchPrompt } from '@@/modals/SwitchPrompt';
+import { buildConfirmButton } from '@@/modals/utils';
+
+export async function confirmContainerDeletion(title: string) {
+  const result = await openSwitchPrompt(
+    title,
+    'Automatically remove non-persistent volumes',
+    {
+      confirmButton: buildConfirmButton('Remove', 'danger'),
+      modalType: ModalType.Destructive,
+    }
+  );
+
+  return result ? { removeVolumes: result.value } : undefined;
+}