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

app/edge/components/group-form/groupFormController.js

@@ -1,9 +1,10 @@
 import _ from 'lodash-es';
-import { confirmDestructiveAsync } from '@/portainer/services/modal.service/confirm';
+import { confirmDestructive } from '@@/modals/confirm';
 import { EdgeTypes } from '@/react/portainer/environments/types';
 import { getEnvironments } from '@/react/portainer/environments/environment.service';
 import { getTags } from '@/portainer/tags/tags.service';
 import { notifyError } from '@/portainer/services/notifications';
+import { buildConfirmButton } from '@@/modals/utils';
 import { groupTypeOptions } from './group-type-options';
 import { tagOptions } from './tag-options';
 
@@ -77,19 +78,10 @@ export class EdgeGroupFormController {
 
   dissociateEndpoint(endpoint) {
     return this.$async(async () => {
-      const confirmed = await confirmDestructiveAsync({
+      const confirmed = await confirmDestructive({
         title: 'Confirm action',
         message: 'Removing the environment from this group will remove its corresponding edge stacks',
-        buttons: {
-          cancel: {
-            label: 'Cancel',
-            className: 'btn-default',
-          },
-          confirm: {
-            label: 'Confirm',
-            className: 'btn-primary',
-          },
-        },
+        confirmButton: buildConfirmButton('Confirm'),
       });
 
       if (!confirmed) {

app/edge/views/edge-jobs/createEdgeJobView/createEdgeJobViewController.js

@@ -1,6 +1,8 @@
+import { confirmWebEditorDiscard } from '@@/modals/confirm';
+
 export class CreateEdgeJobViewController {
   /* @ngInject */
-  constructor($async, $q, $state, $window, ModalService, EdgeJobService, GroupService, Notifications, TagService) {
+  constructor($async, $q, $state, $window, EdgeJobService, GroupService, Notifications, TagService) {
     this.state = {
       actionInProgress: false,
       isEditorDirty: false,
@@ -20,7 +22,6 @@ export class CreateEdgeJobViewController {
     this.$q = $q;
     this.$state = $state;
     this.$window = $window;
-    this.ModalService = ModalService;
     this.Notifications = Notifications;
     this.GroupService = GroupService;
     this.EdgeJobService = EdgeJobService;
@@ -59,7 +60,7 @@ export class CreateEdgeJobViewController {
 
   async uiCanExit() {
     if (this.model.FileContent && this.state.isEditorDirty) {
-      return this.ModalService.confirmWebEditorDiscard();
+      return confirmWebEditorDiscard();
     }
   }
 

app/edge/views/edge-jobs/edgeJob/edgeJobController.js

@@ -1,9 +1,10 @@
 import _ from 'lodash-es';
 import { getEnvironments } from '@/react/portainer/environments/environment.service';
+import { confirmWebEditorDiscard } from '@@/modals/confirm';
 
 export class EdgeJobController {
   /* @ngInject */
-  constructor($async, $q, $state, $window, ModalService, EdgeJobService, FileSaver, GroupService, HostBrowserService, Notifications, TagService) {
+  constructor($async, $q, $state, $window, EdgeJobService, FileSaver, GroupService, HostBrowserService, Notifications, TagService) {
     this.state = {
       actionInProgress: false,
       showEditorTab: false,
@@ -14,7 +15,6 @@ export class EdgeJobController {
     this.$q = $q;
     this.$state = $state;
     this.$window = $window;
-    this.ModalService = ModalService;
     this.EdgeJobService = EdgeJobService;
     this.FileSaver = FileSaver;
     this.GroupService = GroupService;
@@ -127,7 +127,7 @@ export class EdgeJobController {
 
   async uiCanExit() {
     if (this.edgeJob && this.edgeJob.FileContent !== this.oldFileContent && this.state.isEditorDirty) {
-      return this.ModalService.confirmWebEditorDiscard();
+      return confirmWebEditorDiscard();
     }
   }
 

app/edge/views/edge-jobs/edgeJobsView/edgeJobsViewController.js

@@ -1,12 +1,12 @@
 import _ from 'lodash-es';
+import { confirmDelete } from '@@/modals/confirm';
 
 export class EdgeJobsViewController {
   /* @ngInject */
-  constructor($async, $state, EdgeJobService, ModalService, Notifications) {
+  constructor($async, $state, EdgeJobService, Notifications) {
     this.$async = $async;
     this.$state = $state;
     this.EdgeJobService = EdgeJobService;
-    this.ModalService = ModalService;
     this.Notifications = Notifications;
 
     this.removeAction = this.removeAction.bind(this);
@@ -15,7 +15,7 @@ export class EdgeJobsViewController {
   }
 
   removeAction(selectedItems) {
-    this.ModalService.confirmDeletion('Do you want to remove the selected edge job(s) ?', (confirmed) => {
+    confirmDelete('Do you want to remove the selected edge job(s)?').then((confirmed) => {
       if (!confirmed) {
         return;
       }

app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js

@@ -1,11 +1,12 @@
 import { EditorType } from '@/react/edge/edge-stacks/types';
 import { PortainerEndpointTypes } from '@/portainer/models/endpoint/models';
 import { getValidEditorTypes } from '@/react/edge/edge-stacks/utils';
+import { confirmWebEditorDiscard } from '@@/modals/confirm';
 
 export default class CreateEdgeStackViewController {
   /* @ngInject */
-  constructor($state, $window, ModalService, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async, $scope) {
-    Object.assign(this, { $state, $window, ModalService, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async, $scope });
+  constructor($state, $window, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async, $scope) {
+    Object.assign(this, { $state, $window, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async, $scope });
 
     this.formValues = {
       Name: '',
@@ -75,7 +76,7 @@ export default class CreateEdgeStackViewController {
 
   uiCanExit() {
     if (this.state.Method === 'editor' && this.formValues.StackFileContent && this.state.isEditorDirty) {
-      return this.ModalService.confirmWebEditorDiscard();
+      return confirmWebEditorDiscard();
     }
   }
 

app/edge/views/edge-stacks/editEdgeStackView/editEdgeStackViewController.js

@@ -1,13 +1,13 @@
 import _ from 'lodash-es';
 import { getEnvironments } from '@/react/portainer/environments/environment.service';
+import { confirmWebEditorDiscard } from '@@/modals/confirm';
 
 export class EditEdgeStackViewController {
   /* @ngInject */
-  constructor($async, $state, $window, ModalService, EdgeGroupService, EdgeStackService, Notifications) {
+  constructor($async, $state, $window, EdgeGroupService, EdgeStackService, Notifications) {
     this.$async = $async;
     this.$state = $state;
     this.$window = $window;
-    this.ModalService = ModalService;
     this.EdgeGroupService = EdgeGroupService;
     this.EdgeStackService = EdgeStackService;
     this.Notifications = Notifications;
@@ -64,7 +64,7 @@ export class EditEdgeStackViewController {
       this.formValues.StackFileContent.replace(/(\r\n|\n|\r)/gm, '') !== this.oldFileContent.replace(/(\r\n|\n|\r)/gm, '') &&
       this.state.isEditorDirty
     ) {
-      return this.ModalService.confirmWebEditorDiscard();
+      return confirmWebEditorDiscard();
     }
   }