refactor: remove shortcut hints in mobile devices

2021-12-20 14:40:38 +05:30
parent fac1288ef2
commit f94ee7c73f
23 changed files with 410 additions and 253 deletions
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -8,7 +8,7 @@
      @drop="dragging = false"
      @dragleave="dragging = false"
      @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
    >
      <span
        class="cursor-pointer flex px-4 items-center justify-center"
@@ -47,7 +47,7 @@
            trigger="click"
            theme="popover"
            arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
          >
            <template #trigger>
              <ButtonSecondary
@@ -60,12 +60,13 @@
              ref="tippyActions"
              class="flex flex-col focus:outline-none"
              tabindex="0"
-              @keyup.n="$refs.folder.$el.click()"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.n="folderAction.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
            >
              <SmartItem
-                ref="folder"
+                ref="folderAction"
                svg="folder-plus"
                :label="`${$t('folder.new')}`"
                :shortcut="['N']"
@@ -74,7 +75,7 @@
                    $emit('add-folder', {
                      path: `${collectionIndex}`,
                    })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -86,19 +87,19 @@
                @click.native="
                  () => {
                    $emit('edit-collection')
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
              <SmartItem
-                ref="delete"
+                ref="deleteAction"
                svg="trash-2"
                :label="`${$t('action.delete')}`"
                :shortcut="['⌫']"
                @click.native="
                  () => {
                    confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -174,7 +175,7 @@
 </template>

 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import {
  removeGraphqlCollection,
  moveGraphqlRequest,
@@ -190,6 +191,15 @@ export default defineComponent({
    doc: Boolean,
    isFiltered: Boolean,
  },
+  setup() {
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      folderAction: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+    }
+  },
  data() {
    return {
      showChildren: false,
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -8,7 +8,7 @@
      @drop="dragging = false"
      @dragleave="dragging = false"
      @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
    >
      <span
        class="cursor-pointer flex px-4 items-center justify-center"
@@ -43,7 +43,7 @@
            trigger="click"
            theme="popover"
            arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
          >
            <template #trigger>
              <ButtonSecondary
@@ -56,19 +56,20 @@
              ref="tippyActions"
              class="flex flex-col focus:outline-none"
              tabindex="0"
-              @keyup.n="$refs.folder.$el.click()"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.n="folderAction.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
            >
              <SmartItem
-                ref="folder"
+                ref="folderAction"
                svg="folder-plus"
                :label="`${$t('folder.new')}`"
                :shortcut="['N']"
                @click.native="
                  () => {
                    $emit('add-folder', { folder, path: folderPath })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -80,19 +81,19 @@
                @click.native="
                  () => {
                    $emit('edit-folder', { folder, folderPath })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
              <SmartItem
-                ref="delete"
+                ref="deleteAction"
                svg="trash-2"
                :label="`${$t('action.delete')}`"
                :shortcut="['⌫']"
                @click.native="
                  () => {
                    confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -171,7 +172,7 @@
 </template>

 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"

 export default defineComponent({
@@ -187,6 +188,15 @@ export default defineComponent({
    doc: Boolean,
    isFiltered: Boolean,
  },
+  setup() {
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      folderAction: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+    }
+  },
  data() {
    return {
      showChildren: false,
--- a/packages/hoppscotch-app/components/collections/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Request.vue
@@ -7,7 +7,7 @@
      @dragover.stop
      @dragleave="dragging = false"
      @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
    >
      <span
        class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
@@ -43,7 +43,7 @@
            trigger="click"
            theme="popover"
            arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
          >
            <template #trigger>
              <ButtonSecondary
@@ -56,9 +56,10 @@
              ref="tippyActions"
              class="flex flex-col focus:outline-none"
              tabindex="0"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.d="$refs.duplicate.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.d="duplicate.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
            >
              <SmartItem
                ref="edit"
@@ -72,7 +73,7 @@
                      requestIndex,
                      folderPath,
                    })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -88,19 +89,19 @@
                      requestIndex,
                      folderPath,
                    })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
              <SmartItem
-                ref="delete"
+                ref="deleteAction"
                svg="trash-2"
                :label="`${$t('action.delete')}`"
                :shortcut="['⌫']"
                @click.native="
                  () => {
                    confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -119,7 +120,7 @@
 </template>

 <script lang="ts">
-import { defineComponent, PropType } from "@nuxtjs/composition-api"
+import { defineComponent, PropType, ref } from "@nuxtjs/composition-api"
 import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
 import { removeGraphqlRequest } from "~/newstore/collections"
 import { setGQLSession } from "~/newstore/GQLSession"
@@ -135,6 +136,15 @@ export default defineComponent({
    requestIndex: { type: Number, default: null },
    doc: Boolean,
  },
+  setup() {
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      duplicate: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+    }
+  },
  data() {
    return {
      dragging: false,
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -8,7 +8,7 @@
      @drop="dragging = false"
      @dragleave="dragging = false"
      @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
    >
      <span
        class="cursor-pointer flex px-4 items-center justify-center"
@@ -65,7 +65,7 @@
            trigger="click"
            theme="popover"
            arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
          >
            <template #trigger>
              <ButtonSecondary
@@ -78,12 +78,13 @@
              ref="tippyActions"
              class="flex flex-col focus:outline-none"
              tabindex="0"
-              @keyup.n="$refs.folder.$el.click()"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.n="folderAction.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
            >
              <SmartItem
-                ref="folder"
+                ref="folderAction"
                svg="folder-plus"
                :label="$t('folder.new')"
                :shortcut="['N']"
@@ -93,7 +94,7 @@
                      folder: collection,
                      path: `${collectionIndex}`,
                    })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -105,19 +106,19 @@
                @click.native="
                  () => {
                    $emit('edit-collection')
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
              <SmartItem
-                ref="delete"
+                ref="deleteAction"
                svg="trash-2"
                :label="$t('action.delete')"
                :shortcut="['⌫']"
                @click.native="
                  () => {
                    confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -182,7 +183,7 @@
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
-            :alt="$t('empty.collection')"
+            :alt="`${$t('empty.collection')}`"
          />
          <span class="text-center">
            {{ $t("empty.collection") }}
@@ -199,8 +200,8 @@
  </div>
 </template>

-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import { moveRESTRequest } from "~/newstore/collections"

 export default defineComponent({
@@ -214,6 +215,15 @@ export default defineComponent({
    collectionsType: { type: Object, default: () => {} },
    picked: { type: Object, default: () => {} },
  },
+  setup() {
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      folderAction: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+    }
+  },
  data() {
    return {
      showChildren: false,
@@ -226,7 +236,7 @@ export default defineComponent({
    }
  },
  computed: {
-    isSelected() {
+    isSelected(): boolean {
      return (
        this.picked &&
        this.picked.pickedType === "my-collection" &&
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -8,7 +8,7 @@
      @drop="dragging = false"
      @dragleave="dragging = false"
      @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
    >
      <span
        class="cursor-pointer flex px-4 items-center justify-center"
@@ -32,7 +32,7 @@
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          svg="folder-plus"
-          :title="$t('folder.new')"
+          :title="t('folder.new')"
          class="hidden group-hover:inline-flex"
          @click.native="$emit('add-folder', { folder, path: folderPath })"
        />
@@ -43,12 +43,12 @@
            trigger="click"
            theme="popover"
            arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
          >
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('action.more')"
+                :title="t('action.more')"
                svg="more-vertical"
              />
            </template>
@@ -56,26 +56,27 @@
              ref="tippyActions"
              class="flex flex-col focus:outline-none"
              tabindex="0"
-              @keyup.n="$refs.folder.$el.click()"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.n="folderAction.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
            >
              <SmartItem
-                ref="folder"
+                ref="folderAction"
                svg="folder-plus"
-                :label="$t('folder.new')"
+                :label="t('folder.new')"
                :shortcut="['N']"
                @click.native="
                  () => {
                    $emit('add-folder', { folder, path: folderPath })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
              <SmartItem
                ref="edit"
                svg="edit"
-                :label="$t('action.edit')"
+                :label="t('action.edit')"
                :shortcut="['E']"
                @click.native="
                  () => {
@@ -85,19 +86,19 @@
                      collectionIndex,
                      folderPath,
                    })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
              <SmartItem
-                ref="delete"
+                ref="deleteAction"
                svg="trash-2"
-                :label="$t('action.delete')"
+                :label="t('action.delete')"
                :shortcut="['⌫']"
                @click.native="
                  () => {
                    confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -162,25 +163,26 @@
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
-            :alt="$t('empty.folder')"
+            :alt="`${t('empty.folder')}`"
          />
          <span class="text-center">
-            {{ $t("empty.folder") }}
+            {{ t("empty.folder") }}
          </span>
        </div>
      </div>
    </div>
    <SmartConfirmModal
      :show="confirmRemove"
-      :title="$t('confirm.remove_folder')"
+      :title="t('confirm.remove_folder')"
      @hide-modal="confirmRemove = false"
      @resolve="removeFolder"
    />
  </div>
 </template>

-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
+import { useI18n } from "~/helpers/utils/composables"
 import {
  removeRESTFolder,
  removeRESTRequest,
@@ -200,6 +202,18 @@ export default defineComponent({
    collectionsType: { type: Object, default: () => {} },
    picked: { type: Object, default: () => {} },
  },
+  setup() {
+    const t = useI18n()
+
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      folderAction: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+      t,
+    }
+  },
  data() {
    return {
      showChildren: false,
@@ -210,7 +224,7 @@ export default defineComponent({
    }
  },
  computed: {
-    isSelected() {
+    isSelected(): boolean {
      return (
        this.picked &&
        this.picked.pickedType === "my-folder" &&
@@ -248,7 +262,7 @@ export default defineComponent({
        this.$emit("select", { picked: null })
      }
      removeRESTFolder(this.folderPath)
-      this.$toast.success(this.$t("state.deleted"))
+      this.$toast.success(`${this.$t("state.deleted")}`)
    },
    dropEvent({ dataTransfer }) {
      this.dragging = !this.dragging
--- a/packages/hoppscotch-app/components/collections/my/Request.vue
+++ b/packages/hoppscotch-app/components/collections/my/Request.vue
@@ -7,7 +7,7 @@
      @dragover.stop
      @dragleave="dragging = false"
      @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
    >
      <span
        class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
@@ -59,7 +59,7 @@
            trigger="click"
            theme="popover"
            arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
          >
            <template #trigger>
              <ButtonSecondary
@@ -72,9 +72,10 @@
              ref="tippyActions"
              class="flex flex-col focus:outline-none"
              tabindex="0"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.d="$refs.duplicate.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.d="duplicate.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
            >
              <SmartItem
                ref="edit"
@@ -91,7 +92,7 @@
                      requestIndex,
                      folderPath,
                    })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -110,19 +111,19 @@
                      requestIndex,
                      folderPath,
                    })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
              <SmartItem
-                ref="delete"
+                ref="deleteAction"
                svg="trash-2"
                :label="$t('action.delete')"
                :shortcut="['⌫']"
                @click.native="
                  () => {
                    confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -140,8 +141,8 @@
  </div>
 </template>

-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import { translateToNewRequest } from "@hoppscotch/data"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
@@ -168,6 +169,11 @@ export default defineComponent({
    const active = useReadonlyStream(restSaveContext$, null)
    return {
      active,
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      duplicate: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
    }
  },
  data() {
@@ -184,7 +190,7 @@ export default defineComponent({
    }
  },
  computed: {
-    isSelected() {
+    isSelected(): boolean {
      return (
        this.picked &&
        this.picked.pickedType === "my-request" &&
@@ -235,7 +241,7 @@ export default defineComponent({
        requestIndex: this.$props.requestIndex,
      })
    },
-    getRequestLabelColor(method) {
+    getRequestLabelColor(method: string): string {
      return (
        this.requestMethodLabels[method.toLowerCase()] ||
        this.requestMethodLabels.default
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -8,7 +8,7 @@
      @drop="dragging = false"
      @dragleave="dragging = false"
      @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
    >
      <span
        class="cursor-pointer flex px-4 items-center justify-center"
@@ -32,7 +32,7 @@
        <ButtonSecondary
          v-if="doc && !selected"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('import.title')"
+          :title="t('import.title')"
          svg="circle"
          color="green"
          @click.native="$emit('select-collection')"
@@ -40,7 +40,7 @@
        <ButtonSecondary
          v-if="doc && selected"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.remove')"
+          :title="t('action.remove')"
          svg="check-circle"
          color="green"
          @click.native="$emit('unselect-collection')"
@@ -49,7 +49,7 @@
          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
          v-tippy="{ theme: 'tooltip' }"
          svg="folder-plus"
-          :title="$t('folder.new')"
+          :title="t('folder.new')"
          class="hidden group-hover:inline-flex"
          @click.native="
            $emit('add-folder', {
@@ -66,12 +66,12 @@
            trigger="click"
            theme="popover"
            arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
          >
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('action.more')"
+                :title="t('action.more')"
                svg="more-vertical"
              />
            </template>
@@ -79,14 +79,15 @@
              ref="tippyActions"
              class="flex flex-col focus:outline-none"
              tabindex="0"
-              @keyup.n="$refs.folder.$el.click()"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.n="folderAction.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
            >
              <SmartItem
-                ref="folder"
+                ref="folderAction"
                svg="folder-plus"
-                :label="$t('folder.new')"
+                :label="t('folder.new')"
                :shortcut="['N']"
                @click.native="
                  () => {
@@ -94,31 +95,31 @@
                      folder: collection,
                      path: `${collectionIndex}`,
                    })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
              <SmartItem
                ref="edit"
                svg="edit"
-                :label="$t('action.edit')"
+                :label="t('action.edit')"
                :shortcut="['E']"
                @click.native="
                  () => {
                    $emit('edit-collection')
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
              <SmartItem
-                ref="delete"
+                ref="deleteAction"
                svg="trash-2"
-                :label="$t('action.delete')"
+                :label="t('action.delete')"
                :shortcut="['⌫']"
                @click.native="
                  () => {
                    confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -181,27 +182,28 @@
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
-            :alt="$t('empty.collection')"
+            :alt="`${t('empty.collection')}`"
          />
          <span class="text-center">
-            {{ $t("empty.collection") }}
+            {{ t("empty.collection") }}
          </span>
        </div>
      </div>
    </div>
    <SmartConfirmModal
      :show="confirmRemove"
-      :title="$t('confirm.remove_collection')"
+      :title="t('confirm.remove_collection')"
      @hide-modal="confirmRemove = false"
      @resolve="removeCollection"
    />
  </div>
 </template>

-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import * as E from "fp-ts/Either"
 import { moveRESTTeamRequest } from "~/helpers/backend/mutations/TeamRequest"
+import { useI18n } from "~/helpers/utils/composables"

 export default defineComponent({
  props: {
@@ -214,6 +216,18 @@ export default defineComponent({
    collectionsType: { type: Object, default: () => {} },
    picked: { type: Object, default: () => {} },
  },
+  setup() {
+    const t = useI18n()
+
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      folderAction: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+      t,
+    }
+  },
  data() {
    return {
      showChildren: false,
@@ -226,7 +240,7 @@ export default defineComponent({
    }
  },
  computed: {
-    isSelected() {
+    isSelected(): boolean {
      return (
        this.picked &&
        this.picked.pickedType === "teams-collection" &&
@@ -281,7 +295,7 @@ export default defineComponent({
        this.collection.id
      )()
      if (E.isLeft(moveRequestResult))
-        this.$toast.error(this.$t("error.something_went_wrong"))
+        this.$toast.error(`${this.$t("error.something_went_wrong")}`)
    },
    removeRequest({ collectionIndex, folderName, requestIndex }) {
      this.$emit("remove-request", {
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -8,7 +8,7 @@
      @drop="dragging = false"
      @dragleave="dragging = false"
      @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
    >
      <span
        class="cursor-pointer flex px-4 items-center justify-center"
@@ -45,7 +45,7 @@
            trigger="click"
            theme="popover"
            arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
          >
            <template #trigger>
              <ButtonSecondary
@@ -58,19 +58,20 @@
              ref="tippyActions"
              class="flex flex-col focus:outline-none"
              tabindex="0"
-              @keyup.n="$refs.folder.$el.click()"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.n="folderAction.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
            >
              <SmartItem
-                ref="folder"
+                ref="folderAction"
                svg="folder-plus"
                :label="$t('folder.new')"
                :shortcut="['N']"
                @click.native="
                  () => {
                    $emit('add-folder', { folder, path: folderPath })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -87,19 +88,19 @@
                      collectionIndex,
                      folderPath: '',
                    })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
              <SmartItem
-                ref="delete"
+                ref="deleteAction"
                svg="trash-2"
                :label="$t('action.delete')"
                :shortcut="['⌫']"
                @click.native="
                  () => {
                    confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                  }
                "
              />
@@ -160,7 +161,7 @@
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
-            :alt="$t('empty.folder')"
+            :alt="`${$t('empty.folder')}`"
          />
          <span class="text-center">
            {{ $t("empty.folder") }}
@@ -177,8 +178,8 @@
  </div>
 </template>

-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import * as E from "fp-ts/Either"
 import { moveRESTTeamRequest } from "~/helpers/backend/mutations/TeamRequest"
 import * as teamUtils from "~/helpers/teams/utils"
@@ -196,6 +197,15 @@ export default defineComponent({
    collectionsType: { type: Object, default: () => {} },
    picked: { type: Object, default: () => {} },
  },
+  setup() {
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      folderAction: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+    }
+  },
  data() {
    return {
      showChildren: false,
@@ -206,7 +216,7 @@ export default defineComponent({
    }
  },
  computed: {
-    isSelected() {
+    isSelected(): boolean {
      return (
        this.picked &&
        this.picked.pickedType === "teams-folder" &&
@@ -247,11 +257,11 @@ export default defineComponent({
        teamUtils
          .deleteCollection(this.$apollo, this.folder.id)
          .then(() => {
-            this.$toast.success(this.$t("state.deleted"))
+            this.$toast.success(`${this.$t("state.deleted")}`)
            this.$emit("update-team-collections")
          })
          .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"))
+            this.$toast.error(`${this.$t("error.something_went_wrong")}`)
            console.error(e)
          })
        this.$emit("update-team-collections")
@@ -268,7 +278,7 @@ export default defineComponent({
        this.folder.id
      )()
      if (E.isLeft(moveRequestResult))
-        this.$toast.error(this.$t("error.something_went_wrong"))
+        this.$toast.error(`${this.$t("error.something_went_wrong")}`)
    },
    removeRequest({ collectionIndex, folderName, requestIndex }) {
      this.$emit("remove-request", {
--- a/packages/hoppscotch-app/components/collections/teams/Request.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Request.vue
@@ -7,7 +7,7 @@
      @dragover.stop
      @dragleave="dragging = false"
      @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
    >
      <span
        class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
@@ -59,7 +59,7 @@
            trigger="click"
            theme="popover"
            arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
          >
            <template #trigger>
              <ButtonSecondary
@@ -72,8 +72,9 @@
              ref="tippyActions"
              class="flex flex-col focus:outline-none"
              tabindex="0"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
            >
              <SmartItem
                ref="edit"
@@ -81,24 +82,28 @@
                :label="$t('action.edit')"
                :shortcut="['E']"
                @click.native="
-                  $emit('edit-request', {
-                    collectionIndex,
-                    folderIndex,
-                    folderName,
-                    request,
-                    requestIndex,
-                  })
-                  $refs.options.tippy().hide()
+                  () => {
+                    $emit('edit-request', {
+                      collectionIndex,
+                      folderIndex,
+                      folderName,
+                      request,
+                      requestIndex,
+                    })
+                    options.tippy().hide()
+                  }
                "
              />
              <SmartItem
-                ref="delete"
+                ref="deleteAction"
                svg="trash-2"
                :label="$t('action.delete')"
                :shortcut="['⌫']"
                @click.native="
-                  confirmRemove = true
-                  $refs.options.tippy().hide()
+                  () => {
+                    confirmRemove = true
+                    options.tippy().hide()
+                  }
                "
              />
            </div>
@@ -116,7 +121,7 @@
 </template>

 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import { translateToNewRequest } from "@hoppscotch/data"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
@@ -142,6 +147,10 @@ export default defineComponent({
    const active = useReadonlyStream(restSaveContext$, null)
    return {
      active,
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
    }
  },
  data() {