[Workplace Search] Convert Groups pages to new page template (#102449) (

#102566)

* Convert Groups page to new page template

* Convert Groups > Group overview to new page template

- Because dataLoading is no longer an early return, certain items need to be converted to conditional checks in order for the app to not crash

* Convert Groups > source prioritization to new page template

* Convert Group subnav to EuiSideNav format

* Update routers

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.test.tsx

@@ -9,6 +9,9 @@ jest.mock('../../../shared/layout', () => ({
   ...jest.requireActual('../../../shared/layout'),
   generateNavLink: jest.fn(({ to }) => ({ href: to })),
 }));
+jest.mock('../../views/groups/components/group_sub_nav', () => ({
+  useGroupSubNav: () => [],
+}));
 jest.mock('../../views/settings/components/settings_sub_nav', () => ({
   useSettingsSubNav: () => [],
 }));

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/nav.tsx

@@ -19,6 +19,7 @@ import {
   GROUPS_PATH,
   ORG_SETTINGS_PATH,
 } from '../../routes';
+import { useGroupSubNav } from '../../views/groups/components/group_sub_nav';
 import { useSettingsSubNav } from '../../views/settings/components/settings_sub_nav';
 
 export const useWorkplaceSearchNav = () => {
@@ -38,7 +39,7 @@ export const useWorkplaceSearchNav = () => {
       id: 'groups',
       name: NAV.GROUPS,
       ...generateNavLink({ to: GROUPS_PATH }),
-      items: [], // TODO: Group subnav
+      items: useGroupSubNav(),
     },
     {
       id: 'usersRoles',

x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx

@@ -41,7 +41,6 @@ import { SourceAdded } from './views/content_sources/components/source_added';
 import { SourceSubNav } from './views/content_sources/components/source_sub_nav';
 import { ErrorState } from './views/error_state';
 import { GroupsRouter } from './views/groups';
-import { GroupSubNav } from './views/groups/components/group_sub_nav';
 import { Overview } from './views/overview';
 import { RoleMappings } from './views/role_mappings';
 import { Security } from './views/security';
@@ -63,7 +62,6 @@ export const WorkplaceSearchConfigured: React.FC<InitialAppData> = (props) => {
 
   // We don't want so show the subnavs on the container root pages.
   const showSourcesSubnav = pathname !== SOURCES_PATH && pathname !== PERSONAL_SOURCES_PATH;
-  const showGroupsSubnav = pathname !== GROUPS_PATH;
 
   /**
    * Personal dashboard urls begin with /p/
@@ -125,13 +123,7 @@ export const WorkplaceSearchConfigured: React.FC<InitialAppData> = (props) => {
         </Layout>
       </Route>
       <Route path={GROUPS_PATH}>
-        <Layout
-          navigation={<WorkplaceSearchNav groupsSubNav={showGroupsSubnav && <GroupSubNav />} />}
-          restrictWidth
-          readOnlyMode={readOnlyMode}
-        >
-          <GroupsRouter />
-        </Layout>
+        <GroupsRouter />
       </Route>
       <Route path={ROLE_MAPPINGS_PATH}>
         <RoleMappings />

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.test.tsx

@@ -14,10 +14,8 @@ import { shallow } from 'enzyme';
 
 import { EuiFieldText, EuiEmptyPrompt } from '@elastic/eui';
 
-import { Loading } from '../../../../shared/loading';
 import { ContentSection } from '../../../components/shared/content_section';
 import { SourcesTable } from '../../../components/shared/sources_table';
-import { ViewContentHeader } from '../../../components/shared/view_content_header';
 
 import { GroupOverview } from './group_overview';
 
@@ -49,19 +47,21 @@ describe('GroupOverview', () => {
     });
     setMockValues(mockValues);
   });
+
   it('renders', () => {
     const wrapper = shallow(<GroupOverview />);
 
     expect(wrapper.find(ContentSection)).toHaveLength(4);
-    expect(wrapper.find(ViewContentHeader)).toHaveLength(1);
     expect(wrapper.find(SourcesTable)).toHaveLength(1);
   });
 
-  it('returns loading when loading', () => {
-    setMockValues({ ...mockValues, dataLoading: true });
+  it('handles loading state fallbacks', () => {
+    setMockValues({ ...mockValues, group: {}, dataLoading: true });
     const wrapper = shallow(<GroupOverview />);
 
-    expect(wrapper.find(Loading)).toHaveLength(1);
+    expect(wrapper.prop('isLoading')).toEqual(true);
+    expect(wrapper.prop('pageChrome')).toEqual(['Groups', '...']);
+    expect(wrapper.prop('pageHeader').pageTitle).toEqual(undefined);
   });
 
   it('updates the input value', () => {

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.tsx

@@ -23,14 +23,13 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { Loading } from '../../../../shared/loading';
 import { TruncatedContent } from '../../../../shared/truncate';
 import { AppLogic } from '../../../app_logic';
 import noSharedSourcesIcon from '../../../assets/share_circle.svg';
+import { WorkplaceSearchPageTemplate } from '../../../components/layout';
 import { ContentSection } from '../../../components/shared/content_section';
 import { SourcesTable } from '../../../components/shared/sources_table';
-import { ViewContentHeader } from '../../../components/shared/view_content_header';
-import { CANCEL_BUTTON } from '../../../constants';
+import { NAV, CANCEL_BUTTON } from '../../../constants';
 import { GroupLogic, MAX_NAME_LENGTH } from '../group_logic';
 
 import { GroupUsersTable } from './group_users_table';
@@ -127,9 +126,7 @@ export const GroupOverview: React.FC = () => {
 
   const { isFederatedAuth } = useValues(AppLogic);
 
-  if (dataLoading) return <Loading />;
-
-  const truncatedName = (
+  const truncatedName = name && (
     <TruncatedContent tooltipType="title" content={name} length={MAX_NAME_LENGTH} />
   );
 
@@ -162,8 +159,8 @@ export const GroupOverview: React.FC = () => {
     }
   );
 
-  const hasContentSources = contentSources.length > 0;
-  const hasUsers = users.length > 0;
+  const hasContentSources = contentSources?.length > 0;
+  const hasUsers = users?.length > 0;
 
   const manageSourcesButton = (
     <EuiButton color="primary" onClick={showSharedSourcesModal}>
@@ -272,13 +269,16 @@ export const GroupOverview: React.FC = () => {
   );
 
   return (
-    <>
-      <ViewContentHeader title={truncatedName} />
-      <EuiSpacer />
+    <WorkplaceSearchPageTemplate
+      pageChrome={[NAV.GROUPS, name || '...']}
+      pageViewTelemetry="group_overview"
+      pageHeader={{ pageTitle: truncatedName }}
+      isLoading={dataLoading}
+    >
       {hasContentSources ? sourcesSection : sourcesEmptyState}
       {usersSection}
       {nameSection}
       {canDeleteGroup && deleteSection}
-    </>
+    </WorkplaceSearchPageTemplate>
   );
 };

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.test.tsx

@@ -14,8 +14,6 @@ import { shallow } from 'enzyme';
 
 import { EuiTable, EuiEmptyPrompt, EuiRange } from '@elastic/eui';
 
-import { Loading } from '../../../../shared/loading';
-
 import { GroupSourcePrioritization } from './group_source_prioritization';
 
 const updatePriority = jest.fn();
@@ -43,17 +41,19 @@ describe('GroupSourcePrioritization', () => {
 
     setMockValues(mockValues);
   });
+
   it('renders', () => {
     const wrapper = shallow(<GroupSourcePrioritization />);
 
     expect(wrapper.find(EuiTable)).toHaveLength(1);
   });
 
-  it('returns loading when loading', () => {
-    setMockValues({ ...mockValues, dataLoading: true });
+  it('handles loading state fallbacks', () => {
+    setMockValues({ ...mockValues, group: {}, dataLoading: true });
     const wrapper = shallow(<GroupSourcePrioritization />);
 
-    expect(wrapper.find(Loading)).toHaveLength(1);
+    expect(wrapper.prop('isLoading')).toEqual(true);
+    expect(wrapper.prop('pageChrome')).toEqual(['Groups', '...', 'Source Prioritization']);
   });
 
   it('renders empty state', () => {

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx

@@ -27,9 +27,9 @@ import {
 import { i18n } from '@kbn/i18n';
 
 import { SAVE_BUTTON_LABEL } from '../../../../shared/constants';
-import { Loading } from '../../../../shared/loading';
+import { WorkplaceSearchPageTemplate } from '../../../components/layout';
 import { SourceIcon } from '../../../components/shared/source_icon';
-import { ViewContentHeader } from '../../../components/shared/view_content_header';
+import { NAV } from '../../../constants';
 import { ContentSource } from '../../../types';
 import { GroupLogic } from '../group_logic';
 
@@ -76,14 +76,12 @@ export const GroupSourcePrioritization: React.FC = () => {
   );
 
   const {
-    group: { contentSources, name: groupName },
+    group: { contentSources = [], name: groupName },
     dataLoading,
     activeSourcePriorities,
     groupPrioritiesUnchanged,
   } = useValues(GroupLogic);
 
-  if (dataLoading) return <Loading />;
-
   const headerAction = (
     <EuiButton
       disabled={groupPrioritiesUnchanged}
@@ -167,13 +165,17 @@ export const GroupSourcePrioritization: React.FC = () => {
   );
 
   return (
-    <>
-      <ViewContentHeader
-        title={HEADER_TITLE}
-        description={HEADER_DESCRIPTION}
-        action={headerAction}
-      />
+    <WorkplaceSearchPageTemplate
+      pageChrome={[NAV.GROUPS, groupName || '...', NAV.SOURCE_PRIORITIZATION]}
+      pageViewTelemetry="group_overview"
+      pageHeader={{
+        pageTitle: HEADER_TITLE,
+        description: HEADER_DESCRIPTION,
+        rightSideItems: [headerAction],
+      }}
+      isLoading={dataLoading}
+    >
       {hasSources ? sourceTable : zeroState}
-    </>
+    </WorkplaceSearchPageTemplate>
   );
 };

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_sub_nav.test.tsx

@@ -7,26 +7,33 @@
 
 import { setMockValues } from '../../../../__mocks__/kea_logic';
 
-import React from 'react';
+jest.mock('../../../../shared/layout', () => ({
+  generateNavLink: jest.fn(({ to }) => ({ href: to })),
+}));
 
-import { shallow } from 'enzyme';
+import { useGroupSubNav } from './group_sub_nav';
 
-import { SideNavLink } from '../../../../shared/layout';
-
-import { GroupSubNav } from './group_sub_nav';
-
-describe('GroupSubNav', () => {
-  it('renders empty when no group id present', () => {
-    setMockValues({ group: {} });
-    const wrapper = shallow(<GroupSubNav />);
+describe('useGroupSubNav', () => {
+  it('renders nav items', () => {
+    setMockValues({ group: { id: '1' } });
 
-    expect(wrapper.find(SideNavLink)).toHaveLength(0);
+    expect(useGroupSubNav()).toEqual([
+      {
+        id: 'groupOverview',
+        name: 'Overview',
+        href: '/groups/1',
+      },
+      {
+        id: 'groupSourcePrioritization',
+        name: 'Source Prioritization',
+        href: '/groups/1/source_prioritization',
+      },
+    ]);
   });
 
-  it('renders nav items', () => {
-    setMockValues({ group: { id: '1' } });
-    const wrapper = shallow(<GroupSubNav />);
+  it('returns undefined when no group id is present', () => {
+    setMockValues({ group: {} });
 
-    expect(wrapper.find(SideNavLink)).toHaveLength(2);
+    expect(useGroupSubNav()).toEqual(undefined);
   });
 });

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_sub_nav.tsx

@@ -5,28 +5,34 @@
  * 2.0.
  */
 
-import React from 'react';
-
 import { useValues } from 'kea';
 
-import { SideNavLink } from '../../../../shared/layout';
+import { EuiSideNavItemType } from '@elastic/eui';
+
+import { generateNavLink } from '../../../../shared/layout';
 import { NAV } from '../../../constants';
 import { getGroupPath, getGroupSourcePrioritizationPath } from '../../../routes';
 import { GroupLogic } from '../group_logic';
 
-export const GroupSubNav: React.FC = () => {
+export const useGroupSubNav = () => {
   const {
     group: { id },
   } = useValues(GroupLogic);
 
-  if (!id) return null;
+  if (!id) return undefined;
+
+  const navItems: Array<EuiSideNavItemType<unknown>> = [
+    {
+      id: 'groupOverview',
+      name: NAV.GROUP_OVERVIEW,
+      ...generateNavLink({ to: getGroupPath(id) }),
+    },
+    {
+      id: 'groupSourcePrioritization',
+      name: NAV.SOURCE_PRIORITIZATION,
+      ...generateNavLink({ to: getGroupSourcePrioritizationPath(id) }),
+    },
+  ];
 
-  return (
-    <>
-      <SideNavLink to={getGroupPath(id)}>{NAV.GROUP_OVERVIEW}</SideNavLink>
-      <SideNavLink to={getGroupSourcePrioritizationPath(id)}>
-        {NAV.SOURCE_PRIORITIZATION}
-      </SideNavLink>
-    </>
-  );
+  return navItems;
 };

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/group_router.test.tsx

@@ -15,9 +15,6 @@ import { Route, Switch } from 'react-router-dom';
 
 import { shallow } from 'enzyme';
 
-import { FlashMessages } from '../../../shared/flash_messages';
-import { SetWorkplaceSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
-
 import { GroupOverview } from './components/group_overview';
 import { GroupSourcePrioritization } from './components/group_source_prioritization';
 import { ManageUsersModal } from './components/manage_users_modal';
@@ -40,10 +37,10 @@ describe('GroupRouter', () => {
       resetGroup,
     });
   });
+
   it('renders', () => {
     const wrapper = shallow(<GroupRouter />);
 
-    expect(wrapper.find(FlashMessages)).toHaveLength(1);
     expect(wrapper.find(Switch)).toHaveLength(1);
     expect(wrapper.find(Route)).toHaveLength(2);
     expect(wrapper.find(GroupOverview)).toHaveLength(1);
@@ -62,22 +59,4 @@ describe('GroupRouter', () => {
     expect(wrapper.find(ManageUsersModal)).toHaveLength(1);
     expect(wrapper.find(SharedSourcesModal)).toHaveLength(1);
   });
-
-  it('handles breadcrumbs while loading', () => {
-    setMockValues({
-      sharedSourcesModalVisible: false,
-      manageUsersModalVisible: false,
-      group: {},
-    });
-
-    const loadingBreadcrumbs = ['Groups', '...'];
-
-    const wrapper = shallow(<GroupRouter />);
-
-    const firstBreadCrumb = wrapper.find(SetPageChrome).first();
-    const lastBreadCrumb = wrapper.find(SetPageChrome).last();
-
-    expect(firstBreadCrumb.prop('trail')).toEqual([...loadingBreadcrumbs, 'Source Prioritization']);
-    expect(lastBreadCrumb.prop('trail')).toEqual(loadingBreadcrumbs);
-  });
 });