update dependencies order (#255)

This commit is contained in:
Guy Ben-Aharon
2024-10-07 17:13:10 +03:00
committed by GitHub
parent 931c5ae60f
commit 0cddaee67f
3 changed files with 31 additions and 20 deletions

View File

@@ -48,7 +48,18 @@ export const DependenciesSection: React.FC<DependenciesSectionProps> = () => {
dependency
) => shouldShowDependencyBySchemaFilter(dependency, filteredSchemas);
return dependencies.filter(filterSchema).filter(filterName);
return dependencies
.filter(filterSchema)
.filter(filterName)
.sort((a, b) => {
const dependentTableA = getTable(a.dependentTableId);
const tableA = getTable(a.tableId);
const dependentTableB = getTable(b.dependentTableId);
const tableB = getTable(b.tableId);
return `${dependentTableA?.name}${tableA?.name}`.localeCompare(
`${dependentTableB?.name}${tableB?.name}`
);
});
}, [dependencies, filterText, filteredSchemas, getTable]);
return (

View File

@@ -36,24 +36,6 @@ export const DependencyListItemContent: React.FC<
<div className="my-1 flex flex-col rounded-b-md px-1">
<div className="flex flex-col gap-6">
<div className="flex items-center justify-between gap-1 text-xs">
<div className="flex basis-1/2 flex-col gap-2 overflow-hidden text-xs">
<div className="flex flex-row items-center gap-1">
<FileOutput className="size-4 text-subtitle" />
<div className="font-bold text-subtitle">
{t(
'side_panel.dependencies_section.dependency.table'
)}
</div>
</div>
<Tooltip>
<TooltipTrigger>
<div className="truncate text-left text-sm">
{table?.name}
</div>
</TooltipTrigger>
<TooltipContent>{table?.name}</TooltipContent>
</Tooltip>
</div>
<div className="flex basis-1/2 flex-col gap-2 overflow-hidden text-xs">
<div className="flex flex-row items-center gap-1">
<FileMinus2 className="size-4 text-subtitle" />
@@ -74,6 +56,24 @@ export const DependencyListItemContent: React.FC<
</TooltipContent>
</Tooltip>
</div>
<div className="flex basis-1/2 flex-col gap-2 overflow-hidden text-xs">
<div className="flex flex-row items-center gap-1">
<FileOutput className="size-4 text-subtitle" />
<div className="font-bold text-subtitle">
{t(
'side_panel.dependencies_section.dependency.table'
)}
</div>
</div>
<Tooltip>
<TooltipTrigger>
<div className="truncate text-left text-sm">
{table?.name}
</div>
</TooltipTrigger>
<TooltipContent>{table?.name}</TooltipContent>
</Tooltip>
</div>
</div>
</div>
<div className="flex flex-1 items-center justify-center pt-2">

View File

@@ -39,7 +39,7 @@ export const DependencyListItemHeader: React.FC<
return '';
}
return `${table.name} -> ${dependentTable.name}`;
return `${dependentTable.name} -> ${table.name}`;
}, [dependency.tableId, dependency.dependentTableId, getTable]);
const focusOnDependency = useCallback(