Merge branch 'main' into astandrik.stash-multipart

Author: astandrik

src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -24,7 +24,7 @@ import {
     formatNumber,
     formatSecondsToHours,
 } from '../../../utils/dataFormatters/dataFormatters';
-import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
+import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
 import {Acl} from '../Acl/Acl';
 import {EntityTitle} from '../EntityTitle/EntityTitle';
 import {SchemaViewer} from '../Schema/SchemaViewer/SchemaViewer';
@@ -76,7 +76,6 @@ export function ObjectSummary({
     onExpandSummary,
     isCollapsed,
 }: ObjectSummaryProps) {
-    const [autoRefreshInterval] = useAutoRefreshInterval();
     const dispatch = useTypedDispatch();
     const [, setCurrentPath] = useQueryParam('schema', StringParam);
     const [commonInfoVisibilityState, dispatchCommonInfoVisibilityState] = React.useReducer(
@@ -95,15 +94,10 @@ export function ObjectSummary({
         ignoreQueryPrefix: true,
     });
 
-    const {currentData: currentObjectData} = overviewApi.useGetOverviewQuery(
-        {
-            path,
-            database: tenantName,
-        },
-        {
-            pollingInterval: autoRefreshInterval,
-        },
-    );
+    const {currentData: currentObjectData} = overviewApi.useGetOverviewQuery({
+        path,
+        database: tenantName,
+    });
     const currentSchemaData = currentObjectData?.PathDescription?.Self;
 
     React.useEffect(() => {

src/containers/Tenant/ObjectSummary/SchemaTree/RefreshTreeButton.tsx

@@ -2,18 +2,23 @@ import {ArrowsRotateLeft} from '@gravity-ui/icons';
 import {ActionTooltip, Button, Icon} from '@gravity-ui/uikit';
 import {nanoid} from '@reduxjs/toolkit';
 
+import {api} from '../../../../store/reducers/api';
+import {useTypedDispatch} from '../../../../utils/hooks';
 import {useDispatchTreeKey} from '../UpdateTreeContext';
 import {b} from '../shared';
 
 export function RefreshTreeButton() {
     const updateTreeKey = useDispatchTreeKey();
+    const dispatch = useTypedDispatch();
+
     return (
         <ActionTooltip title="Refresh">
             <Button
                 className={b('refresh-button')}
                 view="flat-secondary"
                 onClick={() => {
                     updateTreeKey(nanoid());
+                    dispatch(api.util.invalidateTags(['SchemaTree']));
                 }}
             >
                 <Icon data={ArrowsRotateLeft} />

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/SchemaViewer.tsx

@@ -38,20 +38,19 @@ interface SchemaViewerProps {
 
 export const SchemaViewer = ({type, path, tenantName, extended = false}: SchemaViewerProps) => {
     const [autoRefreshInterval] = useAutoRefreshInterval();
+
+    // Refresh table only in Diagnostics
+    const pollingInterval = extended ? autoRefreshInterval : undefined;
+
     const {currentData: schemaData, isLoading: loading} = overviewApi.useGetOverviewQuery(
-        {
-            path,
-            database: tenantName,
-        },
-        {
-            pollingInterval: autoRefreshInterval,
-        },
+        {path, database: tenantName},
+        {pollingInterval},
     );
 
     const viewSchemaRequestParams = isViewType(type) ? {path, database: tenantName} : skipToken;
 
     const {data: viewColumnsData, isLoading: isViewSchemaLoading} =
-        viewSchemaApi.useGetViewSchemaQuery(viewSchemaRequestParams);
+        viewSchemaApi.useGetViewSchemaQuery(viewSchemaRequestParams, {pollingInterval});
 
     const tableData = React.useMemo(() => {
         if (isViewType(type)) {

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[] {

src/containers/Tenant/Tenant.tsx

@@ -12,7 +12,7 @@ import {selectSchemaObjectData} from '../../store/reducers/schema/schema';
 import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../types/additionalProps';
 import {cn} from '../../utils/cn';
 import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../../utils/constants';
-import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {isAccessError} from '../../utils/response';
 
 import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
@@ -43,7 +43,6 @@ interface TenantProps {
 }
 
 export function Tenant(props: TenantProps) {
-    const [autoRefreshInterval] = useAutoRefreshInterval();
     const [summaryVisibilityState, dispatchSummaryVisibilityAction] = React.useReducer(
         paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_SUMMARY_COLLAPSED),
         undefined,
@@ -95,12 +94,7 @@ export function Tenant(props: TenantProps) {
         currentData: currentItem,
         error,
         isLoading,
-    } = overviewApi.useGetOverviewQuery(
-        {path, database: tenantName},
-        {
-            pollingInterval: autoRefreshInterval,
-        },
-    );
+    } = overviewApi.useGetOverviewQuery({path, database: tenantName});
 
     const preloadedData = useTypedSelector((state) =>
         selectSchemaObjectData(state, path, tenantName),

src/store/reducers/api.ts

@@ -9,7 +9,16 @@ export const api = createApi({
      */
     endpoints: () => ({}),
     invalidationBehavior: 'immediately',
-    tagTypes: ['All', 'PDiskData', 'PreviewData', 'StorageData', 'Tablet', 'UserData', 'VDiskData'],
+    tagTypes: [
+        'All',
+        'PDiskData',
+        'PreviewData',
+        'SchemaTree',
+        'StorageData',
+        'Tablet',
+        'UserData',
+        'VDiskData',
+    ],
 });
 
 export const _NEVER = Symbol();

src/store/reducers/overview/overview.ts

@@ -51,7 +51,7 @@ export const overviewApi = api.injectEndpoints({
                 }
             },
             keepUnusedDataFor: 0,
-            providesTags: ['All'],
+            providesTags: ['All', 'SchemaTree'],
         }),
     }),
 });

src/store/reducers/preview.ts

@@ -29,7 +29,7 @@ export const previewApi = api.injectEndpoints({
                     return {error: error || new Error('Unauthorized')};
                 }
             },
-            providesTags: ['All', 'PreviewData'],
+            providesTags: ['PreviewData'],
         }),
     }),
     overrideExisting: 'throw',

src/store/reducers/schemaAcl/schemaAcl.ts

@@ -18,7 +18,7 @@ export const schemaAclApi = api.injectEndpoints({
                     return {error};
                 }
             },
-            providesTags: ['All'],
+            providesTags: ['SchemaTree'],
         }),
     }),
     overrideExisting: 'throw',

src/store/reducers/viewSchema/viewSchema.ts

@@ -37,7 +37,7 @@ export const viewSchemaApi = api.injectEndpoints({
                     return {error: error};
                 }
             },
-            providesTags: ['All'],
+            providesTags: ['All', 'SchemaTree'],
         }),
     }),
     overrideExisting: 'throw',