From 0f5cea1e73b9f55e31292fc199e61966d1f4890b Mon Sep 17 00:00:00 2001 From: Ignacio Rivas Date: Tue, 29 Jun 2021 08:57:30 +0200 Subject: [PATCH] [CCR & Snapshot+Restore] Center align states under tabs (#103237) * fix up CCR centered sates in tabs content * update snapshots list * fix lint errors * Change tab states for all pages in snapshot+restore * Remove unnecessary variables * Seems we dont need the class wrapper * fix broken type * Fix bug in ILM table when filtering it down * center align search box * fix linter errors * fix prettier warnings * revert content var refactor and just focus on ux * add breakword class to paragraph so we avoid text overflowing * fix prettier errors Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../authorization/components/page_error.tsx | 6 +- .../auto_follow_pattern_list.test.js | 2 +- .../follower_indices_list.test.js | 2 +- .../auto_follow_pattern_list.js | 47 +-- .../follower_indices_list.js | 47 +-- .../public/shared_imports.ts | 3 + .../sections/policy_table/policy_table.tsx | 6 +- .../helpers/home.helpers.ts | 1 + .../__jest__/client_integration/home.test.ts | 2 +- .../sections/home/policy_list/policy_list.tsx | 93 ++--- .../home/repository_list/repository_list.tsx | 104 ++--- .../home/restore_list/restore_list.tsx | 84 +++-- .../home/snapshot_list/snapshot_list.tsx | 356 ++++++++++-------- .../snapshot_restore/public/shared_imports.ts | 3 + 14 files changed, 415 insertions(+), 341 deletions(-) diff --git a/src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/page_error.tsx b/src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/page_error.tsx index 732aa35b052370..9953a8fedb39b2 100644 --- a/src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/page_error.tsx +++ b/src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/page_error.tsx @@ -43,7 +43,11 @@ export const PageError: React.FunctionComponent = ({ body={ error && ( <> - {cause ? message || errorString :

{message || errorString}

} + {cause ? ( + message || errorString + ) : ( +

{message || errorString}

+ )} {cause && ( <> diff --git a/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_list.test.js b/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_list.test.js index 1e7eb9562313d4..7f7a61a6f01779 100644 --- a/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_list.test.js +++ b/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_list.test.js @@ -38,7 +38,7 @@ describe('', () => { }); test('should show a loading indicator on component', async () => { - expect(exists('autoFollowPatternLoading')).toBe(true); + expect(exists('sectionLoading')).toBe(true); }); }); diff --git a/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/follower_indices_list.test.js b/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/follower_indices_list.test.js index f004617a099d36..b9e47b029e3021 100644 --- a/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/follower_indices_list.test.js +++ b/x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/follower_indices_list.test.js @@ -45,7 +45,7 @@ describe('', () => { }); test('should show a loading indicator on component', async () => { - expect(exists('followerIndexLoading')).toBe(true); + expect(exists('sectionLoading')).toBe(true); }); }); diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js index 1ab4e1a3e003a8..3a4273c1ed0e30 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js @@ -9,13 +9,12 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiButton, EuiEmptyPrompt, EuiText, EuiSpacer } from '@elastic/eui'; +import { EuiPageContent, EuiButton, EuiEmptyPrompt, EuiText, EuiSpacer } from '@elastic/eui'; import { reactRouterNavigate } from '../../../../../../../../src/plugins/kibana_react/public'; -import { extractQueryParams, SectionLoading } from '../../../../shared_imports'; +import { extractQueryParams, PageError, PageLoading } from '../../../../shared_imports'; import { trackUiMetric, METRIC_TYPE } from '../../../services/track_ui_metric'; import { API_STATUS, UIM_AUTO_FOLLOW_PATTERN_LIST_LOAD } from '../../../constants'; -import { SectionError, SectionUnauthorized } from '../../../components'; import { AutoFollowPatternTable, DetailPanel } from './components'; const REFRESH_RATE_MS = 30000; @@ -98,7 +97,12 @@ export class AutoFollowPatternList extends PureComponent { renderEmpty() { return ( -
+ } /> -
+ ); } @@ -170,19 +174,22 @@ export class AutoFollowPatternList extends PureComponent { if (!isAuthorized) { return ( - } - > - - + error={{ + error: ( + + ), + }} + /> ); } @@ -194,7 +201,7 @@ export class AutoFollowPatternList extends PureComponent { } ); - return ; + return ; } if (isEmpty) { @@ -203,14 +210,12 @@ export class AutoFollowPatternList extends PureComponent { if (apiStatus === API_STATUS.LOADING) { return ( -
- - - -
+ + + ); } diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js index a52ba0e613ca9e..4b593799f59330 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js @@ -9,13 +9,12 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiButton, EuiEmptyPrompt, EuiText, EuiSpacer } from '@elastic/eui'; +import { EuiPageContent, EuiButton, EuiEmptyPrompt, EuiText, EuiSpacer } from '@elastic/eui'; import { reactRouterNavigate } from '../../../../../../../../src/plugins/kibana_react/public'; -import { extractQueryParams, SectionLoading } from '../../../../shared_imports'; +import { extractQueryParams, PageLoading, PageError } from '../../../../shared_imports'; import { trackUiMetric, METRIC_TYPE } from '../../../services/track_ui_metric'; import { API_STATUS, UIM_FOLLOWER_INDEX_LIST_LOAD } from '../../../constants'; -import { SectionError, SectionUnauthorized } from '../../../components'; import { FollowerIndicesTable, DetailPanel } from './components'; const REFRESH_RATE_MS = 30000; @@ -89,7 +88,12 @@ export class FollowerIndicesList extends PureComponent { renderEmpty() { return ( -
+ } /> -
+ ); } renderLoading() { return ( -
- - - -
+ + + ); } @@ -171,19 +173,22 @@ export class FollowerIndicesList extends PureComponent { if (!isAuthorized) { return ( - } - > - - + error={{ + error: ( + + ), + }} + /> ); } @@ -195,7 +200,7 @@ export class FollowerIndicesList extends PureComponent { } ); - return ; + return ; } if (isEmpty) { diff --git a/x-pack/plugins/cross_cluster_replication/public/shared_imports.ts b/x-pack/plugins/cross_cluster_replication/public/shared_imports.ts index 55a10749230c74..38838968ad212f 100644 --- a/x-pack/plugins/cross_cluster_replication/public/shared_imports.ts +++ b/x-pack/plugins/cross_cluster_replication/public/shared_imports.ts @@ -10,4 +10,7 @@ export { indices, SectionLoading, PageError, + PageLoading, } from '../../../../src/plugins/es_ui_shared/public'; + +export { APP_WRAPPER_CLASS } from '../../../../src/core/public'; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.tsx index ba89d6c895d93e..6ed7d42a694cc7 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/policy_table/policy_table.tsx @@ -85,8 +85,10 @@ export const PolicyTable: React.FunctionComponent = ({ ); } + // Wrapping the actual contents inside a div, otherwise the table layout will get messed up + // if the table size changes (ie: applying a filter) due to the flex props of the page wrapper. content = ( - +
= ({ {tableContent} - +
); } else { return ( diff --git a/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/home.helpers.ts b/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/home.helpers.ts index 8a790342134ccf..00cec284f37473 100644 --- a/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/home.helpers.ts +++ b/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/home.helpers.ts @@ -255,6 +255,7 @@ export type TestSubjects = | 'snapshotDetail.version' | 'snapshotLink' | 'snapshotList' + | 'snapshotListEmpty' | 'snapshotList.cell' | 'snapshotList.closeButton' | 'snapshotList.content' diff --git a/x-pack/plugins/snapshot_restore/__jest__/client_integration/home.test.ts b/x-pack/plugins/snapshot_restore/__jest__/client_integration/home.test.ts index c48d6d78d08f6a..9f334ce4d49c84 100644 --- a/x-pack/plugins/snapshot_restore/__jest__/client_integration/home.test.ts +++ b/x-pack/plugins/snapshot_restore/__jest__/client_integration/home.test.ts @@ -121,7 +121,7 @@ describe('', () => { }); expect(exists('repositoryList')).toBe(false); - expect(exists('snapshotList')).toBe(true); + expect(exists('snapshotListEmpty')).toBe(true); }); }); }); diff --git a/x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_list.tsx b/x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_list.tsx index ca1f28c586522e..63aae47e638375 100644 --- a/x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_list.tsx +++ b/x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_list.tsx @@ -8,12 +8,13 @@ import React, { Fragment, useEffect } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { RouteComponentProps } from 'react-router-dom'; -import { EuiEmptyPrompt, EuiButton, EuiCallOut, EuiSpacer } from '@elastic/eui'; +import { EuiPageContent, EuiEmptyPrompt, EuiButton, EuiCallOut, EuiSpacer } from '@elastic/eui'; import { reactRouterNavigate } from '../../../../../../../../src/plugins/kibana_react/public'; import { - SectionError, + PageLoading, + PageError, Error, WithPrivileges, NotAuthorizedSection, @@ -21,7 +22,6 @@ import { import { SlmPolicy } from '../../../../../common/types'; import { APP_SLM_CLUSTER_PRIVILEGES } from '../../../../../common'; -import { SectionLoading } from '../../../components'; import { BASE_PATH, UIM_POLICY_LIST_LOAD } from '../../../constants'; import { useDecodedParams } from '../../../lib'; import { useLoadPolicies, useLoadRetentionSettings } from '../../../services/http'; @@ -89,16 +89,16 @@ export const PolicyList: React.FunctionComponent + - + ); } else if (error) { content = ( - - - - } - body={ - -

+ + -

- - } - actions={ - - - - } - data-test-subj="emptyPrompt" - /> + + } + body={ + +

+ +

+ + } + actions={ + + + + } + data-test-subj="emptyPrompt" + /> + ); } else { const policySchedules = policies.map((policy: SlmPolicy) => policy.schedule); @@ -152,7 +159,7 @@ export const PolicyList: React.FunctionComponent policy.retention)); content = ( - +
{hasDuplicateSchedules ? ( - +
); } @@ -198,7 +205,7 @@ export const PolicyList: React.FunctionComponent `cluster.${name}`)}> {({ hasPrivileges, privilegesMissing }) => hasPrivileges ? ( -
+ <> {policyName ? ( ) : null} {content} -
+ ) : ( + - + ); } else if (error) { content = ( - - - - } - body={ - -

+ + -

- - } - actions={ - - - - } - data-test-subj="emptyPrompt" - /> + + } + body={ + +

+ +

+ + } + actions={ + + + + } + data-test-subj="emptyPrompt" + /> + ); } else { content = ( - +
+ +
); } return ( -
+ <> {repositoryName ? ( ) : null} {content} -
+ ); }; diff --git a/x-pack/plugins/snapshot_restore/public/application/sections/home/restore_list/restore_list.tsx b/x-pack/plugins/snapshot_restore/public/application/sections/home/restore_list/restore_list.tsx index 8dabaf4f29847c..14044d3aaa1617 100644 --- a/x-pack/plugins/snapshot_restore/public/application/sections/home/restore_list/restore_list.tsx +++ b/x-pack/plugins/snapshot_restore/public/application/sections/home/restore_list/restore_list.tsx @@ -8,6 +8,7 @@ import React, { useEffect, useState, Fragment } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { + EuiPageContent, EuiEmptyPrompt, EuiPopover, EuiButtonEmpty, @@ -23,10 +24,10 @@ import { APP_RESTORE_INDEX_PRIVILEGES } from '../../../../../common'; import { WithPrivileges, NotAuthorizedSection, - SectionError, + PageError, + PageLoading, Error, } from '../../../../shared_imports'; -import { SectionLoading } from '../../../components'; import { UIM_RESTORE_LIST_LOAD } from '../../../constants'; import { useLoadRestores } from '../../../services/http'; import { linkToSnapshots } from '../../../services/navigation'; @@ -74,18 +75,18 @@ export const RestoreList: React.FunctionComponent = () => { if (isLoading) { // Because we're polling for new data, we only want to hide the list during the initial fetch. content = ( - + - + ); } else if (error) { // If we get an error while polling we don't need to show it to the user because they can still // work with the table. content = ( - { } else { if (restores && restores.length === 0) { content = ( - - - - } - body={ - -

+ + - - - ), - }} + id="xpack.snapshotRestore.restoreList.emptyPromptTitle" + defaultMessage="No restored snapshots" /> -

- - } - data-test-subj="emptyPrompt" - /> + + } + body={ + +

+ + + + ), + }} + /> +

+ + } + data-test-subj="emptyPrompt" + /> + ); } else { content = ( - +
{ - +
); } } @@ -217,7 +225,7 @@ export const RestoreList: React.FunctionComponent = () => { `index.${name}`)}> {({ hasPrivileges, privilegesMissing }) => hasPrivileges ? ( -
{content}
+ content ) : ( - - + + + + + ); } else if (error) { content = ( - - - - } - body={ -

- - - - ), - }} - /> -

- } - /> + + + + + } + body={ +

+ + + + ), + }} + /> +

+ } + /> + ); } else if (repositories.length === 0) { content = ( - - - - } - body={ - <> -

+ + -

-

- + + } + body={ + <> +

- -

- - } - data-test-subj="emptyPrompt" - /> +

+

+ + + +

+ + } + data-test-subj="emptyPrompt" + /> + ); } else if (snapshots.length === 0) { content = ( - - - - } - body={ - `cluster.${name}`)}> - {({ hasPrivileges }) => - hasPrivileges ? ( - -

- - - - ), - }} - /> -

-

- {policies.length === 0 ? ( - - - - ) : ( - + + + + } + body={ + `cluster.${name}`)} + > + {({ hasPrivileges }) => + hasPrivileges ? ( + +

+ + + + ), + }} + /> +

+

+ {policies.length === 0 ? ( + + + + ) : ( + + + + )} +

+ + ) : ( + +

+ +

+

+ - - )} -

- - ) : ( - -

- -

-

- - {' '} - - -

- - ) - } - - } - data-test-subj="emptyPrompt" - /> + id="xpack.snapshotRestore.emptyPrompt.noSnapshotsDocLinkText" + defaultMessage="Learn how to create a snapshot" + />{' '} + + +

+ + ) + } + + } + data-test-subj="emptyPrompt" + /> + ); } else { const repositoryErrorsWarning = Object.keys(errors).length ? ( @@ -322,7 +350,7 @@ export const SnapshotList: React.FunctionComponent +
{repositoryErrorsWarning} - +
); } return ( -
+ <> {repositoryName && snapshotId ? ( ) : null} {content} -
+ ); }; diff --git a/x-pack/plugins/snapshot_restore/public/shared_imports.ts b/x-pack/plugins/snapshot_restore/public/shared_imports.ts index 759453edaba5db..84c195a51950b2 100644 --- a/x-pack/plugins/snapshot_restore/public/shared_imports.ts +++ b/x-pack/plugins/snapshot_restore/public/shared_imports.ts @@ -13,6 +13,7 @@ export { NotAuthorizedSection, SectionError, PageError, + PageLoading, sendRequest, SendRequestConfig, SendRequestResponse, @@ -22,3 +23,5 @@ export { UseRequestConfig, WithPrivileges, } from '../../../../src/plugins/es_ui_shared/public'; + +export { APP_WRAPPER_CLASS } from '../../../../src/core/public';