Feat: add parma link support for entity tabs (#1128)

* Feat: add parma link support for dataset tabs

* Feat: add parma link support for dashboard, pipeline and topic page

* Fix: miner fix for explorepage

* code re-factore and add requested changes

* Feat: Add deep link support for schema and sample data tab in dataset details

* change url format for schema and sample table tab

catalog-rest-service/src/main/resources/ui/src/components/Explore/Explore.component.tsx

@@ -16,7 +16,7 @@
 */
 
 import classNames from 'classnames';
-import { cloneDeep, isUndefined } from 'lodash';
+import { cloneDeep } from 'lodash';
 import {
   AggregationType,
   FilterObject,
@@ -456,7 +456,7 @@ const Explore: React.FC<ExploreProps> = ({
 
   useEffect(() => {
     if (!isMounting.current && previsouIndex === getCurrentIndex(tab)) {
-      forceSetAgg.current = isUndefined(tab);
+      forceSetAgg.current = false;
       fetchTableData();
     }
   }, [currentPage, filters, sortField, sortOrder]);

catalog-rest-service/src/main/resources/ui/src/components/SchemaTab/SchemaTab.component.tsx

@@ -15,8 +15,11 @@
   * limitations under the License.
 */
 
-import { lowerCase } from 'lodash';
-import React, { FunctionComponent, useState } from 'react';
+import { isUndefined, lowerCase } from 'lodash';
+import { DatasetSchemaTableTab } from 'Models';
+import React, { FunctionComponent, useEffect, useState } from 'react';
+import { useHistory, useParams } from 'react-router';
+import { getDatasetTabPath } from '../../constants/constants';
 import {
   ColumnJoins,
   Table,
@@ -49,17 +52,32 @@ const SchemaTab: FunctionComponent<Props> = ({
   owner,
   isReadOnly = false,
 }: Props) => {
+  const history = useHistory();
+  const { datasetFQN: tableFQN, tab } = useParams() as Record<string, string>;
   const [searchText, setSearchText] = useState('');
-  const [checkedValue, setCheckedValue] = useState('schema');
+  const [checkedValue, setCheckedValue] =
+    useState<DatasetSchemaTableTab>('schema');
 
   const handleSearchAction = (searchValue: string) => {
     setSearchText(searchValue);
   };
 
-  const handleToggleChange = (value: string) => {
+  const handleToggleChange = (value: DatasetSchemaTableTab) => {
     setCheckedValue(value);
+    history.push({
+      pathname: getDatasetTabPath(tableFQN, value),
+    });
   };
 
+  useEffect(() => {
+    if (tab && ['schema', 'sample_data'].includes(tab)) {
+      const activeTab = isUndefined(tab)
+        ? 'schema'
+        : (tab as DatasetSchemaTableTab);
+      setCheckedValue(activeTab);
+    }
+  }, [tab]);
+
   const getToggleButtonClasses = (type: string): string => {
     return (
       'tw-flex-1 tw-text-primary tw-font-medium tw-border tw-border-transparent tw-rounded tw-py-1 tw-px-2 focus:tw-outline-none' +
@@ -115,10 +133,10 @@ const SchemaTab: FunctionComponent<Props> = ({
                 Schema
               </button>
               <button
-                className={getToggleButtonClasses('sample-data')}
+                className={getToggleButtonClasses('sample_data')}
                 data-testid="sample-data-button"
                 onClick={() => {
-                  handleToggleChange('sample-data');
+                  handleToggleChange('sample_data');
                 }}>
                 Sample Data
               </button>

catalog-rest-service/src/main/resources/ui/src/constants/constants.ts

@@ -123,11 +123,15 @@ export const ROUTES = {
   SIGNUP: '/signup',
   SIGNIN: '/signin',
   DATASET_DETAILS: `/dataset/${PLACEHOLDER_ROUTE_DATASET_FQN}`,
+  DATASET_DETAILS_WITH_TAB: `/dataset/${PLACEHOLDER_ROUTE_DATASET_FQN}/${PLACEHOLDER_ROUTE_TAB}`,
   DATASET_VERSION: `/dataset/${PLACEHOLDER_ROUTE_DATASET_FQN}/versions/${PLAEHOLDER_ROUTE_VERSION}`,
   TOPIC_DETAILS: `/topic/${PLACEHOLDER_ROUTE_TOPIC_FQN}`,
+  TOPIC_DETAILS_WITH_TAB: `/topic/${PLACEHOLDER_ROUTE_TOPIC_FQN}/${PLACEHOLDER_ROUTE_TAB}`,
   DASHBOARD_DETAILS: `/dashboard/${PLACEHOLDER_ROUTE_DASHBOARD_FQN}`,
+  DASHBOARD_DETAILS_WITH_TAB: `/dashboard/${PLACEHOLDER_ROUTE_DASHBOARD_FQN}/${PLACEHOLDER_ROUTE_TAB}`,
   DATABASE_DETAILS: `/database/${PLACEHOLDER_ROUTE_DATABASE_FQN}`,
   PIPELINE_DETAILS: `/pipeline/${PLACEHOLDER_ROUTE_PIPELINE_FQN}`,
+  PIPELINE_DETAILS_WITH_TAB: `/pipeline/${PLACEHOLDER_ROUTE_PIPELINE_FQN}/${PLACEHOLDER_ROUTE_TAB}`,
   ONBOARDING: '/onboarding',
 };
 
@@ -144,6 +148,7 @@ export const getDatasetDetailsPath = (
 
   return `${path}${columnName ? `.${columnName}` : ''}`;
 };
+
 export const getDatasetVersionPath = (datasetFQN: string, version: string) => {
   let path = ROUTES.DATASET_VERSION;
   path = path
@@ -153,6 +158,15 @@ export const getDatasetVersionPath = (datasetFQN: string, version: string) => {
   return path;
 };
 
+export const getDatasetTabPath = (datasetFQN: string, tab = 'schema') => {
+  let path = ROUTES.DATASET_DETAILS_WITH_TAB;
+  path = path
+    .replace(PLACEHOLDER_ROUTE_DATASET_FQN, datasetFQN)
+    .replace(PLACEHOLDER_ROUTE_TAB, tab);
+
+  return path;
+};
+
 export const getServiceDetailsPath = (
   serviceFQN: string,
   serviceType: string
@@ -181,24 +195,39 @@ export const getDatabaseDetailsPath = (databaseFQN: string) => {
   return path;
 };
 
-export const getTopicDetailsPath = (topicFQN: string) => {
-  let path = ROUTES.TOPIC_DETAILS;
+export const getTopicDetailsPath = (topicFQN: string, tab?: string) => {
+  let path = tab ? ROUTES.TOPIC_DETAILS_WITH_TAB : ROUTES.TOPIC_DETAILS;
   path = path.replace(PLACEHOLDER_ROUTE_TOPIC_FQN, topicFQN);
 
+  if (tab) {
+    path = path.replace(PLACEHOLDER_ROUTE_TAB, tab);
+  }
+
   return path;
 };
-export const getDashboardDetailsPath = (dashboardFQN: string) => {
-  let path = ROUTES.DASHBOARD_DETAILS;
+
+export const getDashboardDetailsPath = (dashboardFQN: string, tab?: string) => {
+  let path = tab ? ROUTES.DASHBOARD_DETAILS_WITH_TAB : ROUTES.DASHBOARD_DETAILS;
   path = path.replace(PLACEHOLDER_ROUTE_DASHBOARD_FQN, dashboardFQN);
 
-  return path;
-};
-export const getPipelineDetailsPath = (pipelineFQN: string) => {
-  let path = ROUTES.PIPELINE_DETAILS;
-  path = path.replace(PLACEHOLDER_ROUTE_PIPELINE_FQN, pipelineFQN);
+  if (tab) {
+    path = path.replace(PLACEHOLDER_ROUTE_TAB, tab);
+  }
 
   return path;
 };
+
+export const getPipelineDetailsPath = (pipelineFQN: string, tab?: string) => {
+  let path = tab ? ROUTES.PIPELINE_DETAILS_WITH_TAB : ROUTES.PIPELINE_DETAILS;
+  path = path.replace(PLACEHOLDER_ROUTE_PIPELINE_FQN, pipelineFQN);
+
+  if (tab) {
+    path = path.replace(PLACEHOLDER_ROUTE_TAB, tab);
+  }
+
+  return path;
+};
+
 export const getTeamDetailsPath = (teamName: string) => {
   let path = ROUTES.TEAM_DETAILS;
   path = path.replace(PLACEHOLDER_ROUTE_TEAM, teamName);

catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts

@@ -393,4 +393,6 @@ declare module 'Models' {
   export interface RecentlyViewed {
     data: Array<RecentlyViewedData>;
   }
+
+  export type DatasetSchemaTableTab = 'schema' | 'sample_data';
 }

catalog-rest-service/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx

@@ -2,7 +2,7 @@ import { AxiosPromise, AxiosResponse } from 'axios';
 import { compare, Operation } from 'fast-json-patch';
 import { EntityTags, TableDetail } from 'Models';
 import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import AppState from '../../AppState';
 import { getChartById, updateChart } from '../../axiosAPIs/chartAPI';
 import {
@@ -15,12 +15,19 @@ import { getServiceById } from '../../axiosAPIs/serviceAPI';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import DashboardDetails from '../../components/DashboardDetails/DashboardDetails.component';
 import Loader from '../../components/Loader/Loader';
-import { getServiceDetailsPath } from '../../constants/constants';
+import {
+  getDashboardDetailsPath,
+  getServiceDetailsPath,
+} from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import { Chart } from '../../generated/entity/data/chart';
 import { Dashboard } from '../../generated/entity/data/dashboard';
 import { User } from '../../generated/entity/teams/user';
 import { addToRecentViewed, getCurrentUserId } from '../../utils/CommonUtils';
+import {
+  dashboardDetailsTabs,
+  getCurrentDashboardTab,
+} from '../../utils/DashboardDetailsUtils';
 import { serviceTypeLogo } from '../../utils/ServiceUtils';
 import {
   getOwnerFromId,
@@ -31,10 +38,13 @@ import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
 type ChartType = {
   displayName: string;
 } & Chart;
+
 const DashboardDetailsPage = () => {
   const USERId = getCurrentUserId();
+  const history = useHistory();
+
   const [tagList, setTagList] = useState<Array<string>>([]);
-  const { dashboardFQN } = useParams() as Record<string, string>;
+  const { dashboardFQN, tab } = useParams() as Record<string, string>;
   const [dashboardDetails, setDashboardDetails] = useState<Dashboard>(
     {} as Dashboard
   );
@@ -45,7 +55,9 @@ const DashboardDetailsPage = () => {
   const [owner, setOwner] = useState<TableDetail['owner']>();
   const [tier, setTier] = useState<string>();
   const [tags, setTags] = useState<Array<EntityTags>>([]);
-  const [activeTab, setActiveTab] = useState<number>(1);
+  const [activeTab, setActiveTab] = useState<number>(
+    getCurrentDashboardTab(tab)
+  );
   const [charts, setCharts] = useState<ChartType[]>([]);
   const [dashboardUrl, setDashboardUrl] = useState<string>('');
   const [displayName, setDisplayName] = useState<string>('');
@@ -55,9 +67,26 @@ const DashboardDetailsPage = () => {
   >([]);
 
   const activeTabHandler = (tabValue: number) => {
-    setActiveTab(tabValue);
+    const currentTabIndex = tabValue - 1;
+    if (dashboardDetailsTabs[currentTabIndex].path !== tab) {
+      setActiveTab(
+        getCurrentDashboardTab(dashboardDetailsTabs[currentTabIndex].path)
+      );
+      history.push({
+        pathname: getDashboardDetailsPath(
+          dashboardFQN,
+          dashboardDetailsTabs[currentTabIndex].path
+        ),
+      });
+    }
   };
 
+  useEffect(() => {
+    if (dashboardDetailsTabs[activeTab - 1].path !== tab) {
+      setActiveTab(getCurrentDashboardTab(tab));
+    }
+  }, [tab]);
+
   const saveUpdatedDashboardData = (
     updatedData: Dashboard
   ): Promise<AxiosResponse> => {

catalog-rest-service/src/main/resources/ui/src/pages/DatasetDetailsPage/DatasetDetailsPage.component.tsx

@@ -36,6 +36,7 @@ import DatasetDetails from '../../components/DatasetDetails/DatasetDetails.compo
 import Loader from '../../components/Loader/Loader';
 import {
   getDatabaseDetailsPath,
+  getDatasetTabPath,
   getDatasetVersionPath,
   getServiceDetailsPath,
 } from '../../constants/constants';
@@ -53,13 +54,18 @@ import {
   getCurrentUserId,
   getPartialNameFromFQN,
 } from '../../utils/CommonUtils';
+import {
+  datasetTableTabs,
+  getCurrentDatasetTab,
+} from '../../utils/DatasetDetailsUtils';
 import { serviceTypeLogo } from '../../utils/ServiceUtils';
 import { getOwnerFromId, getTierFromTableTags } from '../../utils/TableUtils';
 import { getTableTags } from '../../utils/TagsUtils';
 
 const DatasetDetailsPage: FunctionComponent = () => {
   const history = useHistory();
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isLineageLoading, setIsLineageLoading] = useState<boolean>(true);
   const USERId = getCurrentUserId();
   const [tableId, setTableId] = useState('');
   const [tier, setTier] = useState<string>();
@@ -85,8 +91,8 @@ const DatasetDetailsPage: FunctionComponent = () => {
   });
   const [tableProfile, setTableProfile] = useState<Table['tableProfile']>([]);
   const [tableDetails, setTableDetails] = useState<Table>({} as Table);
-  const [activeTab, setActiveTab] = useState<number>(1);
-  const { datasetFQN: tableFQN } = useParams() as Record<string, string>;
+  const { datasetFQN: tableFQN, tab } = useParams() as Record<string, string>;
+  const [activeTab, setActiveTab] = useState<number>(getCurrentDatasetTab(tab));
   const [entityLineage, setEntityLineage] = useState<EntityLineage>(
     {} as EntityLineage
   );
@@ -98,9 +104,26 @@ const DatasetDetailsPage: FunctionComponent = () => {
   const [, setPreviousVersion] = useState<string>();
 
   const activeTabHandler = (tabValue: number) => {
-    setActiveTab(tabValue);
+    const currentTabIndex = tabValue - 1;
+    if (datasetTableTabs[currentTabIndex].path !== tab) {
+      setActiveTab(
+        getCurrentDatasetTab(datasetTableTabs[currentTabIndex].path)
+      );
+      history.push({
+        pathname: getDatasetTabPath(
+          tableFQN,
+          datasetTableTabs[currentTabIndex].path
+        ),
+      });
+    }
   };
 
+  useEffect(() => {
+    if (datasetTableTabs[activeTab - 1].path !== tab) {
+      setActiveTab(getCurrentDatasetTab(tab));
+    }
+  }, [tab]);
+
   const saveUpdatedTableData = (updatedData: Table): Promise<AxiosResponse> => {
     const jsonPatch = compare(tableDetails, updatedData);
 
@@ -241,21 +264,24 @@ const DatasetDetailsPage: FunctionComponent = () => {
         setTableTags(getTableTags(columns || []));
         setUsageSummary(usageSummary);
         setJoins(joins);
-        setIsLoading(false);
       })
-      .catch(() => {
+      .finally(() => {
         setIsLoading(false);
       });
 
-    setActiveTab(1);
-    getLineageByFQN(tableFQN, EntityType.TABLE).then((res: AxiosResponse) =>
-      setEntityLineage(res.data)
-    );
+    getLineageByFQN(tableFQN, EntityType.TABLE)
+      .then((res: AxiosResponse) => {
+        setEntityLineage(res.data);
+      })
+      .finally(() => {
+        setIsLineageLoading(false);
+      });
+    setActiveTab(getCurrentDatasetTab(tab));
   }, [tableFQN]);
 
   return (
     <>
-      {isLoading ? (
+      {isLoading || isLineageLoading ? (
         <Loader />
       ) : (
         <DatasetDetails

catalog-rest-service/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx

@@ -3,7 +3,7 @@ import { compare, Operation } from 'fast-json-patch';
 import { observer } from 'mobx-react';
 import { EntityTags, TableDetail } from 'Models';
 import React, { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import AppState from '../../AppState';
 import { getLineageByFQN } from '../../axiosAPIs/lineageAPI';
 import {
@@ -16,12 +16,19 @@ import { getServiceById } from '../../axiosAPIs/serviceAPI';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import Loader from '../../components/Loader/Loader';
 import PipelineDetails from '../../components/PipelineDetails/PipelineDetails.component';
-import { getServiceDetailsPath } from '../../constants/constants';
+import {
+  getPipelineDetailsPath,
+  getServiceDetailsPath,
+} from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import { Pipeline, Task } from '../../generated/entity/data/pipeline';
 import { User } from '../../generated/entity/teams/user';
 import { EntityLineage } from '../../generated/type/entityLineage';
 import { addToRecentViewed, getCurrentUserId } from '../../utils/CommonUtils';
+import {
+  getCurrentPipelineTab,
+  pipelineDetailsTabs,
+} from '../../utils/PipelineDetailsUtils';
 import { serviceTypeLogo } from '../../utils/ServiceUtils';
 import {
   getOwnerFromId,
@@ -32,20 +39,24 @@ import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
 
 const PipelineDetailsPage = () => {
   const USERId = getCurrentUserId();
+  const history = useHistory();
 
   const [tagList, setTagList] = useState<Array<string>>([]);
-  const { pipelineFQN } = useParams() as Record<string, string>;
+  const { pipelineFQN, tab } = useParams() as Record<string, string>;
   const [pipelineDetails, setPipelineDetails] = useState<Pipeline>(
     {} as Pipeline
   );
   const [pipelineId, setPipelineId] = useState<string>('');
-  const [isLoading, setLoading] = useState<boolean>(false);
+  const [isLoading, setLoading] = useState<boolean>(true);
+  const [isLineageLoading, setIsLineageLoading] = useState<boolean>(true);
   const [description, setDescription] = useState<string>('');
   const [followers, setFollowers] = useState<Array<User>>([]);
   const [owner, setOwner] = useState<TableDetail['owner']>();
   const [tier, setTier] = useState<string>();
   const [tags, setTags] = useState<Array<EntityTags>>([]);
-  const [activeTab, setActiveTab] = useState<number>(1);
+  const [activeTab, setActiveTab] = useState<number>(
+    getCurrentPipelineTab(tab)
+  );
   const [tasks, setTasks] = useState<Task[]>([]);
   const [pipelineUrl, setPipelineUrl] = useState<string>('');
   const [displayName, setDisplayName] = useState<string>('');
@@ -58,9 +69,26 @@ const PipelineDetailsPage = () => {
     {} as EntityLineage
   );
   const activeTabHandler = (tabValue: number) => {
-    setActiveTab(tabValue);
+    const currentTabIndex = tabValue - 1;
+    if (pipelineDetailsTabs[currentTabIndex].path !== tab) {
+      setActiveTab(
+        getCurrentPipelineTab(pipelineDetailsTabs[currentTabIndex].path)
+      );
+      history.push({
+        pathname: getPipelineDetailsPath(
+          pipelineFQN,
+          pipelineDetailsTabs[currentTabIndex].path
+        ),
+      });
+    }
   };
 
+  useEffect(() => {
+    if (pipelineDetailsTabs[activeTab - 1].path !== tab) {
+      setActiveTab(getCurrentPipelineTab(tab));
+    }
+  }, [tab]);
+
   const saveUpdatedPipelineData = (
     updatedData: Pipeline
   ): Promise<AxiosResponse> => {
@@ -88,7 +116,8 @@ const PipelineDetailsPage = () => {
       'followers',
       'tags',
       'tasks',
-    ]).then((res: AxiosResponse) => {
+    ])
+      .then((res: AxiosResponse) => {
         const {
           id,
           description,
@@ -142,8 +171,8 @@ const PipelineDetailsPage = () => {
         );
         setPipelineUrl(pipelineUrl);
         setTasks(tasks);
-      setLoading(false);
-    });
+      })
+      .finally(() => setLoading(false));
   };
 
   const followPipeline = () => {
@@ -196,10 +225,14 @@ const PipelineDetailsPage = () => {
 
   useEffect(() => {
     fetchPipelineDetail(pipelineFQN);
-    setActiveTab(1);
-    getLineageByFQN(pipelineFQN, EntityType.PIPELINE).then(
-      (res: AxiosResponse) => setEntityLineage(res.data)
-    );
+    setActiveTab(getCurrentPipelineTab(tab));
+    getLineageByFQN(pipelineFQN, EntityType.PIPELINE)
+      .then((res: AxiosResponse) => {
+        setEntityLineage(res.data);
+      })
+      .finally(() => {
+        setIsLineageLoading(false);
+      });
   }, [pipelineFQN]);
 
   useEffect(() => {
@@ -208,7 +241,7 @@ const PipelineDetailsPage = () => {
 
   return (
     <>
-      {isLoading ? (
+      {isLoading || isLineageLoading ? (
         <Loader />
       ) : (
         <PipelineDetails

catalog-rest-service/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx

@@ -3,7 +3,7 @@ import { compare } from 'fast-json-patch';
 import { observer } from 'mobx-react';
 import { EntityTags, TableDetail } from 'Models';
 import React, { FunctionComponent, useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import AppState from '../../AppState';
 import { getServiceById } from '../../axiosAPIs/serviceAPI';
 import {
@@ -15,7 +15,10 @@ import {
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import Loader from '../../components/Loader/Loader';
 import TopicDetails from '../../components/TopicDetails/TopicDetails.component';
-import { getServiceDetailsPath } from '../../constants/constants';
+import {
+  getServiceDetailsPath,
+  getTopicDetailsPath,
+} from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import { Topic } from '../../generated/entity/data/topic';
 import { User } from '../../generated/entity/teams/user';
@@ -28,23 +31,28 @@ import {
   getTierFromTableTags,
 } from '../../utils/TableUtils';
 import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
+import {
+  getCurrentTopicTab,
+  topicDetailsTabs,
+} from '../../utils/TopicDetailsUtils';
 
 const TopicDetailsPage: FunctionComponent = () => {
   const USERId = getCurrentUserId();
   const showToast = useToastContext();
+  const history = useHistory();
 
   const [tagList, setTagList] = useState<Array<string>>([]);
-  const { topicFQN } = useParams() as Record<string, string>;
+  const { topicFQN, tab } = useParams() as Record<string, string>;
   const [topicDetails, setTopicDetails] = useState<Topic>({} as Topic);
   const [topicId, setTopicId] = useState<string>('');
-  const [isLoading, setLoading] = useState<boolean>(false);
+  const [isLoading, setLoading] = useState<boolean>(true);
   const [description, setDescription] = useState<string>('');
   const [followers, setFollowers] = useState<Array<User>>([]);
   const [owner, setOwner] = useState<TableDetail['owner']>();
   const [tier, setTier] = useState<string>();
   const [schemaType, setSchemaType] = useState<string>('');
   const [tags, setTags] = useState<Array<EntityTags>>([]);
-  const [activeTab, setActiveTab] = useState<number>(1);
+  const [activeTab, setActiveTab] = useState<number>(getCurrentTopicTab(tab));
   const [partitions, setPartitions] = useState<number>(0);
   const [cleanupPolicies, setCleanupPolicies] = useState<Array<string>>([]);
   const [maximumMessageSize, setMaximumMessageSize] = useState<number>(0);
@@ -58,9 +66,24 @@ const TopicDetailsPage: FunctionComponent = () => {
   >([]);
 
   const activeTabHandler = (tabValue: number) => {
-    setActiveTab(tabValue);
+    const currentTabIndex = tabValue - 1;
+    if (topicDetailsTabs[currentTabIndex].path !== tab) {
+      setActiveTab(getCurrentTopicTab(topicDetailsTabs[currentTabIndex].path));
+      history.push({
+        pathname: getTopicDetailsPath(
+          topicFQN,
+          topicDetailsTabs[currentTabIndex].path
+        ),
+      });
+    }
   };
 
+  useEffect(() => {
+    if (topicDetailsTabs[activeTab - 1].path !== tab) {
+      setActiveTab(getCurrentTopicTab(tab));
+    }
+  }, [tab]);
+
   const saveUpdatedTopicData = (updatedData: Topic): Promise<AxiosResponse> => {
     const jsonPatch = compare(topicDetails, updatedData);
 
@@ -140,7 +163,6 @@ const TopicDetailsPage: FunctionComponent = () => {
               serviceType: serviceRes.data.serviceType,
               timestamp: 0,
             });
-            setLoading(false);
           })
           .catch((err: AxiosError) => {
             const errMsg =
@@ -149,7 +171,8 @@ const TopicDetailsPage: FunctionComponent = () => {
               variant: 'error',
               body: errMsg,
             });
-          });
+          })
+          .finally(() => setLoading(false));
       })
       .catch((err: AxiosError) => {
         const errMsg = err.message || 'Error while fetching topic details';
@@ -157,6 +180,7 @@ const TopicDetailsPage: FunctionComponent = () => {
           variant: 'error',
           body: errMsg,
         });
+        setLoading(false);
       });
   };
 

catalog-rest-service/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx

@@ -74,9 +74,36 @@ const AuthenticatedAppRouter: FunctionComponent = () => {
         component={DatasetDetailsPage}
         path={ROUTES.DATASET_DETAILS}
       />
-      <Route component={TopicDetailsPage} path={ROUTES.TOPIC_DETAILS} />
-      <Route component={DashboardDetailsPage} path={ROUTES.DASHBOARD_DETAILS} />
-      <Route component={PipelineDetailsPage} path={ROUTES.PIPELINE_DETAILS} />
+      <Route
+        exact
+        component={DatasetDetailsPage}
+        path={ROUTES.DATASET_DETAILS_WITH_TAB}
+      />
+      <Route exact component={TopicDetailsPage} path={ROUTES.TOPIC_DETAILS} />
+      <Route
+        component={TopicDetailsPage}
+        path={ROUTES.TOPIC_DETAILS_WITH_TAB}
+      />
+      <Route
+        exact
+        component={DashboardDetailsPage}
+        path={ROUTES.DASHBOARD_DETAILS}
+      />
+      <Route
+        exact
+        component={DashboardDetailsPage}
+        path={ROUTES.DASHBOARD_DETAILS_WITH_TAB}
+      />
+      <Route
+        exact
+        component={PipelineDetailsPage}
+        path={ROUTES.PIPELINE_DETAILS}
+      />
+      <Route
+        exact
+        component={PipelineDetailsPage}
+        path={ROUTES.PIPELINE_DETAILS_WITH_TAB}
+      />
       <Route component={Onboarding} path={ROUTES.ONBOARDING} />
       <Route
         exact

catalog-rest-service/src/main/resources/ui/src/utils/DashboardDetailsUtils.ts

@@ -0,0 +1,28 @@
+export const dashboardDetailsTabs = [
+  {
+    name: 'Details',
+    path: 'details',
+  },
+  {
+    name: 'Manage',
+    path: 'manage',
+  },
+];
+
+export const getCurrentDashboardTab = (tab: string) => {
+  let currentTab = 1;
+  switch (tab) {
+    case 'manage':
+      currentTab = 2;
+
+      break;
+
+    case 'details':
+    default:
+      currentTab = 1;
+
+      break;
+  }
+
+  return currentTab;
+};

catalog-rest-service/src/main/resources/ui/src/utils/DatasetDetailsUtils.ts

@@ -0,0 +1,45 @@
+export const datasetTableTabs = [
+  {
+    name: 'Schema',
+    path: 'schema',
+  },
+  {
+    name: 'Profiler',
+    path: 'profiler',
+  },
+  {
+    name: 'Lineage',
+    path: 'lineage',
+  },
+  {
+    name: 'Manage',
+    path: 'manage',
+  },
+];
+
+export const getCurrentDatasetTab = (tab: string) => {
+  let currentTab = 1;
+  switch (tab) {
+    case 'profiler':
+      currentTab = 2;
+
+      break;
+    case 'lineage':
+      currentTab = 3;
+
+      break;
+    case 'manage':
+      currentTab = 4;
+
+      break;
+
+    case 'schema':
+    case 'sample_data':
+    default:
+      currentTab = 1;
+
+      break;
+  }
+
+  return currentTab;
+};

catalog-rest-service/src/main/resources/ui/src/utils/PipelineDetailsUtils.ts

@@ -0,0 +1,36 @@
+export const pipelineDetailsTabs = [
+  {
+    name: 'Details',
+    path: 'details',
+  },
+  {
+    name: 'Lineage',
+    path: 'lineage',
+  },
+  {
+    name: 'Manage',
+    path: 'manage',
+  },
+];
+
+export const getCurrentPipelineTab = (tab: string) => {
+  let currentTab = 1;
+  switch (tab) {
+    case 'lineage':
+      currentTab = 2;
+
+      break;
+    case 'manage':
+      currentTab = 3;
+
+      break;
+
+    case 'details':
+    default:
+      currentTab = 1;
+
+      break;
+  }
+
+  return currentTab;
+};

catalog-rest-service/src/main/resources/ui/src/utils/TopicDetailsUtils.ts

@@ -0,0 +1,36 @@
+export const topicDetailsTabs = [
+  {
+    name: 'Schema',
+    path: 'schema',
+  },
+  {
+    name: 'Config',
+    path: 'config',
+  },
+  {
+    name: 'Manage',
+    path: 'manage',
+  },
+];
+
+export const getCurrentTopicTab = (tab: string) => {
+  let currentTab = 1;
+  switch (tab) {
+    case 'config':
+      currentTab = 2;
+
+      break;
+    case 'manage':
+      currentTab = 3;
+
+      break;
+
+    case 'schema':
+    default:
+      currentTab = 1;
+
+      break;
+  }
+
+  return currentTab;
+};