fix(stack): EE-3908 broken modal when updating/redeploying stacks (#7…

…497)
enclaive · Aug 23, 2022 · b91e06a · b91e06a
1 parent ad3f4ff
commit b91e06a
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git a/app/assets/css/app.css b/app/assets/css/app.css
@@ -481,7 +481,7 @@ a[ng-click] {
 
 :root[theme='dark'] .bootbox-checkbox-list,
 :root[theme='highcontrast'] .bootbox-checkbox-list {
-  background-color: var(--black-color);
+  background-color: var(--bg-modal-content-color);
 }
 
 .small-select {

diff --git a/...omponents/forms/git-form/git-form-auto-update-fieldset/git-form-auto-update-fieldset.html b/...omponents/forms/git-form/git-form-auto-update-fieldset/git-form-auto-update-fieldset.html
@@ -13,7 +13,9 @@
   </div>
   <div class="small vertical-center" ng-if="$ctrl.model.RepositoryAutomaticUpdates">
     <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
-    <span class="text-muted">Any changes to this stack or application made locally in Portainer will be overridden, which may cause service interruption.</span>
+    <span class="text-muted"
+      >Any changes to this stack or application made locally in Portainer will be overridden, which may cause service interruption. Do you wish to continue?</span
+    >
   </div>
   <div class="form-group mt-2" ng-if="$ctrl.model.RepositoryAutomaticUpdates">
     <label for="repository_mechanism" class="col-lg-2 col-sm-3 control-label text-left"> Mechanism </label>

diff --git a/app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.controller.js b/app/portainer/components/forms/stack-redeploy-git-form/stack-redeploy-git-form.controller.js
@@ -103,8 +103,8 @@ class StackRedeployGitFormController {
 
   async submit() {
     const tplCrop =
-      '<div>Any changes to this stack or application made locally in Portainer will be overridden, which may cause service interruption.</div>' +
-      '<div"><div style="position: absolute; right: 110px; top: 68px; z-index: 999">' +
+      '<div>Any changes to this stack or application made locally in Portainer will be overridden, which may cause service interruption. Do you wish to continue?</div>' +
+      '<div"><div style="position: absolute; right: 5px; top: 84px; z-index: 999">' +
       '<be-feature-indicator feature="stackPullImageFeature"></be-feature-indicator></div></div>';
     const template = angular.element(tplCrop);
     const html = this.$compile(template)(this.$scope);

diff --git a/app/portainer/services/modal.service/prompt.ts b/app/portainer/services/modal.service/prompt.ts
@@ -167,8 +167,8 @@ export function confirmStackUpdate(
   confirmButtonClassName: string | undefined,
   callback: PromptCallback
 ) {
-  const sanitizedMessage = sanitize(message);
-
+  const sanitizedMessage =
+    typeof message === 'string' ? sanitize(message) : message;
   const box = prompt({
     title: buildTitle('Are you sure?'),
     inputType: 'checkbox',
@@ -197,7 +197,8 @@ export function confirmStackUpdate(
     'position: relative; display: block; margin-top: 10px; margin-bottom: 10px;'
   );
   const checkboxLabel = box.find('.form-check-label');
-  checkboxLabel.addClass('switch box-selector-item limited business');
+  checkboxLabel.addClass('switch box-selector-item limited business mt-4');
+  checkboxLabel.prop('style', 'width: 100%');
   const switchEle = checkboxLabel.find('i');
   switchEle.prop('style', 'margin-left:20px');
 }

diff --git a/app/portainer/views/stacks/edit/stackController.js b/app/portainer/views/stacks/edit/stackController.js
@@ -246,7 +246,7 @@ angular.module('portainer.app').controller('StackController', [
       const stack = $scope.stack;
       const tplCrop =
         '<div>Do you want to force an update of the stack?</div>' +
-        '<div  style="position: absolute; right: 110px; top: 48px; z-index: 999"><be-feature-indicator feature="stackPullImageFeature"></be-feature-indicator></div>';
+        '<div  style="position: absolute; right: 5px; top: 50px; z-index: 999"><be-feature-indicator feature="stackPullImageFeature"></be-feature-indicator></div>';
       const template = angular.element(tplCrop);
       const html = $compile(template)($scope);
       // 'Do you want to force an update of the stack?'