Add Mattermost as a notification channel destination (#416)

Signed-off-by: Craig Perkins <cwperx@amazon.com>

Author: cwperks

common/constants.ts

@@ -5,6 +5,7 @@ export const BACKEND_CHANNEL_TYPE = Object.freeze({
   MICROSOFT_TEAMS: 'microsoft_teams',
   CUSTOM_WEBHOOK: 'webhook',
   SNS: 'sns',
+  MATTERMOST: 'mattermost',
 });
 export const CHANNEL_TYPE = Object.freeze({
   [BACKEND_CHANNEL_TYPE.SLACK]: 'Slack',
@@ -13,11 +14,13 @@ export const CHANNEL_TYPE = Object.freeze({
   [BACKEND_CHANNEL_TYPE.MICROSOFT_TEAMS]: 'Microsoft Teams',
   [BACKEND_CHANNEL_TYPE.CUSTOM_WEBHOOK]: 'Custom webhook',
   [BACKEND_CHANNEL_TYPE.SNS]: 'Amazon SNS',
+  [BACKEND_CHANNEL_TYPE.MATTERMOST]: 'Mattermost',
 }) as {
   slack: string;
   email: string;
   chime: string;
   microsoft_teams: string;
   webhook: string;
   sns: string;
+  mattermost: string;
 };

models/interfaces.ts

@@ -36,6 +36,9 @@ export interface ChannelItemType extends ConfigType {
   slack?: {
     url: string;
   };
+  mattermost?: {
+    url: string;
+  };
   chime?: {
     url: string;
   };

public/pages/CreateChannel/CreateChannel.tsx

@@ -39,6 +39,7 @@ import { MicrosoftTeamsSettings } from './components/MicrosoftTeamsSettings';
 import { CustomWebhookSettings } from './components/CustomWebhookSettings';
 import { EmailSettings } from './components/EmailSettings';
 import { SlackSettings } from './components/SlackSettings';
+import { MattermostSettings } from './components/MattermostSettings';
 import { SNSSettings } from './components/SNSSettings';
 import {
   constructEmailObject,
@@ -95,6 +96,7 @@ export function CreateChannel(props: CreateChannelsProps) {
   const [channelType, setChannelType] = useState(channelTypeOptions[0].value);
 
   const [slackWebhook, setSlackWebhook] = useState('');
+  const [mattermostWebhook, setMattermostWebhook] = useState('');
   const [chimeWebhook, setChimeWebhook] = useState('');
   const [microsoftTeamsWebhook, setMicrosoftTeamsWebhook] = useState('');
 
@@ -130,6 +132,7 @@ export function CreateChannel(props: CreateChannelsProps) {
   const [inputErrors, setInputErrors] = useState<InputErrorsType>({
     name: [],
     slackWebhook: [],
+    mattermostWebhook: [],
     chimeWebhook: [],
     microsoftTeamsWebhook: [],
     smtpSender: [],
@@ -197,6 +200,8 @@ export function CreateChannel(props: CreateChannelsProps) {
 
       if (type === BACKEND_CHANNEL_TYPE.SLACK) {
         setSlackWebhook(response.slack?.url || '');
+      } else if (type === BACKEND_CHANNEL_TYPE.MATTERMOST) {
+        setMattermostWebhook(response.mattermost?.url || '');
       } else if (type === BACKEND_CHANNEL_TYPE.CHIME) {
         setChimeWebhook(response.chime?.url || '');
       } else if (type === BACKEND_CHANNEL_TYPE.MICROSOFT_TEAMS) {
@@ -249,6 +254,8 @@ export function CreateChannel(props: CreateChannelsProps) {
     };
     if (channelType === BACKEND_CHANNEL_TYPE.SLACK) {
       errors.slackWebhook = validateWebhookURL(slackWebhook);
+    } else if (channelType === BACKEND_CHANNEL_TYPE.MATTERMOST) {
+      errors.mattermostWebhook = validateWebhookURL(mattermostWebhook);
     } else if (channelType === BACKEND_CHANNEL_TYPE.CHIME) {
       errors.chimeWebhook = validateWebhookURL(chimeWebhook);
     } else if (channelType === BACKEND_CHANNEL_TYPE.MICROSOFT_TEAMS) {
@@ -288,6 +295,8 @@ export function CreateChannel(props: CreateChannelsProps) {
     };
     if (channelType === BACKEND_CHANNEL_TYPE.SLACK) {
       config.slack = { url: slackWebhook };
+    } else if (channelType === BACKEND_CHANNEL_TYPE.MATTERMOST) {
+      config.mattermost = { url: mattermostWebhook };
     } else if (channelType === BACKEND_CHANNEL_TYPE.CHIME) {
       config.chime = { url: chimeWebhook };
     } else if (channelType === BACKEND_CHANNEL_TYPE.MICROSOFT_TEAMS) {
@@ -422,6 +431,11 @@ export function CreateChannel(props: CreateChannelsProps) {
               slackWebhook={slackWebhook}
               setSlackWebhook={setSlackWebhook}
             />
+          ) : channelType === BACKEND_CHANNEL_TYPE.MATTERMOST ? (
+            <MattermostSettings
+              mattermostWebhook={mattermostWebhook}
+              setMattermostWebhook={setMattermostWebhook}
+            />
           ) : channelType === BACKEND_CHANNEL_TYPE.CHIME ? (
             <ChimeSettings
               chimeWebhook={chimeWebhook}

public/pages/CreateChannel/components/MattermostSettings.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiCompressedFieldText, EuiCompressedFormRow } from '@elastic/eui';
+import React, { useContext } from 'react';
+import { CreateChannelContext } from '../CreateChannel';
+import { validateWebhookURL } from '../utils/validationHelper';
+
+interface MattermostSettingsProps {
+  mattermostWebhook: string;
+  setMattermostWebhook: (url: string) => void;
+}
+
+export function MattermostSettings(props: MattermostSettingsProps) {
+  const context = useContext(CreateChannelContext)!;
+
+  return (
+    <EuiCompressedFormRow
+      label="Mattermost webhook URL"
+      style={{ maxWidth: '700px' }}
+      error={context.inputErrors.mattermostWebhook.join(' ')}
+      isInvalid={context.inputErrors.mattermostWebhook.length > 0}
+    >
+      <EuiCompressedFieldText
+        fullWidth
+        data-test-subj="create-channel-mattermost-webhook-input"
+        placeholder="https://your-mattermost-server.com/hooks/xxx-generatedkey-xxx"
+        value={props.mattermostWebhook}
+        onChange={(e) => props.setMattermostWebhook(e.target.value)}
+        isInvalid={context.inputErrors.mattermostWebhook.length > 0}
+        onBlur={() => {
+          context.setInputErrors({
+            ...context.inputErrors,
+            mattermostWebhook: validateWebhookURL(props.mattermostWebhook),
+          });
+        }}
+      />
+    </EuiCompressedFormRow>
+  );
+}