Merge branch 'develop' of https://dev.azure.com/imagetemplates/documati.io/_git/dqoado into develop

Author: piotrczarnas

dqops/src/main/frontend/src/components/IncidentsLayout/IncidentsTree.tsx

@@ -8,7 +8,8 @@ import { useActionDispatch } from '../../hooks/useActionDispatch';
 import {
   addFirstLevelTab,
   addSelectedConnection,
-  getConnections
+  getConnections,
+  setActiveFirstLevelTab
 } from '../../redux/actions/incidents.actions';
 import { IRootState } from '../../redux/reducers';
 import { ROUTES } from '../../shared/routes';
@@ -17,7 +18,7 @@ import SvgIcon from '../SvgIcon';
 
 const IncidentsTree = () => {
   const dispatch = useActionDispatch();
-  const { connections, activeTab, selectedConnections } = useSelector(
+  const { connections, activeTab, selectedConnections, tabs } = useSelector(
     (state: IRootState) => state.incidents
   );
   const selectedConnection =
@@ -58,6 +59,62 @@ const IncidentsTree = () => {
     history.push(url);
   };
 
+  const openCorrectTabFromUrl = () => {
+    if (
+      window.location.pathname === '/incidents' ||
+      window.location.pathname === '/incidents/'
+    ) {
+      return;
+    }
+
+    const path = window.location.pathname.split('/');
+    const connection = path[2];
+    const selectedConnection = connections.find(
+      (x) => x.connection === connection
+    );
+
+    if (selectedConnection && !path[3]) {
+      openFirstLevelTab(selectedConnection);
+    } else if (path[3]) {
+      const connection = path[2] || '';
+      const year = Number(path[3]);
+      const month = Number(path[4]);
+      const incidentId = path[5] || '';
+
+      dispatch(
+        addFirstLevelTab({
+          url: ROUTES.INCIDENT_DETAIL(connection, year, month, incidentId),
+          value: ROUTES.INCIDENT_DETAIL_VALUE(
+            connection,
+            year,
+            month,
+            incidentId
+          ),
+          state: {},
+          label: incidentId
+        })
+      );
+
+      dispatch(
+        setActiveFirstLevelTab(
+          ROUTES.INCIDENT_DETAIL(connection, year, month, incidentId)
+        )
+      );
+      history.push(ROUTES.INCIDENT_DETAIL(connection, year, month, incidentId));
+    }
+  };
+
+  useEffect(() => {
+    openCorrectTabFromUrl();
+  }, [window.location.pathname, connections]);
+
+  // useEffect(() => {
+  //   if (activeTab) {
+  //     dispatch(setActiveFirstLevelTab(activeTab));
+  //     history.push(activeTab);
+  //   }
+  // }, [activeTab]);
+
   const openConnection = (connection: IncidentsPerConnectionModel) => {
     dispatch(
       addSelectedConnection({

dqops/src/main/frontend/src/components/IncidentsLayout/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useMemo } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
@@ -12,7 +12,6 @@ import {
 } from '../../redux/actions/incidents.actions';
 import { IRootState } from '../../redux/reducers';
 import { ROUTES } from '../../shared/routes';
-import { urlencodeDecoder } from '../../utils';
 import ConfirmDialog from '../CustomTree/ConfirmDialog';
 import Header from '../Header';
 import PageTabs from '../PageTabs';
@@ -24,26 +23,34 @@ interface LayoutProps {
 }
 
 const IncidentsLayout = ({ route }: LayoutProps) => {
-  const { objectNotFound, setObjectNotFound } = useTree()
-  
+  const { objectNotFound, setObjectNotFound } = useTree();
+
   const { tabs: pageTabs, activeTab } = useSelector(
     (state: IRootState) => state.incidents
   );
-  
+
   const dispatch = useDispatch();
   const history = useHistory();
 
-
   const handleChange = (tab: TabOption) => {
+    if (tab.url === window.location.pathname) {
+      return;
+    }
     dispatch(setActiveFirstLevelTab(tab.value));
-    history.push(urlencodeDecoder(tab?.url ?? ''));
+    history.push(tab.value);
   };
 
   const closeTab = (value: string) => {
+    const tabIndex = pageTabs.findIndex((item) => item.url === value);
+    dispatch(closeFirstLevelTab(value));
     if (pageTabs.length === 1) {
-      history.push(`/incidents`)
+      history.push(`/incidents`);
+      return;
     }
-    dispatch(closeFirstLevelTab(value));
+    history.push(pageTabs[tabIndex - 1]?.url || pageTabs[0]?.url);
+    dispatch(
+      setActiveFirstLevelTab(pageTabs[tabIndex - 1]?.url || pageTabs[0]?.url)
+    );
   };
 
   const tabOptions = useMemo(() => {
@@ -56,21 +63,14 @@ const IncidentsLayout = ({ route }: LayoutProps) => {
     );
   }, [pageTabs]);
 
-  useEffect(() => {
-    if (activeTab) {
-      dispatch(setActiveFirstLevelTab(activeTab));
-      history.push(activeTab);
-    }
-  }, [activeTab]);
-
   const getComponent = () => {
     switch (route) {
       case ROUTES.PATTERNS.INCIDENT_DETAIL:
-        return <IncidentDetail/>;
+        return <IncidentDetail />;
       case ROUTES.PATTERNS.INCIDENTS:
-        return <Incidents/>;
+        return <Incidents />;
       case ROUTES.PATTERNS.INCIDENT_CONNECTION:
-        return <IncidentConnection/>;  
+        return <IncidentConnection />;
       default:
         return null;
     }
@@ -105,17 +105,26 @@ const IncidentsLayout = ({ route }: LayoutProps) => {
               limit={7}
             />
             <div className="bg-white border border-gray-300 flex-auto min-h-0 overflow-auto">
-              {!!activeTab && activeTab !== '/incidents/new-tab' && <>{renderComponent}</>}
+              {!!activeTab && activeTab !== '/incidents/new-tab' && (
+                <>{renderComponent}</>
+              )}
             </div>
           </div>
         </div>
       </div>
       <ConfirmDialog
-      open={objectNotFound}
-      onConfirm={() => new Promise(() => {dispatch(closeFirstLevelTab(activeTab)), setObjectNotFound(false)})}
-      isCancelExcluded={true} 
-      onClose={() => {dispatch(closeFirstLevelTab(activeTab)), setObjectNotFound(false)}}
-      message='The definition of this object was deleted in the DQOps user home. The tab will be closed.'/>
+        open={objectNotFound}
+        onConfirm={() =>
+          new Promise(() => {
+            dispatch(closeFirstLevelTab(activeTab)), setObjectNotFound(false);
+          })
+        }
+        isCancelExcluded={true}
+        onClose={() => {
+          dispatch(closeFirstLevelTab(activeTab)), setObjectNotFound(false);
+        }}
+        message="The definition of this object was deleted in the DQOps user home. The tab will be closed."
+      />
     </div>
   );
 };

dqops/src/main/frontend/src/pages/IncidentConnection/index.tsx

@@ -154,6 +154,14 @@ export const IncidentConnection = () => {
         label: row.incidentId
       })
     );
+    history.push(
+      ROUTES.INCIDENT_DETAIL_VALUE(
+        row.connection || '',
+        row.year || 0,
+        row.month || 0,
+        row.incidentId || ''
+      )
+    );
   };
 
   const handleSortChange = (
@@ -225,16 +233,11 @@ export const IncidentConnection = () => {
         />
       ),
       label: 'Table',
-      className: 'text-left text-sm py-2 px-4 max-w-40 min-w-35 whitespace-normal break-all',
+      className:
+        'text-left text-sm py-2 px-4 max-w-40 min-w-35 whitespace-normal break-all',
       value: 'table',
       render: (value: string) => {
-        return (
-          <div
-            className="cursor-pointer text-sm text-start"
-          >
-            {value}
-          </div>
-        );
+        return <div className="cursor-pointer text-sm text-start">{value}</div>;
       }
     },
     {