feat: add New Request button for folder and collection (#2241)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
2022-04-14 17:09:02 +05:30
parent 745b9f7275
commit ff51b7e5df
12 changed files with 390 additions and 3 deletions
--- a/packages/hoppscotch-app/components/collections/AddRequest.vue
+++ b/packages/hoppscotch-app/components/collections/AddRequest.vue
@@ -0,0 +1,92 @@
+<template>
+  <SmartModal
+    v-if="show"
+    dialog
+    :title="$t('request.new')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelAddRequest"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="addRequest"
+        />
+        <label for="selectLabelAddRequest">{{ $t("action.label") }}</label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('action.save')"
+          :loading="loadingState"
+          @click.native="addRequest"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "@nuxtjs/composition-api"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+import { getRESTRequest } from "~/newstore/RESTSession"
+
+const toast = useToast()
+const t = useI18n()
+
+const props = defineProps<{
+  show: boolean
+  loadingState: boolean
+  folder?: object
+  folderPath?: string
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+  (
+    e: "add-request",
+    v: {
+      name: string
+      folder: object | undefined
+      path: string | undefined
+    }
+  ): void
+}>()
+
+const name = ref("")
+
+watch(
+  () => props.show,
+  (show) => {
+    if (show) {
+      name.value = getRESTRequest().name
+    }
+  }
+)
+
+const addRequest = () => {
+  if (!name.value) {
+    toast.error(`${t("error.empty_req_name")}`)
+    return
+  }
+  emit("add-request", {
+    name: name.value,
+    folder: props.folder,
+    path: props.folderPath,
+  })
+}
+
+const hideModal = () => {
+  emit("hide-modal")
+}
+</script>
--- a/packages/hoppscotch-app/components/collections/graphql/AddFolder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/AddFolder.vue
@@ -50,12 +50,16 @@ export default defineComponent({
  },
  methods: {
    addFolder() {
-      // TODO: Blocking when name is null ?
+      if (!this.name) {
+        this.$toast.error(`${this.$t("folder.name_length_insufficient")}`)
+        return
+      }

      this.$emit("add-folder", {
        name: this.name,
        path: this.folderPath || `${this.collectionIndex}`,
      })
+
      this.hideModal()
    },
    hideModal() {
--- a/packages/hoppscotch-app/components/collections/graphql/AddRequest.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/AddRequest.vue
@@ -0,0 +1,87 @@
+<template>
+  <SmartModal
+    v-if="show"
+    dialog
+    :title="$t('request.new')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelGqlAddRequest"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="addRequest"
+        />
+        <label for="selectLabelGqlAddRequest">
+          {{ $t("action.label") }}
+        </label>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="addRequest" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "@nuxtjs/composition-api"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+import { getGQLSession } from "~/newstore/GQLSession"
+
+const toast = useToast()
+const t = useI18n()
+
+const props = defineProps<{
+  show: boolean
+  folderPath?: string
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+  (
+    e: "add-request",
+    v: {
+      name: string
+      path: string | undefined
+    }
+  ): void
+}>()
+
+const name = ref("")
+
+watch(
+  () => props.show,
+  (show) => {
+    if (show) {
+      name.value = getGQLSession().request.name
+    }
+  }
+)
+
+const addRequest = () => {
+  if (!name.value) {
+    toast.error(`${t("error.empty_req_name")}`)
+    return
+  }
+  emit("add-request", {
+    name: name.value,
+    path: props.folderPath,
+  })
+  hideModal()
+}
+
+const hideModal = () => {
+  emit("hide-modal")
+}
+</script>
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -61,11 +61,26 @@
              class="flex flex-col focus:outline-none"
              tabindex="0"
              role="menu"
+              @keyup.r="requestAction.$el.click()"
              @keyup.n="folderAction.$el.click()"
              @keyup.e="edit.$el.click()"
              @keyup.delete="deleteAction.$el.click()"
              @keyup.escape="options.tippy().hide()"
            >
+              <SmartItem
+                ref="requestAction"
+                svg="plus"
+                :label="`${$t('request.new')}`"
+                :shortcut="['R']"
+                @click.native="
+                  () => {
+                    $emit('add-request', {
+                      path: `${collectionIndex}`,
+                    })
+                    options.tippy().hide()
+                  }
+                "
+              />
              <SmartItem
                ref="folderAction"
                svg="folder-plus"
@@ -126,6 +141,7 @@
          :collection-index="collectionIndex"
          :doc="doc"
          :is-filtered="isFiltered"
+          @add-request="$emit('add-request', $event)"
          @add-folder="$emit('add-folder', $event)"
          @edit-folder="$emit('edit-folder', $event)"
          @edit-request="$emit('edit-request', $event)"
@@ -196,6 +212,7 @@ export default defineComponent({
    return {
      tippyActions: ref<any | null>(null),
      options: ref<any | null>(null),
+      requestAction: ref<any | null>(null),
      folderAction: ref<any | null>(null),
      edit: ref<any | null>(null),
      deleteAction: ref<any | null>(null),
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -57,11 +57,24 @@
              class="flex flex-col focus:outline-none"
              tabindex="0"
              role="menu"
+              @keyup.r="requestAction.$el.click()"
              @keyup.n="folderAction.$el.click()"
              @keyup.e="edit.$el.click()"
              @keyup.delete="deleteAction.$el.click()"
              @keyup.escape="options.tippy().hide()"
            >
+              <SmartItem
+                ref="requestAction"
+                svg="plus"
+                :label="`${$t('request.new')}`"
+                :shortcut="['R']"
+                @click.native="
+                  () => {
+                    $emit('add-request', { path: folderPath })
+                    options.tippy().hide()
+                  }
+                "
+              />
              <SmartItem
                ref="folderAction"
                svg="folder-plus"
@@ -120,6 +133,7 @@
          :collection-index="collectionIndex"
          :doc="doc"
          :is-filtered="isFiltered"
+          @add-request="$emit('add-request', $event)"
          @add-folder="$emit('add-folder', $event)"
          @edit-folder="$emit('edit-folder', $event)"
          @edit-request="$emit('edit-request', $event)"
@@ -193,6 +207,7 @@ export default defineComponent({
    return {
      tippyActions: ref<any | null>(null),
      options: ref<any | null>(null),
+      requestAction: ref<any | null>(null),
      folderAction: ref<any | null>(null),
      edit: ref<any | null>(null),
      deleteAction: ref<any | null>(null),
--- a/packages/hoppscotch-app/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/index.vue
@@ -49,6 +49,7 @@
        :is-filtered="filterText.length > 0"
        :saving-mode="savingMode"
        @edit-collection="editCollection(collection, index)"
+        @add-request="addRequest($event)"
        @add-folder="addFolder($event)"
        @edit-folder="editFolder($event)"
        @edit-request="editRequest($event)"
@@ -96,6 +97,12 @@
      :editing-collection-name="editingCollection ? editingCollection.name : ''"
      @hide-modal="displayModalEdit(false)"
    />
+    <CollectionsGraphqlAddRequest
+      :show="showModalAddRequest"
+      :folder-path="editingFolderPath"
+      @add-request="onAddRequest($event)"
+      @hide-modal="displayModalAddRequest(false)"
+    />
    <CollectionsGraphqlAddFolder
      :show="showModalAddFolder"
      :folder-path="editingFolderPath"
@@ -136,6 +143,7 @@ import {
  addGraphqlFolder,
  saveGraphqlRequestAs,
 } from "~/newstore/collections"
+import { getGQLSession, setGQLSession } from "~/newstore/GQLSession"

 export default defineComponent({
  props: {
@@ -156,6 +164,7 @@ export default defineComponent({
      showModalAdd: false,
      showModalEdit: false,
      showModalImportExport: false,
+      showModalAddRequest: false,
      showModalAddFolder: false,
      showModalEditFolder: false,
      showModalEditRequest: false,
@@ -222,6 +231,11 @@ export default defineComponent({
    displayModalImportExport(shouldDisplay) {
      this.showModalImportExport = shouldDisplay
    },
+    displayModalAddRequest(shouldDisplay) {
+      this.showModalAddRequest = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
    displayModalAddFolder(shouldDisplay) {
      this.showModalAddFolder = shouldDisplay

@@ -242,6 +256,26 @@ export default defineComponent({
      this.$data.editingCollectionIndex = collectionIndex
      this.displayModalEdit(true)
    },
+    onAddRequest({ name, path }) {
+      const newRequest = {
+        ...getGQLSession().request,
+        name,
+      }
+
+      saveGraphqlRequestAs(path, newRequest)
+      setGQLSession({
+        request: newRequest,
+        schema: "",
+        response: "",
+      })
+
+      this.displayModalAddRequest(false)
+    },
+    addRequest(payload) {
+      const { path } = payload
+      this.$data.editingFolderPath = path
+      this.displayModalAddRequest(true)
+    },
    onAddFolder({ name, path }) {
      addGraphqlFolder(name, path)
      this.displayModalAddFolder(false)
--- a/packages/hoppscotch-app/components/collections/index.vue
+++ b/packages/hoppscotch-app/components/collections/index.vue
@@ -82,6 +82,7 @@
        :picked="picked"
        :loading-collection-i-ds="loadingCollectionIDs"
        @edit-collection="editCollection(collection, index)"
+        @add-request="addRequest($event)"
        @add-folder="addFolder($event)"
        @edit-folder="editFolder($event)"
        @edit-request="editRequest($event)"
@@ -159,6 +160,14 @@
      @hide-modal="displayModalEdit(false)"
      @submit="updateEditingCollection"
    />
+    <CollectionsAddRequest
+      :show="showModalAddRequest"
+      :folder="editingFolder"
+      :folder-path="editingFolderPath"
+      :loading-state="modalLoadingState"
+      @add-request="onAddRequest($event)"
+      @hide-modal="displayModalAddRequest(false)"
+    />
    <CollectionsAddFolder
      :show="showModalAddFolder"
      :folder="editingFolder"
@@ -209,6 +218,7 @@ import {
  editRESTRequest,
  saveRESTRequestAs,
 } from "~/newstore/collections"
+import { setRESTRequest, getRESTRequest } from "~/newstore/RESTSession"
 import {
  useReadonlyStream,
  useStreamSubscriber,
@@ -250,9 +260,11 @@ export default defineComponent({
      showModalAdd: false,
      showModalEdit: false,
      showModalImportExport: false,
+      showModalAddRequest: false,
      showModalAddFolder: false,
      showModalEditFolder: false,
      showModalEditRequest: false,
+      modalLoadingState: false,
      editingCollection: undefined,
      editingCollectionIndex: undefined,
      editingFolder: undefined,
@@ -498,6 +510,11 @@ export default defineComponent({
    displayModalImportExport(shouldDisplay) {
      this.showModalImportExport = shouldDisplay
    },
+    displayModalAddRequest(shouldDisplay) {
+      this.showModalAddRequest = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
    displayModalAddFolder(shouldDisplay) {
      this.showModalAddFolder = shouldDisplay

@@ -615,7 +632,7 @@ export default defineComponent({
          })().then((result) => {
            if (E.isLeft(result)) {
              this.$toast.error(this.$t("error.something_went_wrong"))
-              console.error(e)
+              console.error(result.left.error)
            } else {
              this.$toast.success(this.$t("state.deleted"))
            }
@@ -651,13 +668,68 @@ export default defineComponent({
        })().then((result) => {
          if (E.isLeft(result)) {
            this.$toast.error(this.$t("error.something_went_wrong"))
-            console.error(e)
+            console.error(result.left.error)
          } else {
            this.$toast.success(this.$t("state.deleted"))
          }
        })
      }
    },
+    addRequest(payload) {
+      // TODO: check if the request being worked on
+      // is being overwritten (selected or not)
+      const { folder, path } = payload
+      this.$data.editingFolder = folder
+      this.$data.editingFolderPath = path
+      this.displayModalAddRequest(true)
+    },
+    onAddRequest({ name, folder, path }) {
+      const newRequest = {
+        ...cloneDeep(getRESTRequest()),
+        name,
+      }
+
+      if (this.collectionsType.type === "my-collections") {
+        const insertionIndex = saveRESTRequestAs(path, newRequest)
+        // point to it
+        setRESTRequest(newRequest, {
+          originLocation: "user-collection",
+          folderPath: path,
+          requestIndex: insertionIndex,
+        })
+
+        this.displayModalAddRequest(false)
+      } else if (
+        this.collectionsType.type === "team-collections" &&
+        this.collectionsType.selectedTeam.myRole !== "VIEWER"
+      ) {
+        this.modalLoadingState = true
+        runMutation(CreateRequestInCollectionDocument, {
+          collectionID: folder.id,
+          data: {
+            request: JSON.stringify(newRequest),
+            teamID: this.collectionsType.selectedTeam.id,
+            title: name,
+          },
+        })().then((result) => {
+          this.modalLoadingState = false
+          if (E.isLeft(result)) {
+            this.$toast.error(this.$t("error.something_went_wrong"))
+            console.error(result.left.error)
+          } else {
+            const { createRequestInCollection } = result.right
+            // point to it
+            setRESTRequest(newRequest, {
+              originLocation: "team-collection",
+              requestID: createRequestInCollection.id,
+              collectionID: createRequestInCollection.collection.id,
+              teamID: createRequestInCollection.collection.team.id,
+            })
+            this.displayModalAddRequest(false)
+          }
+        })
+      }
+    },
    duplicateRequest({ folderPath, request, collectionID }) {
      if (this.collectionsType.type === "team-collections") {
        const newReq = {
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -79,12 +79,27 @@
              class="flex flex-col focus:outline-none"
              tabindex="0"
              role="menu"
+              @keyup.r="requestAction.$el.click()"
              @keyup.n="folderAction.$el.click()"
              @keyup.e="edit.$el.click()"
              @keyup.delete="deleteAction.$el.click()"
              @keyup.x="exportAction.$el.click()"
              @keyup.escape="options.tippy().hide()"
            >
+              <SmartItem
+                ref="requestAction"
+                svg="plus"
+                :label="$t('request.new')"
+                :shortcut="['R']"
+                @click.native="
+                  () => {
+                    $emit('add-request', {
+                      path: `${collectionIndex}`,
+                    })
+                    options.tippy().hide()
+                  }
+                "
+              />
              <SmartItem
                ref="folderAction"
                svg="folder-plus"
@@ -159,6 +174,7 @@
          :collections-type="collectionsType"
          :is-filtered="isFiltered"
          :picked="picked"
+          @add-request="$emit('add-request', $event)"
          @add-folder="$emit('add-folder', $event)"
          @edit-folder="$emit('edit-folder', $event)"
          @edit-request="$emit('edit-request', $event)"
@@ -233,6 +249,7 @@ export default defineComponent({
    return {
      tippyActions: ref<any | null>(null),
      options: ref<any | null>(null),
+      requestAction: ref<any | null>(null),
      folderAction: ref<any | null>(null),
      edit: ref<any | null>(null),
      deleteAction: ref<any | null>(null),
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -57,12 +57,25 @@
              class="flex flex-col focus:outline-none"
              tabindex="0"
              role="menu"
+              @keyup.r="requestAction.$el.click()"
              @keyup.n="folderAction.$el.click()"
              @keyup.e="edit.$el.click()"
              @keyup.delete="deleteAction.$el.click()"
              @keyup.x="exportAction.$el.click()"
              @keyup.escape="options.tippy().hide()"
            >
+              <SmartItem
+                ref="requestAction"
+                svg="plus"
+                :label="$t('request.new')"
+                :shortcut="['R']"
+                @click.native="
+                  () => {
+                    $emit('add-request', { path: folderPath })
+                    options.tippy().hide()
+                  }
+                "
+              />
              <SmartItem
                ref="folderAction"
                svg="folder-plus"
@@ -138,6 +151,7 @@
          :collections-type="collectionsType"
          :folder-path="`${folderPath}/${subFolderIndex}`"
          :picked="picked"
+          @add-request="$emit('add-request', $event)"
          @add-folder="$emit('add-folder', $event)"
          @edit-folder="$emit('edit-folder', $event)"
          @edit-request="$emit('edit-request', $event)"
@@ -222,6 +236,7 @@ export default defineComponent({
    return {
      tippyActions: ref<any | null>(null),
      options: ref<any | null>(null),
+      requestAction: ref<any | null>(null),
      folderAction: ref<any | null>(null),
      edit: ref<any | null>(null),
      deleteAction: ref<any | null>(null),
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -80,12 +80,28 @@
              class="flex flex-col focus:outline-none"
              tabindex="0"
              role="menu"
+              @keyup.r="requestAction.$el.click()"
              @keyup.n="folderAction.$el.click()"
              @keyup.e="edit.$el.click()"
              @keyup.delete="deleteAction.$el.click()"
              @keyup.x="exportAction.$el.click()"
              @keyup.escape="options.tippy().hide()"
            >
+              <SmartItem
+                ref="requestAction"
+                svg="plus"
+                :label="t('request.new')"
+                :shortcut="['R']"
+                @click.native="
+                  () => {
+                    $emit('add-request', {
+                      folder: collection,
+                      path: `${collectionIndex}`,
+                    })
+                    options.tippy().hide()
+                  }
+                "
+              />
              <SmartItem
                ref="folderAction"
                svg="folder-plus"
@@ -157,6 +173,7 @@
          :is-filtered="isFiltered"
          :picked="picked"
          :loading-collection-i-ds="loadingCollectionIDs"
+          @add-request="$emit('add-request', $event)"
          @add-folder="$emit('add-folder', $event)"
          @edit-folder="$emit('edit-folder', $event)"
          @edit-request="$emit('edit-request', $event)"
@@ -248,6 +265,7 @@ export default defineComponent({
    return {
      tippyActions: ref<any | null>(null),
      options: ref<any | null>(null),
+      requestAction: ref<any | null>(null),
      folderAction: ref<any | null>(null),
      edit: ref<any | null>(null),
      deleteAction: ref<any | null>(null),
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -59,12 +59,25 @@
              class="flex flex-col focus:outline-none"
              tabindex="0"
              role="menu"
+              @keyup.r="requestAction.$el.click()"
              @keyup.n="folderAction.$el.click()"
              @keyup.e="edit.$el.click()"
              @keyup.delete="deleteAction.$el.click()"
              @keyup.x="exportAction.$el.click()"
              @keyup.escape="options.tippy().hide()"
            >
+              <SmartItem
+                ref="requestAction"
+                svg="plus"
+                :label="$t('request.new')"
+                :shortcut="['R']"
+                @click.native="
+                  () => {
+                    $emit('add-request', { folder, path: folderPath })
+                    options.tippy().hide()
+                  }
+                "
+              />
              <SmartItem
                ref="folderAction"
                svg="folder-plus"
@@ -137,6 +150,7 @@
          :folder-path="`${folderPath}/${subFolderIndex}`"
          :picked="picked"
          :loading-collection-i-ds="loadingCollectionIDs"
+          @add-request="$emit('add-request', $event)"
          @add-folder="$emit('add-folder', $event)"
          @edit-folder="$emit('edit-folder', $event)"
          @edit-request="$emit('edit-request', $event)"
@@ -228,6 +242,7 @@ export default defineComponent({
    return {
      tippyActions: ref<any | null>(null),
      options: ref<any | null>(null),
+      requestAction: ref<any | null>(null),
      folderAction: ref<any | null>(null),
      edit: ref<any | null>(null),
      deleteAction: ref<any | null>(null),
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -337,6 +337,7 @@
    "invalid_name": "Please provide a name for the request",
    "method": "Method",
    "name": "Request name",
+    "new": "New Request",
    "parameter_list": "Query Parameters",
    "parameters": "Parameters",
    "path": "Path",