From 41850d391c0b88f2e4409978f7462176221cc668 Mon Sep 17 00:00:00 2001 From: Benedikt Kulmann Date: Tue, 13 Jun 2023 09:55:40 +0200 Subject: [PATCH] feat: enforce prefix for persisted route query values --- .../enhancement-streamline-url-query-params | 5 +++++ .../src/components/AppTemplate.vue | 4 +--- .../src/components/Groups/GroupsList.vue | 7 +++++-- .../src/components/Spaces/SpacesList.vue | 4 ++-- .../src/components/Users/UsersList.vue | 4 ++-- .../web-app-admin-settings/src/defaults/index.ts | 2 +- .../web-app-files/src/components/AppBar/AppBar.vue | 1 + .../useResourcesViewDefaults.ts | 2 +- packages/web-pkg/src/components/ViewOptions.vue | 7 ++++++- .../src/composables/pagination/usePagination.ts | 12 +++++++++--- .../src/composables/router/useRouteQueryPersisted.ts | 7 +++---- packages/web-pkg/src/composables/sort/useSort.ts | 4 ++-- .../composables/pagination/usePagination.spec.ts | 3 ++- 13 files changed, 40 insertions(+), 22 deletions(-) create mode 100644 changelog/unreleased/enhancement-streamline-url-query-params diff --git a/changelog/unreleased/enhancement-streamline-url-query-params b/changelog/unreleased/enhancement-streamline-url-query-params new file mode 100644 index 00000000000..7b62d3cfcb1 --- /dev/null +++ b/changelog/unreleased/enhancement-streamline-url-query-params @@ -0,0 +1,5 @@ +Enhancement: Streamline URL query names + +We've used different URL query names for the pagination in the files app (`items-per-page`) and admin-settings app (`admin-settings-items-per-page`). We've streamlined this to use the same query name in all apps and still keep the possibility to have independent page sizes in different apps. + +https://github.com/owncloud/web/pull/9226 diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue index 5b07a8814e6..63dbbe0887f 100644 --- a/packages/web-app-admin-settings/src/components/AppTemplate.vue +++ b/packages/web-app-admin-settings/src/components/AppTemplate.vue @@ -19,8 +19,8 @@ :has-file-extensions="false" :has-pagination="true" :pagination-options="paginationOptions" - :per-page-query-name="perPageQueryName" :per-page-default="perPageDefault" + per-page-storage-prefix="admin-settings" /> import { - perPageQueryName, perPageDefault, paginationOptions } from 'web-app-admin-settings/src/defaults' @@ -201,7 +200,6 @@ export default defineComponent({ ...useAppDefaults({ applicationId: 'admin-settings' }), - perPageQueryName, perPageDefault, paginationOptions } diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue index de3863346da..cee27ae8b8b 100644 --- a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue +++ b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue @@ -125,7 +125,10 @@ import { useGettext } from 'vue3-gettext' import { defaultFuseOptions } from 'web-pkg/src/helpers' import { useFileListHeaderPosition, usePagination } from 'web-pkg/src/composables' import Pagination from 'web-pkg/src/components/Pagination.vue' -import { perPageDefault, perPageQueryName } from 'web-app-admin-settings/src/defaults' +import { + perPageDefault, + perPageStoragePrefix +} from 'web-app-admin-settings/src/defaults' export default defineComponent({ name: 'GroupsList', @@ -228,7 +231,7 @@ export default defineComponent({ items: paginatedItems, page: currentPage, total: totalPages - } = usePagination({ items, perPageDefault, perPageQueryName }) + } = usePagination({ items, perPageDefault, perPageStoragePrefix }) watch(currentPage, () => { emit('unSelectAllGroups') diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue index f9888810c89..9def78bb585 100644 --- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue +++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue @@ -141,7 +141,7 @@ import { usePagination } from 'web-pkg/src/composables' import Pagination from 'web-pkg/src/components/Pagination.vue' -import { perPageDefault, perPageQueryName } from 'web-app-admin-settings/src/defaults' +import { perPageDefault, perPageStoragePrefix } from 'web-app-admin-settings/src/defaults' export default defineComponent({ name: 'SpacesList', @@ -229,7 +229,7 @@ export default defineComponent({ items: paginatedItems, page: currentPage, total: totalPages - } = usePagination({ items, perPageDefault, perPageQueryName }) + } = usePagination({ items, perPageDefault, perPageStoragePrefix }) watch(currentPage, () => { emit('unSelectAllSpaces') diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue index 96fe4a823cf..08e3c811669 100644 --- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue +++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue @@ -122,7 +122,7 @@ import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue' import { useFileListHeaderPosition, usePagination } from 'web-pkg/src/composables' import Pagination from 'web-pkg/src/components/Pagination.vue' import { computed } from 'vue' -import { perPageDefault, perPageQueryName } from 'web-app-admin-settings/src/defaults' +import { perPageDefault, perPageStoragePrefix } from 'web-app-admin-settings/src/defaults' export default defineComponent({ name: 'UsersList', @@ -265,7 +265,7 @@ export default defineComponent({ items: paginatedItems, page: currentPage, total: totalPages - } = usePagination({ items, perPageDefault, perPageQueryName }) + } = usePagination({ items, perPageDefault, perPageStoragePrefix }) watch(currentPage, () => { emit('unSelectAllUsers') diff --git a/packages/web-app-admin-settings/src/defaults/index.ts b/packages/web-app-admin-settings/src/defaults/index.ts index 91b1b47c1db..45c8404d0f3 100644 --- a/packages/web-app-admin-settings/src/defaults/index.ts +++ b/packages/web-app-admin-settings/src/defaults/index.ts @@ -1,4 +1,4 @@ export const supportedLogoMimeTypes = ['image/gif', 'image/jpeg', 'image/png'] export const perPageDefault = '50' -export const perPageQueryName = 'admin-settings-items-per-page' +export const perPageStoragePrefix = 'admin-settings' export const paginationOptions = ['20', '50', '100', '250'] diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue index 5fe0e79e250..f160e39f7f9 100644 --- a/packages/web-app-files/src/components/AppBar/AppBar.vue +++ b/packages/web-app-files/src/components/AppBar/AppBar.vue @@ -41,6 +41,7 @@ :has-hidden-files="hasHiddenFiles" :has-file-extensions="hasFileExtensions" :has-pagination="hasPagination" + per-page-storage-prefix="files" /> diff --git a/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts b/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts index 50ec7fa4d23..da03eaf25c0 100644 --- a/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts +++ b/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts @@ -86,7 +86,7 @@ export const useResourcesViewDefaults = ( items: paginatedResources, total: paginationPages, page: paginationPage - } = usePagination({ items }) + } = usePagination({ items, perPageStoragePrefix: 'files' }) useMutationSubscription(['Files/UPSERT_RESOURCE'], async ({ payload }) => { await nextTick() diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue index 554e24d52f7..8e020965bb9 100644 --- a/packages/web-pkg/src/components/ViewOptions.vue +++ b/packages/web-pkg/src/components/ViewOptions.vue @@ -120,6 +120,10 @@ export default defineComponent({ type: String, default: PaginationConstants.perPageDefault }, + perPageStoragePrefix: { + type: String, + required: true + }, viewModes: { type: Array as PropType, default: () => [] @@ -141,7 +145,8 @@ export default defineComponent({ }) const itemsPerPageQuery = useRouteQueryPersisted({ name: props.perPageQueryName, - defaultValue: props.perPageDefault + defaultValue: props.perPageDefault, + storagePrefix: props.perPageStoragePrefix }) const viewModeQuery = useRouteQueryPersisted({ name: ViewModeConstants.queryName, diff --git a/packages/web-pkg/src/composables/pagination/usePagination.ts b/packages/web-pkg/src/composables/pagination/usePagination.ts index d55d057fb12..7524e7e731c 100644 --- a/packages/web-pkg/src/composables/pagination/usePagination.ts +++ b/packages/web-pkg/src/composables/pagination/usePagination.ts @@ -1,7 +1,11 @@ import { computed, ComputedRef, unref } from 'vue' import { MaybeRef } from 'web-pkg/src/utils' -import { queryItemAsString, useRouteQuery, useRouteQueryPersisted } from 'web-pkg/src/composables' -import { PaginationConstants } from './constants' +import { + queryItemAsString, + useRouteQuery, + useRouteQueryPersisted, + PaginationConstants +} from 'web-pkg' interface PaginationOptions { items: MaybeRef> @@ -9,6 +13,7 @@ interface PaginationOptions { perPage?: MaybeRef perPageDefault?: string perPageQueryName?: string + perPageStoragePrefix: string } interface PaginationResult { @@ -59,7 +64,8 @@ function createPerPageRef(options: PaginationOptions): ComputedRef const perPageQuery = useRouteQueryPersisted({ name: options.perPageQueryName || PaginationConstants.perPageQueryName, - defaultValue: options.perPageDefault || PaginationConstants.perPageDefault + defaultValue: options.perPageDefault || PaginationConstants.perPageDefault, + storagePrefix: options.perPageStoragePrefix }) return computed(() => parseInt(queryItemAsString(unref(perPageQuery)))) } diff --git a/packages/web-pkg/src/composables/router/useRouteQueryPersisted.ts b/packages/web-pkg/src/composables/router/useRouteQueryPersisted.ts index 1ff190ad099..0a5ad57c55e 100644 --- a/packages/web-pkg/src/composables/router/useRouteQueryPersisted.ts +++ b/packages/web-pkg/src/composables/router/useRouteQueryPersisted.ts @@ -1,12 +1,11 @@ import { Ref, watch, unref } from 'vue' -import { useRouteQuery } from './useRouteQuery' +import { useLocalStorage, useRouteQuery } from 'web-pkg' import { QueryValue } from './types' -import { useLocalStorage } from '../localStorage' export interface RouteQueryPersistedOptions { name: string defaultValue: QueryValue - routeName?: string + storagePrefix?: string } interface WatcherValue { @@ -50,5 +49,5 @@ export const useRouteQueryPersisted = (options: RouteQueryPersistedOptions): Ref } const localStorageKey = (options: RouteQueryPersistedOptions): string => { - return ['oc_options', options.routeName, options.name].filter(Boolean).join('_') + return ['oc-options', options.storagePrefix, options.name].filter(Boolean).join('_') } diff --git a/packages/web-pkg/src/composables/sort/useSort.ts b/packages/web-pkg/src/composables/sort/useSort.ts index 2db4f79b9b2..652cf131299 100644 --- a/packages/web-pkg/src/composables/sort/useSort.ts +++ b/packages/web-pkg/src/composables/sort/useSort.ts @@ -96,7 +96,7 @@ function createSortByQueryRef(options: SortOptions): Ref { return useRouteQueryPersisted({ name: unref(options.sortByQueryName) || SortConstants.sortByQueryName, defaultValue: unref(firstSortableField(unref(options.fields))?.name), - routeName: unref(options.routeName) || unref(useRouteName()) + storagePrefix: unref(options.routeName) || unref(useRouteName()) }) } @@ -108,7 +108,7 @@ function createSortDirQueryRef(options: SortOptions): Ref { return useRouteQueryPersisted({ name: unref(options.sortDirQueryName) || SortConstants.sortDirQueryName, defaultValue: unref(firstSortableField(unref(options.fields))?.sortDir), - routeName: unref(options.routeName) || unref(useRouteName()) + storagePrefix: unref(options.routeName) || unref(useRouteName()) }) } diff --git a/packages/web-pkg/tests/unit/composables/pagination/usePagination.spec.ts b/packages/web-pkg/tests/unit/composables/pagination/usePagination.spec.ts index f7853063b7c..01f6ce92c1b 100644 --- a/packages/web-pkg/tests/unit/composables/pagination/usePagination.spec.ts +++ b/packages/web-pkg/tests/unit/composables/pagination/usePagination.spec.ts @@ -56,7 +56,8 @@ function getWrapper({ const instance = usePagination({ items: ref(items), page: currentPage, - perPage: itemsPerPage + perPage: itemsPerPage, + perPageStoragePrefix: 'unit-tests' }) setup(instance) })