From 9a1f9c126fa59659f9a2494551edcfe5f087fc67 Mon Sep 17 00:00:00 2001
From: linoman <2051016+linoman@users.noreply.github.com>
Date: Fri, 26 Apr 2024 17:13:28 +0200
Subject: [PATCH] Replace deprecated layout elements (#86977)

---
 .betterer.results                                | 16 ++++------------
 .../UserListPublicDashboardPage.tsx              |  6 +++---
 public/app/features/admin/UserOrgs.tsx           |  5 ++---
 public/app/features/api-keys/ApiKeysTable.tsx    |  6 +++---
 .../serviceaccounts/ServiceAccountPage.tsx       | 14 +++++++-------
 5 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index acb169c5f64..33f5b3eb612 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1359,11 +1359,8 @@ 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/admin/UserListPublicDashboardPage/UserListPublicDashboardPage.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/features/admin/UserOrgs.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"],
@@ -1379,8 +1376,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "13"],
       [0, 0, 0, "Styles should be written using objects.", "14"],
       [0, 0, 0, "Styles should be written using objects.", "15"],
-      [0, 0, 0, "Styles should be written using objects.", "16"],
-      [0, 0, 0, "Styles should be written using objects.", "17"]
+      [0, 0, 0, "Styles should be written using objects.", "16"]
     ],
     "public/app/features/admin/UserPermissions.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
@@ -2256,9 +2252,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
     "public/app/features/api-keys/ApiKeysTable.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.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
+      [0, 0, 0, "Styles should be written using objects.", "0"],
+      [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
     "public/app/features/api-keys/MigrateToServiceAccountsCard.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
@@ -4043,9 +4038,6 @@ exports[`better eslint`] = {
     "public/app/features/search/utils.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/features/serviceaccounts/ServiceAccountPage.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/serviceaccounts/components/ServiceAccountProfile.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
diff --git a/public/app/features/admin/UserListPublicDashboardPage/UserListPublicDashboardPage.tsx b/public/app/features/admin/UserListPublicDashboardPage/UserListPublicDashboardPage.tsx
index 234cdca3f5d..655b80fcced 100644
--- a/public/app/features/admin/UserListPublicDashboardPage/UserListPublicDashboardPage.tsx
+++ b/public/app/features/admin/UserListPublicDashboardPage/UserListPublicDashboardPage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
-import { HorizontalGroup, Icon, Tag, Tooltip } from '@grafana/ui/src';
+import { Icon, Stack, Tag, Tooltip } from '@grafana/ui/src';
 import { Page } from 'app/core/components/Page/Page';
 import { Trans, t } from 'app/core/internationalization';
 
@@ -60,10 +60,10 @@ export const UserListPublicDashboardPage = () => {
               <td className="max-width-10">{user.firstSeenAtAge}</td>
               <td className="max-width-10">{user.lastSeenAtAge}</td>
               <td className="max-width-10">
-                <HorizontalGroup spacing="sm">
+                <Stack gap={2}>
                   <span>{user.totalDashboards} dashboard(s)</span>
                   <DashboardsListModalButton email={user.email} />
-                </HorizontalGroup>
+                </Stack>
               </td>
               <td className="max-width-10">
                 <Tag name="Viewer" colorIndex={19} />
diff --git a/public/app/features/admin/UserOrgs.tsx b/public/app/features/admin/UserOrgs.tsx
index 5583380263a..644d42d7eb7 100644
--- a/public/app/features/admin/UserOrgs.tsx
+++ b/public/app/features/admin/UserOrgs.tsx
@@ -6,7 +6,6 @@ import {
   Button,
   ConfirmButton,
   Field,
-  HorizontalGroup,
   Icon,
   Modal,
   stylesFactory,
@@ -386,14 +385,14 @@ export class AddToOrgModal extends PureComponent<AddToOrgModalProps, AddToOrgMod
           />
         </Field>
         <Modal.ButtonRow>
-          <HorizontalGroup spacing="md" justify="center">
+          <Stack gap={2} justifyContent="center">
             <Button variant="secondary" fill="outline" onClick={this.onCancel}>
               Cancel
             </Button>
             <Button variant="primary" disabled={selectedOrg === null} onClick={this.onAddUserToOrg}>
               Add to organization
             </Button>
-          </HorizontalGroup>
+          </Stack>
         </Modal.ButtonRow>
       </Modal>
     );
diff --git a/public/app/features/api-keys/ApiKeysTable.tsx b/public/app/features/api-keys/ApiKeysTable.tsx
index cd5946fd67f..452aa370e94 100644
--- a/public/app/features/api-keys/ApiKeysTable.tsx
+++ b/public/app/features/api-keys/ApiKeysTable.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { dateTimeFormat, GrafanaTheme2, TimeZone } from '@grafana/data';
-import { Button, DeleteButton, HorizontalGroup, Icon, Tooltip, useTheme2 } from '@grafana/ui';
+import { Button, DeleteButton, Icon, Stack, Tooltip, useTheme2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { AccessControlAction } from 'app/types';
 
@@ -50,7 +50,7 @@ export const ApiKeysTable = ({ apiKeys, timeZone, onDelete, onMigrate }: Props)
                 </td>
                 <td>{formatLastUsedAtDate(timeZone, key.lastUsedAt)}</td>
                 <td>
-                  <HorizontalGroup justify="flex-end">
+                  <Stack justifyContent="flex-end">
                     <Button size="sm" onClick={() => onMigrate(key)}>
                       Migrate to service account
                     </Button>
@@ -60,7 +60,7 @@ export const ApiKeysTable = ({ apiKeys, timeZone, onDelete, onMigrate }: Props)
                       onConfirm={() => onDelete(key)}
                       disabled={!contextSrv.hasPermissionInMetadata(AccessControlAction.ActionAPIKeysDelete, key)}
                     />
-                  </HorizontalGroup>
+                  </Stack>
                 </td>
               </tr>
             );
diff --git a/public/app/features/serviceaccounts/ServiceAccountPage.tsx b/public/app/features/serviceaccounts/ServiceAccountPage.tsx
index 86be0ebee93..f99bc03cb4a 100644
--- a/public/app/features/serviceaccounts/ServiceAccountPage.tsx
+++ b/public/app/features/serviceaccounts/ServiceAccountPage.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { getTimeZone, NavModelItem } from '@grafana/data';
-import { Button, ConfirmModal, HorizontalGroup, IconButton } from '@grafana/ui';
+import { Button, ConfirmModal, IconButton, Stack } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
@@ -137,7 +137,7 @@ export const ServiceAccountPageUnconnected = ({
       <Page.Contents isLoading={isLoading}>
         <div>
           {serviceAccount && !serviceAccount.isExternal && (
-            <HorizontalGroup spacing="md" height="auto" justify="flex-end">
+            <Stack gap={2} height="auto" justifyContent="flex-end">
               <Button
                 type={'button'}
                 variant="destructive"
@@ -165,29 +165,29 @@ export const ServiceAccountPageUnconnected = ({
                   Disable service account
                 </Button>
               )}
-            </HorizontalGroup>
+            </Stack>
           )}
           {serviceAccount && serviceAccount.isExternal && (
-            <HorizontalGroup spacing="md" height="auto" justify="flex-end">
+            <Stack gap={2} height="auto" justifyContent="flex-end">
               <IconButton
                 disabled={true}
                 name="lock"
                 size="md"
                 tooltip={`This is a managed service account and cannot be modified.`}
               />
-            </HorizontalGroup>
+            </Stack>
           )}
           {serviceAccount && (
             <ServiceAccountProfile serviceAccount={serviceAccount} timeZone={timezone} onChange={onProfileChange} />
           )}
-          <HorizontalGroup justify="space-between" height="auto">
+          <Stack justifyContent="space-between" height="auto">
             <h3>Tokens</h3>
             {!serviceAccount.isExternal && (
               <Button onClick={() => setIsTokenModalOpen(true)} disabled={tokenActionsDisabled}>
                 Add service account token
               </Button>
             )}
-          </HorizontalGroup>
+          </Stack>
           {tokens && (
             <ServiceAccountTokensTable
               tokens={tokens}