From 0cddaee67f834bb645585afd09ed80f5788ca3cf Mon Sep 17 00:00:00 2001
From: Guy Ben-Aharon <baguy3@gmail.com>
Date: Mon, 7 Oct 2024 17:13:10 +0300
Subject: [PATCH] update dependencies order (#255)

---
 .../dependencies-section.tsx                  | 13 ++++++-
 .../dependency-list-item-content.tsx          | 36 +++++++++----------
 .../dependency-list-item-header.tsx           |  2 +-
 3 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/pages/editor-page/side-panel/dependencies-section/dependencies-section.tsx b/src/pages/editor-page/side-panel/dependencies-section/dependencies-section.tsx
index 92c47c28..1ca6f4d7 100644
--- a/src/pages/editor-page/side-panel/dependencies-section/dependencies-section.tsx
+++ b/src/pages/editor-page/side-panel/dependencies-section/dependencies-section.tsx
@@ -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 (
diff --git a/src/pages/editor-page/side-panel/dependencies-section/dependency-list/dependency-list-item/dependency-list-item-content/dependency-list-item-content.tsx b/src/pages/editor-page/side-panel/dependencies-section/dependency-list/dependency-list-item/dependency-list-item-content/dependency-list-item-content.tsx
index 5e329f22..ef8ee6c0 100644
--- a/src/pages/editor-page/side-panel/dependencies-section/dependency-list/dependency-list-item/dependency-list-item-content/dependency-list-item-content.tsx
+++ b/src/pages/editor-page/side-panel/dependencies-section/dependency-list/dependency-list-item/dependency-list-item-content/dependency-list-item-content.tsx
@@ -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">
diff --git a/src/pages/editor-page/side-panel/dependencies-section/dependency-list/dependency-list-item/dependency-list-item-header/dependency-list-item-header.tsx b/src/pages/editor-page/side-panel/dependencies-section/dependency-list/dependency-list-item/dependency-list-item-header/dependency-list-item-header.tsx
index 81076a71..bebb7134 100644
--- a/src/pages/editor-page/side-panel/dependencies-section/dependency-list/dependency-list-item/dependency-list-item-header/dependency-list-item-header.tsx
+++ b/src/pages/editor-page/side-panel/dependencies-section/dependency-list/dependency-list-item/dependency-list-item-header/dependency-list-item-header.tsx
@@ -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(