chore(fe): decompose routes (#1540)

opendatadiscovery · Dec 4, 2023 · 4a182f1 · 4a182f1
1 parent f3ef5cb
commit 4a182f1
Show file tree

Hide file tree

Showing 123 changed files with 923 additions and 1,089 deletions.
diff --git a/odd-platform-ui/package.json b/odd-platform-ui/package.json
@@ -79,7 +79,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-multi-date-picker": "^4.4.1",
     "react-redux": "^8.1.2",
-    "react-router-dom": "^6.20.0",
+    "react-router-dom": "^6.20.1",
     "react-truncate-markup": "^5.1.2",
     "recharts": "^2.10.2",
     "styled-components": "^6.1.1",

diff --git a/odd-platform-ui/pnpm-lock.yaml b/odd-platform-ui/pnpm-lock.yaml
diff --git a/odd-platform-ui/src/components/Activity/ActivityResults/ActivityItem/ActivityItem.tsx b/odd-platform-ui/src/components/Activity/ActivityResults/ActivityItem/ActivityItem.tsx
@@ -16,8 +16,10 @@ import {
   DatasetTermActivityField,
   EntityStatusActivityField,
 } from 'components/shared/elements/Activity';
-import { useAppDateTime, useAppPaths } from 'lib/hooks';
+import { useAppDateTime } from 'lib/hooks';
 import type { Activity } from 'redux/interfaces';
+import { useIsEmbeddedPath } from 'lib/hooks/useAppPaths/useIsEmbeddedPath';
+import { dataEntityDetailsPath } from 'routes';
 import * as S from './ActivityItemStyles';
 
 interface ActivityItemProps {
@@ -31,7 +33,7 @@ const ActivityItem: React.FC<ActivityItemProps> = ({
   hideAllDetails,
   dataQA,
 }) => {
-  const { dataEntityOverviewPath } = useAppPaths();
+  const { updatePath } = useIsEmbeddedPath();
   const { activityFormattedDateTime } = useAppDateTime();
 
   const tagStateItem = React.useCallback(
@@ -48,7 +50,7 @@ const ActivityItem: React.FC<ActivityItemProps> = ({
     <S.Container container data-qa={dataQA}>
       <Grid container justifyContent='space-between' flexWrap='nowrap'>
         <Grid item display='flex' flexWrap='nowrap' alignItems='center'>
-          <Link to={dataEntityOverviewPath(activity.dataEntity.id)}>
+          <Link to={updatePath(dataEntityDetailsPath(activity.dataEntity.id))}>
             <Typography variant='h3' sx={{ mr: 1, width: 'max-content' }}>
               {activity.dataEntity.externalName || activity.dataEntity.internalName}
             </Typography>

diff --git a/odd-platform-ui/src/components/Alerts/AlertsList/AlertItem/AlertItem.tsx b/odd-platform-ui/src/components/Alerts/AlertsList/AlertItem/AlertItem.tsx
@@ -4,11 +4,13 @@ import type { Alert } from 'redux/interfaces';
 import { AlertStatus, Permission, PermissionResourceType } from 'generated-sources';
 import { useAppDispatch, useAppSelector } from 'redux/lib/hooks';
 import { fetchResourcePermissions, updateAlertStatus } from 'redux/thunks';
-import { useAppDateTime, useAppPaths } from 'lib/hooks';
+import { useAppDateTime } from 'lib/hooks';
 import { GearIcon, UserIcon } from 'components/shared/icons';
 import { AlertStatusItem, Button, EntityClassItem } from 'components/shared/elements';
 import { alertTitlesMap } from 'lib/constants';
 import { getGlobalPermissions } from 'redux/selectors';
+import { useIsEmbeddedPath } from 'lib/hooks/useAppPaths/useIsEmbeddedPath';
+import { dataEntityDetailsPath } from 'routes';
 import * as S from './AlertItemStyles';
 
 interface AlertItemProps {
@@ -29,7 +31,7 @@ const AlertItem: React.FC<AlertItemProps> = ({
 }) => {
   const dispatch = useAppDispatch();
   const { alertFormattedDateTime } = useAppDateTime();
-  const { dataEntityOverviewPath } = useAppPaths();
+  const { updatePath } = useIsEmbeddedPath();
 
   const [showHistory, setShowHistory] = React.useState(false);
   const [disableResolve, setDisableResolve] = React.useState(false);
@@ -117,7 +119,7 @@ const AlertItem: React.FC<AlertItemProps> = ({
           <>
             <Button
               text={dataEntity.externalName || dataEntity.internalName}
-              to={dataEntityOverviewPath(dataEntity.id)}
+              to={updatePath(dataEntityDetailsPath(dataEntity.id))}
               buttonType='link-m'
             />
             {dataEntity?.entityClasses?.map(entityClass => (

diff --git a/odd-platform-ui/src/components/Alerts/AlertsRoutes/AlertsRoutes.tsx b/odd-platform-ui/src/components/Alerts/AlertsRoutes/AlertsRoutes.tsx
@@ -5,29 +5,18 @@ import {
   fetchMyAlertList,
   fetchMyDependentsAlertList,
 } from 'redux/thunks';
-import { useAppPaths } from 'lib/hooks';
 import AlertsList from '../AlertsList/AlertsList';
 
-const AlertsRoutes: React.FC = () => {
-  const { AlertsRoutes: AlertsRoutesEnum } = useAppPaths();
-
-  return (
-    <Routes>
-      <Route
-        path={AlertsRoutesEnum.all}
-        element={<AlertsList fetchAlerts={fetchAllAlertList} />}
-      />
-      <Route
-        path={AlertsRoutesEnum.my}
-        element={<AlertsList fetchAlerts={fetchMyAlertList} />}
-      />
-      <Route
-        path={AlertsRoutesEnum.dependents}
-        element={<AlertsList fetchAlerts={fetchMyDependentsAlertList} />}
-      />
-      <Route path='/' element={<Navigate to={AlertsRoutesEnum.all} replace />} />
-    </Routes>
-  );
-};
+const AlertsRoutes: React.FC = () => (
+  <Routes>
+    <Route path='all' element={<AlertsList fetchAlerts={fetchAllAlertList} />} />
+    <Route path='my' element={<AlertsList fetchAlerts={fetchMyAlertList} />} />
+    <Route
+      path='dependents'
+      element={<AlertsList fetchAlerts={fetchMyDependentsAlertList} />}
+    />
+    <Route path='/' element={<Navigate to='all' replace />} />
+  </Routes>
+);
 
 export default AlertsRoutes;
diff --git a/odd-platform-ui/src/components/Alerts/AlertsTabs/AlertsTabs.tsx b/odd-platform-ui/src/components/Alerts/AlertsTabs/AlertsTabs.tsx
@@ -1,10 +1,13 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { type AppTabItem, AppTabs } from 'components/shared/elements';
 import { changeAlertsFilterAction } from 'redux/slices/alerts.slice';
-import { useAppParams, useAppPaths } from 'lib/hooks';
 import { useAppDispatch } from 'redux/lib/hooks';
 import type { AlertTotals } from 'generated-sources';
+import { useIsEmbeddedPath } from 'lib/hooks/useAppPaths/useIsEmbeddedPath';
+import { alertsPath } from 'routes';
+import { useLocation, useMatch } from 'react-router-dom';
+import useSetSelectedTab from 'components/shared/elements/AppTabs/useSetSelectedTab';
 
 interface AlertsTabsProps {
   totals: AlertTotals;
@@ -14,8 +17,8 @@ interface AlertsTabsProps {
 const AlertsTabs: React.FC<AlertsTabsProps> = ({ totals, showMyAndDepends }) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { alertsViewType } = useAppParams();
-  const { AlertsRoutes } = useAppPaths();
+  const { updatePath } = useIsEmbeddedPath();
+  const match = useMatch(useLocation().pathname);
 
   const [selectedTab, setSelectedTab] = useState(-1);
 
@@ -24,34 +27,27 @@ const AlertsTabs: React.FC<AlertsTabsProps> = ({ totals, showMyAndDepends }) =>
       {
         name: t('All'),
         hint: totals?.total ?? 0,
-        value: AlertsRoutes.all,
-        link: AlertsRoutes.all,
+        link: updatePath(alertsPath('all')),
       },
       {
         name: t('My Objects'),
         hint: totals?.myTotal ?? 0,
-        value: AlertsRoutes.my,
-        link: AlertsRoutes.my,
+        link: updatePath(alertsPath('my')),
         hidden: !showMyAndDepends,
       },
       {
         name: t('Dependents'),
         hint: totals?.dependentTotal ?? 0,
-        value: AlertsRoutes.dependents,
-        link: AlertsRoutes.dependents,
+        link: updatePath(alertsPath('dependents')),
         hidden: !showMyAndDepends,
       },
     ],
     [totals, showMyAndDepends, t]
   );
 
-  React.useEffect(() => {
-    setSelectedTab(
-      alertsViewType ? tabs.findIndex(tab => tab.value === alertsViewType) : 0
-    );
-  }, [tabs, alertsViewType]);
+  useSetSelectedTab(tabs, match, setSelectedTab);
 
-  const alertsFilterUpdateAction = React.useCallback(() => {
+  const alertsFilterUpdateAction = useCallback(() => {
     dispatch(changeAlertsFilterAction());
   }, []);
 

diff --git a/odd-platform-ui/src/components/App.tsx b/odd-platform-ui/src/components/App.tsx
@@ -11,14 +11,16 @@ import {
   fetchTagsList,
 } from 'redux/thunks';
 import { useAppPaths } from 'lib/hooks';
-import { DataModellingRoutes } from 'routes/dataModellingRoutes';
-import { DataEntitiesRoutes } from 'routes/dataEntitiesRoutes';
+import {
+  alertsPath,
+  dataModellingPath,
+  dataQualityPath,
+  directoryPath,
+  managementPath,
+} from 'routes';
 
 // lazy elements
 const Management = lazy(() => import('./Management/Management'));
-const ManagementRoutes = lazy(
-  () => import('./Management/ManagementRoutes/ManagementRoutes')
-);
 const DataEntityDetails = lazy(() => import('./DataEntityDetails/DataEntityDetails'));
 const TermDetails = lazy(() => import('./Terms/TermDetails/TermDetails'));
 const Overview = lazy(() => import('./Overview/Overview'));
@@ -35,14 +37,10 @@ const App: React.FC = () => {
 
   const {
     isPathEmbedded,
-    ManagementRoutes: ManagementRoutesEnum,
     SearchRoutes,
     basePath,
     TermsRoutes,
     ActivityRoutes,
-    AlertsRoutes,
-    DirectoryRoutes: DirectoryRoutesEnum,
-    DataQualityRoutes,
     getNonExactPath,
     getNonExactParamPath,
   } = useAppPaths();
@@ -63,20 +61,12 @@ const App: React.FC = () => {
           <Routes>
             <Route path={basePath} element={<Overview />} />
             <Route path={getNonExactPath(SearchRoutes.search)} element={<Search />} />
-            <Route
-              path={getNonExactPath(ManagementRoutesEnum.management)}
-              element={<Management />}
-            >
-              <Route
-                path={getNonExactParamPath(ManagementRoutesEnum.managementViewTypeParam)}
-                element={<ManagementRoutes />}
-              />
-            </Route>
+            <Route path={getNonExactPath(managementPath())} element={<Management />} />
             <Route
               path={getNonExactPath(TermsRoutes.termSearch)}
               element={<TermSearch />}
             />
-            <Route path={getNonExactPath(AlertsRoutes.alerts)} element={<Alerts />} />
+            <Route path={getNonExactPath(alertsPath())} element={<Alerts />} />
             <Route
               path={getNonExactPath(ActivityRoutes.activity)}
               element={<Activity />}
@@ -85,19 +75,16 @@ const App: React.FC = () => {
               <Route path={getNonExactParamPath(TermsRoutes.termIdParam)} />
             </Route>
             <Route
-              path={getNonExactPath(DataEntitiesRoutes.BASE_PATH)}
+              path={getNonExactPath('/dataentities/:dataEntityId')}
               element={<DataEntityDetails />}
             />
             <Route
-              path={getNonExactPath(DirectoryRoutesEnum.directory)}
+              path={getNonExactPath(directoryPath())}
               element={<DirectoryRoutes />}
             />
+            <Route path={getNonExactPath(dataQualityPath())} element={<DataQuality />} />
             <Route
-              path={getNonExactPath(DataQualityRoutes.dataQuality)}
-              element={<DataQuality />}
-            />
-            <Route
-              path={getNonExactPath(DataModellingRoutes.BASE_PATH)}
+              path={getNonExactPath(dataModellingPath())}
               element={<DataModeling />}
             />
           </Routes>

diff --git a/odd-platform-ui/src/components/DataEntityDetails/DataCollaboration/Channels/Channels.tsx b/odd-platform-ui/src/components/DataEntityDetails/DataCollaboration/Channels/Channels.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import { useAppParams } from 'lib/hooks';
 import { DataEntityChannelsAutocomplete } from 'components/shared/elements';
+import { useDataEntityRouteParams } from 'routes';
 import * as S from './ChannelsStyles';
 
 interface ChannelsProps {
   handleSetChannelId: (id: string | undefined) => void;
 }
 
 const Channels: React.FC<ChannelsProps> = ({ handleSetChannelId }) => {
-  const { dataEntityId } = useAppParams();
+  const { dataEntityId } = useDataEntityRouteParams();
 
   return (
     <S.Container container>

diff --git a/...rc/components/DataEntityDetails/DataCollaboration/CreateMessageForm/CreateMessageForm.tsx b/...rc/components/DataEntityDetails/DataCollaboration/CreateMessageForm/CreateMessageForm.tsx
@@ -3,7 +3,6 @@ import { Typography } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { useAppPaths } from 'lib/hooks';
 import { useAppDispatch, useAppSelector } from 'redux/lib/hooks';
 import { createMessageToSlack } from 'redux/thunks';
 import {
@@ -14,6 +13,8 @@ import {
 } from 'components/shared/elements';
 import { type MessageRequest } from 'generated-sources';
 import { getMessageToSlackCreatingStatuses } from 'redux/selectors';
+import { useIsEmbeddedPath } from 'lib/hooks/useAppPaths/useIsEmbeddedPath';
+import { dataEntityDetailsPath } from 'routes';
 
 interface CreateMessageFormProps {
   dataEntityId: number;
@@ -27,13 +28,13 @@ const CreateMessageForm: React.FC<CreateMessageFormProps> = ({
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
-  const { dataEntityCollaborationPath } = useAppPaths();
+  const { updatePath } = useIsEmbeddedPath();
 
   const { isLoading: isMessageCreating, isLoaded: isMessageCreated } = useAppSelector(
     getMessageToSlackCreatingStatuses
   );
 
-  const toCollaboration = dataEntityCollaborationPath(dataEntityId);
+  const toCollaboration = updatePath(dataEntityDetailsPath(dataEntityId, 'discussions'));
 
   type MessageFormData = Omit<MessageRequest, 'dataEntityId'>;