Feature: Delete Workspace UI

src/api/workspaces/index.ts

@@ -2,6 +2,7 @@ import {
   MUTATION_CONFIRM_INVITE,
   MUTATION_CREATE_WORKSPACE,
   MUTATION_LEAVE_WORKSPACE,
+  MUTATION_DELETE_WORKSPACE,
   MUTATION_GRANT_ADMIN_PERMISSIONS,
   MUTATION_INVITE_TO_WORKSPACE,
   MUTATION_REMOVE_MEMBER_FROM_WORKSPACE,
@@ -34,7 +35,7 @@ interface CreateWorkspaceInput {
  * @param {Workspace} workspaceInfo - workspace to create
  * @returns {Promise<Workspace>} created workspace
  */
-export async function createWorkspace(workspaceInfo: CreateWorkspaceInput): Promise<APIResponse<{workspace: Workspace}>> {
+export async function createWorkspace(workspaceInfo: CreateWorkspaceInput): Promise<APIResponse<{ workspace: Workspace }>> {
   const { image, ...rest } = workspaceInfo;
 
   return await api.call(MUTATION_CREATE_WORKSPACE, rest, { image });
@@ -49,6 +50,15 @@ export async function leaveWorkspace(workspaceId: string): Promise<boolean> {
   return (await api.callOld(MUTATION_LEAVE_WORKSPACE, { workspaceId })).leaveWorkspace;
 }
 
+/**
+ * Leave workspace
+ *
+ * @param {string} workspaceId - id of workspace to delete
+ */
+export async function deleteWorkspace(workspaceId: string): Promise<boolean> {
+  return (await api.callOld(MUTATION_DELETE_WORKSPACE, { workspaceId })).deleteWorkspace;
+}
+
 /**
  * Returns all user's workspaces and project.
  *

src/api/workspaces/queries.ts

@@ -113,6 +113,19 @@ export const MUTATION_LEAVE_WORKSPACE = `
   }
 `;
 
+
+// language=GraphQL
+/**
+ * Mutation to delete workspace
+ */
+export const MUTATION_DELETE_WORKSPACE = `
+ mutation leaveWorkspace(
+   $workspaceId: ID!
+ ) {
+   deleteWorkspace(workspaceId: $workspaceId)
+ }
+`;
+
 // language=GraphQL
 /**
  * Mutation to join to workspace by invite link

src/components/workspace/settings/Layout.vue

@@ -23,33 +23,43 @@
       <div v-if="workspace">
         <router-link
           class="settings-window__menu-item workspace-settings__menu-item"
-          :to="{ name: 'workspace-settings-general', params: {workspaceId: workspace.id} }"
+          :to="{
+            name: 'workspace-settings-general',
+            params: { workspaceId: workspace.id },
+          }"
         >
-          {{ $t('workspaces.settings.workspace.title') }}
+          {{ $t("workspaces.settings.workspace.title") }}
         </router-link>
         <router-link
           class="settings-window__menu-item workspace-settings__menu-item"
-          :to="{ name: 'workspace-settings-team', params: {workspaceId: workspace.id} }"
+          :to="{
+            name: 'workspace-settings-team',
+            params: { workspaceId: workspace.id },
+          }"
         >
-          {{ $t('workspaces.settings.team.title') }}
+          {{ $t("workspaces.settings.team.title") }}
         </router-link>
         <router-link
           v-if="isAdmin"
           class="settings-window__menu-item workspace-settings__menu-item"
-          :to="{ name: 'workspace-settings-billing', params: {workspaceId: workspace.id} }"
+          :to="{
+            name: 'workspace-settings-billing',
+            params: { workspaceId: workspace.id },
+          }"
         >
-          {{ $t('workspaces.settings.billing.title') }}
+          {{ $t("workspaces.settings.billing.title") }}
         </router-link>
-        <hr class="delimiter workspace-settings__delimiter">
+        <hr class="delimiter workspace-settings__delimiter" />
         <div
-          class="settings-window__menu-item workspace-settings__menu-item settings-window__menu-item--attention"
+          class="
+            settings-window__menu-item
+            workspace-settings__menu-item
+            settings-window__menu-item--attention
+          "
           @click="leaveWorkspace"
         >
-          {{ $t('workspaces.settings.leave') }}
-          <Icon
-            class="settings-window__menu-icon"
-            symbol="logout"
-          />
+          {{ $t("workspaces.settings.leave") }}
+          <Icon class="settings-window__menu-icon" symbol="logout" />
         </div>
       </div>
     </template>
@@ -69,7 +79,8 @@ import Vue from 'vue';
 import EntityImage from '../../utils/EntityImage.vue';
 import SettingsWindow from '../../settings/Window.vue';
 import Icon from '../../utils/Icon.vue';
-import { FETCH_WORKSPACE, LEAVE_WORKSPACE } from '@/store/modules/workspaces/actionTypes';
+import { FETCH_WORKSPACE, LEAVE_WORKSPACE, DELETE_WORKSPACE } from '@/store/modules/workspaces/actionTypes';
+import { ActionType } from '../../utils/ConfirmationWindow/types';
 // eslint-disable-next-line no-unused-vars
 import { Workspace } from '@/types/workspaces';
 import notifier from 'codex-notifier';
@@ -146,39 +157,48 @@ export default Vue.extend({
           style: 'error',
           time: 10000,
         });
+        this.$confirm.open({
+          description: this.$i18n.t('workspaces.settings.removeConfirmation').toString(),
+          actionType: ActionType.DELETION,
+          continueButtonText: this.$i18n.t('workspaces.settings.remove').toString(),
+          onConfirm: async () => {
+            await this.$store.dispatch(DELETE_WORKSPACE, this.workspace!.id);
+            this.$router.push({ name: 'home' });
+          },
+        });
       }
     },
   },
 });
 </script>
 
 <style>
-  .workspace-settings {
-    &__header {
-      margin-bottom: 40px;
-    }
+.workspace-settings {
+  &__header {
+    margin-bottom: 40px;
+  }
 
-    &__logo {
-      margin-right: 10px;
-    }
+  &__logo {
+    margin-right: 10px;
+  }
 
-    &__title {
-      overflow: hidden;
-      color: var(--color-text-main);
-      font-weight: 500;
-      font-size: 15px;
-      line-height: 26px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
+  &__title {
+    overflow: hidden;
+    color: var(--color-text-main);
+    font-weight: 500;
+    font-size: 15px;
+    line-height: 26px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 
-    &__menu-item {
-      width: 200px;
-      margin-left: 0;
-    }
+  &__menu-item {
+    width: 200px;
+    margin-left: 0;
+  }
 
-    &__delimiter {
-      margin-left: 10px;
-    }
+  &__delimiter {
+    margin-left: 10px;
   }
+}
 </style>

src/i18n/messages/en.json

@@ -234,6 +234,8 @@
       "label": "Workspace settings",
       "leave": "Leave workspace",
       "leaveError": "You can't leave this workspace because you are the last admin",
+      "removeConfirmation": "Are you sure you want to delete this workspace?",
+      "remove": "Remove workspace",
       "workspace": {
         "title": "Workspace settings",
         "name": "Name",

src/i18n/messages/ru.json

@@ -234,6 +234,8 @@
       "label": "Настройка воркспейса",
       "leave": "Покинуть воркспейс",
       "leaveError": "Вы не можете покинуть воркспейс, так как вы последний администратор",
+      "remove": "Удалить воркспейс",
+      "removeConfirmation": "Вы точно хотите удалить этот воркспейс?",
       "workspace": {
         "title": "Настройки воркспейса",
         "name": "Название",

src/store/modules/workspaces/actionTypes.js

@@ -18,6 +18,11 @@ export const CREATE_WORKSPACE = 'CREATE_WORKSPACE';
  */
 export const LEAVE_WORKSPACE = 'LEAVE_WORKSPACE';
 
+/**
+ * Delete current workspace
+ */
+export const DELETE_WORKSPACE = 'DELETE_WORKSPACE';
+
 /**
  * Send request to invite user to workspace
  */

src/store/modules/workspaces/index.js

@@ -2,6 +2,7 @@ import {
   CREATE_WORKSPACE,
   SET_WORKSPACES_LIST,
   LEAVE_WORKSPACE,
+  DELETE_WORKSPACE,
   SET_CURRENT_WORKSPACE,
   INVITE_TO_WORKSPACE,
   CONFIRM_INVITE,
@@ -148,7 +149,7 @@ const actions = {
   },
 
   /**
-   * Send request to delete workspace
+   * Send request to leave workspace
    *
    * @param {object} context - vuex action context
    * @param {Function} context.commit - standard Vuex commit function
@@ -163,6 +164,22 @@ const actions = {
     commit(mutationTypes.REMOVE_WORKSPACE, workspaceId);
   },
 
+  /**
+   * Send request to delete workspace
+   *
+   * @param {object} context - vuex action context
+   * @param {Function} context.commit - standard Vuex commit function
+   * @param {Function} context.dispatch - standard Vuex dispatch function
+   * @param {string} workspaceId - id of workspace for deleting
+   */
+  async [DELETE_WORKSPACE]({ commit, dispatch }, workspaceId) {
+    await workspaceApi.deleteWorkspace(workspaceId);
+
+    dispatch(REMOVE_PROJECTS_BY_WORKSPACE_ID, workspaceId);
+    commit(mutationTypes.SET_CURRENT_WORKSPACE, null);
+    commit(mutationTypes.REMOVE_WORKSPACE, workspaceId);
+  },
+
   /**
    * Sent request to invite user to workspace
    *
@@ -242,7 +259,7 @@ const actions = {
    * @returns {Promise<Workspace>}
    */
   async [FETCH_WORKSPACE]({ commit }, id) {
-    const workspace = (await workspaceApi.getWorkspaces([ id ]))[0];
+    const workspace = (await workspaceApi.getWorkspaces([id]))[0];
 
     if (!workspace) {
       throw new Error('The workspace was not found');
@@ -520,10 +537,10 @@ const mutations = {
   [mutationTypes.UPDATE_BUSINESS_OPERATIONS](state, { workspaceId, businessOperation }) {
     const index = state.list.findIndex(w => w.id === workspaceId);
     const workspace = state.list[index];
-    let updatedPaymentsHistory = [ businessOperation ];
+    let updatedPaymentsHistory = [businessOperation];
 
     if (workspace.paymentsHistory) {
-      updatedPaymentsHistory = [ businessOperation ].concat(workspace.paymentsHistory);
+      updatedPaymentsHistory = [businessOperation].concat(workspace.paymentsHistory);
     }
 
     Vue.set(workspace, 'paymentsHistory', updatedPaymentsHistory);