From dbf258b83715fc091ac09e0f10d2f251fedd2f56 Mon Sep 17 00:00:00 2001
From: Tom Ratcliffe <tom.ratcliffe@grafana.com>
Date: Tue, 21 May 2024 12:04:10 +0100
Subject: [PATCH] Alerting: Center "need help" icons (#87981)

---
 .../components/alert-groups/MatcherFilter.tsx  |  2 +-
 .../components/rule-editor/AnnotationsStep.tsx |  2 +-
 .../rule-editor/GrafanaEvaluationBehavior.tsx  |  2 +-
 .../components/rule-editor/NeedHelpInfo.tsx    |  2 +-
 .../rule-editor/NotificationsStep.tsx          | 18 ++++--------------
 .../SmartAlertTypeDetector.tsx                 |  2 +-
 .../unified/components/rules/RulesFilter.tsx   |  4 ++--
 .../rules/state-history/StateHistory.tsx       |  2 +-
 8 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx b/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
index dc87bb2fd58..b53fbf6425e 100644
--- a/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
+++ b/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
@@ -37,7 +37,7 @@ export const MatcherFilter = ({ onFilterChange, defaultQueryString }: Props) =>
       error={inputInvalid ? 'Query must use valid matcher syntax. See the examples in the help tooltip.' : null}
       label={
         <Label>
-          <Stack gap={0.5}>
+          <Stack gap={0.5} alignItems="center">
             <span>Search by label</span>
             <Tooltip
               content={
diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
index 37220cc1c35..f24b2a06909 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
@@ -90,7 +90,7 @@ const AnnotationsStep = () => {
 
   function getAnnotationsSectionDescription() {
     return (
-      <Stack direction="row" gap={0.5} alignItems="baseline">
+      <Stack direction="row" gap={0.5} alignItems="center">
         <Text variant="bodySmall" color="secondary">
           Add more context in your notification messages.
         </Text>
diff --git a/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx b/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
index b6938b76dba..75bd429495f 100644
--- a/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
@@ -208,7 +208,7 @@ function getDescription() {
   const docsLink = 'https://grafana.com/docs/grafana/latest/alerting/fundamentals/alert-rules/rule-evaluation/';
 
   return (
-    <Stack direction="row" gap={0.5} alignItems="baseline">
+    <Stack direction="row" gap={0.5} alignItems="center">
       <Text variant="bodySmall" color="secondary">
         Define how the alert rule is evaluated.
       </Text>
diff --git a/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx b/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx
index 5fab70a6159..bed39ec01f1 100644
--- a/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx
@@ -17,7 +17,7 @@ export function NeedHelpInfo({ contentText, externalLink, linkText, title = 'Nee
     <Toggletip
       content={<div className={styles.mutedText}>{contentText}</div>}
       title={
-        <Stack gap={1} direction="row">
+        <Stack gap={0.5} direction="row" alignItems="center">
           <Icon name="question-circle" />
           {title}
         </Stack>
diff --git a/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx
index 2fbfdcc7f2d..f4d8c1ad097 100644
--- a/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx
@@ -54,7 +54,7 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => {
       stepNo={4}
       title={type === RuleFormType.cloudRecording ? 'Add labels' : 'Configure labels and notifications'}
       description={
-        <Stack direction="row" gap={0.5} alignItems="baseline">
+        <Stack direction="row" gap={0.5} alignItems="center">
           {type === RuleFormType.cloudRecording ? (
             <Text variant="bodySmall" color="secondary">
               Add labels to help you better manage your recording rules
@@ -122,7 +122,7 @@ function ManualAndAutomaticRouting({ alertUid }: { alertUid?: string }) {
   };
 
   return (
-    <Stack direction="column">
+    <Stack direction="column" gap={2}>
       <Stack direction="column">
         <RadioButtonGroup
           options={routingOptions}
@@ -243,35 +243,25 @@ interface NotificationsStepDescriptionProps {
 }
 
 export const RoutingOptionDescription = ({ manualRouting }: NotificationsStepDescriptionProps) => {
-  const styles = useStyles2(getStyles);
   return (
-    <div className={styles.notificationsOptionDescription}>
+    <Stack alignItems="center">
       <Text variant="bodySmall" color="secondary">
         {manualRouting
           ? 'Notifications for firing alerts are routed to a selected contact point.'
           : 'Notifications for firing alerts are routed to contact points based on matching labels and the notification policy tree.'}
       </Text>
       {manualRouting ? <NeedHelpInfoForContactpoint /> : <NeedHelpInfoForNotificationPolicy />}
-    </div>
+    </Stack>
   );
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
   routingOptions: css({
-    marginTop: theme.spacing(2),
     width: 'fit-content',
   }),
   configureNotifications: css({
     display: 'flex',
     flexDirection: 'column',
-    gap: theme.spacing(1),
     marginTop: theme.spacing(2),
   }),
-  notificationsOptionDescription: css({
-    marginTop: theme.spacing(1),
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'baseline',
-    gap: theme.spacing(0.5),
-  }),
 });
diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SmartAlertTypeDetector.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SmartAlertTypeDetector.tsx
index 5a526fc8443..d123b01ef52 100644
--- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SmartAlertTypeDetector.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SmartAlertTypeDetector.tsx
@@ -98,7 +98,7 @@ export function SmartAlertTypeDetector({
     <Stack direction="column" gap={1} alignItems="flex-start">
       <Stack direction="column" gap={0}>
         <Text variant="h5">Rule type</Text>
-        <Stack direction="row" gap={0.5} alignItems="baseline">
+        <Stack direction="row" gap={0.5} alignItems="center">
           <Text variant="bodySmall" color="secondary">
             Select where the alert rule will be managed.
           </Text>
diff --git a/public/app/features/alerting/unified/components/rules/RulesFilter.tsx b/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
index 713dcb3d56e..983273389d0 100644
--- a/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
+++ b/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
@@ -148,7 +148,7 @@ const RulesFilter = ({ onFilterCleared = () => undefined }: RulesFilerProps) =>
             className={styles.dsPickerContainer}
             label={
               <Label htmlFor="data-source-picker">
-                <Stack gap={0.5}>
+                <Stack gap={0.5} alignItems="center">
                   <span>Search by data sources</span>
                   <Tooltip
                     content={
@@ -249,7 +249,7 @@ const RulesFilter = ({ onFilterCleared = () => undefined }: RulesFilerProps) =>
               <Field
                 label={
                   <Label htmlFor="rulesSearchInput">
-                    <Stack gap={0.5}>
+                    <Stack gap={0.5} alignItems="center">
                       <span>Search</span>
                       <HoverCard content={<SearchQueryHelp />}>
                         <Icon name="info-circle" size="sm" tabIndex={0} title="Search help" />
diff --git a/public/app/features/alerting/unified/components/rules/state-history/StateHistory.tsx b/public/app/features/alerting/unified/components/rules/state-history/StateHistory.tsx
index a58db6e63d6..88a25cda460 100644
--- a/public/app/features/alerting/unified/components/rules/state-history/StateHistory.tsx
+++ b/public/app/features/alerting/unified/components/rules/state-history/StateHistory.tsx
@@ -82,7 +82,7 @@ const StateHistory = ({ alertId }: Props) => {
         <Field
           label={
             <Label>
-              <Stack gap={0.5}>
+              <Stack gap={0.5} alignItems="center">
                 <span>Filter group</span>
                 <Tooltip
                   content={