Add mattermost OAuth2 flow

Settings Frontend flow

Change UI text for mattermost integration

OAuth login flow

OAuth Flow

Fix env status loading

Lint fixes

engine/apps/api/serializers/organization.py

@@ -106,14 +106,23 @@ class Meta:
 class CurrentOrganizationConfigChecksSerializer(serializers.ModelSerializer):
     is_chatops_connected = serializers.SerializerMethodField()
     is_integration_chatops_connected = serializers.SerializerMethodField()
+    mattermost = serializers.SerializerMethodField()
 
     class Meta:
         model = Organization
         fields = [
             "is_chatops_connected",
             "is_integration_chatops_connected",
+            "mattermost",
         ]
 
+    def get_mattermost(self, obj):
+        env_status = not LiveSetting.objects.filter(name__startswith="MATTERMOST", error__isnull=False).exists()
+        return {
+            "env_status": env_status,
+            "is_integrated": False,  # TODO: Add logic to verify if mattermost is integrated
+        }
+
     def get_is_chatops_connected(self, obj):
         msteams_backend = get_messaging_backend_from_id("MSTEAMS")
         return bool(

engine/apps/api/tests/test_organization.py

@@ -279,6 +279,10 @@ def test_get_organization_slack_config_checks(
     expected_result = {
         "is_chatops_connected": False,
         "is_integration_chatops_connected": False,
+        "mattermost": {
+            "env_status": True,
+            "is_integrated": False,
+        },
     }
     response = client.get(url, format="json", **make_user_auth_headers(user, token))
     assert response.status_code == status.HTTP_200_OK
@@ -334,6 +338,10 @@ def test_get_organization_telegram_config_checks(
     expected_result = {
         "is_chatops_connected": False,
         "is_integration_chatops_connected": False,
+        "mattermost": {
+            "env_status": True,
+            "is_integrated": False,
+        },
     }
     response = client.get(url, format="json", **make_user_auth_headers(user, token))
     assert response.status_code == status.HTTP_200_OK

grafana-plugin/src/models/base_store.ts

@@ -89,6 +89,7 @@ export class BaseStore {
 
       // Update env_status field for current team
       await this.rootStore.organizationStore.loadCurrentOrganization();
+      await this.rootStore.organizationStore.loadCurrentOrganizationConfigChecks();
       return result;
     } catch (error) {
       this.onApiError(error, skipErrorHandling);
@@ -103,6 +104,7 @@ export class BaseStore {
       });
       // Update env_status field for current team
       await this.rootStore.organizationStore.loadCurrentOrganization();
+      await this.rootStore.organizationStore.loadCurrentOrganizationConfigChecks();
       return result;
     } catch (error) {
       this.onApiError(error);

grafana-plugin/src/models/organization/organization.ts

@@ -4,12 +4,15 @@ import { BaseStore } from 'models/base_store';
 import { makeRequest } from 'network/network';
 import { RootStore } from 'state/rootStore';
 
-import { Organization } from './organization.types';
+import { Organization, OrganizationConfigChecks } from './organization.types';
 
 export class OrganizationStore extends BaseStore {
   @observable
   currentOrganization?: Organization;
 
+  @observable
+  organizationConfigChecks?: OrganizationConfigChecks;
+
   constructor(rootStore: RootStore) {
     super(rootStore);
     makeObservable(this);
@@ -25,6 +28,15 @@ export class OrganizationStore extends BaseStore {
     });
   }
 
+  @action.bound
+  async loadCurrentOrganizationConfigChecks() {
+    const organizationConfigChecks = await makeRequest(`${this.path}config-checks`, {});
+
+    runInAction(() => {
+      this.organizationConfigChecks = organizationConfigChecks;
+    });
+  }
+
   async saveCurrentOrganization(data: Partial<Organization>) {
     this.currentOrganization = await makeRequest(this.path, {
       method: 'PUT',

grafana-plugin/src/models/organization/organization.types.ts

@@ -32,3 +32,12 @@ export interface Organization {
     mattermost_configured: boolean;
   };
 }
+
+export interface OrganizationConfigChecks {
+  is_chatops_connected: boolean;
+  is_integration_chatops_connected: boolean;
+  mattermost: {
+    env_status: boolean;
+    is_integrated: boolean;
+  };
+}

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

@@ -151,6 +151,14 @@ const Tabs = (props: TabsProps) => {
           </Stack>
         </VerticalTab>
       )}
+      {store.hasFeature(AppFeature.Mattermost) && (
+        <VerticalTab id={ChatOpsTab.Mattermost}>
+          <HorizontalGroup>
+            <Icon name="message" />
+            Mattermost
+          </HorizontalGroup>
+        </VerticalTab>
+      )}
     </VerticalTabsBar>
   );
 };

grafana-plugin/src/state/rootBaseStore/RootBaseStore.ts

@@ -116,6 +116,7 @@ export class RootBaseStore {
     await retryFailingPromises([
       () => this.userStore.loadCurrentUser(),
       () => this.organizationStore.loadCurrentOrganization(),
+      () => this.organizationStore.loadCurrentOrganizationConfigChecks(),
       () => this.grafanaTeamStore.updateItems(),
       () => updateFeatures(),
       () => this.alertReceiveChannelStore.fetchAlertReceiveChannelOptions(),