Chore: Remove HorizontalGroup and VerticalGroup from storage (#86888)

.betterer.results

@@ -4227,19 +4227,16 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "4"]
     ],
     "public/app/features/storage/RootView.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
+      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"],
+      [0, 0, 0, "Styles should be written using objects.", "1"]
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"]
     ],
     "public/app/features/storage/StoragePage.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
+      [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
       [0, 0, 0, "Styles should be written using objects.", "2"],
       [0, 0, 0, "Styles should be written using objects.", "3"],
       [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
+      [0, 0, 0, "Styles should be written using objects.", "5"]
-      [0, 0, 0, "Styles should be written using objects.", "6"]
     ],
     "public/app/features/storage/UploadButton.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]

public/app/features/storage/RootView.tsx

@@ -3,19 +3,7 @@ import React, { useMemo, useState } from 'react';
 import { useAsync } from 'react-use';
 
 import { DataFrame, GrafanaTheme2 } from '@grafana/data';
-import {
+import { Alert, Button, Card, FilterInput, Icon, IconName, TagList, useStyles2, Stack, InlineField } from '@grafana/ui';
-  Alert,
-  Button,
-  Card,
-  FilterInput,
-  HorizontalGroup,
-  Icon,
-  IconName,
-  TagList,
-  useStyles2,
-  VerticalGroup,
-  InlineField,
-} from '@grafana/ui';
 
 import { getGrafanaStorage } from './storage';
 import { StorageInfo, StorageView } from './types';
@@ -62,7 +50,7 @@ export function RootView({ root, onPathChange }: Props) {
 
   const renderRoots = (pfix: string, roots: StorageInfo[]) => {
     return (
-      <VerticalGroup>
+      <Stack direction="column">
         {roots.map((s) => {
           const ok = s.ready;
           return (
@@ -75,9 +63,9 @@ export function RootView({ root, onPathChange }: Props) {
               {s.notice?.map((notice) => <Alert key={notice.text} severity={notice.severity} title={notice.text} />)}
 
               <Card.Tags className={styles.clickable}>
-                <HorizontalGroup>
+                <Stack>
                   <TagList tags={getTags(s)} />
-                </HorizontalGroup>
+                </Stack>
               </Card.Tags>
               <Card.Figure className={styles.clickable}>
                 <Icon name={getIconName(s.config.type)} size="xxxl" className={styles.secondaryTextColor} />
@@ -85,7 +73,7 @@ export function RootView({ root, onPathChange }: Props) {
             </Card>
           );
         })}
-      </VerticalGroup>
+      </Stack>
     );
   };
 

public/app/features/storage/StoragePage.tsx

@@ -4,7 +4,7 @@ import { useAsync } from 'react-use';
 
 import { DataFrame, GrafanaTheme2, isDataFrame, ValueLinkConfig } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { useStyles2, Spinner, TabsBar, Tab, Button, HorizontalGroup, Alert, toIconName } from '@grafana/ui';
+import { useStyles2, Spinner, TabsBar, Tab, Button, Stack, Box, Alert, toIconName } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { Page } from 'app/core/components/Page/Page';
 import { useNavModel } from 'app/core/hooks/useNavModel';
@@ -163,9 +163,9 @@ export default function StoragePage(props: Props) {
 
     return (
       <div className={styles.wrapper}>
-        <HorizontalGroup width="100%" justify="space-between" spacing={'md'} height={25}>
+        <Box display="flex" justifyContent="space-between" width="100%" height={3}>
           <Breadcrumb pathName={path} onPathChange={setPath} rootIcon={toIconName(navModel.node.icon ?? '')} />
-          <HorizontalGroup>
+          <Stack>
             {canAddFolder && (
               <>
                 <UploadButton path={path} setErrorMessages={setErrorMessages} fileNames={fileNames} setPath={setPath} />
@@ -200,8 +200,8 @@ export default function StoragePage(props: Props) {
                 Delete
               </Button>
             )}
-          </HorizontalGroup>
+          </Stack>
-        </HorizontalGroup>
+        </Box>
 
         {errorMessages.length > 0 && getErrorMessages()}