Alert with information has been added to chatOPs tab (#2566)

# What this PR does
If FEATURES Slack and Telegram are not enabled for OSS, User will see
nothing at the chatops tab. Alert has been added for this situation
## Which issue(s) this PR fixes
https://github.com/grafana/oncall/issues/1735

---------

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

CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Added banner on the ChatOps screen for OSS to let the user know if no chatops integration is enabled
+  ([#1735](https://github.com/grafana/oncall/issues/1735))
+
 ## v1.3.16 (2023-07-21)
 
 ### Added

grafana-plugin/src/jest/utils.ts

@@ -5,9 +5,3 @@ export function mockUseStore() {
     }),
   }));
 }
-
-export function mockGrafanaLocationSrv() {
-  jest.mock('@grafana/runtime', () => ({
-    getLocationSrv: jest.fn(),
-  }));
-}

grafana-plugin/src/pages/settings/tabs/ChatOps/ChatOps.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { AppRootProps } from '@grafana/data';
-import { HorizontalGroup, Icon } from '@grafana/ui';
+import { Alert, HorizontalGroup, Icon } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
@@ -9,6 +9,7 @@ import VerticalTabsBar, { VerticalTab } from 'components/VerticalTabsBar/Vertica
 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';
+import { WithStoreProps } from 'state/types';
 import { useStore } from 'state/useStore';
 import { withMobXProviderContext } from 'state/withStore';
 import LocationHelper from 'utils/LocationHelper';
@@ -21,7 +22,7 @@ export enum ChatOpsTab {
   Slack = 'Slack',
   Telegram = 'Telegram',
 }
-interface ChatOpsProps extends AppRootProps {}
+interface ChatOpsProps extends AppRootProps, WithStoreProps {}
 interface ChatOpsState {
   activeTab: ChatOpsTab;
 }
@@ -44,6 +45,11 @@ class ChatOpsPage extends React.Component<ChatOpsProps, ChatOpsState> {
 
   render() {
     const { activeTab } = this.state;
+    const { store } = this.props;
+
+    if (!this.isChatOpsConfigured() && store.isOpenSource()) {
+      return this.renderNoChatOpsBannerInfo();
+    }
 
     return (
       <div className={cx('root')}>
@@ -57,6 +63,29 @@ class ChatOpsPage extends React.Component<ChatOpsProps, ChatOpsState> {
     );
   }
 
+  renderNoChatOpsBannerInfo() {
+    return (
+      <div className={cx('root')} data-testid="chatops-banner">
+        <Alert severity="warning" title="No ChatOps found">
+          ChatOps is disabled because no chat integration is enabled. See{' '}
+          <a href="https://grafana.com/docs/oncall/latest/open-source/#telegram-setup" target="_blank" rel="noreferrer">
+            Telegram
+          </a>{' '}
+          and{' '}
+          <a href="https://grafana.com/docs/oncall/latest/open-source/#slack-setup" target="_blank" rel="noreferrer">
+            Slack
+          </a>{' '}
+          docs for more information.
+        </Alert>
+      </div>
+    );
+  }
+
+  isChatOpsConfigured(): boolean {
+    const { store } = this.props;
+    return store.hasFeature(AppFeature.Slack) || store.hasFeature(AppFeature.Telegram);
+  }
+
   handleChatopsTabChange(tab: ChatOpsTab) {
     this.setState({ activeTab: tab });
     LocationHelper.update({ tab: tab }, 'partial');