refactor: better toast messages + minor ui improvements

components/app/Header.vue

@@ -25,11 +25,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :url="currentUser.photoURL"
               :alt="currentUser.displayName"
-              :title="
+              :title="currentUser.displayName"
-                `${currentUser.displayName || 'Name not found'}` +
-                '<br>' +
-                `<sub>${currentUser.email || 'Email not found'}</sub>`
-              "
               indicator
               :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
             />

components/app/Search.vue

@@ -17,7 +17,6 @@
           pt-2
           pb-6
           truncate
-          appearance-none
           focus:outline-none
         "
       />

components/collections/Add.vue

@@ -38,7 +38,9 @@ export default {
   methods: {
     addNewCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name"))
+        this.$toast.info(this.$t("collection.invalid_name"), {
+          icon: "info",
+        })
         return
       }
       this.$emit("submit", this.name)

components/collections/AddFolder.vue

@@ -45,7 +45,9 @@ export default {
   methods: {
     addFolder() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name"))
+        this.$toast.info(this.$t("collection.invalid_name"), {
+          icon: "info",
+        })
         return
       }
       this.$emit("add-folder", {

components/collections/Edit.vue

@@ -39,7 +39,9 @@ export default {
   methods: {
     saveCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name"))
+        this.$toast.info(this.$t("collection.invalid_name"), {
+          icon: "info",
+        })
         return
       }
       this.$emit("submit", this.name)

components/collections/EditFolder.vue

@@ -42,7 +42,9 @@ export default {
   methods: {
     editFolder() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name"))
+        this.$toast.info(this.$t("collection.invalid_name"), {
+          icon: "info",
+        })
         return
       }
       this.$emit("submit", this.name)

components/collections/EditRequest.vue

@@ -41,7 +41,9 @@ export default {
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {
-        this.$toast.info(this.$t("collection.invalid_name"))
+        this.$toast.info(this.$t("collection.invalid_name"), {
+          icon: "info",
+        })
         return
       }
       this.$emit("submit", this.requestUpdateData)

components/collections/ImportExport.vue

@@ -219,11 +219,11 @@ export default {
           })
           window.open(res.html_url)
         })
-        .catch((error) => {
+        .catch((e) => {
-          this.$toast.error(this.$t("something_went_wrong"), {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
             icon: "error",
           })
-          console.log(error)
+          console.error(e)
         })
     },
     async readCollectionGist() {
@@ -240,9 +240,9 @@ export default {
           setRESTCollections(collections)
           this.fileImported()
         })
-        .catch((error) => {
+        .catch((e) => {
           this.failedImport()
-          console.log(error)
+          console.error(e)
         })
     },
     hideModal() {
@@ -292,8 +292,8 @@ export default {
                 this.failedImport()
               }
             })
-            .catch((error) => {
+            .catch((e) => {
-              console.log(error)
+              console.error(e)
               this.failedImport()
             })
         } else {
@@ -346,8 +346,8 @@ export default {
                 this.failedImport()
               }
             })
-            .catch((error) => {
+            .catch((e) => {
-              console.log(error)
+              console.error(e)
               this.failedImport()
             })
         } else {
@@ -373,8 +373,8 @@ export default {
             this.failedImport()
           }
         })
-        .catch((error) => {
+        .catch((e) => {
-          console.log(error)
+          console.error(e)
           this.failedImport()
         })
     },
@@ -409,7 +409,7 @@ export default {
       }, 1000)
     },
     fileImported() {
-      this.$toast.info(this.$t("file_imported"), {
+      this.$toast.success(this.$t("file_imported"), {
         icon: "folder_shared",
       })
     },

components/collections/graphql/Add.vue

@@ -41,7 +41,9 @@ export default Vue.extend({
   methods: {
     addNewCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name").toString())
+        this.$toast.info(this.$t("collection.invalid_name").toString(), {
+          icon: "info",
+        })
         return
       }
 

components/collections/graphql/Edit.vue

@@ -43,7 +43,9 @@ export default Vue.extend({
   methods: {
     saveCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name").toString())
+        this.$toast.info(this.$t("collection.invalid_name").toString(), {
+          icon: "info",
+        })
         return
       }
       const collectionUpdated = {

components/collections/graphql/EditFolder.vue

@@ -47,7 +47,9 @@ export default Vue.extend({
   methods: {
     editFolder() {
       if (!this.name) {
-        this.$toast.info(this.$t("collection.invalid_name").toString())
+        this.$toast.info(this.$t("collection.invalid_name").toString(), {
+          icon: "info",
+        })
         return
       }
       editGraphqlFolder(this.folderPath, { ...this.folder, name: this.name })

components/collections/graphql/EditRequest.vue

@@ -46,7 +46,9 @@ export default Vue.extend({
   methods: {
     saveRequest() {
       if (!this.requestUpdateData.name) {
-        this.$toast.info(this.$t("collection.invalid_name").toString())
+        this.$toast.info(this.$t("collection.invalid_name").toString(), {
+          icon: "info",
+        })
         return
       }
       const requestUpdated = {

components/collections/graphql/ImportExport.vue

@@ -138,11 +138,11 @@ export default {
           })
           window.open(res.html_url)
         })
-        .catch((error) => {
+        .catch((e) => {
-          this.$toast.error(this.$t("something_went_wrong"), {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
             icon: "error",
           })
-          console.log(error)
+          console.error(e)
         })
     },
     async readCollectionGist() {
@@ -159,9 +159,9 @@ export default {
           setGraphqlCollections(collections)
           this.fileImported()
         })
-        .catch((error) => {
+        .catch((e) => {
           this.failedImport()
-          console.log(error)
+          console.error(e)
         })
     },
     hideModal() {

components/collections/graphql/Request.vue

@@ -133,12 +133,7 @@ export default Vue.extend({
     selectRequest() {
       if (this.savingMode) {
         this.pick()
-        return
       }
-
-      this.$store.commit("postwoman/selectGraphqlRequest", {
-        request: this.request,
-      })
     },
     dragStart({ dataTransfer }: any) {
       this.dragging = !this.dragging

components/collections/index.vue

@@ -333,11 +333,11 @@ export default {
               icon: "done",
             })
           })
-          .catch((error) => {
+          .catch((e) => {
-            this.$toast.error(this.$t("error_occurred"), {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "done",
+              icon: "error",
             })
-            console.error(error)
+            console.error(e)
           })
       }
       this.displayModalAdd(false)
@@ -345,7 +345,9 @@ export default {
     // Intented to be called by CollectionEdit modal submit event
     updateEditingCollection(newName) {
       if (!newName) {
-        this.$toast.info(this.$t("collection.invalid_name"))
+        this.$toast.info(this.$t("collection.invalid_name"), {
+          icon: "info",
+        })
         return
       }
       if (this.collectionsType.type === "my-collections") {
@@ -367,11 +369,11 @@ export default {
               icon: "done",
             })
           })
-          .catch((error) => {
+          .catch((e) => {
-            this.$toast.error(this.$t("error_occurred"), {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "done",
+              icon: "error",
             })
-            console.error(error)
+            console.error(e)
           })
       }
       this.displayModalEdit(false)
@@ -387,17 +389,15 @@ export default {
         teamUtils
           .renameCollection(this.$apollo, name, this.editingFolder.id)
           .then(() => {
-            // Result
             this.$toast.success(this.$t("folder.renamed"), {
               icon: "done",
             })
           })
-          .catch((error) => {
+          .catch((e) => {
-            // Error
+            this.$toast.error(this.$t("error.something_went_wrong"), {
-            this.$toast.error(this.$t("error_occurred"), {
+              icon: "error",
-              icon: "done",
             })
-            console.error(error)
+            console.error(e)
           })
       }
 
@@ -434,11 +434,11 @@ export default {
             })
             this.$emit("update-team-collections")
           })
-          .catch((error) => {
+          .catch((e) => {
-            this.$toast.error(this.$t("error_occurred"), {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
-              icon: "done",
+              icon: "error",
             })
-            console.error(error)
+            console.error(e)
           })
       }
 
@@ -502,18 +502,16 @@ export default {
               },
             })
             .then(() => {
-              // Result
               this.$toast.success(this.$t("folder.created"), {
                 icon: "done",
               })
               this.$emit("update-team-collections")
             })
-            .catch((error) => {
+            .catch((e) => {
-              // Error
+              this.$toast.error(this.$t("error.something_went_wrong"), {
-              this.$toast.error(this.$t("error_occurred"), {
+                icon: "error",
-                icon: "done",
               })
-              console.error(error)
+              console.error(e)
             })
         }
       }
@@ -605,17 +603,15 @@ export default {
               },
             })
             .then(() => {
-              // Result
+              this.$toast.error(this.$t("deleted"), {
-              this.$toast.success(this.$t("deleted"), {
                 icon: "delete",
               })
             })
-            .catch((error) => {
+            .catch((e) => {
-              // Error
+              this.$toast.error(this.$t("error.something_went_wrong"), {
-              this.$toast.error(this.$t("error_occurred"), {
+                icon: "error",
-                icon: "done",
               })
-              console.error(error)
+              console.error(e)
             })
         }
       }
@@ -649,17 +645,15 @@ export default {
         teamUtils
           .deleteRequest(this.$apollo, requestIndex)
           .then(() => {
-            // Result
+            this.$toast.error(this.$t("deleted"), {
-            this.$toast.success(this.$t("deleted"), {
               icon: "delete",
             })
           })
-          .catch((error) => {
+          .catch((e) => {
-            // Error
+            this.$toast.error(this.$t("error.something_went_wrong"), {
-            this.$toast.error(this.$t("error_occurred"), {
+              icon: "error",
-              icon: "done",
             })
-            console.error(error)
+            console.error(e)
           })
       }
     },

components/collections/teams/Folder.vue

@@ -32,7 +32,7 @@
         v-tippy="{ theme: 'tooltip' }"
         icon="create_new_folder"
         :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
         @click.native="$emit('add-folder', { folder, path: folderPath })"
       />
       <tippy
@@ -219,18 +219,16 @@ export default {
         teamUtils
           .deleteCollection(this.$apollo, this.folder.id)
           .then(() => {
-            // Result
+            this.$toast.error(this.$t("deleted"), {
-            this.$toast.success(this.$t("deleted"), {
               icon: "delete",
             })
             this.$emit("update-team-collections")
           })
-          .catch((error) => {
+          .catch((e) => {
-            // Error
+            this.$toast.error(this.$t("error.something_went_wrong"), {
-            this.$toast.error(this.$t("error_occurred"), {
+              icon: "error",
-              icon: "done",
             })
-            console.error(error)
+            console.error(e)
           })
         this.$emit("update-team-collections")
       }

components/environments/Add.vue

@@ -41,7 +41,9 @@ export default Vue.extend({
   methods: {
     addNewEnvironment() {
       if (!this.name) {
-        this.$toast.info(this.$t("invalid_environment_name").toString())
+        this.$toast.info(this.$t("invalid_environment_name").toString(), {
+          icon: "info",
+        })
         return
       }
       createEnvironment(this.name)

components/environments/Edit.vue

@@ -17,7 +17,7 @@
           </label>
         </div>
         <div class="flex flex-1 justify-between items-center">
-          <label for="variableList" class="font-semibold px-4 pt-4 pb-4">
+          <label for="variableList" class="font-semibold p-4">
             {{ $t("env_variable_list") }}
           </label>
           <div class="flex">
@@ -35,16 +35,11 @@
             />
           </div>
         </div>
-        <div class="border-divider border rounded">
+        <div class="divide-y divide-dividerLight border-divider border rounded">
           <div
             v-for="(variable, index) in vars"
             :key="`variable-${index}`"
-            class="
+            class="divide-x divide-dividerLight flex"
-              divide-x divide-dividerLight
-              border-b border-dividerLight
-              flex
-            "
-            :class="{ 'border-t': index == 0 }"
           >
             <input
               v-model="variable.key"
@@ -55,6 +50,7 @@
                 flex-1
                 py-2
                 px-4
+                truncate
                 focus:outline-none
               "
               :placeholder="$t('count.variable', { count: index + 1 })"
@@ -69,6 +65,7 @@
                 flex-1
                 py-2
                 px-4
+                truncate
                 focus:outline-none
               "
               :placeholder="$t('count.value', { count: index + 1 })"
@@ -169,7 +166,9 @@ export default Vue.extend({
     },
     saveEnvironment() {
       if (!this.name) {
-        this.$toast.info(this.$t("invalid_environment_name").toString())
+        this.$toast.info(this.$t("invalid_environment_name").toString(), {
+          icon: "info",
+        })
         return
       }
 

components/environments/ImportExport.vue

@@ -138,11 +138,11 @@ export default {
           })
           window.open(res.html_url)
         })
-        .catch((error) => {
+        .catch((e) => {
-          this.$toast.error(this.$t("something_went_wrong"), {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
             icon: "error",
           })
-          console.log(error)
+          console.error(e)
         })
     },
     async readEnvironmentGist() {
@@ -159,9 +159,9 @@ export default {
           replaceEnvironments(environments)
           this.fileImported()
         })
-        .catch((error) => {
+        .catch((e) => {
           this.failedImport()
-          console.log(error)
+          console.error(e)
         })
     },
     hideModal() {

components/firebase/Login.vue

@@ -183,16 +183,16 @@ export default {
         }
 
         this.showLoginSuccess()
-      } catch (err) {
+      } catch (e) {
-        console.log(err)
+        console.error(e)
         // An error happened.
-        if (err.code === "auth/account-exists-with-different-credential") {
+        if (e.code === "auth/account-exists-with-different-credential") {
           // Step 2.
           // User's email already exists.
           // The pending Google credential.
-          const pendingCred = err.credential
+          const pendingCred = e.credential
           // The provider account's email address.
-          const email = err.email
+          const email = e.email
           // Get sign-in methods for this email.
           const methods = await getSignInMethodsForEmail(email)
 
@@ -259,16 +259,16 @@ export default {
         }
 
         this.showLoginSuccess()
-      } catch (err) {
+      } catch (e) {
-        console.log(err)
+        console.error(e)
         // An error happened.
-        if (err.code === "auth/account-exists-with-different-credential") {
+        if (e.code === "auth/account-exists-with-different-credential") {
           // Step 2.
           // User's email already exists.
           // The pending Google credential.
-          const pendingCred = err.credential
+          const pendingCred = e.credential
           // The provider account's email address.
-          const email = err.email
+          const email = e.email
           // Get sign-in methods for this email.
           const methods = await getSignInMethodsForEmail(email)
 
@@ -322,7 +322,8 @@ export default {
           this.mode = "email-sent"
           setLocalConfig("emailForSignIn", this.form.email)
         })
-        .catch((error) => {
+        .catch((e) => {
+          console.error(e)
           this.$toast.error(error.message, {
             icon: "error",
           })

components/firebase/Logout.vue

@@ -35,8 +35,9 @@ export default Vue.extend({
         this.$toast.info(this.$t("logged_out").toString(), {
           icon: "vpn_key",
         })
-      } catch (err) {
+      } catch (e) {
-        this.$toast.show(err.message || err, {
+        console.error(e)
+        this.$toast.error(this.$t("error.something_went_wrong").toString(), {
           icon: "error",
         })
       }

components/graphql/QueryEditor.vue

@@ -171,7 +171,7 @@ export default {
       try {
         this.$emit("update-query", gql.print(gql.parse(this.editor.getValue())))
       } catch (e) {
-        this.$toast.error(`${this.$t("gql_prettify_invalid_query")}`, {
+        this.$toast.error(this.$t("gql_prettify_invalid_query"), {
           icon: "error",
         })
       }

components/graphql/RequestOptions.vue

@@ -161,14 +161,15 @@
               :value="header.key"
               autofocus
               styles="
-                        bg-primaryLight
+                bg-primaryLight
-                        flex
+                flex
-                        font-semibold font-mono
+                font-semibold font-mono
-                        flex-1
+                flex-1
-                        py-2
+                py-2
-                        px-4
+                px-4
-                        focus:outline-none
+                truncate
-                      "
+                focus:outline-none
+              "
               @input="
                 updateGQLHeader(index, {
                   key: $event,
@@ -185,6 +186,7 @@
                 w-full
                 py-2
                 px-4
+                truncate
                 focus:outline-none
               "
               :placeholder="$t('count.value', { count: index + 1 })"
@@ -389,14 +391,14 @@ export default defineComponent({
         $toast.success(t("finished_in", { duration }).toString(), {
           icon: "done",
         })
-      } catch (error: any) {
+      } catch (e: any) {
-        response.value = `${error}. ${t("check_console_details")}`
+        response.value = `${e}. ${t("error.check_console_details")}`
         nuxt.value.$loading.finish()
 
-        $toast.error(`${error} ${t("f12_details").toString()}`, {
+        $toast.error(`${e} ${t("f12_details").toString()}`, {
           icon: "error",
         })
-        console.log("Error", error)
+        console.error(e)
       }
 
       logHoppRequestRunToAnalytics({

components/http/BodyParameters.vue

@@ -67,6 +67,7 @@
           flex-1
           py-2
           px-4
+          truncate
           focus:outline-none
         "
         :placeholder="$t('count.parameter', { count: index + 1 })"
@@ -111,6 +112,7 @@
           flex-1
           py-2
           px-4
+          truncate
           focus:outline-none
         "
         :placeholder="$t('count.value', { count: index + 1 })"

components/http/Headers.vue

@@ -50,6 +50,7 @@
           flex-1
           py-1
           px-4
+          truncate
           focus:outline-none
         "
         @input="
@@ -90,6 +91,7 @@
           flex-1
           py-2
           px-4
+          truncate
           focus:outline-none
         "
         :placeholder="$t('count.value', { count: index + 1 })"

components/http/ImportCurl.vue

@@ -118,8 +118,8 @@ export default defineComponent({
             },
           })
         )
-      } catch (error) {
+      } catch (e) {
-        this.showCurlImportModal = false
+        console.error(e)
         this.$toast.error(this.$t("curl_invalid_format").toString(), {
           icon: "error",
         })

components/http/Parameters.vue

@@ -67,6 +67,7 @@
           flex-1
           py-2
           px-4
+          truncate
           focus:outline-none
         "
         :placeholder="$t('count.parameter', { count: index + 1 })"
@@ -111,6 +112,7 @@
           flex-1
           py-2
           px-4
+          truncate
           focus:outline-none
         "
         :placeholder="$t('count.value', { count: index + 1 })"

components/http/RawBody.vue

@@ -118,6 +118,7 @@ export default defineComponent({
         this.prettifyIcon = "done"
         setTimeout(() => (this.prettifyIcon = "photo_filter"), 1000)
       } catch (e) {
+        console.error(e)
         this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
           icon: "error",
         })

components/realtime/Mqtt.vue

@@ -227,7 +227,7 @@ export default defineComponent({
       this.connectingState = false
       this.connectionState = false
       this.log.push({
-        payload: this.$t("error_occurred"),
+        payload: this.$t("error.something_went_wrong"),
         source: "info",
         color: "#ff5555",
         ts: new Date().toLocaleTimeString(),
@@ -279,7 +279,7 @@ export default defineComponent({
           icon: "sync_disabled",
         })
       } else {
-        this.$toast.error(this.$t("something_went_wrong"), {
+        this.$toast.error(this.$t("error.something_went_wrong"), {
           icon: "error",
         })
       }
@@ -298,7 +298,7 @@ export default defineComponent({
       } catch (e) {
         this.log.push({
           payload:
-            this.$t("error_occurred") +
+            this.$t("error.something_went_wrong") +
             `while publishing msg: ${this.msg} to topic:  ${this.pub_topic}`,
           source: "info",
           color: "#ff5555",
@@ -322,7 +322,7 @@ export default defineComponent({
       } catch (e) {
         this.log.push({
           payload:
-            this.$t("error_occurred") +
+            this.$t("error.something_went_wrong") +
             `while subscribing to topic:  ${this.sub_topic}`,
           source: "info",
           color: "#ff5555",

components/realtime/Socketio.vue

@@ -283,9 +283,9 @@ export default defineComponent({
             icon: "sync_disabled",
           })
         })
-      } catch (ex) {
+      } catch (e) {
-        this.handleError(ex)
+        this.handleError(e)
-        this.$toast.error(this.$t("something_went_wrong"), {
+        this.$toast.error(this.$t("error.something_went_wrong"), {
           icon: "error",
         })
       }
@@ -302,7 +302,7 @@ export default defineComponent({
       this.connectingState = false
       this.connectionState = false
       this.communication.log.push({
-        payload: this.$t("error_occurred"),
+        payload: this.$t("error.something_went_wrong"),
         source: "info",
         color: "#ff5555",
         ts: new Date().toLocaleTimeString(),
@@ -321,7 +321,7 @@ export default defineComponent({
         .map((input) => {
           try {
             return JSON.parse(input)
-          } catch (err) {
+          } catch (e) {
             return input
           }
         })

components/realtime/Sse.vue

@@ -182,9 +182,9 @@ export default {
               ts: new Date().toLocaleTimeString(),
             })
           })
-        } catch (ex) {
+        } catch (e) {
-          this.handleSSEError(ex)
+          this.handleSSEError(e)
-          this.$toast.error(this.$t("something_went_wrong"), {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
             icon: "error",
           })
         }
@@ -207,7 +207,7 @@ export default {
       this.stop()
       this.connectionSSEState = false
       this.events.log.push({
-        payload: this.$t("error_occurred"),
+        payload: this.$t("error.something_went_wrong"),
         source: "info",
         color: "#ff5555",
         ts: new Date().toLocaleTimeString(),

components/realtime/Websocket.vue

@@ -91,6 +91,7 @@
                   flex-1
                   py-2
                   px-4
+                  truncate
                   focus:outline-none
                 "
                 :placeholder="$t('count.protocol', { count: index + 1 })"
@@ -322,9 +323,9 @@ export default defineComponent({
             ts: new Date().toLocaleTimeString(),
           })
         }
-      } catch (ex) {
+      } catch (e) {
-        this.handleError(ex)
+        this.handleError(e)
-        this.$toast.error(this.$t("something_went_wrong"), {
+        this.$toast.error(this.$t("error.something_went_wrong"), {
           icon: "error",
         })
       }
@@ -344,7 +345,7 @@ export default defineComponent({
       this.disconnect()
       this.connectionState = false
       this.communication.log.push({
-        payload: this.$t("error_occurred"),
+        payload: this.$t("error.something_went_wrong"),
         source: "info",
         color: "#ff5555",
         ts: new Date().toLocaleTimeString(),

components/teams/Add.vue

@@ -44,7 +44,9 @@ export default {
       // We clear it early to give the UI a snappy feel
       this.name = ""
       if (!name) {
-        this.$toast.info(this.$t("empty.team_name"))
+        this.$toast.info(this.$t("empty.team_name"), {
+          icon: "info",
+        })
         return
       }
       if (name !== null && name.replace(/\s/g, "").length < 6) {
@@ -57,12 +59,10 @@ export default {
       teamUtils
         .createTeam(this.$apollo, name)
         .then(() => {
-          // Result
           this.hideModal()
         })
-        .catch((error) => {
+        .catch((e) => {
-          // Error
+          console.error(e)
-          console.error(error)
           // We restore the initial user input
           this.name = name
         })

components/teams/Edit.vue

@@ -2,37 +2,37 @@
   <SmartModal v-if="show" :title="$t('team.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
-        <input
+        <div class="flex relative">
-          id="selectLabelTeamEdit"
+          <input
-          v-model="name"
+            id="selectLabelTeamEdit"
-          v-focus
+            v-model="name"
-          class="input floating-input"
+            v-focus
-          placeholder=" "
+            class="input floating-input"
-          type="text"
+            placeholder=" "
-          @keyup.enter="saveTeam"
+            type="text"
-        />
+            @keyup.enter="saveTeam"
-        <label for="selectLabelTeamEdit">
+          />
-          {{ $t("label") }}
+          <label for="selectLabelTeamEdit">
-        </label>
+            {{ $t("label") }}
+          </label>
+        </div>
         <div class="flex flex-1 justify-between items-center">
-          <label for="memberList" class="font-semibold px-4 pt-4 pb-4">
+          <label for="memberList" class="font-semibold p-4">
             {{ $t("team.members") }}
           </label>
-          <ButtonSecondary
+          <div class="flex">
-            icon="add"
+            <ButtonSecondary
-            :label="$t('add.new')"
+              icon="add"
-            @click.native="addTeamMember"
+              :label="$t('add.new')"
-          />
+              @click.native="addTeamMember"
+            />
+          </div>
         </div>
-        <div class="border-divider border rounded">
+        <div class="divide-y divide-dividerLight border-divider border rounded">
           <div
             v-for="(member, index) in members"
             :key="`member-${index}`"
-            class="
+            class="divide-x divide-dividerLight flex"
-              divide-x divide-dividerLight
-              border-b border-dividerLight
-              flex
-            "
           >
             <input
               class="
@@ -42,6 +42,7 @@
                 flex-1
                 py-2
                 px-4
+                truncate
                 focus:outline-none
               "
               :placeholder="$t('team.email')"
@@ -66,6 +67,7 @@
                       flex-1
                       py-2
                       px-4
+                      truncate
                       focus:outline-none
                     "
                     :placeholder="$t('team.permissions')"
@@ -92,23 +94,21 @@
                 />
               </tippy>
             </span>
-            <ButtonSecondary
+            <div class="flex">
-              id="member"
+              <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
+                id="member"
-              :title="$t('delete')"
+                v-tippy="{ theme: 'tooltip' }"
-              icon="delete"
+                :title="$t('delete')"
-              color="red"
+                icon="delete"
-              @click.native="removeExistingTeamMember(member.user.uid)"
+                color="red"
-            />
+                @click.native="removeExistingTeamMember(member.user.uid)"
+              />
+            </div>
           </div>
           <div
             v-for="(member, index) in newMembers"
             :key="`new-member-${index}`"
-            class="
+            class="divide-x divide-dividerLight flex"
-              divide-x divide-dividerLight
-              border-b border-dividerLight
-              flex
-            "
           >
             <input
               v-model="member.key"
@@ -119,6 +119,7 @@
                 flex-1
                 py-2
                 px-4
+                truncate
                 focus:outline-none
               "
               :placeholder="$t('team.email')"
@@ -142,6 +143,7 @@
                       flex-1
                       py-2
                       px-4
+                      truncate
                       focus:outline-none
                     "
                     :placeholder="$t('team.permissions')"
@@ -168,13 +170,35 @@
                 />
               </tippy>
             </span>
+            <div class="flex">
+              <ButtonSecondary
+                id="member"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('delete')"
+                icon="delete"
+                color="red"
+                @click.native="removeTeamMember(index)"
+              />
+            </div>
+          </div>
+          <div
+            v-if="members.length === 0 && newMembers.length === 0"
+            class="
+              flex flex-col
+              text-secondaryLight
+              p-4
+              items-center
+              justify-center
+            "
+          >
+            <i class="opacity-75 pb-2 material-icons">layers</i>
+            <span class="text-center pb-4">
+              {{ $t("empty.members") }}
+            </span>
             <ButtonSecondary
-              id="member"
+              :label="$t('add.new')"
-              v-tippy="{ theme: 'tooltip' }"
+              outline
-              :title="$t('delete')"
+              @click.native="addTeamMember"
-              icon="delete"
-              color="red"
-              @click.native="removeTeamMember(index)"
             />
           </div>
         </div>
@@ -249,18 +273,16 @@ export default defineComponent({
       teamUtils
         .removeTeamMember(this.$apollo, userID, this.editingteamID)
         .then(() => {
-          // Result
           this.$toast.success(this.$t("team.member_removed"), {
             icon: "done",
           })
           this.hideModal()
         })
-        .catch((error) => {
+        .catch((e) => {
-          // Error
+          this.$toast.error(this.$t("error.something_went_wrong"), {
-          this.$toast.error(this.$t("error_occurred"), {
+            icon: "error",
-            icon: "done",
           })
-          console.error(error)
+          console.error(e)
         })
     },
     removeTeamMember(index) {
@@ -316,17 +338,15 @@ export default defineComponent({
             this.editingteamID
           )
           .then(() => {
-            // Result
             this.$toast.success(this.$t("team.saved"), {
               icon: "done",
             })
           })
-          .catch((error) => {
+          .catch((e) => {
-            // Error
             this.$toast.error(error, {
               icon: "done",
             })
-            console.error(error)
+            console.error(e)
           })
       })
       this.members.forEach((element) => {
@@ -338,17 +358,15 @@ export default defineComponent({
             this.editingteamID
           )
           .then(() => {
-            // Result
             this.$toast.success(this.$t("team.member_role_updated"), {
               icon: "done",
             })
           })
-          .catch((error) => {
+          .catch((e) => {
-            // Error
             this.$toast.error(error, {
               icon: "done",
             })
-            console.error(error)
+            console.error(e)
           })
       })
       if (this.$data.rename !== null) {
@@ -363,17 +381,15 @@ export default defineComponent({
           teamUtils
             .renameTeam(this.$apollo, newName, this.editingteamID)
             .then(() => {
-              // Result
               this.$toast.success(this.$t("team.saved"), {
                 icon: "done",
               })
             })
-            .catch((error) => {
+            .catch((e) => {
-              // Error
+              this.$toast.error(this.$t("error.something_went_wrong"), {
-              this.$toast.error(this.$t("error_occurred"), {
+                icon: "error",
-                icon: "done",
               })
-              console.error(error)
+              console.error(e)
             })
       }
       this.hideModal()

components/teams/Team.vue

@@ -87,17 +87,15 @@ export default {
       teamUtils
         .deleteTeam(this.$apollo, this.teamID)
         .then(() => {
-          // Result
           this.$toast.success(this.$t("team.deleted"), {
             icon: "done",
           })
         })
-        .catch((error) => {
+        .catch((e) => {
-          // Error
+          this.$toast.error(this.$t("error.something_went_wrong"), {
-          this.$toast.error(this.$t("error_occurred"), {
+            icon: "error",
-            icon: "done",
           })
-          console.error(error)
+          console.error(e)
         })
     },
     exitTeam() {
@@ -105,17 +103,15 @@ export default {
       teamUtils
         .exitTeam(this.$apollo, this.teamID)
         .then(() => {
-          // Result
           this.$toast.success(this.$t("team.left"), {
             icon: "done",
           })
         })
-        .catch((error) => {
+        .catch((e) => {
-          // Error
+          this.$toast.error(this.$t("error.something_went_wrong"), {
-          this.$toast.error(this.$t("error_occurred"), {
             icon: "error",
           })
-          console.error(error)
+          console.error(e)
         })
     },
   },

helpers/GQLConnection.ts

@@ -16,8 +16,8 @@ import { GQLHeader } from "~/newstore/GQLSession"
 const GQL_SCHEMA_POLL_INTERVAL = 7000
 
 /**
-  GQLConnection deals with all the operations (like polling, schema extraction) that runs 
+  GQLConnection deals with all the operations (like polling, schema extraction) that runs
-  when a connection is made to a GraphQL server. 
+  when a connection is made to a GraphQL server.
 */
 export class GQLConnection {
   public isLoading$ = new BehaviorSubject<boolean>(false)
@@ -172,7 +172,8 @@ export class GQLConnection {
       this.schema$.next(schema)
 
       this.isLoading$.next(false)
-    } catch (error: any) {
+    } catch (e: any) {
+      console.error(e)
       this.disconnect()
     }
   }

helpers/codegen/generators/javascript-fetch.js

@@ -58,8 +58,8 @@ export const JavascriptFetchCodegen = {
     requestString.push("  response.headers\n")
     requestString.push("  response.url\n\n")
     requestString.push("  return response.text()\n")
-    requestString.push("}).catch(function(error) {\n")
+    requestString.push("}).catch(function(e) {\n")
-    requestString.push("  error.message\n")
+    requestString.push("  console.error(e)\n")
     requestString.push("})")
     return requestString.join("")
   },

helpers/codegen/generators/javascript-jquery.js

@@ -56,8 +56,8 @@ export const JavascriptJqueryCodegen = {
     requestString.push(".then(response => {\n")
     requestString.push("    console.log(response);\n")
     requestString.push("})")
-    requestString.push(".catch(error => {\n")
+    requestString.push(".catch(e => {\n")
-    requestString.push("    console.log(error);\n")
+    requestString.push("    console.error(e);\n")
     requestString.push("})\n")
     return requestString.join("")
   },

helpers/codegen/generators/nodejs-axios.js

@@ -51,8 +51,8 @@ export const NodejsAxiosCodegen = {
     requestString.push(".then(response => {\n")
     requestString.push("    console.log(response);\n")
     requestString.push("})")
-    requestString.push(".catch(error => {\n")
+    requestString.push(".catch(e => {\n")
-    requestString.push("    console.log(error);\n")
+    requestString.push("    console.error(e);\n")
     requestString.push("})\n")
     return requestString.join("")
   },

helpers/fb/auth.ts

@@ -216,7 +216,6 @@ export async function setProviderInfo(id: string, token: string) {
       .catch((e) => console.error("error updating", us, e))
   } catch (e) {
     console.error("error updating", e)
-
     throw e
   }
 }

helpers/fb/environments.ts

@@ -38,7 +38,6 @@ async function writeEnvironments(environment: Environment[]) {
       .set(ev)
   } catch (e) {
     console.error("error updating", ev, e)
-
     throw e
   }
 }

helpers/network.ts

@@ -97,27 +97,27 @@ export function createRESTNetworkRequestStream(
 
       response.complete()
     })
-    .catch((err) => {
+    .catch((e) => {
-      if (err.response) {
+      if (e.response) {
         const timeEnd = Date.now()
 
-        const contentLength = err.response.headers["content-length"]
+        const contentLength = e.response.headers["content-length"]
-          ? parseInt(err.response.headers["content-length"])
+          ? parseInt(e.response.headers["content-length"])
-          : (err.response.data as ArrayBuffer).byteLength
+          : (e.response.data as ArrayBuffer).byteLength
 
         const resObj: HoppRESTResponse = {
           type: "fail",
-          body: err.response.data,
+          body: e.response.data,
-          headers: Object.keys(err.response.headers).map((x) => ({
+          headers: Object.keys(e.response.headers).map((x) => ({
             key: x,
-            value: err.response.headers[x],
+            value: e.response.headers[x],
           })),
           meta: {
             responseDuration: timeEnd - timeStart,
             responseSize: contentLength,
           },
           req,
-          statusCode: err.response.status,
+          statusCode: e.response.status,
         }
 
         response.next(resObj)
@@ -126,7 +126,7 @@ export function createRESTNetworkRequestStream(
       } else {
         const resObj: HoppRESTResponse = {
           type: "network_fail",
-          error: err,
+          error: e,
           req,
         }
 

helpers/oauth.js

@@ -31,9 +31,8 @@ const sendPostRequest = async (url, params) => {
     const response = await fetch(url, options)
     const data = await response.json()
     return data
-  } catch (err) {
+  } catch (e) {
-    console.error("Request failed", err)
+    console.error(e)
-    throw err
   }
 }
 
@@ -73,9 +72,8 @@ const getTokenConfiguration = async (endpoint) => {
     const response = await fetch(endpoint, options)
     const config = await response.json()
     return config
-  } catch (err) {
+  } catch (e) {
-    console.error("Request failed", err)
+    console.error(e)
-    throw err
   }
 }
 
@@ -225,8 +223,8 @@ const oauthRedirect = () => {
           redirect_uri: redirectUri,
           code_verifier: getLocalConfig("pkce_codeVerifier"),
         })
-      } catch (err) {
+      } catch (e) {
-        console.log(`${error.error}\n\n${error.error_description}`)
+        console.error(e)
       }
     }
     // Clean these up since we don't need them anymore

helpers/strategies/AxiosStrategy.js

@@ -39,6 +39,7 @@ const axiosWithProxy = async (req) => {
       // eslint-disable-next-line no-throw-literal
       throw "cancellation"
     } else {
+      console.error(e)
       throw e
     }
   }
@@ -58,6 +59,7 @@ const axiosWithoutProxy = async (req, _store) => {
       // eslint-disable-next-line no-throw-literal
       throw "cancellation"
     } else {
+      console.error(e)
       throw e
     }
   }

helpers/ternlint.js

@@ -631,8 +631,8 @@ export function validateFile(server, query, file) {
     var visitors = makeVisitors(server, query, file, messages)
     walk.simple(ast, visitors, infer.searchVisitor, state)
     return { messages: messages }
-  } catch (err) {
+  } catch (e) {
-    console.error(err.stack)
+    console.error(e.stack)
     return { messages: [] }
   }
 }
@@ -680,8 +680,8 @@ export function validateFiles(server, query) {
         messages.push({ file: file.name, messages: messagesFile })
     }
     return { messages: messages }
-  } catch (err) {
+  } catch (e) {
-    console.error(err.stack)
+    console.error(e.stack)
     return { messages: [] }
   }
 }

helpers/utils/uri.js

@@ -4,7 +4,7 @@ export function parseUrlAndPath(value) {
     const url = new URL(value)
     result.url = url.origin
     result.path = url.pathname
-  } catch (error) {
+  } catch (e) {
     const uriRegex = value.match(
       /^((http[s]?:\/\/)?(<<[^/]+>>)?[^/]*|)(\/?.*)$/
     )

lang/en-US.json

@@ -37,7 +37,8 @@
     "headers": "Headers are empty",
     "tests": "Tests are empty",
     "schema": "Connect to a GraphQL endpoint",
-    "teams": "Teams are empty"
+    "teams": "Teams are empty",
+    "members": "Team is empty"
   },
   "count": {
     "message": "Message {count}",
@@ -131,7 +132,7 @@
     "no_access": "You do not have edit access to these collections",
     "left": "You left the team",
     "exit_disabled": "Only owner cannot exit the team",
-    "member_role_updated": "User role(s) updated",
+    "member_role_updated": "User roles updated",
     "member_removed": "User removed"
   },
   "modal": {
@@ -239,6 +240,10 @@
     "put_method": "Select PUT method",
     "delete_method": "Select DELETE method"
   },
+  "error": {
+    "something_went_wrong": "Something went wrong",
+    "check_console_details": "Check console log for details."
+  },
   "options": "Options",
   "communication": "Communication",
   "endpoint": "Endpoint",
@@ -349,8 +354,6 @@
   "connected_to": "Connected to {name}",
   "disconnected": "Disconnected",
   "disconnected_from": "Disconnected from {name}",
-  "something_went_wrong": "Something went wrong!",
-  "error_occurred": "An error has occurred.",
   "browser_support_sse": "This browser doesn't seems to have Server Sent Events support.",
   "log": "Log",
   "no_url": "No URL",
@@ -399,7 +402,6 @@
   "we_use_cookies": "We use cookies",
   "copied_to_clipboard": "Copied to clipboard",
   "finished_in": "Finished in {duration}ms",
-  "check_console_details": "Check console for details.",
   "check_graphql_valid": "Check the URL to see if it is a valid GraphQL endpoint",
   "graphql_introspect_failed": "Failed fetching schema details.",
   "download_started": "Download started",
@@ -414,7 +416,6 @@
   "one_time": "One-time",
   "recurring": "Recurring",
   "wiki": "Wiki",
-  "error": "Error",
   "home": "Home",
   "reload": "Reload",
   "enter_curl": "Enter cURL",

layouts/error.vue

@@ -30,7 +30,7 @@ export default {
       return (this.error && this.error.statusCode) || 500
     },
     message() {
-      return this.error.message || this.$t("something_went_wrong")
+      return this.error.message || this.$t("error.something_went_wrong")
     },
   },
 

netlify/api.js

@@ -11,8 +11,8 @@ exports.handler = (event) => {
           },
           body: JSON.stringify({ message: `Hello ${name}` }),
         }
-      } catch (err) {
+      } catch (e) {
-        return { statusCode: 500, body: err.toString() }
+        return { statusCode: 500, body: e.toString() }
       }
 
     default:

newstore/GQLSession.ts

@@ -27,8 +27,7 @@ const defaultGQLSession: GQLSession = {
     id
     name
   }
-}
+}`,
-  `,
   variables: `{ "id": "1" }`,
   response: "",
 }

pages/documentation.vue

@@ -233,11 +233,11 @@ export default defineComponent({
           })
           window.open(res.html_url)
         })
-        .catch((error) => {
+        .catch((e) => {
-          this.$toast.error(this.$t("something_went_wrong"), {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
             icon: "error",
           })
-          console.log(error)
+          console.error(e)
         })
     },
 
@@ -328,8 +328,9 @@ export default defineComponent({
         )
         this.docsMarkdown = docsMarkdown.replace(/^\s*[\r\n]/gm, "\n\n")
       } catch (e) {
-        this.$toast.error(e, {
+        console.error(e)
-          icon: "code",
+        this.$toast.error(this.$t("error.something_went_wrong"), {
+          icon: "error",
         })
       }
     },

pages/enter.vue

@@ -44,9 +44,9 @@ export default Vue.extend({
           removeLocalConfig("emailForSignIn")
           this.$router.push({ path: "/" })
         })
-        .catch((error) => {
+        .catch((e) => {
           this.signingInWithEmail = false
-          this.error = error.message
+          this.error = e.message
         })
         .finally(() => {
           this.signingInWithEmail = false