fix(dependencies): hide icon when diagram has no dependencies (#684)

This commit is contained in:
Jonathan Fishner
2025-05-08 16:28:31 +03:00
committed by GitHub
parent a1144bbf76
commit 547149da44
2 changed files with 31 additions and 15 deletions

View File

@@ -19,6 +19,7 @@ import { useBreakpoint } from '@/hooks/use-breakpoint';
import ChartDBLogo from '@/assets/logo-light.png';
import ChartDBDarkLogo from '@/assets/logo-dark.png';
import { useTheme } from '@/hooks/use-theme';
import { useChartDB } from '@/hooks/use-chartdb';
export interface SidebarItem {
title: string;
@@ -36,8 +37,10 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = () => {
const { t } = useTranslation();
const { isMd: isDesktop } = useBreakpoint('md');
const { effectiveTheme } = useTheme();
const items: SidebarItem[] = useMemo(
() => [
const { dependencies } = useChartDB();
const items: SidebarItem[] = useMemo(() => {
const baseItems = [
{
title: t('side_panel.tables_section.tables'),
icon: Table,
@@ -56,15 +59,6 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = () => {
},
active: selectedSidebarSection === 'relationships',
},
{
title: t('side_panel.dependencies_section.dependencies'),
icon: SquareStack,
onClick: () => {
showSidePanel();
selectSidebarSection('dependencies');
},
active: selectedSidebarSection === 'dependencies',
},
{
title: t('side_panel.areas_section.areas'),
icon: Group,
@@ -74,9 +68,28 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = () => {
},
active: selectedSidebarSection === 'areas',
},
],
[selectSidebarSection, selectedSidebarSection, t, showSidePanel]
);
];
if (dependencies && dependencies.length > 0) {
baseItems.splice(2, 0, {
title: t('side_panel.dependencies_section.dependencies'),
icon: SquareStack,
onClick: () => {
showSidePanel();
selectSidebarSection('dependencies');
},
active: selectedSidebarSection === 'dependencies',
});
}
return baseItems;
}, [
selectSidebarSection,
selectedSidebarSection,
t,
showSidePanel,
dependencies,
]);
const footerItems: SidebarItem[] = useMemo(
() => [

View File

@@ -37,6 +37,7 @@ export const Menu: React.FC<MenuProps> = () => {
deleteDiagram,
updateDiagramUpdatedAt,
databaseType,
dependencies,
} = useChartDB();
const {
openCreateDiagramDialog,
@@ -397,7 +398,9 @@ export const Menu: React.FC<MenuProps> = () => {
? t('menu.view.hide_cardinality')
: t('menu.view.show_cardinality')}
</MenubarItem>
{databaseType !== DatabaseType.CLICKHOUSE ? (
{databaseType !== DatabaseType.CLICKHOUSE &&
dependencies &&
dependencies.length > 0 ? (
<MenubarItem onClick={showOrHideDependencies}>
{showDependenciesOnCanvas
? t('menu.view.hide_dependencies')