diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/__snapshots__/empty_state.test.tsx.snap b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/__snapshots__/empty_state.test.tsx.snap
index 957c94c80680d..75b8177d9dac3 100644
--- a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/__snapshots__/empty_state.test.tsx.snap
+++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/__snapshots__/empty_state.test.tsx.snap
@@ -120,11 +120,10 @@ exports[`EmptyState should render normally 1`] = `
-
+
-
+
diff --git a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.tsx b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.tsx
index c05f6a1f193b7..af49e8c36fe3b 100644
--- a/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.tsx
+++ b/src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.tsx
@@ -24,6 +24,7 @@ import {
EuiCard,
EuiLink,
EuiText,
+ EuiFlexGroup,
} from '@elastic/eui';
import { useHistory } from 'react-router-dom';
import { reactRouterNavigate } from '../../../../../../plugins/kibana_react/public';
@@ -143,8 +144,8 @@ export const EmptyState = ({
-
-
+
+
-
+
-
+
diff --git a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
index 71d034d32bd1b..9ad2bd73674bd 100644
--- a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
+++ b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
@@ -2,7 +2,6 @@
exports[`KibanaPageTemplate render basic template 1`] = `
= ({
);
}
+ const emptyStateDefaultTemplate = pageSideBar ? 'centeredContent' : 'centeredBody';
+
/**
* An easy way to create the right content for empty pages
*/
if (isEmptyState && pageHeader && !children) {
- template = template ?? 'centeredBody';
+ template = template ?? emptyStateDefaultTemplate;
const { iconType, pageTitle, description, rightSideItems } = pageHeader;
pageHeader = undefined;
children = (
@@ -104,14 +106,13 @@ export const KibanaPageTemplate: FunctionComponent = ({
} else if (isEmptyState && pageHeader && children) {
template = template ?? 'centeredContent';
} else if (isEmptyState && !pageHeader) {
- template = template ?? 'centeredBody';
+ template = template ?? emptyStateDefaultTemplate;
}
return (
void;
setBreadcrumbs: () => void;
}
-export const ManagementLandingPage = ({ version, setBreadcrumbs }: ManagementLandingPageProps) => {
+export const ManagementLandingPage = ({
+ version,
+ setBreadcrumbs,
+ onAppMounted,
+}: ManagementLandingPageProps) => {
setBreadcrumbs();
+ useEffect(() => {
+ onAppMounted('');
+ }, [onAppMounted]);
+
return (
)}
/>
diff --git a/src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss b/src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss
index 4fc3651ee9f73..a1e5b4e141765 100644
--- a/src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss
+++ b/src/plugins/presentation_util/public/components/solution_toolbar/items/button.scss
@@ -6,7 +6,9 @@
border-color: $euiBorderColor !important; // sass-lint:disable-line no-important
@include kbnThemeStyle('v8') {
- border-width: $euiBorderWidthThin;
- border-style: solid;
+ &[class*='--text'] {
+ border-width: $euiBorderWidthThin;
+ border-style: solid;
+ }
}
}
diff --git a/test/functional/services/common/test_subjects.ts b/test/functional/services/common/test_subjects.ts
index ae04fe5d2b939..3f47c6155f175 100644
--- a/test/functional/services/common/test_subjects.ts
+++ b/test/functional/services/common/test_subjects.ts
@@ -312,9 +312,12 @@ export class TestSubjects extends FtrService {
return testSubjSelector(selector);
}
- public async scrollIntoView(selector: string) {
+ public async scrollIntoView(
+ selector: string,
+ offset?: number | { topOffset?: number; bottomOffset?: number }
+ ) {
const element = await this.find(selector);
- await element.scrollIntoViewIfNecessary();
+ await element.scrollIntoViewIfNecessary(offset);
}
// isChecked always returns false when run on an euiSwitch, because they use the aria-checked attribute
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/error_connecting/error_connecting.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/error_connecting/error_connecting.tsx
index a53e8a099177c..84dcb07a07474 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/error_connecting/error_connecting.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/error_connecting/error_connecting.tsx
@@ -7,7 +7,7 @@
import React from 'react';
-import { EuiPage, EuiPageContent } from '@elastic/eui';
+import { KibanaPageTemplate } from '../../../../../../../../src/plugins/kibana_react/public';
import { ErrorStatePrompt } from '../../../shared/error_state';
import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
@@ -19,11 +19,9 @@ export const ErrorConnecting: React.FC = () => {
-
-
-
-
-
+
+
+
>
);
};
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/error_connecting/error_connecting.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/error_connecting/error_connecting.tsx
index afee20df106e8..979847b4cf1c6 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/error_connecting/error_connecting.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search/components/error_connecting/error_connecting.tsx
@@ -7,16 +7,15 @@
import React from 'react';
-import { EuiPage, EuiPageContent } from '@elastic/eui';
+import { KibanaPageTemplate } from '../../../../../../../../src/plugins/kibana_react/public';
import { ErrorStatePrompt } from '../../../shared/error_state';
import { SendEnterpriseSearchTelemetry as SendTelemetry } from '../../../shared/telemetry';
export const ErrorConnecting: React.FC = () => (
-
+
-
-
-
-
+
+
+
);
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/error_state/error_state.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/error_state/error_state.tsx
index 8116d55542820..f4914413a80fa 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/error_state/error_state.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/error_state/error_state.tsx
@@ -9,7 +9,7 @@
import React from 'react';
-import { EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui';
+import { KibanaPageTemplate } from '../../../../../../../../src/plugins/kibana_react/public';
import { WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
import { ErrorStatePrompt } from '../../../shared/error_state';
@@ -19,16 +19,14 @@ import { ViewContentHeader } from '../../components/shared/view_content_header';
export const ErrorState: React.FC = () => {
return (
-
+ <>
-
+
-
-
-
-
-
+
+
+ >
);
};
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_content.tsx
index 462b8b2f9dc3e..bfdbe03526164 100644
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_content.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_content.tsx
@@ -116,9 +116,13 @@ const CategoriesPageTemplate: React.FC = ({
return (
{children}
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_content.tsx
index ea60d073c2311..04909b059d8c3 100644
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_content.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_content.tsx
@@ -158,9 +158,13 @@ const AnomaliesPageTemplate: React.FC = ({
return (
{children}
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
index 45e7055f4db2b..ea973df9aad76 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
@@ -703,106 +703,85 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
-
+ }
+ onChange={[Function]}
>
-
-
-
+
+
+
+
+
+
+
-
- }
- onChange={[Function]}
+
-
-
-
-
-
-
-
-
-
-
-
-
- Select or drag your license file
-
-
-
-
-
-
-
+ Select or drag your license file
+
-
+
-
-
-
+
+
+
@@ -1445,106 +1424,85 @@ exports[`UploadLicense should display an error when ES says license is expired 1
-
+ }
+ onChange={[Function]}
>
-
-
-
+
+
+
+
+
+
+
-
- }
- onChange={[Function]}
+
-
-
-
-
-
-
-
-
-
-
-
-
- Select or drag your license file
-
-
-
-
-
-
-
+ Select or drag your license file
+
-
+
-
-
-
+
+
+
@@ -2187,106 +2145,85 @@ exports[`UploadLicense should display an error when ES says license is invalid 1
-
+ }
+ onChange={[Function]}
>
-
-
-
+
+
+
+
+
+
+
-
- }
- onChange={[Function]}
+
-
-
-
-
-
-
-
-
-
-
-
-
- Select or drag your license file
-
-
-
-
-
-
-
+ Select or drag your license file
+
-
+
-
-
-
+
+
+
@@ -2929,106 +2866,85 @@ exports[`UploadLicense should display an error when submitting invalid JSON 1`]
-
+ }
+ onChange={[Function]}
>
-
-
-
+
+
+
+
+
+
+
-
- }
- onChange={[Function]}
+
-
-
-
-
-
-
-
-
-
-
-
-
- Select or drag your license file
-
-
-
-
-
-
-
+ Select or drag your license file
+
-
+
-
-
-
+
+
+
@@ -3671,106 +3587,85 @@ exports[`UploadLicense should display error when ES returns error 1`] = `
-
+ }
+ onChange={[Function]}
>
-
-
-
+
+
+
+
+
+
+
-
- }
- onChange={[Function]}
+
-
-
-
-
-
-
-
-
-
-
-
-
- Select or drag your license file
-
-
-
-
-
-
-
+ Select or drag your license file
+
-
+
-
-
-
+
+
+
diff --git a/x-pack/plugins/license_management/public/application/sections/upload_license/upload_license.js b/x-pack/plugins/license_management/public/application/sections/upload_license/upload_license.js
index 8ae20a2e60757..22933c6207a72 100644
--- a/x-pack/plugins/license_management/public/application/sections/upload_license/upload_license.js
+++ b/x-pack/plugins/license_management/public/application/sections/upload_license/upload_license.js
@@ -160,22 +160,18 @@ export class UploadLicense extends React.PureComponent {
-
-
-
-
- }
- onChange={this.handleFile}
- />
-
-
-
+
+ }
+ onChange={this.handleFile}
+ />
+
{shouldShowTelemetryOptIn(telemetry) && (
-
+
+
-
-
- Create Pipeline
-
-
-
-
}
- isInvalid={true}
+ labelType="label"
>
-
- }
- labelType="label"
- >
-
+
+
-
-
+
- }
- labelType="label"
- >
-
+
+
-
-
- }
- labelType="label"
+ }
+ labelType="label"
+ >
+
+
+
- }
- labelType="label"
+ />
+ }
+ labelType="label"
+ >
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
`;
exports[`PipelineEditor component invalidates form for invalid pipeline id input 1`] = `
-
-
+
+
-
-
- Create Pipeline
-
-
-
-
}
- isInvalid={true}
+ labelType="label"
>
-
- }
- labelType="label"
- >
-
+
+
-
-
+
- }
- labelType="label"
- >
-
+
+
-
-
- }
- labelType="label"
+ }
+ labelType="label"
+ >
+
+
+
- }
- labelType="label"
+ />
+ }
+ labelType="label"
+ >
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
`;
exports[`PipelineEditor component invalidates form for pipeline id with spaces 1`] = `
-
-
+
+
-
-
- Create Pipeline
-
-
-
-
}
- isInvalid={true}
+ labelType="label"
>
-
- }
- labelType="label"
- >
-
+
+
-
-
+
- }
- labelType="label"
- >
-
+
+
-
-
- }
- labelType="label"
+ }
+ labelType="label"
+ >
+
+
+
- }
- labelType="label"
+ />
+ }
+ labelType="label"
+ >
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
`;
exports[`PipelineEditor component matches snapshot for clone pipeline 1`] = `
-
-
+
+
+
-
-
- Clone Pipeline "pipelineToClone"
-
-
-
-
+ }
+ labelType="label"
>
-
- }
- labelType="label"
- >
-
+
+
-
-
- }
- labelType="label"
+ }
+ labelType="label"
+ >
+
+
+
- }
- labelType="label"
+ />
+ }
+ labelType="label"
+ >
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
`;
exports[`PipelineEditor component matches snapshot for create pipeline 1`] = `
-
-
+
+
+
-
-
- Create Pipeline
-
-
-
-
+ }
+ labelType="label"
>
-
- }
- labelType="label"
- >
-
+
+
-
-
+
- }
- labelType="label"
- >
-
+
+
-
-
- }
- labelType="label"
+ }
+ labelType="label"
+ >
+
+
+
- }
- labelType="label"
+ />
+ }
+ labelType="label"
+ >
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
`;
exports[`PipelineEditor component matches snapshot for edit pipeline 1`] = `
-
-
+
+
+
-
-
- Edit Pipeline "pipelineId"
-
-
-
-
+ }
+ labelType="label"
>
-
- }
- labelType="label"
- >
-
+
+
-
-
- }
- labelType="label"
+ }
+ labelType="label"
+ >
+
+
+
- }
- labelType="label"
+ />
+ }
+ labelType="label"
+ >
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
`;
diff --git a/x-pack/plugins/logstash/public/application/components/pipeline_editor/pipeline_editor.js b/x-pack/plugins/logstash/public/application/components/pipeline_editor/pipeline_editor.js
index 2ec7caa976cc8..334c7d0322a84 100644
--- a/x-pack/plugins/logstash/public/application/components/pipeline_editor/pipeline_editor.js
+++ b/x-pack/plugins/logstash/public/application/components/pipeline_editor/pipeline_editor.js
@@ -25,10 +25,10 @@ import {
EuiFieldText,
EuiForm,
EuiFormRow,
- EuiPageContent,
+ EuiPageContentBody,
EuiSelect,
EuiSpacer,
- EuiTitle,
+ EuiPageHeader,
} from '@elastic/eui';
import { ConfirmDeletePipelineModal } from './confirm_delete_pipeline_modal';
import { FlexItemSetting } from './flex_item_setting';
@@ -269,219 +269,211 @@ class PipelineEditorUi extends React.Component {
const { intl } = this.props;
return (
-
-
-
- {this.getPipelineHeadingText()}
-
-
-
- {this.props.isNewPipeline && (
-
- }
- >
-
-
- )}
+
+
+
+
+ {this.props.isNewPipeline && (
}
>
-
+ }
+ >
+
- }
+ name="pipelineDescription"
+ onChange={this.onPipelineDescriptionChange}
+ value={this.state.pipeline.description || ''}
+ />
+
+
+ }
+ >
+
+
+
+
+
+ }
+ >
+ this.handleNumberChange('pipeline.workers', e.target.value)}
+ value={this.state.pipeline.settings['pipeline.workers']}
+ />
+
+
+
+
-
-
-
-
-
- }
+ this.handleNumberChange('pipeline.batch.size', e.target.value)}
+ value={this.state.pipeline.settings['pipeline.batch.size']}
+ />
+
+
this.handleNumberChange('pipeline.workers', e.target.value)}
- value={this.state.pipeline.settings['pipeline.workers']}
+ data-test-subj="inputBatchDelay"
+ onChange={(e) => this.handleNumberChange('pipeline.batch.delay', e.target.value)}
+ value={this.state.pipeline.settings['pipeline.batch.delay']}
/>
-
-
-
-
- this.handleNumberChange('pipeline.batch.size', e.target.value)}
- value={this.state.pipeline.settings['pipeline.batch.size']}
- />
-
-
- this.handleNumberChange('pipeline.batch.delay', e.target.value)}
- value={this.state.pipeline.settings['pipeline.batch.delay']}
- />
-
-
-
-
- this.handleSettingChange('queue.type', e.target.value)}
- options={PIPELINE_EDITOR.QUEUE_TYPES}
- value={this.state.pipeline.settings['queue.type']}
- />
-
-
- this.handleMaxByteNumberChange(e.target.value)}
- value={this.state.maxBytesNumber}
- />
-
-
- this.handleMaxByteUnitChange(e.target.value)}
- options={PIPELINE_EDITOR.UNITS}
- value={this.state.maxBytesUnit}
- />
-
-
-
- this.handleNumberChange('queue.checkpoint.writes', e.target.value)
- }
- value={this.state.pipeline.settings['queue.checkpoint.writes']}
- />
-
-
-
-
-
+
+
+
+
+ this.handleSettingChange('queue.type', e.target.value)}
+ options={PIPELINE_EDITOR.QUEUE_TYPES}
+ value={this.state.pipeline.settings['queue.type']}
+ />
+
+
+ this.handleMaxByteNumberChange(e.target.value)}
+ value={this.state.maxBytesNumber}
+ />
+
+
+ this.handleMaxByteUnitChange(e.target.value)}
+ options={PIPELINE_EDITOR.UNITS}
+ value={this.state.maxBytesUnit}
+ />
+
+
+ this.handleNumberChange('queue.checkpoint.writes', e.target.value)}
+ value={this.state.pipeline.settings['queue.checkpoint.writes']}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!this.props.isNewPipeline && (
-
-
-
-
-
-
-
+
- {!this.props.isNewPipeline && (
-
-
-
-
-
- )}
-
-
+ )}
+
{this.state.showConfirmDeleteModal && (
)}
-
+
);
}
}
diff --git a/x-pack/plugins/logstash/public/application/components/pipeline_list/pipeline_list.js b/x-pack/plugins/logstash/public/application/components/pipeline_list/pipeline_list.js
index a8b03d91f996d..4772669daec62 100644
--- a/x-pack/plugins/logstash/public/application/components/pipeline_list/pipeline_list.js
+++ b/x-pack/plugins/logstash/public/application/components/pipeline_list/pipeline_list.js
@@ -12,9 +12,8 @@ import {
EuiCallOut,
EuiEmptyPrompt,
EuiLoadingSpinner,
- EuiPageContent,
- EuiTitle,
- EuiText,
+ EuiPageContentBody,
+ EuiPageHeader,
EuiSpacer,
} from '@elastic/eui';
@@ -292,36 +291,34 @@ class PipelineListUi extends React.Component {
const { clonePipeline, createPipeline, isReadOnly, openPipeline } = this.props;
const { isSelectable, message, pipelines, selection, showConfirmDeleteModal } = this.state;
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
- {this.renderNoPermissionCallOut()}
-
-
+
+
+ }
+ description={
+
+ }
+ bottomBorder
+ />
+
+ {this.renderNoPermissionCallOut()}
+
+
-
+
);
}
}
diff --git a/x-pack/plugins/ml/public/application/_index.scss b/x-pack/plugins/ml/public/application/_index.scss
index fb61a2a16c19d..8fec50ed0e019 100644
--- a/x-pack/plugins/ml/public/application/_index.scss
+++ b/x-pack/plugins/ml/public/application/_index.scss
@@ -25,7 +25,6 @@
@import 'components/items_grid/index';
@import 'components/job_selector/index';
@import 'components/loading_indicator/index'; // SASSTODO: This component should be replaced with EuiLoadingSpinner
- @import 'components/navigation_menu/index';
@import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly
@import 'components/stats_bar/index';
@import 'components/ml_embedded_map/index';
diff --git a/x-pack/plugins/ml/public/application/components/navigation_menu/_index.scss b/x-pack/plugins/ml/public/application/components/navigation_menu/_index.scss
deleted file mode 100644
index 5135bba535dd9..0000000000000
--- a/x-pack/plugins/ml/public/application/components/navigation_menu/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'navigation_menu'
diff --git a/x-pack/plugins/ml/public/application/components/navigation_menu/_navigation_menu.scss b/x-pack/plugins/ml/public/application/components/navigation_menu/_navigation_menu.scss
deleted file mode 100644
index 0d14bb46e8deb..0000000000000
--- a/x-pack/plugins/ml/public/application/components/navigation_menu/_navigation_menu.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.mlNavigationMenu {
- padding: 0 $euiSizeM;
- border-bottom: $euiBorderThin;
- background-color: $euiColorEmptyShade;
-}
diff --git a/x-pack/plugins/ml/public/application/components/navigation_menu/main_tabs.scss b/x-pack/plugins/ml/public/application/components/navigation_menu/main_tabs.scss
new file mode 100644
index 0000000000000..05b85e4d20633
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/components/navigation_menu/main_tabs.scss
@@ -0,0 +1,4 @@
+.mlMainTabs {
+ // Hack to address https://github.com/elastic/kibana/pull/103197#discussion_r659645946
+ padding-bottom: 0 !important;
+}
diff --git a/x-pack/plugins/ml/public/application/components/navigation_menu/main_tabs.tsx b/x-pack/plugins/ml/public/application/components/navigation_menu/main_tabs.tsx
index 0f381fb7acee9..5073896eba9f8 100644
--- a/x-pack/plugins/ml/public/application/components/navigation_menu/main_tabs.tsx
+++ b/x-pack/plugins/ml/public/application/components/navigation_menu/main_tabs.tsx
@@ -7,13 +7,14 @@
import React, { FC, useState, useEffect } from 'react';
-import { EuiTabs, EuiTab } from '@elastic/eui';
+import { EuiPageHeader } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { TabId } from './navigation_menu';
import { useMlKibana, useMlUrlGenerator, useNavigateToPath } from '../../contexts/kibana';
import { MlUrlGeneratorState } from '../../../../common/types/ml_url_generator';
import { useUrlState } from '../../util/url_state';
import { ML_APP_NAME } from '../../../../common/constants/app';
+import './main_tabs.scss';
export interface Tab {
id: TabId;
@@ -154,40 +155,26 @@ export const MainTabs: FC = ({ tabId, disableLinks }) => {
}, [selectedTabId]);
return (
-
- {tabs.map((tab: Tab) => {
+ {
const { id, disabled } = tab;
const testSubject = TAB_DATA[id].testSubject;
const defaultPathId = (TAB_DATA[id].pathId || id) as MlUrlGeneratorState['page'];
- return disabled ? (
-
-
- {tab.name}
-
-
- ) : (
-
- {
- onSelectedTabChanged(id);
- redirectToTab(defaultPathId);
- }}
- isSelected={id === selectedTabId}
- key={`tab-${id}-key`}
- >
- {tab.name}
-
-
- );
+ return {
+ label: tab.name,
+ disabled,
+ onClick: () => {
+ onSelectedTabChanged(id);
+ redirectToTab(defaultPathId);
+ },
+ 'data-test-subj': testSubject + (id === selectedTabId ? ' selected' : ''),
+ isSelected: id === selectedTabId,
+ };
})}
-
+ />
);
};
diff --git a/x-pack/plugins/ml/public/application/components/navigation_menu/navigation_menu.tsx b/x-pack/plugins/ml/public/application/components/navigation_menu/navigation_menu.tsx
index e836dc3ddced7..986a88d789b36 100644
--- a/x-pack/plugins/ml/public/application/components/navigation_menu/navigation_menu.tsx
+++ b/x-pack/plugins/ml/public/application/components/navigation_menu/navigation_menu.tsx
@@ -5,8 +5,7 @@
* 2.0.
*/
-import React, { Fragment, FC } from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { FC } from 'react';
import { isFullLicense } from '../../license';
@@ -27,13 +26,5 @@ interface Props {
export const NavigationMenu: FC = ({ tabId }) => {
const disableLinks = isFullLicense() === false;
- return (
-
-
-
-
-
-
-
- );
+ return ;
};
diff --git a/x-pack/plugins/reporting/public/management/report_listing.tsx b/x-pack/plugins/reporting/public/management/report_listing.tsx
index fffa952be6cb4..0b6ece4d8bd02 100644
--- a/x-pack/plugins/reporting/public/management/report_listing.tsx
+++ b/x-pack/plugins/reporting/public/management/report_listing.tsx
@@ -135,6 +135,7 @@ class ReportListingUi extends Component {
return (
<>
}
diff --git a/x-pack/plugins/saved_objects_tagging/public/management/tag_management_page.tsx b/x-pack/plugins/saved_objects_tagging/public/management/tag_management_page.tsx
index e671bc587cf1f..e36d1a8afc08f 100644
--- a/x-pack/plugins/saved_objects_tagging/public/management/tag_management_page.tsx
+++ b/x-pack/plugins/saved_objects_tagging/public/management/tag_management_page.tsx
@@ -11,6 +11,7 @@ import useMount from 'react-use/lib/useMount';
import { Query } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ChromeBreadcrumb, CoreStart } from 'src/core/public';
+import { EuiSpacer } from '@elastic/eui';
import { TagWithRelations, TagsCapabilities } from '../../common';
import { getCreateModalOpener } from '../components/edition_modal';
import { ITagInternalClient, ITagAssignmentService, ITagsCache } from '../services';
@@ -194,6 +195,7 @@ export const TagManagementPage: FC = ({
return (
<>
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ <>
+
-
-
-
-
- {tabs.map((tab) => (
- onSectionChange(tab.id)}
- isSelected={tab.id === section}
- key={tab.id}
- data-test-subj={`${tab.id}Tab`}
- >
- {tab.name}
-
- ))}
-
-
-
-
-
-
-
- {canShowActions && (
-
- )}
+
+ }
+ rightSideItems={[
+
+
+ ,
+ ]}
+ description={
+
+ }
+ tabs={tabs.map((tab) => ({
+ label: tab.name,
+ onClick: () => onSectionChange(tab.id),
+ isSelected: tab.id === section,
+ key: tab.id,
+ 'data-test-subj': `${tab.id}Tab`,
+ }))}
+ />
+
+
+
+
+
+
+ {canShowActions && (
-
-
-
-
-
+ )}
+
+
+
+
+ >
);
};
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
index 3e411913520ad..02aa5f9b0b828 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
@@ -10,8 +10,6 @@ import React, { useState, useEffect, useReducer } from 'react';
import { keyBy } from 'lodash';
import { useHistory } from 'react-router-dom';
import {
- EuiPageBody,
- EuiPageContent,
EuiPageHeader,
EuiText,
EuiFlexGroup,
@@ -149,213 +147,211 @@ export const AlertDetails: React.FunctionComponent = ({
: [];
return (
-
-
-
+
+ }
+ rightSideItems={[
+ ,
+
- }
- rightSideItems={[
- ,
-
-
- ,
- ...rightPageHeaderButtons,
- ]}
- />
-
-
-
-
-
-
-
-
-
-
- {alertType.name}
-
-
- {uniqueActions && uniqueActions.length ? (
- <>
-
-
-
-
-
-
-
- {uniqueActions.map((action, index) => (
-
-
- {actionTypesByTypeId[action].name ?? action}
-
-
- ))}
-
- >
- ) : null}
-
-
-
-
-
- {
- if (isEnabled) {
- setIsEnabled(false);
- await disableAlert(alert);
- // Reset dismiss if previously clicked
- setDissmissAlertErrors(false);
- } else {
- setIsEnabled(true);
- await enableAlert(alert);
- }
- requestRefresh();
- }}
- label={
-
+ ,
+ ...rightPageHeaderButtons,
+ ]}
+ />
+
+
+
+
+
+
+
+
+
+
+ {alertType.name}
+
+
+ {uniqueActions && uniqueActions.length ? (
+ <>
+
+
+
+
+
+
+
+ {uniqueActions.map((action, index) => (
+
+
+ {actionTypesByTypeId[action].name ?? action}
+
+
+ ))}
+
+ >
+ ) : null}
+
+
+
+
+
+ {
+ if (isEnabled) {
+ setIsEnabled(false);
+ await disableAlert(alert);
+ // Reset dismiss if previously clicked
+ setDissmissAlertErrors(false);
+ } else {
+ setIsEnabled(true);
+ await enableAlert(alert);
}
- />
-
-
- {
- if (isMuted) {
- setIsMuted(false);
- await unmuteAlert(alert);
- } else {
- setIsMuted(true);
- await muteAlert(alert);
- }
- requestRefresh();
- }}
- label={
+ requestRefresh();
+ }}
+ label={
+
+ }
+ />
+
+
+ {
+ if (isMuted) {
+ setIsMuted(false);
+ await unmuteAlert(alert);
+ } else {
+ setIsMuted(true);
+ await muteAlert(alert);
+ }
+ requestRefresh();
+ }}
+ label={
+
+ }
+ />
+
+
+
+
+ {alert.enabled && !dissmissAlertErrors && alert.executionStatus.status === 'error' ? (
+
+
+
+
+ {alert.executionStatus.error?.message}
+
+
+
+
+ setDissmissAlertErrors(true)}
+ >
- }
- />
-
-
-
-
- {alert.enabled && !dissmissAlertErrors && alert.executionStatus.status === 'error' ? (
-
-
-
-
- {alert.executionStatus.error?.message}
-
-
-
+
+
+ {alert.executionStatus.error?.reason ===
+ AlertExecutionStatusErrorReasons.License && (
- setDissmissAlertErrors(true)}
+ target="_blank"
>
-
+
- {alert.executionStatus.error?.reason ===
- AlertExecutionStatusErrorReasons.License && (
-
-
-
-
-
- )}
-
-
-
-
- ) : null}
-
-
- {alert.enabled ? (
-
- ) : (
- <>
-
-
-
-
-
-
- >
- )}
+ )}
+
+
-
-
-
+ ) : null}
+
+
+ {alert.enabled ? (
+
+ ) : (
+ <>
+
+
+
+
+
+
+ >
+ )}
+
+
+
+ >
);
};
diff --git a/x-pack/test/functional/services/ml/data_visualizer_file_based.ts b/x-pack/test/functional/services/ml/data_visualizer_file_based.ts
index 5eece4057ac0c..291e5a8964553 100644
--- a/x-pack/test/functional/services/ml/data_visualizer_file_based.ts
+++ b/x-pack/test/functional/services/ml/data_visualizer_file_based.ts
@@ -10,6 +10,8 @@ import expect from '@kbn/expect';
import { FtrProviderContext } from '../../ftr_provider_context';
import { MlCommonUI } from './common_ui';
+const fixedFooterHeight = 72; // Size of EuiBottomBar more or less
+
export function MachineLearningDataVisualizerFileBasedProvider(
{ getService, getPageObjects }: FtrProviderContext,
mlCommonUI: MlCommonUI
@@ -131,7 +133,9 @@ export function MachineLearningDataVisualizerFileBasedProvider(
},
async selectCreateFilebeatConfig() {
- await testSubjects.scrollIntoView('fileDataVisFilebeatConfigLink');
+ await testSubjects.scrollIntoView('fileDataVisFilebeatConfigLink', {
+ bottomOffset: fixedFooterHeight,
+ });
await testSubjects.click('fileDataVisFilebeatConfigLink');
await testSubjects.existOrFail('fileDataVisFilebeatConfigPanel');
},