Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 7 commits into from
Jun 17, 2021
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
30b4ba7
Convert Groups page to new page template
cee-chen Jun 17, 2021
f278925
Convert Groups > Group overview to new page template
cee-chen Jun 17, 2021
cb2c2be
Convert Groups > source prioritization to new page template
cee-chen Jun 17, 2021
c49e004
Convert Group subnav to EuiSideNav format
cee-chen Jun 17, 2021
aebdca9
Update routers
cee-chen Jun 17, 2021
be40d6b
Merge branch 'master' into kibana-page-template-ws-3
constancecchen Jun 17, 2021
403a39e
Fix failing unit test
cee-chen Jun 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 12 additions & 22 deletions ...ugins/enterprise_search/public/applications/workplace_search/views/groups/groups.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,8 @@ import { EuiFieldSearch, EuiLoadingSpinner } from '@elastic/eui';

import { DEFAULT_META } from '../../../shared/constants';
import { FlashMessages } from '../../../shared/flash_messages';
import { Loading } from '../../../shared/loading';
import { EuiButtonTo } from '../../../shared/react_router_helpers';
import { ViewContentHeader } from '../../components/shared/view_content_header';
import { getPageHeaderActions } from '../../../test_helpers';

import { AddGroupModal } from './components/add_group_modal';
import { ClearFiltersLink } from './components/clear_filters_link';
Expand Down Expand Up @@ -68,18 +67,10 @@ describe('GroupOverview', () => {
it('renders', () => {
const wrapper = shallow(<Groups />);

expect(wrapper.find(ViewContentHeader)).toHaveLength(1);
expect(wrapper.find(GroupsTable)).toHaveLength(1);
expect(wrapper.find(TableFilters)).toHaveLength(1);
});

it('returns loading when loading', () => {
setMockValues({ ...mockValues, groupsDataLoading: true });
const wrapper = shallow(<Groups />);

expect(wrapper.find(Loading)).toHaveLength(1);
});

it('gets search results when filters changed', () => {
const wrapper = shallow(<Groups />);

Expand All @@ -96,8 +87,13 @@ describe('GroupOverview', () => {
...mockValues,
newGroup: { name: 'group', id: '123' },
messages: [mockSuccessMessage],
// Needed for diving into page template
contentSource: {},
group: {},
});
const wrapper = shallow(<Groups />);
const wrapper = shallow(<Groups />)
.dive()
.dive();
const flashMessages = wrapper.find(FlashMessages).dive().childAt(0).dive();

expect(flashMessages.find('[data-test-subj="NewGroupManageButton"]')).toHaveLength(1);
Expand All @@ -122,13 +118,10 @@ describe('GroupOverview', () => {
});

const wrapper = shallow(<Groups />);
const actions = getPageHeaderActions(wrapper);

const Action: React.FC = () =>
wrapper.find(ViewContentHeader).props().action as React.ReactElement<any, any> | null;
const action = shallow(<Action />);

expect(action.find('[data-test-subj="InviteUsersButton"]')).toHaveLength(1);
expect(action.find(EuiButtonTo)).toHaveLength(1);
expect(actions.find('[data-test-subj="InviteUsersButton"]')).toHaveLength(1);
expect(actions.find(EuiButtonTo)).toHaveLength(1);
});

it('does not render inviteUsersButton when federated auth', () => {
Expand All @@ -138,12 +131,9 @@ describe('GroupOverview', () => {
});

const wrapper = shallow(<Groups />);
const actions = getPageHeaderActions(wrapper);

const Action: React.FC = () =>
wrapper.find(ViewContentHeader).props().action as React.ReactElement<any, any> | null;
const action = shallow(<Action />);

expect(action.find('[data-test-subj="InviteUsersButton"]')).toHaveLength(0);
expect(actions.find('[data-test-subj="InviteUsersButton"]')).toHaveLength(0);
});

it('renders EuiLoadingSpinner when loading', () => {
Expand Down
59 changes: 27 additions & 32 deletions ...ck/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ import { useActions, useValues } from 'kea';
import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';

import { FlashMessages, FlashMessagesLogic } from '../../../shared/flash_messages';
import { Loading } from '../../../shared/loading';
import { FlashMessagesLogic } from '../../../shared/flash_messages';
import { EuiButtonTo } from '../../../shared/react_router_helpers';
import { AppLogic } from '../../app_logic';
import { ViewContentHeader } from '../../components/shared/view_content_header';
import { WorkplaceSearchPageTemplate } from '../../components/layout';
import { NAV } from '../../constants';
import { getGroupPath, USERS_PATH } from '../../routes';

import { AddGroupModal } from './components/add_group_modal';
Expand Down Expand Up @@ -52,10 +52,6 @@ export const Groups: React.FC = () => {
return resetGroups;
}, [filteredSources, filteredUsers, filterValue]);

if (groupsDataLoading) {
return <Loading />;
}

if (newGroup && hasMessages) {
messages[0].description = (
<EuiButtonTo
Expand All @@ -71,26 +67,23 @@ export const Groups: React.FC = () => {
}

const clearFilters = hasFiltersSet && <ClearFiltersLink />;
const inviteUsersButton = !isFederatedAuth ? (
const inviteUsersButton = (
<EuiButtonTo to={USERS_PATH} data-test-subj="InviteUsersButton">
{i18n.translate('xpack.enterpriseSearch.workplaceSearch.groups.inviteUsers.action', {
defaultMessage: 'Invite users',
})}
</EuiButtonTo>
) : null;

const headerAction = (
<EuiFlexGroup responsive={false} gutterSize="m">
<EuiFlexItem grow={false}>
<EuiButton data-test-subj="AddGroupButton" fill onClick={openNewGroupModal}>
{i18n.translate('xpack.enterpriseSearch.workplaceSearch.groups.addGroupForm.action', {
defaultMessage: 'Create a group',
})}
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>{inviteUsersButton}</EuiFlexItem>
</EuiFlexGroup>
);
const createGroupButton = (
<EuiButton data-test-subj="AddGroupButton" fill onClick={openNewGroupModal}>
{i18n.translate('xpack.enterpriseSearch.workplaceSearch.groups.addGroupForm.action', {
defaultMessage: 'Create a group',
})}
</EuiButton>
);
const headerActions = !isFederatedAuth
? [inviteUsersButton, createGroupButton]
: [createGroupButton];
Comment on lines +84 to +86
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for cleaning this up!

Copy link
Member Author

@cee-chen cee-chen Jun 17, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While we're here, just wanted to highlight that EUI's rightSideItems array is a little unintuitive at first glance - the first item (inviteUsersButton) is actually the rightmost button (matching the old JSX). Subsequent items in the array are added to the left the first item.

Maybe a moot point anyway, IIRC Scotty is removing the isFederatedAuth logic soon 🕺


const noResults = (
<EuiFlexGroup justifyContent="spaceAround">
Expand All @@ -115,23 +108,25 @@ export const Groups: React.FC = () => {
);

return (
<>
<FlashMessages />
<ViewContentHeader
title={i18n.translate('xpack.enterpriseSearch.workplaceSearch.groups.heading', {
<WorkplaceSearchPageTemplate
pageChrome={[NAV.GROUPS]}
pageViewTelemetry="groups"
pageHeader={{
pageTitle: i18n.translate('xpack.enterpriseSearch.workplaceSearch.groups.heading', {
defaultMessage: 'Manage groups',
})}
description={i18n.translate('xpack.enterpriseSearch.workplaceSearch.groups.description', {
}),
description: i18n.translate('xpack.enterpriseSearch.workplaceSearch.groups.description', {
defaultMessage:
'Assign shared content sources and users to groups to create relevant search experiences for various internal teams.',
})}
action={headerAction}
/>
<EuiSpacer size="m" />
}),
rightSideItems: headerActions,
}}
isLoading={groupsDataLoading}
>
<TableFilters />
<EuiSpacer />
{numGroups > 0 && !groupListLoading ? <GroupsTable /> : noResults}
{newGroupModalOpen && <AddGroupModal />}
</>
</WorkplaceSearchPageTemplate>
);
};