feat(stack): detach git based stacks from git EE-2143 (#6307)

* feat(stack): detach git based stacks from git

app/portainer/services/modal.service/confirm.ts

@@ -115,6 +115,21 @@ export function confirmDeletion(message: string, callback: ConfirmCallback) {
   });
 }
 
+export function confirmDetachment(message: string, callback: ConfirmCallback) {
+  const messageSanitized = sanitize(message);
+  confirm({
+    title: 'Are you sure ?',
+    message: messageSanitized,
+    buttons: {
+      confirm: {
+        label: 'Detach',
+        className: 'btn-danger',
+      },
+    },
+    callback,
+  });
+}
+
 export function confirmDeassociate(callback: ConfirmCallback) {
   const message =
     '<p>De-associating this Edge environment will mark it as non associated and will clear the registered Edge ID.</p>' +

app/portainer/services/modal.service/index.ts

@@ -7,6 +7,7 @@ import {
   confirmAsync,
   confirmDeassociate,
   confirmDeletion,
+  confirmDetachment,
   confirmDeletionAsync,
   confirmEndpointSnapshot,
   confirmImageExport,
@@ -45,6 +46,7 @@ export function ModalServiceAngular() {
     confirmImageForceRemoval,
     cancelRegistryRepositoryAction,
     confirmDeletion,
+    confirmDetachment,
     confirmDeassociate,
     confirmUpdate,
     confirmRedeploy,

app/portainer/views/stacks/edit/stack.html

@@ -71,6 +71,18 @@
                     <i class="fa fa-plus space-right" aria-hidden="true"></i>
                     Create template from stack
                   </button>
+                  <button
+                    authorization="PortainerStackUpdate"
+                    ng-if="regular && stackFileContent && !stack.FromAppTemplate && stack.GitConfig"
+                    ng-disabled="state.actionInProgress"
+                    ng-click="detachStackFromGit()"
+                    button-spinner="state.actionInProgress"
+                    class="btn btn-primary btn-xs"
+                  >
+                    <i class="fa fa-arrow-right space-right" aria-hidden="true"></i>
+                    <span ng-hide="state.actionInProgress">Detach from Git</span>
+                    <span ng-show="state.actionInProgress">Detachment in progress...</span>
+                  </button>
                 </div>
               </div>
               <!-- !stack-details -->
@@ -101,8 +113,12 @@
                 </form>
               </div>
               <!-- !associate -->
-
-              <stack-redeploy-git-form ng-if="stack.GitConfig && !stack.FromAppTemplate" model="stack.GitConfig" stack="stack" authorization="PortainerStackUpdate">
+              <stack-redeploy-git-form
+                ng-if="stack.GitConfig && !stack.FromAppTemplate && !state.actionInProgress"
+                model="stack.GitConfig"
+                stack="stack"
+                authorization="PortainerStackUpdate"
+              >
               </stack-redeploy-git-form>
               <stack-duplication-form
                 ng-if="regular && endpoints.length > 0"

app/portainer/views/stacks/edit/stackController.js

@@ -137,6 +137,15 @@ angular.module('portainer.app').controller('StackController', [
       });
     };
 
+    $scope.detachStackFromGit = function () {
+      ModalService.confirmDetachment('Do you want to detach the stack from Git?', function onConfirm(confirmed) {
+        if (!confirmed) {
+          return;
+        }
+        $scope.deployStack();
+      });
+    };
+
     function migrateStack(name, targetEndpointId) {
       const stack = $scope.stack;