fix: Tab doesn't represent the page you are on for non-data asset pages

datahub-web-react/src/app/AppProviders.tsx

@@ -5,6 +5,7 @@ import UserContextProvider from './context/UserContextProvider';
 import QuickFiltersProvider from '../providers/QuickFiltersProvider';
 import SearchContextProvider from './search/context/SearchContextProvider';
 import EntityRegistryProvider from './EntityRegistryProvider';
+import { BrowserTitleProvider } from './shared/BrowserTabTitleContext';
 
 interface Props {
     children: React.ReactNode;
@@ -15,11 +16,13 @@ export default function AppProviders({ children }: Props) {
         <AppConfigProvider>
             <UserContextProvider>
                 <EntityRegistryProvider>
+                <BrowserTitleProvider>
                     <EducationStepsProvider>
                         <QuickFiltersProvider>
                             <SearchContextProvider>{children}</SearchContextProvider>
                         </QuickFiltersProvider>
                     </EducationStepsProvider>
+                </BrowserTitleProvider>
                 </EntityRegistryProvider>
             </UserContextProvider>
         </AppConfigProvider>

datahub-web-react/src/app/search/SearchablePage.tsx

@@ -3,6 +3,7 @@ import { useHistory, useLocation } from 'react-router';
 import { debounce } from 'lodash';
 import * as QueryString from 'query-string';
 import { useTheme } from 'styled-components';
+import { Helmet } from 'react-helmet-async';
 import { SearchHeader } from './SearchHeader';
 import { useEntityRegistry } from '../useEntityRegistry';
 import { EntityType, FacetFilterInput } from '../../types.generated';
@@ -19,6 +20,7 @@ import { useQuickFiltersContext } from '../../providers/QuickFiltersContext';
 import { useUserContext } from '../context/useUserContext';
 import { useSelectedSortOption } from './context/SearchContext';
 import { HALF_SECOND_IN_MS } from '../entity/shared/tabs/Dataset/Queries/utils/constants';
+import { useBrowserTitle } from '../shared/BrowserTabTitleContext';
 
 const styles = {
     children: {
@@ -68,6 +70,28 @@ export const SearchablePage = ({ onSearch, onAutoComplete, children }: Props) =>
     const { user } = userContext;
     const viewUrn = userContext.localState?.selectedViewUrn;
 
+    const { title, updateTitle } = useBrowserTitle();
+
+    useEffect(() => {
+        // Update the title only if it's not already set and there is a valid pathname
+        if (!title && location.pathname) {
+          const formattedPath = location.pathname
+            .split('/')
+            .filter(word => word !== '')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' | ');
+
+          if (formattedPath) {
+            return updateTitle(formattedPath);
+          }
+        }
+
+        // Clean up the title when the component unmounts
+        return () => {
+          updateTitle('');
+        };
+      }, [location.pathname, title, updateTitle]);
+
     useEffect(() => {
         if (suggestionsData !== undefined) {
             setNewSuggestionData(suggestionsData);
@@ -140,6 +164,9 @@ export const SearchablePage = ({ onSearch, onAutoComplete, children }: Props) =>
                 authenticatedUserPictureLink={user?.editableProperties?.pictureLink}
                 entityRegistry={entityRegistry}
             />
+            <Helmet>
+                <title>{title}</title>
+            </Helmet>
             <div style={styles.children}>{children}</div>
         </>
     );

datahub-web-react/src/app/shared/BrowserTabTitleContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, ReactNode, useContext } from 'react';
+
+interface BrowserTitleContextProps {
+  title: string;
+  updateTitle: (newTitle: string) => void;
+}
+
+const BrowserTitleContext = createContext<BrowserTitleContextProps | undefined>(undefined);
+
+export const BrowserTitleProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [title, setTitle] = React.useState<string>('');
+
+  const updateTitle = (newTitle: string) => {
+    setTitle(newTitle);
+  };
+
+  return (
+    <BrowserTitleContext.Provider value={{ title, updateTitle }}>
+      {children}
+    </BrowserTitleContext.Provider>
+  );
+};
+
+export const useBrowserTitle = () => {
+  const context = useContext(BrowserTitleContext);
+  if (!context) {
+    throw new Error('useBrowserTitle must be used within a BrowserTitleProvider');
+  }
+  return context;
+};