fix(ui): Tab doesn't represent the page you are on for non-data asset pages (#9468)

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/entity/group/GroupInfoSideBar.tsx

@@ -21,6 +21,7 @@ import {
 } from '../shared/SidebarStyledComponents';
 import GroupMembersSideBarSection from './GroupMembersSideBarSection';
 import { useUserContext } from '../../context/useUserContext';
+import { useBrowserTitle } from '../../shared/BrowserTabTitleContext';
 import StripMarkdownText, { removeMarkdown } from '../shared/components/styled/StripMarkdownText';
 import { Editor } from '../shared/tabs/Documentation/components/editor/Editor';
 import EditGroupDescriptionModal from './EditGroupDescriptionModal';
@@ -157,6 +158,22 @@ export default function GroupInfoSidebar({ sideBarData, refetch }: Props) {
     const { url } = useRouteMatch();
     const history = useHistory();
 
+    const {  updateTitle } = useBrowserTitle();
+    
+    useEffect(()=>{
+        // You can use the title and updateTitle function here
+        // For example, updating the title when the component mounts
+        if(name){
+            updateTitle(`Group | ${name}`);
+        }
+        // // Don't forget to clean up the title when the component unmounts
+        return () => {
+            if(name){ // added to condition for rerendering issue
+                updateTitle('');
+            }
+        };
+    }, [name, updateTitle]);
+
     /* eslint-disable @typescript-eslint/no-unused-vars */
     const [editGroupModal, showEditGroupModal] = useState(false);
     const me = useUserContext();

datahub-web-react/src/app/entity/user/UserInfoSideBar.tsx

@@ -1,5 +1,5 @@
 import { Divider, message, Space, Button, Typography, Tag } from 'antd';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { EditOutlined, MailOutlined, PhoneOutlined, SlackOutlined } from '@ant-design/icons';
 import { useUpdateCorpUserPropertiesMutation } from '../../../graphql/user.generated';
 import { EntityRelationship, DataHubRole } from '../../../types.generated';
@@ -21,6 +21,7 @@ import {
 import EntityGroups from '../shared/EntityGroups';
 import { mapRoleIcon } from '../../identity/user/UserUtils';
 import { useUserContext } from '../../context/useUserContext';
+import { useBrowserTitle } from '../../shared/BrowserTabTitleContext';
 
 const { Paragraph } = Typography;
 
@@ -61,6 +62,22 @@ export default function UserInfoSideBar({ sideBarData, refetch }: Props) {
     const me = useUserContext();
     const isProfileOwner = me?.user?.urn === urn;
 
+    const {  updateTitle } = useBrowserTitle();
+    
+    useEffect(()=>{
+        // You can use the title and updateTitle function here
+        // For example, updating the title when the component mounts
+        if(name){
+            updateTitle(`User | ${name}`);
+        }
+        // // Don't forget to clean up the title when the component unmounts
+        return () => {
+            if(name){ // added to condition for rerendering issue
+                updateTitle('');
+            }
+        };
+    }, [name, updateTitle]);
+
     const getEditModalData = {
         urn,
         name,

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;
+};