Fix for creating Integration (#1951)

# What this PR does

Fix for creating Integration
After creating Integration we land on Integration page, not a table
Added error notification for TemplateFoEdit obj to avoid crashing
Loading state for AlertGroup List
Small style fixes

grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.tsx

@@ -3,6 +3,7 @@ import React, { useState, useCallback, ChangeEvent } from 'react';
 import { Drawer, VerticalGroup, HorizontalGroup, Input, Tag, EmptySearchResult, Button } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
+import { useHistory } from 'react-router-dom';
 
 import Collapse from 'components/Collapse/Collapse';
 import Block from 'components/GBlock/Block';
@@ -15,7 +16,9 @@ import {
   AlertReceiveChannelOption,
 } from 'models/alert_receive_channel/alert_receive_channel.types';
 import { useStore } from 'state/useStore';
+import { openErrorNotification } from 'utils';
 import { UserActions } from 'utils/authorization';
+import { PLUGIN_ROOT } from 'utils/consts';
 
 import { form } from './IntegrationForm2.config';
 import { prepareForEdit } from './IntegrationForm2.helpers';
@@ -35,6 +38,7 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
   const { id, onHide, onUpdate, isTableView = true } = props;
 
   const store = useStore();
+  const history = useHistory();
 
   const { alertReceiveChannelStore, userStore } = store;
 
@@ -43,6 +47,7 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
   const [filterValue, setFilterValue] = useState('');
   const [showNewIntegrationForm, setShowNewIntegrationForm] = useState(false);
   const [selectedOption, setSelectedOption] = useState<AlertReceiveChannelOption>(undefined);
+  const [showIntegrarionsListDrawer, setShowIntegrarionsListDrawer] = useState(id === 'new');
 
   const data =
     id === 'new'
@@ -51,7 +56,18 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
 
   const handleSubmit = useCallback(
     (data: Partial<AlertReceiveChannel>) => {
-      (id === 'new' ? alertReceiveChannelStore.create(data) : alertReceiveChannelStore.update(id, data)).then(() => {
+      (id === 'new'
+        ? alertReceiveChannelStore
+            .create(data)
+            .then((response) => {
+              onHide();
+              history.push(`${PLUGIN_ROOT}/integrations_2/${response.id}`);
+            })
+            .catch(() => {
+              openErrorNotification('Something went wrong, please try again later.');
+            })
+        : alertReceiveChannelStore.update(id, data)
+      ).then(() => {
         onHide();
         onUpdate();
       });
@@ -63,6 +79,7 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
     return () => {
       setSelectedOption(option);
       setShowNewIntegrationForm(true);
+      setShowIntegrarionsListDrawer(false);
     };
   }, []);
 
@@ -80,7 +97,7 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
 
   return (
     <>
-      {id === 'new' && (
+      {showIntegrarionsListDrawer && (
         <Drawer scrollableContent title="New Integration" onClose={onHide} closeOnMaskClick={false} width="640px">
           <div className={cx('content')}>
             <VerticalGroup>
@@ -131,7 +148,7 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
           </div>
         </Drawer>
       )}
-      {(showNewIntegrationForm || id !== 'new') && (
+      {(showNewIntegrationForm || !showIntegrarionsListDrawer) && (
         <Drawer scrollableContent title={getTitle()} onClose={onHide} closeOnMaskClick={false} width="640px">
           <div className={cx('content')}>
             <VerticalGroup>
@@ -172,7 +189,13 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
               )}
               <HorizontalGroup justify="flex-end">
                 {id === 'new' ? (
-                  <Button variant="secondary" onClick={() => setShowNewIntegrationForm(false)}>
+                  <Button
+                    variant="secondary"
+                    onClick={() => {
+                      setShowNewIntegrationForm(false);
+                      setShowIntegrarionsListDrawer(true);
+                    }}
+                  >
                     Back
                   </Button>
                 ) : (

grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.module.css

@@ -19,6 +19,10 @@
   border-right: none;
 }
 
+.alert-groups-list {
+  padding-right: 16px;
+}
+
 .alert-groups-list button {
   padding-left: 0;
 }
@@ -26,3 +30,13 @@
 .alert-groups-editor {
   width: 100%;
 }
+
+.no-alert-groups-badge {
+  display: flex;
+  padding: 8px;
+  align-items: center;
+}
+
+.no-alert-groups-badge > div {
+  margin-right: 8px;
+}

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

@@ -1,6 +1,15 @@
 import React, { useEffect, useState } from 'react';
 
-import { Button, HorizontalGroup, Tooltip, Icon, VerticalGroup, IconButton, Badge } from '@grafana/ui';
+import {
+  Button,
+  HorizontalGroup,
+  Tooltip,
+  Icon,
+  VerticalGroup,
+  IconButton,
+  Badge,
+  LoadingPlaceholder,
+} from '@grafana/ui';
 import cn from 'classnames/bind';
 import { debounce } from 'lodash-es';
 
@@ -169,30 +178,37 @@ const TemplatesAlertGroupsList = (props: TemplatesAlertGroupsListProps) => {
                 </HorizontalGroup>
               </div>
               <div className={cx('alert-groups-list')}>
-                {alertGroupsList?.length > 0 ? (
+                {alertGroupsList ? (
                   <>
-                    {alertGroupsList.map((alertGroup) => {
-                      return (
-                        <div key={alertGroup.pk}>
-                          <Button fill="text" onClick={() => getAlertGroupPayload(alertGroup.pk)}>
-                            {getAlertGroupName(alertGroup)}
-                          </Button>
-                        </div>
-                      );
-                    })}
+                    {alertGroupsList?.length > 0 ? (
+                      <>
+                        {alertGroupsList.map((alertGroup) => {
+                          return (
+                            <div key={alertGroup.pk}>
+                              <Button fill="text" onClick={() => getAlertGroupPayload(alertGroup.pk)}>
+                                {getAlertGroupName(alertGroup)}
+                              </Button>
+                            </div>
+                          );
+                        })}
+                      </>
+                    ) : (
+                      <Badge
+                        color="blue"
+                        text={
+                          <div className={cx('no-alert-groups-badge')}>
+                            <Icon name="info-circle" />
+                            <Text>
+                              This integration did not receive any alerts. Use custom payload example to preview
+                              results.
+                            </Text>
+                          </div>
+                        }
+                      />
+                    )}
                   </>
                 ) : (
-                  <Badge
-                    color="blue"
-                    text={
-                      <HorizontalGroup>
-                        <Icon name="info-circle" />
-                        <Text>
-                          This integration did not receive any alerts. Use custom payload example to preview results.
-                        </Text>
-                      </HorizontalGroup>
-                    }
-                  />
+                  <LoadingPlaceholder text="Loading alert groups..." />
                 )}
               </div>
             </>

grafana-plugin/src/pages/integration_2/Integration2.tsx

@@ -579,10 +579,14 @@ class Integration2 extends React.Component<Integration2Props, Integration2State>
   getTemplatesList = (): CascaderOption[] => INTEGRATION_TEMPLATES_LIST;
 
   openEditTemplateModal = (templateName, channelFilterId?: ChannelFilter['id']) => {
-    this.setState({
-      isEditTemplateModalOpen: true,
-      selectedTemplate: templateForEdit[templateName],
-    });
+    if (templateForEdit[templateName]) {
+      this.setState({
+        isEditTemplateModalOpen: true,
+        selectedTemplate: templateForEdit[templateName],
+      });
+    } else {
+      openErrorNotification('Template can not be edited. Please contact support.');
+    }
 
     if (channelFilterId) {
       this.setState({ channelFilterIdForEdit: channelFilterId });