From 0bcc60f437ed9cb553b06939de90c178fddb04c3 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Thu, 25 Jan 2024 09:57:10 +0100
Subject: [PATCH] Alerting: Swap order between Annotations and Labels step in
 the alert rule form. (#81060)

* Swap order between Annotations and Labels and notifications step, and update some texts

* Update routing preview label size

* Fix dashboard and panel label when are selected

* Swap order in modify export form
---
 .../components/rule-editor/AnnotationHeaderField.tsx      | 2 ++
 .../unified/components/rule-editor/AnnotationsStep.tsx    | 8 ++++----
 .../unified/components/rule-editor/NotificationsStep.tsx  | 6 +++---
 .../rule-editor/alert-rule-form/AlertRuleForm.tsx         | 4 ++--
 .../rule-editor/alert-rule-form/ModifyExportRuleForm.tsx  | 4 ++--
 .../notificaton-preview/NotificationPreview.tsx           | 3 ++-
 6 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx
index 892fabb5278..b92f2568f04 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationHeaderField.tsx
@@ -38,8 +38,10 @@ const AnnotationHeaderField = ({
               switch (annotationField.key) {
                 case Annotation.dashboardUID:
                   label = 'Dashboard and panel';
+                  break;
                 case Annotation.panelID:
                   label = '';
+                  break;
                 default:
                   label = annotationLabels[annotation] && annotationLabels[annotation] + ' (optional)';
               }
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 10df3d5e940..010cba9f7a1 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
@@ -95,11 +95,11 @@ const AnnotationsStep = () => {
     return (
       <Stack direction="row" gap={0.5} alignItems="baseline">
         <Text variant="bodySmall" color="secondary">
-          Add annotations to provide more context in your alert notifications.
+          Add more context in your notification messages.
         </Text>
         <NeedHelpInfo
-          contentText={`Annotations add metadata to provide more information on the alert in your alert notifications.
-          For example, add a Summary annotation to tell you which value caused the alert to fire or which server it happened on.
+          contentText={`Annotations add metadata to provide more information on the alert in your alert notification messages. 
+          For example, add a Summary annotation to tell you which value caused the alert to fire or which server it happened on. 
           Annotations can contain a combination of text and template code.`}
           externalLink={docsLink}
           linkText={`Read about annotations`}
@@ -110,7 +110,7 @@ const AnnotationsStep = () => {
   }
 
   return (
-    <RuleEditorSection stepNo={4} title="Add annotations" description={getAnnotationsSectionDescription()} fullWidth>
+    <RuleEditorSection stepNo={5} title="Add annotations" description={getAnnotationsSectionDescription()} fullWidth>
       <Stack direction="column" gap={1}>
         {fields.map((annotationField, index: number) => {
           const isUrl = annotations[index]?.key?.toLocaleLowerCase().endsWith('url');
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 f724766a65b..d4c9a8af1ee 100644
--- a/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx
@@ -37,8 +37,8 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => {
 
   return (
     <RuleEditorSection
-      stepNo={type === RuleFormType.cloudRecording ? 4 : 5}
-      title={type === RuleFormType.cloudRecording ? 'Add labels' : 'Labels and notifications'}
+      stepNo={4}
+      title={type === RuleFormType.cloudRecording ? 'Add labels' : 'Configure labels and notifications'}
       description={
         <Stack direction="row" gap={0.5} alignItems="baseline">
           {type === RuleFormType.cloudRecording ? (
@@ -59,7 +59,7 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => {
       <LabelsField dataSourceName={dataSourceName} />
       {shouldAllowSimplifiedRouting && (
         <div className={styles.configureNotifications}>
-          <Text element="h5">Configure notifications</Text>
+          <Text element="h5">Notifications</Text>
           <Text variant="bodySmall" color="secondary">
             Select who should receive a notification when an alert rule fires.
           </Text>
diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx
index 47db55eda10..a7a5ef32199 100644
--- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx
@@ -240,10 +240,10 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
                   {type === RuleFormType.cloudRecording && <RecordingRulesNameSpaceAndGroupStep />}
 
                   {/* Step 4 & 5 */}
-                  {/* Annotations only for cloud and Grafana */}
-                  {type !== RuleFormType.cloudRecording && <AnnotationsStep />}
                   {/* Notifications step*/}
                   <NotificationsStep alertUid={uidFromParams} />
+                  {/* Annotations only for cloud and Grafana */}
+                  {type !== RuleFormType.cloudRecording && <AnnotationsStep />}
                 </>
               )}
             </Stack>
diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/ModifyExportRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/ModifyExportRuleForm.tsx
index a2a2433dda3..87f44a6c2b9 100644
--- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/ModifyExportRuleForm.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/ModifyExportRuleForm.tsx
@@ -97,10 +97,10 @@ export function ModifyExportRuleForm({ ruleForm, alertUid }: ModifyExportRuleFor
                 />
 
                 {/* Step 4 & 5 */}
-                {/* Annotations only for cloud and Grafana */}
-                <AnnotationsStep />
                 {/* Notifications step*/}
                 <NotificationsStep alertUid={alertUid} />
+                {/* Annotations only for cloud and Grafana */}
+                <AnnotationsStep />
               </Stack>
             </CustomScrollbar>
           </div>
diff --git a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx
index 1db96a0ff64..89752ea69f8 100644
--- a/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreview.tsx
@@ -71,7 +71,7 @@ export const NotificationPreview = ({
     <Stack direction="column">
       <div className={styles.routePreviewHeaderRow}>
         <div className={styles.previewHeader}>
-          <Text element="h4">Alert instance routing preview</Text>
+          <Text element="h5">Alert instance routing preview</Text>
           {isLoading && previewUninitialized && (
             <Text color="secondary" variant="bodySmall">
               Loading...
@@ -124,6 +124,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-start;
+    margin-top: ${theme.spacing(1)};
   `,
   collapseLabel: css`
     flex: 1;