Fix collection sorting for grouped collections

.changeset/shy-taxis-fly.md

@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Fixed sorting order of collection for grouped collections

app/src/interfaces/_system/system-collection/system-collection.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useCollectionsStore } from '@/stores/collections';
-import { isSystemCollection } from '@directus/system-data';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -23,16 +22,13 @@ const { t } = useI18n();
 const collectionsStore = useCollectionsStore();
 
 const collections = computed(() => {
-	let collections = collectionsStore.collections;
+	let collections = collectionsStore.allCollections;
 
 	if (!props.includeSingleton) {
 		collections = collections.filter((collection) => collection?.meta?.singleton === false);
 	}
 
-	return [
-		...collections.filter((collection) => isSystemCollection(collection.collection) === false),
-		...(props.includeSystem ? collectionsStore.crudSafeSystemCollections : []),
-	];
+	return [...collections, ...(props.includeSystem ? collectionsStore.crudSafeSystemCollections : [])];
 });
 
 const items = computed(() => {

app/src/interfaces/_system/system-collections/system-collections.vue

@@ -23,7 +23,7 @@ const { t } = useI18n();
 const collectionsStore = useCollectionsStore();
 
 const collections = computed(() => {
-	let collections = collectionsStore.collections.filter((collection) => collection.type === 'table');
+	let collections = collectionsStore.sortedCollections.filter((collection) => collection.type === 'table');
 
 	if (!props.includeSingleton) {
 		collections = collections.filter((collection) => collection?.meta?.singleton === false);

app/src/modules/content/components/navigation-item.vue

@@ -5,7 +5,7 @@
 import { Collection } from '@/types/collections';
 import { getCollectionRoute } from '@/utils/get-route';
 import { Preset } from '@directus/types';
 import { orderBy } from 'lodash';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import NavigationBookmark from './navigation-bookmark.vue';
@@ -74,15 +74,15 @@
 const hasContextMenu = computed(() => isAdmin && props.collection.type === 'table');
 
 function getChildCollections(collection: Collection) {
-	let collections = collectionsStore.collections.filter(
+	let collections = collectionsStore.sortedCollections.filter(
 		(childCollection) => childCollection.meta?.group === collection.collection,
 	);
 
 	if (props.showHidden === false) {
 		collections = collections.filter((collection) => collection.meta?.hidden !== true);
 	}
 
-	return orderBy(collections, ['meta.sort', 'collection']);
+	return collections;
 }
 
 function getChildBookmarks(collection: Collection) {

app/src/modules/content/composables/use-navigation.ts

@@ -9,7 +9,7 @@ export function useNavigation(currentCollection?: Ref<string | undefined>) {
 
 	if (!activeGroups) {
 		activeGroups = ref(
-			collectionsStore.collections
+			collectionsStore.sortedCollections
 				.filter((collection) => collection.meta?.collapse === 'open' || collection.meta?.collapse === 'locked')
 				.map(({ collection }) => collection),
 		);

app/src/modules/content/index.ts

@@ -67,11 +67,8 @@ export default defineModule({
 
 				if (collectionsStore.visibleCollections.length === 0) return;
 
-				const rootCollections = orderBy(
-					collectionsStore.visibleCollections.filter((collection) => {
-						return isNil(collection?.meta?.group);
-					}),
-					['meta.sort', 'collection'],
+				const rootCollections = collectionsStore.visibleCollections.filter((collection) =>
+					isNil(collection?.meta?.group),
 				);
 
 				const { data } = useLocalStorage('last-accessed-collection');

app/src/modules/settings/routes/data-model/collections/collections.vue

@@ -5,7 +5,7 @@
 import { translate } from '@/utils/translate-object-values';
 import { unexpectedError } from '@/utils/unexpected-error';
 import SearchInput from '@/views/private/components/search-input.vue';
 import { merge, sortBy } from 'lodash';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Draggable from 'vuedraggable';
@@ -13,7 +13,6 @@
 import CollectionDialog from './components/collection-dialog.vue';
 import CollectionItem from './components/collection-item.vue';
 import CollectionOptions from './components/collection-options.vue';
-import { isSystemCollection } from '@directus/system-data';
 
 const { t } = useI18n();
 
@@ -23,16 +22,7 @@
 
 const collectionsStore = useCollectionsStore();
 
-const collections = computed(() => {
-	return translate(
-		sortBy(
-			collectionsStore.collections.filter(
-				(collection) => isSystemCollection(collection.collection) === false && collection.meta,
-			),
-			['meta.sort', 'collection'],
-		),
-	);
-});
+const collections = computed(() => translate(collectionsStore.configuredCollections));
 
 const rootCollections = computed(() => {
 	return collections.value.filter((collection) => !collection.meta?.group);
@@ -58,7 +48,9 @@
 	const propagateBackwards: CollectionTree[] = [];
 
 	function makeTree(parent: string | null = null): CollectionTree[] {
-		const children = collectionsStore.collections.filter((collection) => (collection.meta?.group ?? null) === parent);
+		const children = collectionsStore.sortedCollections.filter(
+			(collection) => (collection.meta?.group ?? null) === parent,
+		);
 
 		const normalizedSearch = search.value?.toLowerCase();
 
@@ -94,28 +86,13 @@
 	return tree;
 });
 
-const tableCollections = computed(() => {
-	return translate(
-		sortBy(
-			collectionsStore.collections.filter(
-				(collection) =>
-					isSystemCollection(collection.collection) === false && !!collection.meta === false && collection.schema,
-			),
-			['meta.sort', 'collection'],
-		),
-	);
-});
+const tableCollections = computed(() =>
+	translate(collectionsStore.databaseCollections.filter((collection) => !collection.meta)),
+);
 
-const systemCollections = computed(() => {
-	return translate(
-		sortBy(
-			collectionsStore.collections
-				.filter((collection) => isSystemCollection(collection.collection) === true)
-				.map((collection) => ({ ...collection, icon: 'settings' })),
-			'collection',
-		),
-	);
-});
+const systemCollections = computed(() =>
+	translate(collectionsStore.systemCollections.map((collection) => ({ ...collection, icon: 'settings' }))),
+);
 
 async function onSort(updates: Collection[], removeGroup = false) {
 	const updatesWithSortValue = updates.map((collection, index) =>

app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue

@@ -2,7 +2,6 @@
 import { useCollectionsStore } from '@/stores/collections';
 import { useFieldsStore } from '@/stores/fields';
 import { useRelationsStore } from '@/stores/relations';
-import { orderBy } from 'lodash';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -34,10 +33,7 @@ const currentPrimaryKey = computed(() => fieldsStore.getPrimaryKeyFieldForCollec
 
 const availableCollections = computed(() => {
 	return [
-		...orderBy(
-			collectionsStore.databaseCollections.filter((collection) => collection.meta),
-			['meta.sort', 'collection'],
-		),
+		...collectionsStore.configuredCollections,
 		{
 			divider: true,
 		},

app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/relationship-configuration.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useCollectionsStore } from '@/stores/collections';
 import { LOCAL_TYPES } from '@directus/constants';
-import { orderBy } from 'lodash';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import RelatedCollectionSelect from '../shared/related-collection-select.vue';
@@ -22,10 +21,7 @@ const oneAllowedCollections = syncFieldDetailStoreProperty('relations.m2o.meta.o
 
 const availableCollections = computed(() => {
 	return [
-		...orderBy(
-			collectionsStore.databaseCollections.filter((collection) => collection.meta),
-			['meta.sort', 'collection'],
-		),
+		...collectionsStore.configuredCollections,
 		{
 			divider: true,
 		},

app/src/modules/settings/routes/data-model/field-detail/shared/related-collection-select.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useCollectionsStore } from '@/stores/collections';
-import { orderBy } from 'lodash';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -18,14 +17,8 @@ const collectionExists = computed(() => {
 	return !!collectionsStore.getCollection(props.modelValue);
 });
 
-const availableCollections = computed(() => {
-	return orderBy(
-		collectionsStore.databaseCollections.filter((collection) => collection.meta),
-		['meta.sort', 'collection'],
-	);
-});
-
-const systemCollections = collectionsStore.crudSafeSystemCollections;
+const availableCollections = computed(() => collectionsStore.configuredCollections);
+const systemCollections = computed(() => collectionsStore.crudSafeSystemCollections);
 </script>
 
 <template>

app/src/modules/settings/routes/presets/item.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { flattenGroupedCollections } from '@/utils/flatten-grouped-collections';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -325,7 +326,7 @@
 			meta: {
 				interface: 'select-dropdown',
 				options: {
-					choices: collectionsStore.collections
+					choices: collectionsStore.sortedCollections
 						.map((collection) => ({
 							text: collection.collection,
 							value: collection.collection,

app/src/modules/settings/routes/roles/item/components/permissions-overview.vue

@@ -4,7 +4,6 @@ import { useCollectionsStore } from '@/stores/collections';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { appAccessMinimalPermissions, isSystemCollection } from '@directus/system-data';
 import { Permission } from '@directus/types';
-import { orderBy } from 'lodash';
 import { computed, provide, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { appRecommendedPermissions, disabledActions } from '../../app-permissions';
@@ -22,14 +21,8 @@ const { t } = useI18n();
 
 const collectionsStore = useCollectionsStore();
 
-const regularCollections = computed(() => orderBy(collectionsStore.databaseCollections, ['meta.sort', 'collection']));
-
-const systemCollections = computed(() =>
-	orderBy(
-		collectionsStore.collections.filter((collection) => isSystemCollection(collection.collection) === true),
-		'name',
-	),
-);
+const regularCollections = computed(() => collectionsStore.databaseCollections);
+const systemCollections = computed(() => collectionsStore.systemCollections);
 
 const systemVisible = ref(false);
 

app/src/stores/collections.ts

@@ -2,13 +2,14 @@ import api from '@/api';
 import { COLLECTIONS_DENY_LIST } from '@/constants';
 import { i18n } from '@/lang';
 import { Collection } from '@/types/collections';
+import { flattenGroupedCollections } from '@/utils/flatten-grouped-collections';
 import { getLiteralInterpolatedTranslation } from '@/utils/get-literal-interpolated-translation';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 import formatTitle from '@directus/format-title';
 import { Collection as CollectionRaw, DeepPartial, Field } from '@directus/types';
 import { getCollectionType } from '@directus/utils';
-import { isEqual, isNil, omit, orderBy } from 'lodash';
+import { isEqual, isNil, omit } from 'lodash';
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
 import { useRelationsStore } from './relations';
@@ -17,30 +18,36 @@ import { isSystemCollection } from '@directus/system-data';
 export const useCollectionsStore = defineStore('collectionsStore', () => {
 	const collections = ref<Collection[]>([]);
 
-	const visibleCollections = computed(() =>
-		collections.value
-			.filter(({ collection }) => isSystemCollection(collection) === false)
-			.filter((collection) => collection.meta && collection.meta?.hidden !== true),
+	const sortedCollections = computed(() => flattenGroupedCollections(collections.value));
+
+	const systemCollections = computed(() =>
+		sortedCollections.value.filter(({ collection }) => isSystemCollection(collection)),
 	);
 
 	const allCollections = computed(() =>
-		collections.value.filter(({ collection }) => isSystemCollection(collection) === false),
+		sortedCollections.value.filter(({ collection }) => isSystemCollection(collection) === false),
+	);
+
+	const configuredCollections = computed(() => allCollections.value.filter((collection) => collection.meta));
+
+	const visibleCollections = computed(() =>
+		configuredCollections.value.filter((collection) => collection.meta?.hidden !== true),
 	);
 
 	const databaseCollections = computed(() => allCollections.value.filter((collection) => collection.schema));
 
 	const crudSafeSystemCollections = computed(() =>
-		orderBy(
-			collections.value.filter((collection) => isSystemCollection(collection.collection)),
-			'collection',
-		).filter((collection) => COLLECTIONS_DENY_LIST.includes(collection.collection) === false),
+		systemCollections.value.filter((collection) => !COLLECTIONS_DENY_LIST.includes(collection.collection)),
 	);
 
 	return {
 		collections,
-		visibleCollections,
+		sortedCollections,
 		allCollections,
+		visibleCollections,
+		configuredCollections,
 		databaseCollections,
+		systemCollections,
 		crudSafeSystemCollections,
 		hydrate,
 		dehydrate,

app/src/utils/flatten-grouped-collection.test.ts

@@ -0,0 +1,43 @@
+import { flattenGroupedCollections } from '@/utils/flatten-grouped-collections';
+import { Collection } from '@/types/collections';
+import { describe, expect, it } from 'vitest';
+
+describe('flattenGroupedCollection', () => {
+	it('should return a list by meta.sort and collection name if no groups are present', () => {
+		const collections = [
+			{ collection: 'collection_a', meta: { sort: 2, group: null } },
+			{ collection: 'collection_z', meta: { sort: 1 } },
+			{ collection: 'collection_b', meta: { sort: 1 } },
+		] as Collection[];
+
+		const result = flattenGroupedCollections(collections);
+
+		expect(result).toEqual([
+			{ collection: 'collection_b', meta: { sort: 1 } },
+			{ collection: 'collection_z', meta: { sort: 1 } },
+			{ collection: 'collection_a', meta: { sort: 2, group: null } },
+		]);
+	});
+
+	it('should return a sorted, flattened list with groups present', () => {
+		const collections = [
+			{ collection: 'collection_b', meta: { sort: 2, group: null } },
+			{ collection: 'collection_a', meta: { sort: 1 } },
+			{ collection: 'collection_b_1', meta: { group: 'collection_b', sort: 1 } },
+			{ collection: 'collection_a_2_1', meta: { group: 'collection_a_2', sort: 1 } },
+			{ collection: 'collection_a_2', meta: { group: 'collection_a', sort: 2 } },
+			{ collection: 'collection_a_1', meta: { group: 'collection_a', sort: 1 } },
+		] as Collection[];
+
+		const result = flattenGroupedCollections(collections);
+
+		expect(result).toEqual([
+			{ collection: 'collection_a', meta: { sort: 1 } },
+			{ collection: 'collection_a_1', meta: { group: 'collection_a', sort: 1 } },
+			{ collection: 'collection_a_2', meta: { group: 'collection_a', sort: 2 } },
+			{ collection: 'collection_a_2_1', meta: { group: 'collection_a_2', sort: 1 } },
+			{ collection: 'collection_b', meta: { sort: 2, group: null } },
+			{ collection: 'collection_b_1', meta: { group: 'collection_b', sort: 1 } },
+		]);
+	});
+});