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

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)';
               }

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');

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>

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>

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>

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;