From 2179ce6fff78d214344b703c16be625dbf314b81 Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Tue, 14 Mar 2023 14:01:47 +0530
Subject: [PATCH 1/3] fix: reordering bugs and UX fixes (#2948)
---
.../hoppscotch-common/src/components.d.ts | 1 -
.../src/components/collections/Collection.vue | 118 ++++++---
.../components/collections/MyCollections.vue | 4 +
.../src/components/collections/Request.vue | 127 +++++++---
.../collections/TeamCollections.vue | 3 +
.../src/components/collections/index.vue | 229 ++++++++++--------
.../helpers/teams/TeamCollectionAdapter.ts | 24 +-
.../src/newstore/collections.ts | 21 +-
.../src/newstore/reordering.ts | 46 ++++
9 files changed, 390 insertions(+), 183 deletions(-)
create mode 100644 packages/hoppscotch-common/src/newstore/reordering.ts
diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts
index 970a9ec0b..40471f3c5 100644
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -89,7 +89,6 @@ declare module '@vue/runtime-core' {
HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
- HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']
HttpBody: typeof import('./components/http/Body.vue')['default']
HttpBodyParameters: typeof import('./components/http/BodyParameters.vue')['default']
diff --git a/packages/hoppscotch-common/src/components/collections/Collection.vue b/packages/hoppscotch-common/src/components/collections/Collection.vue
index 83f87c90c..f368409fd 100644
--- a/packages/hoppscotch-common/src/components/collections/Collection.vue
+++ b/packages/hoppscotch-common/src/components/collections/Collection.vue
@@ -4,7 +4,7 @@
class="h-1 w-full transition"
:class="[
{
- 'bg-accentDark': ordering && notSameDestination,
+ 'bg-accentDark': isReorderable,
},
]"
@drop="orderUpdateCollectionEvent"
@@ -20,35 +20,43 @@
}"
>
{
+ resetDragState()
+ dropItemID = ''
+ }
+ "
@contextmenu.prevent="options?.tippy.show()"
>
-
-
-
-
-
-
- {{ collectionName }}
+
+
+
-
+
+
+ {{ collectionName }}
+
+
+
,
+ default: null,
+ required: true,
+ },
data: {
type: Object as PropType | TeamCollection>,
default: () => ({}),
@@ -258,6 +276,12 @@ const dragging = ref(false)
const ordering = ref(false)
const dropItemID = ref("")
+const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
+ type: "collection",
+ id: "",
+ parentID: "",
+})
+
// Used to determine if the collection is being dragged to a different destination
// This is used to make the highlight effect work
watch(
@@ -293,11 +317,52 @@ watch(
}
)
+const isRequestDragging = computed(() => {
+ return currentReorderingStatus.value.type === "request"
+})
+
+const isSameParent = computed(() => {
+ return currentReorderingStatus.value.parentID === props.parentID
+})
+
+const isReorderable = computed(() => {
+ return (
+ ordering.value &&
+ notSameDestination.value &&
+ !isRequestDragging.value &&
+ isSameParent.value
+ )
+})
+
const dragStart = ({ dataTransfer }: DragEvent) => {
if (dataTransfer) {
emit("drag-event", dataTransfer)
dropItemID.value = dataTransfer.getData("collectionIndex")
dragging.value = !dragging.value
+ changeCurrentReorderStatus({
+ type: "collection",
+ id: props.id,
+ parentID: props.parentID,
+ })
+ }
+}
+
+// Trigger the re-ordering event when a collection is dragged over another collection's top section
+const handleDragOver = (e: DragEvent) => {
+ dragging.value = true
+ if (e.offsetY < 10 && notSameDestination.value) {
+ ordering.value = true
+ dragging.value = false
+ } else {
+ ordering.value = false
+ }
+}
+
+const handelDrop = (e: DragEvent) => {
+ if (ordering.value) {
+ orderUpdateCollectionEvent(e)
+ } else {
+ dropEvent(e)
}
}
@@ -305,8 +370,7 @@ const dropEvent = (e: DragEvent) => {
if (e.dataTransfer) {
e.stopPropagation()
emit("drop-event", e.dataTransfer)
- dragging.value = !dragging.value
- dropItemID.value = ""
+ resetDragState()
}
}
@@ -314,8 +378,7 @@ const orderUpdateCollectionEvent = (e: DragEvent) => {
if (e.dataTransfer) {
e.stopPropagation()
emit("update-collection-order", e.dataTransfer)
- ordering.value = !ordering.value
- dropItemID.value = ""
+ resetDragState()
}
}
@@ -334,6 +397,5 @@ const isCollLoading = computed(() => {
const resetDragState = () => {
dragging.value = false
ordering.value = false
- dropItemID.value = ""
}
diff --git a/packages/hoppscotch-common/src/components/collections/MyCollections.vue b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
index 7c6fdcbce..759b7ad69 100644
--- a/packages/hoppscotch-common/src/components/collections/MyCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
@@ -39,6 +39,7 @@
-
-
-
-
- {{ request.method }}
-
-
-
-
- {{ request.name }}
+
+
+
+
+ {{ request.method }}
+
-
+
+ {{ request.name }}
+ v-if="isActive"
+ v-tippy="{ theme: 'tooltip' }"
+ class="relative h-1.5 w-1.5 flex flex-shrink-0 mx-3"
+ :title="`${t('collection.request_in_use')}`"
+ >
+
+
+
+
-
+
,
+ default: null,
+ required: true,
+ },
collectionsType: {
type: String as PropType,
default: "my-collections",
@@ -222,6 +236,12 @@ const duplicate = ref(null)
const dragging = ref(false)
const ordering = ref(false)
+const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
+ type: "collection",
+ id: "",
+ parentID: "",
+})
+
const requestMethodLabels = {
get: "text-green-500",
post: "text-yellow-500",
@@ -255,13 +275,41 @@ const dragStart = ({ dataTransfer }: DragEvent) => {
if (dataTransfer) {
emit("drag-request", dataTransfer)
dragging.value = !dragging.value
+ changeCurrentReorderStatus({
+ type: "request",
+ id: props.requestID,
+ parentID: props.parentID,
+ })
+ }
+}
+
+const isCollectionDragging = computed(() => {
+ return currentReorderingStatus.value.type === "collection"
+})
+
+const isSameParent = computed(() => {
+ return currentReorderingStatus.value.parentID === props.parentID
+})
+
+const isReorderable = computed(() => {
+ return ordering.value && !isCollectionDragging.value && isSameParent.value
+})
+
+// Trigger the re-ordering event when a request is dragged over another request's top section
+const handleDragOver = (e: DragEvent) => {
+ dragging.value = true
+ if (e.offsetY < 10) {
+ ordering.value = true
+ dragging.value = false
+ } else {
+ ordering.value = false
}
}
const dropEvent = (e: DragEvent) => {
if (e.dataTransfer) {
e.stopPropagation()
- ordering.value = !ordering.value
+ resetDragState()
emit("update-request-order", e.dataTransfer)
}
}
@@ -273,4 +321,9 @@ const isRequestLoading = computed(() => {
return false
}
})
+
+const resetDragState = () => {
+ dragging.value = false
+ ordering.value = false
+}
diff --git a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
index 2b694d7fe..c26e29607 100644
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -53,6 +53,7 @@
{
return filteredCollections
})
-const isSelected = computed(() => {
- return ({
- collectionIndex,
- folderPath,
- requestIndex,
- collectionID,
- folderID,
- requestID,
- }: {
- collectionIndex?: number | undefined
- folderPath?: string | undefined
- requestIndex?: number | undefined
- collectionID?: string | undefined
- folderID?: string | undefined
- requestID?: string | undefined
- }) => {
- if (collectionIndex !== undefined) {
- return (
- props.picked &&
- props.picked.pickedType === "my-collection" &&
- props.picked.collectionIndex === collectionIndex
- )
- } else if (requestIndex !== undefined && folderPath !== undefined) {
- return (
- props.picked &&
- props.picked.pickedType === "my-request" &&
- props.picked.folderPath === folderPath &&
- props.picked.requestIndex === requestIndex
- )
- } else if (folderPath !== undefined) {
- return (
- props.picked &&
- props.picked.pickedType === "my-folder" &&
- props.picked.folderPath === folderPath
- )
- } else if (collectionID !== undefined) {
- return (
- props.picked &&
- props.picked.pickedType === "teams-collection" &&
- props.picked.collectionID === collectionID
- )
- } else if (requestID !== undefined) {
- return (
- props.picked &&
- props.picked.pickedType === "teams-request" &&
- props.picked.requestID === requestID
- )
- } else if (folderID !== undefined) {
- return (
- props.picked &&
- props.picked.pickedType === "teams-folder" &&
- props.picked.folderID === folderID
- )
- }
+const isSelected = ({
+ collectionIndex,
+ folderPath,
+ requestIndex,
+ collectionID,
+ folderID,
+ requestID,
+}: {
+ collectionIndex?: number | undefined
+ folderPath?: string | undefined
+ requestIndex?: number | undefined
+ collectionID?: string | undefined
+ folderID?: string | undefined
+ requestID?: string | undefined
+}) => {
+ if (collectionIndex !== undefined) {
+ return (
+ props.picked &&
+ props.picked.pickedType === "my-collection" &&
+ props.picked.collectionIndex === collectionIndex
+ )
+ } else if (requestIndex !== undefined && folderPath !== undefined) {
+ return (
+ props.picked &&
+ props.picked.pickedType === "my-request" &&
+ props.picked.folderPath === folderPath &&
+ props.picked.requestIndex === requestIndex
+ )
+ } else if (folderPath !== undefined) {
+ return (
+ props.picked &&
+ props.picked.pickedType === "my-folder" &&
+ props.picked.folderPath === folderPath
+ )
+ } else if (collectionID !== undefined) {
+ return (
+ props.picked &&
+ props.picked.pickedType === "teams-collection" &&
+ props.picked.collectionID === collectionID
+ )
+ } else if (requestID !== undefined) {
+ return (
+ props.picked &&
+ props.picked.pickedType === "teams-request" &&
+ props.picked.requestID === requestID
+ )
+ } else if (folderID !== undefined) {
+ return (
+ props.picked &&
+ props.picked.pickedType === "teams-folder" &&
+ props.picked.folderID === folderID
+ )
}
-})
+}
const modalLoadingState = ref(false)
const exportLoading = ref(false)
@@ -1023,7 +1021,7 @@ const onRemoveCollection = () => {
if (collectionIndex === null) return
if (
- isSelected.value({
+ isSelected({
collectionIndex,
})
) {
@@ -1040,7 +1038,7 @@ const onRemoveCollection = () => {
if (!collectionID) return
if (
- isSelected.value({
+ isSelected({
collectionID,
})
) {
@@ -1067,7 +1065,7 @@ const onRemoveFolder = () => {
if (!folderPath) return
if (
- isSelected.value({
+ isSelected({
folderPath,
})
) {
@@ -1084,7 +1082,7 @@ const onRemoveFolder = () => {
if (!collectionID) return
if (
- isSelected.value({
+ isSelected({
collectionID,
})
) {
@@ -1118,7 +1116,7 @@ const onRemoveRequest = () => {
if (folderPath === null || requestIndex === null) return
if (
- isSelected.value({
+ isSelected({
folderPath,
requestIndex,
})
@@ -1136,7 +1134,7 @@ const onRemoveRequest = () => {
if (!requestID) return
if (
- isSelected.value({
+ isSelected({
requestID,
})
) {
@@ -1342,12 +1340,10 @@ const discardRequestChange = () => {
* @param path The path of the request
* @returns The index of the request
*/
-const pathToIndex = computed(() => {
- return (path: string) => {
- const pathArr = path.split("/")
- return parseInt(pathArr[pathArr.length - 1])
- }
-})
+const pathToLastIndex = (path: string) => {
+ const pathArr = path.split("/")
+ return parseInt(pathArr[pathArr.length - 1])
+}
/**
* This function is called when the user drops the request inside a collection
@@ -1363,7 +1359,7 @@ const dropRequest = (payload: {
if (collectionsType.value.type === "my-collections" && folderPath) {
moveRESTRequest(
folderPath,
- pathToIndex.value(requestIndex),
+ pathToLastIndex(requestIndex),
destinationCollectionIndex
)
toast.success(`${t("request.moved")}`)
@@ -1395,6 +1391,43 @@ const dropRequest = (payload: {
}
}
+/**
+ * @param path The path of the collection or request
+ * @returns The index of the collection or request
+ */
+const pathToIndex = (path: string) => {
+ const pathArr = path.split("/")
+ return pathArr
+}
+
+/**
+ * Used to check if the collection exist as the parent of the childrens
+ * @param collectionIndexDragged The index of the collection dragged
+ * @param destinationCollectionIndex The index of the destination collection
+ * @returns True if the collection exist as the parent of the childrens
+ */
+const checkIfCollectionIsAParentOfTheChildren = (
+ collectionIndexDragged: string,
+ destinationCollectionIndex: string
+) => {
+ const collectionDraggedPath = pathToIndex(collectionIndexDragged)
+ const destinationCollectionPath = pathToIndex(destinationCollectionIndex)
+
+ if (collectionDraggedPath.length < destinationCollectionPath.length) {
+ const slicedDestinationCollectionPath = destinationCollectionPath.slice(
+ 0,
+ collectionDraggedPath.length
+ )
+ if (isEqual(slicedDestinationCollectionPath, collectionDraggedPath)) {
+ return true
+ } else {
+ return false
+ }
+ }
+
+ return false
+}
+
/**
* This function is called when the user moves the collection
* to a different collection or folder
@@ -1408,6 +1441,15 @@ const dropCollection = (payload: {
if (!collectionIndexDragged || !destinationCollectionIndex) return
if (collectionIndexDragged === destinationCollectionIndex) return
if (collectionsType.value.type === "my-collections") {
+ if (
+ checkIfCollectionIsAParentOfTheChildren(
+ collectionIndexDragged,
+ destinationCollectionIndex
+ )
+ ) {
+ toast.error(`${t("team.parent_coll_move")}`)
+ return
+ }
moveRESTFolder(collectionIndexDragged, destinationCollectionIndex)
draggingToRoot.value = false
toast.success(`${t("collection.moved")}`)
@@ -1445,12 +1487,10 @@ const dropCollection = (payload: {
* @param id - path of the collection
* @returns boolean - true if the collection is already in the root
*/
-const isAlreadyInRoot = computed(() => {
- return (id: string) => {
- const indexPath = id.split("/").map((i) => parseInt(i))
- return indexPath.length === 1
- }
-})
+const isAlreadyInRoot = (id: string) => {
+ const indexPath = pathToIndex(id)
+ return indexPath.length === 1
+}
/**
* This function is called when the user drops the collection
@@ -1463,7 +1503,7 @@ const dropToRoot = ({ dataTransfer }: DragEvent) => {
if (!collectionIndexDragged) return
if (collectionsType.value.type === "my-collections") {
// check if the collection is already in the root
- if (isAlreadyInRoot.value(collectionIndexDragged)) {
+ if (isAlreadyInRoot(collectionIndexDragged)) {
toast.error(`${t("collection.invalid_root_move")}`)
} else {
moveRESTFolder(collectionIndexDragged, null)
@@ -1506,26 +1546,25 @@ const dropToRoot = ({ dataTransfer }: DragEvent) => {
* @param destinationReq - path index of the destination request
* @returns boolean - true if the request is being moved to the same parent
*/
-const isSameSameParent = computed(
- () => (draggedReq: string, destinationReq: string) => {
- const draggedReqIndex = draggedReq.split("/").map((i) => parseInt(i))
- const destinationReqIndex = destinationReq
- .split("/")
- .map((i) => parseInt(i))
+const isSameSameParent = (draggedItem: string, destinationItem: string) => {
+ const draggedItemIndex = pathToIndex(draggedItem)
+ const destinationItemIndex = pathToIndex(destinationItem)
- // length of 1 means the request is in the root
- if (draggedReqIndex.length === 1 && destinationReqIndex.length === 1) {
- return true
- } else if (
- draggedReqIndex[draggedReqIndex.length - 2] ===
- destinationReqIndex[destinationReqIndex.length - 2]
- ) {
+ // length of 1 means the request is in the root
+ if (draggedItemIndex.length === 1 && destinationItemIndex.length === 1) {
+ return true
+ } else if (draggedItemIndex.length === destinationItemIndex.length) {
+ const dragedItemParent = draggedItemIndex.slice(0, -1)
+ const destinationItemParent = destinationItemIndex.slice(0, -1)
+ if (isEqual(dragedItemParent, destinationItemParent)) {
return true
} else {
return false
}
+ } else {
+ return false
}
-)
+}
/**
* This function is called when the user updates the request order in a collection
@@ -1553,12 +1592,12 @@ const updateRequestOrder = (payload: {
if (dragedRequestIndex === destinationRequestIndex) return
if (collectionsType.value.type === "my-collections") {
- if (!isSameSameParent.value(dragedRequestIndex, destinationRequestIndex)) {
+ if (!isSameSameParent(dragedRequestIndex, destinationRequestIndex)) {
toast.error(`${t("collection.different_parent")}`)
} else {
updateRESTRequestOrder(
- pathToIndex.value(dragedRequestIndex),
- pathToIndex.value(destinationRequestIndex),
+ pathToLastIndex(dragedRequestIndex),
+ pathToLastIndex(destinationRequestIndex),
destinationCollectionIndex
)
toast.success(`${t("request.order_changed")}`)
@@ -1608,9 +1647,7 @@ const updateCollectionOrder = (payload: {
if (dragedCollectionIndex === destinationCollectionIndex) return
if (collectionsType.value.type === "my-collections") {
- if (
- !isSameSameParent.value(dragedCollectionIndex, destinationCollectionIndex)
- ) {
+ if (!isSameSameParent(dragedCollectionIndex, destinationCollectionIndex)) {
toast.error(`${t("collection.different_parent")}`)
} else {
updateRESTCollectionOrder(
diff --git a/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts b/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts
index ee9617d31..aee9af86f 100644
--- a/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts
+++ b/packages/hoppscotch-common/src/helpers/teams/TeamCollectionAdapter.ts
@@ -547,6 +547,15 @@ export default class NewTeamCollectionAdapter {
)
}
+ private reorderItems = (array: unknown[], from: number, to: number) => {
+ const item = array.splice(from, 1)[0]
+ if (from < to) {
+ array.splice(to - 1, 0, item)
+ } else {
+ array.splice(to, 0, item)
+ }
+ }
+
public updateRequestOrder(
dragedRequestID: string,
destinationRequestID: string,
@@ -570,10 +579,7 @@ export default class NewTeamCollectionAdapter {
if (requestIndex === -1) return
- const request = collection.requests[requestIndex]
-
- collection.requests.splice(requestIndex, 1)
- collection.requests.splice(destinationIndex, 0, request)
+ this.reorderItems(collection.requests, requestIndex, destinationIndex)
this.collections$.next(tree)
}
@@ -600,10 +606,7 @@ export default class NewTeamCollectionAdapter {
// If the collection index is not found, don't update
if (collectionIndex === -1) return
- const collection = coll.children[collectionIndex]
-
- coll.children.splice(collectionIndex, 1)
- coll.children.splice(destinationIndex, 0, collection)
+ this.reorderItems(coll.children, collectionIndex, destinationIndex)
} else {
// If the collection has no parent collection, it is a root collection
const collectionIndex = tree.findIndex((coll) => coll.id === collectionID)
@@ -615,10 +618,7 @@ export default class NewTeamCollectionAdapter {
// If the collection index is not found, don't update
if (collectionIndex === -1) return
- const collection = tree[collectionIndex]
-
- tree.splice(collectionIndex, 1)
- tree.splice(destinationIndex, 0, collection)
+ this.reorderItems(tree, collectionIndex, destinationIndex)
}
this.collections$.next(tree)
diff --git a/packages/hoppscotch-common/src/newstore/collections.ts b/packages/hoppscotch-common/src/newstore/collections.ts
index bcfe05571..0068e24db 100644
--- a/packages/hoppscotch-common/src/newstore/collections.ts
+++ b/packages/hoppscotch-common/src/newstore/collections.ts
@@ -45,6 +45,15 @@ function navigateToFolderWithIndexPath(
return target !== undefined ? target : null
}
+function reorderItems(array: unknown[], from: number, to: number) {
+ const item = array.splice(from, 1)[0]
+ if (from < to) {
+ array.splice(to - 1, 0, item)
+ } else {
+ array.splice(to, 0, item)
+ }
+}
+
const restCollectionDispatchers = defineDispatchers({
setCollections(
_: RESTCollectionStoreType,
@@ -295,18 +304,14 @@ const restCollectionDispatchers = defineDispatchers({
)
if (containingFolder === null) {
- const [removed] = newState.splice(folderIndex, 1)
-
- newState.splice(destinationFolderIndex, 0, removed)
+ reorderItems(newState, folderIndex, destinationFolderIndex)
return {
state: newState,
}
}
- const [removed] = containingFolder.folders.splice(folderIndex, 1)
-
- containingFolder.folders.splice(destinationFolderIndex, 0, removed)
+ reorderItems(containingFolder.folders, folderIndex, destinationFolderIndex)
return {
state: newState,
@@ -480,9 +485,7 @@ const restCollectionDispatchers = defineDispatchers({
return {}
}
- const [removed] = targetLocation.requests.splice(requestIndex, 1)
-
- targetLocation.requests.splice(destinationRequestIndex, 0, removed)
+ reorderItems(targetLocation.requests, requestIndex, destinationRequestIndex)
return {
state: newState,
diff --git a/packages/hoppscotch-common/src/newstore/reordering.ts b/packages/hoppscotch-common/src/newstore/reordering.ts
new file mode 100644
index 000000000..ecf1048d4
--- /dev/null
+++ b/packages/hoppscotch-common/src/newstore/reordering.ts
@@ -0,0 +1,46 @@
+import { distinctUntilChanged, pluck } from "rxjs"
+import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
+
+type ReorderingItem =
+ | { type: "collection"; id: string; parentID: string | null }
+ | { type: "request"; id: string; parentID: string | null }
+
+type CurrentReorderingState = {
+ currentReorderingItem: ReorderingItem
+}
+
+const initialState: CurrentReorderingState = {
+ currentReorderingItem: {
+ type: "collection",
+ id: "",
+ parentID: "",
+ },
+}
+
+const dispatchers = defineDispatchers({
+ changeCurrentReorderStatus(
+ _,
+ { reorderItem }: { reorderItem: ReorderingItem }
+ ) {
+ return {
+ currentReorderingItem: reorderItem,
+ }
+ },
+})
+
+export const currentReorderStore = new DispatchingStore(
+ initialState,
+ dispatchers
+)
+
+export const currentReorderingStatus$ = currentReorderStore.subject$.pipe(
+ pluck("currentReorderingItem"),
+ distinctUntilChanged()
+)
+
+export function changeCurrentReorderStatus(reorderItem: ReorderingItem) {
+ currentReorderStore.dispatch({
+ dispatcher: "changeCurrentReorderStatus",
+ payload: { reorderItem },
+ })
+}
From 1372681b8768b219f2ad953b3d64b59ae24c8a7d Mon Sep 17 00:00:00 2001
From: Akash K <57758277+amk-dev@users.noreply.github.com>
Date: Tue, 14 Mar 2023 14:16:45 +0530
Subject: [PATCH 2/3] refactor: store changes for collections (#2947)
---
.../hoppscotch-common/src/newstore/collections.ts | 15 +++++++++------
1 file changed, 9 insertions(+), 6 deletions(-)
diff --git a/packages/hoppscotch-common/src/newstore/collections.ts b/packages/hoppscotch-common/src/newstore/collections.ts
index 0068e24db..39c3e0c91 100644
--- a/packages/hoppscotch-common/src/newstore/collections.ts
+++ b/packages/hoppscotch-common/src/newstore/collections.ts
@@ -31,7 +31,7 @@ const defaultGraphqlCollectionState = {
type RESTCollectionStoreType = typeof defaultRESTCollectionState
type GraphqlCollectionStoreType = typeof defaultGraphqlCollectionState
-function navigateToFolderWithIndexPath(
+export function navigateToFolderWithIndexPath(
collections: HoppCollection[],
indexPaths: number[]
) {
@@ -97,12 +97,15 @@ const restCollectionDispatchers = defineDispatchers({
{ state }: RESTCollectionStoreType,
{
collectionIndex,
- collection,
- }: { collectionIndex: number; collection: HoppCollection }
+ partialCollection,
+ }: {
+ collectionIndex: number
+ partialCollection: Partial>
+ }
) {
return {
state: state.map((col, index) =>
- index === collectionIndex ? collection : col
+ index === collectionIndex ? { ...col, ...partialCollection } : col
),
}
},
@@ -824,13 +827,13 @@ export function getRESTCollection(collectionIndex: number) {
export function editRESTCollection(
collectionIndex: number,
- collection: HoppCollection
+ partialCollection: Partial>
) {
restCollectionStore.dispatch({
dispatcher: "editCollection",
payload: {
collectionIndex,
- collection,
+ partialCollection: partialCollection,
},
})
}
From 1583c86c78422bbaed126b77e8c66ed6c6a73480 Mon Sep 17 00:00:00 2001
From: Andrew Bastin
Date: Tue, 14 Mar 2023 22:32:28 +0530
Subject: [PATCH 3/3] chore: add dotenv as dev dependency to fix staging issues
---
packages/hoppscotch-common/package.json | 3 +-
pnpm-lock.yaml | 37 ++++++++++++++-----------
2 files changed, 23 insertions(+), 17 deletions(-)
diff --git a/packages/hoppscotch-common/package.json b/packages/hoppscotch-common/package.json
index 57e35b399..4263f0dab 100644
--- a/packages/hoppscotch-common/package.json
+++ b/packages/hoppscotch-common/package.json
@@ -31,9 +31,9 @@
"@codemirror/state": "^6.1.0",
"@codemirror/view": "^6.0.2",
"@hoppscotch/codemirror-lang-graphql": "workspace:^0.2.0",
- "@hoppscotch/ui": "workspace:^0.0.1",
"@hoppscotch/data": "workspace:^0.4.4",
"@hoppscotch/js-sandbox": "workspace:^2.1.0",
+ "@hoppscotch/ui": "workspace:^0.0.1",
"@hoppscotch/vue-toasted": "^0.1.0",
"@lezer/highlight": "^1.0.0",
"@sentry/tracing": "^7.13.0",
@@ -125,6 +125,7 @@
"@vue/eslint-config-typescript": "^11.0.1",
"@vue/runtime-core": "^3.2.39",
"cross-env": "^7.0.3",
+ "dotenv": "^16.0.3",
"eslint": "^8.24.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.5.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 85be2f416..cd8400376 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -153,6 +153,7 @@ importers:
axios: ^0.21.4
buffer: ^6.0.3
cross-env: ^7.0.3
+ dotenv: ^16.0.3
eslint: ^8.24.0
eslint-plugin-prettier: ^4.2.1
eslint-plugin-vue: ^9.5.1
@@ -328,6 +329,7 @@ importers:
'@vue/eslint-config-typescript': 11.0.1_kpxf5iryryrlim2ejhkirkiuey
'@vue/runtime-core': 3.2.39
cross-env: 7.0.3
+ dotenv: 16.0.3
eslint: 8.24.0
eslint-plugin-prettier: 4.2.1_eslint@8.24.0
eslint-plugin-vue: 9.5.1_eslint@8.24.0
@@ -345,7 +347,7 @@ importers:
vite-plugin-inspect: 0.7.4_vite@3.1.4
vite-plugin-pages: 0.26.0_vnheu5mvzzbfbuhqo4shkhdhei
vite-plugin-pages-sitemap: 1.4.0
- vite-plugin-pwa: 0.13.1_vite@3.1.4
+ vite-plugin-pwa: 0.13.1_bg4cnt4dy3xq3a47wkujd6ryzq
vite-plugin-vue-layouts: 0.7.0_oewzdqozxqnqgsrjzmwikx34vi
vite-plugin-windicss: 1.8.8_vite@3.1.4
vue-tsc: 0.38.2_typescript@4.7.4
@@ -3215,7 +3217,7 @@ packages:
'@types/jsonwebtoken': 8.5.8
chalk: 4.1.2
debug: 4.3.4
- dotenv: 16.0.1
+ dotenv: 16.0.3
graphql: 15.8.0
graphql-request: 4.3.0_graphql@15.8.0
http-proxy-agent: 5.0.0
@@ -3515,8 +3517,8 @@ packages:
yaml-eslint-parser: 0.3.2
dev: true
- /@intlify/bundle-utils/4.0.0_vue-i18n@9.2.2:
- resolution: {integrity: sha512-klXrYT9VXyKEXsD6UY3pShg0O5MPC07n0TZ5RrSs5ry6T1eZVolIFGJi9c3qcDrh1qjJxgikRnPBmD7qGDqbjw==}
+ /@intlify/bundle-utils/5.2.0_vue-i18n@9.2.2:
+ resolution: {integrity: sha512-rIfoNUTBoZK6IfaEeuoYMQZSuAXhPyZoy+UsdZj+V4eM632ynN1bGt5ttkpGO8xe0c+esfYslgJxBz//bdu4qg==}
engines: {node: '>= 12'}
peerDependencies:
petite-vue-i18n: '*'
@@ -3529,6 +3531,8 @@ packages:
dependencies:
'@intlify/message-compiler': 9.3.0-beta.16
'@intlify/shared': 9.3.0-beta.16
+ acorn: 8.8.2
+ estree-walker: 2.0.2
jsonc-eslint-parser: 1.4.1
source-map: 0.6.1
vue-i18n: 9.2.2_vue@3.2.37
@@ -3589,7 +3593,7 @@ packages:
vue-i18n:
optional: true
dependencies:
- '@intlify/bundle-utils': 4.0.0_vue-i18n@9.2.2
+ '@intlify/bundle-utils': 5.2.0_vue-i18n@9.2.2
'@intlify/shared': 9.3.0-beta.16
'@rollup/pluginutils': 4.2.1
debug: 4.3.4
@@ -5725,7 +5729,7 @@ packages:
dev: true
/after/0.8.2:
- resolution: {integrity: sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==}
+ resolution: {integrity: sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=}
dev: false
/agent-base/6.0.2:
@@ -6082,7 +6086,7 @@ packages:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
/base64-arraybuffer/0.1.4:
- resolution: {integrity: sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==}
+ resolution: {integrity: sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=}
engines: {node: '>= 0.6.0'}
dev: false
@@ -6544,7 +6548,7 @@ packages:
dev: true
/component-bind/1.0.0:
- resolution: {integrity: sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==}
+ resolution: {integrity: sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=}
dev: false
/component-emitter/1.3.0:
@@ -6552,7 +6556,7 @@ packages:
dev: false
/component-inherit/0.0.3:
- resolution: {integrity: sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==}
+ resolution: {integrity: sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=}
dev: false
/concat-map/0.0.1:
@@ -7027,8 +7031,8 @@ packages:
is-obj: 2.0.0
dev: true
- /dotenv/16.0.1:
- resolution: {integrity: sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==}
+ /dotenv/16.0.3:
+ resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
engines: {node: '>=12'}
dev: true
@@ -8956,7 +8960,7 @@ packages:
dev: false
/has-cors/1.1.0:
- resolution: {integrity: sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==}
+ resolution: {integrity: sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=}
dev: false
/has-flag/3.0.0:
@@ -9260,7 +9264,7 @@ packages:
engines: {node: '>=8'}
/indexof/0.0.1:
- resolution: {integrity: sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==}
+ resolution: {integrity: sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=}
dev: false
/inflight/1.0.6:
@@ -12955,7 +12959,7 @@ packages:
dev: true
/to-array/0.1.4:
- resolution: {integrity: sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A==}
+ resolution: {integrity: sha1-F+bBH3PdTz10zaek/zI46a2b+JA=}
dev: false
/to-fast-properties/2.0.0:
@@ -14025,10 +14029,11 @@ packages:
- supports-color
dev: true
- /vite-plugin-pwa/0.13.1_vite@3.1.4:
+ /vite-plugin-pwa/0.13.1_bg4cnt4dy3xq3a47wkujd6ryzq:
resolution: {integrity: sha512-NR3dIa+o2hzlzo4lF4Gu0cYvoMjSw2DdRc6Epw1yjmCqWaGuN86WK9JqZie4arNlE1ZuWT3CLiMdiX5wcmmUmg==}
peerDependencies:
vite: ^3.1.0
+ workbox-window: ^6.5.4
dependencies:
debug: 4.3.4
fast-glob: 3.2.11
@@ -15082,7 +15087,7 @@ packages:
dev: false
/yeast/0.1.2:
- resolution: {integrity: sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==}
+ resolution: {integrity: sha1-AI4G2AlDIMNy28L47XagymyKxBk=}
dev: false
/yn/3.1.1: