EUI feedback: add empty root parent section

elastic · Jun 16, 2021 · 74956bd · 74956bd
1 parent 4b1d526
commit 74956bd
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 55 deletions.
diff --git a/...k/plugins/enterprise_search/public/applications/app_search/components/layout/nav.test.tsx b/...k/plugins/enterprise_search/public/applications/app_search/components/layout/nav.test.tsx
@@ -14,30 +14,45 @@ jest.mock('../../../shared/layout', () => ({
 import { useAppSearchNav } from './nav';
 
 describe('useAppSearchNav', () => {
-  const MOCK_DEFAULT_NAV = [
-    {
-      id: 'engines',
-      name: 'Engines',
-      href: '/engines',
-      items: [],
-    },
-  ];
-
   it('always generates a default engines nav item', () => {
     setMockValues({ myRole: {} });
 
-    expect(useAppSearchNav()).toEqual(MOCK_DEFAULT_NAV);
+    expect(useAppSearchNav()).toEqual([
+      {
+        id: '',
+        name: '',
+        items: [
+          {
+            id: 'engines',
+            name: 'Engines',
+            href: '/engines',
+            items: [],
+          },
+        ],
+      },
+    ]);
   });
 
   it('generates a settings nav item if the user can view settings', () => {
     setMockValues({ myRole: { canViewSettings: true } });
 
     expect(useAppSearchNav()).toEqual([
-      ...MOCK_DEFAULT_NAV,
       {
-        id: 'settings',
-        name: 'Settings',
-        href: '/settings',
+        id: '',
+        name: '',
+        items: [
+          {
+            id: 'engines',
+            name: 'Engines',
+            href: '/engines',
+            items: [],
+          },
+          {
+            id: 'settings',
+            name: 'Settings',
+            href: '/settings',
+          },
+        ],
       },
     ]);
   });
@@ -46,11 +61,22 @@ describe('useAppSearchNav', () => {
     setMockValues({ myRole: { canViewAccountCredentials: true } });
 
     expect(useAppSearchNav()).toEqual([
-      ...MOCK_DEFAULT_NAV,
       {
-        id: 'credentials',
-        name: 'Credentials',
-        href: '/credentials',
+        id: '',
+        name: '',
+        items: [
+          {
+            id: 'engines',
+            name: 'Engines',
+            href: '/engines',
+            items: [],
+          },
+          {
+            id: 'credentials',
+            name: 'Credentials',
+            href: '/credentials',
+          },
+        ],
       },
     ]);
   });
@@ -59,11 +85,22 @@ describe('useAppSearchNav', () => {
     setMockValues({ myRole: { canViewRoleMappings: true } });
 
     expect(useAppSearchNav()).toEqual([
-      ...MOCK_DEFAULT_NAV,
       {
-        id: 'usersRoles',
-        name: 'Users & roles',
-        href: '/role_mappings',
+        id: '',
+        name: '',
+        items: [
+          {
+            id: 'engines',
+            name: 'Engines',
+            href: '/engines',
+            items: [],
+          },
+          {
+            id: 'usersRoles',
+            name: 'Users & roles',
+            href: '/role_mappings',
+          },
+        ],
       },
     ]);
   });

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/nav.tsx
@@ -56,5 +56,8 @@ export const useAppSearchNav = () => {
     });
   }
 
-  return navItems;
+  // Root level items are meant to be section headers, but the AS nav (currently)
+  // isn't organized this way. So we create a fake empty parent item here
+  // to cause all our navItems to properly render as nav links.
+  return [{ id: '', name: '', items: navItems }];
 };
diff --git a/...ins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx b/...ins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx
@@ -22,37 +22,43 @@ describe('useWorkplaceSearchNav', () => {
   it('returns an array of top-level Workplace Search nav items', () => {
     expect(useWorkplaceSearchNav()).toEqual([
       {
-        id: 'root',
-        name: 'Overview',
-        href: '/',
-      },
-      {
-        id: 'sources',
-        name: 'Sources',
-        href: '/sources',
-        items: [],
-      },
-      {
-        id: 'groups',
-        name: 'Groups',
-        href: '/groups',
-        items: [],
-      },
-      {
-        id: 'usersRoles',
-        name: 'Users & roles',
-        href: '/role_mappings',
-      },
-      {
-        id: 'security',
-        name: 'Security',
-        href: '/security',
-      },
-      {
-        id: 'settings',
-        name: 'Settings',
-        href: '/settings',
-        items: [],
+        id: '',
+        name: '',
+        items: [
+          {
+            id: 'root',
+            name: 'Overview',
+            href: '/',
+          },
+          {
+            id: 'sources',
+            name: 'Sources',
+            href: '/sources',
+            items: [],
+          },
+          {
+            id: 'groups',
+            name: 'Groups',
+            href: '/groups',
+            items: [],
+          },
+          {
+            id: 'usersRoles',
+            name: 'Users & roles',
+            href: '/role_mappings',
+          },
+          {
+            id: 'security',
+            name: 'Security',
+            href: '/security',
+          },
+          {
+            id: 'settings',
+            name: 'Settings',
+            href: '/settings',
+            items: [],
+          },
+        ],
       },
     ]);
   });

diff --git a/.../plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx b/.../plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx
@@ -56,7 +56,11 @@ export const useWorkplaceSearchNav = () => {
       items: [], // TODO: Settings subnav
     },
   ];
-  return navItems;
+
+  // Root level items are meant to be section headers, but the WS nav (currently)
+  // isn't organized this way. So we crate a fake empty parent item here
+  // to cause all our navItems to properly render as nav links.
+  return [{ id: '', name: '', items: navItems }];
 };
 
 // TODO: Delete below once fully migrated to KibanaPageTemplate