From 231fd08b2b503e4ca8e16251d64bef5113f19526 Mon Sep 17 00:00:00 2001 From: mufazalov Date: Thu, 23 Oct 2025 13:12:40 +0300 Subject: [PATCH] fix(Overview): use definition list for external objects info --- .../ExternalDataSource.scss | 5 -- .../ExternalDataSource/ExternalDataSource.tsx | 52 +++++++------------ .../Info/ExternalTable/ExternalTable.scss | 5 -- .../Info/ExternalTable/ExternalTable.tsx | 46 +++++++--------- .../Tenant/Info/SystemView/SystemView.tsx | 9 +--- src/containers/Tenant/Info/View/View.tsx | 3 +- src/containers/Tenant/Info/i18n/en.json | 2 + src/containers/Tenant/Info/utils.tsx | 22 ++++++++ 8 files changed, 65 insertions(+), 79 deletions(-) delete mode 100644 src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.scss delete mode 100644 src/containers/Tenant/Info/ExternalTable/ExternalTable.scss create mode 100644 src/containers/Tenant/Info/utils.tsx diff --git a/src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.scss b/src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.scss deleted file mode 100644 index 00d2bbf382..0000000000 --- a/src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.scss +++ /dev/null @@ -1,5 +0,0 @@ -.ydb-external-data-source-info { - &__location { - max-width: var(--tenant-object-info-max-value-width); - } -} diff --git a/src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.tsx b/src/containers/Tenant/Info/ExternalDataSource/ExternalDataSource.tsx index 24775aea80..08f090d23f 100644 --- 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: ( - - ), + 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
No {entityName} data
; + return renderNoEntityDataError(entityName); } - - return ; + return ; }; export const ExternalDataSourceInfo = ({data}: {data?: TEvDescribeSchemeResult}) => { diff --git a/src/containers/Tenant/Info/ExternalTable/ExternalTable.scss b/src/containers/Tenant/Info/ExternalTable/ExternalTable.scss deleted file mode 100644 index 93abd4f23d..0000000000 --- a/src/containers/Tenant/Info/ExternalTable/ExternalTable.scss +++ /dev/null @@ -1,5 +0,0 @@ -.ydb-external-table-info { - &__location { - max-width: var(--tenant-object-info-max-value-width); - } -} diff --git a/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx b/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx index 29ca038eb9..dd61fe91c9 100644 --- a/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx +++ b/src/containers/Tenant/Info/ExternalTable/ExternalTable.tsx @@ -1,19 +1,13 @@ 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 || {}; @@ -21,17 +15,17 @@ const prepareExternalTableSummary = (data: TEvDescribeSchemeResult, pathToDataSo 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 && ( @@ -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: ( - - ), + 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
No {entityName} data
; + return renderNoEntityDataError(entityName); } - return ; + return ; }; export const ExternalTableInfo = ({data}: {data?: TEvDescribeSchemeResult}) => { diff --git a/src/containers/Tenant/Info/SystemView/SystemView.tsx b/src/containers/Tenant/Info/SystemView/SystemView.tsx index 7a73fc943b..09cb8794a9 100644 --- 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 ( - - {i18n('no-entity-data', {entityName})} - - ); + 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 index 431d58ef00..6386d6d691 100644 --- 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
No {entityName} data
; + 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 index a96d0e34e2..13d57e9baf 100644 --- 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 new file mode 100644 index 0000000000..3ea6ff337f --- /dev/null +++ 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 ( + + {i18n('no-entity-data', {entityName: entityName ?? ''})} + + ); +}