refactor: compile data in handles

Introduce a handle for requests.
2024-02-07 11:36:33 +05:30
parent ab7df212c2
commit 89bcc58de6
10 changed files with 1616 additions and 666 deletions
--- a/packages/hoppscotch-common/src/components/collections/Properties.vue
+++ b/packages/hoppscotch-common/src/components/collections/Properties.vue
@@ -75,7 +75,7 @@ import {
 import { useVModel } from "@vueuse/core"
 import { useService } from "dioc/vue"
 import { clone } from "lodash-es"
-import { ref, watch } from "vue"
+import { ref, toRefs, watch } from "vue"

 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 import { PersistenceService } from "~/services/persistence"
@@ -100,11 +100,15 @@ const props = withDefaults(
    editingProperties: EditingProperties | null
    source: "REST" | "GraphQL"
    modelValue: string
+    // TODO: Purpose of this prop is to maintain backwards compatibility
+    // To be removed after porting all usages of this component
+    emitWithFullCollection: boolean
  }>(),
  {
    show: false,
    loadingState: false,
    editingProperties: null,
+    emitWithFullCollection: true,
  }
 )

@@ -178,15 +182,24 @@ watch(
 const saveEditedCollection = () => {
  if (!props.editingProperties) return
  const finalCollection = clone(editableCollection.value)
+  delete finalCollection.body
+
+  const { path } = toRefs(props.editingProperties)
+
  const collection = {
-    path: props.editingProperties.path,
+    path: path.value,
    collection: {
      ...props.editingProperties.collection,
      ...finalCollection,
    },
    isRootCollection: props.editingProperties.isRootCollection,
  }
-  emit("set-collection-properties", collection as EditingProperties)
+
+  const data = props.emitWithFullCollection
+    ? collection
+    : { ...finalCollection, collIndexPath: path.value }
+  emit("set-collection-properties", data as EditingProperties)
+
  persistenceService.removeLocalConfig("unsaved_collection_properties")
 }

--- a/packages/hoppscotch-common/src/components/http/Request.vue
+++ b/packages/hoppscotch-common/src/components/http/Request.vue
@@ -245,7 +245,6 @@ import { UpdateRequestDocument } from "~/helpers/backend/graphql"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { runRESTRequest$ } from "~/helpers/RequestRunner"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
-import { editRESTRequest } from "~/newstore/collections"
 import IconChevronDown from "~icons/lucide/chevron-down"
 import IconCode2 from "~icons/lucide/code-2"
 import IconFileCode from "~icons/lucide/file-code"
@@ -265,9 +264,11 @@ import { HoppRESTDocument } from "~/helpers/rest/document"
 import { RESTTabService } from "~/services/tab/rest"
 import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
 import { WorkspaceService } from "~/services/workspace.service"
+import { NewWorkspaceService } from "~/services/new-workspace"

 const t = useI18n()
 const interceptorService = useService(InterceptorService)
+const newWorkspaceService = useService(NewWorkspaceService)

 const methods = [
  "GET",
@@ -506,7 +507,7 @@ const cycleDownMethod = () => {
  }
 }

-const saveRequest = () => {
+const saveRequest = async () => {
  const saveCtx = tab.value.document.saveContext

  if (!saveCtx) {
@@ -514,25 +515,72 @@ const saveRequest = () => {
    return
  }
  if (saveCtx.originLocation === "user-collection") {
-    const req = tab.value.document.request
+    const updatedRequest = tab.value.document.request

-    try {
-      editRESTRequest(saveCtx.folderPath, saveCtx.requestIndex, req)
-
-      tab.value.document.isDirty = false
-
-      platform.analytics?.logEvent({
-        type: "HOPP_SAVE_REQUEST",
-        platform: "rest",
-        createdNow: false,
-        workspaceType: "personal",
-      })
-
-      toast.success(`${t("request.saved")}`)
-    } catch (e) {
-      tab.value.document.saveContext = undefined
-      saveRequest()
+    if (!newWorkspaceService.activeWorkspaceHandle.value) {
+      return
    }
+
+    const collHandleResult = await newWorkspaceService.getCollectionHandle(
+      newWorkspaceService.activeWorkspaceHandle.value,
+      saveCtx.folderPath
+    )
+
+    if (E.isLeft(collHandleResult)) {
+      // INVALID_WORKSPACE_HANDLE
+      return
+    }
+
+    const collHandle = collHandleResult.right
+
+    if (collHandle.value.type === "invalid") {
+      // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
+      return
+    }
+
+    const requestHandleResult = await newWorkspaceService.getRequestHandle(
+      collHandle,
+      `${saveCtx.folderPath}/${saveCtx.requestIndex.toString()}`
+    )
+
+    if (E.isLeft(requestHandleResult)) {
+      // INVALID_REQUEST_HANDLE
+      return
+    }
+
+    const requestHandle = requestHandleResult.right
+
+    if (requestHandle.value.type === "invalid") {
+      // WORKSPACE_INVALIDATED | INVALID_REQUEST_HANDLE
+      return
+    }
+
+    const updatedRequestResult = await newWorkspaceService.saveRESTRequest(
+      requestHandle,
+      updatedRequest
+    )
+
+    if (E.isLeft(updatedRequestResult)) {
+      // INVALID_REQUEST_HANDLE
+      return
+    }
+
+    const resultHandle = updatedRequestResult.right
+
+    if (resultHandle.value.type === "invalid") {
+      // REQUEST_INVALIDATED | REQUEST_PATH_NOT_FOUND
+
+      if (resultHandle.value.reason === "REQUEST_PATH_NOT_FOUND") {
+        // REQUEST_PATH_NOT_FOUND
+        tab.value.document.saveContext = undefined
+        await saveRequest()
+      }
+      return
+    }
+
+    tab.value.document.isDirty = false
+
+    toast.success(`${t("request.saved")}`)
  } else if (saveCtx.originLocation === "team-collection") {
    const req = tab.value.document.request

--- a/packages/hoppscotch-common/src/components/new-collections/rest/Collection.vue
+++ b/packages/hoppscotch-common/src/components/new-collections/rest/Collection.vue
@@ -18,7 +18,7 @@
            class="pointer-events-none flex min-w-0 flex-1 py-2 pr-2 transition group-hover:text-secondaryDark"
          >
            <span class="truncate">
-              {{ collection.name }}
+              {{ collectionView.collection.name }}
            </span>
          </span>
        </div>
@@ -28,22 +28,14 @@
            :icon="IconFilePlus"
            :title="t('request.new')"
            class="hidden group-hover:inline-flex"
-            @click="
-              emit('add-request', {
-                path: collection.collectionID,
-              })
-            "
+            @click="addRequest"
          />
          <HoppButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
            :icon="IconFolderPlus"
            :title="t('folder.new')"
            class="hidden group-hover:inline-flex"
-            @click="
-              emit('add-folder', {
-                path: collection.collectionID,
-              })
-            "
+            @click="addChildCollection"
          />
          <span>
            <tippy
@@ -77,9 +69,7 @@
                    :shortcut="['R']"
                    @click="
                      () => {
-                        emit('add-request', {
-                          path: collection.collectionID,
-                        })
+                        addRequest()
                        hide()
                      }
                    "
@@ -91,9 +81,7 @@
                    :shortcut="['N']"
                    @click="
                      () => {
-                        emit('add-folder', {
-                          path: collection.collectionID,
-                        })
+                        addChildCollection()
                        hide()
                      }
                    "
@@ -105,7 +93,7 @@
                    :shortcut="['E']"
                    @click="
                      () => {
-                        emit('edit-collection')
+                        editCollection()
                        hide()
                      }
                    "
@@ -128,9 +116,22 @@
                    :shortcut="['⌫']"
                    @click="
                      () => {
-                        emit('remove-collection', {
-                          path: collection.collectionID,
-                        })
+                        removeCollection()
+                        hide()
+                      }
+                    "
+                  />
+                  <HoppSmartItem
+                    ref="propertiesAction"
+                    :icon="IconSettings2"
+                    :label="t('action.properties')"
+                    :shortcut="['P']"
+                    @click="
+                      () => {
+                        emit(
+                          'edit-collection-properties',
+                          collectionView.collectionID
+                        )
                        hide()
                      }
                    "
@@ -158,36 +159,31 @@ 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"

 const t = useI18n()

 const props = defineProps<{
-  collection: RESTCollectionViewCollection
+  collectionView: RESTCollectionViewCollection
  isOpen: boolean
 }>()

 const emit = defineEmits<{
  (event: "toggle-children"): void
+  (event: "add-request", parentCollIndexPath: string): void
+  (event: "add-child-collection", parentCollIndexPath: string): void
  (
-    event: "add-request",
-    payload: {
-      path: string
-    }
+    event: "edit-root-collection",
+    payload: { collIndexPath: string; collectionName: string }
  ): void
  (
-    event: "add-folder",
-    payload: {
-      path: string
-    }
+    event: "edit-child-collection",
+    payload: { collIndexPath: string; collectionName: string }
  ): void
-  (event: "edit-collection"): void
+  (event: "edit-collection-properties", collIndexPath: string): void
  (event: "export-data"): void
-  (
-    event: "remove-collection",
-    payload: {
-      path: string
-    }
-  ): void
+  (event: "remove-root-collection", collIndexPath: string): void
+  (event: "remove-child-collection", collIndexPath: string): void
 }>()

 const tippyActions = ref<TippyComponent | null>(null)
@@ -201,4 +197,36 @@ const options = ref<TippyComponent | null>(null)
 const collectionIcon = computed(() => {
  return !props.isOpen ? IconFolder : IconFolderOpen
 })
+
+const addChildCollection = () => {
+  emit("add-child-collection", props.collectionView.collectionID)
+}
+
+const addRequest = () => {
+  emit("add-request", props.collectionView.collectionID)
+}
+
+const editCollection = () => {
+  const {
+    collectionID: collIndexPath,
+    collection: { name: collectionName },
+  } = props.collectionView
+
+  const data = {
+    collIndexPath,
+    collectionName,
+  }
+
+  collIndexPath.split("/").length > 1
+    ? emit("edit-child-collection", data)
+    : emit("edit-root-collection", data)
+}
+
+const removeCollection = () => {
+  const { collectionID } = props.collectionView
+
+  collectionID.split("/").length > 1
+    ? emit("remove-child-collection", collectionID)
+    : emit("remove-root-collection", collectionID)
+}
 </script>
--- a/packages/hoppscotch-common/src/components/new-collections/rest/Request.vue
+++ b/packages/hoppscotch-common/src/components/new-collections/rest/Request.vue
@@ -6,7 +6,7 @@
    >
      <div
        class="pointer-events-auto flex min-w-0 flex-1 cursor-pointer items-center justify-center"
-        @click="selectRequest(request.requestID, request.request)"
+        @click="selectRequest"
      >
        <span
          class="pointer-events-none flex w-16 items-center justify-center truncate px-2"
@@ -14,14 +14,14 @@
          :style="{ color: requestLabelColor }"
        >
          <span class="truncate text-tiny font-semibold">
-            {{ request.method }}
+            {{ requestView.request.method }}
          </span>
        </span>
        <span
          class="pointer-events-none flex min-w-0 flex-1 items-center py-2 pr-2 transition group-hover:text-secondaryDark"
        >
          <span class="truncate">
-            {{ request.name }}
+            {{ requestView.request.name }}
          </span>
          <span
            v-if="isActive"
@@ -45,7 +45,7 @@
          :icon="IconRotateCCW"
          :title="t('action.restore')"
          class="hidden group-hover:inline-flex"
-          @click="selectRequest(request.requestID, request.request)"
+          @click="selectRequest"
        />
        <span>
          <tippy
@@ -78,8 +78,8 @@
                  @click="
                    () => {
                      emit('edit-request', {
-                        requestPath: request.requestID,
-                        request: request.request,
+                        requestIndexPath: requestView.requestID,
+                        requestName: requestView.request.name,
                      })
                      hide()
                    }
@@ -92,10 +92,7 @@
                  :shortcut="['D']"
                  @click="
                    () => {
-                      emit('duplicate-request', {
-                        requestPath: request.requestID,
-                        request: request.request,
-                      })
+                      emit('duplicate-request', requestView.requestID)
                      hide()
                    }
                  "
@@ -132,37 +129,24 @@ import { RESTCollectionViewRequest } from "~/services/new-workspace/view"
 import { computed, ref } from "vue"
 import { TippyComponent } from "vue-tippy"
 import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
-import { HoppRESTRequest } from "@hoppscotch/data"

 const t = useI18n()

 const props = defineProps<{
-  request: RESTCollectionViewRequest
+  requestView: RESTCollectionViewRequest
 }>()

 const emit = defineEmits<{
-  (
-    event: "duplicate-request",
-    payload: {
-      requestPath: string
-      request: HoppRESTRequest
-    }
-  ): void
+  (event: "duplicate-request", requestIndexPath: string): void
  (
    event: "edit-request",
    payload: {
-      requestPath: string
-      request: HoppRESTRequest
+      requestIndexPath: string
+      requestName: string
    }
  ): void
  (event: "remove-request"): void
-  (
-    event: "select-request",
-    payload: {
-      requestPath: string
-      request: HoppRESTRequest
-    }
-  ): void
+  (event: "select-request", requestIndexPath: string): void
 }>()

 const tippyActions = ref<TippyComponent | null>(null)
@@ -172,12 +156,8 @@ const options = ref<TippyComponent | null>(null)
 const isActive = ref(true)

 const requestLabelColor = computed(() =>
-  getMethodLabelColorClassOf(props.request)
+  getMethodLabelColorClassOf(props.requestView.request)
 )

-const selectRequest = (requestPath: string, request: HoppRESTRequest) =>
-  emit("select-request", {
-    requestPath,
-    request,
-  })
+const selectRequest = () => emit("select-request", props.requestView.requestID)
 </script>
--- a/packages/hoppscotch-common/src/components/new-collections/rest/index.vue
+++ b/packages/hoppscotch-common/src/components/new-collections/rest/index.vue
@@ -22,7 +22,7 @@
          v-tippy="{ theme: 'tooltip' }"
          :icon="IconImport"
          :title="t('modal.import_export')"
-          @click="onImportExportClick"
+          @click="() => {}"
        />
      </span>
    </div>
@@ -33,16 +33,20 @@
          <!-- TODO: Implement -->
          <NewCollectionsRestCollection
            v-if="node.data.type === 'collection'"
-            :collection="node.data.value"
+            :collection-view="node.data.value"
            :is-open="isOpen"
            @add-request="addRequest"
-            @add-folder="addFolder"
-            @remove-collection="removeFolder"
+            @add-child-collection="addChildCollection"
+            @edit-root-collection="editRootCollection"
+            @edit-collection-properties="editCollectionProperties"
+            @edit-child-collection="editChildCollection"
+            @remove-root-collection="removeRootCollection"
+            @remove-child-collection="removeChildCollection"
            @toggle-children="toggleChildren"
          />
          <NewCollectionsRestRequest
            v-else-if="node.data.type === 'request'"
-            :request="node.data.value"
+            :request-view="node.data.value"
            @duplicate-request="duplicateRequest"
            @edit-request="editRequest"
            @remove-request="removeRequest(node.data.value.requestID)"
@@ -72,10 +76,24 @@
      @hide-modal="displayModalAddRequest(false)"
    />
    <CollectionsAddFolder
-      :show="showModalAddFolder"
+      :show="showModalAddChildColl"
      :loading-state="modalLoadingState"
-      @add-folder="onAddFolder"
-      @hide-modal="displayModalAddFolder(false)"
+      @add-folder="onAddChildCollection"
+      @hide-modal="displayModalAddChildColl(false)"
+    />
+    <CollectionsEdit
+      :show="showModalEditRootColl"
+      :editing-collection-name="editingRootCollName ?? ''"
+      :loading-state="modalLoadingState"
+      @hide-modal="displayModalEditCollection(false)"
+      @submit="onEditRootCollection"
+    />
+    <CollectionsEditFolder
+      :show="showModalEditChildColl"
+      :editing-folder-name="editingChildCollName ?? ''"
+      :loading-state="modalLoadingState"
+      @submit="onEditChildCollection"
+      @hide-modal="displayModalEditChildCollection(false)"
    />
    <CollectionsEditRequest
      v-model="editingRequestName"
@@ -92,6 +110,15 @@
      @hide-modal="showConfirmModal = false"
      @resolve="resolveConfirmModal"
    />
+
+    <!-- TODO: Remove the `emitWithFullCollection` prop after porting all usages of the below component -->
+    <CollectionsProperties
+      :show="showModalEditProperties"
+      :editing-properties="editingProperties"
+      :emit-with-full-collection="false"
+      @hide-modal="displayModalEditProperties(false)"
+      @set-collection-properties="setCollectionProperties"
+    />
  </div>
 </template>

@@ -112,18 +139,13 @@ import IconImport from "~icons/lucide/folder-down"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconPlus from "~icons/lucide/plus"
 import {
-  resolveSaveContextOnCollectionReorder,
-  getFoldersByPath,
-} from "~/helpers/collection/collection"
-import {
-  navigateToFolderWithIndexPath,
-  restCollectionStore,
-  removeRESTFolder,
-  restCollections$,
+  cascadeParentCollectionForHeaderAuth,
+  saveRESTRequestAs,
 } from "~/newstore/collections"
-import { useReadonlyStream } from "~/composables/stream"
 import { cloneDeep } from "lodash-es"
-import { HoppRESTRequest } from "@hoppscotch/data"
+import { HoppCollection, HoppRESTAuth, HoppRESTRequest } from "@hoppscotch/data"
+import { TeamCollection } from "~/helpers/backend/graphql"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"

 const t = useI18n()
 const toast = useToast()
@@ -150,27 +172,54 @@ const modalLoadingState = ref(false)

 const showModalAdd = ref(false)
 const showModalAddRequest = ref(false)
-const showModalAddFolder = ref(false)
+const showModalAddChildColl = ref(false)
+const showModalEditRootColl = ref(false)
+const showModalEditChildColl = ref(false)
 const showModalEditRequest = ref(false)
+const showModalEditProperties = ref(false)
 const showConfirmModal = ref(false)

-const editingFolderPath = ref<string | null>(null)
-const editingRequest = ref<HoppRESTRequest | null>(null)
-const editingRequestName = ref("")
-const editingRequestIndex = ref<number | null>(null)
+const editingCollIndexPath = ref<string>("")
+const editingChildCollIndexPath = ref<string>("")
+const editingRootCollName = ref<string>("")
+const editingChildCollName = ref<string>("")
+const editingRequestName = ref<string>("")
+const editingRequestIndexPath = ref<string>("")
+
+const editingProperties = ref<{
+  collection: Omit<HoppCollection, "v"> | TeamCollection | null
+  isRootCollection: boolean
+  path: string
+  inheritedProperties?: HoppInheritedProperty
+}>({
+  collection: null,
+  isRootCollection: false,
+  path: "",
+  inheritedProperties: undefined,
+})

 const confirmModalTitle = ref<string | null>(null)

-const myCollections = useReadonlyStream(restCollections$, [], "deep")
-
 const displayModalAddRequest = (show: boolean) => {
  showModalAddRequest.value = show

  if (!show) resetSelectedData()
 }

-const displayModalAddFolder = (show: boolean) => {
-  showModalAddFolder.value = show
+const displayModalAddChildColl = (show: boolean) => {
+  showModalAddChildColl.value = show
+
+  if (!show) resetSelectedData()
+}
+
+const displayModalEditCollection = (show: boolean) => {
+  showModalEditRootColl.value = show
+
+  if (!show) resetSelectedData()
+}
+
+const displayModalEditChildCollection = (show: boolean) => {
+  showModalEditChildColl.value = show

  if (!show) resetSelectedData()
 }
@@ -181,6 +230,12 @@ const displayModalEditRequest = (show: boolean) => {
  if (!show) resetSelectedData()
 }

+const displayModalEditProperties = (show: boolean) => {
+  showModalEditProperties.value = show
+
+  if (!show) resetSelectedData()
+}
+
 const displayConfirmModal = (show: boolean) => {
  showConfirmModal.value = show

@@ -210,19 +265,19 @@ const addNewRootCollection = async (name: string) => {
  showModalAdd.value = false
 }

-const addRequest = (payload: { path: string }) => {
-  const { path } = payload
-  editingFolderPath.value = path
-  displayModalAddRequest(true)
+const removeRootCollection = (collPathIndex: string) => {
+  editingCollIndexPath.value = collPathIndex
+
+  confirmModalTitle.value = `${t("confirm.remove_collection")}`
+  displayConfirmModal(true)
 }

-const onAddRequest = async (requestName: string) => {
-  const path = editingFolderPath.value
-  if (!path) return
+const onRemoveRootCollection = async () => {
+  const collIndexPath = editingCollIndexPath.value

  const collHandleResult = await workspaceService.getCollectionHandle(
    props.workspaceHandle,
-    path
+    collIndexPath
  )

  if (E.isLeft(collHandleResult)) {
@@ -233,14 +288,54 @@ const onAddRequest = async (requestName: string) => {
  const collHandle = collHandleResult.right

  if (collHandle.value.type === "invalid") {
-    // WORKSPACE_INVALIDATED
+    // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  const result = await workspaceService.removeRESTRootCollection(collHandle)
+
+  if (E.isLeft(result)) {
+    // INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  if (result.right.value.type === "invalid") {
+    // COLLECTION_INVALIDATED
+    return
+  }
+
+  toast.success(t("state.deleted"))
+  displayConfirmModal(false)
+}
+
+const addRequest = (requestPathIndex: string) => {
+  editingCollIndexPath.value = requestPathIndex
+  displayModalAddRequest(true)
+}
+
+const onAddRequest = async (requestName: string) => {
+  const parentCollIndexPath = editingCollIndexPath.value
+
+  const collHandleResult = await workspaceService.getCollectionHandle(
+    props.workspaceHandle,
+    parentCollIndexPath
+  )
+
+  if (E.isLeft(collHandleResult)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  const collHandle = collHandleResult.right
+
+  if (collHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
    return
  }

  const result = await workspaceService.createRESTRequest(
    collHandle,
-    requestName,
-    path
+    requestName
  )

  if (E.isLeft(result)) {
@@ -256,20 +351,17 @@ const onAddRequest = async (requestName: string) => {
  displayModalAddRequest(false)
 }

-const addFolder = (payload: { path: string }) => {
-  const { path } = payload
-  editingFolderPath.value = path
-  displayModalAddFolder(true)
+const addChildCollection = (parentCollIndexPath: string) => {
+  editingCollIndexPath.value = parentCollIndexPath
+  displayModalAddChildColl(true)
 }

-const onAddFolder = async (folderName: string) => {
-  const path = editingFolderPath.value
-
-  if (!path) return
+const onAddChildCollection = async (childCollName: string) => {
+  const parentCollIndexPath = editingCollIndexPath.value

  const collHandleResult = await workspaceService.getCollectionHandle(
    props.workspaceHandle,
-    path
+    parentCollIndexPath
  )

  if (E.isLeft(collHandleResult)) {
@@ -280,103 +372,224 @@ const onAddFolder = async (folderName: string) => {
  const collHandle = collHandleResult.right

  if (collHandle.value.type === "invalid") {
-    // WORKSPACE_INVALIDATED
+    // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
    return
  }

  const result = await workspaceService.createRESTChildCollection(
    collHandle,
-    folderName,
-    path
+    childCollName
  )

  if (E.isLeft(result)) {
-    // INVALID_WORKSPACE_HANDLE
+    // INVALID_COLLECTION_HANDLE
    return
  }

  if (result.right.value.type === "invalid") {
-    // WORKSPACE_INVALIDATED
+    // COLLECTION_INVALIDATED
    return
  }

-  displayModalAddFolder(false)
+  displayModalAddChildColl(false)
 }

-const removeFolder = (payload: { path: string }) => {
-  const { path } = payload
-  editingFolderPath.value = path
+const editRootCollection = (payload: {
+  collIndexPath: string
+  collectionName: string
+}) => {
+  const { collIndexPath, collectionName } = payload
+
+  editingCollIndexPath.value = collIndexPath
+  editingRootCollName.value = collectionName
+
+  displayModalEditCollection(true)
+}
+
+const onEditRootCollection = async (newCollectionName: string) => {
+  const collID = editingCollIndexPath.value
+
+  const collHandleResult = await workspaceService.getCollectionHandle(
+    props.workspaceHandle,
+    collID
+  )
+
+  if (E.isLeft(collHandleResult)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  const collHandle = collHandleResult.right
+
+  if (collHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  const result = await workspaceService.editRESTRootCollection(
+    collHandle,
+    newCollectionName
+  )
+
+  if (E.isLeft(result)) {
+    // INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  if (result.right.value.type === "invalid") {
+    // COLLECTION_INVALIDATED
+    return
+  }
+
+  displayModalEditCollection(false)
+  toast.success(t("collection.renamed"))
+}
+
+const editChildCollection = (payload: {
+  collIndexPath: string
+  collectionName: string
+}) => {
+  const { collIndexPath, collectionName } = payload
+
+  editingChildCollIndexPath.value = collIndexPath
+  editingChildCollName.value = collectionName
+
+  displayModalEditChildCollection(true)
+}
+
+const onEditChildCollection = async (newCollectionName: string) => {
+  const collID = editingChildCollIndexPath.value
+
+  const collHandleResult = await workspaceService.getCollectionHandle(
+    props.workspaceHandle,
+    collID
+  )
+
+  if (E.isLeft(collHandleResult)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  const collHandle = collHandleResult.right
+
+  if (collHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  const result = await workspaceService.editRESTChildCollection(
+    collHandle,
+    newCollectionName
+  )
+
+  if (E.isLeft(result)) {
+    // INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  if (result.right.value.type === "invalid") {
+    // COLLECTION_INVALIDATED
+    return
+  }
+
+  displayModalEditChildCollection(false)
+  toast.success(t("collection.renamed"))
+}
+
+const removeChildCollection = (parentCollIndexPath: string) => {
+  editingCollIndexPath.value = parentCollIndexPath

  confirmModalTitle.value = `${t("confirm.remove_folder")}`
  displayConfirmModal(true)
 }

-const onRemoveFolder = () => {
-  const path = editingFolderPath.value
+const onRemoveChildCollection = async () => {
+  const parentCollIndexPath = editingCollIndexPath.value

-  if (!path) return
+  const parentCollHandleResult = await workspaceService.getCollectionHandle(
+    props.workspaceHandle,
+    parentCollIndexPath
+  )

-  const folderToRemove = path
-    ? navigateToFolderWithIndexPath(
-        restCollectionStore.value.state,
-        path.split("/").map((i) => parseInt(i))
-      )
-    : undefined
+  if (E.isLeft(parentCollHandleResult)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }

-  removeRESTFolder(path, folderToRemove ? folderToRemove.id : undefined)
+  const parentCollHandle = parentCollHandleResult.right

-  const parentFolder = path.split("/").slice(0, -1).join("/") // remove last folder to get parent folder
-  resolveSaveContextOnCollectionReorder({
-    lastIndex: pathToLastIndex(path),
-    newIndex: -1,
-    folderPath: parentFolder,
-    length: getFoldersByPath(myCollections.value, parentFolder).length,
-  })
+  if (parentCollHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  const result =
+    await workspaceService.removeRESTChildCollection(parentCollHandle)
+
+  if (E.isLeft(result)) {
+    // INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  if (result.right.value.type === "invalid") {
+    // COLLECTION_INVALIDATED
+    return
+  }

  toast.success(t("state.deleted"))
  displayConfirmModal(false)
 }

-const removeRequest = (requestIndex: string) => {
-  const folderPath = requestIndex.slice(0, -2)
-  const requestID = requestIndex[requestIndex.length - 1]
+const removeRequest = (requestIndexPath: string) => {
+  const collIndexPath = requestIndexPath.split("/").slice(0, -1).join("/")

-  editingFolderPath.value = folderPath
-  editingRequestIndex.value = parseInt(requestID)
+  editingCollIndexPath.value = collIndexPath
+  editingRequestIndexPath.value = requestIndexPath

  confirmModalTitle.value = `${t("confirm.remove_request")}`
  displayConfirmModal(true)
 }

 const onRemoveRequest = async () => {
-  const path = editingFolderPath.value
-  const requestIndex = editingRequestIndex.value
+  const parentCollIndexPath = editingCollIndexPath.value
+  const requestIndexPath = editingRequestIndexPath.value

-  if (path === null || requestIndex === null) return
-
-  const collHandleResult = await workspaceService.getCollectionHandle(
+  const parentCollHandleResult = await workspaceService.getCollectionHandle(
    props.workspaceHandle,
-    path
+    parentCollIndexPath
  )

-  if (E.isLeft(collHandleResult)) {
+  if (E.isLeft(parentCollHandleResult)) {
    // INVALID_WORKSPACE_HANDLE
    return
  }

-  const collHandle = collHandleResult.right
+  const parentCollHandle = parentCollHandleResult.right

-  if (collHandle.value.type === "invalid") {
-    // WORKSPACE_INVALIDATED
+  if (parentCollHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
    return
  }

-  const result = await workspaceService.removeRESTRequest(
-    collHandle,
-    path,
-    requestIndex
+  const requestHandleResult = await workspaceService.getRequestHandle(
+    parentCollHandle,
+    requestIndexPath
  )

+  if (E.isLeft(requestHandleResult)) {
+    // INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  const requestHandle = requestHandleResult.right
+
+  if (requestHandle.value.type === "invalid") {
+    // COLLECTION_INVALIDATED | INVALID_REQUEST_HANDLE
+    return
+  }
+
+  const result = await workspaceService.removeRESTRequest(requestHandle)
+
  if (E.isLeft(result)) {
    // INVALID_WORKSPACE_HANDLE
    return
@@ -391,18 +604,12 @@ const onRemoveRequest = async () => {
  displayConfirmModal(false)
 }

-const selectRequest = async (payload: {
-  requestPath: string
-  request: HoppRESTRequest
-}) => {
-  const { requestPath, request } = payload
-
-  const collPath = requestPath.slice(0, -2)
-  const requestIndex = requestPath[requestPath.length - 1]
+const selectRequest = async (requestIndexPath: string) => {
+  const collIndexPath = requestIndexPath.split("/").slice(0, -1).join("/")

  const collHandleResult = await workspaceService.getCollectionHandle(
    props.workspaceHandle,
-    collPath
+    collIndexPath
  )

  if (E.isLeft(collHandleResult)) {
@@ -413,35 +620,64 @@ const selectRequest = async (payload: {
  const collHandle = collHandleResult.right

  if (collHandle.value.type === "invalid") {
-    // WORKSPACE_INVALIDATED
+    // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
    return
  }

-  const result = await workspaceService.selectRESTRequest(
+  const requestHandleResult = await workspaceService.getRequestHandle(
    collHandle,
-    collPath,
-    requestIndex,
-    request
+    requestIndexPath
  )

-  if (E.isLeft(result)) {
-    // INVALID_WORKSPACE_HANDLE
+  if (E.isLeft(requestHandleResult)) {
+    // INVALID_COLLECTION_HANDLE
    return
  }

-  if (result.right.value.type === "invalid") {
-    // WORKSPACE_INVALIDATED
+  const requestHandle = requestHandleResult.right
+
+  if (requestHandle.value.type === "invalid") {
+    // COLLECTION_INVALIDATED | INVALID_REQUEST_HANDLE
    return
  }
+
+  const requestIndex = parseInt(requestIndexPath.split("/").slice(-1)[0])
+  const request = requestHandle.value.data.request as HoppRESTRequest
+
+  // If there is a request with this save context, switch into it
+  let possibleTab = null
+
+  const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+    collIndexPath,
+    "rest"
+  )
+  possibleTab = tabs.getTabRefWithSaveContext({
+    originLocation: "user-collection",
+    requestIndex,
+    folderPath: collIndexPath,
+  })
+  if (possibleTab) {
+    tabs.setActiveTab(possibleTab.value.id)
+  } else {
+    // If not, open the request in a new tab
+    tabs.createNewTab({
+      request: cloneDeep(request),
+      isDirty: false,
+      saveContext: {
+        originLocation: "user-collection",
+        folderPath: collIndexPath,
+        requestIndex,
+      },
+      inheritedProperties: {
+        auth,
+        headers,
+      },
+    })
+  }
 }

-const duplicateRequest = async (payload: {
-  requestPath: string
-  request: HoppRESTRequest
-}) => {
-  const { requestPath, request } = payload
-
-  const collPath = requestPath.slice(0, -2)
+const duplicateRequest = async (requestIndexPath: string) => {
+  const collPath = requestIndexPath.split("/").slice(0, -1).join("/")

  const collHandleResult = await workspaceService.getCollectionHandle(
    props.workspaceHandle,
@@ -456,95 +692,105 @@ const duplicateRequest = async (payload: {
  const collHandle = collHandleResult.right

  if (collHandle.value.type === "invalid") {
-    // WORKSPACE_INVALIDATED
+    // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
    return
  }

+  const requestHandleResult = await workspaceService.getRequestHandle(
+    collHandle,
+    requestIndexPath
+  )
+
+  if (E.isLeft(requestHandleResult)) {
+    // INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  const requestHandle = requestHandleResult.right
+
+  if (requestHandle.value.type === "invalid") {
+    // COLLECTION_INVALIDATED | INVALID_REQUEST_HANDLE
+    return
+  }
+
+  const request = requestHandle.value.data.request as HoppRESTRequest
+
  const newRequest = {
    ...cloneDeep(request),
    name: `${request.name} - ${t("action.duplicate")}`,
  }

-  const result = await workspaceService.duplicateRESTRequest(
-    collHandle,
-    collPath,
-    newRequest
-  )
-
-  if (E.isLeft(result)) {
-    // INVALID_WORKSPACE_HANDLE
-    return
-  }
-
-  if (result.right.value.type === "invalid") {
-    // WORKSPACE_INVALIDATED
-    return
-  }
+  saveRESTRequestAs(collPath, newRequest)

  toast.success(t("request.duplicated"))
 }

 const editRequest = (payload: {
-  requestPath: string
-  request: HoppRESTRequest
+  requestIndexPath: string
+  requestName: string
 }) => {
-  const { requestPath, request } = payload
-  const collPath = requestPath.slice(0, -2)
-  const requestIndex = requestPath[requestPath.length - 1]
+  const { requestIndexPath, requestName } = payload

-  editingRequest.value = request
-  editingRequestName.value = request.name ?? ""
-  editingFolderPath.value = collPath
-  editingRequestIndex.value = parseInt(requestIndex)
+  const collPath = requestIndexPath.split("/").slice(0, -1).join("/")
+
+  editingCollIndexPath.value = collPath
+  editingRequestIndexPath.value = requestIndexPath
+
+  editingRequestName.value = requestName

  displayModalEditRequest(true)
 }

 const onEditRequest = async (newReqName: string) => {
-  const collPath = editingFolderPath.value
-  const requestIndex = editingRequestIndex.value
-  const request = editingRequest.value
+  const parentCollID = editingCollIndexPath.value
+  const requestID = editingRequestIndexPath.value

-  if (collPath === null || requestIndex === null || !request) {
-    return
-  }
-
-  const collHandleResult = await workspaceService.getCollectionHandle(
+  const parentCollHandleResult = await workspaceService.getCollectionHandle(
    props.workspaceHandle,
-    collPath
+    parentCollID
  )

-  if (E.isLeft(collHandleResult)) {
+  if (E.isLeft(parentCollHandleResult)) {
    // INVALID_WORKSPACE_HANDLE
    return
  }

-  const collHandle = collHandleResult.right
+  const parentCollHandle = parentCollHandleResult.right

-  if (collHandle.value.type === "invalid") {
-    // WORKSPACE_INVALIDATED
+  if (parentCollHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
    return
  }

-  const updatedRequest = {
-    ...request,
-    name: newReqName || request.name,
+  const requestHandleResult = await workspaceService.getRequestHandle(
+    parentCollHandle,
+    requestID
+  )
+
+  if (E.isLeft(requestHandleResult)) {
+    // INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  const requestHandle = requestHandleResult.right
+
+  if (requestHandle.value.type === "invalid") {
+    // COLLECTION_INVALIDATED | INVALID_REQUEST_HANDLE
+    return
  }

  const result = await workspaceService.editRESTRequest(
-    collHandle,
-    collPath,
-    requestIndex,
-    updatedRequest
+    requestHandle,
+    newReqName
  )

  if (E.isLeft(result)) {
-    // INVALID_WORKSPACE_HANDLE
+    // INVALID_REQUEST_HANDLE
    return
  }

  if (result.right.value.type === "invalid") {
-    // WORKSPACE_INVALIDATED
+    // REQUEST_INVALIDATED
    return
  }

@@ -552,17 +798,119 @@ const onEditRequest = async (newReqName: string) => {
  toast.success(t("request.renamed"))
 }

-function onImportExportClick() {
-  // TODO: Implement
+const editCollectionProperties = async (collIndexPath: string) => {
+  const parentIndex = collIndexPath.split("/").slice(0, -1).join("/") // remove last folder to get parent folder
+
+  let inheritedProperties = {
+    auth: {
+      parentID: "",
+      parentName: "",
+      inheritedAuth: {
+        authType: "inherit",
+        authActive: true,
+      },
+    },
+    headers: [
+      {
+        parentID: "",
+        parentName: "",
+        inheritedHeader: {},
+      },
+    ],
+  } as HoppInheritedProperty
+
+  if (parentIndex) {
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      parentIndex,
+      "rest"
+    )
+
+    inheritedProperties = {
+      auth,
+      headers,
+    }
+  }
+
+  const collHandleResult = await workspaceService.getCollectionHandle(
+    props.workspaceHandle,
+    collIndexPath
+  )
+
+  if (E.isLeft(collHandleResult)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  const collHandle = collHandleResult.right
+
+  if (collHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  const { collection } = collHandle.value.data
+
+  editingProperties.value = {
+    collection,
+    isRootCollection: isAlreadyInRoot(collIndexPath),
+    path: collIndexPath,
+    inheritedProperties,
+  }
+
+  displayModalEditProperties(true)
+}
+
+const setCollectionProperties = async (updatedCollectionProps: {
+  auth: HoppRESTAuth
+  headers: HoppCollection["headers"]
+  collIndexPath: string
+}) => {
+  const { collIndexPath, auth, headers } = updatedCollectionProps
+
+  const collHandleResult = await workspaceService.getCollectionHandle(
+    props.workspaceHandle,
+    collIndexPath
+  )
+
+  if (E.isLeft(collHandleResult)) {
+    // INVALID_WORKSPACE_HANDLE
+    return
+  }
+
+  const collHandle = collHandleResult.right
+
+  if (collHandle.value.type === "invalid") {
+    // WORKSPACE_INVALIDATED | INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  const result = await workspaceService.editRESTCollectionProperties(
+    collHandle,
+    { auth, headers }
+  )
+
+  if (E.isLeft(result)) {
+    // INVALID_COLLECTION_HANDLE
+    return
+  }
+
+  if (result.right.value.type === "invalid") {
+    // COLLECTION_INVALIDATED
+    return
+  }
+
+  toast.success(t("collection.properties_updated"))
+
+  displayModalEditProperties(false)
 }

 const resolveConfirmModal = (title: string | null) => {
  if (title === `${t("confirm.remove_collection")}`) {
-    // onRemoveCollection()
+    onRemoveRootCollection()
  } else if (title === `${t("confirm.remove_request")}`) {
    onRemoveRequest()
  } else if (title === `${t("confirm.remove_folder")}`) {
-    onRemoveFolder()
+    onRemoveChildCollection()
  } else {
    console.error(
      `Confirm modal title ${title} is not handled by the component`
@@ -573,16 +921,25 @@ const resolveConfirmModal = (title: string | null) => {
 }

 const resetSelectedData = () => {
-  editingFolderPath.value = null
+  editingCollIndexPath.value = ""
 }

 /**
- * Used to get the index of the request from the path
- * @param path The path of the request
- * @returns The index of the request
+ * @param path The path of the collection or request
+ * @returns The index of the collection or request
 */
-const pathToLastIndex = (path: string) => {
+const pathToIndex = (path: string) => {
  const pathArr = path.split("/")
-  return parseInt(pathArr[pathArr.length - 1])
+  return pathArr
+}
+
+/**
+ * Checks if the collection is already in the root
+ * @param id - path of the collection
+ * @returns boolean - true if the collection is already in the root
+ */
+const isAlreadyInRoot = (id: string) => {
+  const indexPath = pathToIndex(id)
+  return indexPath.length === 1
 }
 </script>
--- a/packages/hoppscotch-common/src/services/new-workspace/index.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/index.ts
@@ -8,10 +8,10 @@ import {
  shallowRef,
  watch,
 } from "vue"
-import { WorkspaceProvider } from "./provider"
+import { UpdatedCollectionProperties, WorkspaceProvider } from "./provider"
 import { HandleRef } from "./handle"
 import * as E from "fp-ts/Either"
-import { Workspace, WorkspaceCollection } from "./workspace"
+import { Workspace, WorkspaceCollection, WorkspaceRequest } from "./workspace"
 import { RESTCollectionChildrenView, RootRESTCollectionView } from "./view"
 import { HoppRESTRequest } from "@hoppscotch/data"

@@ -138,6 +138,36 @@ export class NewWorkspaceService extends Service {
    return E.right(result.right)
  }

+  public async getRequestHandle(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    requestID: string
+  ): Promise<
+    E.Either<
+      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
+      HandleRef<WorkspaceRequest>
+    >
+  > {
+    if (parentCollHandle.value.type === "invalid") {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
+    }
+
+    const provider = this.registeredProviders.get(
+      parentCollHandle.value.data.providerID
+    )
+
+    if (!provider) {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
+    }
+
+    const result = await provider.getRequestHandle(parentCollHandle, requestID)
+
+    if (E.isLeft(result)) {
+      return E.left({ type: "PROVIDER_ERROR", error: result.left })
+    }
+
+    return E.right(result.right)
+  }
+
  public async createRESTRootCollection(
    workspaceHandle: HandleRef<Workspace>,
    collectionName: string
@@ -173,8 +203,7 @@ export class NewWorkspaceService extends Service {

  public async createRESTChildCollection(
    parentCollHandle: HandleRef<WorkspaceCollection>,
-    collectionName: string,
-    path: string
+    collectionName: string
  ): Promise<
    E.Either<
      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
@@ -195,8 +224,7 @@ export class NewWorkspaceService extends Service {

    const result = await provider.createRESTChildCollection(
      parentCollHandle,
-      collectionName,
-      path
+      collectionName
    )

    if (E.isLeft(result)) {
@@ -206,10 +234,166 @@ export class NewWorkspaceService extends Service {
    return E.right(result.right)
  }

+  public async editRESTRootCollection(
+    collHandle: HandleRef<WorkspaceCollection>,
+    newCollectionName: string
+  ): Promise<
+    E.Either<
+      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
+      HandleRef<WorkspaceCollection>
+    >
+  > {
+    if (collHandle.value.type === "invalid") {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
+    }
+
+    const provider = this.registeredProviders.get(
+      collHandle.value.data.providerID
+    )
+
+    if (!provider) {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
+    }
+
+    const result = await provider.editRESTRootCollection(
+      collHandle,
+      newCollectionName
+    )
+
+    if (E.isLeft(result)) {
+      return E.left({ type: "PROVIDER_ERROR", error: result.left })
+    }
+
+    return E.right(result.right)
+  }
+
+  public async editRESTChildCollection(
+    collHandle: HandleRef<WorkspaceCollection>,
+    newCollectionName: string
+  ): Promise<
+    E.Either<
+      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
+      HandleRef<WorkspaceCollection>
+    >
+  > {
+    if (collHandle.value.type === "invalid") {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
+    }
+
+    const provider = this.registeredProviders.get(
+      collHandle.value.data.providerID
+    )
+
+    if (!provider) {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
+    }
+
+    const result = await provider.editRESTChildCollection(
+      collHandle,
+      newCollectionName
+    )
+
+    if (E.isLeft(result)) {
+      return E.left({ type: "PROVIDER_ERROR", error: result.left })
+    }
+
+    return E.right(result.right)
+  }
+
+  public async editRESTCollectionProperties(
+    collHandle: HandleRef<WorkspaceCollection>,
+    updatedCollProps: UpdatedCollectionProperties
+  ): Promise<
+    E.Either<
+      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
+      HandleRef<WorkspaceCollection>
+    >
+  > {
+    if (collHandle.value.type === "invalid") {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
+    }
+
+    const provider = this.registeredProviders.get(
+      collHandle.value.data.providerID
+    )
+
+    if (!provider) {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
+    }
+
+    const result = await provider.editRESTCollectionProperties(
+      collHandle,
+      updatedCollProps
+    )
+
+    if (E.isLeft(result)) {
+      return E.left({ type: "PROVIDER_ERROR", error: result.left })
+    }
+
+    return E.right(result.right)
+  }
+
+  public async removeRESTRootCollection(
+    collHandle: HandleRef<WorkspaceCollection>
+  ): Promise<
+    E.Either<
+      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
+      HandleRef<WorkspaceCollection>
+    >
+  > {
+    if (collHandle.value.type === "invalid") {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
+    }
+
+    const provider = this.registeredProviders.get(
+      collHandle.value.data.providerID
+    )
+
+    if (!provider) {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
+    }
+
+    const result = await provider.removeRESTRootCollection(collHandle)
+
+    if (E.isLeft(result)) {
+      return E.left({ type: "PROVIDER_ERROR", error: result.left })
+    }
+
+    return E.right(result.right)
+  }
+
+  public async removeRESTChildCollection(
+    parentCollHandle: HandleRef<WorkspaceCollection>
+  ): Promise<
+    E.Either<
+      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
+      HandleRef<WorkspaceCollection>
+    >
+  > {
+    if (parentCollHandle.value.type === "invalid") {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
+    }
+
+    const provider = this.registeredProviders.get(
+      parentCollHandle.value.data.providerID
+    )
+
+    if (!provider) {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
+    }
+
+    const result = await provider.removeRESTChildCollection(parentCollHandle)
+
+    if (E.isLeft(result)) {
+      return E.left({ type: "PROVIDER_ERROR", error: result.left })
+    }
+
+    return E.right(result.right)
+  }
+
  public async createRESTRequest(
    parentCollHandle: HandleRef<WorkspaceCollection>,
-    requestName: string,
-    path: string
+    requestName: string
  ): Promise<
    E.Either<
      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
@@ -230,8 +414,7 @@ export class NewWorkspaceService extends Service {

    const result = await provider.createRESTRequest(
      parentCollHandle,
-      requestName,
-      path
+      requestName
    )

    if (E.isLeft(result)) {
@@ -242,104 +425,26 @@ export class NewWorkspaceService extends Service {
  }

  public async removeRESTRequest(
-    parentCollHandle: HandleRef<WorkspaceCollection>,
-    path: string,
-    requestIndex: number
+    requestHandle: HandleRef<WorkspaceRequest>
  ): Promise<
    E.Either<
      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      HandleRef<WorkspaceCollection>
+      HandleRef<WorkspaceRequest>
    >
  > {
-    if (parentCollHandle.value.type === "invalid") {
+    if (requestHandle.value.type === "invalid") {
      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
    }

    const provider = this.registeredProviders.get(
-      parentCollHandle.value.data.providerID
+      requestHandle.value.data.providerID
    )

    if (!provider) {
      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
    }

-    const result = await provider.removeRESTRequest(
-      parentCollHandle,
-      path,
-      requestIndex
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async selectRESTRequest(
-    parentCollHandle: HandleRef<WorkspaceCollection>,
-    collPath: string,
-    requestIndex: string,
-    request: HoppRESTRequest
-  ): Promise<
-    E.Either<
-      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      HandleRef<WorkspaceCollection>
-    >
-  > {
-    if (parentCollHandle.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      parentCollHandle.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.selectRESTRequest(
-      parentCollHandle,
-      collPath,
-      requestIndex,
-      request
-    )
-
-    if (E.isLeft(result)) {
-      return E.left({ type: "PROVIDER_ERROR", error: result.left })
-    }
-
-    return E.right(result.right)
-  }
-
-  public async duplicateRESTRequest(
-    parentCollHandle: HandleRef<WorkspaceCollection>,
-    collPath: string,
-    request: HoppRESTRequest
-  ): Promise<
-    E.Either<
-      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      HandleRef<WorkspaceCollection>
-    >
-  > {
-    if (parentCollHandle.value.type === "invalid") {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
-    }
-
-    const provider = this.registeredProviders.get(
-      parentCollHandle.value.data.providerID
-    )
-
-    if (!provider) {
-      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
-    }
-
-    const result = await provider.duplicateRESTRequest(
-      parentCollHandle,
-      collPath,
-      request
-    )
+    const result = await provider.removeRESTRequest(requestHandle)

    if (E.isLeft(result)) {
      return E.left({ type: "PROVIDER_ERROR", error: result.left })
@@ -349,34 +454,27 @@ export class NewWorkspaceService extends Service {
  }

  public async editRESTRequest(
-    parentCollHandle: HandleRef<WorkspaceCollection>,
-    collPath: string,
-    requestIndex: number,
-    request: HoppRESTRequest
+    requestHandle: HandleRef<WorkspaceRequest>,
+    newRequestName: string
  ): Promise<
    E.Either<
      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
-      HandleRef<WorkspaceCollection>
+      HandleRef<WorkspaceRequest>
    >
  > {
-    if (parentCollHandle.value.type === "invalid") {
+    if (requestHandle.value.type === "invalid") {
      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
    }

    const provider = this.registeredProviders.get(
-      parentCollHandle.value.data.providerID
+      requestHandle.value.data.providerID
    )

    if (!provider) {
      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
    }

-    const result = await provider.editRESTRequest(
-      parentCollHandle,
-      collPath,
-      requestIndex,
-      request
-    )
+    const result = await provider.editRESTRequest(requestHandle, newRequestName)

    if (E.isLeft(result)) {
      return E.left({ type: "PROVIDER_ERROR", error: result.left })
@@ -385,6 +483,35 @@ export class NewWorkspaceService extends Service {
    return E.right(result.right)
  }

+  public async saveRESTRequest(
+    requestHandle: HandleRef<WorkspaceRequest>,
+    updatedRequest: HoppRESTRequest
+  ): Promise<
+    E.Either<
+      WorkspaceError<"INVALID_HANDLE" | "INVALID_PROVIDER">,
+      HandleRef<WorkspaceRequest>
+    >
+  > {
+    if (requestHandle.value.type === "invalid") {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_HANDLE" })
+    }
+
+    const provider = this.registeredProviders.get(
+      requestHandle.value.data.providerID
+    )
+
+    if (!provider) {
+      return E.left({ type: "SERVICE_ERROR", error: "INVALID_PROVIDER" })
+    }
+
+    const result = await provider.saveRESTRequest(requestHandle, updatedRequest)
+
+    if (E.isLeft(result)) {
+      return E.left({ type: "PROVIDER_ERROR", error: result.left })
+    }
+
+    return E.right(result.right)
+  }

  public async getRESTCollectionChildrenView(
    collectionHandle: HandleRef<WorkspaceCollection>
--- a/packages/hoppscotch-common/src/services/new-workspace/provider.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/provider.ts
@@ -1,9 +1,19 @@
 import { Ref } from "vue"
 import * as E from "fp-ts/Either"
 import { HandleRef } from "./handle"
-import { Workspace, WorkspaceCollection, WorkspaceDecor } from "./workspace"
+import {
+  Workspace,
+  WorkspaceCollection,
+  WorkspaceDecor,
+  WorkspaceRequest,
+} from "./workspace"
 import { RESTCollectionChildrenView, RootRESTCollectionView } from "./view"
-import { HoppRESTRequest } from "@hoppscotch/data"
+import { HoppRESTAuth, HoppRESTHeaders, HoppRESTRequest } from "@hoppscotch/data"
+
+export type UpdatedCollectionProperties = {
+  auth: HoppRESTAuth
+  headers: HoppRESTHeaders
+}

 export interface WorkspaceProvider {
  providerID: string
@@ -17,6 +27,10 @@ export interface WorkspaceProvider {
    workspaceHandle: HandleRef<Workspace>,
    collectionID: string
  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
+  getRequestHandle(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    requestID: string
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceRequest>>>

  getRESTRootCollectionView(
    workspaceHandle: HandleRef<Workspace>
@@ -31,34 +45,39 @@ export interface WorkspaceProvider {
  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
  createRESTChildCollection(
    parentCollHandle: HandleRef<WorkspaceCollection>,
-    collectionName: string,
-    path: string
+    collectionName: string
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
+  editRESTRootCollection(
+    collHandle: HandleRef<WorkspaceCollection>,
+    newCollectionName: string
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
+  editRESTChildCollection(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    newCollectionName: string
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
+  editRESTCollectionProperties(
+    parentCollHandle: HandleRef<WorkspaceCollection>,
+    updatedCollProps: UpdatedCollectionProperties
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
+  removeRESTRootCollection(
+    collHandle: HandleRef<WorkspaceCollection>
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
+  removeRESTChildCollection(
+    parentCollHandle: HandleRef<WorkspaceCollection>
  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
  createRESTRequest(
    parentCollHandle: HandleRef<WorkspaceCollection>,
-    requestName: string,
-    path: string
+    requestName: string
  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
  removeRESTRequest(
-    parentCollHandle: HandleRef<WorkspaceCollection>,
-    path: string,
-    requestIndex: number
-  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
-  selectRESTRequest(
-    parentCollHandle: HandleRef<WorkspaceCollection>,
-    collPath: string,
-    requestIndex: string,
-    request: HoppRESTRequest
-  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
-  duplicateRESTRequest(
-    parentCollHandle: HandleRef<WorkspaceCollection>,
-    collPath: string,
-    request: HoppRESTRequest
-  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
+    requestHandle: HandleRef<WorkspaceRequest>
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceRequest>>>
  editRESTRequest(
-    parentCollHandle: HandleRef<WorkspaceCollection>,
-    collPath: string,
-    requestIndex: number,
-    request: HoppRESTRequest
-  ): Promise<E.Either<unknown, HandleRef<WorkspaceCollection>>>
+    requestHandle: HandleRef<WorkspaceRequest>,
+    newRequestName: string
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceRequest>>>
+  saveRESTRequest(
+    requestHandle: HandleRef<WorkspaceRequest>,
+    updatedRequest: HoppRESTRequest
+  ): Promise<E.Either<unknown, HandleRef<WorkspaceRequest>>>
 }
--- a/packages/hoppscotch-common/src/services/new-workspace/providers/personal.workspace.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/providers/personal.workspace.ts
--- a/packages/hoppscotch-common/src/services/new-workspace/view.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/view.ts
@@ -1,16 +1,16 @@
-import { HoppRESTRequest } from "@hoppscotch/data"
+import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
 import { Ref } from "vue"

 export type RESTCollectionViewCollection = {
  collectionID: string
-  name: string
+
+  collection: HoppCollection
 }

 export type RESTCollectionViewRequest = {
+  collectionID: string
  requestID: string

-  name: string
-  method: string
  request: HoppRESTRequest
 }

--- a/packages/hoppscotch-common/src/services/new-workspace/workspace.ts
+++ b/packages/hoppscotch-common/src/services/new-workspace/workspace.ts
@@ -1,3 +1,4 @@
+import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
 import { Component } from "vue"

 export type Workspace = {
@@ -5,8 +6,6 @@ export type Workspace = {
  workspaceID: string

  name: string
-
-  collectionsAreReadonly: boolean
 }

 export type WorkspaceCollection = {
@@ -14,7 +13,16 @@ export type WorkspaceCollection = {
  workspaceID: string
  collectionID: string

-  name: string
+  collection: HoppCollection | null
+}
+
+export type WorkspaceRequest = {
+  providerID: string
+  workspaceID: string
+  collectionID: string
+  requestID: string
+
+  request: HoppRESTRequest | null
 }

 export type WorkspaceDecor = {