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

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/display_settings.test.tsx

@@ -16,7 +16,6 @@ import { shallow } from 'enzyme';
 
 import { EuiButton, EuiTabbedContent } from '@elastic/eui';
 
-import { Loading } from '../../../../../shared/loading';
 import { UnsavedChangesPrompt } from '../../../../../shared/unsaved_changes_prompt';
 import { ViewContentHeader } from '../../../../components/shared/view_content_header';
 
@@ -57,13 +56,6 @@ describe('DisplaySettings', () => {
     expect(wrapper.find('form')).toHaveLength(1);
   });
 
-  it('returns loading when loading', () => {
-    setMockValues({ ...values, dataLoading: true });
-    const wrapper = shallow(<DisplaySettings tabId={0} />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   describe('tabbed content', () => {
     const tabs = [
       {

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/display_settings.tsx

@@ -20,10 +20,10 @@ import {
 } from '@elastic/eui';
 
 import { clearFlashMessages } from '../../../../../shared/flash_messages';
-import { Loading } from '../../../../../shared/loading';
 import { UnsavedChangesPrompt } from '../../../../../shared/unsaved_changes_prompt';
 import { ViewContentHeader } from '../../../../components/shared/view_content_header';
-import { SAVE_BUTTON } from '../../../../constants';
+import { NAV, SAVE_BUTTON } from '../../../../constants';
+import { SourceLayout } from '../source_layout';
 
 import {
   UNSAVED_MESSAGE,
@@ -64,8 +64,6 @@ export const DisplaySettings: React.FC<DisplaySettingsProps> = ({ tabId }) => {
     return clearFlashMessages;
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   const tabs = [
     {
       id: 'search_results',
@@ -89,7 +87,11 @@ export const DisplaySettings: React.FC<DisplaySettingsProps> = ({ tabId }) => {
   };
 
   return (
-    <>
+    <SourceLayout
+      pageChrome={[NAV.DISPLAY_SETTINGS]}
+      pageViewTelemetry="source_display_settings"
+      isLoading={dataLoading}
+    >
       <UnsavedChangesPrompt
         hasUnsavedChanges={!navigatingBetweenTabs && hasUnsavedChanges}
         messageText={UNSAVED_MESSAGE}
@@ -123,6 +125,6 @@ export const DisplaySettings: React.FC<DisplaySettingsProps> = ({ tabId }) => {
         )}
       </form>
       {addFieldModalVisible && <FieldEditorModal />}
-    </>
+    </SourceLayout>
   );
 };

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/overview.test.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import '../../../../__mocks__/shallow_useeffect.mock';
-
 import { setMockValues } from '../../../../__mocks__/kea_logic';
 import { fullContentSources } from '../../../__mocks__/content_sources.mock';
 
@@ -16,7 +14,6 @@ import { shallow } from 'enzyme';
 
 import { EuiEmptyPrompt, EuiPanel, EuiTable } from '@elastic/eui';
 
-import { Loading } from '../../../../shared/loading';
 import { ComponentLoader } from '../../../components/shared/component_loader';
 
 import { Overview } from './overview';
@@ -44,13 +41,6 @@ describe('Overview', () => {
     expect(documentSummary.find('[data-test-subj="DocumentSummaryRow"]')).toHaveLength(1);
   });
 
-  it('returns Loading when loading', () => {
-    setMockValues({ ...mockValues, dataLoading: true });
-    const wrapper = shallow(<Overview />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('renders ComponentLoader when loading', () => {
     setMockValues({
       ...mockValues,

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/overview.tsx

@@ -29,7 +29,6 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Loading } from '../../../../shared/loading';
 import { EuiPanelTo } from '../../../../shared/react_router_helpers';
 import { AppLogic } from '../../../app_logic';
 import aclImage from '../../../assets/supports_acl.svg';
@@ -78,8 +77,10 @@ import {
 } from '../constants';
 import { SourceLogic } from '../source_logic';
 
+import { SourceLayout } from './source_layout';
+
 export const Overview: React.FC = () => {
-  const { contentSource, dataLoading } = useValues(SourceLogic);
+  const { contentSource } = useValues(SourceLogic);
   const { isOrganization } = useValues(AppLogic);
 
   const {
@@ -97,8 +98,6 @@ export const Overview: React.FC = () => {
     isFederatedSource,
   } = contentSource;
 
-  if (dataLoading) return <Loading />;
-
   const DocumentSummary = () => {
     let totalDocuments = 0;
     const tableContent = summary?.map((item, index) => {
@@ -450,8 +449,9 @@ export const Overview: React.FC = () => {
   );
 
   return (
-    <>
+    <SourceLayout pageViewTelemetry="source_overview">
       <ViewContentHeader title="Source overview" />
+
       <EuiFlexGroup gutterSize="xl" alignItems="flexStart">
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="xl" direction="column">
@@ -513,6 +513,6 @@ export const Overview: React.FC = () => {
           </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </>
+    </SourceLayout>
   );
 };

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema.test.tsx

@@ -16,7 +16,6 @@ import { shallow } from 'enzyme';
 
 import { EuiEmptyPrompt, EuiFieldSearch } from '@elastic/eui';
 
-import { Loading } from '../../../../../shared/loading';
 import { SchemaAddFieldModal, SchemaErrorsCallout } from '../../../../../shared/schema';
 
 import { Schema } from './schema';
@@ -71,13 +70,6 @@ describe('Schema', () => {
     expect(wrapper.find(SchemaFieldsTable)).toHaveLength(1);
   });
 
-  it('returns loading when loading', () => {
-    setMockValues({ ...mockValues, dataLoading: true });
-    const wrapper = shallow(<Schema />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('handles empty state', () => {
     setMockValues({ ...mockValues, activeSchema: {} });
     const wrapper = shallow(<Schema />);

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema.tsx

@@ -20,11 +20,12 @@ import {
   EuiPanel,
 } from '@elastic/eui';
 
-import { Loading } from '../../../../../shared/loading';
 import { SchemaAddFieldModal, SchemaErrorsCallout } from '../../../../../shared/schema';
 import { AppLogic } from '../../../../app_logic';
 import { ViewContentHeader } from '../../../../components/shared/view_content_header';
+import { NAV } from '../../../../constants';
 import { getReindexJobRoute } from '../../../../routes';
+import { SourceLayout } from '../source_layout';
 
 import {
   SCHEMA_ADD_FIELD_BUTTON,
@@ -65,8 +66,6 @@ export const Schema: React.FC = () => {
     initializeSchema();
   }, []);
 
-  if (dataLoading) return <Loading />;
-
   const hasSchemaFields = Object.keys(activeSchema).length > 0;
   const { hasErrors, activeReindexJobId } = mostRecentIndexJob;
 
@@ -77,7 +76,11 @@ export const Schema: React.FC = () => {
   );
 
   return (
-    <>
+    <SourceLayout
+      pageChrome={[NAV.SCHEMA]}
+      pageViewTelemetry="source_schema"
+      isLoading={dataLoading}
+    >
       <ViewContentHeader
         title={SCHEMA_MANAGE_SCHEMA_TITLE}
         description={SCHEMA_MANAGE_SCHEMA_DESCRIPTION}
@@ -141,6 +144,6 @@ export const Schema: React.FC = () => {
           closeAddFieldModal={closeAddFieldModal}
         />
       )}
-    </>
+    </SourceLayout>
   );
 };

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/schema/schema_change_errors.tsx

@@ -12,6 +12,8 @@ import { useActions, useValues } from 'kea';
 
 import { SchemaErrorsAccordion } from '../../../../../shared/schema';
 import { ViewContentHeader } from '../../../../components/shared/view_content_header';
+import { NAV } from '../../../../constants';
+import { SourceLayout } from '../source_layout';
 
 import { SCHEMA_ERRORS_HEADING } from './constants';
 import { SchemaLogic } from './schema_logic';
@@ -30,9 +32,9 @@ export const SchemaChangeErrors: React.FC = () => {
   }, []);
 
   return (
-    <>
+    <SourceLayout pageChrome={[NAV.SCHEMA]} pageViewTelemetry="source_schema">
       <ViewContentHeader title={SCHEMA_ERRORS_HEADING} />
       <SchemaErrorsAccordion fieldCoercionErrors={fieldCoercionErrors} schema={serverSchema} />
-    </>
+    </SourceLayout>
   );
 };

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_content.test.tsx

@@ -25,7 +25,6 @@ import {
 } from '@elastic/eui';
 
 import { DEFAULT_META } from '../../../../shared/constants';
-import { Loading } from '../../../../shared/loading';
 import { ComponentLoader } from '../../../components/shared/component_loader';
 import { TablePaginationBar } from '../../../components/shared/table_pagination_bar';
 
@@ -61,13 +60,6 @@ describe('SourceContent', () => {
     expect(wrapper.find(EuiTable)).toHaveLength(1);
   });
 
-  it('returns Loading when loading', () => {
-    setMockValues({ ...mockValues, dataLoading: true });
-    const wrapper = shallow(<SourceContent />);
-
-    expect(wrapper.find(Loading)).toHaveLength(1);
-  });
-
   it('returns ComponentLoader when section loading', () => {
     setMockValues({ ...mockValues, sectionLoading: true });
     const wrapper = shallow(<SourceContent />);

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_content.tsx

@@ -31,12 +31,11 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { Loading } from '../../../../shared/loading';
 import { TruncatedContent } from '../../../../shared/truncate';
 import { ComponentLoader } from '../../../components/shared/component_loader';
 import { TablePaginationBar } from '../../../components/shared/table_pagination_bar';
 import { ViewContentHeader } from '../../../components/shared/view_content_header';
-import { CUSTOM_SERVICE_TYPE } from '../../../constants';
+import { NAV, CUSTOM_SERVICE_TYPE } from '../../../constants';
 import { CUSTOM_SOURCE_DOCS_URL } from '../../../routes';
 import { SourceContentItem } from '../../../types';
 import {
@@ -51,6 +50,8 @@ import {
 } from '../constants';
 import { SourceLogic } from '../source_logic';
 
+import { SourceLayout } from './source_layout';
+
 const MAX_LENGTH = 28;
 
 export const SourceContent: React.FC = () => {
@@ -67,16 +68,13 @@ export const SourceContent: React.FC = () => {
     },
     contentItems,
     contentFilterValue,
-    dataLoading,
     sectionLoading,
   } = useValues(SourceLogic);
 
   useEffect(() => {
     searchContentSourceDocuments(id);
   }, [contentFilterValue, activePage]);
 
-  if (dataLoading) return <Loading />;
-
   const showPagination = totalPages > 1;
   const hasItems = totalItems > 0;
   const emptyMessage = contentFilterValue
@@ -193,7 +191,7 @@ export const SourceContent: React.FC = () => {
   );
 
   return (
-    <>
+    <SourceLayout pageChrome={[NAV.CONTENT]} pageViewTelemetry="source_overview">
       <ViewContentHeader title={SOURCE_CONTENT_TITLE} />
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem grow={false}>
@@ -219,6 +217,6 @@ export const SourceContent: React.FC = () => {
       <EuiSpacer size="xl" />
       {sectionLoading && <ComponentLoader text={CONTENT_LOADING_TEXT} />}
       {!sectionLoading && (hasItems ? contentTable : emptyState)}
-    </>
+    </SourceLayout>
   );
 };

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_settings.tsx

@@ -26,6 +26,8 @@ import { AppLogic } from '../../../app_logic';
 import { ContentSection } from '../../../components/shared/content_section';
 import { SourceConfigFields } from '../../../components/shared/source_config_fields';
 import { ViewContentHeader } from '../../../components/shared/view_content_header';
+import { NAV } from '../../../constants';
+
 import {
   CANCEL_BUTTON,
   OK_BUTTON,
@@ -52,6 +54,8 @@ import {
 import { staticSourceData } from '../source_data';
 import { SourceLogic } from '../source_logic';
 
+import { SourceLayout } from './source_layout';
+
 export const SourceSettings: React.FC = () => {
   const { updateContentSource, removeContentSource } = useActions(SourceLogic);
   const { getSourceConfigData } = useActions(AddSourceLogic);
@@ -128,7 +132,7 @@ export const SourceSettings: React.FC = () => {
   );
 
   return (
-    <>
+    <SourceLayout pageChrome={[NAV.SETTINGS]} pageViewTelemetry="source_settings">
       <ViewContentHeader title={SOURCE_SETTINGS_HEADING} />
       <ContentSection title={SOURCE_SETTINGS_TITLE} description={SOURCE_SETTINGS_DESCRIPTION}>
         <form onSubmit={submitNameChange}>
@@ -197,6 +201,6 @@ export const SourceSettings: React.FC = () => {
         </EuiButton>
         {confirmModalVisible && confirmModal}
       </ContentSection>
-    </>
+    </SourceLayout>
   );
 };