Alerting: Add additional text for creating a new label in labels subform (#104022)

public/app/features/alerting/unified/components/AlertLabelDropdown.tsx

@@ -4,8 +4,7 @@ import { GroupBase, OptionsOrGroups, createFilter } from 'react-select';
 
 import { SelectableValue } from '@grafana/data';
 import { Field, Select, useStyles2 } from '@grafana/ui';
-
-import { t } from '../../../../core/internationalization';
+import { t } from 'app/core/internationalization';
 
 export interface AlertLabelDropdownProps {
   onChange: (newValue: SelectableValue<string>) => void;
@@ -54,7 +53,7 @@ const AlertLabelDropdown: FC<AlertLabelDropdownProps> = forwardRef<HTMLDivElemen
             isValidNewOption={handleIsValidNewOption}
             options={options}
             maxMenuHeight={500}
-            noOptionsMessage="No labels found"
+            noOptionsMessage={t('alerting.label-picker.no-options-message', 'No labels found')}
             defaultValue={defaultValue}
             allowCustomValue
           />

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

@@ -80,7 +80,12 @@ export function LabelsSubForm({ dataSourceName, onClose, initialLabels }: Labels
     <FormProvider {...formAPI}>
       <form onSubmit={formAPI.handleSubmit(onSave)}>
         <Stack direction="column" gap={4}>
-          <Text>{getLabelText(type)}</Text>
+          <Stack direction="column" gap={1}>
+            <Text>{getLabelText(type)}</Text>
+            <Text variant="bodySmall" color="secondary">
+              {getDescriptionText()}
+            </Text>
+          </Stack>
           <Stack direction="column" gap={1}>
             <LabelsWithSuggestions dataSourceName={dataSourceName} />
             <Space v={2} />
@@ -436,6 +441,13 @@ function getLabelText(type: RuleFormType) {
   return text;
 }
 
+function getDescriptionText() {
+  return t(
+    'alerting.labels-sub-form.description',
+    'Select a label key/value from the options below, or type a new one and press Enter.'
+  );
+}
+
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     flexColumn: css({

public/locales/en-US/grafana.json

@@ -1205,6 +1205,9 @@
       "notes": "Notes",
       "returns": "Returns"
     },
+    "label-picker": {
+      "no-options-message": "No labels found"
+    },
     "labels-editor-modal": {
       "title-edit-labels": "Edit labels"
     },
@@ -1220,6 +1223,7 @@
       "title-labels": "Labels"
     },
     "labels-sub-form": {
+      "description": "Select a label key/value from the options below, or type a new one and press Enter.",
       "save": "Save"
     },
     "labels-with-suggestions": {