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

[Enterprise Search] Add solution-level side navigation #74705

Merged
merged 10 commits into from
Aug 12, 2020
Merged

[Enterprise Search] Add solution-level side navigation #74705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4f6cb95
Add basic layout/sidebar blocking
cee-chen Aug 7, 2020
b9b38ad
Add sidebar styles + static links
cee-chen Aug 7, 2020
cee4072
Refactor SideNav to be a reusable component
cee-chen Aug 7, 2020
dd5ec40
Refactor all views to account for in-router Layout
cee-chen Aug 7, 2020
4743611
Fix root redirects not working as expected
cee-chen Aug 10, 2020
f1206c2
Implement active styling for links
cee-chen Aug 7, 2020
c3e6cc1
Fix failing location tests
cee-chen Aug 7, 2020
3a5e7fb
Add responsive toggle + styling
cee-chen Aug 11, 2020
9f371ad
Add navigation accessibility attributes/controls
cee-chen Aug 11, 2020
e63d2b2
[Feedback] Update mobile UX to close menu on link click/navigation
cee-chen Aug 11, 2020
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
2 changes: 1 addition & 1 deletion x-pack/plugins/enterprise_search/public/applications/__mocks__/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

export { mockHistory } from './react_router_history.mock';
export { mockHistory, mockLocation } from './react_router_history.mock';
export { mockKibanaContext } from './kibana_context.mock';
export { mockLicenseContext } from './license_context.mock';
export {
Expand Down
10 changes: 9 additions & 1 deletion x-pack/plugins/enterprise_search/public/applications/__mocks__/react_router_history.mock.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

/**
* NOTE: This variable name MUST start with 'mock*' in order for
* NOTE: These variable names MUST start with 'mock*' in order for
* Jest to accept its use within a jest.mock()
*/
export const mockHistory = {
Expand All @@ -15,9 +15,17 @@ export const mockHistory = {
pathname: '/current-path',
},
};
export const mockLocation = {
key: 'someKey',
pathname: '/current-path',
search: '?query=something',
hash: '#hash',
state: {},
};

jest.mock('react-router-dom', () => ({
useHistory: jest.fn(() => mockHistory),
useLocation: jest.fn(() => mockLocation),
}));

/**
Expand Down
73 changes: 35 additions & 38 deletions .../enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

import React, { useContext } from 'react';
import { EuiPage, EuiPageBody, EuiPageContent, EuiEmptyPrompt, EuiButton } from '@elastic/eui';
import { EuiPageContent, EuiEmptyPrompt, EuiButton } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';

import { sendTelemetry } from '../../../shared/telemetry';
Expand All @@ -32,43 +32,40 @@ export const EmptyState: React.FC = () => {
};

return (
<EuiPage restrictWidth>
<>
<SetPageChrome isRoot />

<EuiPageBody>
<EngineOverviewHeader />
<EuiPageContent className="emptyState">
<EuiEmptyPrompt
className="emptyState__prompt"
iconType="eyeClosed"
title={
<h2>
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.emptyState.title"
defaultMessage="Create your first engine"
/>
</h2>
}
titleSize="l"
body={
<p>
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.emptyState.description1"
defaultMessage="An App Search engine stores the documents for your search experience."
/>
</p>
}
actions={
<EuiButton iconType="popout" fill {...buttonProps}>
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.emptyState.createFirstEngineCta"
defaultMessage="Create an engine"
/>
</EuiButton>
}
/>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
<EngineOverviewHeader />
<EuiPageContent className="emptyState">
<EuiEmptyPrompt
className="emptyState__prompt"
iconType="eyeClosed"
title={
<h2>
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.emptyState.title"
defaultMessage="Create your first engine"
/>
</h2>
}
titleSize="l"
body={
<p>
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.emptyState.description1"
defaultMessage="An App Search engine stores the documents for your search experience."
/>
</p>
}
actions={
<EuiButton iconType="popout" fill {...buttonProps}>
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.emptyState.createFirstEngineCta"
defaultMessage="Create an engine"
/>
</EuiButton>
}
/>
</EuiPageContent>
</>
);
};
16 changes: 7 additions & 9 deletions .../enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

import React from 'react';
import { EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui';
import { EuiPageContent } from '@elastic/eui';

import { ErrorStatePrompt } from '../../../shared/error_state';
import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
Expand All @@ -16,16 +16,14 @@ import './empty_states.scss';

export const ErrorState: React.FC = () => {
return (
<EuiPage restrictWidth>
<>
<SetPageChrome isRoot />
<SendTelemetry action="error" metric="cannot_connect" />

<EuiPageBody>
<EngineOverviewHeader />
<EuiPageContent>
<ErrorStatePrompt />
</EuiPageContent>
</EuiPageBody>
</EuiPage>
<EngineOverviewHeader />
<EuiPageContent>
<ErrorStatePrompt />
</EuiPageContent>
</>
);
};
21 changes: 9 additions & 12 deletions ...nterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

import React from 'react';
import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiLoadingContent } from '@elastic/eui';
import { EuiPageContent, EuiSpacer, EuiLoadingContent } from '@elastic/eui';

import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
import { EngineOverviewHeader } from '../engine_overview_header';
Expand All @@ -14,17 +14,14 @@ import './empty_states.scss';

export const LoadingState: React.FC = () => {
return (
<EuiPage restrictWidth>
<>
<SetPageChrome isRoot />

<EuiPageBody>
<EngineOverviewHeader />
<EuiPageContent className="emptyState">
<EuiLoadingContent lines={5} />
<EuiSpacer size="xxl" />
<EuiLoadingContent lines={4} />
</EuiPageContent>
</EuiPageBody>
</EuiPage>
<EngineOverviewHeader />
<EuiPageContent className="emptyState">
<EuiLoadingContent lines={5} />
<EuiSpacer size="xxl" />
<EuiLoadingContent lines={4} />
</EuiPageContent>
</>
);
};
13 changes: 3 additions & 10 deletions ...ise_search/public/applications/app_search/components/engine_overview/engine_overview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,11 @@
* you may not use this file except in compliance with the Elastic License.
*/

/**
* Engine Overview
*/
.engineOverview {
width: 100%;

&__body {
padding: $euiSize;
padding: $euiSize;

@include euiBreakpoint('m', 'l', 'xl') {
padding: $euiSizeXL;
}
@include euiBreakpoint('m', 'l', 'xl') {
padding: $euiSizeXL;
}
}

Expand Down
111 changes: 53 additions & 58 deletions ...rise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@

import React, { useContext, useEffect, useState } from 'react';
import {
EuiPage,
EuiPageBody,
EuiPageContent,
EuiPageContentHeader,
EuiPageContentBody,
Expand Down Expand Up @@ -92,64 +90,61 @@ export const EngineOverview: React.FC = () => {
if (!engines.length) return <EmptyState />;

return (
<EuiPage restrictWidth className="engineOverview">
<>
<SetPageChrome isRoot />
<SendTelemetry action="viewed" metric="engines_overview" />

<EuiPageBody>
<EngineOverviewHeader />

<EuiPageContent panelPaddingSize="s" className="engineOverview__body">
<EuiPageContentHeader>
<EuiTitle size="s">
<h2>
<img src={EnginesIcon} alt="" className="engineIcon" />
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.enginesOverview.engines"
defaultMessage="Engines"
/>
</h2>
</EuiTitle>
</EuiPageContentHeader>
<EuiPageContentBody data-test-subj="appSearchEngines">
<EngineTable
data={engines}
pagination={{
totalEngines: enginesTotal,
pageIndex: enginesPage - 1,
onPaginate: setEnginesPage,
}}
/>
</EuiPageContentBody>

{metaEngines.length > 0 && (
<>
<EuiSpacer size="xl" />
<EuiPageContentHeader>
<EuiTitle size="s">
<h2>
<img src={MetaEnginesIcon} alt="" className="engineIcon" />
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.enginesOverview.metaEngines"
defaultMessage="Meta Engines"
/>
</h2>
</EuiTitle>
</EuiPageContentHeader>
<EuiPageContentBody data-test-subj="appSearchMetaEngines">
<EngineTable
data={metaEngines}
pagination={{
totalEngines: metaEnginesTotal,
pageIndex: metaEnginesPage - 1,
onPaginate: setMetaEnginesPage,
}}
/>
</EuiPageContentBody>
</>
)}
</EuiPageContent>
</EuiPageBody>
</EuiPage>
<EngineOverviewHeader />
<EuiPageContent panelPaddingSize="s" className="engineOverview">
<EuiPageContentHeader>
<EuiTitle size="s">
<h2>
<img src={EnginesIcon} alt="" className="engineIcon" />
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.enginesOverview.engines"
defaultMessage="Engines"
/>
</h2>
</EuiTitle>
</EuiPageContentHeader>
<EuiPageContentBody data-test-subj="appSearchEngines">
<EngineTable
data={engines}
pagination={{
totalEngines: enginesTotal,
pageIndex: enginesPage - 1,
onPaginate: setEnginesPage,
}}
/>
</EuiPageContentBody>

{metaEngines.length > 0 && (
<>
<EuiSpacer size="xl" />
<EuiPageContentHeader>
<EuiTitle size="s">
<h2>
<img src={MetaEnginesIcon} alt="" className="engineIcon" />
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.enginesOverview.metaEngines"
defaultMessage="Meta Engines"
/>
</h2>
</EuiTitle>
</EuiPageContentHeader>
<EuiPageContentBody data-test-subj="appSearchMetaEngines">
<EngineTable
data={metaEngines}
pagination={{
totalEngines: metaEnginesTotal,
pageIndex: metaEnginesPage - 1,
onPaginate: setMetaEnginesPage,
}}
/>
</EuiPageContentBody>
</>
)}
</EuiPageContent>
</>
);
};
Loading