feat: added properties option for root collection

packages/hoppscotch-common/locales/en.json

@@ -33,6 +33,7 @@
     "open_workspace": "Open workspace",
     "paste": "Paste",
     "prettify": "Prettify",
+    "properties":"Properties",
     "remove": "Remove",
     "rename": "Rename",
     "restore": "Restore",
@@ -172,6 +173,7 @@
     "name_length_insufficient": "Collection name should be at least 3 characters long",
     "new": "New Collection",
     "order_changed": "Collection Order Updated",
+    "properties":"Colection Properties",
     "renamed": "Collection renamed",
     "request_in_use": "Request in use",
     "save_as": "Save as",

packages/hoppscotch-common/src/components.d.ts

@@ -56,6 +56,7 @@ declare module 'vue' {
     CollectionsGraphqlRequest: typeof import('./components/collections/graphql/Request.vue')['default']
     CollectionsImportExport: typeof import('./components/collections/ImportExport.vue')['default']
     CollectionsMyCollections: typeof import('./components/collections/MyCollections.vue')['default']
+    CollectionsProperties: typeof import('./components/collections/Properties.vue')['default']
     CollectionsRequest: typeof import('./components/collections/Request.vue')['default']
     CollectionsSaveRequest: typeof import('./components/collections/SaveRequest.vue')['default']
     CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default']

packages/hoppscotch-common/src/components/collections/Collection.vue

@@ -96,6 +96,7 @@
                   @keyup.e="edit?.$el.click()"
                   @keyup.delete="deleteAction?.$el.click()"
                   @keyup.x="exportAction?.$el.click()"
+                  @keyup.p="propertiesAction?.$el.click()"
                   @keyup.escape="hide()"
                 >
                   <HoppSmartItem
@@ -159,6 +160,19 @@
                       }
                     "
                   />
+                  <HoppSmartItem
+                    v-if="folderType === 'collection'"
+                    ref="propertiesAction"
+                    :icon="IconSettings2"
+                    :label="t('action.properties')"
+                    :shortcut="['P']"
+                    @click="
+                      () => {
+                        emit('edit-properties')
+                        hide()
+                      }
+                    "
+                  />
                 </div>
               </template>
             </tippy>
@@ -193,6 +207,7 @@ import IconTrash2 from "~icons/lucide/trash-2"
 import IconEdit from "~icons/lucide/edit"
 import IconFolder from "~icons/lucide/folder"
 import IconFolderOpen from "~icons/lucide/folder-open"
+import IconSettings2 from "~icons/lucide/settings-2"
 import { ref, computed, watch } from "vue"
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
 import { useI18n } from "@composables/i18n"
@@ -245,6 +260,7 @@ const emit = defineEmits<{
   (event: "add-request"): void
   (event: "add-folder"): void
   (event: "edit-collection"): void
+  (event: "edit-properties"): void
   (event: "export-data"): void
   (event: "remove-collection"): void
   (event: "drop-event", payload: DataTransfer): void
@@ -261,6 +277,7 @@ const edit = ref<HTMLButtonElement | null>(null)
 const deleteAction = ref<HTMLButtonElement | null>(null)
 const exportAction = ref<HTMLButtonElement | null>(null)
 const options = ref<TippyComponent | null>(null)
+const propertiesAction = ref<TippyComponent | null>(null)
 
 const dragging = ref(false)
 const ordering = ref(false)

packages/hoppscotch-common/src/components/collections/MyCollections.vue

@@ -71,6 +71,13 @@
                   collection: node.data.data.data,
                 })
             "
+            @edit-properties="
+              node.data.type === 'collections' &&
+                emit('edit-properties', {
+                  collectionIndex: node.id,
+                  collection: node.data.data.data,
+                })
+            "
             @export-data="
               node.data.type === 'collections' &&
                 emit('export-data', node.data.data.data)
@@ -436,6 +443,13 @@ const emit = defineEmits<{
       folder: HoppCollection<HoppRESTRequest>
     }
   ): void
+  (
+    event: "edit-properties",
+    payload: {
+      collectionIndex: string
+      collection: HoppCollection<HoppRESTRequest>
+    }
+  ): void
   (
     event: "edit-request",
     payload: {

packages/hoppscotch-common/src/components/collections/Properties.vue

@@ -0,0 +1,139 @@
+<template>
+  <HoppSmartModal
+    v-if="show"
+    dialog
+    :title="t('collection.properties')"
+    @close="hideModal"
+  >
+    <template #body>
+      <HoppSmartTabs
+        v-model="selectedOptionTab"
+        styles="sticky overflow-x-auto flex-shrink-0 bg-primary  z-10"
+        render-inactive-tabs
+      >
+        <HoppSmartTab :id="'headers'" :label="`${t('tab.headers')}`">
+          <HttpHeaders
+            v-model="editableCollection"
+            @change-tab="changeOptionTab"
+          />
+          <AppBanner
+            :banner="{
+              type: 'info',
+              alternateText: 'This is an alternate text',
+            }"
+          >
+            <span>
+              This header will be set for every request in this collection.
+              <a href="hopp.sh" class="underline">Learn More</a>
+            </span>
+          </AppBanner>
+        </HoppSmartTab>
+        <HoppSmartTab
+          :id="'authorization'"
+          :label="`${t('tab.authorization')}`"
+        >
+          <HttpAuthorization v-model="editableCollection.auth" />
+          <AppBanner
+            :banner="{
+              type: 'info',
+              alternateText: 'This is an alternate text',
+            }"
+          >
+            <span>
+              This authorization will be set for every request in this
+              collection.
+              <a href="hopp.sh" class="underline">Learn More</a>
+            </span>
+          </AppBanner>
+        </HoppSmartTab>
+      </HoppSmartTabs>
+    </template>
+    <template #footer>
+      <span class="flex space-x-2">
+        <HoppButtonPrimary
+          :label="t('action.save')"
+          :loading="loadingState"
+          outline
+          @click="saveEditedCollection"
+        />
+        <HoppButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
+      </span>
+    </template>
+  </HoppSmartModal>
+</template>
+
+<script setup lang="ts">
+import { watch, ref } from "vue"
+import { useI18n } from "@composables/i18n"
+import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
+import { TeamCollection } from "~/helpers/backend/graphql"
+
+const t = useI18n()
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    loadingState: boolean
+    collection: HoppCollection<HoppRESTRequest> | TeamCollection
+  }>(),
+  {
+    show: false,
+    loadingState: false,
+  }
+)
+
+const emit = defineEmits<{
+  (e: "submit", name: string): void
+  (e: "hide-modal"): void
+}>()
+
+const editableCollection = ref({
+  ...props.collection,
+  body: {
+    contentType: null,
+    body: null,
+  },
+  headers: [],
+  auth: {
+    authType: "none",
+    authActive: false,
+  },
+})
+
+type Tab = "headers" | "authorization"
+
+const selectedOptionTab = ref("headers")
+
+const changeOptionTab = (tab: Tab) => {
+  selectedOptionTab.value = tab
+}
+
+watch(
+  () => props.show,
+  (show) => {
+    if (!show) {
+    }
+  }
+)
+
+const saveEditedCollection = () => {
+  console.log("new-coll", editableCollection.value)
+}
+
+// const addNewCollection = () => {
+//   if (!editingName.value) {
+//     toast.error(t("collection.invalid_name"))
+//     return
+//   }
+
+// }
+
+const hideModal = () => {
+  emit("hide-modal")
+}
+</script>

packages/hoppscotch-common/src/components/collections/TeamCollections.vue

@@ -88,6 +88,13 @@
                   collection: node.data.data.data,
                 })
             "
+            @edit-properties="
+              node.data.type === 'collections' &&
+                emit('edit-properties', {
+                  collectionIndex: node.id,
+                  collection: node.data.data.data,
+                })
+            "
             @export-data="
               node.data.type === 'collections' &&
                 emit('export-data', node.data.data.data)
@@ -452,6 +459,13 @@ const emit = defineEmits<{
       folder: TeamCollection
     }
   ): void
+  (
+    event: "edit-properties",
+    payload: {
+      collectionIndex: string
+      collection: TeamCollection
+    }
+  ): void
   (
     event: "edit-request",
     payload: {

packages/hoppscotch-common/src/components/collections/index.vue

@@ -38,6 +38,7 @@
       @add-request="addRequest"
       @edit-collection="editCollection"
       @edit-folder="editFolder"
+      @edit-properties="editProperties"
       @export-data="exportData"
       @remove-collection="removeCollection"
       @remove-folder="removeFolder"
@@ -69,6 +70,7 @@
       @add-folder="addFolder"
       @edit-collection="editCollection"
       @edit-folder="editFolder"
+      @edit-properties="editProperties"
       @export-data="exportData"
       @remove-collection="removeCollection"
       @remove-folder="removeFolder"
@@ -151,6 +153,10 @@
       :show="showTeamModalAdd"
       @hide-modal="displayTeamModalAdd(false)"
     />
+    <CollectionsProperties
+      :show="showModalEditProperties"
+      @hide-modal="displayModalEditProperties(false)"
+    />
   </div>
 </template>
 
@@ -520,6 +526,7 @@ const showModalEditCollection = ref(false)
 const showModalEditFolder = ref(false)
 const showModalEditRequest = ref(false)
 const showModalImportExport = ref(false)
+const showModalEditProperties = ref(false)
 const showConfirmModal = ref(false)
 const showTeamModalAdd = ref(false)
 
@@ -565,6 +572,12 @@ const displayModalImportExport = (show: boolean) => {
   if (!show) resetSelectedData()
 }
 
+const displayModalEditProperties = (show: boolean) => {
+  showModalEditProperties.value = show
+
+  if (!show) resetSelectedData()
+}
+
 const displayConfirmModal = (show: boolean) => {
   showConfirmModal.value = show
 
@@ -1893,6 +1906,19 @@ const shareRequest = ({ request }: { request: HoppRESTRequest }) => {
   }
 }
 
+const editProperties = (payload: {
+  collectionIndex: string
+  collection: HoppCollection<HoppRESTRequest> | TeamCollection
+}) => {
+  const { collection, collectionIndex } = payload
+
+  console.log(collectionIndex, collection)
+
+  editingCollection.value = collection
+
+  displayModalEditProperties(true)
+}
+
 const resolveConfirmModal = (title: string | null) => {
   if (title === `${t("confirm.remove_collection")}`) onRemoveCollection()
   else if (title === `${t("confirm.remove_request")}`) onRemoveRequest()

packages/hoppscotch-common/src/components/http/Authorization.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-1 flex-col">
     <div
-      class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
     >
       <span class="flex items-center">
         <label class="truncate font-semibold text-secondaryLight">

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-1 flex-col">
     <div
-      class="sticky top-upperMobileSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4 sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
     >
       <label class="truncate font-semibold text-secondaryLight">
         {{ t("request.header_list") }}
@@ -290,6 +290,8 @@ const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 // v-model integration with props and emit
 const props = defineProps<{ modelValue: HoppRESTRequest }>()
 
+console.log(props.modelValue)
+
 const emit = defineEmits<{
   (e: "change-tab", value: RESTOptionTabs): void
   (e: "update:modelValue", value: HoppRESTRequest): void