Explore and Correlations: Replace deprecated layout components (#86967)

Replace deprecated layout components

.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"]
     ],

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>
   );
 };

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>
     </>
   );

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