Refactored templates within templates&grouping (#1981)

# What this PR does

As the title says -> Refactored templates within templates&grouping

- File structure was changed
- Templates config added instead of manually rendering each item, this
way that config can be easily overwritten in oncall-private

grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx

@@ -4,18 +4,17 @@ import { ConfirmModal, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui'
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
+import IntegrationBlock from 'components/Integrations/IntegrationBlock';
 import PluginLink from 'components/PluginLink/PluginLink';
 import Text from 'components/Text/Text';
 import TooltipBadge from 'components/TooltipBadge/TooltipBadge';
+import styles from 'containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.module.scss';
+import { RouteButtonsDisplay } from 'containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay';
 import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
 import { ChannelFilter } from 'models/channel_filter';
+import IntegrationHelper from 'pages/integration_2/Integration2.helper';
 import { useStore } from 'state/useStore';
 
-import styles from './CollapsedIntegrationRouteDisplay.module.scss';
-import { RouteButtonsDisplay } from './ExpandedIntegrationRouteDisplay';
-import IntegrationHelper from './Integration2.helper';
-import IntegrationBlock from './IntegrationBlock';
-
 const cx = cn.bind(styles);
 
 interface CollapsedIntegrationRouteDisplayProps {

grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx

@@ -5,6 +5,8 @@ import { Button, HorizontalGroup, InlineLabel, VerticalGroup, Icon, Tooltip, Con
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
+import IntegrationBlock from 'components/Integrations/IntegrationBlock';
+import IntegrationBlockItem from 'components/Integrations/IntegrationBlockItem';
 import MonacoEditor from 'components/MonacoEditor/MonacoEditor';
 import PluginLink from 'components/PluginLink/PluginLink';
 import Text from 'components/Text/Text';
@@ -12,21 +14,18 @@ import TooltipBadge from 'components/TooltipBadge/TooltipBadge';
 import { ChatOpsConnectors } from 'containers/AlertRules/parts';
 import EscalationChainSteps from 'containers/EscalationChainSteps/EscalationChainSteps';
 import GSelect from 'containers/GSelect/GSelect';
+import styles from 'containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.module.scss';
 import TeamName from 'containers/TeamName/TeamName';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
 import { AlertTemplatesDTO } from 'models/alert_templates';
 import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
+import { MONACO_INPUT_HEIGHT_SMALL, MONACO_OPTIONS } from 'pages/integration_2/Integration2.config';
+import IntegrationHelper from 'pages/integration_2/Integration2.helper';
 import { AppFeature } from 'state/features';
 import { useStore } from 'state/useStore';
 import { UserActions } from 'utils/authorization';
 
-import styles from './ExpandedIntegrationRouteDisplay.module.scss';
-import { MONACO_INPUT_HEIGHT_SMALL, MONACO_OPTIONS } from './Integration2.config';
-import IntegrationHelper from './Integration2.helper';
-import IntegrationBlock from './IntegrationBlock';
-import IntegrationBlockItem from './IntegrationBlockItem';
-
 const cx = cn.bind(styles);
 
 interface ExpandedIntegrationRouteDisplayProps {

grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.config.ts

@@ -0,0 +1,131 @@
+import { MONACO_INPUT_HEIGHT_SMALL, MONACO_INPUT_HEIGHT_TALL } from 'pages/integration_2/Integration2.config';
+
+interface TemplateToRender {
+  name: string;
+  label: string;
+  height: string;
+}
+
+interface TemplateBlock {
+  name: string;
+  contents: TemplateToRender[];
+}
+
+export const templatesToRender: TemplateBlock[] = [
+  {
+    name: null,
+    contents: [
+      {
+        name: 'grouping_id_template',
+        label: 'Grouping',
+        height: MONACO_INPUT_HEIGHT_TALL,
+      },
+      {
+        name: 'resolve_condition_template',
+        label: 'Auto resolve',
+        height: MONACO_INPUT_HEIGHT_SMALL,
+      },
+    ],
+  },
+  {
+    name: 'Web',
+    contents: [
+      {
+        name: 'web_title_template',
+        label: 'Title',
+        height: MONACO_INPUT_HEIGHT_TALL,
+      },
+      {
+        name: 'web_message_template',
+        label: 'Message',
+        height: MONACO_INPUT_HEIGHT_TALL,
+      },
+      {
+        name: 'web_image_url_template',
+        label: 'Image',
+        height: MONACO_INPUT_HEIGHT_SMALL,
+      },
+    ],
+  },
+  {
+    name: null,
+    contents: [
+      {
+        name: 'acknowledge_condition_template',
+        label: 'Auto acknowledge',
+        height: MONACO_INPUT_HEIGHT_SMALL,
+      },
+      {
+        name: 'source_link_template',
+        label: 'Source link',
+        height: MONACO_INPUT_HEIGHT_SMALL,
+      },
+    ],
+  },
+  {
+    name: null,
+    contents: [
+      {
+        name: 'phone_call_title_template',
+        label: 'Phone Call',
+        height: MONACO_INPUT_HEIGHT_SMALL,
+      },
+      {
+        name: 'sms_title_template',
+        label: 'SMS',
+        height: MONACO_INPUT_HEIGHT_SMALL,
+      },
+    ],
+  },
+  {
+    name: 'Slack',
+    contents: [
+      {
+        name: 'slack_title_template',
+        label: 'Title',
+        height: MONACO_INPUT_HEIGHT_SMALL,
+      },
+      {
+        name: 'slack_message_template',
+        label: 'Message',
+        height: MONACO_INPUT_HEIGHT_TALL,
+      },
+      {
+        name: 'slack_image_url_template',
+        label: 'Image',
+        height: MONACO_INPUT_HEIGHT_SMALL,
+      },
+    ],
+  },
+  {
+    name: 'Telegram',
+    contents: [
+      {
+        name: 'telegram_title_template',
+        label: 'Title',
+        height: MONACO_INPUT_HEIGHT_SMALL,
+      },
+      {
+        name: 'telegram_message_template',
+        label: 'Message',
+        height: MONACO_INPUT_HEIGHT_TALL,
+      },
+      {
+        name: 'telegram_image_url_template',
+        label: 'Image',
+        height: MONACO_INPUT_HEIGHT_SMALL,
+      },
+    ],
+  },
+  {
+    name: 'Email',
+    contents: [
+      {
+        name: 'email_title_template',
+        label: 'Title',
+        height: MONACO_INPUT_HEIGHT_SMALL,
+      },
+      { name: 'email_message_template', label: 'Message', height: MONACO_INPUT_HEIGHT_TALL },
+    ],
+  },
+];

grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+
+import { ConfirmModal } from '@grafana/ui';
+import cn from 'classnames/bind';
+
+import IntegrationBlockItem from 'components/Integrations/IntegrationBlockItem';
+import IntegrationTemplateBlock from 'components/Integrations/IntegrationTemplateBlock';
+import MonacoEditor from 'components/MonacoEditor/MonacoEditor';
+import Text from 'components/Text/Text';
+import { templatesToRender } from 'containers/IntegrationContainers/IntegrationTemplatesList.config';
+import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
+import { AlertTemplatesDTO } from 'models/alert_templates';
+import { MONACO_INPUT_HEIGHT_TALL, MONACO_OPTIONS } from 'pages/integration_2/Integration2.config';
+import IntegrationHelper from 'pages/integration_2/Integration2.helper';
+import styles from 'pages/integration_2/Integration2.module.scss';
+import { useStore } from 'state/useStore';
+import { openErrorNotification, openNotification } from 'utils';
+
+const cx = cn.bind(styles);
+
+interface IntegrationTemplateListProps {
+  templates: AlertTemplatesDTO[];
+  alertReceiveChannelId: AlertReceiveChannel['id'];
+  openEditTemplateModal: (templateName: string | string[]) => void;
+}
+
+const IntegrationTemplateList: React.FC<IntegrationTemplateListProps> = ({
+  templates,
+  openEditTemplateModal,
+  alertReceiveChannelId,
+}) => {
+  const { alertReceiveChannelStore } = useStore();
+  const [isRestoringTemplate, setIsRestoringTemplate] = useState<boolean>(false);
+  const [templateRestoreName, setTemplateRestoreName] = useState<string>(undefined);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+
+  return (
+    <div className={cx('integration__templates')}>
+      {showConfirmModal && (
+        <ConfirmModal
+          isOpen={true}
+          title={undefined}
+          confirmText={'Reset'}
+          dismissText="Cancel"
+          body={'Are you sure you want to reset Slack Title template to default state?'}
+          description={undefined}
+          confirmationText={undefined}
+          onConfirm={() => onResetTemplate(templateRestoreName)}
+          onDismiss={() => onDismiss()}
+        />
+      )}
+
+      <IntegrationBlockItem>
+        <Text type="secondary">
+          Templates are used to interpret alert from monitoring. Reduce noise, customize visualization
+        </Text>
+      </IntegrationBlockItem>
+
+      {templatesToRender.map((template, key) => (
+        <IntegrationBlockItem key={key}>
+          <VerticalBlock>
+            {template.name && <Text type={'primary'}>{template.name}</Text>}
+
+            {template.contents.map((contents, innerKey) => (
+              <IntegrationTemplateBlock
+                key={innerKey}
+                isLoading={isRestoringTemplate && templateRestoreName === contents.name}
+                onRemove={() => onShowConfirmModal(contents.name)}
+                label={contents.label}
+                renderInput={() => (
+                  <div className={cx('input')}>
+                    <MonacoEditor
+                      value={IntegrationHelper.getFilteredTemplate(
+                        templates[contents.name] || '',
+                        contents.height === MONACO_INPUT_HEIGHT_TALL
+                      )}
+                      disabled={true}
+                      height={contents.height}
+                      data={templates}
+                      showLineNumbers={false}
+                      monacoOptions={MONACO_OPTIONS}
+                    />
+                  </div>
+                )}
+                onEdit={() => openEditTemplateModal(contents.name)}
+              />
+            ))}
+          </VerticalBlock>
+        </IntegrationBlockItem>
+      ))}
+    </div>
+  );
+
+  function onShowConfirmModal(templateName: string) {
+    setTemplateRestoreName(templateName);
+    setShowConfirmModal(true);
+  }
+
+  function onDismiss() {
+    setTemplateRestoreName(undefined);
+    setShowConfirmModal(false);
+  }
+
+  function onResetTemplate(templateName: string) {
+    setTemplateRestoreName(undefined);
+    setIsRestoringTemplate(true);
+
+    alertReceiveChannelStore
+      .saveTemplates(alertReceiveChannelId, { [templateName]: '' })
+      .then(() => {
+        openNotification('The Alert template has been updated');
+      })
+      .catch((err) => {
+        if (err.response?.data?.length > 0) {
+          openErrorNotification(err.response.data);
+        } else {
+          openErrorNotification(err.message);
+        }
+      })
+      .finally(() => {
+        setIsRestoringTemplate(false);
+        setShowConfirmModal(false);
+      });
+  }
+};
+
+const VerticalBlock: React.FC<{ children: any[] }> = ({ children }) => {
+  return <div className={cx('vertical-block')}>{children}</div>;
+};
+
+export default IntegrationTemplateList;

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

@@ -27,6 +27,7 @@ import IntegrationCollapsibleTreeView, {
 } from 'components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView';
 import IntegrationInputField from 'components/IntegrationInputField/IntegrationInputField';
 import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo';
+import IntegrationBlock from 'components/Integrations/IntegrationBlock';
 import MonacoEditor, { MONACO_LANGUAGE } from 'components/MonacoEditor/MonacoEditor';
 import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper';
 import { initErrorDataState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers';
@@ -36,6 +37,10 @@ import Text from 'components/Text/Text';
 import TooltipBadge from 'components/TooltipBadge/TooltipBadge';
 import { WithContextMenu } from 'components/WithContextMenu/WithContextMenu';
 import EditRegexpRouteTemplateModal from 'containers/EditRegexpRouteTemplateModal/EditRegexpRouteTemplateModal';
+import CollapsedIntegrationRouteDisplay from 'containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay';
+import ExpandedIntegrationRouteDisplay from 'containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay';
+import Integration2HeartbeatForm from 'containers/IntegrationContainers/Integration2HearbeatForm/Integration2HeartbeatForm';
+import IntegrationTemplateList from 'containers/IntegrationContainers/IntegrationTemplatesList';
 import IntegrationForm2 from 'containers/IntegrationForm/IntegrationForm2';
 import IntegrationTemplate from 'containers/IntegrationTemplate/IntegrationTemplate';
 import MaintenanceForm from 'containers/MaintenanceForm/MaintenanceForm';
@@ -47,6 +52,9 @@ import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_
 import { ChannelFilter } from 'models/channel_filter';
 import { MaintenanceType } from 'models/maintenance/maintenance.types';
 import { API_HOST, API_PATH_PREFIX } from 'network';
+import { INTEGRATION_TEMPLATES_LIST, MONACO_PAYLOAD_OPTIONS } from 'pages/integration_2/Integration2.config';
+import IntegrationHelper from 'pages/integration_2/Integration2.helper';
+import styles from 'pages/integration_2/Integration2.module.scss';
 import { PageProps, WithStoreProps } from 'state/types';
 import { useStore } from 'state/useStore';
 import { withMobXProviderContext } from 'state/withStore';
@@ -56,15 +64,6 @@ import LocationHelper from 'utils/LocationHelper';
 import { UserActions } from 'utils/authorization';
 import { DATASOURCE_ALERTING, PLUGIN_ROOT } from 'utils/consts';
 
-import CollapsedIntegrationRouteDisplay from './CollapsedIntegrationRouteDisplay';
-import ExpandedIntegrationRouteDisplay from './ExpandedIntegrationRouteDisplay';
-import { INTEGRATION_TEMPLATES_LIST, MONACO_PAYLOAD_OPTIONS } from './Integration2.config';
-import IntegrationHelper from './Integration2.helper';
-import styles from './Integration2.module.scss';
-import Integration2HeartbeatForm from './Integration2HeartbeatForm';
-import IntegrationBlock from './IntegrationBlock';
-import IntegrationTemplateList from './IntegrationTemplatesList';
-
 const cx = cn.bind(styles);
 
 interface Integration2Props extends WithStoreProps, PageProps, RouteComponentProps<{ id: string }> {}

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

@@ -1,458 +0,0 @@
-import React, { useState } from 'react';
-
-import { ConfirmModal } from '@grafana/ui';
-import cn from 'classnames/bind';
-
-import MonacoEditor from 'components/MonacoEditor/MonacoEditor';
-import Text from 'components/Text/Text';
-import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
-import { AlertTemplatesDTO } from 'models/alert_templates';
-import { useStore } from 'state/useStore';
-import { openErrorNotification, openNotification } from 'utils';
-
-import { MONACO_INPUT_HEIGHT_SMALL, MONACO_INPUT_HEIGHT_TALL, MONACO_OPTIONS } from './Integration2.config';
-import IntegrationHelper from './Integration2.helper';
-import styles from './Integration2.module.scss';
-import IntegrationBlockItem from './IntegrationBlockItem';
-import IntegrationTemplateBlock from './IntegrationTemplateBlock';
-
-const cx = cn.bind(styles);
-
-interface IntegrationTemplateListProps {
-  templates: AlertTemplatesDTO[];
-  alertReceiveChannelId: AlertReceiveChannel['id'];
-  openEditTemplateModal: (templateName: string | string[]) => void;
-}
-
-const IntegrationTemplateList: React.FC<IntegrationTemplateListProps> = ({
-  templates,
-  openEditTemplateModal,
-  alertReceiveChannelId,
-}) => {
-  const { alertReceiveChannelStore } = useStore();
-  const [isRestoringTemplate, setIsRestoringTemplate] = useState<boolean>(false);
-  const [templateRestoreName, setTemplateRestoreName] = useState<string>(undefined);
-  const [showConfirmModal, setShowConfirmModal] = useState(false);
-
-  return (
-    <div className={cx('integration__templates')}>
-      {showConfirmModal && (
-        <ConfirmModal
-          isOpen={true}
-          title={undefined}
-          confirmText={'Reset'}
-          dismissText="Cancel"
-          body={'Are you sure you want to reset Slack Title template to default state?'}
-          description={undefined}
-          confirmationText={undefined}
-          onConfirm={() => onResetTemplate(templateRestoreName)}
-          onDismiss={() => onDismiss()}
-        />
-      )}
-
-      <IntegrationBlockItem>
-        <Text type="secondary">
-          Templates are used to interpret alert from monitoring. Reduce noise, customize visualization
-        </Text>
-      </IntegrationBlockItem>
-
-      <IntegrationBlockItem>
-        <VerticalBlock>
-          <IntegrationTemplateBlock
-            onRemove={() => onShowConfirmModal('grouping_id_template')}
-            isLoading={isRestoringTemplate && templateRestoreName === 'grouping_id_template'}
-            label={'Grouping'}
-            renderInput={() => (
-              <div className={cx('input', 'input--short')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['grouping_id_template'] || '', false)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_SMALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('grouping_id_template')}
-          />
-
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'resolve_condition_template'}
-            onRemove={() => onShowConfirmModal('resolve_condition_template')}
-            label={'Auto resolve'}
-            renderInput={() => (
-              <div className={cx('input', 'input--short')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['resolve_condition_template'] || '', false)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_SMALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('resolve_condition_template')}
-          />
-        </VerticalBlock>
-      </IntegrationBlockItem>
-
-      <IntegrationBlockItem>
-        <VerticalBlock>
-          <Text type={'primary'}>Web</Text>
-
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'web_title_template'}
-            onRemove={() => onShowConfirmModal('web_title_template')}
-            label={'Title'}
-            renderInput={() => (
-              <div className={cx('input', 'input--long')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['web_title_template'] || '', true)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_TALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('web_title_template')}
-          />
-
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'web_message_template'}
-            onRemove={() => onShowConfirmModal('web_message_template')}
-            label={'Message'}
-            renderInput={() => (
-              <div className={cx('input', 'input--long')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['web_message_template'] || '', true)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_TALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('web_message_template')}
-          />
-
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'web_image_url_template'}
-            onRemove={() => onShowConfirmModal('web_image_url_template')}
-            label={'Image'}
-            renderInput={() => (
-              <div className={cx('input', 'input--long')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['web_image_url_template'] || '', false)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_SMALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('web_image_url_template')}
-          />
-        </VerticalBlock>
-      </IntegrationBlockItem>
-
-      <IntegrationBlockItem>
-        <VerticalBlock>
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'acknowledge_condition_template'}
-            onRemove={() => onShowConfirmModal('acknowledge_condition_template')}
-            label={'Auto acknowledge'}
-            renderInput={() => (
-              <div className={cx('input', 'input--short')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(
-                    templates['acknowledge_condition_template'] || '',
-                    false
-                  )}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_SMALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('acknowledge_condition_template')}
-          />
-
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'source_link_template'}
-            onRemove={() => onShowConfirmModal('source_link_template')}
-            label={'Source Link'}
-            renderInput={() => (
-              <div className={cx('input', 'input--short')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['source_link_template'] || '', false)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_SMALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('source_link_template')}
-          />
-        </VerticalBlock>
-      </IntegrationBlockItem>
-
-      <IntegrationBlockItem>
-        <VerticalBlock>
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'phone_call_title_template'}
-            onRemove={() => onShowConfirmModal('phone_call_title_template')}
-            label={'Phone Call'}
-            renderInput={() => (
-              <div className={cx('input', 'input--short')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['phone_call_title_template'] || '', false)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_SMALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('phone_call_title_template')}
-          />
-
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'sms_title_template'}
-            onRemove={() => onShowConfirmModal('sms_title_template')}
-            label={'SMS'}
-            renderInput={() => (
-              <div className={cx('input', 'input--short')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['sms_title_template'] || '', false)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_SMALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('sms_title_template')}
-          />
-        </VerticalBlock>
-      </IntegrationBlockItem>
-
-      <IntegrationBlockItem>
-        <VerticalBlock>
-          <Text type={'primary'}>Slack</Text>
-
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'slack_title_template'}
-            onRemove={() => onShowConfirmModal('slack_title_template')}
-            label={'Title'}
-            renderInput={() => (
-              <div className={cx('input', 'input--long')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['slack_title_template'] || '', false)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_SMALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('slack_title_template')}
-          />
-
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'slack_message_template'}
-            onRemove={() => onShowConfirmModal('slack_message_template')}
-            label={'Message'}
-            renderInput={() => (
-              <div className={cx('input', 'input--long')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['slack_message_template'] || '', true)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_TALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('slack_message_template')}
-          />
-
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'slack_image_url_template'}
-            onRemove={() => onShowConfirmModal('slack_image_url_template')}
-            label={'Image'}
-            renderInput={() => (
-              <div className={cx('input', 'input--long')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['slack_image_url_template'] || '', false)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_SMALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('slack_image_url_template')}
-          />
-        </VerticalBlock>
-      </IntegrationBlockItem>
-
-      <IntegrationBlockItem>
-        <VerticalBlock>
-          <Text type={'primary'}>Telegram</Text>
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'telegram_title_template'}
-            onRemove={() => onShowConfirmModal('telegram_title_template')}
-            label={'Title'}
-            renderInput={() => (
-              <div className={cx('input', 'input--long')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['telegram_title_template'] || '', false)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_SMALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('telegram_title_template')}
-          />
-
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'telegram_message_template'}
-            onRemove={() => onShowConfirmModal('telegram_message_template')}
-            label={'Message'}
-            renderInput={() => (
-              <div className={cx('input', 'input--long')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['telegram_message_template'] || '', true)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_TALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('telegram_message_template')}
-          />
-
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'telegram_image_url_template'}
-            onRemove={() => onShowConfirmModal('telegram_image_url_template')}
-            label={'Image'}
-            renderInput={() => (
-              <div className={cx('input', 'input--long')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['telegram_image_url_template'] || '', false)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_SMALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('telegram_image_url_template')}
-          />
-        </VerticalBlock>
-      </IntegrationBlockItem>
-
-      <IntegrationBlockItem>
-        <VerticalBlock>
-          <Text type={'primary'}>Email</Text>
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'email_title_template'}
-            onRemove={() => onShowConfirmModal('email_title_template')}
-            label={'Title'}
-            renderInput={() => (
-              <div className={cx('input', 'input--long')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['email_title_template'] || '', false)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_SMALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('email_title_template')}
-          />
-
-          <IntegrationTemplateBlock
-            isLoading={isRestoringTemplate && templateRestoreName === 'email_message_template'}
-            onRemove={() => onShowConfirmModal('email_message_template')}
-            label={'Message'}
-            renderInput={() => (
-              <div className={cx('input', 'input--long')}>
-                <MonacoEditor
-                  value={IntegrationHelper.getFilteredTemplate(templates['email_message_template'] || '', true)}
-                  disabled={true}
-                  height={MONACO_INPUT_HEIGHT_TALL}
-                  data={templates}
-                  showLineNumbers={false}
-                  monacoOptions={MONACO_OPTIONS}
-                />
-              </div>
-            )}
-            onEdit={() => openEditTemplateModal('email_message_template')}
-          />
-        </VerticalBlock>
-      </IntegrationBlockItem>
-    </div>
-  );
-
-  function onShowConfirmModal(templateName: string) {
-    setTemplateRestoreName(templateName);
-    setShowConfirmModal(true);
-  }
-
-  function onDismiss() {
-    setTemplateRestoreName(undefined);
-    setShowConfirmModal(false);
-  }
-
-  function onResetTemplate(templateName: string) {
-    setTemplateRestoreName(undefined);
-    setIsRestoringTemplate(true);
-
-    alertReceiveChannelStore
-      .saveTemplates(alertReceiveChannelId, { [templateName]: '' })
-      .then(() => {
-        openNotification('The Alert template has been updated');
-      })
-      .catch((err) => {
-        if (err.response?.data?.length > 0) {
-          openErrorNotification(err.response.data);
-        } else {
-          openErrorNotification(err.message);
-        }
-      })
-      .finally(() => {
-        setIsRestoringTemplate(false);
-        setShowConfirmModal(false);
-      });
-  }
-};
-
-const VerticalBlock: React.FC<{ children: React.ReactElement[] }> = ({ children }) => {
-  return <div className={cx('vertical-block')}>{children}</div>;
-};
-
-export default IntegrationTemplateList;