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