Yadhap/asr domain category relation

client-reactjs/src/App.js

@@ -39,9 +39,7 @@ const OrbitMonitoring = React.lazy(() => import('./components/application/orbitM
 const SuperFileMonitoring = React.lazy(() =>
   import('./components/application/superfileMonitoring/SuperFileMonitoring')
 );
-// const Notifications = React.lazy(() => import('./components/application/dashboard/notifications/Notifications'));
 const Orbit = React.lazy(() => import('./components/application/dashboard/Orbit/Orbit'));
-// const ClusterUsage = React.lazy(() => import('./components/application/dashboard/clusterUsage/ClusterUsage'));
 const Notifications = React.lazy(() => import('./components/application/dashboard/notifications'));
 const ClusterUsage = React.lazy(() => import('./components/application/dashboard/clusterUsage/'));
 const ClusterMonitoring = React.lazy(() => import('./components/application/clusterMonitoring'));
@@ -57,7 +55,8 @@ 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/Integrations'));
+const Integrations = React.lazy(() => import('./components/admin/Integrations'));
+const IntegrationSettings = React.lazy(() => import('./components/admin/Integrations/IntegrationSettings'));
 const TeamsNotification = React.lazy(() => import('./components/admin/notifications/MsTeams/Teams'));
 
 // Shared layout, etc.
@@ -213,6 +212,7 @@ class App extends React.Component {
                         <PrivateRoute path="/admin/users" component={Users} />
                         <PrivateRoute path="/admin/consumers" component={AdminConsumers} />
                         <PrivateRoute path="/admin/controlsAndRegulations" component={Regulations} />
+                        <PrivateRoute path="/admin/integrations/:integrationName" component={IntegrationSettings} />
                         <PrivateRoute path="/admin/integrations" component={Integrations} />
                         <PrivateRoute
                           path="/:applicationId/dataflowinstances/dataflowInstanceDetails/:dataflowId?/:executionGroupId?"

client-reactjs/src/components/admin/Integrations/IntegrationNotFound.jsx

@@ -0,0 +1,33 @@
+// Package Imports
+import React from 'react';
+import { Result, Button } from 'antd';
+import { useHistory } from 'react-router-dom';
+
+// Local Imports
+import './integrations.css';
+
+function IntegrationNotFound() {
+  const history = useHistory();
+
+  // Handle Go to Integration
+  const handleGoToIntegration = () => {
+    history.push('/admin/integrations');
+  };
+
+  return (
+    <div className="integrationSettings__unavailable">
+      <Result
+        status="500"
+        title="Oops !!"
+        subTitle="Integration settings not available."
+        extra={
+          <Button type="primary" onClick={handleGoToIntegration}>
+            Go to Integrations
+          </Button>
+        }
+      />
+    </div>
+  );
+}
+
+export default IntegrationNotFound;

client-reactjs/src/components/admin/Integrations/IntegrationSettings.jsx

@@ -0,0 +1,45 @@
+// Package imports
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+
+// Local imports
+import IntegrationNotFound from './IntegrationNotFound';
+
+function IntegrationSettings() {
+  // Redux
+  const {
+    applicationReducer: {
+      integrations,
+      application: { applicationId },
+    },
+  } = useSelector((state) => state);
+
+  // Integration name from URL
+  let { integrationName } = useParams();
+
+  // The integration name from url be present in the integrations list in redux store
+  const valid = integrations.some((i) => i.name === integrationName && i.application_id === applicationId);
+
+  // If the integration name is not valid, show the IntegrationNotFound component
+  if (!valid) {
+    return <IntegrationNotFound />;
+  } else {
+    // Try importing the integration component with the name - integrationName
+    // If error occurs, show the IntegrationNotFound component
+    try {
+      // pass relation id as props
+      const relation_id = integrations.find(
+        (i) => i.name === integrationName && i.application_id === applicationId
+      ).integration_to_app_mapping_id;
+
+      const IntegrationComponent = require(`./${integrationName.toLowerCase()}`).default;
+
+      return <IntegrationComponent integration_to_app_mapping_id={relation_id} />;
+    } catch (error) {
+      return <IntegrationNotFound />;
+    }
+  }
+}
+
+export default IntegrationSettings;