yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-20 07:07:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): only use visible and enabled tabs for selected tab and routing in entity profiles (#6629)

Browse Source 
Co-authored-by: John Joyce <john@acryl.io>
This commit is contained in:
Felix Lüdin 2023-01-25 02:38:07 +01:00 committed by GitHub
parent ea7b2abca5
commit 0cfbec72c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
datahub-web-react/src/app/entity/dashboard/DashboardEntity.tsx
View File

@ -94,6 +94,14 @@ export class DashboardEntity implements Entity<Dashboard> {
enabled: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.charts?.total || 0) > 0,
},
},
{
name: 'Datasets',
component: DashboardDatasetsTab,
display: {
visible: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.datasets?.total || 0) > 0,
enabled: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.datasets?.total || 0) > 0,
},
},
{
name: 'Documentation',
component: DocumentationTab,
@ -117,14 +125,6 @@ export class DashboardEntity implements Entity<Dashboard> {
name: 'Properties',
component: PropertiesTab,
},
{
name: 'Datasets',
component: DashboardDatasetsTab,
display: {
visible: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.datasets?.total || 0) > 0,
enabled: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.datasets?.total || 0) > 0,
},
},
]}
sidebarSections={[
{

5
datahub-web-react/src/app/entity/shared/EntityContext.tsx
View File

@ -7,6 +7,7 @@ const EntityContext = React.createContext<EntityContextType>({
urn: '',
entityType: EntityType.Dataset,
entityData: null,
loading: true,
baseEntity: null,
updateEntity: () => Promise.resolve({}),
routeToTab: () => {},
@ -33,8 +34,8 @@ export const useEntityUpdate = <U,>(): UpdateEntityType<U> | null | undefined =>
};
export const useEntityData = () => {
const { urn, entityType, entityData } = useContext(EntityContext);
return { urn, entityType, entityData };
const { urn, entityType, entityData, loading } = useContext(EntityContext);
return { urn, entityType, entityData, loading };
};
export const useRouteToTab = () => {

17
datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx
View File

@ -245,7 +245,15 @@ export const EntityProfile = <T, U>({
},
})) || [];
const routedTab = useRoutedTab([...tabsWithDefaults, ...autoRenderTabs]);
const visibleTabs = [...tabsWithDefaults, ...autoRenderTabs].filter((tab) =>
tab.display?.visible(entityData, dataPossiblyCombinedWithSiblings),
);
const enabledAndVisibleTabs = visibleTabs.filter((tab) =>
tab.display?.enabled(entityData, dataPossiblyCombinedWithSiblings),
);
const routedTab = useRoutedTab(enabledAndVisibleTabs);
if (isCompact) {
return (
@ -254,6 +262,7 @@ export const EntityProfile = <T, U>({
urn,
entityType,
entityData,
loading,
baseEntity: dataPossiblyCombinedWithSiblings,
dataNotCombinedWithSiblings,
updateEntity,
@ -291,6 +300,7 @@ export const EntityProfile = <T, U>({
urn,
entityType,
entityData,
loading,
baseEntity: dataPossiblyCombinedWithSiblings,
dataNotCombinedWithSiblings,
updateEntity,
@ -344,10 +354,7 @@ export const EntityProfile = <T, U>({
subHeader={subHeader}
refreshBrowser={refreshBrowser}
/>
<EntityTabs
tabs={[...tabsWithDefaults, ...autoRenderTabs]}
selectedTab={routedTab}
/>
<EntityTabs tabs={visibleTabs} selectedTab={routedTab} />
</Header>
<TabContent>
{routedTab && <routedTab.component properties={routedTab.properties} />}

20
datahub-web-react/src/app/entity/shared/containers/profile/header/EntityTabs.tsx
View File

@ -25,27 +25,25 @@ const Tab = styled(Tabs.TabPane)`
`;
export const EntityTabs = <T,>({ tabs, selectedTab }: Props) => {
const { entityData } = useEntityData();
const { entityData, loading } = useEntityData();
const routeToTab = useRouteToTab();
const baseEntity = useBaseEntity<T>();
useEffect(() => {
if (!selectedTab) {
if (tabs[0]) {
routeToTab({ tabName: tabs[0].name, method: 'replace' });
}
}
}, [tabs, selectedTab, routeToTab]);
const enabledTabs = tabs.filter((tab) => tab.display?.enabled(entityData, baseEntity));
const visibleTabs = tabs.filter((tab) => tab.display?.visible(entityData, baseEntity));
useEffect(() => {
if (!loading && !selectedTab && enabledTabs[0]) {
routeToTab({ tabName: enabledTabs[0].name, method: 'replace' });
}
}, [loading, enabledTabs, selectedTab, routeToTab]);
return (
<UnborderedTabs
activeKey={selectedTab?.name}
activeKey={selectedTab?.name || ''}
size="large"
onTabClick={(tab: string) => routeToTab({ tabName: tab })}
>
{visibleTabs.map((tab) => {
{tabs.map((tab) => {
if (!tab.display?.enabled(entityData, baseEntity)) {
return <Tab tab={tab.name} key={tab.name} disabled />;
}

1
datahub-web-react/src/app/entity/shared/types.ts
View File

@ -131,6 +131,7 @@ export type EntityContextType = {
entityType: EntityType;
dataNotCombinedWithSiblings: any;
entityData: GenericEntityProperties | null;
loading: boolean;
baseEntity: any;
updateEntity?: UpdateEntityType<any> | null;
routeToTab: (params: { tabName: string; tabParams?: Record<string, any>; method?: 'push' | 'replace' }) => void;