chore: bump deps + refactor: consistent import / export modal

components/collections/ImportExport.vue

@@ -72,7 +72,7 @@
           class="icon"
           @click="openDialogChooseFileToReplaceWith"
         >
-          <i class="material-icons">create_new_folder</i>
+          <i class="material-icons">folder_special</i>
           <span>{{ $t("replace_json") }}</span>
           <input
             ref="inputChooseFileToReplaceWith"
@@ -87,7 +87,7 @@
           class="icon"
           @click="openDialogChooseFileToImportFrom"
         >
-          <i class="material-icons">folder_special</i>
+          <i class="material-icons">create_new_folder</i>
           <span>{{ $t("import_json") }}</span>
           <input
             ref="inputChooseFileToImportFrom"
@@ -99,25 +99,22 @@
         </button>
         <button
           v-if="collectionsType.type == 'team-collections'"
-          v-tooltip="$t('replace_current')"
+          v-tooltip="$t('preserve_current')"
           class="icon"
           @click="mode = 'import_from_my_collections'"
         >
-          <i class="material-icons">folder_special</i>
-          <span>{{ "Import from My Collections" }}</span>
+          <i class="material-icons">folder_shared</i>
+          <span>{{ $t("import_from_my_collections") }}</span>
         </button>
         <button
-          v-tooltip="$t('show_code')"
+          v-tooltip="$t('download_file')"
           class="icon"
-          @click="
-            () => {
-              mode = 'export_as_json'
-              getJSONCollection()
-            }
-          "
+          @click="exportJSON"
         >
-          <i class="material-icons">folder_special</i>
-          <span>{{ "Export As JSON" }}</span>
+          <i class="material-icons">drive_file_move</i>
+          <span>
+            {{ $t("export_as_json") }}
+          </span>
         </button>
       </div>
       <div v-if="mode == 'import_from_my_collections'">
@@ -149,26 +146,19 @@
             </option>
           </select>
         </span>
-        <button
-          class="m-2 icon primary"
-          :disabled="mySelectedCollectionID == undefined"
-          @click="importFromMyCollections"
-        >
-          {{ $t("import") }}
-        </button>
-      </div>
-      <div v-if="mode == 'export_as_json'">
-        <textarea v-model="collectionJson" rows="8" readonly></textarea>
-        <div class="row-wrapper">
-          <span class="m-2">
-            <button
-              v-tooltip="$t('download_file')"
-              class="icon primary"
-              @click="exportJSON"
-            >
-              {{ $t("export") }}
-            </button>
-          </span>
+        <div slot="footer">
+          <div class="row-wrapper">
+            <span></span>
+            <span>
+              <button
+                class="m-2 icon primary"
+                :disabled="mySelectedCollectionID == undefined"
+                @click="importFromMyCollections"
+              >
+                {{ $t("import") }}
+              </button>
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -399,6 +389,7 @@ export default {
       return this.collectionJson
     },
     exportJSON() {
+      this.getJSONCollection()
       let text = this.collectionJson
       text = text.replace(/\n/g, "\r\n")
       const blob = new Blob([text], {

components/collections/graphql/ImportExport.vue

@@ -59,7 +59,7 @@
           class="icon"
           @click="openDialogChooseFileToReplaceWith"
         >
-          <i class="material-icons">create_new_folder</i>
+          <i class="material-icons">folder_special</i>
           <span>{{ $t("replace_json") }}</span>
           <input
             ref="inputChooseFileToReplaceWith"
@@ -74,7 +74,7 @@
           class="icon"
           @click="openDialogChooseFileToImportFrom"
         >
-          <i class="material-icons">folder_special</i>
+          <i class="material-icons">create_new_folder</i>
           <span>{{ $t("import_json") }}</span>
           <input
             ref="inputChooseFileToImportFrom"
@@ -84,30 +84,16 @@
             @change="importFromJSON"
           />
         </button>
-      </div>
-      <div v-if="showJsonCode" class="row-wrapper">
-        <textarea v-model="collectionJson" rows="8" readonly></textarea>
-      </div>
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span>
-          <SmartToggle :on="showJsonCode" @change="showJsonCode = $event">
-            {{ $t("show_code") }}
-          </SmartToggle>
-        </span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button
-            v-tooltip="$t('download_file')"
-            class="icon primary"
-            @click="exportJSON"
-          >
-            {{ $t("export") }}
-          </button>
-        </span>
+        <button
+          v-tooltip="$t('download_file')"
+          class="icon"
+          @click="exportJSON"
+        >
+          <i class="material-icons">drive_file_move</i>
+          <span>
+            {{ $t("export_as_json") }}
+          </span>
+        </button>
       </div>
     </div>
   </SmartModal>
@@ -128,7 +114,6 @@ export default {
   data() {
     return {
       fb,
-      showJsonCode: false,
     }
   },
   subscriptions() {

components/environments/ImportExport.vue

@@ -61,7 +61,7 @@
           class="icon"
           @click="openDialogChooseFileToReplaceWith"
         >
-          <i class="material-icons">create_new_folder</i>
+          <i class="material-icons">folder_special</i>
           <span>{{ $t("replace_json") }}</span>
           <input
             ref="inputChooseFileToReplaceWith"
@@ -76,7 +76,7 @@
           class="icon"
           @click="openDialogChooseFileToImportFrom"
         >
-          <i class="material-icons">folder_special</i>
+          <i class="material-icons">create_new_folder</i>
           <span>{{ $t("import_json") }}</span>
           <input
             ref="inputChooseFileToImportFrom"
@@ -86,30 +86,16 @@
             @change="importFromJSON"
           />
         </button>
-      </div>
-      <div v-if="showJsonCode" class="row-wrapper">
-        <textarea v-model="environmentJson" rows="8" readonly></textarea>
-      </div>
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span>
-          <SmartToggle :on="showJsonCode" @change="showJsonCode = $event">
-            {{ $t("show_code") }}
-          </SmartToggle>
-        </span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button
-            v-tooltip="$t('download_file')"
-            class="icon primary"
-            @click="exportJSON"
-          >
-            {{ $t("export") }}
-          </button>
-        </span>
+        <button
+          v-tooltip="$t('download_file')"
+          class="icon"
+          @click="exportJSON"
+        >
+          <i class="material-icons">drive_file_move</i>
+          <span>
+            {{ $t("export_as_json") }}
+          </span>
+        </button>
       </div>
     </div>
   </SmartModal>
@@ -117,7 +103,11 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import { environments$, replaceEnvironments, appendEnvironments } from "~/newstore/environments"
+import {
+  environments$,
+  replaceEnvironments,
+  appendEnvironments,
+} from "~/newstore/environments"
 
 export default {
   props: {
@@ -126,12 +116,11 @@ export default {
   data() {
     return {
       fb,
-      showJsonCode: false,
     }
   },
   subscriptions() {
     return {
-      environments: environments$
+      environments: environments$,
     }
   },
   computed: {