From 0b97d997d45f8041cafd0f40191b116dbc7c25c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yulia=20=C4=8Cech?=
 <6585477+yuliacech@users.noreply.github.com>
Date: Tue, 17 Oct 2023 22:37:56 +0200
Subject: [PATCH] [Remote clusters] Fix empty states (#169015)

## Summary

I noticed that Remote clusters UI has a wrapper on empty states which is
probably a regression from the EuiPage deprecations migration. This PR
fixes the list and edit views. See screenshots below.

<details>

#### List empty state

Before
<img width="1919" alt="Screenshot 2023-10-16 at 19 27 12"
src="https://github.com/elastic/kibana/assets/6585477/e0e50958-c605-413c-b79b-80b6743ac6b0">

After
<img width="1918" alt="Screenshot 2023-10-16 at 19 42 24"
src="https://github.com/elastic/kibana/assets/6585477/7cc54494-fd0a-4e18-9ec9-cc501afbb978">

#### List error

Before
<img width="1916" alt="Screenshot 2023-10-16 at 19 34 07"
src="https://github.com/elastic/kibana/assets/6585477/362169af-924e-40d0-9c25-d3d3fbabf112">

After
<img width="1918" alt="Screenshot 2023-10-16 at 19 45 18"
src="https://github.com/elastic/kibana/assets/6585477/c4931d64-e298-4962-9ba0-ddaf9a948a6a">

#### List error permissions

Before
<img width="1921" alt="Screenshot 2023-10-16 at 19 27 50"
src="https://github.com/elastic/kibana/assets/6585477/1eaf2fff-c8d6-45b7-b670-4b8dd4ab0844">

After
<img width="1916" alt="Screenshot 2023-10-16 at 19 44 14"
src="https://github.com/elastic/kibana/assets/6585477/9bbcce09-9326-45a4-bb31-a42a13a999ac">

#### List loading

Before
<img width="1918" alt="Screenshot 2023-10-16 at 20 08 54"
src="https://github.com/elastic/kibana/assets/6585477/11b2dab3-9e93-4e37-821c-fb367afa4fb9">

After
<img width="1918" alt="Screenshot 2023-10-16 at 20 10 18"
src="https://github.com/elastic/kibana/assets/6585477/30021cfe-cd8c-4aff-8877-f4b052ce3b7b">

#### Edit form error

Before
<img width="1918" alt="Screenshot 2023-10-16 at 19 59 54"
src="https://github.com/elastic/kibana/assets/6585477/1d54919f-f1fb-4938-93b3-f949705b12b2">

After
<img width="1918" alt="Screenshot 2023-10-16 at 20 03 59"
src="https://github.com/elastic/kibana/assets/6585477/a2369e1c-3e28-418e-a359-1564259c00cb">

#### Edit form loading

Before
<img width="1918" alt="Screenshot 2023-10-16 at 20 00 34"
src="https://github.com/elastic/kibana/assets/6585477/ead45d19-43a3-4cc9-bd6a-338321b6757d">

After
<img width="1918" alt="Screenshot 2023-10-16 at 20 03 41"
src="https://github.com/elastic/kibana/assets/6585477/e563a54e-598c-42fc-88a9-fb1659a86fdd">

</details>

(cherry picked from commit bdf064e075b1d393ae3a7168b14b50d182868ab9)
---
 .../section_loading/section_loading.tsx       |  17 +-
 .../remote_cluster_edit.js                    | 140 ++++++-------
 .../remote_cluster_list.js                    | 198 ++++++++----------
 3 files changed, 173 insertions(+), 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
index 119e053312dc8..cbdaf444ca228 100644
--- 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/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_edit/remote_cluster_edit.js b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_edit/remote_cluster_edit.js
index 02ae974380683..04daad5dee8fc 100644
--- a/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_edit/remote_cluster_edit.js
+++ b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_edit/remote_cluster_edit.js
@@ -96,55 +96,51 @@ 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>
+          }
+        />
       );
     }
 
@@ -152,36 +148,34 @@ export class RemoteClusterEdit extends Component {
 
     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>
+          }
+        />
       );
     }
 
diff --git a/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_list.js b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_list.js
index 06948e25a0583..21ed52d08fa83 100644
--- a/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_list.js
+++ b/x-pack/plugins/remote_clusters/public/application/sections/remote_cluster_list/remote_cluster_list.js
@@ -93,28 +93,26 @@ export class RemoteClusterList extends Component {
 
   renderNoPermission() {
     return (
-      <EuiPageTemplate minHeight={0} panelled paddingSize="none" offset={0}>
-        <EuiPageTemplate.EmptyPrompt
-          iconType="warning"
-          color="danger"
-          title={
-            <h2>
-              <FormattedMessage
-                id="xpack.remoteClusters.remoteClusterList.noPermissionTitle"
-                defaultMessage="Permission error"
-              />
-            </h2>
-          }
-          body={
-            <p>
-              <FormattedMessage
-                id="xpack.remoteClusters.remoteClusterList.noPermissionText"
-                defaultMessage="You do not have permission to view or add remote clusters."
-              />
-            </p>
-          }
-        />
-      </EuiPageTemplate>
+      <EuiPageTemplate.EmptyPrompt
+        iconType="warning"
+        color="danger"
+        title={
+          <h2>
+            <FormattedMessage
+              id="xpack.remoteClusters.remoteClusterList.noPermissionTitle"
+              defaultMessage="Permission error"
+            />
+          </h2>
+        }
+        body={
+          <p>
+            <FormattedMessage
+              id="xpack.remoteClusters.remoteClusterList.noPermissionText"
+              defaultMessage="You do not have permission to view or add remote clusters."
+            />
+          </p>
+        }
+      />
     );
   }
 
@@ -124,103 +122,91 @@ export class RemoteClusterList extends Component {
     const { statusCode, error: errorString } = error.body;
 
     return (
-      <EuiPageTemplate minHeight={0} panelled paddingSize="none" offset={0}>
-        <EuiPageTemplate.EmptyPrompt
-          iconType="warning"
-          color="danger"
-          title={
-            <h2>
-              <FormattedMessage
-                id="xpack.remoteClusters.remoteClusterList.loadingErrorTitle"
-                defaultMessage="Error loading remote clusters"
-              />
-            </h2>
-          }
-          body={
-            <p>
-              {statusCode} {errorString}
-            </p>
-          }
-        />
-      </EuiPageTemplate>
+      <EuiPageTemplate.EmptyPrompt
+        iconType="warning"
+        color="danger"
+        title={
+          <h2>
+            <FormattedMessage
+              id="xpack.remoteClusters.remoteClusterList.loadingErrorTitle"
+              defaultMessage="Error loading remote clusters"
+            />
+          </h2>
+        }
+        body={
+          <p>
+            {statusCode} {errorString}
+          </p>
+        }
+      />
     );
   }
 
   renderEmpty() {
     return (
-      <EuiPageTemplate minHeight={0} panelled paddingSize="none" offset={0}>
-        <EuiPageTemplate.EmptyPrompt
-          data-test-subj="remoteClusterListEmptyPrompt"
-          iconType="managementApp"
-          title={
-            <h2>
-              <FormattedMessage
-                id="xpack.remoteClusters.remoteClusterList.emptyPromptTitle"
-                defaultMessage="Add your first remote cluster"
-              />
-            </h2>
-          }
-          body={
-            <p>
-              <FormattedMessage
-                id="xpack.remoteClusters.remoteClusterList.emptyPromptDescription"
-                defaultMessage="Remote clusters create a uni-directional connection from your
+      <EuiPageTemplate.EmptyPrompt
+        data-test-subj="remoteClusterListEmptyPrompt"
+        iconType="managementApp"
+        title={
+          <h2>
+            <FormattedMessage
+              id="xpack.remoteClusters.remoteClusterList.emptyPromptTitle"
+              defaultMessage="Add your first remote cluster"
+            />
+          </h2>
+        }
+        body={
+          <p>
+            <FormattedMessage
+              id="xpack.remoteClusters.remoteClusterList.emptyPromptDescription"
+              defaultMessage="Remote clusters create a uni-directional connection from your
                 local cluster to other clusters."
-              />
-            </p>
-          }
-          actions={
-            <EuiButton
-              {...reactRouterNavigate(this.props.history, '/add')}
-              fill
-              iconType="plusInCircle"
-              data-test-subj="remoteClusterEmptyPromptCreateButton"
-            >
-              <FormattedMessage
-                id="xpack.remoteClusters.remoteClusterList.emptyPrompt.connectButtonLabel"
-                defaultMessage="Add a remote cluster"
-              />
-            </EuiButton>
-          }
-          footer={
-            <>
-              <EuiTitle size="xxs">
-                <span>
-                  <FormattedMessage
-                    id="xpack.remoteClusters.remoteClusters.emptyState.docsDescription"
-                    defaultMessage="Want to learn more?"
-                  />
-                </span>
-              </EuiTitle>{' '}
-              <EuiLink href={remoteClustersUrl} target="_blank">
+            />
+          </p>
+        }
+        actions={
+          <EuiButton
+            {...reactRouterNavigate(this.props.history, '/add')}
+            fill
+            iconType="plusInCircle"
+            data-test-subj="remoteClusterEmptyPromptCreateButton"
+          >
+            <FormattedMessage
+              id="xpack.remoteClusters.remoteClusterList.emptyPrompt.connectButtonLabel"
+              defaultMessage="Add a remote cluster"
+            />
+          </EuiButton>
+        }
+        footer={
+          <>
+            <EuiTitle size="xxs">
+              <span>
                 <FormattedMessage
-                  id="xpack.remoteClusters.remoteClusters.emptyState.docsLink"
-                  defaultMessage="Read documentation"
+                  id="xpack.remoteClusters.remoteClusters.emptyState.docsDescription"
+                  defaultMessage="Want to learn more?"
                 />
-              </EuiLink>
-            </>
-          }
-        />
-      </EuiPageTemplate>
+              </span>
+            </EuiTitle>{' '}
+            <EuiLink href={remoteClustersUrl} target="_blank">
+              <FormattedMessage
+                id="xpack.remoteClusters.remoteClusters.emptyState.docsLink"
+                defaultMessage="Read documentation"
+              />
+            </EuiLink>
+          </>
+        }
+      />
     );
   }
 
   renderLoading() {
     return (
-      <EuiPageTemplate
-        minHeight={0}
-        panelled
-        paddingSize="none"
-        offset={0}
-        data-test-subj="remoteClustersTableLoading"
-      >
-        <SectionLoading>
-          <FormattedMessage
-            id="xpack.remoteClusters.remoteClusterList.loadingTitle"
-            defaultMessage="Loading remote clusters…"
-          />
-        </SectionLoading>
-      </EuiPageTemplate>
+      <SectionLoading data-test-subj="remoteClustersTableLoading">
+        <FormattedMessage
+          id="xpack.remoteClusters.remoteClusterList.loadingTitle"
+          defaultMessage="Loading remote clusters…"
+        />
+      </SectionLoading>
     );
   }