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 Sources pages to new page template (+ personal dashboard) #102592

Merged
merged 15 commits into from
Jun 22, 2021
Merged

[Workplace Search] Convert Sources pages to new page template (+ personal dashboard) #102592

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
750f227
Refactor PersonalDashboardLayout to more closely match new page template
cee-chen Jun 17, 2021
b4ebfa4
Convert Source subnav to EuiSideNav format
cee-chen Jun 17, 2021
1fffcf6
Update routers
cee-chen Jun 17, 2021
637ba53
Refactor SourceRouter into shared layout component
cee-chen Jun 17, 2021
7bb4891
Convert all single source views to new page template
cee-chen Jun 17, 2021
91c51f9
Convert Add Source pages to conditional page templates
cee-chen Jun 17, 2021
7f42518
Convert separate Organization Sources & Private Sources views to new …
cee-chen Jun 17, 2021
6c305e5
Update Account Settings with personal layout + write tests
cee-chen Jun 18, 2021
8bea24e
[UX feedback] Do not render page headers while loading on Overview & …
cee-chen Jun 18, 2021
d77ee41
[PR feedback] Breadcrumb errors/fallbacks
cee-chen Jun 18, 2021
b6a62b6
[Proposal] Update schema errors routing to better work with nav/bread…
cee-chen Jun 18, 2021
96ef51c
Merge branch 'master' into kibana-page-template-ws-4
cee-chen Jun 21, 2021
57dcd76
Ignore Typescript error on soon-to-come EUI prop
cee-chen Jun 21, 2021
baf2ab6
Fix route test - caused by schema reindex URL change
cee-chen Jun 21, 2021
e562f63
One more unit test route update
cee-chen Jun 21, 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
22 changes: 17 additions & 5 deletions ...ications/workplace_search/views/content_sources/components/add_source/add_source.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ import React from 'react';

import { shallow } from 'enzyme';

import { Loading } from '../../../../../shared/loading';
import {
WorkplaceSearchPageTemplate,
PersonalDashboardLayout,
} from '../../../../components/layout';

import { AddSource } from './add_source';
import { AddSourceSteps } from './add_source_logic';
Expand Down Expand Up @@ -68,11 +71,20 @@ describe('AddSourceList', () => {
expect(setAddSourceStep).toHaveBeenCalledWith(AddSourceSteps.SaveConfigStep);
});

it('handles loading state', () => {
setMockValues({ ...mockValues, dataLoading: true });
const wrapper = shallow(<AddSource sourceIndex={1} />);
describe('layout', () => {
it('renders the default workplace search layout when on an organization view', () => {
setMockValues({ ...mockValues, isOrganization: true });
const wrapper = shallow(<AddSource sourceIndex={1} />);

expect(wrapper.type()).toEqual(WorkplaceSearchPageTemplate);
});

it('renders the personal dashboard layout when not in an organization', () => {
setMockValues({ ...mockValues, isOrganization: false });
const wrapper = shallow(<AddSource sourceIndex={1} />);

expect(wrapper.find(Loading)).toHaveLength(1);
expect(wrapper.type()).toEqual(PersonalDashboardLayout);
});
});

it('renders Config Completed step', () => {
Expand Down
14 changes: 8 additions & 6 deletions .../applications/workplace_search/views/content_sources/components/add_source/add_source.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,12 @@ import { i18n } from '@kbn/i18n';

import { setSuccessMessage } from '../../../../../shared/flash_messages';
import { KibanaLogic } from '../../../../../shared/kibana';
import { Loading } from '../../../../../shared/loading';
import { AppLogic } from '../../../../app_logic';
import { CUSTOM_SERVICE_TYPE } from '../../../../constants';
import {
WorkplaceSearchPageTemplate,
PersonalDashboardLayout,
} from '../../../../components/layout';
import { NAV, CUSTOM_SERVICE_TYPE } from '../../../../constants';
import { SOURCES_PATH, getSourcesPath } from '../../../../routes';
import { SourceDataItem } from '../../../../types';
import { staticSourceData } from '../../source_data';
Expand Down Expand Up @@ -71,8 +74,6 @@ export const AddSource: React.FC<AddSourceProps> = (props) => {
return resetSourceState;
}, []);

if (dataLoading) return <Loading />;

const goToConfigurationIntro = () => setAddSourceStep(AddSourceSteps.ConfigIntroStep);
const goToSaveConfig = () => setAddSourceStep(AddSourceSteps.SaveConfigStep);
const setConfigCompletedStep = () => setAddSourceStep(AddSourceSteps.ConfigCompletedStep);
Expand All @@ -99,9 +100,10 @@ export const AddSource: React.FC<AddSourceProps> = (props) => {
};

const header = <AddSourceHeader name={name} serviceType={serviceType} categories={categories} />;
const Layout = isOrganization ? WorkplaceSearchPageTemplate : PersonalDashboardLayout;

return (
<>
<Layout pageChrome={[NAV.SOURCES, NAV.ADD_SOURCE, name]} isLoading={dataLoading}>
{addSourceCurrentStep === AddSourceSteps.ConfigIntroStep && (
<ConfigurationIntro name={name} advanceStep={goToSaveConfig} header={header} />
)}
Expand Down Expand Up @@ -158,6 +160,6 @@ export const AddSource: React.FC<AddSourceProps> = (props) => {
{addSourceCurrentStep === AddSourceSteps.ReauthenticateStep && (
<Reauthenticate name={name} header={header} />
)}
</>
</Layout>
);
};
95 changes: 54 additions & 41 deletions ...ons/workplace_search/views/content_sources/components/add_source/add_source_list.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ import { shallow } from 'enzyme';

import { EuiEmptyPrompt, EuiFieldSearch } from '@elastic/eui';

import { Loading } from '../../../../../shared/loading';
import { getPageDescription } from '../../../../../test_helpers';
import {
WorkplaceSearchPageTemplate,
PersonalDashboardLayout,
} from '../../../../components/layout';
import { ViewContentHeader } from '../../../../components/shared/view_content_header';

import { AddSourceList } from './add_source_list';
Expand Down Expand Up @@ -54,14 +58,21 @@ describe('AddSourceList', () => {
expect(wrapper.find(AvailableSourcesList)).toHaveLength(1);
});

it('returns loading when loading', () => {
setMockValues({
...mockValues,
dataLoading: true,
describe('layout', () => {
it('renders the default workplace search layout when on an organization view', () => {
setMockValues({ ...mockValues, isOrganization: true });
const wrapper = shallow(<AddSourceList />);

expect(wrapper.type()).toEqual(WorkplaceSearchPageTemplate);
});
const wrapper = shallow(<AddSourceList />);

expect(wrapper.find(Loading)).toHaveLength(1);
it('renders the personal dashboard layout and a header when not in an organization', () => {
setMockValues({ ...mockValues, isOrganization: false });
const wrapper = shallow(<AddSourceList />);

expect(wrapper.type()).toEqual(PersonalDashboardLayout);
expect(wrapper.find(ViewContentHeader)).toHaveLength(1);
});
});

describe('filters sources', () => {
Expand Down Expand Up @@ -97,49 +108,51 @@ describe('AddSourceList', () => {
});

describe('content headings', () => {
it('should render correct organization heading with sources', () => {
const wrapper = shallow(<AddSourceList />);

expect(wrapper.find(ViewContentHeader).prop('description')).toEqual(
ADD_SOURCE_ORG_SOURCE_DESCRIPTION
);
});
describe('organization view', () => {
it('should render the correct organization heading with sources', () => {
const wrapper = shallow(<AddSourceList />);

it('should render correct organization heading without sources', () => {
setMockValues({
...mockValues,
contentSources: [],
expect(getPageDescription(wrapper)).toEqual(ADD_SOURCE_ORG_SOURCE_DESCRIPTION);
});
const wrapper = shallow(<AddSourceList />);

expect(wrapper.find(ViewContentHeader).prop('description')).toEqual(
ADD_SOURCE_NEW_SOURCE_DESCRIPTION + ADD_SOURCE_ORG_SOURCE_DESCRIPTION
);
});
it('should render the correct organization heading without sources', () => {
setMockValues({
...mockValues,
contentSources: [],
});
const wrapper = shallow(<AddSourceList />);

it('should render correct account heading with sources', () => {
const wrapper = shallow(<AddSourceList />);
setMockValues({
...mockValues,
isOrganization: false,
expect(getPageDescription(wrapper)).toEqual(
ADD_SOURCE_NEW_SOURCE_DESCRIPTION + ADD_SOURCE_ORG_SOURCE_DESCRIPTION
);
});

expect(wrapper.find(ViewContentHeader).prop('description')).toEqual(
ADD_SOURCE_ORG_SOURCE_DESCRIPTION
);
});

it('should render correct account heading without sources', () => {
setMockValues({
...mockValues,
isOrganization: false,
contentSources: [],
describe('personal dashboard view', () => {
it('should render the correct personal heading with sources', () => {
setMockValues({
...mockValues,
isOrganization: false,
});
const wrapper = shallow(<AddSourceList />);

expect(wrapper.find(ViewContentHeader).prop('description')).toEqual(
ADD_SOURCE_PRIVATE_SOURCE_DESCRIPTION
);
});
const wrapper = shallow(<AddSourceList />);

expect(wrapper.find(ViewContentHeader).prop('description')).toEqual(
ADD_SOURCE_NEW_SOURCE_DESCRIPTION + ADD_SOURCE_PRIVATE_SOURCE_DESCRIPTION
);
it('should render the correct personal heading without sources', () => {
setMockValues({
...mockValues,
isOrganization: false,
contentSources: [],
});
const wrapper = shallow(<AddSourceList />);

expect(wrapper.find(ViewContentHeader).prop('description')).toEqual(
ADD_SOURCE_NEW_SOURCE_DESCRIPTION + ADD_SOURCE_PRIVATE_SOURCE_DESCRIPTION
);
});
});
});

Expand Down
27 changes: 19 additions & 8 deletions ...ications/workplace_search/views/content_sources/components/add_source/add_source_list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,15 @@ import {
EuiEmptyPrompt,
} from '@elastic/eui';

import { Loading } from '../../../../../shared/loading';
import { AppLogic } from '../../../../app_logic';
import noSharedSourcesIcon from '../../../../assets/share_circle.svg';
import {
WorkplaceSearchPageTemplate,
PersonalDashboardLayout,
} from '../../../../components/layout';
import { ContentSection } from '../../../../components/shared/content_section';
import { ViewContentHeader } from '../../../../components/shared/view_content_header';
import { CUSTOM_SERVICE_TYPE } from '../../../../constants';
import { NAV, CUSTOM_SERVICE_TYPE } from '../../../../constants';
import { SourceDataItem } from '../../../../types';
import { SourcesLogic } from '../../sources_logic';

Expand Down Expand Up @@ -58,8 +61,6 @@ export const AddSourceList: React.FC = () => {
return resetSourcesState;
}, []);

if (dataLoading) return <Loading />;

const hasSources = contentSources.length > 0;
const showConfiguredSourcesList = configuredSources.find(
({ serviceType }) => serviceType !== CUSTOM_SERVICE_TYPE
Expand Down Expand Up @@ -97,12 +98,22 @@ export const AddSourceList: React.FC = () => {
filterConfiguredSources
) as SourceDataItem[];

const Layout = isOrganization ? WorkplaceSearchPageTemplate : PersonalDashboardLayout;
yakhinvadim marked this conversation as resolved.
Show resolved Hide resolved

return (
<>
<ViewContentHeader title={PAGE_TITLE} description={PAGE_DESCRIPTION} />
<Layout
pageChrome={[NAV.SOURCES, NAV.ADD_SOURCE]}
pageViewTelemetry="add_source"
pageHeader={{ pageTitle: PAGE_TITLE, description: PAGE_DESCRIPTION }}
isLoading={dataLoading}
>
{!isOrganization && (
<div>
<ViewContentHeader title={PAGE_TITLE} description={PAGE_DESCRIPTION} />
</div>
)}
yakhinvadim marked this conversation as resolved.
Show resolved Hide resolved
{showConfiguredSourcesList || isOrganization ? (
<ContentSection>
<EuiSpacer size="m" />
<EuiFormRow>
<EuiFieldSearch
data-test-subj="FilterSourcesInput"
Expand Down Expand Up @@ -142,6 +153,6 @@ export const AddSourceList: React.FC = () => {
</EuiFlexGroup>
</ContentSection>
)}
</>
</Layout>
);
};