Edit alert UI text (#32456)

* Update AlertingQueryEditor.tsx

* Update NotificationSettings.tsx

* ui changes

* Update AlertDefinitionOptions.tsx

* Update AlertRuleList.tsx

* Update AlertTab.tsx

public/app/features/alerting/AlertRuleList.tsx

@@ -45,7 +45,7 @@ export class AlertRuleListUnconnected extends PureComponent<Props> {
     { label: 'OK', value: 'ok' },
     { label: 'Not OK', value: 'not_ok' },
     { label: 'Alerting', value: 'alerting' },
-    { label: 'No Data', value: 'no_data' },
+    { label: 'No data', value: 'no_data' },
     { label: 'Paused', value: 'paused' },
     { label: 'Pending', value: 'pending' },
   ];

public/app/features/alerting/AlertTab.tsx

@@ -148,7 +148,7 @@ class UnConnectedAlertTab extends PureComponent<Props, State> {
             <small>You need to save dashboard for the delete to take effect.</small>
           </div>
         }
-        confirmText="Delete Alert"
+        confirmText="Delete alert"
         onDismiss={onDismiss}
         onConfirm={() => {
           delete panel.alert;

public/app/features/alerting/components/AlertDefinitionOptions.tsx

@@ -39,7 +39,7 @@ export const AlertDefinitionOptions: FC<Props> = ({
         <Field label="Title">
           <Input width={25} name="title" value={alertDefinition.title} onChange={onChange} />
         </Field>
-        <Field label="Description" description="What does the alert do and why was it created">
+        <Field label="Description" description="What does the alert do? Why was it created?">
           <TextArea
             rows={5}
             width={25}

public/app/features/alerting/components/AlertingQueryEditor.tsx

@@ -56,7 +56,7 @@ class AlertingQueryEditorUnconnected extends PureComponent<Props> {
             />
           </div>
           <QueryGroup
-            queryRunner={queryRunner!} // if the queryRunner is undefined here somethings very wrong so it's ok to throw an unhandled error
+            queryRunner={queryRunner!} // if the queryRunner is undefined here, somethings very wrong so it's ok to throw an unhandled error
             options={queryOptions}
             onRunQueries={this.onRunQueries}
             onOptionsChange={this.onQueryOptionsChange}

public/app/features/alerting/components/NotificationSettings.tsx

@@ -46,8 +46,8 @@ export const NotificationSettings: FC<Props> = ({ currentFormValues, imageRender
         <>
           <Field
             label="Send reminder every"
-            description="Specify how often reminders should be sent, e.g. every 30s, 1m, 10m, 30m or 1h etc.
-            Alert reminders are sent after rules are evaluated. Therefore a reminder can never be sent more frequently
+            description="Specify how often reminders should be sent, e.g. every 30s, 1m, 10m, 30m', or 1h etc.
+            Alert reminders are sent after rules are evaluated. A reminder can never be sent more frequently
             than a configured alert rule evaluation interval."
           >
             <Input name="frequency" ref={register} width={8} />

public/app/features/alerting/partials/alert_howto.html

@@ -16,10 +16,10 @@
 			<img src="public/img/alert_howto_new.png"></img>
 		</div>
 		<p class="p-a-2 text-center offset-lg-1 col-lg-10">
-			Alerts are added and configured in the <strong>Alert Tab</strong> of any dashboard
+			Alerts are added and configured in the Alert tab of any dashboard
 			graph panel, letting you build and visualize an alert using existing queries.
 			<br> <br>
-			To persist your alert rule changes remember to save the dashboard.
+			Remember to save the dashboard to persist your alert rule changes.
 			<br>
 			<br>
 		</p>

public/app/features/alerting/partials/alert_tab.html

@@ -32,9 +32,9 @@
           placeholder="5m"
         />
         <info-popover mode="right-absolute">
-          If an alert rule has a configured For and the query violates the configured threshold it will first go from OK
-          to Pending. Going from OK to Pending Grafana will not send any notifications. Once the alert rule has been
-          firing for more than For duration, it will change to Alerting and send alert notifications.
+          If an alert rule has a configured and the query violates the configured threshold, then it goes from OK
+          to Pending. Grafana does not send any notifications for that change. Once the alert rule has been
+          firing for more than For duration, then the alert changes to Alerting and sends alert notifications.
         </info-popover>
       </div>
     </div>
@@ -125,13 +125,13 @@
   </div>
 
   <div class="gf-form-group">
-    <h4 class="section-heading">No Data & Error Handling</h4>
+    <h4 class="section-heading">No data and error handling</h4>
     <div class="gf-form-inline">
       <div class="gf-form">
         <span class="gf-form-label width-15">If no data or all values are null</span>
       </div>
       <div class="gf-form">
-        <span class="gf-form-label query-keyword">SET STATE TO</span>
+        <span class="gf-form-label query-keyword">set state to</span>
         <div class="gf-form-select-wrapper">
           <select
             class="gf-form-input"
@@ -148,7 +148,7 @@
         <span class="gf-form-label width-15">If execution error or timeout</span>
       </div>
       <div class="gf-form">
-        <span class="gf-form-label query-keyword">SET STATE TO</span>
+        <span class="gf-form-label query-keyword">set state to</span>
         <div class="gf-form-select-wrapper">
           <select
             class="gf-form-input"
@@ -195,7 +195,7 @@
       placeholder="Notification message details..."
     ></textarea>
     <info-popover mode="right-absolute">
-      If you want to apply templating to the alert rule name, you must use the following syntax - ${Label}
+      If you want to apply templating to the alert rule name, use the following syntax - ${Label}
     </info-popover>
   </div>
   <div class="gf-form">