chore: fe router refactoring (#1551)

Author: AndreyNenashev

odd-platform-ui/src/components/Activity/ActivityResults/ActivityItem/ActivityItem.tsx

@@ -18,7 +18,6 @@ import {
 } from 'components/shared/elements/Activity';
 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';
 
@@ -33,7 +32,6 @@ const ActivityItem: React.FC<ActivityItemProps> = ({
   hideAllDetails,
   dataQA,
 }) => {
-  const { updatePath } = useIsEmbeddedPath();
   const { activityFormattedDateTime } = useAppDateTime();
 
   const tagStateItem = React.useCallback(
@@ -50,7 +48,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={updatePath(dataEntityDetailsPath(activity.dataEntity.id))}>
+          <Link to={dataEntityDetailsPath(activity.dataEntity.id)}>
             <Typography variant='h3' sx={{ mr: 1, width: 'max-content' }}>
               {activity.dataEntity.externalName || activity.dataEntity.internalName}
             </Typography>

odd-platform-ui/src/components/Alerts/AlertsList/AlertItem/AlertItem.tsx

@@ -9,7 +9,6 @@ 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';
 
@@ -31,7 +30,6 @@ const AlertItem: React.FC<AlertItemProps> = ({
 }) => {
   const dispatch = useAppDispatch();
   const { alertFormattedDateTime } = useAppDateTime();
-  const { updatePath } = useIsEmbeddedPath();
 
   const [showHistory, setShowHistory] = React.useState(false);
   const [disableResolve, setDisableResolve] = React.useState(false);
@@ -119,7 +117,7 @@ const AlertItem: React.FC<AlertItemProps> = ({
           <>
             <Button
               text={dataEntity.externalName || dataEntity.internalName}
-              to={updatePath(dataEntityDetailsPath(dataEntity.id))}
+              to={dataEntityDetailsPath(dataEntity.id)}
               buttonType='link-m'
             />
             {dataEntity?.entityClasses?.map(entityClass => (

odd-platform-ui/src/components/Alerts/AlertsTabs/AlertsTabs.tsx

@@ -4,9 +4,7 @@ import { type AppTabItem, AppTabs } from 'components/shared/elements';
 import { changeAlertsFilterAction } from 'redux/slices/alerts.slice';
 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 {
@@ -17,35 +15,32 @@ interface AlertsTabsProps {
 const AlertsTabs: React.FC<AlertsTabsProps> = ({ totals, showMyAndDepends }) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { updatePath } = useIsEmbeddedPath();
-  const match = useMatch(useLocation().pathname);
-
   const [selectedTab, setSelectedTab] = useState(-1);
 
   const tabs = useMemo<AppTabItem[]>(
     () => [
       {
         name: t('All'),
         hint: totals?.total ?? 0,
-        link: updatePath(alertsPath('all')),
+        link: alertsPath('all'),
       },
       {
         name: t('My Objects'),
         hint: totals?.myTotal ?? 0,
-        link: updatePath(alertsPath('my')),
+        link: alertsPath('my'),
         hidden: !showMyAndDepends,
       },
       {
         name: t('Dependents'),
         hint: totals?.dependentTotal ?? 0,
-        link: updatePath(alertsPath('dependents')),
+        link: alertsPath('dependents'),
         hidden: !showMyAndDepends,
       },
     ],
     [totals, showMyAndDepends, t]
   );
 
-  useSetSelectedTab(tabs, match, setSelectedTab);
+  useSetSelectedTab(tabs, setSelectedTab);
 
   const alertsFilterUpdateAction = useCallback(() => {
     dispatch(changeAlertsFilterAction());

odd-platform-ui/src/components/App.tsx

@@ -10,13 +10,17 @@ import {
   fetchIdentity,
   fetchTagsList,
 } from 'redux/thunks';
-import { useAppPaths } from 'lib/hooks';
 import {
+  activityPath,
   alertsPath,
+  dataEntitiesPath,
   dataModellingPath,
   dataQualityPath,
   directoryPath,
   managementPath,
+  searchPath,
+  termsPath,
+  termsSearchPath,
 } from 'routes';
 
 // lazy elements
@@ -35,16 +39,6 @@ const DataModeling = lazy(() => import('./DataModelling/DataModelling'));
 const App: React.FC = () => {
   const dispatch = useAppDispatch();
 
-  const {
-    isPathEmbedded,
-    SearchRoutes,
-    basePath,
-    TermsRoutes,
-    ActivityRoutes,
-    getNonExactPath,
-    getNonExactParamPath,
-  } = useAppPaths();
-
   useEffect(() => {
     dispatch(fetchDataEntitiesClassesAndTypes()).catch(() => {});
     dispatch(fetchIdentity()).catch(() => {});
@@ -55,38 +49,25 @@ const App: React.FC = () => {
   return (
     <div className='App'>
       <Toaster position='bottom-right' toastOptions={{ custom: { duration: 6000 } }} />
-      {!isPathEmbedded && <AppToolbar />}
+      <AppToolbar />
       <div style={{ paddingTop: `${toolbarHeight}px` }}>
         <AppSuspenseWrapper>
           <Routes>
-            <Route path={basePath} element={<Overview />} />
-            <Route path={getNonExactPath(SearchRoutes.search)} element={<Search />} />
-            <Route path={getNonExactPath(managementPath())} element={<Management />} />
-            <Route
-              path={getNonExactPath(TermsRoutes.termSearch)}
-              element={<TermSearch />}
-            />
-            <Route path={getNonExactPath(alertsPath())} element={<Alerts />} />
-            <Route
-              path={getNonExactPath(ActivityRoutes.activity)}
-              element={<Activity />}
-            />
-            <Route path={getNonExactPath(TermsRoutes.terms)} element={<TermDetails />}>
-              <Route path={getNonExactParamPath(TermsRoutes.termIdParam)} />
+            <Route path='/' element={<Overview />} />
+            <Route path={`${searchPath()}/*`} element={<Search />} />
+            <Route path={`${managementPath()}/*`} element={<Management />} />
+            <Route path={`${termsSearchPath()}/*`} element={<TermSearch />} />
+            <Route path={`${alertsPath()}/*`} element={<Alerts />} />
+            <Route path={activityPath()} element={<Activity />} />
+            <Route path={termsPath()}>
+              <Route path=':termId/*' element={<TermDetails />} />
+            </Route>
+            <Route path={dataEntitiesPath()}>
+              <Route path=':dataEntityId/*' element={<DataEntityDetails />} />
             </Route>
-            <Route
-              path={getNonExactPath('/dataentities/:dataEntityId')}
-              element={<DataEntityDetails />}
-            />
-            <Route
-              path={getNonExactPath(directoryPath())}
-              element={<DirectoryRoutes />}
-            />
-            <Route path={getNonExactPath(dataQualityPath())} element={<DataQuality />} />
-            <Route
-              path={getNonExactPath(dataModellingPath())}
-              element={<DataModeling />}
-            />
+            <Route path={`${directoryPath()}/*`} element={<DirectoryRoutes />} />
+            <Route path={dataQualityPath()} element={<DataQuality />} />
+            <Route path={`${dataModellingPath()}/*`} element={<DataModeling />} />
           </Routes>
         </AppSuspenseWrapper>
       </div>

odd-platform-ui/src/components/DataEntityDetails/DataCollaboration/CreateMessageForm/CreateMessageForm.tsx

@@ -13,7 +13,6 @@ 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 {
@@ -28,13 +27,12 @@ const CreateMessageForm: React.FC<CreateMessageFormProps> = ({
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
-  const { updatePath } = useIsEmbeddedPath();
 
   const { isLoading: isMessageCreating, isLoaded: isMessageCreated } = useAppSelector(
     getMessageToSlackCreatingStatuses
   );
 
-  const toCollaboration = updatePath(dataEntityDetailsPath(dataEntityId, 'discussions'));
+  const toCollaboration = dataEntityDetailsPath(dataEntityId, 'discussions');
 
   type MessageFormData = Omit<MessageRequest, 'dataEntityId'>;
 

odd-platform-ui/src/components/DataEntityDetails/DataCollaboration/CurrentMessage/Thread/Thread.tsx

@@ -10,7 +10,6 @@ import {
 } from 'redux/selectors';
 import { fetchRelatedMessages, messagesListSize as size } from 'redux/thunks';
 import { clearThreadState } from 'redux/slices/dataCollaboration.slice';
-import { useIsEmbeddedPath } from 'lib/hooks/useAppPaths/useIsEmbeddedPath';
 import { dataEntityDetailsPath, useDataEntityRouteParams } from 'routes';
 import ThreadContent from './ThreadContent/ThreadContent';
 
@@ -21,7 +20,6 @@ const Thread: React.FC<ThreadProps> = ({ messageDate }) => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const { dataEntityId, messageId } = useDataEntityRouteParams();
-  const { updatePath } = useIsEmbeddedPath();
 
   const mainMessage = useAppSelector(getDataEntityMessage(messageDate, messageId));
   const relatedMessages = useAppSelector(getRelatedMessages);
@@ -32,7 +30,7 @@ const Thread: React.FC<ThreadProps> = ({ messageDate }) => {
 
   React.useEffect(() => {
     if (relatedMessagesError) {
-      navigate(updatePath(dataEntityDetailsPath(dataEntityId, 'discussions')));
+      navigate(dataEntityDetailsPath(dataEntityId, 'discussions'));
     }
     dispatch(
       fetchRelatedMessages({ dataEntityId, messageId, size, lastMessageId: lastId })

odd-platform-ui/src/components/DataEntityDetails/DataCollaboration/CurrentMessage/Thread/ThreadContent/ThreadContent.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 import { type Message } from 'redux/interfaces';
 import { Button, EmptyContentPlaceholder } from 'components/shared/elements';
 import { ClearIcon } from 'components/shared/icons';
-import { useIsEmbeddedPath } from 'lib/hooks/useAppPaths/useIsEmbeddedPath';
 import { dataEntityDetailsPath } from 'routes';
 import ThreadMessage from './ThreadMessage/ThreadMessage';
 import MainThreadMessage from './MainThreadMessage/MainThreadMessage';
@@ -31,7 +30,6 @@ const ThreadContent: React.FC<ThreadContentProps> = ({
   isRelatedMessagesLoaded,
 }) => {
   const { t } = useTranslation();
-  const { updatePath } = useIsEmbeddedPath();
 
   return (
     <Grid
@@ -46,7 +44,7 @@ const ThreadContent: React.FC<ThreadContentProps> = ({
           {t('Thread')}
         </Typography>
         <Button
-          to={updatePath(dataEntityDetailsPath(dataEntityId, 'discussions'))}
+          to={dataEntityDetailsPath(dataEntityId, 'discussions')}
           buttonType='linkGray-m'
           icon={<ClearIcon viewBox='0 0 16 16' width={24} height={24} />}
           sx={{ ml: 2 }}

odd-platform-ui/src/components/DataEntityDetails/DataCollaboration/MessagesList/MessagesList.tsx

@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import { type MessagesByDate } from 'redux/interfaces';
 import { EmptyContentPlaceholder } from 'components/shared/elements';
-import { useIsEmbeddedPath } from 'lib/hooks/useAppPaths/useIsEmbeddedPath';
 import { dataEntityDiscussionsPath, useDataEntityRouteParams } from 'routes';
 import Message from './Message/Message';
 import * as S from './MessagesListStyles';
@@ -31,11 +30,9 @@ const MessagesList: React.FC<MessagesListProps> = ({
 }) => {
   const navigate = useNavigate();
   const { dataEntityId, messageId: routerMessageId } = useDataEntityRouteParams();
-  const { updatePath } = useIsEmbeddedPath();
-
   const handleMessageOnClick = React.useCallback(
     (messageId: string) => () => {
-      navigate(updatePath(dataEntityDiscussionsPath(dataEntityId, messageId)));
+      navigate(dataEntityDiscussionsPath(dataEntityId, messageId));
     },
     [dataEntityId]
   );

odd-platform-ui/src/components/DataEntityDetails/DataEntityDetailsTabs/DataEntityDetailsTabs.tsx

@@ -14,15 +14,13 @@ import {
   type ActivityQuery,
   defaultActivityQuery,
 } from 'components/shared/elements/Activity/common';
-import { useLocation, useMatch } from 'react-router-dom';
 import {
   dataEntityDetailsPath,
   dataEntityLineagePath,
   dataEntityTestReportsPath,
   useDataEntityRouteParams,
 } from 'routes';
 import useSetSelectedTab from 'components/shared/elements/AppTabs/useSetSelectedTab';
-import { useIsEmbeddedPath } from 'lib/hooks/useAppPaths/useIsEmbeddedPath';
 import { defaultLineageQuery } from '../Lineage/HierarchyLineage/lineageLib/constants';
 import { defaultDEGLineageQuery } from '../Lineage/DEGLineage/lib/constants';
 
@@ -35,7 +33,6 @@ const DataEntityDetailsTabs: React.FC = () => {
   const { defaultQueryString: activityQueryString } =
     useQueryParams<ActivityQuery>(defaultActivityQuery);
 
-  const { updatePath } = useIsEmbeddedPath();
   const openAlertsCount = useAppSelector(getDataEntityAlertsCount(dataEntityId));
   const dataEntityDetails = useAppSelector(getDataEntityDetails(dataEntityId));
   const datasetQualityTestReportTotal = useAppSelector(
@@ -45,63 +42,59 @@ const DataEntityDetailsTabs: React.FC = () => {
     getIsDataEntityBelongsToClass(dataEntityId)
   );
   const isStatusDeleted = useAppSelector(getIsEntityStatusDeleted(dataEntityId));
-  const match = useMatch(useLocation().pathname);
-
   const tabs = useMemo<AppTabItem[]>(
     () => [
       {
         name: t('Overview'),
-        link: updatePath(dataEntityDetailsPath(dataEntityId, 'overview')),
+        link: dataEntityDetailsPath(dataEntityId, 'overview'),
       },
       {
         name: t('Structure'),
-        link: updatePath(dataEntityDetailsPath(dataEntityId, 'structure')),
+        link: dataEntityDetailsPath(dataEntityId, 'structure'),
         hidden: !isDataset,
       },
       {
         name: t('Lineage'),
-        link: updatePath(
-          dataEntityLineagePath(
-            dataEntityId,
-            isDEG ? degLineageQueryString : lineageQueryString
-          )
+        link: dataEntityLineagePath(
+          dataEntityId,
+          isDEG ? degLineageQueryString : lineageQueryString
         ),
         hidden: isQualityTest || isStatusDeleted,
       },
       {
         name: t('Test reports'),
-        link: updatePath(dataEntityTestReportsPath(dataEntityId)),
+        link: dataEntityTestReportsPath(dataEntityId),
         hidden: !isDataset || !datasetQualityTestReportTotal || isStatusDeleted,
       },
       {
         name: t('History'),
-        link: updatePath(dataEntityDetailsPath(dataEntityId, 'history')),
+        link: dataEntityDetailsPath(dataEntityId, 'history'),
         hidden: (!isQualityTest && !isTransformer) || isStatusDeleted,
       },
       {
         name: t('Alerts'),
-        link: updatePath(dataEntityDetailsPath(dataEntityId, 'alerts')),
+        link: dataEntityDetailsPath(dataEntityId, 'alerts'),
         hint: openAlertsCount > 0 ? openAlertsCount : undefined,
         hintType: 'alert',
         hidden: isStatusDeleted,
       },
       {
         name: t('Linked entities'),
-        link: updatePath(dataEntityDetailsPath(dataEntityId, 'linked-entities')),
+        link: dataEntityDetailsPath(dataEntityId, 'linked-entities'),
         hidden: !dataEntityDetails?.hasChildren || isStatusDeleted,
       },
       {
         name: t('Query examples'),
-        link: updatePath(dataEntityDetailsPath(dataEntityId, 'query-examples')),
+        link: dataEntityDetailsPath(dataEntityId, 'query-examples'),
         hidden: !isDataset,
       },
       {
         name: t('Activity'),
-        link: updatePath(dataEntityDetailsPath(dataEntityId, 'activity')),
+        link: dataEntityDetailsPath(dataEntityId, 'activity'),
       },
       {
         name: t('Discussions'),
-        link: updatePath(dataEntityDetailsPath(dataEntityId, 'discussions')),
+        link: dataEntityDetailsPath(dataEntityId, 'discussions'),
         hidden: isStatusDeleted,
       },
     ],
@@ -124,7 +117,7 @@ const DataEntityDetailsTabs: React.FC = () => {
   );
 
   const [selectedTab, setSelectedTab] = React.useState(-1);
-  useSetSelectedTab(tabs, match, setSelectedTab);
+  useSetSelectedTab(tabs, setSelectedTab);
 
   return (
     <>