[8.11] [Remote clusters] Fix empty states (#169015) (#169173)

# Backport This will backport the following commits from `main` to `8.11`: - [[Remote clusters] Fix empty states (#169015)](#169015)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Yulia Čech <6585477+yuliacech@users.noreply.github.com>
elastic · Oct 17, 2023 · f3a1e7f · f3a1e7f
1 parent 36da4cc
commit f3a1e7f
Show file tree

Hide file tree

Showing 3 changed files with 173 additions and 182 deletions.
diff --git a/src/plugins/es_ui_shared/public/components/section_loading/section_loading.tsx b/src/plugins/es_ui_shared/public/components/section_loading/section_loading.tsx
@@ -15,13 +15,24 @@ import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 interface Props {
   inline?: boolean;
   children: React.ReactNode;
+  'data-test-subj'?: string;
   [key: string]: any;
 }
 
-export const SectionLoading: React.FunctionComponent<Props> = ({ inline, children, ...rest }) => {
+export const SectionLoading: React.FunctionComponent<Props> = ({
+  inline,
+  'data-test-subj': dataTestSubj,
+  children,
+  ...rest
+}) => {
   if (inline) {
     return (
-      <EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="s">
+      <EuiFlexGroup
+        justifyContent="flexStart"
+        alignItems="center"
+        gutterSize="s"
+        data-test-subj={dataTestSubj}
+      >
         <EuiFlexItem grow={false}>
           <EuiLoadingSpinner size="m" />
         </EuiFlexItem>
@@ -38,7 +49,7 @@ export const SectionLoading: React.FunctionComponent<Props> = ({ inline, childre
     <KibanaPageTemplate.EmptyPrompt
       title={<EuiLoadingSpinner size="xl" />}
       body={<EuiText color="subdued">{children}</EuiText>}
-      data-test-subj="sectionLoading"
+      data-test-subj={dataTestSubj ?? 'sectionLoading'}
     />
   );
 };
diff --git a/...ns/remote_clusters/public/application/sections/remote_cluster_edit/remote_cluster_edit.js b/...ns/remote_clusters/public/application/sections/remote_cluster_edit/remote_cluster_edit.js
@@ -96,92 +96,86 @@ export class RemoteClusterEdit extends Component {
 
     if (isLoading) {
       return (
-        <EuiPageTemplate minHeight={0} panelled paddingSize="none" offset={0}>
-          <SectionLoading>
-            <FormattedMessage
-              id="xpack.remoteClusters.edit.loadingLabel"
-              defaultMessage="Loading remote cluster…"
-            />
-          </SectionLoading>
-        </EuiPageTemplate>
+        <SectionLoading>
+          <FormattedMessage
+            id="xpack.remoteClusters.edit.loadingLabel"
+            defaultMessage="Loading remote cluster…"
+          />
+        </SectionLoading>
       );
     }
 
     if (!cluster) {
       return (
-        <EuiPageTemplate minHeight={0} panelled paddingSize="none" offset={0}>
-          <EuiPageTemplate.EmptyPrompt
-            iconType="warning"
-            color="danger"
-            title={
-              <h2>
-                <FormattedMessage
-                  id="xpack.remoteClusters.edit.loadingErrorTitle"
-                  defaultMessage="Error loading remote cluster"
-                />
-              </h2>
-            }
-            body={
-              <p>
-                <FormattedMessage
-                  id="xpack.remoteClusters.edit.loadingErrorMessage"
-                  defaultMessage="The remote cluster '{name}' does not exist."
-                  values={{ name: clusterName }}
-                />
-              </p>
-            }
-            actions={
-              <EuiButton
-                {...reactRouterNavigate(this.props.history, '/list')}
-                color="danger"
-                iconType="arrowLeft"
-                flush="left"
-              >
-                <FormattedMessage
-                  id="xpack.remoteClusters.edit.viewRemoteClustersButtonLabel"
-                  defaultMessage="View remote clusters"
-                />
-              </EuiButton>
-            }
-          />
-        </EuiPageTemplate>
+        <EuiPageTemplate.EmptyPrompt
+          iconType="warning"
+          color="danger"
+          title={
+            <h2>
+              <FormattedMessage
+                id="xpack.remoteClusters.edit.loadingErrorTitle"
+                defaultMessage="Error loading remote cluster"
+              />
+            </h2>
+          }
+          body={
+            <p>
+              <FormattedMessage
+                id="xpack.remoteClusters.edit.loadingErrorMessage"
+                defaultMessage="The remote cluster '{name}' does not exist."
+                values={{ name: clusterName }}
+              />
+            </p>
+          }
+          actions={
+            <EuiButton
+              {...reactRouterNavigate(this.props.history, '/list')}
+              color="danger"
+              iconType="arrowLeft"
+              flush="left"
+            >
+              <FormattedMessage
+                id="xpack.remoteClusters.edit.viewRemoteClustersButtonLabel"
+                defaultMessage="View remote clusters"
+              />
+            </EuiButton>
+          }
+        />
       );
     }
 
     const { isConfiguredByNode, hasDeprecatedProxySetting } = cluster;
 
     if (isConfiguredByNode) {
       return (
-        <EuiPageTemplate minHeight={0} panelled paddingSize="none" offset={0}>
-          <EuiPageTemplate.EmptyPrompt
-            iconType="iInCircle"
-            title={
-              <h2>
-                <FormattedMessage
-                  id="xpack.remoteClusters.edit.configuredByNodeWarningTitle"
-                  defaultMessage="Defined in configuration"
-                />
-              </h2>
-            }
-            body={
-              <p>
-                <FormattedMessage
-                  id="xpack.remoteClusters.configuredByNodeWarningBody"
-                  defaultMessage="You can't edit or delete this remote cluster because it's defined in a node's
+        <EuiPageTemplate.EmptyPrompt
+          iconType="iInCircle"
+          title={
+            <h2>
+              <FormattedMessage
+                id="xpack.remoteClusters.edit.configuredByNodeWarningTitle"
+                defaultMessage="Defined in configuration"
+              />
+            </h2>
+          }
+          body={
+            <p>
+              <FormattedMessage
+                id="xpack.remoteClusters.configuredByNodeWarningBody"
+                defaultMessage="You can't edit or delete this remote cluster because it's defined in a node's
                   elasticsearch.yml configuration file."
-                />
-              </p>
-            }
-            actions={
-              <EuiButton color="primary" iconType="arrowLeft" flush="left" onClick={this.cancel}>
-                <FormattedMessage
-                  id="xpack.remoteClusters.edit.backToRemoteClustersButtonLabel"
-                  defaultMessage="Back to remote clusters"
-                />
-              </EuiButton>
-            }
-          />
-        </EuiPageTemplate>
+              />
+            </p>
+          }
+          actions={
+            <EuiButton color="primary" iconType="arrowLeft" flush="left" onClick={this.cancel}>
+              <FormattedMessage
+                id="xpack.remoteClusters.edit.backToRemoteClustersButtonLabel"
+                defaultMessage="Back to remote clusters"
+              />
+            </EuiButton>
+          }
+        />
       );
     }