feat: collection level headers and authorization (#3505)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
2023-12-13 22:43:18 +05:30
parent f3edd001d7
commit 47e009267b
95 changed files with 3221 additions and 970 deletions
--- a/packages/hoppscotch-common/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Authorization.vue
@@ -37,6 +37,18 @@
                  }
                "
              />
+              <HoppSmartItem
+                v-if="!isRootCollection"
+                label="Inherit"
+                :icon="authName === 'Inherit' ? IconCircleDot : IconCircle"
+                :active="authName === 'Inherit'"
+                @click="
+                  () => {
+                    auth.authType = 'inherit'
+                    hide()
+                  }
+                "
+              />
              <HoppSmartItem
                label="Basic Auth"
                :icon="authName === 'Basic Auth' ? IconCircleDot : IconCircle"
@@ -149,6 +161,17 @@
            />
          </div>
        </div>
+        <div v-if="auth.authType === 'inherit'" class="p-4">
+          <span v-if="inheritedProperties?.auth">
+            Inherited
+            {{ getAuthName(inheritedProperties.auth.inheritedAuth.authType) }}
+            from Parent Collection {{ inheritedProperties?.auth.parentName }}
+          </span>
+          <span v-else>
+            Please save this request in any collection to inherit the
+            authorization
+          </span>
+        </div>
        <div v-if="auth.authType === 'bearer'">
          <div class="flex flex-1 border-b border-dividerLight">
            <SmartEnvInput
@@ -203,6 +226,8 @@ import { pluckRef } from "@composables/ref"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { useVModel } from "@vueuse/core"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+import { onMounted } from "vue"

 const t = useI18n()

@@ -210,12 +235,24 @@ const colorMode = useColorMode()

 const props = defineProps<{
  modelValue: HoppGQLAuth
+  isCollectionProperty?: boolean
+  isRootCollection?: boolean
+  inheritedProperties?: HoppInheritedProperty
 }>()

 const emit = defineEmits<{
  (e: "update:modelValue", value: HoppGQLAuth): void
 }>()

+onMounted(() => {
+  if (props.isRootCollection && auth.value.authType === "inherit") {
+    auth.value = {
+      authType: "none",
+      authActive: true,
+    }
+  }
+})
+
 const auth = useVModel(props, "modelValue", emit)

 const AUTH_KEY_NAME = {
@@ -224,12 +261,20 @@ const AUTH_KEY_NAME = {
  "oauth-2": "OAuth 2.0",
  "api-key": "API key",
  none: "None",
+  inherit: "Inherit",
 } as const

 const authType = pluckRef(auth, "authType")
+
 const authName = computed(() =>
  AUTH_KEY_NAME[authType.value] ? AUTH_KEY_NAME[authType.value] : "None"
 )
+
+const getAuthName = (type: HoppGQLAuth["authType"] | undefined) => {
+  if (!type) return "None"
+  return AUTH_KEY_NAME[type] ? AUTH_KEY_NAME[type] : "None"
+}
+
 const authActive = pluckRef(auth, "authActive")

 const clearContent = () => {
--- a/packages/hoppscotch-common/src/components/graphql/Headers.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Headers.vue
@@ -77,22 +77,11 @@
              tabindex="-1"
            />
          </span>
-          <HoppSmartAutoComplete
+          <SmartEnvInput
+            v-model="header.key"
            :placeholder="`${t('count.header', { count: index + 1 })}`"
-            :source="commonHeaders"
-            :spellcheck="false"
-            :value="header.key"
-            autofocus
-            styles="
-                bg-transparent
-                flex
-                flex-1
-                py-1
-                px-4
-                truncate
-              "
-            class="!flex flex-1"
-            @input="
+            :auto-complete-source="commonHeaders"
+            @change="
              updateHeader(index, {
                id: header.id,
                key: $event,
@@ -101,17 +90,14 @@
              })
            "
          />
-          <input
-            class="flex flex-1 bg-transparent px-4 py-2"
+          <SmartEnvInput
+            v-model="header.value"
            :placeholder="`${t('count.value', { count: index + 1 })}`"
-            :name="`value ${String(index)}`"
-            :value="header.value"
-            autofocus
            @change="
              updateHeader(index, {
                id: header.id,
                key: header.key,
-                value: ($event!.target! as HTMLInputElement).value,
+                value: $event,
                active: header.active,
              })
            "
@@ -156,6 +142,119 @@
        </div>
      </template>
    </draggable>
+
+    <draggable
+      v-model="computedHeaders"
+      item-key="id"
+      animation="250"
+      handle=".draggable-handle"
+      draggable=".draggable-content"
+      ghost-class="cursor-move"
+      chosen-class="bg-primaryLight"
+      drag-class="cursor-grabbing"
+    >
+      <template #item="{ element: header, index }">
+        <div
+          class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
+        >
+          <span>
+            <HoppButtonSecondary
+              :icon="IconLock"
+              class="cursor-auto bg-divider text-secondaryLight opacity-25"
+              tabindex="-1"
+            />
+          </span>
+          <SmartEnvInput
+            v-model="header.header.key"
+            :placeholder="`${t('count.value', { count: index + 1 })}`"
+            readonly
+          />
+          <SmartEnvInput
+            :model-value="mask(header)"
+            :placeholder="`${t('count.value', { count: index + 1 })}`"
+            readonly
+          />
+          <span>
+            <HoppButtonSecondary
+              v-if="header.source === 'auth'"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t(masking ? 'state.show' : 'state.hide')"
+              :icon="masking ? IconEye : IconEyeOff"
+              @click="toggleMask()"
+            />
+            <HoppButtonSecondary
+              v-else
+              v-tippy="{ theme: 'tooltip' }"
+              :icon="IconArrowUpRight"
+              :title="t('request.go_to_authorization_tab')"
+              class="cursor-auto text-primary hover:text-primary"
+            />
+          </span>
+          <span>
+            <HoppButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :icon="IconArrowUpRight"
+              :title="t('request.go_to_authorization_tab')"
+            />
+          </span>
+        </div>
+      </template>
+    </draggable>
+
+    <draggable
+      v-model="inheritedProperties"
+      item-key="id"
+      animation="250"
+      handle=".draggable-handle"
+      draggable=".draggable-content"
+      ghost-class="cursor-move"
+      chosen-class="bg-primaryLight"
+      drag-class="cursor-grabbing"
+    >
+      <template #item="{ element: header, index }">
+        <div
+          class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
+        >
+          <span>
+            <HoppButtonSecondary
+              :icon="IconLock"
+              class="cursor-auto bg-divider text-secondaryLight opacity-25"
+              tabindex="-1"
+            />
+          </span>
+          <SmartEnvInput
+            v-model="header.header.key"
+            :placeholder="`${t('count.value', { count: index + 1 })}`"
+            readonly
+          />
+          <SmartEnvInput
+            :model-value="
+              header.source === 'auth' ? mask(header) : header.header.value
+            "
+            :placeholder="`${t('count.value', { count: index + 1 })}`"
+            readonly
+          />
+          <HoppButtonSecondary
+            v-if="header.source === 'auth'"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t(masking ? 'state.show' : 'state.hide')"
+            :icon="masking && header.source === 'auth' ? IconEye : IconEyeOff"
+            @click="toggleMask()"
+          />
+          <span v-else class="aspect-square w-[2.05rem]"></span>
+          <span>
+            <HoppButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :icon="IconInfo"
+              :title="`This header is inherited from Parent Collection ${
+                header.inheritedFrom ?? ''
+              }`"
+            />
+          </span>
+        </div>
+      </template>
+    </draggable>
+
    <HoppSmartPlaceholder
      v-if="workingHeaders.length === 0"
      :src="`/images/states/${colorMode.value}/add_category.svg`"
@@ -184,7 +283,12 @@ import IconCheckCircle from "~icons/lucide/check-circle"
 import IconTrash from "~icons/lucide/trash"
 import IconCircle from "~icons/lucide/circle"
 import IconWrapText from "~icons/lucide/wrap-text"
-import { reactive, ref, watch } from "vue"
+import IconArrowUpRight from "~icons/lucide/arrow-up-right"
+import IconLock from "~icons/lucide/lock"
+import IconEye from "~icons/lucide/eye"
+import IconEyeOff from "~icons/lucide/eye-off"
+import IconInfo from "~icons/lucide/info"
+import { computed, reactive, ref, watch } from "vue"
 import * as E from "fp-ts/Either"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
@@ -206,13 +310,20 @@ import { commonHeaders } from "~/helpers/headers"
 import { useCodemirror } from "@composables/codemirror"
 import { objRemoveKey } from "~/helpers/functional/object"
 import { useVModel } from "@vueuse/core"
+import { HoppGQLHeader } from "~/helpers/graphql"
+import { throwError } from "~/helpers/functional/error"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"

 const colorMode = useColorMode()
 const t = useI18n()
 const toast = useToast()

 // v-model integration with props and emit
-const props = defineProps<{ modelValue: HoppGQLRequest }>()
+const props = defineProps<{
+  modelValue: HoppGQLRequest
+  isCollectionProperty?: boolean
+  inheritedProperties?: HoppInheritedProperty
+}>()

 const emit = defineEmits<{
  (e: "update:modelValue", value: HoppGQLRequest): void
@@ -413,7 +524,11 @@ const deleteHeader = (index: number) => {
    })
  }

-  workingHeaders.value.splice(index, 1)
+  workingHeaders.value = pipe(
+    workingHeaders.value,
+    A.deleteAt(index),
+    O.getOrElseW(() => throwError("Working Headers Deletion Out of Bounds"))
+  )
 }

 const clearContent = () => {
@@ -429,4 +544,151 @@ const clearContent = () => {

  bulkHeaders.value = ""
 }
+
+const getComputedAuthHeaders = (
+  req?: HoppGQLRequest,
+  auth?: HoppGQLRequest["auth"]
+) => {
+  const request = auth ? { auth: auth ?? { authActive: false } } : req
+  // If Authorization header is also being user-defined, that takes priority
+  if (req && req.headers.find((h) => h.key.toLowerCase() === "authorization"))
+    return []
+
+  if (!request) return []
+
+  if (!request.auth || !request.auth.authActive) return []
+
+  const headers: HoppGQLHeader[] = []
+
+  // TODO: Support a better b64 implementation than btoa ?
+  if (request.auth.authType === "basic") {
+    const username = request.auth.username
+    const password = request.auth.password
+
+    headers.push({
+      active: true,
+      key: "Authorization",
+      value: `Basic ${btoa(`${username}:${password}`)}`,
+    })
+  } else if (
+    request.auth.authType === "bearer" ||
+    request.auth.authType === "oauth-2"
+  ) {
+    headers.push({
+      active: true,
+      key: "Authorization",
+      value: `Bearer ${request.auth.token}`,
+    })
+  } else if (request.auth.authType === "api-key") {
+    const { key, addTo } = request.auth
+
+    if (addTo === "Headers" && key) {
+      headers.push({
+        active: true,
+        key,
+        value: request.auth.value ?? "",
+      })
+    }
+  }
+
+  return headers
+}
+
+const getComputedHeaders = (req: HoppGQLRequest) => {
+  return [
+    ...getComputedAuthHeaders(req).map((header) => ({
+      source: "auth" as const,
+      header,
+    })),
+  ]
+}
+
+const computedHeaders = computed(() =>
+  getComputedHeaders(request.value).map((header, index) => ({
+    id: `header-${index}`,
+    ...header,
+  }))
+)
+
+const inheritedProperties = computed(() => {
+  if (!props.inheritedProperties?.auth || !props.inheritedProperties.headers)
+    return []
+
+  //filter out headers that are already in the request headers
+
+  const inheritedHeaders = props.inheritedProperties.headers.filter(
+    (header) =>
+      !request.value.headers.some(
+        (requestHeader) => requestHeader.key === header.inheritedHeader?.key
+      )
+  )
+
+  const headers = inheritedHeaders
+    .filter(
+      (header) =>
+        header.inheritedHeader !== null &&
+        header.inheritedHeader !== undefined &&
+        header.inheritedHeader.active
+    )
+    .map((header, index) => ({
+      inheritedFrom: props.inheritedProperties?.headers[index].parentName,
+      source: "headers",
+      id: `header-${index}`,
+      header: {
+        key: header.inheritedHeader?.key,
+        value: header.inheritedHeader?.value,
+        active: header.inheritedHeader?.active,
+      },
+    }))
+
+  let auth = [] as {
+    inheritedFrom: string
+    source: "auth"
+    id: string
+    header: {
+      key: string
+      value: string
+      active: boolean
+    }
+  }[]
+
+  const computedAuthHeader = getComputedAuthHeaders(
+    request.value,
+    props.inheritedProperties.auth.inheritedAuth
+  )[0]
+
+  if (
+    computedAuthHeader &&
+    request.value.auth.authType === "inherit" &&
+    request.value.auth.authActive
+  ) {
+    auth = [
+      {
+        inheritedFrom: props.inheritedProperties?.auth.parentName,
+        source: "auth",
+        id: `header-auth`,
+        header: computedAuthHeader,
+      },
+    ]
+  }
+
+  return [...headers, ...auth]
+})
+
+const masking = ref(true)
+
+const toggleMask = () => {
+  masking.value = !masking.value
+}
+
+const mask = (header: any) => {
+  if (header.source === "auth" && masking.value)
+    return header.header.value.replace(/\S/gi, "*")
+  return header.header.value
+}
+
+// const changeTab = (tab: ComputedHeader["source"]) => {
+//   if (tab === "auth") emit("change-tab", "authorization")
+//   else emit("change-tab", "bodyParams")
+// }
 </script>
--- a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
@@ -34,10 +34,16 @@
        :label="`${t('tab.headers')}`"
        :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
      >
-        <GraphqlHeaders v-model="request" />
+        <GraphqlHeaders
+          v-model="request"
+          :inherited-properties="inheritedProperties"
+        />
      </HoppSmartTab>
      <HoppSmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
-        <GraphqlAuthorization v-model="request.auth" />
+        <GraphqlAuthorization
+          v-model="request.auth"
+          :inherited-properties="inheritedProperties"
+        />
      </HoppSmartTab>
    </HoppSmartTabs>
    <CollectionsSaveRequest
@@ -69,6 +75,7 @@ import { useService } from "dioc/vue"
 import { InterceptorService } from "~/services/interceptor.service"
 import { editGraphqlRequest } from "~/newstore/collections"
 import { GQLTabService } from "~/services/tab/graphql"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"

 const VALID_GQL_OPERATIONS = [
  "query",
@@ -93,24 +100,22 @@ const props = withDefaults(
    response?: GQLResponseEvent[] | null
    optionTab?: GQLOptionTabs
    tabId: string
+    inheritedProperties?: HoppInheritedProperty
  }>(),
  {
    response: null,
    optionTab: "query",
  }
 )
-const emit = defineEmits(["update:modelValue", "update:response"])
+const emit = defineEmits<{
+  (e: "update:modelValue", value: HoppGQLRequest): void
+  (e: "update:optionTab", value: GQLOptionTabs): void
+  (e: "update:response", value: GQLResponseEvent[]): void
+}>()
+
 const selectedOptionTab = useVModel(props, "optionTab", emit)

-const request = ref(props.modelValue)
-
-watch(
-  () => request.value,
-  (newVal) => {
-    emit("update:modelValue", newVal)
-  },
-  { deep: true }
-)
+const request = useVModel(props, "modelValue", emit)

 const url = computedWithControl(
  () => tabs.currentActiveTab.value,
@@ -131,10 +136,30 @@ const runQuery = async (
  startPageProgress()
  try {
    const runURL = clone(url.value)
-    const runHeaders = clone(request.value.headers)
    const runQuery = clone(request.value.query)
    const runVariables = clone(request.value.variables)
-    const runAuth = clone(request.value.auth)
+    const runAuth =
+      request.value.auth.authType === "inherit" && request.value.auth.authActive
+        ? clone(tabs.currentActiveTab.value.document.inheritedProperties?.auth)
+        : clone(request.value.auth)
+
+    const inheritedHeaders =
+      tabs.currentActiveTab.value.document.inheritedProperties?.headers.map(
+        (header) => {
+          if (header.inheritedHeader) {
+            return header.inheritedHeader
+          }
+          return []
+        }
+      )
+
+    let runHeaders: HoppGQLRequest["headers"] = []
+
+    if (inheritedHeaders) {
+      runHeaders = [...inheritedHeaders, ...clone(request.value.headers)]
+    } else {
+      runHeaders = clone(request.value.headers)
+    }

    await runGQLOperation({
      name: request.value.name,
@@ -142,7 +167,7 @@ const runQuery = async (
      headers: runHeaders,
      query: runQuery,
      variables: runVariables,
-      auth: runAuth,
+      auth: runAuth ?? { authType: "none", authActive: false },
      operationName: definition?.name?.value,
      operationType: definition?.operation ?? "query",
    })
--- a/packages/hoppscotch-common/src/components/graphql/RequestTab.vue
+++ b/packages/hoppscotch-common/src/components/graphql/RequestTab.vue
@@ -5,6 +5,7 @@
        v-model="tab.document.request"
        v-model:response="tab.document.response"
        v-model:option-tab="tab.document.optionTabPreference"
+        v-model:inherited-properties="tab.document.inheritedProperties"
        :tab-id="tab.id"
      />
    </template>