diff --git a/packages/ui/src/ui/UIFactory.tsx b/packages/ui/src/ui/UIFactory.tsx index 0a633ea1f..736c5f085 100644 --- a/packages/ui/src/ui/UIFactory.tsx +++ b/packages/ui/src/ui/UIFactory.tsx @@ -314,7 +314,7 @@ export interface UIFactory { wrapApp(app: React.ReactElement): React.ReactElement; externalSchemaDescriptionSetup: { - caption?: string; + columns?: Record; load(cluster: string, path: string): Promise; }; diff --git a/packages/ui/src/ui/pages/navigation/tabs/Schema/ExternalDescription/ExternalDescription.tsx b/packages/ui/src/ui/pages/navigation/tabs/Schema/ExternalDescription/ExternalDescription.tsx index 02b32b36c..1616a87d4 100644 --- a/packages/ui/src/ui/pages/navigation/tabs/Schema/ExternalDescription/ExternalDescription.tsx +++ b/packages/ui/src/ui/pages/navigation/tabs/Schema/ExternalDescription/ExternalDescription.tsx @@ -14,19 +14,19 @@ export interface ExternalSchemaDescription { type: string; glossaryEntity: { description: string; + title: string; }; } interface Props { type: string; data: ExternalSchemaDescription; + column: keyof ExternalSchemaDescription['glossaryEntity']; } -export function ExternalDescription({type, data}: Props) { +export function ExternalDescription({type, data, column}: Props) { const hasWarning = type !== data.type; - const {description} = data.glossaryEntity; - const {name: title} = data; - const hasDescription = Boolean(description) && description !== ''; + const {[column]: markdown} = data.glossaryEntity ?? {}; const typeMismatchElement = ( <> @@ -61,11 +61,11 @@ export function ExternalDescription({type, data}: Props) { ) : null} - {hasDescription ? ( + {markdown ? ( ) : ( diff --git a/packages/ui/src/ui/pages/navigation/tabs/Schema/Schema.tsx b/packages/ui/src/ui/pages/navigation/tabs/Schema/Schema.tsx index 50f796ace..2323a1acc 100644 --- a/packages/ui/src/ui/pages/navigation/tabs/Schema/Schema.tsx +++ b/packages/ui/src/ui/pages/navigation/tabs/Schema/Schema.tsx @@ -46,7 +46,7 @@ const COLUMNS_TO_HIDE: Partial> = { type: true, }; -export type SchemaColumnNames = keyof SchemaItem | 'description'; +export type SchemaColumnNames = keyof SchemaItem | 'description' | 'title'; export type SchemaProps = { cluster: string; @@ -74,7 +74,12 @@ type SchemaMetaItem = { }; type SchemaComputedColumns = { - items: Partial>; + items: Partial< + Record< + ColumnName, + {caption: string; sort: boolean; align: 'left'; render?: () => React.ReactNode} + > + >; set: Array; }; @@ -101,7 +106,6 @@ class Schema extends Component { } get templates() { - const {externalSchema} = this.state; return { __default__( item: SchemaItem, @@ -139,16 +143,22 @@ class Schema extends Component { const {type_v3} = item; return ; }, - description(item: SchemaItem) { - const {type, name} = item; - const descriptionData = externalSchema && externalSchema.get(name); - return descriptionData ? ( - - ) : null; + description: (item: SchemaItem) => { + return this.renderExternalColumn(item, 'description'); + }, + title: (item: SchemaItem) => { + return this.renderExternalColumn(item, 'title'); }, }; } + renderExternalColumn(item: SchemaItem, column: 'description' | 'title') { + const {externalSchema} = this.state; + const {type, name} = item; + const data = externalSchema?.get(name); + return data ? : null; + } + get tableSettings() { const {externalSchema, externalSchemaUrl, externalSchemaError} = this.state; const {items, set} = this.props.computedColumns; @@ -158,11 +168,11 @@ class Schema extends Component { const preparedItems = _.omit(items, 'type_v2'); if (externalSchema) { - const caption = - UIFactory.externalSchemaDescriptionSetup.caption || 'External description'; - _.assign(preparedItems, { - description: { - caption: caption, + (['title', 'description'] as const).forEach((column) => { + const {columns} = UIFactory.externalSchemaDescriptionSetup; + const caption = columns?.[column] ?? `External ${column}`; + preparedItems[column] = { + caption, sort: false, align: 'left', render: () => ( @@ -178,10 +188,9 @@ class Schema extends Component { ) : null} ), - }, + }; + preparedSet.push(column); }); - - preparedSet.push('description'); } return {