fix(SchemaViewer): fix sort order and add key icon

Author: Raubzeug

src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.scss

@@ -62,4 +62,19 @@
     &__more-badge {
         margin-left: var(--g-spacing-1);
     }
+    &__key-icon {
+        position: absolute;
+        top: 3.5px;
+
+        margin-left: var(--g-spacing-half);
+
+        vertical-align: baseline;
+    }
+    &__id-wrapper {
+        position: relative;
+
+        display: inline-block;
+
+        padding-right: var(--g-spacing-1);
+    }
 }

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

@@ -1,10 +1,14 @@
 import DataTable from '@gravity-ui/react-data-table';
+import {Icon} from '@gravity-ui/uikit';
 
 import {getColumnWidth} from '../../../../utils/getColumnWidth';
 
 import i18n from './i18n';
+import {b} from './shared';
 import type {SchemaColumn, SchemaData} from './types';
 
+import KeyIcon from '@gravity-ui/icons/svgs/key.svg';
+
 export const SCHEMA_COLUMNS_WIDTH_LS_KEY = 'schemaTableColumnsWidth';
 
 const SCHEMA_TABLE_COLUMS_IDS = {
@@ -26,7 +30,16 @@ const idColumn: SchemaColumn = {
         return i18n('column-title.id');
     },
     width: 60,
-    render: ({row}) => row.id,
+    align: DataTable.RIGHT,
+    render: ({row}) => {
+        const keyIcon = <Icon className={b('key-icon')} size={12} data={KeyIcon} />;
+        return (
+            <span className={b('id-wrapper')}>
+                {row.id}
+                {row.keyColumnIndex === undefined || row.keyColumnIndex === -1 ? null : keyIcon}
+            </span>
+        );
+    },
 };
 const nameColumn: SchemaColumn = {
     name: SCHEMA_TABLE_COLUMS_IDS.name,

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

@@ -70,10 +70,8 @@ function prepareRowTableSchema(data: TTableDescription = {}): SchemaData[] {
             columnCodec,
         };
     });
-    const keyColumns = preparedColumns?.filter((column) => column.keyColumnIndex !== -1) || [];
-    const otherColumns = preparedColumns?.filter((column) => column.keyColumnIndex === -1) || [];
 
-    return [...keyColumns, ...otherColumns];
+    return preparedColumns ?? [];
 }
 
 function prepareExternalTableSchema(data: TExternalTableDescription = {}): SchemaData[] {