From aad3f7e9027ad9ec4bbef85e26a9857326b7dcbf Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Fri, 25 Aug 2023 17:21:42 +0200
Subject: [PATCH] [Index details page] Move the loading indicator to the "back
 to indices" button

---
 .../index_list/details_page/details_page.tsx  | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page.tsx
index 06b4c32434ba2..7304da68e6a14 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page.tsx
@@ -15,6 +15,8 @@ import {
   EuiPageHeaderProps,
   EuiPageSection,
   EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { SectionLoading } from '@kbn/es-ui-shared-plugin/public';
 
@@ -110,36 +112,38 @@ export const DetailsPage: React.FunctionComponent<
   return (
     <>
       <EuiPageSection paddingSize="none">
-        <EuiButton
-          data-test-subj="indexDetailsBackToIndicesButton"
-          color="text"
-          iconType="arrowLeft"
-          onClick={navigateToAllIndices}
-        >
-          <FormattedMessage
-            id="xpack.idxMgmt.indexDetails.backToIndicesButtonLabel"
-            defaultMessage="Back to all indices"
-          />
-        </EuiButton>
-      </EuiPageSection>
-
-      <EuiSpacer size="l" />
-
-      <EuiPageHeader
-        data-test-subj="indexDetailsHeader"
-        pageTitle={
-          <>
-            {indexName}
-            {isLoading && (
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              data-test-subj="indexDetailsBackToIndicesButton"
+              color="text"
+              iconType="arrowLeft"
+              onClick={navigateToAllIndices}
+            >
+              <FormattedMessage
+                id="xpack.idxMgmt.indexDetails.backToIndicesButtonLabel"
+                defaultMessage="Back to all indices"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+          {isLoading && (
+            <EuiFlexItem>
               <SectionLoading inline={true}>
                 <FormattedMessage
                   id="xpack.idxMgmt.indexDetails.reloadingDescription"
                   defaultMessage="Re-loading index details…"
                 />
               </SectionLoading>
-            )}
-          </>
-        }
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </EuiPageSection>
+
+      <EuiSpacer size="l" />
+
+      <EuiPageHeader
+        data-test-subj="indexDetailsHeader"
+        pageTitle={indexName}
         bottomBorder
         rightSideItems={[
           <DiscoverLink indexName={indexName} asButton={true} />,