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,16 @@ 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
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function deleteWorkspace(workspaceId: string): Promise<APIResponse<any>> {
+  return await api.call(MUTATION_DELETE_WORKSPACE, { workspaceId });
+}
+
 /**
  * Returns all user's workspaces and project.
  *

src/api/workspaces/queries.ts

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

src/components/workspace/settings/Layout.vue

@@ -23,15 +23,21 @@
       <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"-->
@@ -47,16 +53,17 @@
         >
           {{ $t('workspaces.settings.volume.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>
@@ -76,7 +83,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';
@@ -145,47 +153,58 @@ export default Vue.extend({
      */
     async leaveWorkspace() {
       try {
-        await this.$store.dispatch(LEAVE_WORKSPACE, this.workspace!.id);
-        this.$router.push({ name: 'home' });
+        const isThereOtherAdmins = await this.$store.dispatch(LEAVE_WORKSPACE, this.workspace!.id);
+
+        if (!isThereOtherAdmins) {
+          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);
+            },
+          });
+        }
       } catch (e) {
         notifier.show({
-          message: this.$i18n.t('workspaces.settings.leaveError').toString(),
+          message: this.$i18n.t(`workspaces.errors.${e.message}`) as string,
           style: 'error',
-          time: 10000,
+          time: 5000,
         });
+        await 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

@@ -238,6 +238,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

@@ -238,6 +238,8 @@
       "label": "Настройка воркспейса",
       "leave": "Покинуть воркспейс",
       "leaveError": "Вы не можете покинуть воркспейс, так как вы последний администратор",
+      "removeConfirmation": "Вы точно хотите удалить этот воркспейс?",
+      "remove": "Удалить воркспейс",
       "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,15 +149,35 @@ 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
    * @param {Function} context.dispatch - standard Vuex dispatch function
    * @param {string} workspaceId - id of workspace for deleting
+   * @returns {boolean} - check if is there other admins are there.
    */
   async [LEAVE_WORKSPACE]({ commit, dispatch }, workspaceId) {
-    await workspaceApi.leaveWorkspace(workspaceId);
+    const success = await workspaceApi.leaveWorkspace(workspaceId);
+
+    if (!success) {
+      return false;
+    }
+    dispatch(REMOVE_PROJECTS_BY_WORKSPACE_ID, workspaceId);
+    commit(mutationTypes.SET_CURRENT_WORKSPACE, null);
+    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);
@@ -245,7 +266,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');
@@ -523,10 +544,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);