feat(Table/Schema): add external title column [YTFRONT-3939]

ytsaurus · Dec 7, 2023 · 4df5275 · 4df5275
1 parent 340e654
commit 4df5275
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 22 deletions.
diff --git 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<keyof ExternalSchemaDescription['glossaryEntity'], string>;
         load(cluster: string, path: string): Promise<ExternalSchemaDescriptionResponse>;
     };
 

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
@@ -14,19 +14,21 @@ 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 {[column]: markdown} = data.glossaryEntity ?? {};
     const {name: title} = data;
-    const hasDescription = Boolean(description) && description !== '';
+    const hasDescription = Boolean(markdown) && markdown !== '';
 
     const typeMismatchElement = (
         <>
@@ -64,7 +66,7 @@ export function ExternalDescription({type, data}: Props) {
             {hasDescription ? (
                 <MarkdownLinePreview
                     className={block('preview')}
-                    text={description}
+                    text={markdown}
                     title={title}
                     allowHTML={true}
                 />

diff --git 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<Record<SchemaColumnNames, boolean>> = {
     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<ColumnName extends string = string> = {
-    items: Partial<Record<ColumnName, {caption: string; sort: boolean; align: 'left'}>>;
+    items: Partial<
+        Record<
+            ColumnName,
+            {caption: string; sort: boolean; align: 'left'; render?: () => React.ReactNode}
+        >
+    >;
     set: Array<ColumnName>;
 };
 
@@ -101,7 +106,6 @@ class Schema extends Component<SchemaProps> {
     }
 
     get templates() {
-        const {externalSchema} = this.state;
         return {
             __default__(
                 item: SchemaItem,
@@ -139,16 +143,22 @@ class Schema extends Component<SchemaProps> {
                 const {type_v3} = item;
                 return <SchemaDataType type_v3={type_v3} />;
             },
-            description(item: SchemaItem) {
-                const {type, name} = item;
-                const descriptionData = externalSchema && externalSchema.get(name);
-                return descriptionData ? (
-                    <ExternalDescription type={type} data={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 ? <ExternalDescription type={type} data={data} column={column} /> : null;
+    }
+
     get tableSettings() {
         const {externalSchema, externalSchemaUrl, externalSchemaError} = this.state;
         const {items, set} = this.props.computedColumns;
@@ -158,11 +168,11 @@ class Schema extends Component<SchemaProps> {
         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<SchemaProps> {
                             ) : null}
                         </div>
                     ),
-                },
+                };
+                preparedSet.push(column);
             });
-
-            preparedSet.push('description');
         }
 
         return {