✨ : add delete stack button

src/main/client/app/pages/stacks/stack-edition.vue

@@ -52,6 +52,14 @@
       >
         <font-awesome-icon icon="archive" /> Un-Archive
       </b-button>
+      <b-button
+        v-if="canDeleteStack"
+        variant="danger"
+        class="float-right mr-1"
+        @click="deleteStack"
+      >
+        <font-awesome-icon :icon="['far', 'trash-alt']" /> Delete
+      </b-button>
     </div>
 
     <div class="row margin_bottom_30">
@@ -211,6 +219,7 @@
     getStack,
     runStack,
     saveStack,
+    deleteStack,
   } from '@/shared/api/stacks-api';
   import { getState } from '@/shared/api/state-api';
 
@@ -272,6 +281,9 @@
       canUnarchiveStack() {
         return this.stack.state === 'ARCHIVED';
       },
+      canDeleteStack() {
+        return this.stack.state === 'ARCHIVED';
+      },
     },
 
     async created() {
@@ -356,6 +368,16 @@
           await saveStack(this.stack);
         }
       },
+      async deleteStack() {
+        // ask for confirmation
+        const message = 'This will delete the stack. '
+          + 'The stack and all related data will be deleted. '
+          + 'This will not destroy any Terraform resources the stack may have instanciated. Continue?';
+        if (await displayConfirmDialog(this, { title: 'Delete Stack', message })) {
+          await deleteStack(this.stack.id);
+          this.$router.push({ name: 'stacks' });
+        }
+      },
       async refreshJobs() {
         this.jobs = await getJobs(this.stackId);
       },

src/main/client/app/shared/api/stacks-api.js

@@ -6,6 +6,8 @@ export const getStack = async (stackId) => axios.get(`/api/stacks/${stackId}`);
 
 export const saveStack = async (stack) => axios.put(`/api/stacks/${stack.id}`, stack);
 
+export const deleteStack = async (stackId) => axios.delete(`/api/stacks/${stackId}`);
+
 export const getStacks = async () => axios.get('/api/stacks');
 
 export const runStack = async (stackId) => axios.post(`/api/stacks/${stackId}/RUN`);