From 06bbf870daeebc57b5c9c646712192d2022a5566 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
Date: Thu, 9 Jun 2022 10:51:37 +0200
Subject: [PATCH] Alerting: Tidy up input fields for name, folder and group
 (#50432)

* aligned fields moved labels

* reduce width for labels inputs
---
 .../components/rule-editor/DetailsStep.tsx    |  5 ++--
 .../components/rule-editor/LabelsField.tsx    |  4 +--
 .../rule-editor/NotificationsStep.tsx         | 25 ++++++++++++-------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
index d4d9dd19617..cf3d74a9ca5 100644
--- a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
+++ b/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)};
diff --git a/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx b/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
index 34eb8cbebe8..9c209fc9235 100644
--- a/public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx
+++ b/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};
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 d1464ac928c..48aba4eccb9 100644
--- a/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx
+++ b/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)};
   `,
 });