Remove (most) occurrences of HorizontalGroup within Alerting

.betterer.results

@@ -1712,9 +1712,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "16"],
       [0, 0, 0, "Styles should be written using objects.", "17"]
     ],
-    "public/app/features/alerting/unified/components/receivers/GlobalConfigForm.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/alerting/unified/components/receivers/PayloadEditor.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
@@ -1893,9 +1890,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
     "public/app/features/alerting/unified/components/rule-editor/PreviewRule.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, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Styles should be written using objects.", "1"]
-      [0, 0, 0, "Styles should be written using objects.", "2"]
     ],
     "public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
@@ -1935,9 +1931,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/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.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/alerting/unified/components/rule-editor/notificaton-preview/NotificationPolicyMatchers.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]
@@ -2028,9 +2021,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "2"],
       [0, 0, 0, "Styles should be written using objects.", "3"]
     ],
-    "public/app/features/alerting/unified/components/rules/MultipleDataSourcePicker.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/alerting/unified/components/rules/NoRulesCTA.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
@@ -2092,7 +2082,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
     "public/app/features/alerting/unified/components/rules/RulesGroup.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"],
@@ -2103,8 +2093,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "8"],
       [0, 0, 0, "Styles should be written using objects.", "9"],
       [0, 0, 0, "Styles should be written using objects.", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"],
+      [0, 0, 0, "Styles should be written using objects.", "11"]
-      [0, 0, 0, "Styles should be written using objects.", "12"]
     ],
     "public/app/features/alerting/unified/components/rules/RulesTable.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],

public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 
-import { Alert, Button, HorizontalGroup, LinkButton } from '@grafana/ui';
+import { Alert, Button, Stack, LinkButton } from '@grafana/ui';
 import { useCleanup } from 'app/core/hooks/useCleanup';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
 import { useDispatch } from 'app/types';
@@ -87,7 +87,7 @@ export const GlobalConfigForm = ({ config, alertManagerSourceName }: Props) => {
           />
         ))}
         <div>
-          <HorizontalGroup>
+          <Stack>
             {!readOnly && (
               <>
                 {loading && (
@@ -106,7 +106,7 @@ export const GlobalConfigForm = ({ config, alertManagerSourceName }: Props) => {
             >
               Cancel
             </LinkButton>
-          </HorizontalGroup>
+          </Stack>
         </div>
       </form>
     </FormProvider>

public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx

@@ -6,7 +6,7 @@ import { takeWhile } from 'rxjs/operators';
 
 import { dateTimeFormatISO, GrafanaTheme2, LoadingState } from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
-import { Alert, Button, HorizontalGroup, useStyles2 } from '@grafana/ui';
+import { Alert, Button, Stack, useStyles2 } from '@grafana/ui';
 
 import { previewAlertRule } from '../../api/preview';
 import { useAlertQueriesStatus } from '../../hooks/useAlertQueriesStatus';
@@ -32,7 +32,7 @@ export function PreviewRule(): React.ReactElement | null {
 
   return (
     <div className={styles.container}>
-      <HorizontalGroup>
+      <Stack>
         {allDataSourcesAvailable && (
           <Button disabled={!isPreviewAvailable} type="button" variant="primary" onClick={onPreview}>
             Preview alerts
@@ -43,7 +43,7 @@ export function PreviewRule(): React.ReactElement | null {
             Cannot display the query preview. Some of the data sources used in the queries are not available.
           </Alert>
         )}
-      </HorizontalGroup>
+      </Stack>
       <PreviewRuleResult preview={preview} />
     </div>
   );

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx

@@ -5,7 +5,7 @@ import { Link, useParams } from 'react-router-dom';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { Button, ConfirmModal, CustomScrollbar, HorizontalGroup, Spinner, Stack, useStyles2 } from '@grafana/ui';
+import { Button, ConfirmModal, CustomScrollbar, Spinner, Stack, useStyles2 } from '@grafana/ui';
 import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { useAppNotification } from 'app/core/copy/appNotification';
 import { contextSrv } from 'app/core/core';
@@ -184,7 +184,7 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
   useEffect(() => setEvaluateEvery(evaluateEveryInForm), [evaluateEveryInForm]);
 
   const actionButtons = (
-    <HorizontalGroup height="auto" justify="flex-end">
+    <Stack justifyContent="flex-end" alignItems="center">
       {existing && (
         <Button
           variant="primary"
@@ -217,7 +217,6 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
           Delete
         </Button>
       ) : null}
-
       {existing && isCortexLokiOrRecordingRule(watch) && (
         <Button
           variant="secondary"
@@ -229,7 +228,7 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
           Edit YAML
         </Button>
       )}
-    </HorizontalGroup>
+    </Stack>
   );
 
   const isPaused = existing && isGrafanaRulerRule(existing.rule) && isGrafanaRulerRulePaused(existing.rule);

public/app/features/alerting/unified/components/rules/MultipleDataSourcePicker.tsx

@@ -10,7 +10,7 @@ import {
 import { selectors } from '@grafana/e2e-selectors';
 import { getDataSourceSrv, DataSourcePickerState, DataSourcePickerProps } from '@grafana/runtime';
 import { ExpressionDatasourceRef } from '@grafana/runtime/src/utils/DataSourceWithBackend';
-import { ActionMeta, HorizontalGroup, PluginSignatureBadge, MultiSelect } from '@grafana/ui';
+import { ActionMeta, Stack, PluginSignatureBadge, MultiSelect } from '@grafana/ui';
 
 import { isDataSourceManagingAlerts } from '../../utils/datasource';
 
@@ -168,9 +168,9 @@ export const MultipleDataSourcePicker = (props: MultipleDataSourcePickerProps) =
         getOptionLabel={(o) => {
           if (o.meta && isUnsignedPluginSignature(o.meta.signature) && o !== value) {
             return (
-              <HorizontalGroup align="center" justify="space-between" height="auto">
+              <Stack alignItems="center" justifyContent="space-between">
                 <span>{o.label}</span> <PluginSignatureBadge status={o.meta.signature} />
-              </HorizontalGroup>
+              </Stack>
             );
           }
           return o.label || '';

public/app/features/alerting/unified/components/rules/RulesGroup.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Badge, ConfirmModal, HorizontalGroup, Icon, Spinner, Stack, Tooltip, useStyles2 } from '@grafana/ui';
+import { Badge, ConfirmModal, Icon, Spinner, Stack, Tooltip, useStyles2 } from '@grafana/ui';
 import { useDispatch } from 'app/types';
 import { CombinedRuleGroup, CombinedRuleNamespace } from 'app/types/unified-alerting';
 
@@ -83,10 +83,10 @@ export const RulesGroup = React.memo(({ group, namespace, expandAll, viewMode }:
   // for grafana, link to folder views
   if (isDeleting) {
     actionIcons.push(
-      <HorizontalGroup key="is-deleting">
+      <Stack key="is-deleting">
         <Spinner />
         deleting
-      </HorizontalGroup>
+      </Stack>
     );
   } else if (rulesSource === GRAFANA_RULES_SOURCE_NAME) {
     if (folderUID) {