fix(Overview): use definition list for external objects info (#3002)

artemmufazalov · web-flow · commit 34e428a86dba · 2025-10-23T10:33:24.000Z
diff --git a/src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.scss b/src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.scss
diff --git a/src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.tsx b/src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.tsx
@@ -1,32 +1,26 @@
-import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
-import type {InfoViewerItem} from '../../../../components/InfoViewer';
-import {InfoViewer} from '../../../../components/InfoViewer';
-import {formatCommonItem} from '../../../../components/InfoViewer/formatters';
+import type {YDBDefinitionListItem} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
+import {YDBDefinitionList} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
 import type {TEvDescribeSchemeResult} from '../../../../types/api/schema';
-import {cn} from '../../../../utils/cn';
 import {getEntityName} from '../../utils';
 import i18n from '../i18n';
+import {prepareCreateTimeItem, renderNoEntityDataError} from '../utils';
 
-import './ExternalDataSource.scss';
-
-const b = cn('ydb-external-data-source-info');
-
-const prepareExternalDataSourceSummary = (data: TEvDescribeSchemeResult) => {
-    const info: InfoViewerItem[] = [
+function prepareExternalDataSourceSummary(data: TEvDescribeSchemeResult): YDBDefinitionListItem[] {
+    const info: YDBDefinitionListItem[] = [
         {
-            label: i18n('external-objects.source-type'),
-            value: data.PathDescription?.ExternalDataSourceDescription?.SourceType,
+            name: i18n('external-objects.source-type'),
+            content: data.PathDescription?.ExternalDataSourceDescription?.SourceType,
         },
     ];
 
     const createStep = data.PathDescription?.Self?.CreateStep;
 
     if (Number(createStep)) {
-        info.push(formatCommonItem('CreateStep', data.PathDescription?.Self?.CreateStep));
+        info.push(prepareCreateTimeItem(createStep));
     }
 
     return info;
-};
+}
 
 function getAuthMethodValue(data: TEvDescribeSchemeResult) {
     const {Auth} = data.PathDescription?.ExternalDataSourceDescription || {};
@@ -48,43 +42,35 @@ function getAuthMethodValue(data: TEvDescribeSchemeResult) {
     return i18n('external-objects.auth-method.none');
 }
 
-const prepareExternalDataSourceInfo = (data: TEvDescribeSchemeResult): InfoViewerItem[] => {
+function prepareExternalDataSourceInfo(data: TEvDescribeSchemeResult): YDBDefinitionListItem[] {
     const {Location} = data.PathDescription?.ExternalDataSourceDescription || {};
 
     return [
         ...prepareExternalDataSourceSummary(data),
         {
-            label: i18n('external-objects.location'),
-            value: (
-                <EntityStatus
-                    name={Location}
-                    showStatus={false}
-                    hasClipboardButton
-                    clipboardButtonAlwaysVisible
-                    className={b('location')}
-                />
-            ),
+            name: i18n('external-objects.location'),
+            content: Location,
+            copyText: Location,
         },
         {
-            label: i18n('external-objects.auth-method'),
-            value: getAuthMethodValue(data),
+            name: i18n('external-objects.auth-method'),
+            content: getAuthMethodValue(data),
         },
     ];
-};
+}
 
 interface ExternalDataSourceProps {
     data?: TEvDescribeSchemeResult;
-    prepareData: (data: TEvDescribeSchemeResult) => InfoViewerItem[];
+    prepareData: (data: TEvDescribeSchemeResult) => YDBDefinitionListItem[];
 }
 
 const ExternalDataSource = ({data, prepareData}: ExternalDataSourceProps) => {
     const entityName = getEntityName(data?.PathDescription);
 
     if (!data) {
-        return <div className="error">No {entityName} data</div>;
+        return renderNoEntityDataError(entityName);
     }
-
-    return <InfoViewer title={entityName} info={prepareData(data)} />;
+    return <YDBDefinitionList title={entityName} items={prepareData(data)} />;
 };
 
 export const ExternalDataSourceInfo = ({data}: {data?: TEvDescribeSchemeResult}) => {
diff --git a/src/containers/Tenant/Info/ExternalTable/ExternalTable.scss b/src/containers/Tenant/Info/ExternalTable/ExternalTable.scss
diff --git a/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx b/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx
@@ -1,37 +1,31 @@
 import {useLocation} from 'react-router-dom';
 
-import {EntityStatus} from '../../../../components/EntityStatus/EntityStatus';
-import type {InfoViewerItem} from '../../../../components/InfoViewer';
-import {InfoViewer} from '../../../../components/InfoViewer';
-import {formatCommonItem} from '../../../../components/InfoViewer/formatters';
 import {LinkWithIcon} from '../../../../components/LinkWithIcon/LinkWithIcon';
+import type {YDBDefinitionListItem} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
+import {YDBDefinitionList} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
 import {createExternalUILink, parseQuery} from '../../../../routes';
 import type {TEvDescribeSchemeResult} from '../../../../types/api/schema';
-import {cn} from '../../../../utils/cn';
 import {getEntityName} from '../../utils';
 import i18n from '../i18n';
-
-import './ExternalTable.scss';
-
-const b = cn('ydb-external-table-info');
+import {prepareCreateTimeItem, renderNoEntityDataError} from '../utils';
 
 const prepareExternalTableSummary = (data: TEvDescribeSchemeResult, pathToDataSource: string) => {
     const {CreateStep} = data.PathDescription?.Self || {};
     const {SourceType, DataSourcePath} = data.PathDescription?.ExternalTableDescription || {};
 
     const dataSourceName = DataSourcePath?.split('/').pop();
 
-    const info: InfoViewerItem[] = [
-        {label: i18n('external-objects.source-type'), value: SourceType},
+    const info: YDBDefinitionListItem[] = [
+        {name: i18n('external-objects.source-type'), content: SourceType},
     ];
 
     if (Number(CreateStep)) {
-        info.push(formatCommonItem('CreateStep', CreateStep));
+        info.push(prepareCreateTimeItem(CreateStep));
     }
 
     info.push({
-        label: i18n('external-objects.data-source'),
-        value: DataSourcePath && (
+        name: i18n('external-objects.data-source'),
+        content: DataSourcePath && (
             <span title={DataSourcePath}>
                 <LinkWithIcon title={dataSourceName || ''} url={pathToDataSource} />
             </span>
@@ -44,29 +38,25 @@ const prepareExternalTableSummary = (data: TEvDescribeSchemeResult, pathToDataSo
 const prepareExternalTableInfo = (
     data: TEvDescribeSchemeResult,
     pathToDataSource: string,
-): InfoViewerItem[] => {
+): YDBDefinitionListItem[] => {
     const location = data.PathDescription?.ExternalTableDescription?.Location;
 
     return [
         ...prepareExternalTableSummary(data, pathToDataSource),
         {
-            label: i18n('external-objects.location'),
-            value: (
-                <EntityStatus
-                    name={location}
-                    showStatus={false}
-                    hasClipboardButton
-                    clipboardButtonAlwaysVisible
-                    className={b('location')}
-                />
-            ),
+            name: i18n('external-objects.location'),
+            content: location,
+            copyText: location,
         },
     ];
 };
 
 interface ExternalTableProps {
     data?: TEvDescribeSchemeResult;
-    prepareData: (data: TEvDescribeSchemeResult, pathToDataSource: string) => InfoViewerItem[];
+    prepareData: (
+        data: TEvDescribeSchemeResult,
+        pathToDataSource: string,
+    ) => YDBDefinitionListItem[];
 }
 
 const ExternalTable = ({data, prepareData}: ExternalTableProps) => {
@@ -81,10 +71,10 @@ const ExternalTable = ({data, prepareData}: ExternalTableProps) => {
     const entityName = getEntityName(data?.PathDescription);
 
     if (!data) {
-        return <div className="error">No {entityName} data</div>;
+        return renderNoEntityDataError(entityName);
     }
 
-    return <InfoViewer title={entityName} info={prepareData(data, pathToDataSource)} />;
+    return <YDBDefinitionList title={entityName} items={prepareData(data, pathToDataSource)} />;
 };
 
 export const ExternalTableInfo = ({data}: {data?: TEvDescribeSchemeResult}) => {
diff --git a/src/containers/Tenant/Info/SystemView/SystemView.tsx b/src/containers/Tenant/Info/SystemView/SystemView.tsx
@@ -1,11 +1,10 @@
-import {Text} from '@gravity-ui/uikit';
-
 import type {YDBDefinitionListItem} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
 import {YDBDefinitionList} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
 import type {TEvDescribeSchemeResult} from '../../../../types/api/schema';
 import {prepareSystemViewType} from '../../../../utils/schema';
 import {getEntityName} from '../../utils';
 import i18n from '../i18n';
+import {renderNoEntityDataError} from '../utils';
 
 const prepareSystemViewItems = (data: TEvDescribeSchemeResult): YDBDefinitionListItem[] => {
     const systemViewType = data.PathDescription?.SysViewDescription?.Type;
@@ -26,11 +25,7 @@ export function SystemViewInfo({data}: SystemViewInfoProps) {
     const entityName = getEntityName(data?.PathDescription);
 
     if (!data) {
-        return (
-            <Text variant="body-2" color="danger">
-                {i18n('no-entity-data', {entityName})}
-            </Text>
-        );
+        return renderNoEntityDataError(entityName);
     }
 
     const items = prepareSystemViewItems(data);
diff --git a/src/containers/Tenant/Info/View/View.tsx b/src/containers/Tenant/Info/View/View.tsx
@@ -4,6 +4,7 @@ import {YDBDefinitionList} from '../../../../components/YDBDefinitionList/YDBDef
 import type {TEvDescribeSchemeResult} from '../../../../types/api/schema';
 import {getEntityName} from '../../utils';
 import i18n from '../i18n';
+import {renderNoEntityDataError} from '../utils';
 
 const prepareViewItems = (data: TEvDescribeSchemeResult): YDBDefinitionListItem[] => {
     const queryText = data.PathDescription?.ViewDescription?.QueryText;
@@ -25,7 +26,7 @@ export function ViewInfo({data}: ViewInfoProps) {
     const entityName = getEntityName(data?.PathDescription);
 
     if (!data) {
-        return <div className="error">No {entityName} data</div>;
+        return renderNoEntityDataError(entityName);
     }
 
     const items = prepareViewItems(data);
diff --git a/src/containers/Tenant/Info/i18n/en.json b/src/containers/Tenant/Info/i18n/en.json
@@ -1,4 +1,6 @@
 {
+  "created": "Created",
+
   "external-objects.source-type": "Source Type",
   "external-objects.data-source": "Data Source",
   "external-objects.location": "Location",
diff --git a/src/containers/Tenant/Info/utils.tsx b/src/containers/Tenant/Info/utils.tsx
@@ -0,0 +1,22 @@
+import {Text} from '@gravity-ui/uikit';
+
+import type {YDBDefinitionListItem} from '../../../components/YDBDefinitionList/YDBDefinitionList';
+import {EMPTY_DATA_PLACEHOLDER} from '../../../utils/constants';
+import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
+
+import i18n from './i18n';
+
+export function prepareCreateTimeItem(createStep?: string | number): YDBDefinitionListItem {
+    return {
+        name: i18n('created'),
+        content: formatDateTime(createStep, {defaultValue: EMPTY_DATA_PLACEHOLDER}),
+    };
+}
+
+export function renderNoEntityDataError(entityName: string | undefined) {
+    return (
+        <Text variant="body-2" color="danger">
+            {i18n('no-entity-data', {entityName: entityName ?? ''})}
+        </Text>
+    );
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,6 @@`
`1`	`1`	`{`
	`2`	`+ "created": "Created",`
	`3`	`+`
`2`	`4`	`"external-objects.source-type": "Source Type",`
`3`	`5`	`"external-objects.data-source": "Data Source",`
`4`	`6`	`"external-objects.location": "Location",`