fix: review

Author: Raubzeug

src/containers/Tenant/Schema/SchemaViewer/columns.tsx

@@ -124,7 +124,7 @@ function normalizeColumns(columns: SchemaColumn[], data?: SchemaData[]) {
                 data: dataSlice,
                 name: column.name,
                 header: typeof column.header === 'string' ? column.header : undefined,
-                sortable: column.sortable === undefined,
+                sortable: column.sortable || column.sortable === undefined,
             }),
         };
     });
@@ -159,7 +159,5 @@ export function getRowTableColumns(
         rowTableColumns.push(autoIncrementColumn);
     }
 
-    console.log(normalizeColumns(rowTableColumns, data));
-
     return normalizeColumns(rowTableColumns, data);
 }

src/containers/Tenant/Schema/SchemaViewer/types.ts

@@ -1,6 +1,6 @@
 import type {Column} from '@gravity-ui/react-data-table';
 
-export interface SchemaData {
+export type SchemaData = {
     id?: number;
     name?: string;
     keyColumnIndex?: number;
@@ -12,7 +12,7 @@ export interface SchemaData {
     prefferedPoolKind?: string;
     columnCodec?: string;
     defaultValue?: string | number | boolean;
-}
+};
 
 export interface SchemaColumn extends Column<SchemaData> {
     name: keyof SchemaData;

src/utils/__test__/getColumnWidth.test.ts

@@ -26,6 +26,13 @@ describe('getColumnWidth', () => {
             HEADER_PADDING + SORT_ICON_PADDING + 'test'.length * PIXELS_PER_CHARACTER,
         );
     });
+    it('calculates correct width for columns with sorting and column name wider than header', () => {
+        const data = [{test: 'this is a longer string'}];
+        const result = getColumnWidth({data, name: 'test', sortable: true});
+        expect(result).toBe(
+            HEADER_PADDING + 'this is a longer string'.length * PIXELS_PER_CHARACTER,
+        );
+    });
 
     it('calculates correct width for columns with header', () => {
         const result = getColumnWidth({data: [], name: 'test', header: 'a'});

src/utils/getColumnWidth.ts

@@ -1,46 +1,46 @@
-import type {SchemaData} from '../containers/Tenant/Schema/SchemaViewer/types';
-import type {KeyValueRow} from '../types/api/query';
-
 export const MAX_COLUMN_WIDTH = 600;
 export const HEADER_PADDING = 20;
 export const SORT_ICON_PADDING = 18;
 export const PIXELS_PER_CHARACTER = 10;
 
-export function getColumnWidth<T extends KeyValueRow | SchemaData>({
+export function getColumnWidth({
     data,
     name,
     header,
     sortable,
 }: {
-    data?: T[];
+    data?: Record<string, unknown>[];
     name: string;
     header?: string;
     sortable?: boolean;
 }) {
-    const sortPadding = sortable ? SORT_ICON_PADDING : 0;
-    let maxColumnContentLength = typeof header === 'string' ? header.length : name.length;
+    const headerContentLength = typeof header === 'string' ? header.length : name.length;
+
+    let maxColumnContentLength = headerContentLength;
 
     if (data) {
         for (const row of data) {
             let cellLength = 0;
-            if (hasProperty(row, name) && row[name]) {
+            if (row[name]) {
                 cellLength = String(row[name]).length;
             }
 
             maxColumnContentLength = Math.max(maxColumnContentLength, cellLength);
 
+            const sortPadding =
+                sortable && maxColumnContentLength <= headerContentLength ? SORT_ICON_PADDING : 0;
+
             if (
-                maxColumnContentLength * PIXELS_PER_CHARACTER + HEADER_PADDING >=
+                maxColumnContentLength * PIXELS_PER_CHARACTER + HEADER_PADDING + sortPadding >=
                 MAX_COLUMN_WIDTH
             ) {
                 return MAX_COLUMN_WIDTH;
             }
         }
     }
 
-    return maxColumnContentLength * PIXELS_PER_CHARACTER + HEADER_PADDING + sortPadding;
-}
+    const sortPadding =
+        sortable && maxColumnContentLength <= headerContentLength ? SORT_ICON_PADDING : 0;
 
-function hasProperty(obj: KeyValueRow | SchemaData, key: string): obj is KeyValueRow {
-    return key in obj;
+    return maxColumnContentLength * PIXELS_PER_CHARACTER + HEADER_PADDING + sortPadding;
 }