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

app/react/kubernetes/applications/CreateView/UpdateIngressPrompt.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+
+import { Modal, openModal } from '@@/modals';
+import { Button } from '@@/buttons';
+import { SwitchField } from '@@/form-components/SwitchField';
+
+function UpdateIngressPrompt({
+  onSubmit,
+  title,
+  hasOneIngress,
+  hasOnePort,
+}: {
+  onSubmit: (value?: { noMatch: boolean }) => void;
+  title: string;
+  hasOneIngress: boolean;
+  hasOnePort: boolean;
+}) {
+  const [value, setValue] = useState(false);
+
+  const rulePlural = !hasOneIngress ? 'rules' : 'rule';
+  const noMatchSentence = !hasOnePort
+    ? `Service ports in this application no longer match the ingress ${rulePlural}.`
+    : `A service port in this application no longer matches the ingress ${rulePlural} which may break ingress rule paths.`;
+  const inputLabel = `Update ingress ${rulePlural} to match the service port changes`;
+
+  return (
+    <Modal onDismiss={() => onSubmit()} aria-label={title}>
+      <Modal.Header title={title} />
+
+      <Modal.Body>
+        <ul className="ml-3">
+          <li>Updating the application may cause a service interruption.</li>
+          <li>{noMatchSentence}</li>
+        </ul>
+
+        <SwitchField
+          name="noMatch"
+          label={inputLabel}
+          checked={value}
+          onChange={setValue}
+        />
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={() => onSubmit({ noMatch: value })} color="primary">
+          Update
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+export function confirmUpdateAppIngress(
+  ingressesToUpdate: Array<unknown>,
+  servicePortsToUpdate: Array<unknown>
+) {
+  const hasOneIngress = ingressesToUpdate.length === 1;
+  const hasOnePort = servicePortsToUpdate.length === 1;
+
+  return openModal(UpdateIngressPrompt, {
+    title: 'Are you sure?',
+    hasOneIngress,
+    hasOnePort,
+  });
+}

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx

@@ -2,13 +2,14 @@ import { useEffect, useState } from 'react';
 import { AlertTriangle, Database } from 'lucide-react';
 import { useStore } from 'zustand';
 
-import { confirmWarn } from '@/portainer/services/modal.service/confirm';
-
+import { confirm } from '@@/modals/confirm';
+import { ModalType } from '@@/modals';
 import { Datatable } from '@@/datatables';
 import { Button, ButtonGroup } from '@@/buttons';
 import { Icon } from '@@/Icon';
 import { useSearchBarState } from '@@/datatables/SearchBar';
 import { createPersistedStore } from '@@/datatables/types';
+import { buildConfirmButton } from '@@/modals/utils';
 
 import { IngressControllerClassMap } from '../types';
 
@@ -158,7 +159,7 @@ export function IngressClassDatatable({
     );
   }
 
-  function updateIngressControllers(
+  async function updateIngressControllers(
     selectedRows: IngressControllerClassMap[],
     ingControllerFormValues: IngressControllerClassMap[],
     availability: boolean
@@ -194,38 +195,32 @@ export function IngressClassDatatable({
       );
 
       if (usedControllersToDisallow.length > 0) {
-        const usedControllerHtmlListItems = usedControllersToDisallow.map(
-          (controller) => `<li>${controller.ClassName}</li>`
-        );
-        const usedControllerHtmlList = `<ul class="ml-6">${usedControllerHtmlListItems.join(
-          ''
-        )}</ul>`;
-        confirmWarn({
+        const confirmed = await confirm({
           title: 'Disallow in-use ingress controllers?',
-          message: `
+          modalType: ModalType.Warn,
+          message: (
             <div>
-              <p>There are ingress controllers you want to disallow that are in use:</p>
-              ${usedControllerHtmlList}
-              <p>No new ingress rules can be created for the disallowed controllers.</p>
-            </div>`,
-          buttons: {
-            cancel: {
-              label: 'Cancel',
-              className: 'btn-default',
-            },
-            confirm: {
-              label: 'Disallow',
-              className: 'btn-warning',
-            },
-          },
-          callback: (confirmed) => {
-            if (confirmed) {
-              setIngControllerFormValues(updatedIngressControllers);
-              onChangeControllers(updatedIngressControllers);
-            }
-          },
+              <p>
+                There are ingress controllers you want to disallow that are in
+                use:
+              </p>
+              <ul className="ml-6">
+                {usedControllersToDisallow.map((controller) => (
+                  <li key={controller.ClassName}>${controller.ClassName}</li>
+                ))}
+              </ul>
+              <p>
+                No new ingress rules can be created for the disallowed
+                controllers.
+              </p>
+            </div>
+          ),
+          confirmButton: buildConfirmButton('Disallow', 'warning'),
         });
-        return;
+
+        if (!confirmed) {
+          return;
+        }
       }
       setIngControllerFormValues(updatedIngressControllers);
       onChangeControllers(updatedIngressControllers);

app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx

@@ -5,9 +5,9 @@ import { useStore } from 'zustand';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { useNamespaces } from '@/react/kubernetes/namespaces/queries';
 import { useAuthorizations, Authorized } from '@/react/hooks/useUser';
-import { confirmDeletionAsync } from '@/portainer/services/modal.service/confirm';
 import Route from '@/assets/ico/route.svg?c';
 
+import { confirmDelete } from '@@/modals/confirm';
 import { Datatable } from '@@/datatables';
 import { Button } from '@@/buttons';
 import { Link } from '@@/Link';
@@ -110,7 +110,7 @@ export function IngressDatatable() {
   }
 
   async function handleRemoveClick(ingresses: SelectedIngress[]) {
-    const confirmed = await confirmDeletionAsync(
+    const confirmed = await confirmDelete(
       'Are you sure you want to delete the selected ingresses?'
     );
     if (!confirmed) {

app/react/kubernetes/volumes/ItemView/ConfirmRedeployModal.tsx

@@ -0,0 +1,17 @@
+import { confirm } from '@@/modals/confirm';
+import { buildConfirmButton } from '@@/modals/utils';
+
+export function confirmRedeploy() {
+  return confirm({
+    title: '',
+    message: (
+      <>
+        One or multiple applications are currently using this volume.
+        <br /> For the change to be taken into account these applications will
+        need to be redeployed. Do you want us to reschedule it now?
+      </>
+    ),
+    confirmButton: buildConfirmButton('Redeploy the applications'),
+    cancelButtonLabel: "I'll do it later",
+  });
+}