From b750ccd46fbcd2eff28821e04688443e22bdb072 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 30 Jun 2021 14:16:02 +0530
Subject: [PATCH] refactor: better implimentation for slots

---
 components/app/Extensions.vue                 |  21 +-
 components/app/Footer.vue                     |   2 +-
 components/app/Header.vue                     |   6 +-
 components/app/Shortcuts.vue                  |  21 +-
 components/app/Support.vue                    |  21 +-
 components/collections/Add.vue                |  44 +-
 components/collections/AddFolder.vue          |  44 +-
 components/collections/Edit.vue               |  44 +-
 components/collections/EditFolder.vue         |  44 +-
 components/collections/EditRequest.vue        |  44 +-
 components/collections/ImportExport.vue       | 159 +++---
 components/collections/SaveRequest.vue        |  44 +-
 components/collections/graphql/Add.vue        |  44 +-
 components/collections/graphql/AddFolder.vue  |  44 +-
 components/collections/graphql/Collection.vue |   2 +-
 components/collections/graphql/Edit.vue       |  44 +-
 components/collections/graphql/EditFolder.vue |  44 +-
 .../collections/graphql/EditRequest.vue       |  44 +-
 components/collections/graphql/Folder.vue     |   2 +-
 .../collections/graphql/ImportExport.vue      | 110 ++---
 components/collections/graphql/Request.vue    |   2 +-
 components/collections/index.vue              |   1 +
 components/collections/my/Collection.vue      |   2 +-
 components/collections/my/Folder.vue          |   2 +-
 components/collections/my/Request.vue         |   2 +-
 components/collections/teams/Collection.vue   |   2 +-
 components/collections/teams/Folder.vue       |   2 +-
 components/collections/teams/Request.vue      |   2 +-
 components/environments/Add.vue               |  44 +-
 components/environments/Edit.vue              |  44 +-
 components/environments/Environment.vue       |   2 +-
 components/environments/ImportExport.vue      | 112 +++--
 components/firebase/Email.vue                 |  96 ++--
 components/history/graphql/Card.vue           |   2 +-
 components/history/rest/Card.vue              |   2 +-
 components/http/CodegenModal.vue              |  22 +-
 components/http/ImportCurl.vue                |  44 +-
 components/http/TokenList.vue                 |  20 +-
 components/smart/ConfirmModal.vue             |  44 +-
 components/smart/Modal.vue                    |  14 +-
 components/teams/Add.vue                      |  45 +-
 components/teams/Edit.vue                     |  47 +-
 components/teams/Team.vue                     |   2 +-
 pages/graphql.vue                             |  12 +
 pages/index.vue                               |  47 +-
 store/postwoman.js                            | 460 ++++++++++++++++++
 46 files changed, 1144 insertions(+), 758 deletions(-)
 create mode 100644 store/postwoman.js

diff --git a/components/app/Extensions.vue b/components/app/Extensions.vue
index dc2e6801e..102da6fc7 100644
--- a/components/app/Extensions.vue
+++ b/components/app/Extensions.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("extensions") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("extensions") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <p class="info">
         {{ $t("extensions_info1") }}
       </p>
@@ -70,8 +68,7 @@
           </button>
         </a>
       </div>
-    </div>
-    <div slot="footer"></div>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index 6caf56a28..f7f9b9f42 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -57,7 +57,7 @@
           <button v-tooltip="$t('choose_language')" class="icon button">
             <i class="material-icons">translate</i>
           </button>
-          <template slot="popover">
+          <template #popover>
             <div v-for="locale in availableLocales" :key="locale.code">
               <nuxt-link :to="switchLocalePath(locale.code)">
                 <button v-close-popover class="icon button">
diff --git a/components/app/Header.vue b/components/app/Header.vue
index d6c48447f..c4b468c4b 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -71,7 +71,7 @@
           <button v-tooltip="$t('login_with')" class="icon button">
             <i class="material-icons">login</i>
           </button>
-          <template slot="popover">
+          <template #popover>
             <FirebaseLogin @show-email="showEmail = true" />
           </template>
         </v-popover>
@@ -94,7 +94,7 @@
             />
             <i v-else class="material-icons">account_circle</i>
           </button>
-          <template slot="popover">
+          <template #popover>
             <div>
               <nuxt-link v-close-popover :to="localePath('settings')">
                 <button class="icon button">
@@ -114,7 +114,7 @@
           <button v-tooltip="$t('more')" class="icon button">
             <i class="material-icons">drag_indicator</i>
           </button>
-          <template slot="popover">
+          <template #popover>
             <button
               v-close-popover
               class="icon button"
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 039871dbc..3da103d1d 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("shortcuts") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("shortcuts") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <div class="p-2">
         <div>
           <kbd>{{ getSpecialKey() }}</kbd>
@@ -68,8 +66,7 @@
           <label>{{ $t("select_delete_method") }}</label>
         </div>
       </div>
-    </div>
-    <div slot="footer"></div>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/app/Support.vue b/components/app/Support.vue
index 26a6669a2..5d524629a 100644
--- a/components/app/Support.vue
+++ b/components/app/Support.vue
@@ -1,19 +1,16 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("support_us") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("support_us") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <AppContributors />
-    </div>
-    <div slot="footer"></div>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/Add.vue b/components/collections/Add.vue
index 0f87bc67e..25e855914 100644
--- a/components/collections/Add.vue
+++ b/components/collections/Add.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("new_collection") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("new_collection") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="$t('my_new_collection')"
         @keyup.enter="addNewCollection"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="addNewCollection">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="addNewCollection">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/AddFolder.vue b/components/collections/AddFolder.vue
index 3c7a02b32..a8e52753a 100644
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("new_folder") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("new_folder") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="$t('my_new_folder')"
         @keyup.enter="addFolder"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="addFolder">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="addFolder">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/Edit.vue b/components/collections/Edit.vue
index d81e24e6c..75c45b4e3 100644
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("edit_collection") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("edit_collection") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="placeholderCollName"
         @keyup.enter="saveCollection"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="saveCollection">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="saveCollection">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/EditFolder.vue b/components/collections/EditFolder.vue
index 94f012f34..9c6d40a61 100644
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("edit_folder") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("edit_folder") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -19,20 +17,18 @@
         type="text"
         @keyup.enter="editFolder"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="editFolder">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="editFolder">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/EditRequest.vue b/components/collections/EditRequest.vue
index 9031b8bd2..4c524e8b4 100644
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("edit_request") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("edit_request") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="placeholderReqName"
         @keyup.enter="saveRequest"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="saveRequest">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="saveRequest">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index 58bf1ac5d..f3306965c 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -1,76 +1,74 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">
-          {{ $t("import_export") }} {{ $t("collections") }}
-        </h3>
-        <div>
+    <template #header>
+      <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
+      <div>
+        <button
+          v-if="mode == 'import_from_my_collections'"
+          v-tooltip.left="'Back'"
+          class="tooltip-target icon button"
+          @click="
+            mode = 'import_export'
+            mySelectedCollectionID = undefined
+          "
+        >
+          <i class="material-icons">arrow_back</i>
+        </button>
+        <v-popover
+          v-if="
+            mode == 'import_export' && collectionsType.type == 'my-collections'
+          "
+        >
           <button
-            v-if="mode != 'import_export'"
-            v-tooltip.left="'Back'"
+            v-tooltip.left="$t('more')"
             class="tooltip-target icon button"
-            @click="mode = 'import_export'"
           >
-            <i class="material-icons">arrow_back</i>
+            <i class="material-icons">more_vert</i>
           </button>
-          <v-popover
-            v-if="
-              mode == 'import_export' &&
-              collectionsType.type == 'my-collections'
-            "
-          >
-            <button
-              v-tooltip.left="$t('more')"
-              class="tooltip-target icon button"
-            >
-              <i class="material-icons">more_vert</i>
-            </button>
-            <template slot="popover">
-              <div>
-                <button
-                  v-close-popover
-                  class="icon button"
-                  @click="readCollectionGist"
-                >
-                  <i class="material-icons">assignment_returned</i>
-                  <span>{{ $t("import_from_gist") }}</span>
-                </button>
-              </div>
-              <div
-                v-tooltip.bottom="{
-                  content: !currentUser
-                    ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : currentUser.provider !== 'github.com'
-                    ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : null,
-                }"
+          <template #popover>
+            <div>
+              <button
+                v-close-popover
+                class="icon button"
+                @click="readCollectionGist"
               >
-                <button
-                  v-close-popover
-                  :disabled="
-                    !currentUser
-                      ? true
-                      : currentUser.provider !== 'github.com'
-                      ? true
-                      : false
-                  "
-                  class="icon button"
-                  @click="createCollectionGist"
-                >
-                  <i class="material-icons">assignment_turned_in</i>
-                  <span>{{ $t("create_secret_gist") }}</span>
-                </button>
-              </div>
-            </template>
-          </v-popover>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+                <i class="material-icons">assignment_returned</i>
+                <span>{{ $t("import_from_gist") }}</span>
+              </button>
+            </div>
+            <div
+              v-tooltip.bottom="{
+                content: !currentUser
+                  ? $t('login_with_github_to') + $t('create_secret_gist')
+                  : currentUser.provider !== 'github.com'
+                  ? $t('login_with_github_to') + $t('create_secret_gist')
+                  : null,
+              }"
+            >
+              <button
+                v-close-popover
+                :disabled="
+                  !currentUser
+                    ? true
+                    : currentUser.provider !== 'github.com'
+                    ? true
+                    : false
+                "
+                class="icon button"
+                @click="createCollectionGist"
+              >
+                <i class="material-icons">assignment_turned_in</i>
+                <span>{{ $t("create_secret_gist") }}</span>
+              </button>
+            </div>
+          </template>
+        </v-popover>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start">
         <button
           v-tooltip="$t('replace_current')"
@@ -154,22 +152,23 @@
             </option>
           </select>
         </span>
-        <div slot="footer">
-          <div class="row-wrapper">
-            <span></span>
-            <span>
-              <button
-                class="m-2 icon button primary"
-                :disabled="mySelectedCollectionID == undefined"
-                @click="importFromMyCollections"
-              >
-                {{ $t("import") }}
-              </button>
-            </span>
-          </div>
-        </div>
       </div>
-    </div>
+    </template>
+    <template #footer>
+      <div v-if="mode == 'import_from_my_collections'">
+        <span></span>
+        <span>
+          <button
+            class="m-2 icon button"
+            :disabled="mySelectedCollectionID == undefined"
+            @click="importFromMyCollections"
+          >
+            <i class="material-icons">create_new_folder</i>
+            <span>{{ $t("import") }}</span>
+          </button>
+        </span>
+      </div>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index ad02aeb9d..5cae4d17b 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("save_request_as") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("save_request_as") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("token_req_name") }}</label>
       <input
         id="selectLabel"
@@ -39,20 +37,18 @@
         @update-collection="collectionsType.type = $event"
         @update-coll-type="onUpdateCollType"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="saveRequestAs">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="saveRequestAs">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/graphql/Add.vue b/components/collections/graphql/Add.vue
index e77c60ed1..687a6cf90 100644
--- a/components/collections/graphql/Add.vue
+++ b/components/collections/graphql/Add.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("new_collection") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("new_collection") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="$t('my_new_collection')"
         @keyup.enter="addNewCollection"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="addNewCollection">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="addNewCollection">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/graphql/AddFolder.vue b/components/collections/graphql/AddFolder.vue
index 8e5759012..f6b4e080c 100644
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("new_folder") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("new_folder") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="$t('my_new_folder')"
         @keyup.enter="addFolder"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="addFolder">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="addFolder">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index a6405eec4..6b47c0048 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -43,7 +43,7 @@
           >
             <i class="material-icons">more_vert</i>
           </button>
-          <template slot="popover">
+          <template #popover>
             <div>
               <button
                 v-close-popover
diff --git a/components/collections/graphql/Edit.vue b/components/collections/graphql/Edit.vue
index f8c5b90ff..c6c979971 100644
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("edit_collection") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("edit_collection") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="editingCollection.name"
         @keyup.enter="saveCollection"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="saveCollection">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="saveCollection">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/graphql/EditFolder.vue b/components/collections/graphql/EditFolder.vue
index 809c63546..bd0738af6 100644
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("edit_folder") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("edit_folder") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="folder.name"
         @keyup.enter="editFolder"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="editFolder">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="editFolder">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/graphql/EditRequest.vue b/components/collections/graphql/EditRequest.vue
index 580abee59..60dbd1e01 100644
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("edit_request") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("edit_request") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="request.name"
         @keyup.enter="saveRequest"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="saveRequest">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="saveRequest">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index f2b7173de..5d7f61917 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -32,7 +32,7 @@
         <button v-tooltip.left="$t('more')" class="tooltip-target icon button">
           <i class="material-icons">more_vert</i>
         </button>
-        <template slot="popover">
+        <template #popover>
           <div>
             <button
               v-close-popover
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index 1d2e8da91..2174a9b4d 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -1,63 +1,59 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">
-          {{ $t("import_export") }} {{ $t("collections") }}
-        </h3>
-        <div>
-          <v-popover>
-            <button
-              v-tooltip.left="$t('more')"
-              class="tooltip-target icon button"
-            >
-              <i class="material-icons">more_vert</i>
-            </button>
-            <template slot="popover">
-              <div>
-                <button
-                  v-close-popover
-                  class="icon button"
-                  @click="readCollectionGist"
-                >
-                  <i class="material-icons">assignment_returned</i>
-                  <span>{{ $t("import_from_gist") }}</span>
-                </button>
-              </div>
-              <div
-                v-tooltip.bottom="{
-                  content: !currentUser
-                    ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : currentUser.provider !== 'github.com'
-                    ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : null,
-                }"
-              >
-                <button
-                  v-close-popover
-                  :disabled="
-                    !currentUser
-                      ? true
-                      : currentUser.provider !== 'github.com'
-                      ? true
-                      : false
-                  "
-                  class="icon button"
-                  @click="createCollectionGist"
-                >
-                  <i class="material-icons">assignment_turned_in</i>
-                  <span>{{ $t("create_secret_gist") }}</span>
-                </button>
-              </div>
-            </template>
-          </v-popover>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
+    <template #header>
+      <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
+      <div>
+        <v-popover>
+          <button
+            v-tooltip.left="$t('more')"
+            class="tooltip-target icon button"
+          >
+            <i class="material-icons">more_vert</i>
           </button>
-        </div>
+          <template #popover>
+            <div>
+              <button
+                v-close-popover
+                class="icon button"
+                @click="readCollectionGist"
+              >
+                <i class="material-icons">assignment_returned</i>
+                <span>{{ $t("import_from_gist") }}</span>
+              </button>
+            </div>
+            <div
+              v-tooltip.bottom="{
+                content: !currentUser
+                  ? $t('login_with_github_to') + $t('create_secret_gist')
+                  : currentUser.provider !== 'github.com'
+                  ? $t('login_with_github_to') + $t('create_secret_gist')
+                  : null,
+              }"
+            >
+              <button
+                v-close-popover
+                :disabled="
+                  !currentUser
+                    ? true
+                    : currentUser.provider !== 'github.com'
+                    ? true
+                    : false
+                "
+                class="icon button"
+                @click="createCollectionGist"
+              >
+                <i class="material-icons">assignment_turned_in</i>
+                <span>{{ $t("create_secret_gist") }}</span>
+              </button>
+            </div>
+          </template>
+        </v-popover>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <div class="flex flex-col items-start p-2">
         <button
           v-tooltip="$t('replace_current')"
@@ -102,7 +98,7 @@
           </span>
         </button>
       </div>
-    </div>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index b2308559f..55585e1e3 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -29,7 +29,7 @@
         <button v-tooltip="$t('more')" class="tooltip-target icon button">
           <i class="material-icons">more_vert</i>
         </button>
-        <template slot="popover">
+        <template #popover>
           <div>
             <button
               v-close-popover
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 681a7b259..15f379cb8 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -25,6 +25,7 @@
     <CollectionsEdit
       :show="showModalEdit"
       :editing-coll-name="editingCollection ? editingCollection.name : ''"
+      :placeholder-coll-name="editingCollection ? editingCollection.name : ''"
       @hide-modal="displayModalEdit(false)"
       @submit="updateEditingCollection"
     />
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index ce0f4ad7b..ae204a093 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -51,7 +51,7 @@
           >
             <i class="material-icons">more_vert</i>
           </button>
-          <template slot="popover">
+          <template #popover>
             <div>
               <button
                 v-close-popover
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 94a31395a..065afc6f0 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -31,7 +31,7 @@
         <button v-tooltip.left="$t('more')" class="tooltip-target icon button">
           <i class="material-icons">more_vert</i>
         </button>
-        <template slot="popover">
+        <template #popover>
           <div>
             <button
               v-close-popover
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index 8bf909665..090ffed51 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -31,7 +31,7 @@
         <button v-tooltip="$t('more')" class="tooltip-target icon button">
           <i class="material-icons">more_vert</i>
         </button>
-        <template slot="popover">
+        <template #popover>
           <div>
             <button
               v-close-popover
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 26196f177..08f88ae91 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -41,7 +41,7 @@
           >
             <i class="material-icons">more_vert</i>
           </button>
-          <template slot="popover">
+          <template #popover>
             <div>
               <button
                 v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index b4fbf5a31..1d65bf305 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -26,7 +26,7 @@
         >
           <i class="material-icons">more_vert</i>
         </button>
-        <template slot="popover">
+        <template #popover>
           <div>
             <button
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index 43134746c..610e4afab 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -25,7 +25,7 @@
         >
           <i class="material-icons">more_vert</i>
         </button>
-        <template slot="popover">
+        <template #popover>
           <div>
             <button
               v-close-popover
diff --git a/components/environments/Add.vue b/components/environments/Add.vue
index 66c72cc05..1e58354b2 100644
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("new_environment") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("new_environment") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -20,20 +18,18 @@
         :placeholder="$t('my_new_environment')"
         @keyup.enter="addNewEnvironment"
       />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="addNewEnvironment">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="addNewEnvironment">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 72656b70d..3e5fa6eb0 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("edit_environment") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("edit_environment") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
         id="selectLabel"
@@ -82,20 +80,18 @@
           </button>
         </li>
       </ul>
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="saveEnvironment">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="saveEnvironment">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index 96a3a1497..e2beac9eb 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -11,7 +11,7 @@
         <button v-tooltip.left="$t('more')" class="tooltip-target icon button">
           <i class="material-icons">more_vert</i>
         </button>
-        <template slot="popover">
+        <template #popover>
           <div>
             <button
               v-close-popover
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index 52280111c..91b673fb2 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -1,63 +1,61 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">
-          {{ $t("import_export") }} {{ $t("environments") }}
-        </h3>
-        <div>
-          <v-popover>
-            <button
-              v-tooltip.left="$t('more')"
-              class="tooltip-target icon button"
-            >
-              <i class="material-icons">more_vert</i>
-            </button>
-            <template slot="popover">
-              <div>
-                <button
-                  v-close-popover
-                  class="icon button"
-                  @click="readEnvironmentGist"
-                >
-                  <i class="material-icons">assignment_returned</i>
-                  <span>{{ $t("import_from_gist") }}</span>
-                </button>
-              </div>
-              <div
-                v-tooltip.bottom="{
-                  content: !currentUser
-                    ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : currentUser.provider !== 'github.com'
-                    ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : null,
-                }"
-              >
-                <button
-                  v-close-popover
-                  :disabled="
-                    !currentUser
-                      ? true
-                      : currentUser.provider !== 'github.com'
-                      ? true
-                      : false
-                  "
-                  class="icon button"
-                  @click="createEnvironmentGist"
-                >
-                  <i class="material-icons">assignment_turned_in</i>
-                  <span>{{ $t("create_secret_gist") }}</span>
-                </button>
-              </div>
-            </template>
-          </v-popover>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
+    <template #header>
+      <h3 class="heading">
+        {{ $t("import_export") }} {{ $t("environments") }}
+      </h3>
+      <div>
+        <v-popover>
+          <button
+            v-tooltip.left="$t('more')"
+            class="tooltip-target icon button"
+          >
+            <i class="material-icons">more_vert</i>
           </button>
-        </div>
+          <template #popover>
+            <div>
+              <button
+                v-close-popover
+                class="icon button"
+                @click="readEnvironmentGist"
+              >
+                <i class="material-icons">assignment_returned</i>
+                <span>{{ $t("import_from_gist") }}</span>
+              </button>
+            </div>
+            <div
+              v-tooltip.bottom="{
+                content: !currentUser
+                  ? $t('login_with_github_to') + $t('create_secret_gist')
+                  : currentUser.provider !== 'github.com'
+                  ? $t('login_with_github_to') + $t('create_secret_gist')
+                  : null,
+              }"
+            >
+              <button
+                v-close-popover
+                :disabled="
+                  !currentUser
+                    ? true
+                    : currentUser.provider !== 'github.com'
+                    ? true
+                    : false
+                "
+                class="icon button"
+                @click="createEnvironmentGist"
+              >
+                <i class="material-icons">assignment_turned_in</i>
+                <span>{{ $t("create_secret_gist") }}</span>
+              </button>
+            </div>
+          </template>
+        </v-popover>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <div class="flex flex-col items-start p-2">
         <button
           v-tooltip="$t('replace_current')"
@@ -102,7 +100,7 @@
           </span>
         </button>
       </div>
-    </div>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/firebase/Email.vue b/components/firebase/Email.vue
index e6e525123..cf4a1a6e2 100644
--- a/components/firebase/Email.vue
+++ b/components/firebase/Email.vue
@@ -1,16 +1,12 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("login_with") }} {{ $t("email") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div v-if="mode === 'sign-in'" slot="body" class="flex flex-col">
+    <template #header>
+      <h3 class="heading">{{ $t("login_with") }} {{ $t("email") }}</h3>
+      <button class="icon button" @click="hideModal">
+        <i class="material-icons">close</i>
+      </button>
+    </template>
+    <template v-if="mode === 'sign-in'" #body>
       <label for="email"> E-mail </label>
       <input
         id="email"
@@ -25,47 +21,47 @@
         autofocus
         @keyup.enter="signInWithEmail"
       />
-    </div>
-    <div v-else slot="body" class="flex flex-col items-center">
-      <div class="flex justify-center max-w-md p-4 items-center flex-col">
-        <i class="material-icons text-accent" style="font-size: 64px">
-          verified
-        </i>
-        <h3 class="font-bold my-2 text-center text-lg">
-          {{ $t("we_sent_magic_link") }}
-        </h3>
-        <p class="text-center">
-          {{ $t("we_sent_magic_link_description", { email: form.email }) }}
-        </p>
-        <p class="info">{{ $t("check_your_inbox") }}</p>
+    </template>
+    <template v-else #body>
+      <div class="flex flex-col items-center">
+        <div class="flex justify-center max-w-md p-4 items-center flex-col">
+          <i class="material-icons text-accent" style="font-size: 64px">
+            verified
+          </i>
+          <h3 class="font-bold my-2 text-center text-lg">
+            {{ $t("we_sent_magic_link") }}
+          </h3>
+          <p class="text-center">
+            {{ $t("we_sent_magic_link_description", { email: form.email }) }}
+          </p>
+          <p class="info">{{ $t("check_your_inbox") }}</p>
+        </div>
       </div>
-    </div>
-    <div v-if="mode === 'sign-in'" slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button v-if="signingInWithEmail" class="icon button" type="button">
-            {{ $t("loading") }}
-          </button>
-          <button
-            v-else
-            class="rounded-md button"
-            :disabled="
-              form.email.length !== 0
-                ? emailRegex.test(form.email)
-                  ? false
-                  : true
+    </template>
+    <template v-if="mode === 'sign-in'" #footer>
+      <span></span>
+      <span>
+        <button v-if="signingInWithEmail" class="icon button" type="button">
+          {{ $t("loading") }}
+        </button>
+        <button
+          v-else
+          class="rounded-md button"
+          :disabled="
+            form.email.length !== 0
+              ? emailRegex.test(form.email)
+                ? false
                 : true
-            "
-            type="button"
-            tabindex="-1"
-            @click="signInWithEmail"
-          >
-            {{ $t("send_magic_link") }}
-          </button>
-        </span>
-      </div>
-    </div>
+              : true
+          "
+          type="button"
+          tabindex="-1"
+          @click="signInWithEmail"
+        >
+          {{ $t("send_magic_link") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index bc7bb1954..d0d10ac99 100644
--- a/components/history/graphql/Card.vue
+++ b/components/history/graphql/Card.vue
@@ -46,7 +46,7 @@
         >
           <i class="material-icons">more_vert</i>
         </button>
-        <template slot="popover">
+        <template #popover>
           <div>
             <button
               v-close-popover
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index 75794b3ee..150731f15 100644
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -53,7 +53,7 @@
         <button v-tooltip="$t('options')" class="tooltip-target icon button">
           <i class="material-icons">more_vert</i>
         </button>
-        <template slot="popover">
+        <template #popover>
           <div>
             <button
               v-close-popover
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 015dc9b9c..a35c416b0 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("generate_code") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("generate_code") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label for="requestType">{{ $t("choose_language") }}</label>
       <span class="select-wrapper">
         <v-popover>
@@ -26,7 +24,7 @@
             readonly
             autofocus
           />
-          <template slot="popover">
+          <template #popover>
             <div v-for="gen in codegens" :key="gen.id">
               <button
                 v-close-popover
@@ -68,7 +66,7 @@
         }"
         styles="rounded-b-lg"
       />
-    </div>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index ec50bcbfd..fbc73146b 100644
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("import_curl") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("import_curl") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <textarea
         id="import-curl"
         class="textarea"
@@ -18,20 +16,18 @@
         rows="8"
         :placeholder="$t('enter_curl')"
       ></textarea>
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="handleImport">
-            {{ $t("import") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="handleImport">
+          {{ $t("import") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/http/TokenList.vue b/components/http/TokenList.vue
index 2a9555439..b24312f19 100644
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -1,16 +1,14 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("manage_token") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("manage_token") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <div class="row-wrapper">
         <label>{{ $t("token_list") }}</label>
         <div v-if="tokens.length != 0">
@@ -64,7 +62,7 @@
       <p v-if="tokens.length === 0" class="info">
         {{ $t("empty") }}
       </p>
-    </div>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/smart/ConfirmModal.vue b/components/smart/ConfirmModal.vue
index 78510c3d8..aadbe24c1 100644
--- a/components/smart/ConfirmModal.vue
+++ b/components/smart/ConfirmModal.vue
@@ -1,31 +1,27 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="heading">{{ $t("confirm") }}</h3>
-        <div>
-          <button class="icon button" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+    <template #header>
+      <h3 class="heading">{{ $t("confirm") }}</h3>
+      <div>
+        <button class="icon button" @click="hideModal">
+          <i class="material-icons">close</i>
+        </button>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
+    </template>
+    <template #body>
       <label>{{ title }}</label>
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ no }}
-          </button>
-          <button class="icon button primary" @click="resolve">
-            {{ yes }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ no }}
+        </button>
+        <button class="icon button primary" @click="resolve">
+          {{ yes }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 6dad8c45d..ebfe86a54 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -11,15 +11,21 @@
       <div class="modal-wrapper">
         <div class="modal-container">
           <div class="modal-header">
-            <slot name="header"></slot>
+            <div class="row-wrapper">
+              <slot name="header"></slot>
+            </div>
           </div>
           <div class="modal-body">
-            <slot name="body"></slot>
-            <!-- <div class="top fade"></div>
+            <div class="flex flex-col">
+              <slot name="body"></slot>
+              <!-- <div class="top fade"></div>
             <div class="bottom fade"></div> -->
+            </div>
           </div>
           <div v-if="hasFooterSlot" class="modal-footer">
-            <slot name="footer"></slot>
+            <div class="row-wrapper">
+              <slot name="footer"></slot>
+            </div>
           </div>
         </div>
       </div>
diff --git a/components/teams/Add.vue b/components/teams/Add.vue
index 2b6f3c01f..13530c3cd 100644
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -1,20 +1,17 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
+    <template #header>
+      <h3 class="heading">{{ $t("new_team") }}</h3>
+      <button class="icon button" @click="hideModal">
+        <i class="material-icons">close</i>
+      </button>
+    </template>
+    <template #body>
       <ul>
         <li>
-          <div class="row-wrapper">
-            <h3 class="heading">{{ $t("new_team") }}</h3>
-            <div>
-              <button class="icon button" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
+          <label>{{ $t("label") }}</label>
         </li>
       </ul>
-    </div>
-    <div slot="body">
       <ul>
         <li>
           <input
@@ -26,20 +23,18 @@
           />
         </li>
       </ul>
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="addNewTeam">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="addNewTeam">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index aaa7ed636..768922ead 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -1,20 +1,19 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
+    <template #header>
+      <h3 class="heading">{{ $t("edit_team") }}</h3>
+      <button class="icon button" @click="hideModal">
+        <i class="material-icons">close</i>
+      </button>
+    </template>
+    <template #body>
       <ul>
         <li>
           <div class="row-wrapper">
-            <h3 class="heading">{{ $t("edit_team") }}</h3>
-            <div>
-              <button class="icon button" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
+            <label>{{ $t("label") }}</label>
           </div>
         </li>
       </ul>
-    </div>
-    <div slot="body">
       <ul>
         <li>
           <input
@@ -70,7 +69,7 @@
                 "
                 readonly
               />
-              <template slot="popover">
+              <template #popover>
                 <div>
                   <button
                     v-close-popover
@@ -150,7 +149,7 @@
                 "
                 readonly
               />
-              <template slot="popover">
+              <template #popover>
                 <div>
                   <button
                     v-close-popover
@@ -203,20 +202,18 @@
           </button>
         </li>
       </ul>
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon button" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon button primary" @click="saveTeam">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span></span>
+      <span>
+        <button class="icon button" @click="hideModal">
+          {{ $t("cancel") }}
+        </button>
+        <button class="icon button primary" @click="saveTeam">
+          {{ $t("save") }}
+        </button>
+      </span>
+    </template>
   </SmartModal>
 </template>
 
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index 0a11f5362..7358287b6 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -14,7 +14,7 @@
       <button v-tooltip.left="$t('more')" class="tooltip-target icon button">
         <i class="material-icons">more_vert</i>
       </button>
-      <template slot="popover">
+      <template #popover>
         <div v-if="team.myRole === 'OWNER'">
           <button
             v-close-popover
diff --git a/pages/graphql.vue b/pages/graphql.vue
index e920a8715..6ec239bff 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -530,6 +530,9 @@ export default {
     }
   },
   computed: {
+    selectedRequest() {
+      return this.$store.state.postwoman.selectedGraphqlRequest
+    },
     filteredQueryFields() {
       return this.getFilteredGraphqlFields({
         filterText: this.graphqlFieldsFilterText,
@@ -606,6 +609,15 @@ export default {
       },
     },
   },
+  watch: {
+    selectedRequest(newValue) {
+      if (!newValue) return
+      this.url = newValue.url
+      this.gqlQueryString = newValue.query
+      this.headers = newValue.headers
+      this.variableString = newValue.variables
+    },
+  },
   mounted() {
     if (
       this.$store.state.gql.schemaIntrospection &&
diff --git a/pages/index.vue b/pages/index.vue
index f3e1d995d..f69c8a7b7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -16,7 +16,7 @@
                     :readonly="!customMethod"
                     autofocus
                   />
-                  <template slot="popover">
+                  <template #popover>
                     <div
                       v-for="(methodMenuItem, index) in methodMenuItems"
                       :key="`method-${index}`"
@@ -114,7 +114,7 @@
                       v-model="contentType"
                       readonly
                     />
-                    <template slot="popover">
+                    <template #popover>
                       <div
                         v-for="(
                           contentTypeMenuItem, index
@@ -680,17 +680,15 @@
       v-if="showTokenRequestList"
       @close="showTokenRequestList = false"
     >
-      <div slot="header">
-        <div class="row-wrapper">
-          <h3 class="heading">{{ $t("manage_token_req") }}</h3>
-          <div>
-            <button class="icon button" @click="showTokenRequestList = false">
-              <i class="material-icons">close</i>
-            </button>
-          </div>
+      <template #header>
+        <h3 class="heading">{{ $t("manage_token_req") }}</h3>
+        <div>
+          <button class="icon button" @click="showTokenRequestList = false">
+            <i class="material-icons">close</i>
+          </button>
         </div>
-      </div>
-      <div slot="body" class="flex flex-col">
+      </template>
+      <template #body>
         <div class="row-wrapper">
           <label for="token-req-list">{{ $t("token_req_list") }}</label>
           <div>
@@ -745,17 +743,15 @@
           rows="7"
           v-model="tokenReqDetails"
         ></textarea>
-      </div>
-      <div slot="footer">
-        <div class="row-wrapper">
-          <span></span>
-          <span>
-            <button class="icon button primary" @click="addOAuthTokenReq">
-              {{ $t("save_token_req") }}
-            </button>
-          </span>
-        </div>
-      </div>
+      </template>
+      <template #footer>
+        <span></span>
+        <span>
+          <button class="icon button primary" @click="addOAuthTokenReq">
+            {{ $t("save_token_req") }}
+          </button>
+        </span>
+      </template>
     </SmartModal>
   </div>
 </template>
@@ -898,7 +894,7 @@ export default {
       },
       deep: true,
     },
-    selectedRequest(newValue, oldValue) {
+    selectedRequest(newValue) {
       // @TODO: Convert all variables to single request variable
       if (!newValue) return
       this.uri = newValue.url + newValue.path
@@ -1216,6 +1212,9 @@ export default {
         })
       },
     },
+    selectedRequest() {
+      return this.$store.state.postwoman.selectedRequest
+    },
     requestName() {
       return this.name
     },
diff --git a/store/postwoman.js b/store/postwoman.js
new file mode 100644
index 000000000..792c22056
--- /dev/null
+++ b/store/postwoman.js
@@ -0,0 +1,460 @@
+import Vue from "vue"
+
+export const SETTINGS_KEYS = [
+  /**
+   * Whether or not to enable scrolling to a specified element, when certain
+   * actions are triggered.
+   */
+  "SCROLL_INTO_ENABLED",
+
+  /**
+   * Whether or not requests should be proxied.
+   */
+  "PROXY_ENABLED",
+
+  /**
+   * The URL of the proxy to connect to for requests.
+   */
+  "PROXY_URL",
+
+  /**
+   * The security key of the proxy.
+   */
+  "PROXY_KEY",
+
+  /**
+   * An array of properties to exclude from the URL.
+   * e.g. 'auth'
+   */
+  "URL_EXCLUDES",
+
+  /**
+   * A boolean value indicating whether to use the browser extensions
+   * to run the requests
+   */
+  "EXTENSIONS_ENABLED",
+
+  /**
+   * A boolean value indicating whether to use the URL bar experiments
+   */
+  "EXPERIMENTAL_URL_BAR_ENABLED",
+]
+
+export const state = () => ({
+  settings: {},
+  editingEnvironment: {},
+  selectedRequest: {},
+  selectedGraphqlRequest: {},
+  editingRequest: {},
+})
+
+export const mutations = {
+  applySetting({ settings }, setting) {
+    if (
+      setting === null ||
+      !(setting instanceof Array) ||
+      setting.length !== 2
+    ) {
+      throw new Error(
+        "You must provide a setting (array in the form [key, value])"
+      )
+    }
+
+    const [key, value] = setting
+    // Do not just remove this check.
+    // Add your settings key to the SETTINGS_KEYS array at the
+    // top of the file.
+    // This is to ensure that application settings remain documented.
+    if (!SETTINGS_KEYS.includes(key)) {
+      throw new Error(`The settings structure does not include the key ${key}`)
+    }
+
+    settings[key] = value
+  },
+
+  removeVariables({ editingEnvironment }, value) {
+    editingEnvironment.variables = value
+  },
+
+  setEditingEnvironment(state, value) {
+    state.editingEnvironment = { ...value }
+  },
+
+  setVariableKey({ editingEnvironment }, { index, value }) {
+    editingEnvironment.variables[index].key = value
+  },
+
+  setVariableValue({ editingEnvironment }, { index, value }) {
+    editingEnvironment.variables[index].value = testValue(value)
+  },
+
+  removeVariable({ editingEnvironment }, variables) {
+    editingEnvironment.variables = variables
+  },
+
+  addVariable({ editingEnvironment }, value) {
+    editingEnvironment.variables.push(value)
+  },
+
+  replaceEnvironments(state, environments) {
+    state.environments = environments
+  },
+
+  importAddEnvironments(state, { environments, confirmation }) {
+    const duplicateEnvironment = environments.some((item) => {
+      return state.environments.some((item2) => {
+        return item.name.toLowerCase() === item2.name.toLowerCase()
+      })
+    })
+    if (duplicateEnvironment) {
+      this.$toast.info("Duplicate environment")
+      return
+    }
+    state.environments = [...state.environments, ...environments]
+
+    let index = 0
+    for (const environment of state.environments) {
+      environment.environmentIndex = index
+      index += 1
+    }
+    this.$toast.info(confirmation, {
+      icon: "folder_shared",
+    })
+  },
+
+  removeEnvironment({ environments }, environmentIndex) {
+    environments.splice(environmentIndex, 1)
+  },
+
+  saveEnvironment({ environments }, payload) {
+    const { environment, environmentIndex } = payload
+    const { name } = environment
+    const duplicateEnvironment =
+      environments.length === 1
+        ? false
+        : environments.some(
+            (item) =>
+              item.environmentIndex !== environmentIndex &&
+              item.name.toLowerCase() === name.toLowerCase()
+          )
+    if (duplicateEnvironment) {
+      this.$toast.info("Duplicate environment")
+      return
+    }
+    environments[environmentIndex] = environment
+  },
+
+  replaceCollections(state, item) {
+    const collections = item.data
+    const flag = item.flag
+    if (flag === "rest") state.collections = collections
+    else state.collectionsGraphql = collections
+  },
+
+  importCollections(state, item) {
+    const collections = item.data
+    const flag = item.flag
+    if (flag === "rest")
+      state.collections = [...state.collections, ...collections]
+    else
+      state.collectionsGraphql = [...state.collectionsGraphql, ...collections]
+
+    let index = 0
+    for (const collection of collections) {
+      collection.collectionIndex = index
+      index += 1
+    }
+  },
+
+  addNewCollection({ collections, collectionsGraphql }, collection) {
+    const name = collection.name
+    const flag = collection.flag
+    let duplicateCollection = null
+    if (flag === "rest") {
+      duplicateCollection = collections.some(
+        (item) => item.name.toLowerCase() === name.toLowerCase()
+      )
+    } else {
+      duplicateCollection = collectionsGraphql.some(
+        (item) => item.name.toLowerCase() === name.toLowerCase()
+      )
+    }
+    if (duplicateCollection) {
+      this.$toast.info("Duplicate collection")
+      return
+    }
+    if (flag === "rest") {
+      collections.push({
+        name: "",
+        folders: [],
+        requests: [],
+        ...collection,
+      })
+    } else {
+      collectionsGraphql.push({
+        name: "",
+        folders: [],
+        requests: [],
+        ...collection,
+      })
+    }
+  },
+
+  removeCollection({ collections, collectionsGraphql }, payload) {
+    const { collectionIndex, flag } = payload
+    if (flag === "rest") collections.splice(collectionIndex, 1)
+    else collectionsGraphql.splice(collectionIndex, 1)
+  },
+
+  editCollection({ collections, collectionsGraphql }, payload) {
+    const { collection, collectionIndex, flag } = payload
+    const { name } = collection
+    let duplicateCollection = null
+    if (flag === "rest") {
+      duplicateCollection = collections.some(
+        (item) => item.name.toLowerCase() === name.toLowerCase()
+      )
+    } else {
+      duplicateCollection = collectionsGraphql.some(
+        (item) => item.name.toLowerCase() === name.toLowerCase()
+      )
+    }
+    if (duplicateCollection) {
+      this.$toast.info("Duplicate collection")
+      return
+    }
+    if (flag === "rest") collections[collectionIndex] = collection
+    else collectionsGraphql[collectionIndex] = collection
+  },
+
+  addFolder({ collections, collectionsGraphql }, payload) {
+    const { name, path, flag } = payload
+    const newFolder = {
+      name,
+      requests: [],
+      folders: [],
+    }
+
+    // Walk from collections to destination with the path
+    const indexPaths = path.split("/").map((x) => parseInt(x))
+
+    let target = null
+    if (flag === "rest") target = collections[indexPaths.shift()]
+    else target = collectionsGraphql[indexPaths.shift()]
+
+    while (indexPaths.length > 0) target = target.folders[indexPaths.shift()]
+
+    target.folders.push(newFolder)
+  },
+
+  editFolder({ collections, collectionsGraphql }, payload) {
+    const { collectionIndex, folder, folderIndex, folderName, flag } = payload
+    let collection = null
+    if (flag === "rest") collection = collections[collectionIndex]
+    else collection = collectionsGraphql[collectionIndex]
+
+    const parentFolder = findFolder(folderName, collection, true)
+    if (parentFolder && parentFolder.folders) {
+      Vue.set(parentFolder.folders, folderIndex, folder)
+    }
+  },
+
+  removeFolder({ collections, collectionsGraphql }, payload) {
+    const { collectionIndex, folderIndex, folderName, flag } = payload
+    let collection = null
+    if (flag === "rest") collection = collections[collectionIndex]
+    else collection = collectionsGraphql[collectionIndex]
+
+    const parentFolder = findFolder(folderName, collection, true)
+    if (parentFolder && parentFolder.folders) {
+      parentFolder.folders.splice(folderIndex, 1)
+    }
+  },
+
+  editRequest({ collections, collectionsGraphql }, payload) {
+    const {
+      requestCollectionIndex,
+      requestFolderName,
+      requestFolderIndex,
+      requestNew,
+      requestIndex,
+      flag,
+    } = payload
+    let collection = null
+    if (flag === "rest") collection = collections[requestCollectionIndex]
+    else collection = collectionsGraphql[requestCollectionIndex]
+
+    if (requestFolderIndex === -1) {
+      Vue.set(collection.requests, requestIndex, requestNew)
+      return
+    }
+
+    const folder = findFolder(requestFolderName, collection, false)
+    Vue.set(folder.requests, requestIndex, requestNew)
+  },
+
+  saveRequestAs({ collections, collectionsGraphql }, payload) {
+    let { request } = payload
+    const { collectionIndex, folderName, requestIndex, flag } = payload
+
+    if (flag === "rest") {
+      // Filter out all file inputs
+      request = {
+        ...request,
+        bodyParams: request.bodyParams.map((param) =>
+          param?.value?.[0] instanceof File ? { ...param, value: "" } : param
+        ),
+      }
+    }
+
+    const specifiedCollection = collectionIndex !== undefined
+    const specifiedFolder = folderName !== undefined
+    const specifiedRequest = requestIndex !== undefined
+
+    if (specifiedCollection && specifiedFolder && specifiedRequest) {
+      const folder = findFolder(
+        folderName,
+        flag === "rest"
+          ? collections[collectionIndex]
+          : collectionsGraphql[collectionIndex]
+      )
+      Vue.set(folder.requests, requestIndex, request)
+    } else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
+      const folder = findFolder(
+        folderName,
+        flag === "rest"
+          ? collections[collectionIndex]
+          : collectionsGraphql[collectionIndex]
+      )
+      const requests = folder.requests
+      const lastRequestIndex = requests.length - 1
+      Vue.set(requests, lastRequestIndex + 1, request)
+    } else if (specifiedCollection && !specifiedFolder && specifiedRequest) {
+      const requests =
+        flag === "rest"
+          ? collections[collectionIndex].requests
+          : collectionsGraphql[collectionIndex].requests
+      Vue.set(requests, requestIndex, request)
+    } else if (specifiedCollection && !specifiedFolder && !specifiedRequest) {
+      const requests =
+        flag === "rest"
+          ? collections[collectionIndex].requests
+          : collectionsGraphql[collectionIndex].requests
+      const lastRequestIndex = requests.length - 1
+      Vue.set(requests, lastRequestIndex + 1, request)
+    }
+  },
+
+  removeRequest({ collections, collectionsGraphql }, payload) {
+    const { collectionIndex, folderName, requestIndex, flag } = payload
+    let collection = null
+    if (flag === "rest") collection = collections[collectionIndex]
+    else collection = collectionsGraphql[collectionIndex]
+
+    if (collection.name === folderName) {
+      collection.requests.splice(requestIndex, 1)
+      return
+    }
+    const folder = findFolder(folderName, collection, false)
+
+    if (folder) {
+      folder.requests.splice(requestIndex, 1)
+    }
+  },
+
+  selectRequest(state, { request }) {
+    state.selectedRequest = Object.assign({}, request)
+  },
+
+  selectGraphqlRequest(state, { request }) {
+    state.selectedGraphqlRequest = Object.assign({}, request)
+  },
+
+  moveRequest({ collections, collectionsGraphql }, payload) {
+    const {
+      oldCollectionIndex,
+      newCollectionIndex,
+      newFolderIndex,
+      newFolderName,
+      oldFolderName,
+      requestIndex,
+      flag,
+    } = payload
+    const isCollection = newFolderIndex === -1
+    let oldCollection = null
+    if (flag === "rest") oldCollection = collections[oldCollectionIndex]
+    else oldCollection = collectionsGraphql[oldCollectionIndex]
+    let newCollection = null
+    if (flag === "rest") newCollection = collections[newCollectionIndex]
+    else newCollection = collectionsGraphql[newCollectionIndex]
+    const request = findRequest(oldFolderName, oldCollection, requestIndex)
+
+    if (isCollection) {
+      newCollection.requests.push(request)
+      return
+    }
+
+    if (!isCollection) {
+      const folder = findFolder(newFolderName, newCollection, false)
+      if (folder) {
+        folder.requests.push(request)
+      }
+    }
+  },
+}
+
+function testValue(myValue) {
+  try {
+    return JSON.parse(myValue)
+  } catch (ex) {
+    // Now we know it's a string just leave it as a string value.
+    return myValue
+  }
+}
+
+function findRequest(folderName, currentFolder, requestIndex) {
+  let selectedFolder, result
+
+  if (folderName === currentFolder.name) {
+    const request = currentFolder.requests[requestIndex]
+    currentFolder.requests.splice(requestIndex, 1)
+    return request
+  } else {
+    for (let i = 0; i < currentFolder.folders.length; i += 1) {
+      selectedFolder = currentFolder.folders[i]
+
+      result = findRequest(folderName, selectedFolder, requestIndex)
+
+      if (result !== false) {
+        return result
+      }
+    }
+    return false
+  }
+}
+
+function findFolder(folderName, currentFolder, returnParent, parentFolder) {
+  let selectedFolder, result
+
+  if (folderName === currentFolder.name && returnParent) {
+    return parentFolder
+  } else if (folderName === currentFolder.name && !returnParent) {
+    return currentFolder
+  } else {
+    for (let i = 0; i < currentFolder.folders.length; i++) {
+      selectedFolder = currentFolder.folders[i]
+
+      result = findFolder(
+        folderName,
+        selectedFolder,
+        returnParent,
+        currentFolder
+      )
+
+      if (result !== false) {
+        return result
+      }
+    }
+    return false
+  }
+}