fix(dialog): dialog migration issues [EE-5385] (#8849)

* fix(dialog): dialog migration issues [EE-5385]

* don't highlight slider tooltip text

---------

Co-authored-by: testa113 <testa113>

app/kubernetes/registries/kube-registry-access-view/kube-registry-access-view.controller.js

@@ -1,5 +1,5 @@
-import { confirmDelete } from '@@/modals/confirm';
 import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
+import { confirmDeleteAccess } from '@/react/kubernetes/cluster/RegistryAccessView/ConfirmDeleteAccess';
 
 export default class KubernetesRegistryAccessController {
   /* @ngInject */
@@ -32,9 +32,7 @@ export default class KubernetesRegistryAccessController {
     const removeNamespaces = namespaces.map(({ value }) => value);
     const nsToUpdate = this.savedResourcePools.map(({ value }) => value).filter((value) => !removeNamespaces.includes(value));
 
-    const displayedMessage =
-      'This registry might be used by one or more applications inside this environment. Removing the registry access could lead to a service interruption for these applications.<br/><br/>Do you wish to continue?';
-    confirmDelete(displayedMessage).then((confirmed) => {
+    confirmDeleteAccess().then((confirmed) => {
       if (confirmed) {
         return this.updateNamespaces(nsToUpdate);
       }
@@ -48,6 +46,7 @@ export default class KubernetesRegistryAccessController {
           namespaces,
         });
         this.$state.reload(this.$state.current);
+        this.Notifications.success('Success', 'Registry access updated');
       } catch (err) {
         this.Notifications.error('Failure', err, 'Failed saving registry access');
       }

app/kubernetes/views/cluster/node/nodeController.js

@@ -8,7 +8,7 @@ import { KubernetesNodeLabelFormValues, KubernetesNodeTaintFormValues } from 'Ku
 import { KubernetesNodeTaintEffects, KubernetesNodeAvailabilities } from 'Kubernetes/node/models';
 import KubernetesFormValidationHelper from 'Kubernetes/helpers/formValidationHelper';
 import { KubernetesNodeHelper } from 'Kubernetes/node/helper';
-import { confirmUpdate } from '@@/modals/confirm';
+import { confirmUpdateNode } from '@/react/kubernetes/cluster/NodeView/ConfirmUpdateNode';
 
 class KubernetesNodeController {
   /* @ngInject */
@@ -264,44 +264,8 @@ class KubernetesNodeController {
     const cordonWarning = this.computeCordonWarning();
     const drainWarning = this.computeDrainWarning();
 
-    if (taintsWarning && !labelsWarning) {
-      confirmUpdate(
-        'Changes to taints will immediately deschedule applications running on this node without the corresponding tolerations. Do you wish to continue?',
-        (confirmed) => {
-          if (confirmed) {
-            return this.$async(this.updateNodeAsync);
-          }
-        }
-      );
-    } else if (!taintsWarning && labelsWarning) {
-      confirmUpdate(
-        'Removing or changing a label that is used might prevent applications from being scheduled on this node in the future. Do you wish to continue?',
-        (confirmed) => {
-          if (confirmed) {
-            return this.$async(this.updateNodeAsync);
-          }
-        }
-      );
-    } else if (taintsWarning && labelsWarning) {
-      confirmUpdate(
-        'Changes to taints will immediately deschedule applications running on this node without the corresponding tolerations.<br/></br/>Removing or changing a label that is used might prevent applications from scheduling on this node in the future.\n\nDo you wish to continue?',
-        (confirmed) => {
-          if (confirmed) {
-            return this.$async(this.updateNodeAsync);
-          }
-        }
-      );
-    } else if (cordonWarning) {
-      confirmUpdate(
-        'Marking this node as unschedulable will effectively cordon the node and prevent any new workload from being scheduled on that node. Are you sure?',
-        (confirmed) => {
-          if (confirmed) {
-            return this.$async(this.updateNodeAsync);
-          }
-        }
-      );
-    } else if (drainWarning) {
-      confirmUpdate('Draining this node will cause all workloads to be evicted from that node. This might lead to some service interruption. Are you sure?', (confirmed) => {
+    if (taintsWarning || labelsWarning || cordonWarning || drainWarning) {
+      confirmUpdateNode(taintsWarning, labelsWarning, cordonWarning, drainWarning).then((confirmed) => {
         if (confirmed) {
           return this.$async(this.updateNodeAsync);
         }

app/kubernetes/views/configure/configureController.js

@@ -10,6 +10,7 @@ import { getIngressControllerClassMap, updateIngressControllerClassMap } from '@
 import { buildConfirmButton } from '@@/modals/utils';
 import { confirm } from '@@/modals/confirm';
 import { getIsRBACEnabled } from '@/react/kubernetes/cluster/getIsRBACEnabled';
+import { ModalType } from '@@/modals/Modal/types';
 
 class KubernetesConfigureController {
   /* #region  CONSTRUCTOR */
@@ -392,6 +393,7 @@ class KubernetesConfigureController {
       return confirm({
         title: 'Are you sure?',
         message: 'You currently have unsaved changes in the cluster setup view. Are you sure you want to leave?',
+        modalType: ModalType.Warn,
         confirmButton: buildConfirmButton('Yes', 'danger'),
       });
     }

app/kubernetes/views/resource-pools/edit/resourcePoolController.js

@@ -15,6 +15,7 @@ import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
 import { FeatureId } from '@/react/portainer/feature-flags/enums';
 import { updateIngressControllerClassMap, getIngressControllerClassMap } from '@/react/kubernetes/cluster/ingressClass/utils';
 import { confirmUpdate } from '@@/modals/confirm';
+import { confirmUpdateNamespace } from '@/react/kubernetes/namespaces/ItemView/ConfirmUpdateNamespace';
 
 class KubernetesResourcePoolController {
   /* #region  CONSTRUCTOR */
@@ -178,19 +179,8 @@ class KubernetesResourcePoolController {
       registries: registriesToDelete.length !== 0,
     };
 
-    if (warnings.quota || warnings.ingress || warnings.registries) {
-      const messages = {
-        quota:
-          'Reducing the quota assigned to an "in-use" namespace may have unintended consequences, including preventing running applications from functioning correctly and potentially even blocking them from running at all.',
-        ingress: 'Deactivating ingresses may cause applications to be unaccessible. All ingress configurations from affected applications will be removed.',
-        registries:
-          'Some registries you removed might be used by one or more applications inside this environment. Removing the registries access could lead to a service interruption for these applications.',
-      };
-      const displayedMessage = `${warnings.quota ? messages.quota + '<br/><br/>' : ''}
-      ${warnings.ingress ? messages.ingress + '<br/><br/>' : ''}
-      ${warnings.registries ? messages.registries + '<br/><br/>' : ''}
-      Do you wish to continue?`;
-      confirmUpdate(displayedMessage, (confirmed) => {
+    if (warnings.quota || warnings.registries) {
+      confirmUpdateNamespace(warnings.quota, warnings.ingress, warnings.registries).then((confirmed) => {
         if (confirmed) {
           return this.$async(this.updateResourcePoolAsync, this.savedFormValues, this.formValues);
         }

app/react/components/Tip/SliderTooltip/SliderTooltip.module.css

@@ -19,10 +19,12 @@
   line-height: 18px;
   padding: 8px 10px !important;
   font-size: 12px !important;
+  user-select: none;
 }
 
 .tooltip-centered .tooltip-container {
   text-align: center;
+  user-select: none;
 }
 
 .tooltip-message a {

app/react/kubernetes/cluster/NodeView/ConfirmUpdateNode.tsx

@@ -0,0 +1,46 @@
+import { ModalType } from '@@/modals';
+import { confirm } from '@@/modals/confirm';
+import { buildConfirmButton } from '@@/modals/utils';
+
+export function confirmUpdateNode(
+  taintsWarning: boolean,
+  labelsWarning: boolean,
+  cordonWarning: boolean,
+  drainWarning: boolean
+) {
+  let message;
+  if (taintsWarning && !labelsWarning) {
+    message =
+      'Changes to taints will immediately deschedule applications running on this node without the corresponding tolerations. Do you wish to continue?';
+  } else if (!taintsWarning && labelsWarning) {
+    message =
+      'Removing or changing a label that is used might prevent applications from being scheduled on this node in the future. Do you wish to continue?';
+  } else if (taintsWarning && labelsWarning) {
+    message = (
+      <>
+        <p>
+          Changes to taints will immediately deschedule applications running on
+          this node without the corresponding tolerations.
+        </p>
+        <p>
+          Removing or changing a label that is used might prevent applications
+          from scheduling on this node in the future.
+        </p>
+        <p>Do you wish to continue?</p>
+      </>
+    );
+  } else if (cordonWarning) {
+    message =
+      'Marking this node as unschedulable will effectively cordon the node and prevent any new workload from being scheduled on that node. Are you sure?';
+  } else if (drainWarning) {
+    message =
+      'Draining this node will cause all workloads to be evicted from that node. This might lead to some service interruption. Are you sure?';
+  }
+
+  return confirm({
+    title: 'Are you sure?',
+    modalType: ModalType.Warn,
+    message,
+    confirmButton: buildConfirmButton('Update', 'primary'),
+  });
+}

app/react/kubernetes/cluster/RegistryAccessView/ConfirmDeleteAccess.tsx

@@ -0,0 +1,19 @@
+import { confirmDestructive } from '@@/modals/confirm';
+import { buildConfirmButton } from '@@/modals/utils';
+
+export function confirmDeleteAccess() {
+  return confirmDestructive({
+    title: 'Are you sure?',
+    message: (
+      <>
+        <p>
+          This registry might be used by one or more applications inside this
+          environment. Removing the registry access could lead to a service
+          interruption for these applications.
+        </p>
+        <p>Do you wish to continue?</p>
+      </>
+    ),
+    confirmButton: buildConfirmButton('Remove', 'danger'),
+  });
+}

app/react/kubernetes/namespaces/ItemView/ConfirmUpdateNamespace.tsx

@@ -0,0 +1,42 @@
+import { ModalType } from '@@/modals';
+import { confirm } from '@@/modals/confirm';
+import { buildConfirmButton } from '@@/modals/utils';
+
+export function confirmUpdateNamespace(
+  quotaWarning: boolean,
+  ingressWarning: boolean,
+  registriesWarning: boolean
+) {
+  const message = (
+    <>
+      {quotaWarning && (
+        <p>
+          Reducing the quota assigned to an &quot;in-use&quot; namespace may
+          have unintended consequences, including preventing running
+          applications from functioning correctly and potentially even blocking
+          them from running at all.
+        </p>
+      )}
+      {ingressWarning && (
+        <p>
+          Deactivating ingresses may cause applications to be unaccessible. All
+          ingress configurations from affected applications will be removed.
+        </p>
+      )}
+      {registriesWarning && (
+        <p>
+          Some registries you removed might be used by one or more applications
+          inside this environment. Removing the registries access could lead to
+          a service interruption for these applications.
+        </p>
+      )}
+    </>
+  );
+
+  return confirm({
+    title: 'Are you sure?',
+    modalType: ModalType.Warn,
+    message,
+    confirmButton: buildConfirmButton('Update', 'primary'),
+  });
+}