Improve getting/updating contact points for Grafana Alerting integrat…

…ion (#2742)

This PR improves Grafana Alerting integration:
- get alerting contact points "on fly" instead of keeping them in db
- add ability to connect more than one contact point
- add ability to create new contact point on create Grafana Alerting
integration
- show warnings in integration settings for non-active contact points
- remove creation alerting notification policies on create Grafana
Alerting integration

## 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)

---------

Co-authored-by: Rares Mardare <rares.mardare@grafana.com>

src/assets/style/utils.css

@@ -16,6 +16,10 @@
   align-items: center;
 }
 
+.u-flex-space-between {
+  justify-content: space-between;
+}
+
 .u-flex-grow-1 {
   flex-grow: 1;
 }
@@ -33,7 +37,11 @@
 }
 
 .u-padding-top-md {
-  padding-top: 16px;
+  padding-top: 12px;
+}
+
+.u-margin-bottom-none {
+  margin-bottom: 0;
 }
 
 .u-pull-right {
@@ -108,3 +116,16 @@
 .buttons {
   padding-bottom: 24px;
 }
+
+/* -----
+ * Icons
+ */
+
+.icon-exclamation {
+  color: var(--error-text-color);
+}
+
+.loadingPlaceholder {
+  margin-bottom: 0;
+  margin-right: 4px;
+}

src/components/GForm/GForm.tsx

@@ -9,6 +9,7 @@ import { FormItem, FormItemType } from 'components/GForm/GForm.types';
 import MonacoEditor from 'components/MonacoEditor/MonacoEditor';
 import { MONACO_READONLY_CONFIG } from 'components/MonacoEditor/MonacoEditor.config';
 import GSelect from 'containers/GSelect/GSelect';
+import { CustomFieldSectionRendererProps } from 'containers/IntegrationForm/IntegrationForm';
 import RemoteSelect from 'containers/RemoteSelect/RemoteSelect';
 
 import styles from './GForm.module.scss';
@@ -19,6 +20,8 @@ interface GFormProps {
   form: { name: string; fields: FormItem[] };
   data: any;
   onSubmit: (data: any) => void;
+
+  customFieldSectionRenderer?: React.FC<CustomFieldSectionRendererProps>;
   onFieldRender?: (
     formItem: FormItem,
     disabled: boolean,
@@ -36,19 +39,24 @@ function renderFormControl(
   formItem: FormItem,
   register: any,
   control: any,
-  disabled,
+  disabled: boolean,
   onChangeFn: (field, value) => void
 ) {
   switch (formItem.type) {
     case FormItemType.Input:
       return (
-        <Input {...register(formItem.name, formItem.validation)} onChange={(value) => onChangeFn(undefined, value)} />
+        <Input
+          {...register(formItem.name, formItem.validation)}
+          placeholder={formItem.placeholder}
+          onChange={(value) => onChangeFn(undefined, value)}
+        />
       );
 
     case FormItemType.Password:
       return (
         <Input
           {...register(formItem.name, formItem.validation)}
+          placeholder={formItem.placeholder}
           type="password"
           onChange={(value) => onChangeFn(undefined, value)}
         />
@@ -58,6 +66,7 @@ function renderFormControl(
       return (
         <TextArea
           rows={formItem.extra?.rows || 4}
+          placeholder={formItem.placeholder}
           {...register(formItem.name, formItem.validation)}
           onChange={(value) => onChangeFn(undefined, value)}
         />
@@ -80,7 +89,14 @@ function renderFormControl(
       return (
         <InputControl
           render={({ field: { ...field } }) => {
-            return <Select {...field} {...formItem.extra} onChange={(value) => onChangeFn(field, value.value)} />;
+            return (
+              <Select
+                {...field}
+                {...formItem.extra}
+                {...register(formItem.name, formItem.validation)}
+                onChange={(value) => onChangeFn(field, value.value)}
+              />
+            );
           }}
           control={control}
           name={formItem.name}
@@ -154,7 +170,7 @@ function renderFormControl(
 
 class GForm extends React.Component<GFormProps, {}> {
   render() {
-    const { form, data, onFieldRender } = this.props;
+    const { form, data, onFieldRender, customFieldSectionRenderer: CustomFieldSectionRenderer } = this.props;
 
     const openFields = form.fields.filter((field) => !field.collapsed);
     const collapsedfields = form.fields.filter((field) => field.collapsed);
@@ -167,16 +183,34 @@ class GForm extends React.Component<GFormProps, {}> {
               setValue(formItem.name, undefined); // clear input value on hide
               return null;
             }
+
             const disabled = formItem.disabled
               ? true
               : formItem.getDisabled
               ? formItem.getDisabled(getValues())
               : false;
 
-            const formControl = renderFormControl(formItem, register, control, disabled, (field, value) => {
-              field?.onChange(value);
-              this.forceUpdate();
-            });
+            const formControl = renderFormControl(formItem, register, control, disabled, this.onChange);
+
+            if (CustomFieldSectionRenderer && formItem.type === FormItemType.Other && formItem.render) {
+              return (
+                <CustomFieldSectionRenderer
+                  control={control}
+                  formItem={formItem}
+                  setValue={(fName: string, fValue: any) => {
+                    setValue(fName, fValue);
+                    this.forceUpdate();
+                  }}
+                  errors={errors}
+                  register={register}
+                />
+              );
+            }
+
+            // skip input render when there's no Custom Renderer
+            if (formItem.type === FormItemType.Other) {
+              return undefined;
+            }
 
             return (
               <Field
@@ -211,6 +245,11 @@ class GForm extends React.Component<GFormProps, {}> {
     );
   }
 
+  onChange = (field: any, value: string) => {
+    field?.onChange(value);
+    this.forceUpdate();
+  };
+
   handleSubmit = (data) => {
     const { form, onSubmit } = this.props;
 

src/components/GForm/GForm.types.ts

@@ -8,6 +8,7 @@ export enum FormItemType {
   'Switch' = 'switch',
   'RemoteSelect' = 'remoteselect',
   'Monaco' = 'monaco',
+  'Other' = 'other',
 }
 
 export interface FormItem {
@@ -16,6 +17,7 @@ export interface FormItem {
   type: FormItemType;
   disabled?: boolean;
   description?: string;
+  placeholder?: string;
   normalize?: (value: any) => any;
   isVisible?: (data: any) => any;
   getDisabled?: (value: any) => any;
@@ -25,4 +27,5 @@ export interface FormItem {
   };
   extra?: any;
   collapsed?: boolean;
+  render?: boolean;
 }

src/components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView.module.scss

@@ -13,6 +13,7 @@
 }
 
 .integrationTree__element {
+  margin-left: 6px;
   visibility: hidden;
   overflow-y: hidden;
   height: 0;
@@ -45,4 +46,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
+  path {
+    // this will overwrite all icons below to be gray
+    fill: var(--always-gray);
+  }
 }