From b52e349639f562c206cf61f101ac9d85477ec574 Mon Sep 17 00:00:00 2001
From: Haris Rozajac <58232930+harisrozajac@users.noreply.github.com>
Date: Mon, 29 Apr 2024 14:50:03 +0200
Subject: [PATCH] Explore and Correlations: Replace deprecated layout
 components (#86967)

Replace deprecated layout components
---
 .betterer.results                                        | 9 ---------
 .../correlations/Forms/CorrelationFormNavigation.tsx     | 6 +++---
 public/app/features/explore/CorrelationEditorModeBar.tsx | 6 +++---
 .../explore/extensions/ConfirmNavigationModal.tsx        | 6 +++---
 4 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index c38c7f43ca4..7badfe90429 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -2379,9 +2379,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
-    "public/app/features/correlations/Forms/CorrelationFormNavigation.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/features/correlations/components/Wizard/index.ts:5381": [
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"],
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "1"]
@@ -3011,9 +3008,6 @@ exports[`better eslint`] = {
     "public/app/features/explore/ContentOutline/ContentOutline.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/features/explore/CorrelationEditorModeBar.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/features/explore/Logs/LiveLogs.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
@@ -3445,9 +3439,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
-    "public/app/features/explore/extensions/ConfirmNavigationModal.tsx:5381": [
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/features/explore/hooks/useStateSync/index.ts:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./external.utils\`)", "0"]
     ],
diff --git a/public/app/features/correlations/Forms/CorrelationFormNavigation.tsx b/public/app/features/correlations/Forms/CorrelationFormNavigation.tsx
index 831e3a61260..95d6d56fc24 100644
--- a/public/app/features/correlations/Forms/CorrelationFormNavigation.tsx
+++ b/public/app/features/correlations/Forms/CorrelationFormNavigation.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Button, HorizontalGroup } from '@grafana/ui';
+import { Button, Stack } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 
 import { useWizardContext } from '../components/Wizard/wizardContext';
@@ -26,7 +26,7 @@ export const CorrelationFormNavigation = () => {
   );
 
   return (
-    <HorizontalGroup justify="flex-start">
+    <Stack justifyContent="flex-start">
       {currentPage > 0 ? (
         <Button variant="secondary" onClick={prevPage}>
           <Trans i18nKey="correlations.navigation-form.back-button">Back</Trans>
@@ -34,6 +34,6 @@ export const CorrelationFormNavigation = () => {
       ) : undefined}
 
       {isLastPage ? LastPageNext : NextPage}
-    </HorizontalGroup>
+    </Stack>
   );
 };
diff --git a/public/app/features/explore/CorrelationEditorModeBar.tsx b/public/app/features/explore/CorrelationEditorModeBar.tsx
index 5df1b7ef04c..cca5fa35bc4 100644
--- a/public/app/features/explore/CorrelationEditorModeBar.tsx
+++ b/public/app/features/explore/CorrelationEditorModeBar.tsx
@@ -5,7 +5,7 @@ import { useBeforeUnload, useUnmount } from 'react-use';
 
 import { GrafanaTheme2, colorManipulator } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
-import { Button, HorizontalGroup, Icon, Tooltip, useStyles2 } from '@grafana/ui';
+import { Button, Icon, Stack, Tooltip, useStyles2 } from '@grafana/ui';
 import { CORRELATION_EDITOR_POST_CONFIRM_ACTION, ExploreItemState, useDispatch, useSelector } from 'app/types';
 
 import { CorrelationUnsavedChangesModal } from './CorrelationUnsavedChangesModal';
@@ -229,7 +229,7 @@ export const CorrelationEditorModeBar = ({ panes }: { panes: Array<[string, Expl
         />
       )}
       <div className={styles.correlationEditorTop}>
-        <HorizontalGroup spacing="md" justify="flex-end">
+        <Stack gap={2} justifyContent="flex-end" alignItems="center">
           <Tooltip content="Correlations editor in Explore is an experimental feature.">
             <Icon className={styles.iconColor} name="info-circle" size="xl" />
           </Tooltip>
@@ -256,7 +256,7 @@ export const CorrelationEditorModeBar = ({ panes }: { panes: Array<[string, Expl
           >
             Exit correlation editor
           </Button>
-        </HorizontalGroup>
+        </Stack>
       </div>
     </>
   );
diff --git a/public/app/features/explore/extensions/ConfirmNavigationModal.tsx b/public/app/features/explore/extensions/ConfirmNavigationModal.tsx
index b9481582e80..e9c41612adf 100644
--- a/public/app/features/explore/extensions/ConfirmNavigationModal.tsx
+++ b/public/app/features/explore/extensions/ConfirmNavigationModal.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
 
 import { locationUtil } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { Button, Modal, VerticalGroup } from '@grafana/ui';
+import { Button, Modal, Stack } from '@grafana/ui';
 
 type Props = {
   onDismiss: () => void;
@@ -20,9 +20,9 @@ export function ConfirmNavigationModal(props: Props): ReactElement {
 
   return (
     <Modal title={title} isOpen onDismiss={onDismiss}>
-      <VerticalGroup spacing="sm">
+      <Stack direction="column" gap={1}>
         <p>Do you want to proceed in the current tab or open a new tab?</p>
-      </VerticalGroup>
+      </Stack>
       <Modal.ButtonRow>
         <Button onClick={onDismiss} fill="outline" variant="secondary">
           Cancel