Added chatops fetch (for MSTeams) and changed styling to be compatible with global grafana styles in templates (#2337)

# What this PR does

## Which issue(s) this PR fixes

## 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/src/components/HamburgerMenu/HamburgerMenu.module.scss

@@ -1,34 +1,30 @@
 .hamburgerMenu {
   cursor: pointer;
   color: var(--primary-text-color);
+  border: var(--border-weak);
+  border-radius: var(--border-radius);
+  background-color: var(--button-background);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
+  padding: 4px;
+
+  &:hover {
+    background-color: var(--button-hover-background);
+  }
 
   &--withBackground {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    vertical-align: middle;
-    justify-content: center;
-    background-color: var(--button-background);
-    border: 1px solid transparent;
     height: 32px;
     width: 30px;
-    padding: 4px;
     cursor: pointer;
     color: var(--primary-text-color);
   }
 
   &--small {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    vertical-align: middle;
-    justify-content: center;
-    background-color: var(--button-background);
-    color: var(--primary-text-color);
-    border: 1px solid transparent;
     height: 24px;
     width: 22px;
-    padding: 4px;
     cursor: pointer;
     color: var(--primary-text-color);
   }

grafana-plugin/src/components/HamburgerMenu/HamburgerMenu.tsx

@@ -22,7 +22,7 @@ const HamburgerMenu: React.FC<HamburgerMenuProps> = (props) => {
   return (
     <div
       ref={ref}
-      className={withBackground ? cx('hamburgerMenu--withBackground') : cx('hamburgerMenu', className)}
+      className={cx('hamburgerMenu', { 'hamburgerMenu--withBackground': withBackground }, className)}
       onClick={(e) => {
         if (stopPropagation) {
           e.stopPropagation();

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { ConfirmModal, HorizontalGroup, Icon } from '@grafana/ui';
+import { ConfirmModal, HorizontalGroup, Icon, IconName } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
@@ -44,7 +44,9 @@ const CollapsedIntegrationRouteDisplay: React.FC<CollapsedIntegrationRouteDispla
       alertReceiveChannelStore.channelFilterIds[alertReceiveChannelId],
       routeIndex
     );
-    const chatOpsAvailableChannels = IntegrationHelper.getChatOpsChannels(channelFilter, store);
+    const chatOpsAvailableChannels = IntegrationHelper.getChatOpsChannels(channelFilter, store).filter(
+      (channel) => channel
+    );
 
     return (
       <>
@@ -105,14 +107,17 @@ const CollapsedIntegrationRouteDisplay: React.FC<CollapsedIntegrationRouteDispla
                     <HorizontalGroup spacing="xs">
                       <Text type="secondary">Publish to ChatOps</Text>
 
-                      {chatOpsAvailableChannels
-                        .filter((it) => it)
-                        .map((chatOpsChannel) => (
-                          <>
+                      {chatOpsAvailableChannels.map(
+                        (chatOpsChannel: { name: string; icon: IconName }, chatOpsIndex) => (
+                          <div
+                            key={`${chatOpsChannel.name}-${chatOpsIndex}`}
+                            className={cx({ 'u-margin-right-xs': chatOpsIndex !== chatOpsAvailableChannels.length })}
+                          >
                             <Icon name={chatOpsChannel.icon} className={cx('icon')} />
                             <Text type="primary">{chatOpsChannel.name}</Text>
-                          </>
-                        ))}
+                          </div>
+                        )
+                      )}
                     </HorizontalGroup>
                   </div>
                 )}

grafana-plugin/src/pages/integration/Integration.helper.ts

@@ -54,6 +54,11 @@ 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.teamStore.currentTeam?.slack_team_identity);
     const hasTelegram =

grafana-plugin/src/pages/integration/Integration.tsx

@@ -119,6 +119,7 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
     } = this.props;
 
     const {
+      store,
       store: { alertReceiveChannelStore },
     } = this.props;
 
@@ -126,7 +127,11 @@ class Integration extends React.Component<IntegrationProps, IntegrationState> {
       this.openEditTemplateModal(query.template, query.routeId && query.routeId);
     }
 
-    await Promise.all([this.loadIntegration(), alertReceiveChannelStore.updateTemplates(id)]);
+    await Promise.all([
+      this.loadIntegration(),
+      IntegrationHelper.fetchChatOps(store),
+      alertReceiveChannelStore.updateTemplates(id),
+    ]);
   }
 
   render() {

grafana-plugin/src/style/vars.css

@@ -64,7 +64,8 @@
   --shadows-z3: 0 13px 20px 1px rgba(24, 26, 27, 0.18);
   --tag-text-success: rgb(50, 96, 43);
   --tag-border-success: rgb(148, 203, 140);
-  --button-background: rgba(36, 41, 46, 0.16);
+  --button-background: rgba(36, 41, 46, 0.08);
+  --button-hover-background: rgba(36, 41, 46, 0.15);
   --box-background: rgba(244, 245, 245);
 }
 
@@ -99,6 +100,7 @@
   --shadows-z3: 0 8px 24px rgb(1, 4, 9);
   --tag-text-success: rgb(165, 214, 159);
   --tag-border-success: rgb(49, 100, 43);
-  --button-background: rgba(204, 204, 220, 0.16);
+  --button-background: rgba(204, 204, 220, 0.1);
+  --button-hover-background: rgba(204, 204, 220, 0.14);
   --box-background: rgba(10, 10, 10, 0.4);
 }