chore: improve cookie modal ui (#3495)

packages/hoppscotch-common/locales/en.json

@@ -59,15 +59,17 @@
     "modal": {
       "new_domain_name": "New domain name",
       "set": "Set a cookie",
-      "cookie_string": "Set-Cookie string",
+      "cookie_string": "Cookie string",
+      "enter_cookie_string": "Enter cookie string",
       "cookie_name": "Name",
       "cookie_value": "Value",
       "cookie_path": "Path",
       "cookie_expires": "Expires",
       "managed_tab": "Managed",
       "raw_tab": "Raw",
-      "interceptor_no_support": "Your currently selected interceptor does not support cookies.",
-      "no_domains": "No domains defined",
+      "interceptor_no_support": "Your currently selected interceptor does not support cookies. Select a different Interceptor and try again.",
+      "empty_domains": "Domain list is empty",
+      "empty_domain": "Domain is empty",
       "no_cookies_in_domain": "No cookies set for this domain"
     }
   },

packages/hoppscotch-common/src/components/cookies/AllModal.vue

@@ -7,91 +7,105 @@
     @close="hideModal"
   >
     <template #body>
-      <div
+      <HoppSmartPlaceholder
         v-if="!currentInterceptorSupportsCookies"
-        class="flex flex-col gap-2 p-5 items-center"
+        :text="t('cookies.modal.interceptor_no_support')"
       >
-        <icon-lucide-info />
-        {{ t("cookies.modal.interceptor_no_support") }}
-      </div>
-
-      <div class="flex gap-x-2 border-b border-dividerLight pb-3">
-        <HoppSmartInput
-          v-model="newDomainText"
-          class="flex-grow"
-          :placeholder="t('cookies.modal.new_domain_name')"
-        />
-        <HoppButtonSecondary
-          outline
-          filled
-          :label="t('action.add')"
-          @click="addNewDomain"
-        />
-      </div>
-      <div class="pt-3 flex flex-col gap-y-6">
+        <AppInterceptor class="p-2 border rounded border-dividerLight" />
+      </HoppSmartPlaceholder>
+      <div v-else class="flex flex-col">
         <div
-          v-if="workingCookieJar.size === 0"
-          class="flex flex-col items-center p-5 gap-2"
+          class="flex bg-primary space-x-2 border-b sticky border-dividerLight -mx-4 px-4 py-4 -mt-4"
+          style="top: calc(-1 * var(--line-height-body))"
         >
-          <icon-lucide-info />
-          {{ t("cookies.modal.no_domains") }}
+          <HoppSmartInput
+            v-model="newDomainText"
+            class="flex-1"
+            :placeholder="t('cookies.modal.new_domain_name')"
+            @keyup.enter="addNewDomain"
+          />
+          <HoppButtonSecondary
+            outline
+            filled
+            :label="t('action.add')"
+            @click="addNewDomain"
+          />
         </div>
-        <div
-          v-else
-          v-for="[domain, entries] in workingCookieJar.entries()"
-          :key="domain"
-          class="flex flex-col gap-y-2"
-        >
-          <div class="flex items-center justify-between">
-            <h3>{{ domain }}</h3>
-            <div>
-              <HoppButtonSecondary
-                :icon="IconTrash2"
-                @click="deleteDomain(domain)"
-              />
-              <HoppButtonSecondary
-                :icon="IconPlus"
-                @click="addCookieToDomain(domain)"
-              />
-            </div>
-          </div>
-
-          <div class="border rounded border-divider">
-            <div class="divide-y divide-dividerLight">
-              <div
-                v-if="entries.length === 0"
-                class="flex flex-col items-center p-5 gap-2"
-              >
-                <icon-lucide-info />
-                {{ t("cookies.modal.no_cookies_in_domain") }}
+        <div class="flex flex-col space-y-4">
+          <HoppSmartPlaceholder
+            v-if="workingCookieJar.size === 0"
+            :src="`/images/states/${colorMode.value}/blockchain.svg`"
+            :alt="`${t('cookies.modal.empty_domains')}`"
+            :text="t('cookies.modal.empty_domains')"
+            class="mt-6"
+          >
+          </HoppSmartPlaceholder>
+          <div
+            v-for="[domain, entries] in workingCookieJar.entries()"
+            v-else
+            :key="domain"
+            class="flex flex-col"
+          >
+            <div class="flex items-center justify-between flex-1">
+              <label for="cookiesList" class="p-4">
+                {{ domain }}
+              </label>
+              <div class="flex">
+                <HoppButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="t('action.delete')"
+                  :icon="IconTrash2"
+                  @click="deleteDomain(domain)"
+                />
+                <HoppButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="t('add.new')"
+                  :icon="IconPlus"
+                  @click="addCookieToDomain(domain)"
+                />
               </div>
-              <div
-                v-else
-                v-for="(entry, entryIndex) in entries"
-                :key="`${entry}-${entryIndex}`"
-                class="flex divide-x divide-dividerLight"
-              >
-                <input
-                  class="flex flex-1 px-4 py-2 bg-transparent"
-                  :value="entry"
-                  readonly
-                />
-                <HoppButtonSecondary
-                  :icon="IconEdit"
-                  @click="editCookie(domain, entryIndex, entry)"
-                />
-                <HoppButtonSecondary
-                  color="red"
-                  :icon="IconTrash"
-                  @click="deleteCookie(domain, entryIndex)"
-                />
+            </div>
+            <div class="border rounded border-divider">
+              <div class="divide-y divide-dividerLight">
+                <div
+                  v-if="entries.length === 0"
+                  class="flex flex-col gap-2 p-4 items-center"
+                >
+                  {{ t("cookies.modal.no_cookies_in_domain") }}
+                </div>
+                <template v-else>
+                  <div
+                    v-for="(entry, entryIndex) in entries"
+                    :key="`${entry}-${entryIndex}`"
+                    class="flex divide-x divide-dividerLight"
+                  >
+                    <input
+                      class="flex flex-1 px-4 py-2 bg-transparent"
+                      :value="entry"
+                      readonly
+                    />
+                    <HoppButtonSecondary
+                      v-tippy="{ theme: 'tooltip' }"
+                      :title="t('action.edit')"
+                      :icon="IconEdit"
+                      @click="editCookie(domain, entryIndex, entry)"
+                    />
+                    <HoppButtonSecondary
+                      v-tippy="{ theme: 'tooltip' }"
+                      :title="t('action.remove')"
+                      :icon="IconTrash"
+                      color="red"
+                      @click="deleteCookie(domain, entryIndex)"
+                    />
+                  </div>
+                </template>
               </div>
             </div>
           </div>
         </div>
       </div>
     </template>
-    <template #footer>
+    <template v-if="currentInterceptorSupportsCookies" #footer>
       <span class="flex space-x-2">
         <HoppButtonPrimary
           v-focus
@@ -110,7 +124,7 @@
         :label="t('action.clear_all')"
         outline
         filled
-        @click="hideModal"
+        @click="clearAllDomains"
       />
     </template>
   </HoppSmartModal>
@@ -134,6 +148,8 @@ import { cloneDeep } from "lodash-es"
 import { ref, watch, computed } from "vue"
 import { InterceptorService } from "~/services/interceptor.service"
 import { EditCookieConfig } from "./EditCookie.vue"
+import { useColorMode } from "@composables/theming"
+import { useToast } from "@composables/toast"
 
 const props = defineProps<{
   show: boolean
@@ -144,6 +160,8 @@ const emit = defineEmits<{
 }>()
 
 const t = useI18n()
+const colorMode = useColorMode()
+const toast = useToast()
 
 const newDomainText = ref("")
 
@@ -161,6 +179,11 @@ const currentInterceptorSupportsCookies = computed(() => {
 })
 
 function addNewDomain() {
+  if (newDomainText.value === "" || /^\s+$/.test(newDomainText.value)) {
+    toast.error(`${t("cookies.modal.empty_domain")}`)
+    return
+  }
+
   workingCookieJar.value.set(newDomainText.value, [])
   newDomainText.value = ""
 }
@@ -173,6 +196,11 @@ function addCookieToDomain(domain: string) {
   showEditModalFor.value = { type: "create", domain }
 }
 
+function clearAllDomains() {
+  workingCookieJar.value = new Map()
+  toast.success(`${t("state.cleared")}`)
+}
+
 watch(
   () => props.show,
   (show) => {

packages/hoppscotch-common/src/components/cookies/EditCookie.vue

@@ -3,18 +3,52 @@
     v-if="show"
     dialog
     :title="t('cookies.modal.set')"
-    aria-modal="true"
     @close="hideModal"
   >
     <template #body>
-      <div class="h-46 border rounded border-dividerLight">
-        <div
-          ref="cookieEditor"
-          class="h-full border-t rounded-b border-dividerLight"
-        ></div>
+      <div class="border rounded border-dividerLight">
+        <div class="flex flex-col">
+          <div class="flex items-center justify-between pl-4">
+            <label class="font-semibold truncate text-secondaryLight">
+              {{ t("cookies.modal.cookie_string") }}
+            </label>
+            <div class="flex items-center">
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('action.clear_all')"
+                :icon="IconTrash2"
+                @click="clearContent()"
+              />
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('state.linewrap')"
+                :class="{ '!text-accent': linewrapEnabled }"
+                :icon="IconWrapText"
+                @click.prevent="linewrapEnabled = !linewrapEnabled"
+              />
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip', allowHTML: true }"
+                :title="t('action.download_file')"
+                :icon="downloadIcon"
+                @click="downloadResponse"
+              />
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip', allowHTML: true }"
+                :title="t('action.copy')"
+                :icon="copyIcon"
+                @click="copyResponse"
+              />
+            </div>
+          </div>
+          <div class="h-46">
+            <div
+              ref="cookieEditor"
+              class="h-full border-t rounded-b border-dividerLight"
+            ></div>
+          </div>
+        </div>
       </div>
     </template>
-
     <template #footer>
       <div class="flex space-x-2">
         <HoppButtonPrimary
@@ -37,7 +71,6 @@
           filled
           outline
           @click="handlePaste"
-          class="self-end"
         />
       </span>
     </template>
@@ -58,11 +91,17 @@ export type EditCookieConfig =
 <script setup lang="ts">
 import { useI18n } from "@composables/i18n"
 import { useCodemirror } from "~/composables/codemirror"
-import { watch, ref } from "vue"
+import { watch, ref, reactive } from "vue"
 import { refAutoReset } from "@vueuse/core"
+import IconWrapText from "~icons/lucide/wrap-text"
 import IconClipboard from "~icons/lucide/clipboard"
 import IconCheck from "~icons/lucide/check"
+import IconTrash2 from "~icons/lucide/trash-2"
 import { useToast } from "~/composables/toast"
+import {
+  useCopyResponse,
+  useDownloadResponse,
+} from "~/composables/lens-actions"
 
 // TODO: Build Managed Mode!
 
@@ -83,17 +122,22 @@ const toast = useToast()
 
 const cookieEditor = ref<HTMLElement>()
 const rawCookieString = ref("")
+const linewrapEnabled = ref(true)
 
-useCodemirror(cookieEditor, rawCookieString, {
-  extendedEditorConfig: {
-    mode: "text/plain",
-    placeholder: `${t("cookies.modal.cookie_string")}`,
-    lineWrapping: true,
-  },
-  linter: null,
-  completer: null,
-  environmentHighlights: false,
-})
+useCodemirror(
+  cookieEditor,
+  rawCookieString,
+  reactive({
+    extendedEditorConfig: {
+      mode: "text/plain",
+      placeholder: `${t("cookies.modal.enter_cookie_string")}`,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+    environmentHighlights: false,
+  })
+)
 
 const pasteIcon = refAutoReset<typeof IconClipboard | typeof IconCheck>(
   IconClipboard,
@@ -133,4 +177,14 @@ async function handlePaste() {
 function saveCookieChange() {
   emit("save-cookie", rawCookieString.value)
 }
+
+const { copyIcon, copyResponse } = useCopyResponse(rawCookieString)
+const { downloadIcon, downloadResponse } = useDownloadResponse(
+  "",
+  rawCookieString
+)
+
+function clearContent() {
+  rawCookieString.value = ""
+}
 </script>