Skip to content

Commit

Permalink
[Workplace Search] Convert Settings pages to new page template (#102445)
Browse files Browse the repository at this point in the history
* Convert Settings > Customize to new page template

* Convert Settings > oAuth application to new page template

+ DRY form wrappers, update test

* Convert Settings > Connectors to new page template

* Convert source config view to new page template

* Convert Settings subnav to EuiSideNav format

+ update main WS nav

* Update routers
  • Loading branch information
Constance authored Jun 17, 2021
1 parent 1627240 commit 0e14cef
Show file tree
Hide file tree
Showing 14 changed files with 216 additions and 207 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ jest.mock('../../../shared/layout', () => ({
...jest.requireActual('../../../shared/layout'),
generateNavLink: jest.fn(({ to }) => ({ href: to })),
}));
jest.mock('../../views/settings/components/settings_sub_nav', () => ({
useSettingsSubNav: () => [],
}));

import React from 'react';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
GROUPS_PATH,
ORG_SETTINGS_PATH,
} from '../../routes';
import { useSettingsSubNav } from '../../views/settings/components/settings_sub_nav';

export const useWorkplaceSearchNav = () => {
const navItems: Array<EuiSideNavItemType<unknown>> = [
Expand Down Expand Up @@ -53,7 +54,7 @@ export const useWorkplaceSearchNav = () => {
id: 'settings',
name: NAV.SETTINGS,
...generateNavLink({ to: ORG_SETTINGS_PATH }),
items: [], // TODO: Settings subnav
items: useSettingsSubNav(),
},
];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ import { Overview } from './views/overview';
import { RoleMappings } from './views/role_mappings';
import { Security } from './views/security';
import { SettingsRouter } from './views/settings';
import { SettingsSubNav } from './views/settings/components/settings_sub_nav';
import { SetupGuide } from './views/setup_guide';

export const WorkplaceSearch: React.FC<InitialAppData> = (props) => {
Expand Down Expand Up @@ -141,13 +140,7 @@ export const WorkplaceSearchConfigured: React.FC<InitialAppData> = (props) => {
<Security />
</Route>
<Route path={ORG_SETTINGS_PATH}>
<Layout
navigation={<WorkplaceSearchNav settingsSubNav={<SettingsSubNav />} />}
restrictWidth
readOnlyMode={readOnlyMode}
>
<SettingsRouter />
</Layout>
<SettingsRouter />
</Route>
<Route>
<Layout navigation={<WorkplaceSearchNav />} restrictWidth readOnlyMode={readOnlyMode}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import React from 'react';

import { shallow } from 'enzyme';

import { Loading } from '../../../../shared/loading';
import { LicenseCallout } from '../../../components/shared/license_callout';

import { Connectors } from './connectors';
Expand All @@ -33,16 +32,6 @@ describe('Connectors', () => {
expect(wrapper.find('[data-test-subj="ConnectorRow"]')).toHaveLength(configuredSources.length);
});

it('returns loading when loading', () => {
setMockValues({
connectors: configuredSources,
dataLoading: true,
});
const wrapper = shallow(<Connectors />);

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

it('renders LicenseCallout for restricted items', () => {
const wrapper = shallow(<Connectors />);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ import {
EuiSpacer,
} from '@elastic/eui';

import { Loading } from '../../../../shared/loading';
import { EuiButtonEmptyTo } from '../../../../shared/react_router_helpers';
import { WorkplaceSearchPageTemplate } from '../../../components/layout';
import { LicenseCallout } from '../../../components/shared/license_callout';
import { SourceIcon } from '../../../components/shared/source_icon';
import { ViewContentHeader } from '../../../components/shared/view_content_header';
import {
NAV,
CONFIGURE_BUTTON,
CONNECTORS_HEADER_TITLE,
CONNECTORS_HEADER_DESCRIPTION,
Expand All @@ -46,8 +46,6 @@ export const Connectors: React.FC = () => {
initializeConnectors();
}, []);

if (dataLoading) return <Loading />;

const availableConnectors = reject(
connectors,
({ serviceType }) => serviceType === CUSTOM_SERVICE_TYPE
Expand Down Expand Up @@ -125,12 +123,15 @@ export const Connectors: React.FC = () => {
);

return (
<>
<ViewContentHeader
title={CONNECTORS_HEADER_TITLE}
description={CONNECTORS_HEADER_DESCRIPTION}
/>
<WorkplaceSearchPageTemplate
pageChrome={[NAV.SETTINGS, NAV.SETTINGS_SOURCE_PRIORITIZATION]}
pageHeader={{
pageTitle: CONNECTORS_HEADER_TITLE,
description: CONNECTORS_HEADER_DESCRIPTION,
}}
isLoading={dataLoading}
>
{connectorsList}
</>
</WorkplaceSearchPageTemplate>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ import { useActions, useValues } from 'kea';

import { EuiButton, EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';

import { WorkplaceSearchPageTemplate } from '../../../components/layout';
import { ContentSection } from '../../../components/shared/content_section';
import { ViewContentHeader } from '../../../components/shared/view_content_header';
import {
NAV,
CUSTOMIZE_HEADER_TITLE,
CUSTOMIZE_HEADER_DESCRIPTION,
CUSTOMIZE_NAME_LABEL,
Expand All @@ -31,32 +32,36 @@ export const Customize: React.FC = () => {
};

return (
<form onSubmit={handleSubmit}>
<ViewContentHeader
title={CUSTOMIZE_HEADER_TITLE}
description={CUSTOMIZE_HEADER_DESCRIPTION}
/>
<ContentSection>
<EuiFormRow label={CUSTOMIZE_NAME_LABEL} fullWidth isInvalid={false}>
<EuiFlexGroup>
<EuiFlexItem>
<EuiFieldText
isInvalid={false}
required
value={orgNameInputValue}
data-test-subj="OrgNameInput"
onChange={(e) => onOrgNameInputChange(e.target.value)}
/>
</EuiFlexItem>
<EuiFlexItem />
</EuiFlexGroup>
</EuiFormRow>
<EuiFormRow>
<EuiButton color="primary" data-test-subj="SaveOrgNameButton" type="submit">
{CUSTOMIZE_NAME_BUTTON}
</EuiButton>
</EuiFormRow>
</ContentSection>
</form>
<WorkplaceSearchPageTemplate
pageChrome={[NAV.SETTINGS]}
pageHeader={{
pageTitle: CUSTOMIZE_HEADER_TITLE,
description: CUSTOMIZE_HEADER_DESCRIPTION,
}}
>
<form onSubmit={handleSubmit}>
<ContentSection>
<EuiFormRow label={CUSTOMIZE_NAME_LABEL} fullWidth isInvalid={false}>
<EuiFlexGroup>
<EuiFlexItem>
<EuiFieldText
isInvalid={false}
required
value={orgNameInputValue}
data-test-subj="OrgNameInput"
onChange={(e) => onOrgNameInputChange(e.target.value)}
/>
</EuiFlexItem>
<EuiFlexItem />
</EuiFlexGroup>
</EuiFormRow>
<EuiFormRow>
<EuiButton color="primary" data-test-subj="SaveOrgNameButton" type="submit">
{CUSTOMIZE_NAME_BUTTON}
</EuiButton>
</EuiFormRow>
</ContentSection>
</form>
</WorkplaceSearchPageTemplate>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ import { shallow } from 'enzyme';

import { EuiModal, EuiForm } from '@elastic/eui';

import { getPageDescription } from '../../../../test_helpers';

import { CredentialItem } from '../../../components/shared/credential_item';
import { ViewContentHeader } from '../../../components/shared/view_content_header';
import { OAUTH_DESCRIPTION, REDIRECT_INSECURE_ERROR_TEXT } from '../../../constants';

import { OauthApplication } from './oauth_application';
Expand Down Expand Up @@ -77,7 +78,7 @@ describe('OauthApplication', () => {
it('handles form submission', () => {
const wrapper = shallow(<OauthApplication />);
const preventDefault = jest.fn();
wrapper.find('form').simulate('submit', { preventDefault });
wrapper.find(EuiForm).simulate('submit', { preventDefault });

expect(updateOauthApplication).toHaveBeenCalled();
});
Expand Down Expand Up @@ -127,7 +128,7 @@ describe('OauthApplication', () => {
});
const wrapper = shallow(<OauthApplication />);

expect(wrapper.find(ViewContentHeader).prop('description')).toEqual(OAUTH_DESCRIPTION);
expect(getPageDescription(wrapper)).toEqual(OAUTH_DESCRIPTION);
expect(wrapper.find('[data-test-subj="RedirectURIsRow"]').prop('error')).toEqual(
REDIRECT_INSECURE_ERROR_TEXT
);
Expand Down
Loading

0 comments on commit 0e14cef

Please sign in to comment.