Alerting: Tidy up input fields for name, folder and group (#50432)

* aligned fields moved labels

* reduce width for labels inputs

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

@@ -15,7 +15,6 @@ import { RuleForm, RuleFormType, RuleFormValues } from '../../types/rule-form';
 
 import AnnotationsField from './AnnotationsField';
 import { GroupAndNamespaceFields } from './GroupAndNamespaceFields';
-import LabelsField from './LabelsField';
 import { RuleEditorSection } from './RuleEditorSection';
 import { RuleFolderPicker, Folder } from './RuleFolderPicker';
 import { checkForPathSeparator } from './util';
@@ -148,7 +147,6 @@ export const DetailsStep = ({ initialFolder }: DetailsStepProps) => {
         </div>
       )}
       {type !== RuleFormType.cloudRecording && <AnnotationsField />}
-      <LabelsField />
     </RuleEditorSection>
   );
 };
@@ -183,9 +181,10 @@ const useRuleFolderFilter = (existingRuleForm: RuleForm | null) => {
 const getStyles = (theme: GrafanaTheme2) => ({
   alignBaseline: css`
     align-items: baseline;
+    margin-bottom: ${theme.spacing(3)};
   `,
   formInput: css`
-    width: 330px;
+    width: 275px;
 
     & + & {
       margin-left: ${theme.spacing(3)};

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

@@ -98,7 +98,7 @@ const LabelsField: FC<Props> = ({ className }) => {
 const getStyles = (theme: GrafanaTheme) => {
   return {
     wrapper: css`
-      margin-top: ${theme.spacing.md};
+      margin-bottom: ${theme.spacing.xl};
     `,
     flexColumn: css`
       display: flex;
@@ -131,7 +131,7 @@ const getStyles = (theme: GrafanaTheme) => {
       margin-left: ${theme.spacing.xs};
     `,
     labelInput: css`
-      width: 183px;
+      width: 175px;
       margin-bottom: ${theme.spacing.sm};
       & + & {
         margin-left: ${theme.spacing.sm};

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

@@ -4,6 +4,7 @@ import React, { FC, useState } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { Card, Link, useStyles2, useTheme2 } from '@grafana/ui';
 
+import LabelsField from './LabelsField';
 import { RuleEditorSection } from './RuleEditorSection';
 
 export const NotificationsStep: FC = () => {
@@ -25,18 +26,22 @@ export const NotificationsStep: FC = () => {
       <div className={styles.contentWrapper}>
         {!hideFlowChart && (
           <img
+            className={styles.flowChart}
             src={`/public/img/alerting/notification_policy_${theme.name.toLowerCase()}.svg`}
             alt="notification policy flow chart"
           />
         )}
-        <Card className={styles.card}>
-          <Card.Heading>Root route – default for all alerts</Card.Heading>
-          <Card.Description>
-            Without custom labels, your alert will be routed through the root route. To view and edit the root route, go
-            to <Link href="/alerting/routes">notification policies</Link> or contact your admin in case you are using
-            non-Grafana alert management.
-          </Card.Description>
-        </Card>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          <LabelsField />
+          <Card className={styles.card}>
+            <Card.Heading>Root route – default for all alerts</Card.Heading>
+            <Card.Description>
+              Without custom labels, your alert will be routed through the root route. To view and edit the root route,
+              go to <Link href="/alerting/routes">notification policies</Link> or contact your admin in case you are
+              using non-Grafana alert management.
+            </Card.Description>
+          </Card>
+        </div>
       </div>
     </RuleEditorSection>
   );
@@ -54,6 +59,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
   `,
   card: css`
     max-width: 500px;
-    margin-left: ${theme.spacing(3)};
+  `,
+  flowChart: css`
+    margin-right: ${theme.spacing(3)};
   `,
 });