From c57c0c44230681e8b40262aa94054175754717f8 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Mon, 8 Jan 2024 13:50:19 +0300
Subject: [PATCH] move ms teams related models, containers, components etc to
 oncall (#3594)

# What this PR does

Move ms teams related models, containers, components etc to oncall

## Which issue(s) this PR fixes

https://github.com/grafana/oncall-private/issues/2144

## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [ ] Documentation added (or `pr:no public docs` PR label added if not
required)
- [ ] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)
---
 grafana-plugin/.dockerignore                  |   1 -
 grafana-plugin/.gitignore                     |   1 -
 .../AlertTemplatesForm.config.ts              | 109 +++----
 .../AlertTemplatesForm.module.css             |  59 ----
 .../AlertTemplates/AlertTemplatesForm.tsx     | 283 ------------------
 .../CommonAlertTemplatesForm.config.ts        |  38 +--
 .../parts/connectors/MSTeamsConnector.tsx     |  74 +++++
 .../src/containers/AlertRules/parts/index.tsx |  14 +-
 .../AlertTemplatesFormContainer.tsx           |  80 -----
 .../containers/DefaultPageLayout/helper.ts    |   2 +-
 .../IntegrationTemplatesList.config.ts        |  34 ++-
 .../IntegrationTemplatesList.tsx              | 249 +++++++--------
 .../IntegrationTemplate.tsx                   |  43 +--
 .../MSTeams/MSTeamsInstructions.module.css    |  30 ++
 .../MSTeams/MSTeamsInstructions.tsx           | 133 ++++++++
 .../MSTeamsIntegrationButton.module.css       |  25 ++
 .../MSTeamsIntegrationButton.tsx              |  75 +++++
 .../OutgoingWebhookForm.tsx                   |  10 +-
 .../WebhookPresetIcons.config.tsx             |  17 +-
 .../containers/UserSettings/UserSettings.tsx  |  10 +-
 .../UserSettings/UserSettings.types.ts        |   8 +-
 .../parts/connectors/MSTeamsConnector.tsx     |  67 +++++
 .../UserSettings/parts/connectors/index.tsx   |   2 +
 .../containers/UserSettings/parts/index.tsx   |  16 +-
 .../tabs/MSTeamsInfo/MSTeamsInfo.module.css   |  12 +
 .../parts/tabs/MSTeamsInfo/MSTeamsInfo.tsx    |  51 ++++
 grafana-plugin/src/icons/MSTeamsLogo.tsx      |  68 +++++
 .../src/icons/MachineLearningLogo.tsx         |  29 ++
 .../models/msteams_channel/msteams_channel.ts | 126 ++++++++
 .../msteams_channel/msteams_channel.types.ts  |   9 +
 .../pages/integration/Integration.config.ts   |  52 +++-
 .../pages/integration/Integration.helper.ts   |  51 +++-
 .../src/pages/integration/Integration.tsx     |  10 +-
 .../pages/settings/tabs/ChatOps/ChatOps.tsx   |  21 +-
 .../MSTeamsSettings.module.css                |   8 +
 .../tabs/MSTeamsSettings/MSTeamsSettings.tsx  | 147 +++++++++
 grafana-plugin/src/state/features.ts          |   1 +
 .../src/state/rootBaseStore/index.ts          |   2 +
 grafana-plugin/tsconfig.json                  |   4 +-
 grafana-plugin/webpack.config.js              |   6 -
 40 files changed, 1264 insertions(+), 713 deletions(-)
 delete mode 100644 grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.module.css
 delete mode 100644 grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx
 create mode 100644 grafana-plugin/src/containers/AlertRules/parts/connectors/MSTeamsConnector.tsx
 delete mode 100644 grafana-plugin/src/containers/AlertTemplatesFormContainer/AlertTemplatesFormContainer.tsx
 create mode 100644 grafana-plugin/src/containers/MSTeams/MSTeamsInstructions.module.css
 create mode 100644 grafana-plugin/src/containers/MSTeams/MSTeamsInstructions.tsx
 create mode 100644 grafana-plugin/src/containers/MSTeamsIntegrationButton/MSTeamsIntegrationButton.module.css
 create mode 100644 grafana-plugin/src/containers/MSTeamsIntegrationButton/MSTeamsIntegrationButton.tsx
 create mode 100644 grafana-plugin/src/containers/UserSettings/parts/connectors/MSTeamsConnector.tsx
 create mode 100644 grafana-plugin/src/containers/UserSettings/parts/tabs/MSTeamsInfo/MSTeamsInfo.module.css
 create mode 100644 grafana-plugin/src/containers/UserSettings/parts/tabs/MSTeamsInfo/MSTeamsInfo.tsx
 create mode 100644 grafana-plugin/src/icons/MSTeamsLogo.tsx
 create mode 100644 grafana-plugin/src/icons/MachineLearningLogo.tsx
 create mode 100644 grafana-plugin/src/models/msteams_channel/msteams_channel.ts
 create mode 100644 grafana-plugin/src/models/msteams_channel/msteams_channel.types.ts
 create mode 100644 grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/MSTeamsSettings/MSTeamsSettings.module.css
 create mode 100644 grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/MSTeamsSettings/MSTeamsSettings.tsx

diff --git a/grafana-plugin/.dockerignore b/grafana-plugin/.dockerignore
index 5ba54898..a2c9574b 100644
--- a/grafana-plugin/.dockerignore
+++ b/grafana-plugin/.dockerignore
@@ -1,4 +1,3 @@
 node_modules
-frontend_enterprise
 .DS_Store
 playwright-report
diff --git a/grafana-plugin/.gitignore b/grafana-plugin/.gitignore
index e768d7d7..9d0e1126 100644
--- a/grafana-plugin/.gitignore
+++ b/grafana-plugin/.gitignore
@@ -13,7 +13,6 @@ yarn-error.log*
 
 # This file is generated
 grafana-plugin.yml
-frontend_enterprise
 
 # playwright
 /playwright-report/
diff --git a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.config.ts b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.config.ts
index 86fc486d..8e4bf0ae 100644
--- a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.config.ts
+++ b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.config.ts
@@ -1,80 +1,45 @@
+import { AppFeature } from 'state/features';
+
 import { TemplateForEdit, commonTemplateForEdit } from './CommonAlertTemplatesForm.config';
-export interface Template {
-  name: string;
-  group: string;
-}
 
-export const templateForEdit: { [id: string]: TemplateForEdit } = commonTemplateForEdit;
+export const getTemplatesForEdit = (features: Record<string, boolean>) => {
+  if (features[AppFeature.MsTeams]) {
+    return { ...commonTemplateForEdit, ...additionalTemplateForEdit };
+  }
+  return commonTemplateForEdit;
+};
 
-export const templatesToRender: Template[] = [
-  {
-    name: 'web_title_template',
-    group: 'web',
+const additionalTemplateForEdit: { [id: string]: TemplateForEdit } = {
+  msteams_title_template: {
+    name: 'msteams_title_template',
+    displayName: 'MS Teams title',
+    description: '',
+    additionalData: {
+      chatOpsName: 'msteams',
+      chatOpsDisplayName: 'MS Teams',
+    },
+    type: 'plain',
   },
-  {
-    name: 'slack_title_template',
-    group: 'slack',
+  msteams_message_template: {
+    name: 'msteams_message_template',
+    displayName: 'MS Teams message',
+    description: '',
+    additionalData: {
+      chatOpsName: 'msteams',
+      chatOpsDisplayName: 'MS Teams',
+    },
+    type: 'plain',
   },
-  {
-    name: 'sms_title_template',
-    group: 'sms',
+  msteams_image_url_template: {
+    name: 'msteams_image_url_template',
+    displayName: 'MS Teams image url',
+    description: '',
+    additionalData: {
+      chatOpsName: 'msteams',
+      chatOpsDisplayName: 'MS Teams',
+    },
+    type: 'plain',
   },
-  {
-    name: 'phone_call_title_template',
-    group: 'phone',
-  },
-  {
-    name: 'email_title_template',
-    group: 'email',
-  },
-  {
-    name: 'telegram_title_template',
-    group: 'telegram',
-  },
-  {
-    name: 'slack_message_template',
-    group: 'slack',
-  },
-  {
-    name: 'web_message_template',
-    group: 'web',
-  },
-  {
-    name: 'email_message_template',
-    group: 'email',
-  },
-  {
-    name: 'telegram_message_template',
-    group: 'telegram',
-  },
-  {
-    name: 'slack_image_url_template',
-    group: 'slack',
-  },
-  {
-    name: 'web_image_url_template',
-    group: 'web',
-  },
-  {
-    name: 'telegram_image_url_template',
-    group: 'telegram',
-  },
-  {
-    name: 'grouping_id_template',
-    group: 'alert behaviour',
-  },
-  {
-    name: 'acknowledge_condition_template',
-    group: 'alert behaviour',
-  },
-  {
-    name: 'resolve_condition_template',
-    group: 'alert behaviour',
-  },
-  {
-    name: 'source_link_template',
-    group: 'alert behaviour',
-  },
-];
+};
 
 export const FORM_NAME = 'AlertTemplates';
diff --git a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.module.css b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.module.css
deleted file mode 100644
index 924951cf..00000000
--- a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.module.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.select {
-  width: 300px;
-}
-
-.templates {
-  width: 50%;
-}
-
-.borderLeftRightBottom {
-  border-left: 1px solid rgba(204, 204, 220, 0.15);
-  border-bottom: 1px solid rgba(204, 204, 220, 0.15);
-  border-right: 1px solid rgba(204, 204, 220, 0.15);
-  border-radius: 2px;
-}
-
-.borderRightBottom {
-  border-bottom: 1px solid rgba(204, 204, 220, 0.15);
-  border-right: 1px solid rgba(204, 204, 220, 0.15);
-  border-radius: 2px;
-}
-
-.template-form {
-  width: 100%;
-}
-
-.templatesInfo {
-  display: flex;
-  flex-direction: row;
-}
-
-.templates-editors {
-  width: 50%;
-}
-
-.select-template {
-  width: 50% !important;
-}
-
-.collapse {
-  flex-grow: 1;
-  width: 100%;
-}
-
-.typographyText {
-  margin-bottom: 24px;
-  margin-top: 8px;
-}
-
-.autoresolve-condition section {
-  border: 1px solid var(--primary-text-link);
-}
-
-.autoresolve-label {
-  margin-bottom: 0 !important;
-}
-
-.web-title-message {
-  margin-top: 8px;
-}
diff --git a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx
deleted file mode 100644
index 66cf2a3a..00000000
--- a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { SelectableValue } from '@grafana/data';
-import { Label, Button, HorizontalGroup, VerticalGroup, Select, LoadingPlaceholder } from '@grafana/ui';
-import { capitalCase } from 'change-case';
-import cn from 'classnames/bind';
-import { omit } from 'lodash-es';
-
-import { templatesToRender, Template } from 'components/AlertTemplates/AlertTemplatesForm.config';
-import { getLabelFromTemplateName } from 'components/AlertTemplates/AlertTemplatesForm.helper';
-import Block from 'components/GBlock/Block';
-import MonacoEditor from 'components/MonacoEditor/MonacoEditor';
-import SourceCode from 'components/SourceCode/SourceCode';
-import Text from 'components/Text/Text';
-import TemplatePreview, { TEMPLATE_PAGE } from 'containers/TemplatePreview/TemplatePreview';
-import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
-import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
-import { Alert } from 'models/alertgroup/alertgroup.types';
-import { makeRequest } from 'network';
-import LocationHelper from 'utils/LocationHelper';
-import { UserActions, isUserActionAllowed } from 'utils/authorization';
-
-import styles from './AlertTemplatesForm.module.css';
-
-const cx = cn.bind(styles);
-
-interface AlertTemplatesFormProps {
-  templates: any;
-  onUpdateTemplates: (values: any) => void;
-  alertReceiveChannelId: AlertReceiveChannel['id'];
-  alertGroupId?: Alert['pk'];
-  demoAlertEnabled: boolean;
-  handleSendDemoAlertClick: () => void;
-  templatesRefreshing: boolean;
-  selectedTemplateName?: string;
-}
-
-const AlertTemplatesForm = (props: AlertTemplatesFormProps) => {
-  const {
-    onUpdateTemplates,
-    templates,
-    alertReceiveChannelId,
-    alertGroupId,
-    demoAlertEnabled,
-    handleSendDemoAlertClick,
-    templatesRefreshing,
-    selectedTemplateName,
-  } = props;
-
-  const [tempValues, setTempValues] = useState<{
-    [key: string]: string | null;
-  }>({});
-  const [activeGroup, setActiveGroup] = useState<string>();
-  const [activeTemplate, setActiveTemplate] = useState<Template>();
-
-  useEffect(() => {
-    makeRequest('/preview_template_options/', {});
-  }, []);
-
-  const getChangeHandler = (templateName: string) => {
-    return (value: string) => {
-      setTempValues((oldTempValues) => ({
-        ...oldTempValues, // erase another edited templates
-        [templateName]: value,
-      }));
-    };
-  };
-
-  const handleSubmit = useCallback(() => {
-    const data = Object.keys(tempValues).reduce((acc: { [key: string]: string }, key: string) => {
-      if (templates[key] !== tempValues[key]) {
-        acc = { ...acc, [key]: tempValues[key] };
-      }
-      return acc;
-    }, {});
-    onUpdateTemplates(data);
-  }, [onUpdateTemplates, tempValues]);
-
-  const handleReset = () => {
-    const temValuesCopy = omit(
-      tempValues,
-      groups[activeGroup].map((group) => group.name)
-    );
-    setTempValues(temValuesCopy);
-  };
-
-  const filteredTemplatesToRender = useMemo(() => {
-    return templates
-      ? templatesToRender.filter((template) => {
-          return template.name in templates;
-        })
-      : [];
-  }, [templates]);
-
-  const groups = useMemo(() => {
-    const groups: { [key: string]: Template[] } = {};
-
-    filteredTemplatesToRender.forEach((templateToRender) => {
-      if (!groups[templateToRender.group]) {
-        groups[templateToRender.group] = [];
-      }
-      groups[templateToRender.group].push(templateToRender);
-    });
-    return groups;
-  }, [filteredTemplatesToRender]);
-
-  const getGroupByTemplateName = (templateName: string) => {
-    Object.values(groups).find((group) => {
-      const foundTemplate = group.find((obj) => obj.name === templateName);
-      setActiveGroup(foundTemplate?.group);
-    });
-  };
-
-  const handleChangeActiveGroup = useCallback((group: SelectableValue) => {
-    setActiveGroup(group.value);
-  }, []);
-
-  useEffect(() => {
-    const groupsArr = Object.keys(groups);
-    if (selectedTemplateName) {
-      getGroupByTemplateName(selectedTemplateName);
-    } else {
-      if (!activeGroup && groupsArr.length) {
-        setActiveGroup(groupsArr[0]);
-      }
-    }
-  }, [groups, activeGroup]);
-
-  useEffect(() => {
-    if (activeGroup && groups[activeGroup]) {
-      setActiveTemplate(groups[activeGroup][0]);
-    }
-  }, [activeGroup]);
-
-  useEffect(() => {
-    if (!activeTemplate && filteredTemplatesToRender.length) {
-      setActiveTemplate(filteredTemplatesToRender[0]);
-    }
-  }, [activeTemplate, filteredTemplatesToRender]);
-
-  if (!activeTemplate) {
-    return <LoadingPlaceholder text="Loading..." />;
-  }
-
-  const sendDemoAlertBlock = (
-    <HorizontalGroup>
-      <Text type="secondary">There are no alerts from this monitoring yet.</Text>
-      {demoAlertEnabled ? (
-        <WithPermissionControlTooltip userAction={UserActions.IntegrationsTest}>
-          <Button className={cx('button')} variant="primary" onClick={handleSendDemoAlertClick} size="sm">
-            Send demo alert
-          </Button>
-        </WithPermissionControlTooltip>
-      ) : null}
-    </HorizontalGroup>
-  );
-  const handleGoToTemplateSettingsCllick = () => LocationHelper.update({ tab: 'Autoresolve' }, 'partial');
-
-  return (
-    <div className={cx('root')}>
-      <Block bordered>
-        <VerticalGroup>
-          <Label>Edit template for</Label>
-          <Select
-            options={Object.keys(groups).map((group: string) => ({
-              value: group,
-              label: capitalCase(group),
-            }))}
-            value={activeGroup}
-            onChange={handleChangeActiveGroup}
-            className={cx('select', 'select-template')}
-          />
-        </VerticalGroup>
-      </Block>
-      <div className={cx('templatesInfo')}>
-        <Block className={cx('templates', 'borderLeftRightBottom')}>
-          <VerticalGroup>
-            <Text type="secondary">
-              <p>
-                <a href="https://jinja.palletsprojects.com/en/3.0.x/" target="_blank" rel="noreferrer">
-                  Jinja2
-                </a>
-                {activeGroup === 'slack' && ', Slack markdown'}
-                {activeGroup === 'web' && ', Markdown'}
-                {activeGroup === 'telegram' && ', html'}
-                {' supported. '}
-                Reserved variables available: <Text keyboard>payload</Text>, <Text keyboard>grafana_oncall_link</Text>,{' '}
-                <Text keyboard>grafana_oncall_incident_id</Text>, <Text keyboard>integration_name</Text>,
-                <Text keyboard>source_link</Text>. Press <Text keyboard>Ctrl</Text>+<Text keyboard>Space</Text> to get
-                suggestions
-              </p>
-            </Text>
-            {groups[activeGroup].map((activeTemplate) => (
-              <div
-                key={activeTemplate.name}
-                className={cx('template-form', {
-                  'template-form-full': true,
-                  'autoresolve-condition': selectedTemplateName && activeTemplate.name === 'resolve_condition_template',
-                })}
-              >
-                <Label className={cx({ 'autoresolve-label': activeTemplate.name === 'resolve_condition_template' })}>
-                  {getLabelFromTemplateName(activeTemplate.name, activeGroup)}
-                </Label>
-                {activeTemplate.name === 'resolve_condition_template' && (
-                  <Text type="secondary" size="small">
-                    To activate autoresolving change integration
-                    <Button fill="text" size="sm" onClick={handleGoToTemplateSettingsCllick}>
-                      settings
-                    </Button>
-                  </Text>
-                )}
-                <MonacoEditor
-                  value={tempValues[activeTemplate.name] ?? (templates[activeTemplate.name] || '')}
-                  disabled={false}
-                  data={templates}
-                  onChange={getChangeHandler(activeTemplate.name)}
-                  loading={templatesRefreshing}
-                />
-                <div className={cx('typographyText')}>
-                  <Text type="secondary">
-                    Press <Text keyboard>Ctrl</Text>+<Text keyboard>Space</Text> to get suggestions
-                  </Text>
-                  {activeGroup === 'web' && activeTemplate.name === 'web_title_template' && (
-                    <div className={cx('web-title-message')}>
-                      <Text type="secondary" size="small">
-                        Please note that after changing the web title template new alert groups will be searchable by
-                        new title. Alert Groups created before the template was changed will be still searchable by old
-                        title only.
-                      </Text>
-                    </div>
-                  )}
-                </div>
-              </div>
-            ))}
-            <HorizontalGroup spacing="sm">
-              <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-                <Button variant="primary" onClick={handleSubmit}>
-                  Save Templates
-                </Button>
-              </WithPermissionControlTooltip>
-              <Button variant="destructive" onClick={handleReset}>
-                Reset Template
-              </Button>
-            </HorizontalGroup>
-          </VerticalGroup>
-        </Block>
-        <Block className={cx('templates', 'borderRightBottom')}>
-          <VerticalGroup>
-            {templates?.payload_example ? (
-              <VerticalGroup spacing="md">
-                {isUserActionAllowed(UserActions.IntegrationsTest) && (
-                  <VerticalGroup>
-                    <Label>{`${capitalCase(activeGroup)} Preview`}</Label>
-                    <VerticalGroup style={{ width: '100%' }}>
-                      {groups[activeGroup].map((template) => (
-                        <TemplatePreview
-                          templatePage={TEMPLATE_PAGE.Integrations}
-                          key={template.name}
-                          templateName={template.name}
-                          templateBody={tempValues[template.name] ?? templates[template.name]}
-                          alertReceiveChannelId={alertReceiveChannelId}
-                          alertGroupId={alertGroupId}
-                        />
-                      ))}
-                    </VerticalGroup>
-                  </VerticalGroup>
-                )}
-                <VerticalGroup>
-                  <Label>Payload Example</Label>
-                  <SourceCode>{JSON.stringify(templates?.payload_example, null, 4)}</SourceCode>
-                </VerticalGroup>
-              </VerticalGroup>
-            ) : (
-              sendDemoAlertBlock
-            )}
-          </VerticalGroup>
-        </Block>
-      </div>
-    </div>
-  );
-};
-
-export default AlertTemplatesForm;
diff --git a/grafana-plugin/src/components/AlertTemplates/CommonAlertTemplatesForm.config.ts b/grafana-plugin/src/components/AlertTemplates/CommonAlertTemplatesForm.config.ts
index 5ba03ec9..9b87e9af 100644
--- a/grafana-plugin/src/components/AlertTemplates/CommonAlertTemplatesForm.config.ts
+++ b/grafana-plugin/src/components/AlertTemplates/CommonAlertTemplatesForm.config.ts
@@ -1,4 +1,4 @@
-import { TemplateOptions } from 'pages/integration/Integration.config';
+import { BaseTemplateOptions } from 'pages/integration/IntegrationCommon.config';
 
 export interface Template {
   name: string;
@@ -22,19 +22,19 @@ export interface TemplateForEdit {
 export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
   web_title_template: {
     displayName: 'Web title',
-    name: TemplateOptions.WebTitle.key,
+    name: BaseTemplateOptions.WebTitle.key,
     description: '',
     type: 'html',
   },
   web_message_template: {
     displayName: 'Web message',
-    name: TemplateOptions.WebMessage.key,
+    name: BaseTemplateOptions.WebMessage.key,
     description: '',
     type: 'html',
   },
   slack_title_template: {
     displayName: 'Slack title',
-    name: TemplateOptions.SlackTitle.key,
+    name: BaseTemplateOptions.SlackTitle.key,
     description: '',
     additionalData: {
       chatOpsName: 'slack',
@@ -44,26 +44,26 @@ export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
     type: 'plain',
   },
   sms_title_template: {
-    name: TemplateOptions.SMS.key,
+    name: BaseTemplateOptions.SMS.key,
     displayName: 'Sms title',
     description:
       "Result of this template will be used as title of SMS message. Please don't include any urls, or phone numbers, to avoid SMS message being blocked by carriers.",
     type: 'plain',
   },
   phone_call_title_template: {
-    name: TemplateOptions.Phone.key,
+    name: BaseTemplateOptions.Phone.key,
     displayName: 'Phone Call title',
     description: '',
     type: 'plain',
   },
   email_title_template: {
-    name: TemplateOptions.EmailTitle.key,
+    name: BaseTemplateOptions.EmailTitle.key,
     displayName: 'Email title',
     description: '',
     type: 'plain',
   },
   telegram_title_template: {
-    name: TemplateOptions.TelegramTitle.key,
+    name: BaseTemplateOptions.TelegramTitle.key,
     displayName: 'Telegram title',
     description: '',
     additionalData: {
@@ -73,7 +73,7 @@ export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
     type: 'plain',
   },
   slack_message_template: {
-    name: TemplateOptions.SlackMessage.key,
+    name: BaseTemplateOptions.SlackMessage.key,
     displayName: 'Slack message',
     description: '',
     additionalData: {
@@ -84,13 +84,13 @@ export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
     type: 'plain',
   },
   email_message_template: {
-    name: TemplateOptions.EmailMessage.key,
+    name: BaseTemplateOptions.EmailMessage.key,
     displayName: 'Email message',
     description: '',
     type: 'plain',
   },
   telegram_message_template: {
-    name: TemplateOptions.TelegramMessage.key,
+    name: BaseTemplateOptions.TelegramMessage.key,
     displayName: 'Telegram message',
     description: '',
     additionalData: {
@@ -100,7 +100,7 @@ export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
     type: 'plain',
   },
   slack_image_url_template: {
-    name: TemplateOptions.SlackImage.key,
+    name: BaseTemplateOptions.SlackImage.key,
     displayName: 'Slack image url',
     description: '',
     additionalData: {
@@ -111,13 +111,13 @@ export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
     type: 'plain',
   },
   web_image_url_template: {
-    name: TemplateOptions.WebImage.key,
+    name: BaseTemplateOptions.WebImage.key,
     displayName: 'Web image url',
     description: '',
     type: 'image',
   },
   telegram_image_url_template: {
-    name: TemplateOptions.TelegramImage.key,
+    name: BaseTemplateOptions.TelegramImage.key,
     displayName: 'Telegram image url',
     description: '',
     additionalData: {
@@ -127,33 +127,33 @@ export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
     type: 'image',
   },
   grouping_id_template: {
-    name: TemplateOptions.Grouping.key,
+    name: BaseTemplateOptions.Grouping.key,
     displayName: 'Grouping',
     description:
       'Reduce noise, minimize duplication with Alert Grouping, based on time, alert content, and even multiple features at the same time.  Check the cheasheet to customize your template.',
     type: 'plain',
   },
   acknowledge_condition_template: {
-    name: TemplateOptions.Autoacknowledge.key,
+    name: BaseTemplateOptions.Autoacknowledge.key,
     displayName: 'Acknowledge condition',
     description: '',
     type: 'boolean',
   },
   resolve_condition_template: {
-    name: TemplateOptions.Resolve.key,
+    name: BaseTemplateOptions.Resolve.key,
     displayName: 'Resolve condition',
     description:
       'When monitoring systems return to normal, they can send "resolve" alerts. OnCall can use these signals to resolve alert groups accordingly.',
     type: 'boolean',
   },
   source_link_template: {
-    name: TemplateOptions.SourceLink.key,
+    name: BaseTemplateOptions.SourceLink.key,
     displayName: 'Source link',
     description: '',
     type: 'plain',
   },
   route_template: {
-    name: TemplateOptions.Routing.key,
+    name: BaseTemplateOptions.Routing.key,
     displayName: 'Routing',
     description:
       'Routes direct alerts to different escalation chains based on the content, such as severity or region.',
diff --git a/grafana-plugin/src/containers/AlertRules/parts/connectors/MSTeamsConnector.tsx b/grafana-plugin/src/containers/AlertRules/parts/connectors/MSTeamsConnector.tsx
new file mode 100644
index 00000000..1bb97d24
--- /dev/null
+++ b/grafana-plugin/src/containers/AlertRules/parts/connectors/MSTeamsConnector.tsx
@@ -0,0 +1,74 @@
+import React, { useCallback } from 'react';
+
+import { HorizontalGroup, InlineSwitch } from '@grafana/ui';
+import cn from 'classnames/bind';
+
+import GSelect from 'containers/GSelect/GSelect';
+import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
+import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
+import { MSTeamsChannel } from 'models/msteams_channel/msteams_channel.types';
+import { useStore } from 'state/useStore';
+import { UserActions } from 'utils/authorization';
+
+import styles from 'containers/AlertRules/parts/connectors/index.module.css';
+
+const cx = cn.bind(styles);
+
+interface MSTeamsConnectorProps {
+  channelFilterId: ChannelFilter['id'];
+}
+
+const MSTeamsConnector = (props: MSTeamsConnectorProps) => {
+  const { channelFilterId } = props;
+
+  const store = useStore();
+  const { alertReceiveChannelStore } = store;
+
+  const channelFilter = store.alertReceiveChannelStore.channelFilters[channelFilterId];
+
+  const handleMSTeamsChannelChange = useCallback((_value: MSTeamsChannel['id'], msteamsChannel: MSTeamsChannel) => {
+    alertReceiveChannelStore.saveChannelFilter(channelFilterId, {
+      notification_backends: {
+        MSTEAMS: { channel: msteamsChannel?.id || null },
+      },
+    });
+  }, []);
+
+  const handleChannelFilterNotifyInMSTeamsChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    alertReceiveChannelStore.saveChannelFilter(channelFilterId, {
+      notification_backends: { MSTEAMS: { enabled: event.target.checked } },
+    });
+  }, []);
+
+  return (
+    <div className={cx('root')}>
+      <HorizontalGroup wrap spacing="sm">
+        <div className={cx('slack-channel-switch')}>
+          <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
+            <InlineSwitch
+              value={channelFilter.notification_backends?.MSTEAMS?.enabled}
+              onChange={handleChannelFilterNotifyInMSTeamsChange}
+              transparent
+            />
+          </WithPermissionControlTooltip>
+        </div>
+        Post to Microsoft Teams channel
+        <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
+          <GSelect
+            showSearch
+            allowClear
+            className={cx('select', 'control')}
+            modelName="msteamsChannelStore"
+            displayField="display_name"
+            valueField="id"
+            placeholder="Select Microsoft Teams Channel"
+            value={channelFilter.notification_backends?.MSTEAMS?.channel}
+            onChange={handleMSTeamsChannelChange}
+          />
+        </WithPermissionControlTooltip>
+      </HorizontalGroup>
+    </div>
+  );
+};
+
+export default MSTeamsConnector;
diff --git a/grafana-plugin/src/containers/AlertRules/parts/index.tsx b/grafana-plugin/src/containers/AlertRules/parts/index.tsx
index 051373e9..049219b0 100644
--- a/grafana-plugin/src/containers/AlertRules/parts/index.tsx
+++ b/grafana-plugin/src/containers/AlertRules/parts/index.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { VerticalGroup } from '@grafana/ui';
 
 import Timeline from 'components/Timeline/Timeline';
+import MSTeamsConnector from 'containers/AlertRules/parts/connectors/MSTeamsConnector';
 import SlackConnector from 'containers/AlertRules/parts/connectors/SlackConnector';
 import TelegramConnector from 'containers/AlertRules/parts/connectors/TelegramConnector';
 import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
@@ -19,13 +20,19 @@ export const ChatOpsConnectors = (props: ChatOpsConnectorsProps) => {
   const { channelFilterId, showLineNumber = true } = props;
 
   const store = useStore();
-  const { telegramChannelStore, organizationStore } = store;
+  const { organizationStore, telegramChannelStore, msteamsChannelStore } = store;
 
   const isSlackInstalled = Boolean(organizationStore.currentOrganization?.slack_team_identity);
   const isTelegramInstalled =
     store.hasFeature(AppFeature.Telegram) && telegramChannelStore.currentTeamToTelegramChannel?.length > 0;
 
-  if (!isSlackInstalled && !isTelegramInstalled) {
+  useEffect(() => {
+    msteamsChannelStore.updateMSTeamsChannels();
+  }, []);
+
+  const isMSTeamsInstalled = msteamsChannelStore.currentTeamToMSTeamsChannel?.length > 0;
+
+  if (!isSlackInstalled && !isTelegramInstalled && !isMSTeamsInstalled) {
     return null;
   }
 
@@ -34,6 +41,7 @@ export const ChatOpsConnectors = (props: ChatOpsConnectorsProps) => {
       <VerticalGroup>
         {isSlackInstalled && <SlackConnector channelFilterId={channelFilterId} />}
         {isTelegramInstalled && <TelegramConnector channelFilterId={channelFilterId} />}
+        {isMSTeamsInstalled && <MSTeamsConnector channelFilterId={channelFilterId} />}
       </VerticalGroup>
     </Timeline.Item>
   );
diff --git a/grafana-plugin/src/containers/AlertTemplatesFormContainer/AlertTemplatesFormContainer.tsx b/grafana-plugin/src/containers/AlertTemplatesFormContainer/AlertTemplatesFormContainer.tsx
deleted file mode 100644
index aa53a2f0..00000000
--- a/grafana-plugin/src/containers/AlertTemplatesFormContainer/AlertTemplatesFormContainer.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-
-import { observer } from 'mobx-react';
-
-import AlertTemplatesForm from 'components/AlertTemplates/AlertTemplatesForm';
-import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
-import { Alert } from 'models/alertgroup/alertgroup.types';
-import { useStore } from 'state/useStore';
-import { openErrorNotification, openNotification } from 'utils';
-
-interface TeamEditContainerProps {
-  onHide: () => void;
-  alertReceiveChannelId: AlertReceiveChannel['id'];
-  alertGroupId?: Alert['pk'];
-  onUpdate?: () => void;
-  onUpdateTemplates?: () => void;
-  visible?: boolean;
-  selectedTemplateName?: string;
-}
-
-const AlertTemplatesFormContainer = observer((props: TeamEditContainerProps) => {
-  const { alertReceiveChannelId, alertGroupId, onUpdateTemplates, selectedTemplateName } = props;
-
-  const store = useStore();
-
-  const [templatesRefreshing, setTemplatesRefreshing] = useState<boolean>(false);
-
-  useEffect(() => {
-    store.alertReceiveChannelStore.updateItem(alertReceiveChannelId);
-    store.alertReceiveChannelStore.updateTemplates(alertReceiveChannelId, alertGroupId);
-  }, [alertGroupId, alertReceiveChannelId, store]);
-
-  const onUpdateTemplatesCallback = useCallback(
-    (data) => {
-      store.alertReceiveChannelStore
-        .saveTemplates(alertReceiveChannelId, data)
-        .then(() => {
-          openNotification('Alert templates are successfully updated');
-          if (onUpdateTemplates) {
-            onUpdateTemplates();
-          }
-        })
-        .catch((err) => {
-          if (err.response?.data?.length > 0) {
-            openErrorNotification(err.response.data);
-          } else {
-            openErrorNotification(err.message);
-          }
-        });
-    },
-    [alertReceiveChannelId, onUpdateTemplates, store.alertReceiveChannelStore]
-  );
-
-  const handleSendDemoAlertClickCallback = useCallback(() => {
-    store.alertReceiveChannelStore.sendDemoAlert(alertReceiveChannelId).then(() => {
-      setTemplatesRefreshing(true);
-      store.alertReceiveChannelStore.updateTemplates(alertReceiveChannelId).then(() => {
-        setTemplatesRefreshing(false);
-      });
-    });
-  }, []);
-
-  const templates = store.alertReceiveChannelStore.templates[alertReceiveChannelId];
-  const alertReceiveChannel = store.alertReceiveChannelStore.items[alertReceiveChannelId];
-
-  return (
-    <AlertTemplatesForm
-      alertReceiveChannelId={alertReceiveChannelId}
-      alertGroupId={alertGroupId}
-      templates={templates}
-      onUpdateTemplates={onUpdateTemplatesCallback}
-      demoAlertEnabled={alertReceiveChannel?.demo_alert_enabled}
-      handleSendDemoAlertClick={handleSendDemoAlertClickCallback}
-      templatesRefreshing={templatesRefreshing}
-      selectedTemplateName={selectedTemplateName}
-    />
-  );
-});
-
-export default AlertTemplatesFormContainer;
diff --git a/grafana-plugin/src/containers/DefaultPageLayout/helper.ts b/grafana-plugin/src/containers/DefaultPageLayout/helper.ts
index 80c58bb8..fe21f586 100644
--- a/grafana-plugin/src/containers/DefaultPageLayout/helper.ts
+++ b/grafana-plugin/src/containers/DefaultPageLayout/helper.ts
@@ -1,5 +1,5 @@
 import { User } from 'models/user/user.types';
 
 export const getIfChatOpsConnected = (user: User) => {
-  return user?.slack_user_identity || user?.telegram_configuration;
+  return user?.slack_user_identity || user?.telegram_configuration || user?.messaging_backends?.MSTEAMS;
 };
diff --git a/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.config.ts b/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.config.ts
index 7795091f..0b5c6bdd 100644
--- a/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.config.ts
+++ b/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.config.ts
@@ -1,3 +1,35 @@
+import { MONACO_INPUT_HEIGHT_SMALL, MONACO_INPUT_HEIGHT_TALL } from 'pages/integration/IntegrationCommon.config';
+import { AppFeature } from 'state/features';
+
 import { TemplateBlock, commonTemplatesToRender } from './IntegrationCommonTemplatesList.config';
 
-export const templatesToRender: TemplateBlock[] = commonTemplatesToRender;
+const additionalTemplatesToRender: TemplateBlock[] = [
+  {
+    name: 'MS Teams',
+    contents: [
+      {
+        name: 'msteams_title_template',
+        label: 'Title',
+        height: MONACO_INPUT_HEIGHT_SMALL,
+      },
+      {
+        name: 'msteams_message_template',
+        label: 'Message',
+        height: MONACO_INPUT_HEIGHT_TALL,
+      },
+      {
+        name: 'msteams_image_url_template',
+        label: 'Image',
+        height: MONACO_INPUT_HEIGHT_SMALL,
+      },
+    ],
+  },
+];
+
+export const getTemplatesToRender = (features: Record<string, boolean>) => {
+  if (features[AppFeature.MsTeams]) {
+    return commonTemplatesToRender.concat(additionalTemplatesToRender);
+  }
+
+  return commonTemplatesToRender;
+};
diff --git a/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx b/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx
index 32b89682..9d3708c8 100644
--- a/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx
+++ b/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx
@@ -2,13 +2,14 @@ import React, { useState, useCallback } from 'react';
 
 import { ConfirmModal, InlineSwitch, Tooltip } from '@grafana/ui';
 import cn from 'classnames/bind';
+import { observer } from 'mobx-react';
 
 import IntegrationBlockItem from 'components/Integrations/IntegrationBlockItem';
 import IntegrationTemplateBlock from 'components/Integrations/IntegrationTemplateBlock';
 import MonacoEditor from 'components/MonacoEditor/MonacoEditor';
 import { MONACO_READONLY_CONFIG } from 'components/MonacoEditor/MonacoEditor.config';
 import Text from 'components/Text/Text';
-import { templatesToRender } from 'containers/IntegrationContainers/IntegrationTemplatesList.config';
+import { getTemplatesToRender } from 'containers/IntegrationContainers/IntegrationTemplatesList.config';
 import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
 import { AlertTemplatesDTO } from 'models/alert_templates/alert_templates';
 import IntegrationHelper from 'pages/integration/Integration.helper';
@@ -27,137 +28,143 @@ interface IntegrationTemplateListProps {
   alertReceiveChannelAllowSourceBasedResolving: boolean;
 }
 
-const IntegrationTemplateList: React.FC<IntegrationTemplateListProps> = ({
-  templates,
-  openEditTemplateModal,
-  alertReceiveChannelId,
-  alertReceiveChannelIsBasedOnAlertManager,
-  alertReceiveChannelAllowSourceBasedResolving,
-}) => {
-  const { alertReceiveChannelStore } = useStore();
-  const [isRestoringTemplate, setIsRestoringTemplate] = useState<boolean>(false);
-  const [templateRestoreName, setTemplateRestoreName] = useState<string>(undefined);
-  const [showConfirmModal, setShowConfirmModal] = useState(false);
-  const [autoresolveValue, setAutoresolveValue] = useState<boolean>(alertReceiveChannelAllowSourceBasedResolving);
+const IntegrationTemplateList: React.FC<IntegrationTemplateListProps> = observer(
+  ({
+    templates,
+    openEditTemplateModal,
+    alertReceiveChannelId,
+    alertReceiveChannelIsBasedOnAlertManager,
+    alertReceiveChannelAllowSourceBasedResolving,
+  }) => {
+    const { alertReceiveChannelStore, features } = useStore();
+    const [isRestoringTemplate, setIsRestoringTemplate] = useState<boolean>(false);
+    const [templateRestoreName, setTemplateRestoreName] = useState<string>(undefined);
+    const [showConfirmModal, setShowConfirmModal] = useState(false);
+    const [autoresolveValue, setAutoresolveValue] = useState<boolean>(alertReceiveChannelAllowSourceBasedResolving);
 
-  const handleSaveClick = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setAutoresolveValue(event.target.checked);
-    alertReceiveChannelStore
-      .saveAlertReceiveChannel(alertReceiveChannelId, {
-        allow_source_based_resolving: event.target.checked,
-      })
-      .then(() => {
-        openNotification('Autoresolve ' + (event.target.checked ? 'enabled' : 'disabled'));
-      });
-  }, []);
+    const handleSaveClick = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+      setAutoresolveValue(event.target.checked);
+      alertReceiveChannelStore
+        .saveAlertReceiveChannel(alertReceiveChannelId, {
+          allow_source_based_resolving: event.target.checked,
+        })
+        .then(() => {
+          openNotification('Autoresolve ' + (event.target.checked ? 'enabled' : 'disabled'));
+        });
+    }, []);
 
-  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()}
-        />
-      )}
-      {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}
-                labelTooltip={contents.labelTooltip}
-                isTemplateEditable={isResolveConditionTemplateEditable(contents.name)}
-                renderInput={() => (
-                  <>
-                    {isResolveConditionTemplate(contents.name) && (
-                      <Tooltip content={'Edit'}>
-                        <InlineSwitch
-                          value={autoresolveValue}
-                          onChange={handleSaveClick}
-                          className={cx('inline-switch')}
-                        />
-                      </Tooltip>
-                    )}
-                    {isResolveConditionTemplateEditable(contents.name) && (
-                      <div className={cx('input', { 'input-with-toggle': isResolveConditionTemplate(contents.name) })}>
-                        <MonacoEditor
-                          value={IntegrationHelper.getFilteredTemplate(
-                            templates[contents.name] || '',
-                            contents.height === MONACO_INPUT_HEIGHT_TALL
-                          )}
-                          disabled={true}
-                          height={contents.height}
-                          data={templates}
-                          showLineNumbers={false}
-                          monacoOptions={MONACO_READONLY_CONFIG}
-                        />
-                      </div>
-                    )}
-                  </>
-                )}
-                onEdit={() => openEditTemplateModal(contents.name)}
-              />
-            ))}
-          </VerticalBlock>
-        </IntegrationBlockItem>
-      ))}
-    </div>
-  );
+    const templatesToRender = getTemplatesToRender(features);
 
-  function isResolveConditionTemplateEditable(templateName: string) {
     return (
-      !(alertReceiveChannelIsBasedOnAlertManager && isResolveConditionTemplate(templateName)) &&
-      (alertReceiveChannelAllowSourceBasedResolving || !isResolveConditionTemplate(templateName))
+      <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()}
+          />
+        )}
+        {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}
+                  labelTooltip={contents.labelTooltip}
+                  isTemplateEditable={isResolveConditionTemplateEditable(contents.name)}
+                  renderInput={() => (
+                    <>
+                      {isResolveConditionTemplate(contents.name) && (
+                        <Tooltip content={'Edit'}>
+                          <InlineSwitch
+                            value={autoresolveValue}
+                            onChange={handleSaveClick}
+                            className={cx('inline-switch')}
+                          />
+                        </Tooltip>
+                      )}
+                      {isResolveConditionTemplateEditable(contents.name) && (
+                        <div
+                          className={cx('input', { 'input-with-toggle': isResolveConditionTemplate(contents.name) })}
+                        >
+                          <MonacoEditor
+                            value={IntegrationHelper.getFilteredTemplate(
+                              templates[contents.name] || '',
+                              contents.height === MONACO_INPUT_HEIGHT_TALL
+                            )}
+                            disabled={true}
+                            height={contents.height}
+                            data={templates}
+                            showLineNumbers={false}
+                            monacoOptions={MONACO_READONLY_CONFIG}
+                          />
+                        </div>
+                      )}
+                    </>
+                  )}
+                  onEdit={() => openEditTemplateModal(contents.name)}
+                />
+              ))}
+            </VerticalBlock>
+          </IntegrationBlockItem>
+        ))}
+      </div>
     );
-  }
 
-  function isResolveConditionTemplate(templateName: string) {
-    return templateName === 'resolve_condition_template';
-  }
+    function isResolveConditionTemplateEditable(templateName: string) {
+      return (
+        !(alertReceiveChannelIsBasedOnAlertManager && isResolveConditionTemplate(templateName)) &&
+        (alertReceiveChannelAllowSourceBasedResolving || !isResolveConditionTemplate(templateName))
+      );
+    }
 
-  function onShowConfirmModal(templateName: string) {
-    setTemplateRestoreName(templateName);
-    setShowConfirmModal(true);
-  }
+    function isResolveConditionTemplate(templateName: string) {
+      return templateName === 'resolve_condition_template';
+    }
 
-  function onDismiss() {
-    setTemplateRestoreName(undefined);
-    setShowConfirmModal(false);
-  }
+    function onShowConfirmModal(templateName: string) {
+      setTemplateRestoreName(templateName);
+      setShowConfirmModal(true);
+    }
 
-  function onResetTemplate(templateName: string) {
-    setTemplateRestoreName(undefined);
-    setIsRestoringTemplate(true);
+    function onDismiss() {
+      setTemplateRestoreName(undefined);
+      setShowConfirmModal(false);
+    }
 
-    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);
-      });
+    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>;
diff --git a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
index 87d43367..24eba7dc 100644
--- a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
+++ b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
@@ -5,7 +5,7 @@ import cn from 'classnames/bind';
 import { debounce } from 'lodash-es';
 import { observer } from 'mobx-react';
 
-import { templateForEdit } from 'components/AlertTemplates/AlertTemplatesForm.config';
+import { getTemplatesForEdit } from 'components/AlertTemplates/AlertTemplatesForm.config';
 import { TemplateForEdit } from 'components/AlertTemplates/CommonAlertTemplatesForm.config';
 import CheatSheet from 'components/CheatSheet/CheatSheet';
 import {
@@ -22,7 +22,8 @@ import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_
 import { AlertTemplatesDTO } from 'models/alert_templates/alert_templates';
 import { Alert } from 'models/alertgroup/alertgroup.types';
 import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
-import { TemplateOptions } from 'pages/integration/Integration.config';
+import { BaseTemplateOptions } from 'pages/integration/IntegrationCommon.config';
+import { useStore } from 'state/useStore';
 import LocationHelper from 'utils/LocationHelper';
 import { UserActions } from 'utils/authorization';
 
@@ -51,7 +52,11 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
   const [resultError, setResultError] = useState<string>(undefined);
   const [isRecentAlertGroupExisting, setIsRecentAlertGroupExisting] = useState<boolean>(false);
 
+  const store = useStore();
+
   useEffect(() => {
+    const templateForEdit = getTemplatesForEdit(store.features);
+
     if (templateForEdit[template.name]) {
       const locationParams: any = { template: template.name };
       if (template.isRoute) {
@@ -124,25 +129,25 @@ const IntegrationTemplate = observer((props: IntegrationTemplateProps) => {
 
   const getCheatSheet = (templateKey: string) => {
     switch (templateKey) {
-      case TemplateOptions.Grouping.key:
-      case TemplateOptions.Resolve.key:
+      case BaseTemplateOptions.Grouping.key:
+      case BaseTemplateOptions.Resolve.key:
         return groupingTemplateCheatSheet;
-      case TemplateOptions.WebTitle.key:
-      case TemplateOptions.WebMessage.key:
-      case TemplateOptions.WebImage.key:
+      case BaseTemplateOptions.WebTitle.key:
+      case BaseTemplateOptions.WebMessage.key:
+      case BaseTemplateOptions.WebImage.key:
         return genericTemplateCheatSheet;
-      case TemplateOptions.Autoacknowledge.key:
-      case TemplateOptions.SourceLink.key:
-      case TemplateOptions.Phone.key:
-      case TemplateOptions.SMS.key:
-      case TemplateOptions.SlackTitle.key:
-      case TemplateOptions.SlackMessage.key:
-      case TemplateOptions.SlackImage.key:
-      case TemplateOptions.TelegramTitle.key:
-      case TemplateOptions.TelegramMessage.key:
-      case TemplateOptions.TelegramImage.key:
-      case TemplateOptions.EmailTitle.key:
-      case TemplateOptions.EmailMessage.key:
+      case BaseTemplateOptions.Autoacknowledge.key:
+      case BaseTemplateOptions.SourceLink.key:
+      case BaseTemplateOptions.Phone.key:
+      case BaseTemplateOptions.SMS.key:
+      case BaseTemplateOptions.SlackTitle.key:
+      case BaseTemplateOptions.SlackMessage.key:
+      case BaseTemplateOptions.SlackImage.key:
+      case BaseTemplateOptions.TelegramTitle.key:
+      case BaseTemplateOptions.TelegramMessage.key:
+      case BaseTemplateOptions.TelegramImage.key:
+      case BaseTemplateOptions.EmailTitle.key:
+      case BaseTemplateOptions.EmailMessage.key:
         return slackMessageTemplateCheatSheet;
       default:
         return genericTemplateCheatSheet;
diff --git a/grafana-plugin/src/containers/MSTeams/MSTeamsInstructions.module.css b/grafana-plugin/src/containers/MSTeams/MSTeamsInstructions.module.css
new file mode 100644
index 00000000..798b655f
--- /dev/null
+++ b/grafana-plugin/src/containers/MSTeams/MSTeamsInstructions.module.css
@@ -0,0 +1,30 @@
+.info-block {
+  width: 752px;
+  text-align: center;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.field-command {
+  margin-top: 8px;
+  width: 752px;
+}
+
+.field-command input {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--primary-text-link);
+}
+
+.infoblock-text {
+  margin-left: 48px;
+  margin-right: 48px;
+}
+
+.done-button {
+  width: 752px;
+  direction: rtl;
+}
diff --git a/grafana-plugin/src/containers/MSTeams/MSTeamsInstructions.tsx b/grafana-plugin/src/containers/MSTeams/MSTeamsInstructions.tsx
new file mode 100644
index 00000000..75d65118
--- /dev/null
+++ b/grafana-plugin/src/containers/MSTeams/MSTeamsInstructions.tsx
@@ -0,0 +1,133 @@
+import React, { FC } from 'react';
+
+import { Button, Icon, VerticalGroup, Field, Input } from '@grafana/ui';
+import cn from 'classnames/bind';
+import { observer } from 'mobx-react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+import Block from 'components/GBlock/Block';
+import PluginLink from 'components/PluginLink/PluginLink';
+import Text from 'components/Text/Text';
+import MSTeamsLogo from 'icons/MSTeamsLogo';
+import { useStore } from 'state/useStore';
+import { openNotification, openWarningNotification } from 'utils';
+
+import styles from './MSTeamsInstructions.module.css';
+
+interface MSTeamsInstructionsProps {
+  onCallisAdded?: boolean;
+  showInfoBox?: boolean;
+  personalSettings?: boolean;
+  verificationCode: string;
+  onHide?: () => void;
+}
+
+const cx = cn.bind(styles);
+
+const MSTeamsInstructions: FC<MSTeamsInstructionsProps> = observer((props) => {
+  const { onCallisAdded, showInfoBox, personalSettings, onHide = () => {}, verificationCode } = props;
+  const { msteamsChannelStore } = useStore();
+
+  const handleMSTeamsGetChannels = () => {
+    msteamsChannelStore.updateItems().then(() => {
+      const connectedChannels = msteamsChannelStore.getSearchResult();
+      if (!connectedChannels?.length) {
+        openWarningNotification('No MS Teams channels found');
+      }
+    });
+
+    onHide();
+  };
+
+  return (
+    <VerticalGroup align="flex-start" spacing="lg">
+      {!personalSettings && <Text.Title level={2}>Connect MS Teams workspace</Text.Title>}
+      {showInfoBox && (
+        <Block bordered withBackground className={cx('info-block')}>
+          <VerticalGroup align="center">
+            <div style={{ width: '60px', marginTop: '24px' }}>
+              <MSTeamsLogo />
+            </div>
+            <Text>You can manage alert groups in your Microsoft Teams workspace.</Text>
+            <br />
+            {personalSettings ? (
+              <VerticalGroup align="center">
+                <Text>This setup is for direct profile connection with bot. </Text>
+                <br />
+                <Text className={cx('infoblock-text')}>
+                  To manage alert groups in Team channel, setup{' '}
+                  <PluginLink query={{ page: 'chat-ops', tab: 'MSTeams' }}>Team ChatOps</PluginLink>
+                </Text>
+              </VerticalGroup>
+            ) : (
+              <VerticalGroup align="center">
+                <Text>This setup is for Team channel connection with bot. </Text>
+                <br />
+                <Text className={cx('infoblock-text')}>
+                  To manage alert groups in Direct Messages and verify users who are allowed to operate with MS Teams,
+                  setup <PluginLink query={{ page: 'users', id: 'me' }}>personal MS Teams connection</PluginLink>
+                </Text>
+              </VerticalGroup>
+            )}
+          </VerticalGroup>
+        </Block>
+      )}
+
+      {!onCallisAdded && (
+        <Text type="secondary">
+          1. Go to{' '}
+          <a href="https://appsource.microsoft.com/en-us/product/office/WA200004307" target="_blank" rel="noreferrer">
+            <Text type="link">MS Teams marketplace</Text>
+          </a>{' '}
+          and add <Text type="primary">Grafana OnCall app</Text> to your MS Teams org workspace.{' '}
+        </Text>
+      )}
+      <Text type="secondary">
+        {!onCallisAdded ? 2 : 1}.{' '}
+        {personalSettings ? (
+          <Text type="secondary">
+            Send a direct message to the Grafana OnCall bot using <Text type="primary">⁠linkUser</Text> command with
+            following code:
+          </Text>
+        ) : (
+          <Text type="secondary">
+            Add OnCall bot to your team channel and send this code by{' '}
+            <Text type="primary">@Grafana OnCall linkTeam</Text> command
+          </Text>
+        )}
+        <Field className={cx('field-command')}>
+          <Input
+            id="msTeamsCommand"
+            value={verificationCode}
+            suffix={
+              <CopyToClipboard
+                text={verificationCode}
+                onCopy={() => {
+                  openNotification('Code is copied');
+                }}
+              >
+                <Icon name="copy" />
+              </CopyToClipboard>
+            }
+          />
+        </Field>
+      </Text>
+      <Block bordered withBackground className={cx('info-block')}>
+        <Text type="secondary">
+          For more information please read{' '}
+          <a href="https://grafana.com/docs/oncall/latest/notify/ms-teams/" target="_blank" rel="noreferrer">
+            <Text type="link">OnCall documentation</Text>
+          </a>
+          .
+        </Text>
+      </Block>
+      {!personalSettings && (
+        <div className={cx('done-button')}>
+          <Button onClick={handleMSTeamsGetChannels}>Done</Button>
+        </div>
+      )}
+    </VerticalGroup>
+  );
+});
+
+export default MSTeamsInstructions;
diff --git a/grafana-plugin/src/containers/MSTeamsIntegrationButton/MSTeamsIntegrationButton.module.css b/grafana-plugin/src/containers/MSTeamsIntegrationButton/MSTeamsIntegrationButton.module.css
new file mode 100644
index 00000000..6a17c4a6
--- /dev/null
+++ b/grafana-plugin/src/containers/MSTeamsIntegrationButton/MSTeamsIntegrationButton.module.css
@@ -0,0 +1,25 @@
+.msteams-bot {
+  color: var(--primary-text-link);
+}
+
+.msteams-instruction-container {
+  display: block;
+  text-align: left;
+  margin-bottom: 12px;
+}
+
+.verification-code {
+  text-decoration: underline;
+}
+
+.copy-icon {
+  color: var(--primary-text-link);
+}
+
+.msteams-instruction-cancel {
+  margin-top: 24px;
+}
+
+.msTeams-modal {
+  min-width: 800px;
+}
diff --git a/grafana-plugin/src/containers/MSTeamsIntegrationButton/MSTeamsIntegrationButton.tsx b/grafana-plugin/src/containers/MSTeamsIntegrationButton/MSTeamsIntegrationButton.tsx
new file mode 100644
index 00000000..79cbceab
--- /dev/null
+++ b/grafana-plugin/src/containers/MSTeamsIntegrationButton/MSTeamsIntegrationButton.tsx
@@ -0,0 +1,75 @@
+import React, { useCallback, useState, useEffect } from 'react';
+
+import { Button, Modal } from '@grafana/ui';
+import cn from 'classnames/bind';
+import { observer } from 'mobx-react';
+
+import MSTeamsInstructions from 'containers/MSTeams/MSTeamsInstructions';
+import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
+import { useStore } from 'state/useStore';
+import { UserActions } from 'utils/authorization';
+
+import styles from './MSTeamsIntegrationButton.module.css';
+
+const cx = cn.bind(styles);
+
+interface MSTeamsIntegrationProps {
+  disabled?: boolean;
+  size?: 'md' | 'lg';
+  onUpdate: () => void;
+}
+
+const MSTeamsIntegrationButton = observer((props: MSTeamsIntegrationProps) => {
+  const { disabled, size = 'md', onUpdate } = props;
+
+  const [showModal, setShowModal] = useState(false);
+
+  const onInstallModalHideCallback = useCallback(() => {
+    setShowModal(false);
+  }, []);
+
+  const onInstallModalCallback = useCallback(() => {
+    setShowModal(true);
+  }, []);
+
+  const onModalUpdateCallback = useCallback(() => {
+    setShowModal(false);
+
+    onUpdate();
+  }, [onUpdate]);
+
+  return (
+    <>
+      <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
+        <Button size={size} variant="primary" icon="plus" disabled={disabled} onClick={onInstallModalCallback}>
+          Add MS Teams channel
+        </Button>
+      </WithPermissionControlTooltip>
+      {showModal && <MSTeamsModal onHide={onInstallModalHideCallback} onUpdate={onModalUpdateCallback} />}
+    </>
+  );
+});
+
+interface MSTeamsModalProps {
+  onHide: () => void;
+  onUpdate: () => void;
+}
+
+const MSTeamsModal = (props: MSTeamsModalProps) => {
+  const { onHide, onUpdate } = props;
+  const [verificationCode, setVerificationCode] = useState<string>();
+  const store = useStore();
+  useEffect(() => {
+    store.msteamsChannelStore.getMSTeamsChannelVerificationCode().then((res) => {
+      setVerificationCode(res);
+    });
+  }, []);
+
+  return (
+    <Modal className={cx('msTeams-modal')} title="Connect MS Teams workspace" closeOnEscape isOpen onDismiss={onUpdate}>
+      <MSTeamsInstructions onHide={onHide} verificationCode={verificationCode} onCallisAdded />
+    </Modal>
+  );
+};
+
+export default MSTeamsIntegrationButton;
diff --git a/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.tsx b/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.tsx
index 53dbfed3..d5fae6bd 100644
--- a/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.tsx
+++ b/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.tsx
@@ -24,7 +24,7 @@ import { logoCoors } from 'components/IntegrationLogo/IntegrationLogo.config';
 import RenderConditionally from 'components/RenderConditionally/RenderConditionally';
 import Text from 'components/Text/Text';
 import Labels, { LabelsProps } from 'containers/Labels/Labels';
-import { webhookPresetIcons } from 'containers/OutgoingWebhookForm/WebhookPresetIcons.config';
+import { getWebhookPresetIcons } from 'containers/OutgoingWebhookForm/WebhookPresetIcons.config';
 import OutgoingWebhookStatus from 'containers/OutgoingWebhookStatus/OutgoingWebhookStatus';
 import WebhooksTemplateEditor from 'containers/WebhooksTemplateEditor/WebhooksTemplateEditor';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
@@ -452,7 +452,11 @@ const WebhookTabsContent: React.FC<WebhookTabsProps> = ({
 const WebhookPresetBlocks: React.FC<{
   presets: OutgoingWebhookPreset[];
   onBlockClick: (preset: OutgoingWebhookPreset) => void;
-}> = ({ presets, onBlockClick }) => {
+}> = observer(({ presets, onBlockClick }) => {
+  const store = useStore();
+
+  const webhookPresetIcons = getWebhookPresetIcons(store.features);
+
   return (
     <div className={cx('cards')} data-testid="create-outgoing-webhook-modal">
       {presets.length ? (
@@ -486,6 +490,6 @@ const WebhookPresetBlocks: React.FC<{
       )}
     </div>
   );
-};
+});
 
 export default OutgoingWebhookForm;
diff --git a/grafana-plugin/src/containers/OutgoingWebhookForm/WebhookPresetIcons.config.tsx b/grafana-plugin/src/containers/OutgoingWebhookForm/WebhookPresetIcons.config.tsx
index b266f402..f0554656 100644
--- a/grafana-plugin/src/containers/OutgoingWebhookForm/WebhookPresetIcons.config.tsx
+++ b/grafana-plugin/src/containers/OutgoingWebhookForm/WebhookPresetIcons.config.tsx
@@ -1,5 +1,18 @@
-import { ReactElement } from 'react';
+import React from 'react';
+
+import MachineLearningLogo from 'icons/MachineLearningLogo';
+import { AppFeature } from 'state/features';
 
 import { commonWebhookPresetIconsConfig } from './CommonWebhookPresetIcons.config';
 
-export const webhookPresetIcons: { [id: string]: () => ReactElement } = commonWebhookPresetIconsConfig;
+export const additionalWebhookPresetIcons: { [id: string]: () => React.ReactElement } = {
+  machine_learning: () => <MachineLearningLogo />,
+};
+
+export const getWebhookPresetIcons = (features: Record<string, boolean>) => {
+  if (features[AppFeature.MsTeams]) {
+    return { ...commonWebhookPresetIconsConfig, ...additionalWebhookPresetIcons };
+  }
+
+  return commonWebhookPresetIconsConfig;
+};
diff --git a/grafana-plugin/src/containers/UserSettings/UserSettings.tsx b/grafana-plugin/src/containers/UserSettings/UserSettings.tsx
index 96cf5413..8e0df165 100644
--- a/grafana-plugin/src/containers/UserSettings/UserSettings.tsx
+++ b/grafana-plugin/src/containers/UserSettings/UserSettings.tsx
@@ -49,11 +49,18 @@ const UserSettings = observer(({ id, onHide, tab = UserSettingsTab.UserInfo }: U
     setActiveTab(tab);
   }, []);
 
-  const [showNotificationSettingsTab, showSlackConnectionTab, showTelegramConnectionTab, showMobileAppConnectionTab] = [
+  const [
+    showNotificationSettingsTab,
+    showSlackConnectionTab,
+    showTelegramConnectionTab,
+    showMobileAppConnectionTab,
+    showMsTeamsConnectionTab,
+  ] = [
     !isDesktopOrLaptop,
     isCurrent && organizationStore.currentOrganization?.slack_team_identity && !storeUser.slack_user_identity,
     isCurrent && store.hasFeature(AppFeature.Telegram) && !storeUser.telegram_configuration,
     isCurrent,
+    store.hasFeature(AppFeature.MsTeams),
   ];
 
   const title = (
@@ -73,6 +80,7 @@ const UserSettings = observer(({ id, onHide, tab = UserSettingsTab.UserInfo }: U
             showSlackConnectionTab={showSlackConnectionTab}
             showTelegramConnectionTab={showTelegramConnectionTab}
             showMobileAppConnectionTab={showMobileAppConnectionTab}
+            showMsTeamsConnectionTab={showMsTeamsConnectionTab}
           />
           <TabsContent id={id} activeTab={activeTab} onTabChange={onTabChange} isDesktopOrLaptop={isDesktopOrLaptop} />
         </div>
diff --git a/grafana-plugin/src/containers/UserSettings/UserSettings.types.ts b/grafana-plugin/src/containers/UserSettings/UserSettings.types.ts
index e3c34ae2..eb29b95f 100644
--- a/grafana-plugin/src/containers/UserSettings/UserSettings.types.ts
+++ b/grafana-plugin/src/containers/UserSettings/UserSettings.types.ts
@@ -1,15 +1,9 @@
-import { User } from 'models/user/user.types';
-
 export enum UserSettingsTab {
   UserInfo,
   NotificationSettings,
   PhoneVerification,
   SlackInfo,
   TelegramInfo,
+  MSTeamsInfo,
   MobileAppConnection,
 }
-
-export interface UserFormData extends Partial<User> {
-  slack_user_identity_name?: string;
-  telegram_configuration_telegram_nick_name?: string;
-}
diff --git a/grafana-plugin/src/containers/UserSettings/parts/connectors/MSTeamsConnector.tsx b/grafana-plugin/src/containers/UserSettings/parts/connectors/MSTeamsConnector.tsx
new file mode 100644
index 00000000..4094f3ec
--- /dev/null
+++ b/grafana-plugin/src/containers/UserSettings/parts/connectors/MSTeamsConnector.tsx
@@ -0,0 +1,67 @@
+import React, { useCallback } from 'react';
+
+import { Button, HorizontalGroup, InlineField, Input } from '@grafana/ui';
+import cn from 'classnames/bind';
+import { observer } from 'mobx-react';
+
+import WithConfirm from 'components/WithConfirm/WithConfirm';
+import { UserSettingsTab } from 'containers/UserSettings/UserSettings.types';
+import { User } from 'models/user/user.types';
+import { useStore } from 'state/useStore';
+
+import styles from 'containers/UserSettings/parts/connectors/index.module.css';
+
+const cx = cn.bind(styles);
+
+interface MSTeamsConnectorProps {
+  id: User['pk'];
+  onTabChange: (tab: UserSettingsTab) => void;
+}
+
+const MSTeamsConnector = observer((props: MSTeamsConnectorProps) => {
+  const { id, onTabChange } = props;
+
+  const store = useStore();
+  const { userStore } = store;
+
+  const storeUser = userStore.items[id];
+
+  const isCurrentUser = id === store.userStore.currentUserPk;
+
+  const handleConnectButtonClick = useCallback(() => {
+    onTabChange(UserSettingsTab.MSTeamsInfo);
+  }, []);
+
+  const handleUnlinkMSTeamsAccount = useCallback(() => {
+    userStore.unlinkBackend(id, 'MSTEAMS');
+  }, []);
+
+  return (
+    <div className={cx('user-item')}>
+      {storeUser.messaging_backends.MSTEAMS ? (
+        <InlineField label="MS Teams" labelWidth={12}>
+          <HorizontalGroup spacing="xs">
+            <Input disabled={true} value={storeUser.messaging_backends.MSTEAMS?.name || '—'} />
+            <WithConfirm title="Are you sure to disconnect your Microsoft Teams account?" confirmText="Disconnect">
+              <Button
+                disabled={!isCurrentUser}
+                variant="destructive"
+                icon="times"
+                onClick={handleUnlinkMSTeamsAccount}
+                tooltip={'Unlink MS Teams Account'}
+              />
+            </WithConfirm>
+          </HorizontalGroup>
+        </InlineField>
+      ) : (
+        <div>
+          <InlineField label="MS Teams" labelWidth={12} disabled={!isCurrentUser}>
+            <Button onClick={handleConnectButtonClick}>Connect account</Button>
+          </InlineField>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default MSTeamsConnector;
diff --git a/grafana-plugin/src/containers/UserSettings/parts/connectors/index.tsx b/grafana-plugin/src/containers/UserSettings/parts/connectors/index.tsx
index 5e65b3cd..a96596bc 100644
--- a/grafana-plugin/src/containers/UserSettings/parts/connectors/index.tsx
+++ b/grafana-plugin/src/containers/UserSettings/parts/connectors/index.tsx
@@ -8,6 +8,7 @@ import { AppFeature } from 'state/features';
 import { useStore } from 'state/useStore';
 
 import ICalConnector from './ICalConnector';
+import MSTeamsConnector from './MSTeamsConnector';
 import MobileAppConnector from './MobileAppConnector';
 import PhoneConnector from './PhoneConnector';
 import SlackConnector from './SlackConnector';
@@ -26,6 +27,7 @@ export const Connectors: FC<ConnectorsProps> = (props) => {
       <MobileAppConnector {...props} />
       <SlackConnector {...props} />
       {store.hasFeature(AppFeature.Telegram) && <TelegramConnector {...props} />}
+      {store.hasFeature(AppFeature.MsTeams) && <MSTeamsConnector {...props} />}
       <Legend>Calendar export</Legend>
       <ICalConnector {...props} />
     </>
diff --git a/grafana-plugin/src/containers/UserSettings/parts/index.tsx b/grafana-plugin/src/containers/UserSettings/parts/index.tsx
index 9007a3e7..0517470d 100644
--- a/grafana-plugin/src/containers/UserSettings/parts/index.tsx
+++ b/grafana-plugin/src/containers/UserSettings/parts/index.tsx
@@ -8,6 +8,8 @@ import Block from 'components/GBlock/Block';
 import MobileAppConnection from 'containers/MobileAppConnection/MobileAppConnection';
 import { UserSettingsTab } from 'containers/UserSettings/UserSettings.types';
 import { SlackTab } from 'containers/UserSettings/parts/tabs//SlackTab/SlackTab';
+import CloudPhoneSettings from 'containers/UserSettings/parts/tabs/CloudPhoneSettings/CloudPhoneSettings';
+import MSTeamsInfo from 'containers/UserSettings/parts/tabs/MSTeamsInfo/MSTeamsInfo';
 import { NotificationSettingsTab } from 'containers/UserSettings/parts/tabs/NotificationSettingsTab';
 import PhoneVerification from 'containers/UserSettings/parts/tabs/PhoneVerification/PhoneVerification';
 import TelegramInfo from 'containers/UserSettings/parts/tabs/TelegramInfo/TelegramInfo';
@@ -16,8 +18,6 @@ import { User } from 'models/user/user.types';
 import { AppFeature } from 'state/features';
 import { useStore } from 'state/useStore';
 
-import CloudPhoneSettings from './tabs/CloudPhoneSettings/CloudPhoneSettings';
-
 import styles from 'containers/UserSettings/parts/index.module.css';
 
 const cx = cn.bind(styles);
@@ -29,6 +29,7 @@ interface TabsProps {
   showMobileAppConnectionTab: boolean;
   showSlackConnectionTab: boolean;
   showTelegramConnectionTab: boolean;
+  showMsTeamsConnectionTab: boolean;
 }
 
 export const Tabs = ({
@@ -38,6 +39,7 @@ export const Tabs = ({
   showMobileAppConnectionTab,
   showSlackConnectionTab,
   showTelegramConnectionTab,
+  showMsTeamsConnectionTab,
 }: TabsProps) => {
   const getTabClickHandler = useCallback(
     (tab: UserSettingsTab) => {
@@ -100,6 +102,15 @@ export const Tabs = ({
           data-testid="tab-telegram"
         />
       )}
+      {showMsTeamsConnectionTab && (
+        <Tab
+          active={activeTab === UserSettingsTab.MSTeamsInfo}
+          label="Ms Teams Connection"
+          key={UserSettingsTab.MSTeamsInfo}
+          onChangeTab={getTabClickHandler(UserSettingsTab.MSTeamsInfo)}
+          data-testid="tab-msteams"
+        />
+      )}
     </TabsBar>
   );
 };
@@ -143,6 +154,7 @@ export const TabsContent = observer(({ id, activeTab, onTabChange, isDesktopOrLa
       {activeTab === UserSettingsTab.MobileAppConnection && <MobileAppConnection userPk={id} />}
       {activeTab === UserSettingsTab.SlackInfo && <SlackTab />}
       {activeTab === UserSettingsTab.TelegramInfo && <TelegramInfo />}
+      {activeTab === UserSettingsTab.MSTeamsInfo && <MSTeamsInfo />}
     </TabContent>
   );
 });
diff --git a/grafana-plugin/src/containers/UserSettings/parts/tabs/MSTeamsInfo/MSTeamsInfo.module.css b/grafana-plugin/src/containers/UserSettings/parts/tabs/MSTeamsInfo/MSTeamsInfo.module.css
new file mode 100644
index 00000000..964c4c65
--- /dev/null
+++ b/grafana-plugin/src/containers/UserSettings/parts/tabs/MSTeamsInfo/MSTeamsInfo.module.css
@@ -0,0 +1,12 @@
+.verification-code {
+  color: var(--primary-text-link);
+}
+
+.verification-code-text {
+  display: flex;
+  justify-content: space-between;
+}
+
+.heading {
+  margin-bottom: 24px;
+}
diff --git a/grafana-plugin/src/containers/UserSettings/parts/tabs/MSTeamsInfo/MSTeamsInfo.tsx b/grafana-plugin/src/containers/UserSettings/parts/tabs/MSTeamsInfo/MSTeamsInfo.tsx
new file mode 100644
index 00000000..942f53a2
--- /dev/null
+++ b/grafana-plugin/src/containers/UserSettings/parts/tabs/MSTeamsInfo/MSTeamsInfo.tsx
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+
+import cn from 'classnames/bind';
+import { observer } from 'mobx-react';
+
+import Text from 'components/Text/Text';
+import MSTeamsInstructions from 'containers/MSTeams/MSTeamsInstructions';
+import { useStore } from 'state/useStore';
+
+import styles from 'containers/UserSettings/parts/tabs/MSTeamsInfo/MSTeamsInfo.module.css';
+
+const cx = cn.bind(styles);
+
+const MSTeamsInfo = observer(() => {
+  const { userStore, msteamsChannelStore } = useStore();
+
+  const [verificationCode, setVerificationCode] = useState<string>();
+  const [onCallisAdded, setOnCallisAdded] = useState(false);
+
+  useEffect(() => {
+    userStore.sendBackendConfirmationCode(userStore.currentUserPk, 'MSTEAMS').then(setVerificationCode);
+    msteamsChannelStore.updateItems().then(() => {
+      const connectedChannels = msteamsChannelStore.getSearchResult();
+      if (connectedChannels?.length) {
+        setOnCallisAdded(true);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      userStore.loadCurrentUser();
+    };
+  }, []);
+
+  return (
+    <>
+      <Text.Title level={2} className={cx('heading')}>
+        Connect MS Teams workspace
+      </Text.Title>
+      <MSTeamsInstructions
+        personalSettings
+        onCallisAdded={onCallisAdded}
+        showInfoBox
+        verificationCode={verificationCode}
+      />
+    </>
+  );
+});
+
+export default MSTeamsInfo;
diff --git a/grafana-plugin/src/icons/MSTeamsLogo.tsx b/grafana-plugin/src/icons/MSTeamsLogo.tsx
new file mode 100644
index 00000000..21bb7b31
--- /dev/null
+++ b/grafana-plugin/src/icons/MSTeamsLogo.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+
+const MSTeamsLogo = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2228.833 2073.333">
+    <path
+      fill="#5059C9"
+      d="M1554.637,777.5h575.713c54.391,0,98.483,44.092,98.483,98.483c0,0,0,0,0,0v524.398	c0,199.901-162.051,361.952-361.952,361.952h0h-1.711c-199.901,0.028-361.975-162-362.004-361.901c0-0.017,0-0.034,0-0.052V828.971	C1503.167,800.544,1526.211,777.5,1554.637,777.5L1554.637,777.5z"
+    />
+    <circle fill="#5059C9" cx="1943.75" cy="440.583" r="233.25" />
+    <circle fill="#7B83EB" cx="1218.083" cy="336.917" r="336.917" />
+    <path
+      fill="#7B83EB"
+      d="M1667.323,777.5H717.01c-53.743,1.33-96.257,45.931-95.01,99.676v598.105	c-7.505,322.519,247.657,590.16,570.167,598.053c322.51-7.893,577.671-275.534,570.167-598.053V877.176	C1763.579,823.431,1721.066,778.83,1667.323,777.5z"
+    />
+    <path
+      opacity=".1"
+      d="M1244,777.5v838.145c-0.258,38.435-23.549,72.964-59.09,87.598	c-11.316,4.787-23.478,7.254-35.765,7.257H667.613c-6.738-17.105-12.958-34.21-18.142-51.833	c-18.144-59.477-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1244z"
+    />
+    <path
+      opacity=".2"
+      d="M1192.167,777.5v889.978c-0.002,12.287-2.47,24.449-7.257,35.765	c-14.634,35.541-49.163,58.833-87.598,59.09H691.975c-8.812-17.105-17.105-34.21-24.362-51.833	c-7.257-17.623-12.958-34.21-18.142-51.833c-18.144-59.476-27.402-121.307-27.472-183.49V877.02	c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z"
+    />
+    <path
+      opacity=".2"
+      d="M1192.167,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855h-447.84	c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z"
+    />
+    <path
+      opacity=".2"
+      d="M1140.333,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855H649.472	c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1140.333z"
+    />
+    <path
+      opacity=".1"
+      d="M1244,509.522v163.275c-8.812,0.518-17.105,1.037-25.917,1.037	c-8.812,0-17.105-0.518-25.917-1.037c-17.496-1.161-34.848-3.937-51.833-8.293c-104.963-24.857-191.679-98.469-233.25-198.003	c-7.153-16.715-12.706-34.071-16.587-51.833h258.648C1201.449,414.866,1243.801,457.217,1244,509.522z"
+    />
+    <path
+      opacity=".2"
+      d="M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293	c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z"
+    />
+    <path
+      opacity=".2"
+      d="M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293	c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z"
+    />
+    <path
+      opacity=".2"
+      d="M1140.333,561.355v103.148c-104.963-24.857-191.679-98.469-233.25-198.003	h138.395C1097.783,466.699,1140.134,509.051,1140.333,561.355z"
+    />
+    <linearGradient
+      id="a"
+      gradientUnits="userSpaceOnUse"
+      x1="198.099"
+      y1="1683.0726"
+      x2="942.2344"
+      y2="394.2607"
+      gradientTransform="matrix(1 0 0 -1 0 2075.3333)"
+    >
+      <stop offset="0" stopColor="#5a62c3" />
+      <stop offset=".5" stopColor="#4d55bd" />
+      <stop offset="1" stopColor="#3940ab" />
+    </linearGradient>
+    <path
+      fill="url(#a)"
+      d="M95.01,466.5h950.312c52.473,0,95.01,42.538,95.01,95.01v950.312c0,52.473-42.538,95.01-95.01,95.01	H95.01c-52.473,0-95.01-42.538-95.01-95.01V561.51C0,509.038,42.538,466.5,95.01,466.5z"
+    />
+    <path fill="#FFF" d="M820.211,828.193H630.241v517.297H509.211V828.193H320.123V727.844h500.088V828.193z" />
+  </svg>
+);
+
+export default MSTeamsLogo;
diff --git a/grafana-plugin/src/icons/MachineLearningLogo.tsx b/grafana-plugin/src/icons/MachineLearningLogo.tsx
new file mode 100644
index 00000000..4d8decf9
--- /dev/null
+++ b/grafana-plugin/src/icons/MachineLearningLogo.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+const MachineLearningLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 135.46 118.24"
+    width="40px"
+    height="40px"
+  >
+    <defs>
+      <style>{'.cls-1{fill:url(#linear-gradient);}'}</style>
+      <linearGradient id="linear-gradient" x1="67.73" y1="137.67" x2="67.73" y2="-0.38" gradientUnits="userSpaceOnUse">
+        <stop offset="0" stopColor="#f9ea1c" />
+        <stop offset="1" stopColor="#ed5a29" />
+      </linearGradient>
+    </defs>
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          className="cls-1"
+          d="M135.37,64.86l-5.6-26.43a4.05,4.05,0,0,0-.9-1.82L113.19,18.24a4.11,4.11,0,0,0-1-.87L83.71.57A4.18,4.18,0,0,0,81.62,0H58.54a4.19,4.19,0,0,0-1,.12L26,8a4.16,4.16,0,0,0-2,1.17L1.12,33.32A4.1,4.1,0,0,0,0,36.14v24.2A4.1,4.1,0,0,0,2.46,64.1l22.85,10L39,95.07a4.13,4.13,0,0,0,3.45,1.86H68.66L81.59,116.4A4.09,4.09,0,0,0,85,118.24h0l6,0a4.11,4.11,0,0,0,4.09-4.11V90.21H117a4.09,4.09,0,0,0,3.36-1.75l14.34-20.38A4.1,4.1,0,0,0,135.37,64.86ZM86.12,34.1a3.29,3.29,0,0,0-.67.77l0,.05H59.83L57,30.53A3.38,3.38,0,0,0,54.24,29a3.45,3.45,0,0,0-2.86,1.45l-3.15,4.51H10.92L21.64,23.58H98.3Zm-3,4.52L72.77,55.23,62.19,38.62ZM37.75,50H8.22V38.62H45.66ZM29.12,15.65,59.05,8.22H80.49l19.74,11.66H25.13Zm-20.9,38h27L26.73,65.78,8.22,57.65ZM114.87,82h-4V46.21a2.3,2.3,0,0,0-2.3-2.3h-1.39a2.3,2.3,0,0,0-2.3,2.3V82h-12V63.92a2.31,2.31,0,0,0-2.3-2.31H89.21a2.31,2.31,0,0,0-2.3,2.31v45.64L74.48,90.84V78.36a2.3,2.3,0,0,0-2.3-2.3H70.79a2.3,2.3,0,0,0-2.3,2.3V88.71H56.23V58.54a2.32,2.32,0,0,0-2.31-2.31H52.54a2.32,2.32,0,0,0-2.31,2.31V88.71H44.64l-12.39-19L53.93,38.62h.21l15.8,24.81A3.32,3.32,0,0,0,72.82,65a3.39,3.39,0,0,0,2.87-1.6L91,38.9l16.73-14.45,14.26,16.7,5,23.66Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default MachineLearningLogo;
diff --git a/grafana-plugin/src/models/msteams_channel/msteams_channel.ts b/grafana-plugin/src/models/msteams_channel/msteams_channel.ts
new file mode 100644
index 00000000..f28d76aa
--- /dev/null
+++ b/grafana-plugin/src/models/msteams_channel/msteams_channel.ts
@@ -0,0 +1,126 @@
+import { action, computed, observable, makeObservable, runInAction } from 'mobx';
+
+import BaseStore from 'models/base_store';
+import { makeRequest } from 'network';
+import { RootStore } from 'state';
+
+import { MSTeamsChannel } from './msteams_channel.types';
+
+export class MSTeamsChannelStore extends BaseStore {
+  @observable.shallow
+  items: { [id: string]: MSTeamsChannel } = {};
+
+  @observable
+  currentTeamToMSTeamsChannel?: Array<MSTeamsChannel['id']>;
+
+  @observable.shallow
+  searchResult: { [key: string]: Array<MSTeamsChannel['id']> } = {};
+
+  private autoUpdateTimer?: ReturnType<typeof setTimeout>;
+
+  constructor(rootStore: RootStore) {
+    super(rootStore);
+
+    makeObservable(this);
+
+    this.path = '/msteams/channels/';
+  }
+
+  @action
+  async updateMSTeamsChannels() {
+    const response = await makeRequest(this.path, {});
+
+    const items = response.reduce(
+      (acc: any, msteamsChannel: MSTeamsChannel) => ({
+        ...acc,
+        [msteamsChannel.id]: msteamsChannel,
+      }),
+      {}
+    );
+
+    runInAction(() => {
+      this.items = {
+        ...this.items,
+        ...items,
+      };
+
+      this.currentTeamToMSTeamsChannel = response.map((msteamsChannel: MSTeamsChannel) => msteamsChannel.id);
+    });
+  }
+
+  @action
+  async updateById(id: MSTeamsChannel['id']) {
+    const response = await this.getById(id);
+
+    runInAction(() => {
+      this.items = {
+        ...this.items,
+        [id]: response,
+      };
+    });
+  }
+
+  @action
+  async updateItems(query = '') {
+    const result = await this.getAll();
+
+    runInAction(() => {
+      this.items = {
+        ...this.items,
+        ...result.reduce(
+          (acc: { [key: number]: MSTeamsChannel }, item: MSTeamsChannel) => ({
+            ...acc,
+            [item.id]: item,
+          }),
+          {}
+        ),
+      };
+
+      this.searchResult = {
+        ...this.searchResult,
+        [query]: result.map((item: MSTeamsChannel) => item.id),
+      };
+    });
+  }
+
+  getSearchResult(query = '') {
+    if (!this.searchResult[query]) {
+      return undefined;
+    }
+    return this.searchResult[query].map((msteamsChannelId: MSTeamsChannel['id']) => this.items[msteamsChannelId]);
+  }
+
+  @computed
+  get hasItems() {
+    return Boolean(this.getSearchResult('')?.length);
+  }
+
+  async startAutoUpdate() {
+    this.autoUpdateTimer = setInterval(this.updateMSTeamsChannels.bind(this), 3000);
+  }
+
+  async stopAutoUpdate() {
+    if (this.autoUpdateTimer) {
+      clearInterval(this.autoUpdateTimer);
+    }
+  }
+
+  async getMSTeamsChannelVerificationCode() {
+    return await makeRequest(`/current_team/get_channel_verification_code/?backend=MSTEAMS`, {
+      withCredentials: true,
+    });
+  }
+
+  async makeMSTeamsChannelDefault(id: MSTeamsChannel['id']) {
+    return makeRequest(`/msteams/channels/${id}/set_default/`, {
+      method: 'POST',
+    });
+  }
+  async deleteMSTeamsChannel(id: MSTeamsChannel['id']) {
+    return super.delete(id);
+  }
+
+  async getMSTeamsChannels() {
+    return super.getAll();
+  }
+}
diff --git a/grafana-plugin/src/models/msteams_channel/msteams_channel.types.ts b/grafana-plugin/src/models/msteams_channel/msteams_channel.types.ts
new file mode 100644
index 00000000..79d8377c
--- /dev/null
+++ b/grafana-plugin/src/models/msteams_channel/msteams_channel.types.ts
@@ -0,0 +1,9 @@
+// TODO check backend response to verify data shape
+
+export interface MSTeamsChannel {
+  id: string;
+  name: string;
+  display_name: string;
+  team: string;
+  is_default: false;
+}
diff --git a/grafana-plugin/src/pages/integration/Integration.config.ts b/grafana-plugin/src/pages/integration/Integration.config.ts
index 34967023..62201a0f 100644
--- a/grafana-plugin/src/pages/integration/Integration.config.ts
+++ b/grafana-plugin/src/pages/integration/Integration.config.ts
@@ -1,14 +1,50 @@
-/*
-  [oncall-private]
-  Any change to this file needs to be done in the oncall-private also
-*/
+import { AppFeature } from 'state/features';
+import { KeyValuePair } from 'utils';
 
 import { BASE_INTEGRATION_TEMPLATES_LIST, BaseTemplateOptions } from './IntegrationCommon.config';
 
-export const TemplateOptions = {
-  ...BaseTemplateOptions,
+export const MsTeamsTemplateOptions = {
+  MSTeams: new KeyValuePair('Microsoft Teams', 'Microsoft Teams'),
+  MSTeamsTitle: new KeyValuePair('MSTeams Title', 'Title'),
+  MSTeamsMessage: new KeyValuePair('MSTeams Message', 'Message'),
+  MSTeamsImage: new KeyValuePair('MSTeams Image', 'Image'),
 };
 
-export const INTEGRATION_TEMPLATES_LIST = {
-  ...BASE_INTEGRATION_TEMPLATES_LIST,
+export const getTemplateOptions = (features: Record<string, boolean>) => {
+  if (features[AppFeature.MsTeams]) {
+    return {
+      ...BaseTemplateOptions,
+      ...MsTeamsTemplateOptions,
+    };
+  }
+  return BaseTemplateOptions;
+};
+
+export const getIntegrationTemplatesList = (features: Record<string, boolean>) => {
+  if (features[AppFeature.MsTeams]) {
+    return [
+      ...BASE_INTEGRATION_TEMPLATES_LIST,
+
+      {
+        label: MsTeamsTemplateOptions.MSTeams.value,
+        value: MsTeamsTemplateOptions.MSTeams.key,
+        children: [
+          {
+            label: MsTeamsTemplateOptions.MSTeamsTitle.value,
+            value: MsTeamsTemplateOptions.MSTeamsTitle.key,
+          },
+          {
+            label: MsTeamsTemplateOptions.MSTeamsMessage.value,
+            value: MsTeamsTemplateOptions.MSTeamsMessage.key,
+          },
+          {
+            label: MsTeamsTemplateOptions.MSTeamsImage.value,
+            value: MsTeamsTemplateOptions.MSTeamsImage.key,
+          },
+        ],
+      },
+    ];
+  }
+
+  return BASE_INTEGRATION_TEMPLATES_LIST;
 };
diff --git a/grafana-plugin/src/pages/integration/Integration.helper.ts b/grafana-plugin/src/pages/integration/Integration.helper.ts
index b8c3080b..0b44f8a6 100644
--- a/grafana-plugin/src/pages/integration/Integration.helper.ts
+++ b/grafana-plugin/src/pages/integration/Integration.helper.ts
@@ -1,8 +1,3 @@
-/*
-  [oncall-private]
-  Any change to this file needs to be done in the oncall-private also
-*/
-
 import { IconName } from '@grafana/ui';
 import dayjs from 'dayjs';
 
@@ -66,24 +61,28 @@ const IntegrationHelper = {
     return totalDiffString;
   },
 
-  fetchChatOps(_store: RootStore): Promise<void> {
-    // in oncall-private this fetches MSTeams data
-    return Promise.resolve();
-  },
-
   hasChatopsInstalled(store: RootStore) {
     const hasSlack = Boolean(store.organizationStore.currentOrganization?.slack_team_identity);
     const hasTelegram =
       store.hasFeature(AppFeature.Telegram) && store.telegramChannelStore.currentTeamToTelegramChannel?.length > 0;
-    return hasSlack || hasTelegram;
+    const isMSTeamsInstalled = Boolean(store.msteamsChannelStore.currentTeamToMSTeamsChannel?.length > 0);
+
+    return hasSlack || hasTelegram || isMSTeamsInstalled;
+  },
+
+  fetchChatOps(store: RootStore): Promise<void> {
+    return store.msteamsChannelStore.updateMSTeamsChannels();
   },
 
   getChatOpsChannels(channelFilter: ChannelFilter, store: RootStore): Array<{ name: string; icon: IconName }> {
     const channels: Array<{ name: string; icon: IconName }> = [];
+    const telegram = Object.keys(store.telegramChannelStore.items).map((k) => store.telegramChannelStore.items[k]);
 
     if (store.hasFeature(AppFeature.Slack) && channelFilter.notify_in_slack) {
-      const matchingSlackChannel = store.organizationStore.currentOrganization?.slack_channel?.id
-        ? store.slackChannelStore.items[store.organizationStore.currentOrganization.slack_channel?.id]
+      const { currentOrganization } = store.organizationStore;
+
+      const matchingSlackChannel = currentOrganization?.slack_channel?.id
+        ? store.slackChannelStore.items[currentOrganization.slack_channel?.id]
         : undefined;
       if (channelFilter.slack_channel?.display_name || matchingSlackChannel?.display_name) {
         channels.push({
@@ -93,12 +92,32 @@ const IntegrationHelper = {
       }
     }
 
+    const matchingTelegram = telegram.find((t) => t.id === channelFilter.telegram_channel);
+
     if (
       store.hasFeature(AppFeature.Telegram) &&
-      channelFilter.telegram_channel_details &&
-      channelFilter.notify_in_telegram
+      channelFilter.telegram_channel &&
+      channelFilter.notify_in_telegram &&
+      matchingTelegram?.channel_name
     ) {
-      channels.push({ name: channelFilter.telegram_channel_details.display_name, icon: 'telegram-alt' });
+      channels.push({
+        name: matchingTelegram.channel_name,
+        icon: 'telegram-alt',
+      });
+    }
+
+    const { notification_backends } = channelFilter;
+    const msteamsChannels = store.msteamsChannelStore.items;
+
+    if (
+      notification_backends?.MSTEAMS &&
+      notification_backends?.MSTEAMS.enabled &&
+      msteamsChannels[notification_backends.MSTEAMS.channel]
+    ) {
+      channels.push({
+        name: msteamsChannels[notification_backends.MSTEAMS.channel].display_name,
+        icon: 'microsoft',
+      });
     }
 
     return channels;
diff --git a/grafana-plugin/src/pages/integration/Integration.tsx b/grafana-plugin/src/pages/integration/Integration.tsx
index c02ceb59..abf37e2b 100644
--- a/grafana-plugin/src/pages/integration/Integration.tsx
+++ b/grafana-plugin/src/pages/integration/Integration.tsx
@@ -7,7 +7,6 @@ import {
   VerticalGroup,
   Icon,
   LoadingPlaceholder,
-  CascaderOption,
   IconButton,
   ConfirmModal,
   Drawer,
@@ -20,7 +19,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import Emoji from 'react-emoji-render';
 import { RouteComponentProps, useHistory, withRouter } from 'react-router-dom';
 
-import { templateForEdit } from 'components/AlertTemplates/AlertTemplatesForm.config';
+import { getTemplatesForEdit } from 'components/AlertTemplates/AlertTemplatesForm.config';
 import { TemplateForEdit } from 'components/AlertTemplates/CommonAlertTemplatesForm.config';
 import HamburgerMenu from 'components/HamburgerMenu/HamburgerMenu';
 import IntegrationCollapsibleTreeView, {
@@ -58,7 +57,6 @@ import {
 } from 'models/alert_receive_channel/alert_receive_channel.types';
 import { AlertTemplatesDTO } from 'models/alert_templates/alert_templates';
 import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
-import { INTEGRATION_TEMPLATES_LIST } from 'pages/integration/Integration.config';
 import IntegrationHelper from 'pages/integration/Integration.helper';
 import styles from 'pages/integration/Integration.module.scss';
 import { AppFeature } from 'state/features';
@@ -648,9 +646,11 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
       });
   };
 
-  getTemplatesList = (): CascaderOption[] => INTEGRATION_TEMPLATES_LIST;
-
   openEditTemplateModal = (templateName, channelFilterId?: ChannelFilter['id']) => {
+    const { store } = this.props;
+
+    const templateForEdit = getTemplatesForEdit(store.features);
+
     if (templateForEdit[templateName]) {
       this.setState({
         isEditTemplateModalOpen: true,
diff --git a/grafana-plugin/src/pages/settings/tabs/ChatOps/ChatOps.tsx b/grafana-plugin/src/pages/settings/tabs/ChatOps/ChatOps.tsx
index c4cb87b7..146de23e 100644
--- a/grafana-plugin/src/pages/settings/tabs/ChatOps/ChatOps.tsx
+++ b/grafana-plugin/src/pages/settings/tabs/ChatOps/ChatOps.tsx
@@ -6,6 +6,7 @@ import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
 import VerticalTabsBar, { VerticalTab } from 'components/VerticalTabsBar/VerticalTabsBar';
+import MSTeamsSettings from 'pages/settings/tabs/ChatOps/tabs/MSTeamsSettings/MSTeamsSettings';
 import SlackSettings from 'pages/settings/tabs/ChatOps/tabs/SlackSettings/SlackSettings';
 import TelegramSettings from 'pages/settings/tabs/ChatOps/tabs/TelegramSettings/TelegramSettings';
 import { AppFeature } from 'state/features';
@@ -21,6 +22,7 @@ const cx = cn.bind(styles);
 export enum ChatOpsTab {
   Slack = 'Slack',
   Telegram = 'Telegram',
+  MSTeams = 'MSTeams',
 }
 interface ChatOpsProps extends AppRootProps, WithStoreProps {}
 interface ChatOpsState {
@@ -83,7 +85,11 @@ class ChatOpsPage extends React.Component<ChatOpsProps, ChatOpsState> {
 
   isChatOpsConfigured(): boolean {
     const { store } = this.props;
-    return store.hasFeature(AppFeature.Slack) || store.hasFeature(AppFeature.Telegram);
+    return (
+      store.hasFeature(AppFeature.Slack) ||
+      store.hasFeature(AppFeature.Telegram) ||
+      store.hasFeature(AppFeature.MsTeams)
+    );
   }
 
   handleChatopsTabChange(tab: ChatOpsTab) {
@@ -122,6 +128,14 @@ const Tabs = (props: TabsProps) => {
           </HorizontalGroup>
         </VerticalTab>
       )}
+      {store.hasFeature(AppFeature.MsTeams) && (
+        <VerticalTab id={ChatOpsTab.MSTeams}>
+          <HorizontalGroup>
+            <Icon name="microsoft" />
+            Microsoft Teams
+          </HorizontalGroup>
+        </VerticalTab>
+      )}
     </VerticalTabsBar>
   );
 };
@@ -146,6 +160,11 @@ const TabsContent = (props: TabsContentProps) => {
           <TelegramSettings />
         </div>
       )}
+      {store.hasFeature(AppFeature.MsTeams) && activeTab === ChatOpsTab.MSTeams && (
+        <div className={cx('messenger-settings')}>
+          <MSTeamsSettings />
+        </div>
+      )}
     </>
   );
 };
diff --git a/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/MSTeamsSettings/MSTeamsSettings.module.css b/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/MSTeamsSettings/MSTeamsSettings.module.css
new file mode 100644
index 00000000..837f409b
--- /dev/null
+++ b/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/MSTeamsSettings/MSTeamsSettings.module.css
@@ -0,0 +1,8 @@
+.root {
+  display: block;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/MSTeamsSettings/MSTeamsSettings.tsx b/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/MSTeamsSettings/MSTeamsSettings.tsx
new file mode 100644
index 00000000..ca7978ca
--- /dev/null
+++ b/grafana-plugin/src/pages/settings/tabs/ChatOps/tabs/MSTeamsSettings/MSTeamsSettings.tsx
@@ -0,0 +1,147 @@
+import React, { Component } from 'react';
+
+import { Button, HorizontalGroup, LoadingPlaceholder, Badge } from '@grafana/ui';
+import cn from 'classnames/bind';
+import { observer } from 'mobx-react';
+
+import GTable from 'components/GTable/GTable';
+import Text from 'components/Text/Text';
+import WithConfirm from 'components/WithConfirm/WithConfirm';
+import MSTeamsInstructions from 'containers/MSTeams/MSTeamsInstructions';
+import MSTeamsIntegrationButton from 'containers/MSTeamsIntegrationButton/MSTeamsIntegrationButton';
+import { MSTeamsChannel } from 'models/msteams_channel/msteams_channel.types';
+import { WithStoreProps } from 'state/types';
+import { withMobXProviderContext } from 'state/withStore';
+
+import styles from 'pages/settings/tabs/ChatOps/tabs/MSTeamsSettings/MSTeamsSettings.module.css';
+
+const cx = cn.bind(styles);
+
+interface MSTeamsProps extends WithStoreProps {}
+
+interface MSTeamsState {
+  verificationCode: string;
+}
+
+@observer
+class MSTeamsSettings extends Component<MSTeamsProps, MSTeamsState> {
+  state: MSTeamsState = {
+    verificationCode: '',
+  };
+
+  componentDidMount() {
+    this.update();
+  }
+
+  update = () => {
+    const { store } = this.props;
+    store.msteamsChannelStore.getMSTeamsChannelVerificationCode().then((data) => {
+      this.setState({ verificationCode: data });
+    });
+    store.msteamsChannelStore.updateItems();
+  };
+
+  render() {
+    const { store } = this.props;
+    const { msteamsChannelStore } = store;
+    const { verificationCode } = this.state;
+
+    const connectedChannels = msteamsChannelStore.getSearchResult();
+
+    if (!connectedChannels) {
+      return <LoadingPlaceholder text="Loading..." />;
+    }
+
+    if (!connectedChannels.length) {
+      return (
+        <>
+          <MSTeamsInstructions showInfoBox verificationCode={verificationCode} />
+        </>
+      );
+    }
+
+    const columns = [
+      {
+        width: '40%',
+        title: 'Team',
+        dataIndex: 'team',
+      },
+      {
+        width: '30%',
+        title: 'Channel name',
+        render: this.renderDefaultBadge,
+      },
+      {
+        width: '30%',
+        key: 'action',
+        render: this.renderActionButtons,
+      },
+    ];
+    return (
+      <div>
+        {connectedChannels && (
+          <div className={cx('root')}>
+            <GTable
+              title={() => (
+                <div className={cx('header')}>
+                  <Text.Title level={3}>Microsoft Teams Channels</Text.Title>
+                  <MSTeamsIntegrationButton onUpdate={this.update} />
+                </div>
+              )}
+              emptyText={connectedChannels ? 'No Microsoft Teams channels connected' : 'Loading...'}
+              rowKey="id"
+              columns={columns}
+              data={connectedChannels}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  renderActionButtons = (record: MSTeamsChannel) => {
+    return (
+      <HorizontalGroup justify="flex-end">
+        <Button
+          onClick={() => this.setChannelAsDefault(record.id)}
+          disabled={record.is_default}
+          fill="outline"
+          size="sm"
+        >
+          Make default
+        </Button>
+        <WithConfirm title="Are you sure to disconnect?">
+          <Button onClick={() => this.unsetChannelAsDefault(record.id)} fill="outline" variant="destructive" size="sm">
+            Disconnect
+          </Button>
+        </WithConfirm>
+      </HorizontalGroup>
+    );
+  };
+
+  renderDefaultBadge = (record: MSTeamsChannel) => {
+    return (
+      <>
+        {record.name} {record.is_default && <Badge text="Default" color="green" />}
+      </>
+    );
+  };
+
+  setChannelAsDefault = async (id: MSTeamsChannel['id']) => {
+    const { store } = this.props;
+    const { msteamsChannelStore } = store;
+
+    await msteamsChannelStore.makeMSTeamsChannelDefault(id);
+    msteamsChannelStore.updateItems();
+  };
+
+  unsetChannelAsDefault = async (id: MSTeamsChannel['id']) => {
+    const { store } = this.props;
+    const { msteamsChannelStore } = store;
+
+    await msteamsChannelStore.deleteMSTeamsChannel(id);
+    msteamsChannelStore.updateItems();
+  };
+}
+
+export default withMobXProviderContext(MSTeamsSettings);
diff --git a/grafana-plugin/src/state/features.ts b/grafana-plugin/src/state/features.ts
index 090cea45..4749f41c 100644
--- a/grafana-plugin/src/state/features.ts
+++ b/grafana-plugin/src/state/features.ts
@@ -5,4 +5,5 @@ export enum AppFeature {
   CloudNotifications = 'grafana_cloud_notifications',
   CloudConnection = 'grafana_cloud_connection',
   Labels = 'labels',
+  MsTeams = 'msteams',
 }
diff --git a/grafana-plugin/src/state/rootBaseStore/index.ts b/grafana-plugin/src/state/rootBaseStore/index.ts
index b80b2c33..63f09e87 100644
--- a/grafana-plugin/src/state/rootBaseStore/index.ts
+++ b/grafana-plugin/src/state/rootBaseStore/index.ts
@@ -20,6 +20,7 @@ import { GrafanaTeamStore } from 'models/grafana_team/grafana_team';
 import { HeartbeatStore } from 'models/heartbeat/heartbeat';
 import { LabelStore } from 'models/label/label';
 import { LoaderStore } from 'models/loader/loader';
+import { MSTeamsChannelStore } from 'models/msteams_channel/msteams_channel';
 import { OrganizationStore } from 'models/organization/organization';
 import { OutgoingWebhookStore } from 'models/outgoing_webhook/outgoing_webhook';
 import { ResolutionNotesStore } from 'models/resolution_note/resolution_note';
@@ -114,6 +115,7 @@ export class RootBaseStore {
   globalSettingStore = new GlobalSettingStore(this);
   filtersStore = new FiltersStore(this);
   labelsStore = new LabelStore(this);
+  msteamsChannelStore: MSTeamsChannelStore = new MSTeamsChannelStore(this);
   loaderStore = LoaderStore;
 
   constructor() {
diff --git a/grafana-plugin/tsconfig.json b/grafana-plugin/tsconfig.json
index d568c4a5..a554cef9 100644
--- a/grafana-plugin/tsconfig.json
+++ b/grafana-plugin/tsconfig.json
@@ -1,9 +1,9 @@
 {
   "extends": "@grafana/toolkit/src/config/tsconfig.plugin.json",
-  "include": ["src", "frontend_enterprise/src", "e2e-tests", "playwright.config.ts"],
+  "include": ["src", "e2e-tests", "playwright.config.ts"],
   "types": ["node", "@emotion/core"],
   "compilerOptions": {
-    "rootDirs": ["src", "frontend_enterprise/src"],
+    "rootDirs": ["src"],
     "baseUrl": "src",
     "typeRoots": ["./node_modules/@types"],
     "noUnusedLocals": true,
diff --git a/grafana-plugin/webpack.config.js b/grafana-plugin/webpack.config.js
index fddc69a5..9c2a1bb2 100644
--- a/grafana-plugin/webpack.config.js
+++ b/grafana-plugin/webpack.config.js
@@ -150,12 +150,6 @@ module.exports.getWebpackConfig = (config, options) => {
         'process.env': JSON.stringify(dotenv.config().parsed),
       }),
     ],
-
-    resolve: {
-      ...config.resolve,
-      symlinks: false,
-      modules: [path.resolve(__dirname, './frontend_enterprise/src'), ...config.resolve.modules],
-    },
   };
 
   return newConfig;