From 42d2dd284fddf2bf924509e581f659d7b57f86e7 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 8 Aug 2021 12:42:29 +0530
Subject: [PATCH] refactor(ui): title and actions slot on modals

---
 components/app/Header.vue                     |  4 +--
 components/collections/Add.vue                |  6 +---
 components/collections/AddFolder.vue          | 10 +++---
 components/collections/Edit.vue               |  6 +---
 components/collections/EditFolder.vue         | 10 +++---
 components/collections/EditRequest.vue        |  6 +---
 components/collections/ImportExport.vue       | 36 ++++++++++---------
 components/collections/SaveRequest.vue        |  6 +---
 components/collections/graphql/Add.vue        |  6 +---
 components/collections/graphql/AddFolder.vue  | 10 +++---
 components/collections/graphql/Edit.vue       |  6 +---
 components/collections/graphql/EditFolder.vue | 14 +++++---
 .../collections/graphql/EditRequest.vue       | 10 +++---
 .../collections/graphql/ImportExport.vue      | 16 +++++----
 components/environments/Add.vue               |  6 +---
 components/environments/Edit.vue              |  6 +---
 components/environments/ImportExport.vue      | 18 +++++-----
 components/firebase/Login.vue                 | 11 +++---
 components/http/CodegenModal.vue              | 10 +++---
 components/http/ImportCurl.vue                |  6 +---
 components/http/TokenList.vue                 |  6 +---
 components/smart/ConfirmModal.vue             |  6 +---
 components/smart/Modal.vue                    | 18 +++++++++-
 components/teams/Add.vue                      | 12 +++----
 components/teams/Edit.vue                     |  6 +---
 25 files changed, 114 insertions(+), 137 deletions(-)

diff --git a/components/app/Header.vue b/components/app/Header.vue
index 489c4be33..8834b73ef 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="space-x-2 flex-shrink-0 inline-flex items-center">
       <AppGitHubStarButton class="flex mx-2 mt-1" />
-      <TabPrimary
+      <ButtonSecondary
         id="installPWA"
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('header.install_pwa')"
@@ -33,7 +33,7 @@
               indicator
               :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
             />
-            <TabPrimary
+            <ButtonSecondary
               v-else
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('account')"
diff --git a/components/collections/Add.vue b/components/collections/Add.vue
index eeab5dcb6..273df9139 100644
--- a/components/collections/Add.vue
+++ b/components/collections/Add.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/AddFolder.vue b/components/collections/AddFolder.vue
index 7c76ac6c0..4278983cb 100644
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <template #header>
-      <h3 class="heading">{{ $t("folder.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.new')"
+    @close="$emit('hide-modal')"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/Edit.vue b/components/collections/Edit.vue
index c3c066359..5e94f1dff 100644
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/EditFolder.vue b/components/collections/EditFolder.vue
index ce9c37cef..39fcd8d4a 100644
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <template #header>
-      <h3 class="heading">{{ $t("folder.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.edit')"
+    @close="$emit('hide-modal')"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/EditRequest.vue b/components/collections/EditRequest.vue
index fca64ba86..fe2e0f387 100644
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("edit_request") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('edit_request')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index 357113c2b..d95c1d639 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -1,18 +1,21 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
-      <div class="flex">
-        <ButtonSecondary
-          v-if="mode == 'import_from_my_collections'"
-          v-tippy="{ theme: 'tooltip' }"
-          title="Back"
-          icon="arrow_back"
-          @click.native="
-            mode = 'import_export'
-            mySelectedCollectionID = undefined
-          "
-        />
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('collections')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <ButtonSecondary
+        v-if="mode == 'import_from_my_collections'"
+        v-tippy="{ theme: 'tooltip' }"
+        title="Back"
+        icon="arrow_back"
+        @click.native="
+          mode = 'import_export'
+          mySelectedCollectionID = undefined
+        "
+      />
+      <span>
         <tippy
           v-if="
             mode == 'import_export' && collectionsType.type == 'my-collections'
@@ -24,7 +27,7 @@
           arrow
         >
           <template #trigger>
-            <TabPrimary
+            <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
@@ -62,8 +65,7 @@
             "
           />
         </tippy>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      </span>
     </template>
     <template #body>
       <div v-if="mode == 'import_export'" class="flex flex-col space-y-2">
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index 09d4c9bca..aae984908 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.save_as") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.save_as')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <div class="flex relative">
diff --git a/components/collections/graphql/Add.vue b/components/collections/graphql/Add.vue
index 2b8edaca4..0ce9ea1e4 100644
--- a/components/collections/graphql/Add.vue
+++ b/components/collections/graphql/Add.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/graphql/AddFolder.vue b/components/collections/graphql/AddFolder.vue
index 8794c66ff..816d42858 100644
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <template #header>
-      <h3 class="heading">{{ $t("folder.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.new')"
+    @close="$emit('hide-modal')"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/graphql/Edit.vue b/components/collections/graphql/Edit.vue
index efa5ba0d6..47c51110f 100644
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("collection.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/collections/graphql/EditFolder.vue b/components/collections/graphql/EditFolder.vue
index 1d48a7328..9a75a76dc 100644
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <template #header>
-      <h3 class="heading">{{ $t("folder.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.edit')"
+    @close="$emit('hide-modal')"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -44,6 +44,10 @@ export default Vue.extend({
   },
   methods: {
     editFolder() {
+      if (!this.name) {
+        this.$toast.info(this.$t("collection.invalid_name").toString())
+        return
+      }
       editGraphqlFolder(this.folderPath, { ...this.folder, name: this.name })
       this.hideModal()
     },
diff --git a/components/collections/graphql/EditRequest.vue b/components/collections/graphql/EditRequest.vue
index 90ceb18f1..2b817e1f0 100644
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("edit_request") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('edit_request')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -48,6 +44,10 @@ export default Vue.extend({
   },
   methods: {
     saveRequest() {
+      if (!this.requestUpdateData.name) {
+        this.$toast.info(this.$t("collection.invalid_name").toString())
+        return
+      }
       const requestUpdated = {
         ...this.$props.request,
         name: this.$data.requestUpdateData.name || this.$props.request.name,
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index f6743ec84..2370444f4 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -1,11 +1,14 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
-      <div class="flex">
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('collections')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <span>
         <tippy ref="options" interactive trigger="click" theme="popover" arrow>
           <template #trigger>
-            <TabPrimary
+            <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
@@ -43,8 +46,7 @@
             "
           />
         </tippy>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      </span>
     </template>
     <template #body>
       <div class="flex flex-col space-y-2">
diff --git a/components/environments/Add.vue b/components/environments/Add.vue
index 7f0bd7bda..c46b5bbf4 100644
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("new_environment") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('new_environment')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 903809a58..13e7c6cd2 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("edit_environment") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('edit_environment')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <div class="flex relative">
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index 48c37cdcf..d95be469c 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -1,13 +1,14 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">
-        {{ $t("import_export") }} {{ $t("environments") }}
-      </h3>
-      <div class="flex">
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('environments')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <span>
         <tippy ref="options" interactive trigger="click" theme="popover" arrow>
           <template #trigger>
-            <TabPrimary
+            <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
               icon="more_vert"
@@ -45,8 +46,7 @@
             "
           />
         </tippy>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      </span>
     </template>
     <template #body>
       <div class="flex flex-col space-y-2">
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index a98345e0d..5106b077f 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -1,9 +1,10 @@
 <template>
-  <SmartModal v-if="show" dialog @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("login_to_hoppscotch") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('login_to_hoppscotch')"
+    dialog
+    @close="hideModal"
+  >
     <template #body>
       <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
         <SmartItem
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index a7f34ba4f..705f8dea0 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -1,9 +1,9 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("request.generate_code") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal
+    v-if="show"
+    :title="$t('request.generate_code')"
+    @close="hideModal"
+  >
     <template #body>
       <div class="flex flex-col px-2">
         <label for="requestType" class="font-semibold px-4 pb-4">
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index 461a0341e..e0cfb46e6 100644
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("import.curl") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('import.curl')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <textarea
diff --git a/components/http/TokenList.vue b/components/http/TokenList.vue
index c11c394ed..40ed6ed61 100644
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("manage_token") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('manage_token')" @close="hideModal">
     <template #body>
       <div class="flex flex-1">
         <label>{{ $t("token_list") }}</label>
diff --git a/components/smart/ConfirmModal.vue b/components/smart/ConfirmModal.vue
index 462a52edb..24ea4f65e 100644
--- a/components/smart/ConfirmModal.vue
+++ b/components/smart/ConfirmModal.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("modal.confirm") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('modal.confirm')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <label class="font-semibold">
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index 60be73897..1e209948b 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -48,7 +48,15 @@
             "
           >
             <div class="flex pl-2 items-center justify-between">
-              <slot name="header"></slot>
+              <h3 class="heading">{{ title }}</h3>
+              <span class="flex">
+                <slot name="actions"></slot>
+                <ButtonSecondary
+                  v-if="dimissible"
+                  icon="close"
+                  @click.native="close"
+                />
+              </span>
             </div>
             <div
               class="
@@ -97,6 +105,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    title: {
+      type: String,
+      default: "",
+    },
+    dimissible: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup() {
     const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()
diff --git a/components/teams/Add.vue b/components/teams/Add.vue
index 3ae0d979d..1fc63678d 100644
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("team.new") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('team.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -46,7 +42,11 @@ export default {
       const name = this.name
       // We clear it early to give the UI a snappy feel
       this.name = ""
-      if (name != null && name.replace(/\s/g, "").length < 6) {
+      if (!name) {
+        this.$toast.info(this.$t("empty.team_name"))
+        return
+      }
+      if (name !== null && name.replace(/\s/g, "").length < 6) {
         this.$toast.error(this.$t("team.name_length_insufficient"), {
           icon: "error",
         })
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 4f2a24352..4d656a710 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -1,9 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("team.edit") }}</h3>
-      <ButtonSecondary icon="close" @click.native="hideModal" />
-    </template>
+  <SmartModal v-if="show" :title="$t('team.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input