diff --git a/packages/insomnia/src/common/constants.ts b/packages/insomnia/src/common/constants.ts index 1735cee3566..261816ed19b 100644 --- a/packages/insomnia/src/common/constants.ts +++ b/packages/insomnia/src/common/constants.ts @@ -337,6 +337,36 @@ export const sortOrderName: Record = { [SORT_TYPE_ASC]: 'Requests First', }; +export type CollectionSortOrder = + | 'name-asc' + | 'name-desc' + | 'created-asc' + | 'created-desc' + | 'http-method' + | 'type-desc' + | 'type-asc' + | 'type-manual'; +export const COLLECTION_SORT_ORDERS = [ + SORT_TYPE_MANUAL, + SORT_NAME_ASC, + SORT_NAME_DESC, + SORT_CREATED_ASC, + SORT_CREATED_DESC, + SORT_HTTP_METHOD, + SORT_TYPE_DESC, + SORT_TYPE_ASC, +] as const; +export const collectionSortOrderName: Record = { + [SORT_TYPE_MANUAL]: 'Manual', + [SORT_NAME_ASC]: 'Name Ascending (A-Z)', + [SORT_NAME_DESC]: 'Name Descending (Z-A)', + [SORT_CREATED_ASC]: 'Oldest First', + [SORT_CREATED_DESC]: 'Newest First', + [SORT_HTTP_METHOD]: 'HTTP Method', + [SORT_TYPE_DESC]: 'Folders First', + [SORT_TYPE_ASC]: 'Requests First', +}; + export type DashboardSortOrder = | 'name-asc' | 'name-desc' diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx index bd73f89333f..d836e776a4e 100644 --- a/packages/insomnia/src/ui/routes/debug.tsx +++ b/packages/insomnia/src/ui/routes/debug.tsx @@ -40,12 +40,14 @@ import { useRouteLoaderData, useSearchParams, } from 'react-router-dom'; +import { useLocalStorage } from 'react-use'; -import { DEFAULT_SIDEBAR_SIZE, getProductName, SORT_ORDERS, type SortOrder, sortOrderName } from '../../common/constants'; +import { type CollectionSortOrder, collectionSortOrderName, DEFAULT_SIDEBAR_SIZE, getProductName, SORT_NAME_ASC, SORT_ORDERS } from '../../common/constants'; import { type ChangeBufferEvent, database as db } from '../../common/database'; import { generateId, isNotNullOrUndefined } from '../../common/misc'; import { LandingPage } from '../../common/sentry'; import type { PlatformKeyCombinations } from '../../common/settings'; +import { sortMethodMap } from '../../common/sorting'; import type { GrpcMethodInfo } from '../../main/ipc/grpc'; import * as models from '../../models'; import type { Environment } from '../../models/environment'; @@ -448,7 +450,7 @@ export const Debug: FC = () => { const [searchParams, setSearchParams] = useSearchParams(); - const sortOrder = searchParams.get('sortOrder') as SortOrder || 'type-manual'; + const [sortOrder, setSortOrder] = useLocalStorage(`${projectId}:collection-sort-order`, SORT_NAME_ASC); const { hotKeyRegistry } = settings; const createRequest = ({ requestType, parentId, req }: { requestType: CreateRequestType; parentId: string; req?: Partial }) => @@ -684,7 +686,7 @@ export const Debug: FC = () => { const toggleExpandAllFetcher = useFetcher(); - const visibleCollection = collection.filter(item => !item.hidden); + const visibleCollection = collection.filter(item => !item.hidden).sort((a, b) => sortMethodMap[sortOrder as CollectionSortOrder](a.doc, b.doc));; const parentRef = useRef(null); const virtualizer = useVirtualizer({ @@ -816,12 +818,7 @@ export const Debug: FC = () => { aria-label="Sort order" className="h-full aspect-square" selectedKey={sortOrder} - onSelectionChange={order => - setSearchParams({ - ...Object.fromEntries(searchParams.entries()), - sortOrder: order.toString(), - }) - } + onSelectionChange={order => setSortOrder(order as CollectionSortOrder)} >