[PM-2089] Fix Collections not nesting properly in the Org Vault (#5369)

apps/web/src/app/vault/utils/collection-utils.spec.ts

@@ -0,0 +1,28 @@
+import { CollectionView } from "@bitwarden/common/admin-console/models/view/collection.view";
+
+import { getNestedCollectionTree } from "./collection-utils";
+
+describe("CollectionUtils Service", () => {
+  describe("getNestedCollectionTree", () => {
+    it("should return collections properly sorted if provided out of order", () => {
+      // Arrange
+      const collections: CollectionView[] = [];
+
+      const parentCollection = new CollectionView();
+      parentCollection.name = "Parent";
+
+      const childCollection = new CollectionView();
+      childCollection.name = "Parent/Child";
+
+      collections.push(childCollection);
+      collections.push(parentCollection);
+
+      // Act
+      const result = getNestedCollectionTree(collections);
+
+      // Assert
+      expect(result[0].node.name).toBe("Parent");
+      expect(result[0].children[0].node.name).toBe("Child");
+    });
+  });
+});

apps/web/src/app/vault/utils/collection-utils.ts

@@ -17,7 +17,9 @@ export function getNestedCollectionTree(
   // Collections need to be cloned because ServiceUtils.nestedTraverse actively
   // modifies the names of collections.
   // These changes risk affecting collections store in StateService.
-  const clonedCollections = collections.map(cloneCollection);
+  const clonedCollections = collections
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .map(cloneCollection);
 
   const nodes: TreeNode<CollectionView | CollectionAdminView>[] = [];
   clonedCollections.forEach((collection) => {