Mfancher/orbit plugin adjustments

client-reactjs/src/App.js

@@ -57,7 +57,7 @@ const Regulations = React.lazy(() => import('./components/admin/ControlsAndRegul
 const GitHubSettings = React.lazy(() => import('./components/admin/GitHubSettings/GitHubSettings'));
 const ScheduledJobsPage = React.lazy(() => import('./components/admin/ScheduledJobsPage'));
 const Compliance = React.lazy(() => import('./components/admin/Compliance/Compliance'));
-const Integrations = React.lazy(() => import('./components/admin/Integrations'));
+const Integrations = React.lazy(() => import('./components/admin/Integrations/Integrations'));
 const TeamsNotification = React.lazy(() => import('./components/admin/notifications/MsTeams/Teams'));
 
 // Shared layout, etc.

client-reactjs/src/components/admin/ClusterDetails.jsx

@@ -60,7 +60,7 @@ function ClusterDetails() {
 
   return (
     <div>
-      <Tabs defaultActiveKey="1">
+      <Tabs type="card" defaultActiveKey="1">
         <TabPane tab="Cluster Details" key="1" style={{ minWidth: '480px', maxWidth: '50vw' }}>
           {clusterMetaData ? (
             <>

client-reactjs/src/components/admin/Integrations/IntegrationForms/ASRForm.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+import { Form, Select, Switch, Tabs, message } from 'antd';
+import { isEmail } from 'validator';
+import { getAllTeamsHook } from '../../../application/jobMonitoring/jobMonitoringUtils';
+
+const { TabPane } = Tabs;
+const { Option } = Select;
+
+const ASRForm = ({ setNotifications, notifications, setActive, selectedIntegration }) => {
+  const [notificationForm] = Form.useForm();
+  const [teamsHooks, setTeamsHook] = useState([]);
+
+  useEffect(() => {
+    //Get all teams hook
+    (async () => {
+      try {
+        const allTeamsHook = await getAllTeamsHook();
+        setTeamsHook(allTeamsHook);
+      } catch (error) {
+        message.error('Error fetching teams hook');
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    notificationForm.setFieldsValue({
+      notificationEmailsSev3: selectedIntegration?.metaData?.notificationEmailsSev3,
+      megaphone: selectedIntegration?.config?.megaphoneActive,
+      notificationEmails: selectedIntegration?.metaData?.notificationEmails,
+      notificationWebhooks: selectedIntegration?.metaData?.notificationWebhooks,
+    });
+  }, [selectedIntegration]);
+
+  return (
+    <>
+      <Form layout="vertical" form={notificationForm}>
+        <Tabs type="card">
+          <TabPane tab="General" key="1">
+            <h3>General</h3>
+            <Form.Item
+              label="Severity 3 Notification Emails"
+              style={{ width: '100%' }}
+              name="notificationEmailsSev3"
+              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={[',']}
+                onChange={(e) => {
+                  setNotifications({ ...notifications, notificationEmailsSev3: e });
+                }}
+              />
+            </Form.Item>
+          </TabPane>
+          <TabPane tab="Megaphone" key="2">
+            <h3>Megaphone</h3>
+            <Form.Item name="megaphone" label="Active">
+              <Switch
+                checked={selectedIntegration?.config?.megaphoneActive || false}
+                onChange={(e) => {
+                  setActive(e);
+                }}></Switch>
+            </Form.Item>
+            <Form.Item
+              label="Notification Emails"
+              style={{ width: '100%' }}
+              name="notificationEmails"
+              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={[',']}
+                onChange={(e) => {
+                  setNotifications({ ...notifications, notificationEmails: e });
+                }}
+              />
+            </Form.Item>
+            <Form.Item
+              label="Notification Webhooks"
+              style={{ width: '100%' }}
+              name="notificationWebhooks"
+              validateTrigger={['onChange', 'onBlur']}>
+              <Select
+                placeholder="Select a teams Channel "
+                mode="multiple"
+                onChange={([e]) => {
+                  setNotifications({ ...notifications, notificationWebhooks: e });
+                }}>
+                {teamsHooks.map((team) => (
+                  <Option key={team.id} value={team.id}>
+                    {team.name}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          </TabPane>
+        </Tabs>
+      </Form>
+    </>
+  );
+};
+export default ASRForm;

client-reactjs/src/components/admin/Integrations.js → client-reactjs/src/components/admin/Integrations/Integrations.js

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { Tooltip, Space, Table, Switch, Modal, Form, Input, Button, message } from 'antd';
+import { Tooltip, Space, Table, Switch, Modal, Button, message } from 'antd';
 import { EditOutlined } from '@ant-design/icons';
-import BreadCrumbs from '../common/BreadCrumbs.js';
-import { authHeader } from '../common/AuthHeader.js';
+import BreadCrumbs from '../../common/BreadCrumbs.js';
+import { authHeader } from '../../common/AuthHeader.js';
 import { useSelector, useDispatch } from 'react-redux';
-import { applicationActions } from '../../redux/actions/Application.js';
-import useWindowSize from '../../hooks/useWindowSize.js';
+import { applicationActions } from '../../../redux/actions/Application.js';
+import useWindowSize from '../../../hooks/useWindowSize.js';
+import ASRForm from './IntegrationForms/ASRForm.js';
 
 const Integrations = () => {
   const [integrations, setIntegrations] = useState([]);
@@ -15,7 +16,7 @@ const Integrations = () => {
   const [selectedIntegration, setSelectedIntegration] = useState({});
   const [notifications, setNotifications] = useState({});
   const [active, setActive] = useState(false);
-  const [notificationForm] = Form.useForm();
+
   const windowSize = useWindowSize();
 
   // Changes modal size per screen vw
@@ -24,6 +25,7 @@ const Integrations = () => {
     if (width > 1500) {
       setModalWidth('40vw');
     } else if (width > 1000) {
+      integrations;
       setModalWidth('60vw');
     } else {
       setModalWidth('100vw');
@@ -48,6 +50,7 @@ const Integrations = () => {
       const response = await fetch(`/api/integrations/get/${applicationId}`, payload);
 
       const data = await response.json();
+
       if (data) {
         setIntegrations(data);
       }
@@ -61,6 +64,7 @@ const Integrations = () => {
     await setModalVisible(true);
     await setSelectedIntegration(record);
     await setNotifications(record.metaData);
+    await setActive(record.config?.megaphoneActive);
   };
 
   const handleSave = async () => {
@@ -82,7 +86,6 @@ const Integrations = () => {
       setModalVisible(false);
       dispatch(applicationActions.getIntegrations(applicationId));
 
-      notificationForm.resetFields();
       message.success('Successfully updated Integration');
     } else {
       message.success('An Error Occured, Integration not updated');
@@ -158,48 +161,17 @@ const Integrations = () => {
         destroyOnClose
         footer={saveBtn}
         title="Integration Settings">
-        <Form layout="vertical" form={notificationForm} initialValues={{ monitoringActive: true }}>
-          <h3>General Settings</h3>
-          <Form.Item
-            label="Severity 3 Notification Emails"
-            style={{ width: '100%' }}
-            name="notificationEmailsSev3"
-            initialValue={selectedIntegration.metaData?.notificationEmailsSev3}
-            validateTrigger={['onChange', 'onBlur']}
-            rules={[{ max: 256, message: 'Maximum of 256 characters allowed' }]}>
-            <Input
-              onChange={(e) => setNotifications({ ...notifications, notificationEmailsSev3: e.target.value })}></Input>
-          </Form.Item>
-          <br />
-          <h3>Megaphone Notification Settings</h3>
-          <Form.Item name="megaphone" label="Active">
-            <Switch
-              defaultChecked={selectedIntegration?.config?.megaphoneActive || false}
-              value={selectedIntegration?.config?.megaphoneActive || false}
-              onChange={(e) => {
-                setActive(e);
-              }}></Switch>
-          </Form.Item>
-          <Form.Item
-            label="Notification Emails"
-            style={{ width: '100%' }}
-            name="notificationEmails"
-            initialValue={selectedIntegration.metaData?.notificationEmails}
-            validateTrigger={['onChange', 'onBlur']}
-            rules={[{ max: 256, message: 'Maximum of 256 characters allowed' }]}>
-            <Input onChange={(e) => setNotifications({ ...notifications, notificationEmails: e.target.value })}></Input>
-          </Form.Item>
-          <Form.Item
-            label="Notification Webhooks"
-            style={{ width: '100%' }}
-            name="notificationWebhooks"
-            initialValue={selectedIntegration.metaData?.notificationWebhooks}
-            validateTrigger={['onChange', 'onBlur']}
-            rules={[{ max: 256, message: 'Maximum of 256 characters allowed' }]}>
-            <Input
-              onChange={(e) => setNotifications({ ...notifications, notificationWebhooks: e.target.value })}></Input>
-          </Form.Item>
-        </Form>
+        {selectedIntegration?.name === 'ASR' && (
+          <>
+            <ASRForm
+              setActive={setActive}
+              setNotifications={setNotifications}
+              selectedIntegration={selectedIntegration}
+              notifications={notifications}
+              handleSave={handleSave}
+            />
+          </>
+        )}
       </Modal>
     </>
   );

client-reactjs/src/components/application/Dataflow/DataflowDetails.js

@@ -33,6 +33,7 @@ function DataflowDetails() {
       </div>
       <div>
         <Tabs
+          type="card"
           defaultActiveKey="1"
           destroyInactiveTabPane={true}
           tabBarExtraContent={

client-reactjs/src/components/application/IndexDetails.js

@@ -611,7 +611,7 @@ class IndexDetails extends PureComponent {
             </div>
           ) : null}
 
-          <Tabs defaultActiveKey="1" tabBarExtraContent={this.props.displayingInModal ? null : controls}>
+          <Tabs type="card" defaultActiveKey="1" tabBarExtraContent={this.props.displayingInModal ? null : controls}>
             <TabPane tab={<Text text="Basic" />} key="1">
               <Form
                 {...formItemLayout}

client-reactjs/src/components/application/Jobs/JobDetails.js

@@ -469,6 +469,7 @@ class JobDetails extends Component {
       <>
         <JobForm {...commonProps}>
           <Tabs
+            type="card"
             defaultActiveKey={selectedTabPaneKey}
             tabBarExtraContent={displayingInModal ? null : <Controls {...commonProps} {...controlProps} />}
             onChange={(activeKey) => this.setState({ selectedTabPaneKey: activeKey })}>

client-reactjs/src/components/application/Jobs/ManualJobDetail.jsx

@@ -110,7 +110,7 @@ function ManualJobDetail() {
       <div className="assetTitle">
         {<Text text="Job" />}: {jobDetails.name}
       </div>
-      <Tabs tabBarExtraContent={actions}>
+      <Tabs type="card" tabBarExtraContent={actions}>
         <TabPane tab={<Text text="Basic" />} key="1">
           {jobData.map((item, i) => (
             <Row id={i} gutter={{ xs: 8, sm: 8, md: 8, lg: 8 }} key={item.label}>

client-reactjs/src/components/application/VisualizationDetails.js

@@ -170,7 +170,7 @@ function VisualizationDetails() {
 
   return (
     <React.Fragment>
-      <Tabs defaultActiveKey="1" tabBarExtraContent={controls}>
+      <Tabs type="card" defaultActiveKey="1" tabBarExtraContent={controls}>
         <TabPane tab={<Text text="Basic" />} key="1">
           <Spin spinning={formState.loading}>
             <Form {...formItemLayout} labelAlign="left" form={form} onFinish={handleOk}>

client-reactjs/src/components/application/actions/actions.jsx

@@ -12,7 +12,7 @@ function Actions() {
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
         <BreadCrumbs />
       </div>
-      <Tabs defaultActiveKey="1">
+      <Tabs type="card" defaultActiveKey="1">
         <TabPane tab={<Text text="File Upload" />} key="1">
           <LandingZoneUpload />
         </TabPane>

client-reactjs/src/components/application/clusterMonitoring/index.jsx

@@ -307,6 +307,7 @@ function ClusterMonitoring() {
           initialValues={{ msTeamsGroups: [''], emails: [''] }}>
           <Tabs
             activeKey={activeTab}
+            type="card"
             onTabClick={(record) => {
               setActiveTab(record);
             }}>

client-reactjs/src/components/application/dashboard/ExportMenu/DashboardModal.jsx

@@ -131,7 +131,7 @@ const DashboardModal = ({ modalVisible, setModalVisible, applicationId, authRedu
         }
         footer={false}
         style={{ marginTop: '200px' }}>
-        <Tabs>
+        <Tabs type="card">
           <TabPane tab="Active Keys" key="1">
             <div style={{ marginBottom: '1rem' }}>
               <DashboardApiTable

client-reactjs/src/components/application/dashboard/Orbit/Orbit.jsx

@@ -439,6 +439,7 @@ function Orbit() {
   return (
     <div>
       <Tabs
+        type="card"
         tabBarExtraContent={
           <>
             <Space style={{ marginRight: '1rem' }}>

client-reactjs/src/components/application/dashboard/clusterUsage/index.js

@@ -103,6 +103,7 @@ function ClusterUsage() {
     <Tabs
       tabBarExtraContent={<ExportMenu selectedCluster={selectedCluster} />}
       activeKey={activeTab}
+      type="card"
       onChange={handleTabSwitching}>
       <Tabs.TabPane tab="Usage history" key="1">
         <Filters

client-reactjs/src/components/application/dashboard/notifications/NotificationsTable.jsx

@@ -239,7 +239,7 @@ function NotificationsTable({ applicationId, setSelectedNotificationForBulkActio
             Close
           </Button>
         }>
-        <Tabs>
+        <Tabs type="card">
           <Tabs.TabPane tab="Metadata" key="1">
             <Descriptions bordered column={1} size="small">
               {selectedNotificationDetails.map((item) => (

client-reactjs/src/components/application/dashboard/notifications/index.js

@@ -181,6 +181,7 @@ function Index() {
   return (
     <div>
       <Tabs
+        type="card"
         tabBarExtraContent={
           <Space>
             <Button

client-reactjs/src/components/application/fileMonitoring/FileMonitoringModal.jsx

@@ -299,6 +299,7 @@ function FileMonitoringModal({
         </div>
       ) : (
         <Tabs
+          type="card"
           activeKey={activeTab}
           onTabClick={(record) => {
             setActiveTab(record);

client-reactjs/src/components/application/jobMonitoring/AddEditJobMonitoringModal.jsx

@@ -163,7 +163,7 @@ const AddEditJobMonitoringModal = ({
       onCancel={handleCancel}
       footer={renderFooter()}
       maskClosable={false}>
-      <Tabs activeKey={activeTab.toString()} onChange={(key) => handleTabChange(key)}>
+      <Tabs type="card" activeKey={activeTab.toString()} onChange={(key) => handleTabChange(key)}>
         {tabs.map((tab, index) => (
           <Tabs.TabPane
             key={index}