fix(ui): tab name didn't render on persona page (#24018)

* fix(ui): tab name didn't render on persona page

* update getTabLabelFromId to have a override

* fix table failure

* fix error and code smells

openmetadata-ui/src/main/resources/ui/playwright/constant/customizeDetail.ts

@@ -85,7 +85,6 @@ export const TABLE_DEFAULT_TABS = [
   EntityTabs.CUSTOM_PROPERTIES,
   EntityTabs.PROFILER,
   EntityTabs.LINEAGE,
-  EntityTabs.KNOWLEDGE_GRAPH,
   EntityTabs.TABLE_QUERIES,
   EntityTabs.SAMPLE_DATA,
   EntityTabs.SCHEMA,

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/CustomizeDetailPage.spec.ts

@@ -401,6 +401,13 @@ test.describe('Persona customization', () => {
 
         await adminPage.getByRole('button', { name: 'Add tab' }).click();
 
+        await expect(adminPage.getByRole('dialog')).toBeVisible();
+
+        await adminPage
+          .getByRole('dialog')
+          .getByRole('textbox')
+          .fill('Custom Tab');
+
         await adminPage
           .getByRole('dialog')
           .getByRole('button', { name: 'Add' })
@@ -431,10 +438,10 @@ test.describe('Persona customization', () => {
         });
 
         await expect(
-          userPage.getByRole('tab', { name: 'New Tab' })
+          userPage.getByRole('tab', { name: 'Custom Tab' })
         ).toBeVisible();
 
-        await userPage.getByRole('tab', { name: 'New Tab' }).click();
+        await userPage.getByRole('tab', { name: 'Custom Tab' }).click();
 
         const visibleDescription = userPage
           .getByTestId(/KnowledgePanel.Description-/)
@@ -508,6 +515,11 @@ test.describe('Persona customization', () => {
 
         await expect(adminPage.getByRole('dialog')).toBeVisible();
 
+        await adminPage
+          .getByRole('dialog')
+          .getByRole('textbox')
+          .fill('Custom Tab');
+
         await adminPage
           .getByRole('dialog')
           .getByRole('button', { name: 'Add' })
@@ -536,9 +548,9 @@ test.describe('Persona customization', () => {
           state: 'detached',
         });
 
-        expect(userPage.getByRole('tab', { name: 'New Tab' })).toBeVisible();
+        expect(userPage.getByRole('tab', { name: 'Custom Tab' })).toBeVisible();
 
-        await userPage.getByRole('tab', { name: 'New Tab' }).click();
+        await userPage.getByRole('tab', { name: 'Custom Tab' }).click();
 
         const visibleDescription = userPage
           .getByTestId(/KnowledgePanel.Description-/)

openmetadata-ui/src/main/resources/ui/src/utils/CustomizeDetailPage/CustomizeDetailPageClassBase.ts

@@ -43,11 +43,14 @@ import TablesSchemaImg from '../../assets/img/widgets/tables-schema.png';
 import TagsImg from '../../assets/img/widgets/tags.png';
 import TermsImg from '../../assets/img/widgets/Terms.png';
 import TopicSchemaImg from '../../assets/img/widgets/topic-schema.png';
+import { TAB_LABEL_MAP } from '../../constants/Customize.constants';
 import {
   DetailPageWidgetKeys,
   GlossaryTermDetailPageWidgetKeys,
   WidgetWidths,
 } from '../../enums/CustomizeDetailPage.enum';
+import { EntityTabs } from '../../enums/entity.enum';
+import i18n from '../i18next/LocalUtil';
 
 class CustomizeDetailPageClassBase {
   public getGlossaryWidgetImageFromKey(
@@ -147,6 +150,12 @@ class CustomizeDetailPageClassBase {
         return '';
     }
   }
+
+  public getTabLabelFromId(tab: EntityTabs): string {
+    const labelKey = TAB_LABEL_MAP[tab];
+
+    return labelKey ? i18n.t(labelKey) : tab;
+  }
 }
 
 const customizeDetailPageClassBase = new CustomizeDetailPageClassBase();

openmetadata-ui/src/main/resources/ui/src/utils/CustomizePage/CustomizePageUtils.test.ts

@@ -60,6 +60,18 @@ describe('CustomizePageUtils', () => {
 
       expect(typeof result).toBe('string');
     });
+
+    it("should return name if it's not predefined", () => {
+      const tab: Tab = {
+        id: EntityTabs.OVERVIEW,
+        name: 'custom-tab-name' as EntityTabs,
+        layout: [],
+      };
+
+      const result = getTabDisplayName(tab);
+
+      expect(result).toBe('custom-tab-name');
+    });
   });
 
   describe('sortTabs', () => {
@@ -104,7 +116,7 @@ describe('CustomizePageUtils', () => {
     it('should return empty string for invalid tab id', () => {
       const result = getTabLabelFromId('invalid-tab' as EntityTabs);
 
-      expect(result).toBe('');
+      expect(result).toBe('invalid-tab');
     });
   });
 

openmetadata-ui/src/main/resources/ui/src/utils/CustomizePage/CustomizePageUtils.ts

@@ -24,6 +24,7 @@ import apiEndpointClassBase from '../APIEndpoints/APIEndpointClassBase';
 import chartDetailsClassBase from '../ChartDetailsClassBase';
 import containerDetailsClassBase from '../ContainerDetailsClassBase';
 import { getNewWidgetPlacement } from '../CustomizableLandingPageUtils';
+import customizeDetailPageClassBase from '../CustomizeDetailPage/CustomizeDetailPageClassBase';
 import customizeGlossaryPageClassBase from '../CustomizeGlossaryPage/CustomizeGlossaryPage';
 import customizeGlossaryTermPageClassBase from '../CustomizeGlossaryTerm/CustomizeGlossaryTermBaseClass';
 import dashboardDataModelClassBase from '../DashboardDataModelClassBase';
@@ -121,7 +122,7 @@ export const getGlossaryDefaultTabs = () => {
 export const getTabLabelFromId = (tab: EntityTabs): string => {
   const labelKey = TAB_LABEL_MAP[tab];
 
-  return labelKey ? i18n.t(labelKey) : '';
+  return labelKey ? i18n.t(labelKey) : tab;
 };
 
 export const getDefaultTabs = (pageType?: string): Tab[] => {
@@ -478,7 +479,7 @@ const calculateNewPosition = (
   );
 
   // Get the last widget
-  const lastWidget = sortedLayout[sortedLayout.length - 1];
+  const lastWidget = sortedLayout.at(sortedLayout.length - 1);
 
   if (!lastWidget) {
     // If no widgets exist, start at 0,0
@@ -661,6 +662,8 @@ export const checkIfExpandViewSupported = (
       );
     case PageType.GlossaryTerm:
     case PageType.Metric:
+    case PageType.File:
+    case PageType.Worksheet:
       return (
         (!activeTab && firstTab.key === EntityTabs.OVERVIEW) ||
         activeTab === EntityTabs.OVERVIEW
@@ -676,6 +679,7 @@ export const checkIfExpandViewSupported = (
         activeTab === EntityTabs.MODEL
       );
     case PageType.Container:
+    case PageType.Directory:
       return (
         (!activeTab && firstTab.key === EntityTabs.CHILDREN) ||
         activeTab === EntityTabs.CHILDREN
@@ -717,17 +721,6 @@ export const checkIfExpandViewSupported = (
         (!activeTab && firstTab.key === EntityTabs.FEATURES) ||
         activeTab === EntityTabs.FEATURES
       );
-    case PageType.Directory:
-      return (
-        (!activeTab && firstTab.key === EntityTabs.CHILDREN) ||
-        activeTab === EntityTabs.CHILDREN
-      );
-    case PageType.File:
-    case PageType.Worksheet:
-      return (
-        (!activeTab && firstTab.key === EntityTabs.OVERVIEW) ||
-        activeTab === EntityTabs.OVERVIEW
-      );
     case PageType.Spreadsheet:
       return (
         (!activeTab && firstTab.key === EntityTabs.WORKSHEETS) ||
@@ -761,5 +754,8 @@ export const updateWidgetHeightRecursively = (
   }, [] as WidgetConfig[]);
 
 export const getTabDisplayName = (item: Tab) => {
-  return item.displayName ?? getTabLabelFromId(item.name as EntityTabs);
+  return (
+    item.displayName ??
+    customizeDetailPageClassBase.getTabLabelFromId(item.name as EntityTabs)
+  );
 };

openmetadata-ui/src/main/resources/ui/src/utils/TableClassBase.ts

@@ -25,6 +25,7 @@ import { DetailPageWidgetKeys } from '../enums/CustomizeDetailPage.enum';
 import { EntityTabs } from '../enums/entity.enum';
 import { Table } from '../generated/entity/data/table';
 import { Tab } from '../generated/system/ui/uiCustomization';
+import { useApplicationStore } from '../hooks/useApplicationStore';
 import { FeedCounts } from '../interface/feed.interface';
 import { WidgetConfig } from '../pages/CustomizablePage/CustomizablePage.interface';
 import i18n from './i18next/LocalUtil';
@@ -96,7 +97,9 @@ class TableClassBase {
       EntityTabs.TABLE_QUERIES,
       EntityTabs.PROFILER,
       EntityTabs.LINEAGE,
-      EntityTabs.KNOWLEDGE_GRAPH,
+      ...(useApplicationStore.getState().rdfEnabled
+        ? [EntityTabs.KNOWLEDGE_GRAPH]
+        : []),
       EntityTabs.DBT,
       EntityTabs.VIEW_DEFINITION,
       EntityTabs.CONTRACT,