[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>
elastic · Jun 29, 2021 · 09bd630 · 09bd630
1 parent 1dce600
commit 09bd630
Show file tree

Hide file tree

Showing 14 changed files with 415 additions and 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
@@ -43,7 +43,11 @@ export const PageError: React.FunctionComponent<Props> = ({
         body={
           error && (
             <>
-              {cause ? message || errorString : <p>{message || errorString}</p>}
+              {cause ? (
+                message || errorString
+              ) : (
+                <p className="eui-textBreakWord">{message || errorString}</p>
+              )}
               {cause && (
                 <>
                   <EuiSpacer size="s" />

diff --git a/...s_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_list.test.js b/...s_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_list.test.js
@@ -38,7 +38,7 @@ describe('<AutoFollowPatternList />', () => {
     });
 
     test('should show a loading indicator on component', async () => {
-      expect(exists('autoFollowPatternLoading')).toBe(true);
+      expect(exists('sectionLoading')).toBe(true);
     });
   });
 

diff --git a/...ross_cluster_replication/public/__jest__/client_integration/follower_indices_list.test.js b/...ross_cluster_replication/public/__jest__/client_integration/follower_indices_list.test.js
@@ -45,7 +45,7 @@ describe('<FollowerIndicesList />', () => {
     });
 
     test('should show a loading indicator on component', async () => {
-      expect(exists('followerIndexLoading')).toBe(true);
+      expect(exists('sectionLoading')).toBe(true);
     });
   });
 

diff --git a/...replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js b/...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 (
-      <section>
+      <EuiPageContent
+        hasShadow={false}
+        paddingSize="none"
+        verticalPosition="center"
+        horizontalPosition="center"
+      >
         <EuiEmptyPrompt
           iconType="managementApp"
           data-test-subj="emptyPrompt"
@@ -133,7 +137,7 @@ export class AutoFollowPatternList extends PureComponent {
             </EuiButton>
           }
         />
-      </section>
+      </EuiPageContent>
     );
   }
 
@@ -170,19 +174,22 @@ export class AutoFollowPatternList extends PureComponent {
 
     if (!isAuthorized) {
       return (
-        <SectionUnauthorized
+        <PageError
           title={
             <FormattedMessage
               id="xpack.crossClusterReplication.autoFollowPatternList.permissionErrorTitle"
               defaultMessage="Permission error"
             />
           }
-        >
-          <FormattedMessage
-            id="xpack.crossClusterReplication.autoFollowPatternList.noPermissionText"
-            defaultMessage="You do not have permission to view or add auto-follow patterns."
-          />
-        </SectionUnauthorized>
+          error={{
+            error: (
+              <FormattedMessage
+                id="xpack.crossClusterReplication.autoFollowPatternList.noPermissionText"
+                defaultMessage="You do not have permission to view or add auto-follow patterns."
+              />
+            ),
+          }}
+        />
       );
     }
 
@@ -194,7 +201,7 @@ export class AutoFollowPatternList extends PureComponent {
         }
       );
 
-      return <SectionError title={title} error={apiError} />;
+      return <PageError title={title} error={apiError.body} />;
     }
 
     if (isEmpty) {
@@ -203,14 +210,12 @@ export class AutoFollowPatternList extends PureComponent {
 
     if (apiStatus === API_STATUS.LOADING) {
       return (
-        <section data-test-subj="autoFollowPatternLoading">
-          <SectionLoading>
-            <FormattedMessage
-              id="xpack.crossClusterReplication.autoFollowPatternList.loadingTitle"
-              defaultMessage="Loading auto-follow patterns..."
-            />
-          </SectionLoading>
-        </section>
+        <PageLoading>
+          <FormattedMessage
+            id="xpack.crossClusterReplication.autoFollowPatternList.loadingTitle"
+            defaultMessage="Loading auto-follow patterns..."
+          />
+        </PageLoading>
       );
     }
 

diff --git a/...uster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js b/...uster_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 (
-      <section>
+      <EuiPageContent
+        hasShadow={false}
+        paddingSize="none"
+        verticalPosition="center"
+        horizontalPosition="center"
+      >
         <EuiEmptyPrompt
           iconType="managementApp"
           data-test-subj="emptyPrompt"
@@ -123,20 +127,18 @@ export class FollowerIndicesList extends PureComponent {
             </EuiButton>
           }
         />
-      </section>
+      </EuiPageContent>
     );
   }
 
   renderLoading() {
     return (
-      <section data-test-subj="followerIndexLoading">
-        <SectionLoading>
-          <FormattedMessage
-            id="xpack.crossClusterReplication.followerIndexList.loadingTitle"
-            defaultMessage="Loading follower indices..."
-          />
-        </SectionLoading>
-      </section>
+      <PageLoading>
+        <FormattedMessage
+          id="xpack.crossClusterReplication.followerIndexList.loadingTitle"
+          defaultMessage="Loading follower indices..."
+        />
+      </PageLoading>
     );
   }
 
@@ -171,19 +173,22 @@ export class FollowerIndicesList extends PureComponent {
 
     if (!isAuthorized) {
       return (
-        <SectionUnauthorized
+        <PageError
           title={
             <FormattedMessage
               id="xpack.crossClusterReplication.followerIndexList.permissionErrorTitle"
               defaultMessage="Permission error"
             />
           }
-        >
-          <FormattedMessage
-            id="xpack.crossClusterReplication.followerIndexList.noPermissionText"
-            defaultMessage="You do not have permission to view or add follower indices."
-          />
-        </SectionUnauthorized>
+          error={{
+            error: (
+              <FormattedMessage
+                id="xpack.crossClusterReplication.followerIndexList.noPermissionText"
+                defaultMessage="You do not have permission to view or add follower indices."
+              />
+            ),
+          }}
+        />
       );
     }
 
@@ -195,7 +200,7 @@ export class FollowerIndicesList extends PureComponent {
         }
       );
 
-      return <SectionError title={title} error={apiError} />;
+      return <PageError title={title} error={apiError.body} />;
     }
 
     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
@@ -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/...gins/index_lifecycle_management/public/application/sections/policy_table/policy_table.tsx b/...gins/index_lifecycle_management/public/application/sections/policy_table/policy_table.tsx
@@ -85,8 +85,10 @@ export const PolicyTable: React.FunctionComponent<Props> = ({
       );
     }
 
+    // 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 = (
-      <Fragment>
+      <div>
         <EuiFlexGroup gutterSize="l" alignItems="center">
           <EuiFlexItem>
             <EuiFieldSearch
@@ -113,7 +115,7 @@ export const PolicyTable: React.FunctionComponent<Props> = ({
         </EuiFlexGroup>
         <EuiSpacer size="m" />
         {tableContent}
-      </Fragment>
+      </div>
     );
   } 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
@@ -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
@@ -121,7 +121,7 @@ describe('<SnapshotRestoreHome />', () => {
         });
 
         expect(exists('repositoryList')).toBe(false);
-        expect(exists('snapshotList')).toBe(true);
+        expect(exists('snapshotListEmpty')).toBe(true);
       });
     });
   });