From 5e02bd6fe6d765666df15f3013cef40376024c2f Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gustav.hansen@strapi.io>
Date: Mon, 23 May 2022 09:28:32 +0200
Subject: [PATCH] ML: Add truncation test for header, simplify code

---
 .../admin/src/pages/App/components/Header.js  | 11 ++-----
 .../admin/src/pages/App/tests/Header.test.js  | 30 +++++++++++++++++++
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/packages/core/upload/admin/src/pages/App/components/Header.js b/packages/core/upload/admin/src/pages/App/components/Header.js
index 43ccdc47de..ee11776ece 100644
--- a/packages/core/upload/admin/src/pages/App/components/Header.js
+++ b/packages/core/upload/admin/src/pages/App/components/Header.js
@@ -28,14 +28,9 @@ export const Header = ({
     },
   ] = useQueryParams();
 
-  const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure();
-
-  const isNestedFolder = folder;
-
-  const isFolder = !folderStructureIsLoading && isNestedFolder;
-
-  const folderMetadatas = isFolder && findRecursiveFolderMetadatas(folderStructure[0], folder);
-
+  const { data, isLoading } = useFolderStructure();
+  const isNestedFolder = !!folder;
+  const folderMetadatas = !isLoading && findRecursiveFolderMetadatas(data[0], folder);
   const backQuery = stringify(
     folderMetadatas?.parentId
       ? { ...queryParamsWithoutFolder, folder: folderMetadatas.parentId }
diff --git a/packages/core/upload/admin/src/pages/App/tests/Header.test.js b/packages/core/upload/admin/src/pages/App/tests/Header.test.js
index 54a93be0b6..a59a733840 100644
--- a/packages/core/upload/admin/src/pages/App/tests/Header.test.js
+++ b/packages/core/upload/admin/src/pages/App/tests/Header.test.js
@@ -79,6 +79,36 @@ describe('Header', () => {
     expect(container).toMatchSnapshot();
   });
 
+  test('truncates long folder lavels', () => {
+    useQueryParams.mockReturnValueOnce([{ rawQuery: '', query: { folder: 2 } }, jest.fn()]);
+    useFolderStructure.mockReturnValueOnce({
+      isLoading: false,
+      error: null,
+      data: [
+        {
+          value: null,
+          label: 'Media Library',
+          children: [
+            {
+              value: 1,
+              label: 'Cats',
+              children: [
+                {
+                  value: 2,
+                  label: 'The length of this label exceeds the maximum',
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    const { queryByText } = setup();
+    expect(queryByText('Media Library - The length of this label excee...')).toBeInTheDocument();
+  });
+
   test('does not render a back button at the root level of the media library', () => {
     const { queryByText } = setup();