Merge branch 'master' into feat/extension-toggle

assets/css/styles.scss

@@ -558,7 +558,6 @@ code {
   transition: all 0.2s ease-in-out;
   user-select: text;
   width: calc(100% - 8px);
-  min-width: 128px;
   resize: vertical;
   text-overflow: ellipsis;
 
@@ -570,6 +569,17 @@ code {
   }
 }
 
+.method {
+  cursor: pointer;
+
+  &:hover,
+  &:active,
+  &:focus {
+    box-shadow: inset 0 0 0 2px var(--fg-light-color);
+    transition: all 0.2s ease-in-out;
+  }
+}
+
 pre {
   display: grid;
 }
@@ -783,21 +793,12 @@ ol li {
 }
 
 #send {
-  // #hidden-message {
-  //   display: none;
-  // }
-
   &.show {
     display: flex;
     position: fixed;
     top: 12px;
     right: 12px;
     z-index: 2;
-
-    // #hidden-message {
-    //   display: block;
-    //   margin-left: 4px;
-    // }
   }
 }
 

components/collections/index.vue

@@ -4,7 +4,7 @@ TODO:
 -->
 
 <template>
-  <div class="collections-wrapper">
+  <pw-section class="yellow" :label="$t('collections')" ref="collections">
     <addCollection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <editCollection
       :show="showModalEdit"
@@ -92,7 +92,7 @@ TODO:
         <span>{{ $t("generate_docs") }}</span>
       </button>
     </nuxt-link>
-  </div>
+  </pw-section>
 </template>
 
 <style scoped lang="scss">
@@ -113,6 +113,7 @@ import { fb } from "../../functions/fb";
 export default {
   components: {
     collection,
+    "pw-section": () => import("../section"),
     addCollection: () => import("./addCollection"),
     addFolder: () => import("./addFolder"),
     editCollection: () => import("./editCollection"),

lang/en-US.js

@@ -27,7 +27,6 @@ export default {
   method: "Method",
   path: "Path",
   label: "Label",
-  again: "Again",
   content_type: "Content Type",
   raw_input: "Raw input",
   parameter_list: "Parameter List",

package-lock.json

@@ -1678,15 +1678,15 @@
             }
         },
         "@nuxtjs/axios": {
-            "version": "5.9.4",
+            "version": "5.9.5",
-            "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.9.4.tgz",
+            "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.9.5.tgz",
-            "integrity": "sha512-lwugsdVU4BEyY7rnYSsipGh4qlqEJOyForxF9C9wttVVT5IBvLlHiPE6Ownxl7gbqXKa819UKOqIPmb94DVV9A==",
+            "integrity": "sha512-5sMsl5PbNSbAOou75wN2ztDAfGi6pU12zZQvfkDBz3s9KnKST/Azfc1FLw2Y8TR4UaDv074vt20oxK+z7AnH1A==",
             "requires": {
                 "@nuxtjs/proxy": "^1.3.3",
                 "axios": "^0.19.2",
                 "axios-retry": "^3.1.2",
                 "consola": "^2.11.3",
-                "defu": "^0.0.4"
+                "defu": "^1.0.0"
             },
             "dependencies": {
                 "consola": {
@@ -1695,9 +1695,9 @@
                     "integrity": "sha512-aoW0YIIAmeftGR8GSpw6CGQluNdkWMWh3yEFjH/hmynTYnMtibXszii3lxCXmk8YxJtI3FAK5aTiquA5VH68Gw=="
                 },
                 "defu": {
-                    "version": "0.0.4",
+                    "version": "1.0.0",
-                    "resolved": "https://registry.npmjs.org/defu/-/defu-0.0.4.tgz",
+                    "resolved": "https://registry.npmjs.org/defu/-/defu-1.0.0.tgz",
-                    "integrity": "sha512-rgzSYjB7bq5P6uPTPOlFYy/hw4SR/Ml+SM/ZlRx1BEcgUmcTA8yqnzByRiA4npIuJPb1uRJo6ROx++Xs5QooqQ=="
+                    "integrity": "sha512-1Y1KRFxiiq+LYsZ3iP7xYSR8bHfmHFOUpDunZCN1ld1fGfDJWJIvkUBtjl3apnBwPuJtL/H7cwwlLYX8xPkraQ=="
                 }
             }
         },
@@ -1724,11 +1724,11 @@
             }
         },
         "@nuxtjs/pwa": {
-            "version": "3.0.0-beta.19",
+            "version": "3.0.0-beta.20",
-            "resolved": "https://registry.npmjs.org/@nuxtjs/pwa/-/pwa-3.0.0-beta.19.tgz",
+            "resolved": "https://registry.npmjs.org/@nuxtjs/pwa/-/pwa-3.0.0-beta.20.tgz",
-            "integrity": "sha512-5c7CB2qrrlpu7BmJeWX9GN//uK1SiEzBbT+ykH11ZfUxQyXiO3QTm1f6tTOnG/P5v4kRIGYdBr0wmRbA/Hv1cw==",
+            "integrity": "sha512-pZhGBqRvTCItvAdZ6PSZtqJUKT6ybphXCykfHh95KzW0cGf10QH/ETPci2AMDEzfx4jW2hImGSmLBToVWOV7Uw==",
             "requires": {
-                "defu": "^0.0.3",
+                "defu": "^1.0.0",
                 "execa": "^1.0.0",
                 "fs-extra": "^8.1.0",
                 "hasha": "^5.0.0",
@@ -4265,9 +4265,9 @@
             }
         },
         "defu": {
-            "version": "0.0.3",
+            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/defu/-/defu-0.0.3.tgz",
+            "resolved": "https://registry.npmjs.org/defu/-/defu-1.0.0.tgz",
-            "integrity": "sha512-u/fe4fBwrD0KACvI0sYWTWFzooqONZq8ywPnK0ZkAgLNwaDTKpSWvMiiU4QmzhrQCXu8Y0+HIWP8amE18lsL4A=="
+            "integrity": "sha512-1Y1KRFxiiq+LYsZ3iP7xYSR8bHfmHFOUpDunZCN1ld1fGfDJWJIvkUBtjl3apnBwPuJtL/H7cwwlLYX8xPkraQ=="
         },
         "delayed-stream": {
             "version": "1.0.0",

package.json

@@ -18,10 +18,10 @@
         "test": "start-server-and-test start http-get://localhost:3000 e2e"
     },
     "dependencies": {
-        "@nuxtjs/axios": "^5.9.4",
+        "@nuxtjs/axios": "^5.9.5",
         "@nuxtjs/google-analytics": "^2.2.3",
         "@nuxtjs/google-tag-manager": "^2.3.1",
-        "@nuxtjs/pwa": "^3.0.0-beta.19",
+        "@nuxtjs/pwa": "^3.0.0-beta.20",
         "@nuxtjs/robots": "^2.4.2",
         "@nuxtjs/sitemap": "^2.0.1",
         "@nuxtjs/toast": "^3.3.0",

pages/index.vue

@@ -219,7 +219,6 @@
                 ref="sendButton"
               >
                 {{ $t("send") }}
-                <!-- <span id="hidden-message">{{ $t("again") }}</span> -->
                 <span>
                   <i class="material-icons">send</i>
                 </span>
@@ -252,13 +251,42 @@
                     </pw-toggle>
                   </span>
                   <div>
+                    <label for="attachment">
+                      <button
+                        class="icon"
+                        @click="$refs.attachment.click()"
+                        v-tooltip="
+                          files.length === 0
+                            ? $t('upload_file')
+                            : filenames.replace('<br/>', '')
+                        "
+                      >
+                        <i class="material-icons">attach_file</i>
+                        <span>
+                          {{
+                            files.length === 0
+                              ? "No files"
+                              : files.length == 1
+                              ? "1 file"
+                              : files.length + " files"
+                          }}
+                        </span>
+                      </button>
+                    </label>
+                    <input
+                      ref="attachment"
+                      name="attachment"
+                      type="file"
+                      @change="uploadAttachment"
+                      multiple
+                    />
                     <label for="payload">
                       <button
                         class="icon"
                         @click="$refs.payload.click()"
-                        v-tooltip="$t('upload_file')"
+                        v-tooltip="$t('import_json')"
                       >
-                        <i class="material-icons">attach_file</i>
+                        <i class="material-icons">post_add</i>
                       </button>
                     </label>
                     <input
@@ -381,10 +409,10 @@
                   content: isHidden ? $t('show_code') : $t('hide_code')
                 }"
               >
-                <i class="material-icons">flash_on</i>
+                <i class="material-icons">code</i>
               </button>
               <button
-                :class="'icon' + (showPreRequestScript ? ' info-response' : '')"
+                class="icon"
                 id="preRequestScriptButton"
                 v-tooltip.bottom="{
                   content: !showPreRequestScript
@@ -397,14 +425,15 @@
                   class="material-icons"
                   :class="showPreRequestScript"
                   v-if="!showPreRequestScript"
-                  >code</i
-                >
-                <i class="material-icons" :class="showPreRequestScript" v-else
-                  >close</i
                 >
+                  playlist_add
+                </i>
+                <i class="material-icons" :class="showPreRequestScript" v-else>
+                  close
+                </i>
               </button>
               <button
-                :class="'icon' + (testsEnabled ? ' info-response' : '')"
+                class="icon"
                 id="preRequestScriptButto"
                 v-tooltip.bottom="{
                   content: !testsEnabled ? 'Enable Tests' : 'Disable Tests'
@@ -416,7 +445,7 @@
                   :class="testsEnabled"
                   v-if="!testsEnabled"
                 >
-                  assignment_turned_in
+                  playlist_add_check
                 </i>
                 <i class="material-icons" :class="testsEnabled" v-else>close</i>
               </button>
@@ -501,7 +530,7 @@
                     </button>
                   </div>
                 </div>
-                <div v-for="testReport in testReports">
+                <div v-for="(testReport, index) in testReports" :key="index">
                   <div v-if="testReport.startBlock" class="info">
                     <h4>{{ testReport.startBlock }}</h4>
                   </div>
@@ -1044,13 +1073,7 @@
           <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">{{ $t("collections") }}</label>
           <div class="tab">
-            <pw-section
+            <collections />
-              class="yellow"
-              :label="$t('collections')"
-              ref="collections"
-            >
-              <collections />
-            </pw-section>
           </div>
           <input id="sync-tab" type="radio" name="side" />
           <label for="sync-tab">{{ $t("notes") }}</label>
@@ -1606,7 +1629,9 @@ export default {
       responseBodyMaxLines: 16,
       activeSidebar: true,
       fb,
-      customMethod: false
+      customMethod: false,
+      files: [],
+      filenames: ""
     };
   },
   watch: {
@@ -2174,7 +2199,7 @@ export default {
         url: this.url + this.pathName + this.queryString,
         auth,
         headers,
-        data: requestBody ? requestBody.toString() : null,
+        data: requestBody,
         credentials: true
       };
       if (preRequestScript) {
@@ -2255,6 +2280,18 @@ export default {
         });
       }
 
+      requestBody = requestBody ? requestBody.toString() : null;
+
+      if (this.files.length !== 0) {
+        const formData = new FormData();
+        for (let i = 0; i < this.files.length; i++) {
+          let file = this.files[i];
+          formData.append(`files[${i}]`, file);
+        }
+        formData.append("data", requestBody);
+        requestBody = formData;
+      }
+
       // If the request uses a token for auth, we want to make sure it's sent here.
       if (this.auth === "Bearer Token" || this.auth === "OAuth 2.0")
         headers["Authorization"] = `Bearer ${this.bearerToken}`;
@@ -2716,9 +2753,9 @@ export default {
         default:
           (this.label = ""),
             (this.method = "GET"),
-            (this.url = "https://reqres.in"),
+            (this.url = "https://httpbin.org"),
             (this.auth = "None"),
-            (this.path = "/api/users"),
+            (this.path = "/get"),
             (this.auth = "None");
           this.httpUser = "";
           this.httpPassword = "";
@@ -2736,6 +2773,7 @@ export default {
           this.accessTokenUrl = "";
           this.clientId = "";
           this.scope = "";
+          this.files = [];
       }
       e.target.innerHTML = this.doneButton;
       this.$toast.info(this.$t("cleared"), {
@@ -2797,6 +2835,22 @@ export default {
       }
       this.setRouteQueryState();
     },
+    uploadAttachment() {
+      this.filenames = "";
+      this.files = this.$refs.attachment.files;
+      if (this.files.length !== 0) {
+        for (let file of this.files) {
+          this.filenames = `${this.filenames}<br/>${file.name}`;
+        }
+        this.$toast.info(this.$t("file_imported"), {
+          icon: "attach_file"
+        });
+      } else {
+        this.$toast.error(this.$t("choose_file"), {
+          icon: "attach_file"
+        });
+      }
+    },
     uploadPayload() {
       this.rawInput = true;
       const file = this.$refs.payload.files[0];

store/state.js

@@ -1,8 +1,8 @@
 export default () => ({
   request: {
     method: "GET",
-    url: "https://reqres.in",
+    url: "https://httpbin.org",
-    path: "/api/users",
+    path: "/get",
     label: "",
     auth: "None",
     httpUser: "",