Further improvements on labels (#3536)

# What this PR does

## Which issue(s) this PR fixes

## Checklist

- [x] Unit, integration, and e2e (if applicable) tests updated
- [x] Documentation added (or `pr:no public docs` PR label added if not
required)
- [x] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.helpers.ts

@@ -16,5 +16,5 @@ export const getIsTooManyLabelsWarningVisible = (
 
 export const getIsAddBtnDisabled = ({ custom }: AlertReceiveChannel['alert_group_labels']) => {
   const lastItem = custom.at(-1);
-  return lastItem?.key.id === undefined || lastItem?.value.id === undefined;
+  return lastItem && (lastItem?.key.id === undefined || lastItem?.value.id === undefined);
 };

grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.tsx

@@ -312,7 +312,7 @@ const CustomLabels = (props: CustomLabelsProps) => {
 
   return (
     <VerticalGroup>
-      <Text>Dynamic & Static labels ss</Text>
+      <Text>Dynamic & Static labels</Text>
       <Text type="secondary" size="small">
         Dynamic: label values are extracted from the alert payload using Jinja. Keys remain static.
         <br />

grafana-plugin/src/containers/Labels/Labels.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
 
 import { ServiceLabels, ServiceLabelsProps } from '@grafana/labels';
-import { Field, Icon, Label } from '@grafana/ui';
+import { Field, Label } from '@grafana/ui';
 import { isEmpty } from 'lodash-es';
 import { observer } from 'mobx-react';
 
@@ -104,14 +104,7 @@ const Labels = observer(
 
     return (
       <div>
-        <Field
-          label={
-            <Label description={<div className="u-padding-vertical-xs">{description}</div>}>
-              <span>Labels</span>&nbsp;
-              <Icon name="info-circle" />
-            </Label>
-          }
-        >
+        <Field label={<Label description={<div className="u-padding-vertical-xs">{description}</div>}>Labels</Label>}>
           <ServiceLabels
             loadById
             value={value}

grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.tsx

@@ -73,6 +73,7 @@ const CustomFieldSectionRenderer: React.FC<CustomFieldSectionRendererProps> = ob
         value={getValues<LabelKeyValue[]>(WebhookFormFieldName.Labels) || []}
         errors={labelsFormErrors}
         onDataUpdate={onDataUpdate}
+        description="Labels applied to the webhook will be included in the webhook payload, along with alert group and integration labels."
       />
     </RenderConditionally>
   );