From c99b7e2e97acffc1cab450dfbf758c38b8b6e4d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D1=80=D1=82=D1=91=D0=BC=20=D0=9C=D1=83=D1=84=D0=B0?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=BB=D0=BE=D0=B2?=
 <67755036+artemmufazalov@users.noreply.github.com>
Date: Wed, 29 Nov 2023 11:58:10 +0300
Subject: [PATCH] fix(Schema): display keys in right order (#596)

---
 .../Schema/SchemaViewer/SchemaViewer.tsx      | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx b/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx
index d4f6ee200..13195fdfb 100644
--- a/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx
+++ b/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx
@@ -1,3 +1,4 @@
+import {useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
@@ -28,6 +29,16 @@ interface SchemaViewerProps {
 }
 
 export const SchemaViewer = ({keyColumnIds = [], columns = [], type}: SchemaViewerProps) => {
+    // Keys should be displayd by their order in keyColumnIds (Primary Key)
+    const keyColumnsOrderValues = useMemo(() => {
+        return keyColumnIds.reduce<Record<number, number>>((result, keyColumnId, index) => {
+            // Put columns with negative values, so they will be the first with ascending sort
+            // Minus keyColumnIds.length for the first key, -1 for the last
+            result[keyColumnId] = index - keyColumnIds.length;
+            return result;
+        }, {});
+    }, [keyColumnIds]);
+
     let dataTableColumns: Column<TColumnDescription>[] = [
         {
             name: SchemaViewerColumns.id,
@@ -36,8 +47,11 @@ export const SchemaViewer = ({keyColumnIds = [], columns = [], type}: SchemaView
         {
             name: SchemaViewerColumns.key,
             width: 40,
+            // Table should start with key columns on sort click
+            defaultOrder: DataTable.ASCENDING,
             sortAccessor: (row) => {
-                return row.Id && keyColumnIds.includes(row.Id) ? 1 : 0;
+                // Values in keyColumnsOrderValues are always negative, so it will be 1 for not key columns
+                return (row.Id && keyColumnsOrderValues[row.Id]) || 1;
             },
             render: ({row}) => {
                 return row.Id && keyColumnIds.includes(row.Id) ? (
@@ -58,6 +72,8 @@ export const SchemaViewer = ({keyColumnIds = [], columns = [], type}: SchemaView
         {
             name: SchemaViewerColumns.notNull,
             width: 100,
+            // Table should start with notNull columns on sort click
+            defaultOrder: DataTable.DESCENDING,
             render: ({row}) => {
                 if (row.NotNull) {
                     return '\u2713';
@@ -75,22 +91,14 @@ export const SchemaViewer = ({keyColumnIds = [], columns = [], type}: SchemaView
         );
     }
 
-    // Display key columns first
-    const tableData = columns.sort((column) => {
-        if (column.Id && keyColumnIds.includes(column.Id)) {
-            return 1;
-        }
-        return -1;
-    });
-
     return (
         <div className={b()}>
             <DataTable
                 theme="yandex-cloud"
-                data={tableData}
+                data={columns}
                 columns={dataTableColumns}
                 settings={DEFAULT_TABLE_SETTINGS}
-                initialSortOrder={{columnId: SchemaViewerColumns.key, order: DataTable.DESCENDING}}
+                initialSortOrder={{columnId: SchemaViewerColumns.key, order: DataTable.ASCENDING}}
             />
         </div>
     );