ui(alerting): Update "Enter custom fieldName" placeholder (#109665)

* ui(alerting): Update custom template placeholder

* Use i18n unescape format, instead of JS unescape fn

* Run `make i18n-extract`

* edit code comment

public/app/features/alerting/unified/components/receivers/form/fields/TemplateSelector.tsx

@@ -303,7 +303,19 @@ function OptionCustomfield({
       <TextArea
         id={id}
         label={t('alerting.option-customfield.label-custom-template', 'Custom template')}
-        placeholder={option.placeholder}
+        placeholder={
+          option.placeholder
+            ? t(
+                'alerting.option-customfield.placeholder-with-template',
+                'Enter plain text or reference a template, e.g. {{- currentTemplate}}',
+                { currentTemplate: option.placeholder }
+              )
+            : // if "option.placeholder" is not set, the placeholder displays the "default.message" template
+              t(
+                'alerting.option-customfield.placeholder',
+                'Enter plain text or reference a template, e.g. {{template "default.message" .}}'
+              )
+        }
         onChange={(e) => onCustomTemplateChange(e.currentTarget.value)}
         defaultValue={initialValue}
       />

public/locales/en-US/grafana.json

@@ -2039,7 +2039,9 @@
       "recipient-notification-fires": "Select who should receive a notification when an alert rule fires."
     },
     "option-customfield": {
-      "label-custom-template": "Custom template"
+      "label-custom-template": "Custom template",
+      "placeholder": "Enter plain text or reference a template, e.g. {{template \"default.message\" .}}",
+      "placeholder-with-template": "Enter plain text or reference a template, e.g. {{- currentTemplate}}"
     },
     "other-alert-managers-available": {
       "body-selected-alertmanager-not-found": "The selected Alertmanager no longer exists or you may not have permission to access it. You can select a different Alertmanager from the dropdown.",