Integration general tab - displaying of teams hook changed

client-reactjs/src/components/admin/Integrations/asr/DomainModal.jsx

@@ -123,7 +123,10 @@ const DomainModal = ({
       okText={selectedDomain ? 'Update' : 'Save'}
       maskClosable={false}>
       <Form form={form} layout="vertical">
-        <Form.Item label="Domain" name="name" rules={[{ required: true, message: 'Please input the product name!' }]}>
+        <Form.Item
+          label="Domain"
+          name="name"
+          rules={[{ required: true, message: 'Please input the product name!' }, { max: 100 }]}>
           <Input placeholder="Product Name" />
         </Form.Item>
         <Form.Item label="Activity Type" name="monitoringTypeIds" rules={[{ required: false }]}>

client-reactjs/src/components/admin/Integrations/asr/GeneralSettingsEditModal.jsx

@@ -11,6 +11,7 @@ function GeneralSettingsEditModal({
   setDisplayGeneralSettingsEditModal,
   integrationDetails,
   setIntegrationDetails,
+  teamsChannels,
 }) {
   //Local State
   const [displayRecipients, setDisplayRecipients] = useState({
@@ -118,6 +119,7 @@ function GeneralSettingsEditModal({
       width={800}
       okText="Save"
       onOk={handleFormSubmit}
+      maskClosable={false}
       cancelButtonProps={{ type: 'primary', ghost: true }}>
       <Card size="small">
         <Form layout="vertical" form={form}>
@@ -161,19 +163,42 @@ function GeneralSettingsEditModal({
 
           {displayRecipients.megaPhoneAlerts && (
             <>
-              <Form.Item required label="Notification E-mails" name="megaphoneEmailContacts">
+              <Form.Item
+                required
+                label="Notification E-mails"
+                name="megaphoneEmailContacts"
+                validateTrigger={['onChange', 'onBlur']}
+                rules={[
+                  {
+                    validator: (_, value) => {
+                      if (!value || value.length === 0) {
+                        return Promise.reject(new Error('Please add at least one email!'));
+                      }
+                      if (value.length > 20) {
+                        return Promise.reject(new Error('Too many emails'));
+                      }
+                      if (!value.every((v) => isEmail(v))) {
+                        return Promise.reject(new Error('One or more emails are invalid'));
+                      }
+                      return Promise.resolve();
+                    },
+                  },
+                ]}>
                 <Select
                   mode="tags"
                   allowClear
                   placeholder="Enter a comma-delimited list of email addresses"
                   tokenSeparators={[',']}
                 />
               </Form.Item>
-              <Form.Item
-                label="Notification Webhooks"
-                name="megaPhoneTeamsContacts"
-                validateTrigger={['onChange', 'onBlur']}>
-                <Select placeholder="Select a teams Channel " mode="multiple"></Select>
+              <Form.Item label="Notification Webhooks" name="megaPhoneTeamsContacts">
+                <Select placeholder="Select a teams Channel " mode="multiple">
+                  {teamsChannels.map((channel) => (
+                    <Select.Option key={channel.id} value={channel.id}>
+                      {channel.name}
+                    </Select.Option>
+                  ))}
+                </Select>
               </Form.Item>
             </>
           )}

client-reactjs/src/components/admin/Integrations/asr/GeneralTab.jsx

@@ -6,7 +6,7 @@ import { CheckSquareFilled, CloseSquareFilled } from '@ant-design/icons';
 // Local imports
 import '../integrations.css';
 
-function GeneralTab({ integrationDetails }) {
+function GeneralTab({ integrationDetails, teamsChannels }) {
   const [severity3AlertRecipients, setSeverity3AlertRecipients] = useState(null);
   const [megaphoneAlertRecipients, setMegaphoneAlertRecipients] = useState(null);
 
@@ -78,11 +78,16 @@ function GeneralTab({ integrationDetails }) {
                   );
                 })}
                 {megaphoneAlertRecipients?.teamsChannel.map((t, i) => {
-                  return (
-                    <Tag color="blue" key={i}>
-                      {t}
-                    </Tag>
-                  );
+                  return teamsChannels.map((tc) => {
+                    if (tc.id === t) {
+                      return (
+                        <Tag color="blue" key={i}>
+                          {tc.name}
+                        </Tag>
+                      );
+                    }
+                    return null;
+                  });
                 })}
               </Card>
             </div>

client-reactjs/src/components/admin/Integrations/asr/asr-integration-util.js

@@ -174,3 +174,20 @@ export const deleteProduct = async ({ id }) => {
 
   return data;
 };
+
+// Get all teams channels
+export const getTeamsChannels = async () => {
+  const payload = {
+    method: 'GET',
+    headers: authHeader(),
+  };
+  const response = await fetch('/api/teamsHook/', payload);
+
+  if (response.status !== 200) {
+    throw new Error('Failed to get teams channels');
+  }
+
+  const data = await response.json();
+
+  return data;
+};

client-reactjs/src/components/admin/Integrations/asr/index.js

@@ -10,7 +10,7 @@ import DomainsTab from './DomainsTab.jsx';
 import ProductsTab from './ProductsTab.jsx';
 import GeneralSettingsEditModal from './GeneralSettingsEditModal.jsx';
 import { getIntegrationDetailsByRelationId } from '../integration-utils.js';
-import { getMonitoringTypes, getDomains, getProducts } from './asr-integration-util.js';
+import { getMonitoringTypes, getDomains, getProducts, getTeamsChannels } from './asr-integration-util.js';
 import DomainModal from './DomainModal.jsx';
 import ProductModal from './ProductModal.jsx';
 
@@ -30,6 +30,7 @@ function AsrIntegrationSettings({ integration_to_app_mapping_id }) {
   const [selectedDomain, setSelectedDomain] = useState(null);
   const [products, setProducts] = useState([]);
   const [selectedProduct, setSelectedProduct] = useState(null);
+  const [teamsChannels, setTeamsChannels] = useState([]);
 
   // Action items for the domains tab
   const domainActionItems = [
@@ -95,6 +96,16 @@ function AsrIntegrationSettings({ integration_to_app_mapping_id }) {
         return;
       }
     })();
+
+    // Get teams channels
+    (async () => {
+      try {
+        const response = await getTeamsChannels();
+        setTeamsChannels(response);
+      } catch (err) {
+        message.error('Failed to get teams channels');
+      }
+    })();
   }, []);
 
   //Handle Tab change
@@ -149,7 +160,7 @@ function AsrIntegrationSettings({ integration_to_app_mapping_id }) {
           tabBarExtraContent={tabExtraContent}
           onChange={(value) => handleTabChange(value)}>
           <TabPane tab="General Settings" key="1">
-            {<GeneralTab integrationDetails={integrationDetails} />}
+            {<GeneralTab integrationDetails={integrationDetails} teamsChannels={teamsChannels} />}
           </TabPane>
           <TabPane tab="Domains" key="2">
             <DomainsTab
@@ -175,6 +186,7 @@ function AsrIntegrationSettings({ integration_to_app_mapping_id }) {
         setDisplayGeneralSettingsEditModal={setDisplayGeneralSettingsEditModal}
         integrationDetails={integrationDetails}
         setIntegrationDetails={setIntegrationDetails}
+        teamsChannels={teamsChannels}
       />
       <DomainModal
         domainModalOpen={domainModalOpen}

server/server.js

@@ -129,7 +129,6 @@ app.use("/api/orbit", orbit);
 app.use("/api/integrations", integrations);
 app.use("/api/teamsHook", teamsHook);
 app.use("/api/fido", fido);
-fido;
 app.use("/api/notification_queue", notification_queue);
 app.use("/api/monitorings", monitorings);
 app.use("/api/asr", asr);