[Discover] support description in data-structures (#9296)

Signed-off-by: Joshua Li <joshuali925@gmail.com>

src/plugins/data/common/datasets/types.ts

@@ -117,6 +117,8 @@ export interface DataStructure {
   title: string;
   /** The type of the data structure */
   type: string;
+  /** Optional description of the data structure */
+  description?: string;
   /** Optional reference to the parent data structure */
   parent?: DataStructure;
   /** Optional array of child data structures */

src/plugins/data/public/query/query_string/dataset_service/dataset_service.ts

@@ -194,6 +194,7 @@ export class DatasetService {
             id: cachedChild.id,
             title: cachedChild.title,
             type: cachedChild.type,
+            description: cachedChild.description,
             meta: cachedChild.meta,
           } as DataStructure;
         })
@@ -209,6 +210,7 @@ export class DatasetService {
       id: dataStructure.id,
       title: dataStructure.title,
       type: dataStructure.type,
+      description: dataStructure.description,
       parent: dataStructure.parent?.id || '',
       children: dataStructure.children?.map((child) => child.id) || [],
       hasNext: dataStructure.hasNext,
@@ -225,6 +227,7 @@ export class DatasetService {
         id: child.id,
         title: child.title,
         type: child.type,
+        description: child.description,
         parent: dataStructure.id,
         children: [],
         meta: child.meta,

src/plugins/data/public/ui/dataset_selector/_dataset_table.scss

@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.datasetTable {
+  &__itemDescription {
+    white-space: pre;
+  }
+}

src/plugins/data/public/ui/dataset_selector/_index.scss

@@ -6,3 +6,4 @@
 @import "./dataset_explorer";
 @import "./dataset_selector";
 @import "./dataset_configurator";
+@import "./dataset_table";

src/plugins/data/public/ui/dataset_selector/dataset_table.test.tsx

@@ -29,8 +29,8 @@ describe('DataSetTable', () => {
       title: 'Parent',
       type: 'cluster',
       children: [
-        { id: 'child1', title: 'Child 1', type: 'index' },
-        { id: 'child2', title: 'Child 2', type: 'index' },
+        { id: 'child1', title: 'Child 1', description: 'Description 1', type: 'index' },
+        { id: 'child2', title: 'Child 2', description: 'Description 2', type: 'index' },
       ],
       paginationToken: 'token',
       multiSelect: true,
@@ -78,6 +78,8 @@ describe('DataSetTable', () => {
 
     expect(screen.getByText('Child 1')).toBeInTheDocument();
     expect(screen.getByText('Child 2')).toBeInTheDocument();
+    expect(screen.getByText('Description 1')).toBeInTheDocument();
+    expect(screen.getByText('Description 2')).toBeInTheDocument();
     expect(screen.getByText('Load more')).toBeInTheDocument();
   });
 

src/plugins/data/public/ui/dataset_selector/dataset_table.tsx

@@ -3,14 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiBasicTable, EuiFieldSearch, EuiLink, EuiText } from '@elastic/eui';
-import React, { useRef, useState } from 'react';
-import { FormattedMessage } from '@osd/i18n/react';
+import { EuiBasicTable, EuiFieldSearch, EuiLink, EuiText, EuiTextColor } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
+import { FormattedMessage } from '@osd/i18n/react';
+import React, { useRef, useState } from 'react';
+import { IDataPluginServices } from '../..';
 import { DataStructure } from '../../../common';
-import { getQueryService } from '../../services';
 import { DatasetTypeConfig, DataStructureFetchOptions } from '../../query';
-import { IDataPluginServices } from '../..';
+import { getQueryService } from '../../services';
 
 interface DatasetTableProps {
   services: IDataPluginServices;
@@ -86,7 +86,29 @@ export const DatasetTable: React.FC<DatasetTableProps> = (props) => {
       <EuiBasicTable
         items={dataStructures}
         itemId="id"
-        columns={[{ field: 'title', name: 'Name' }]}
+        columns={[
+          {
+            field: 'title',
+            name: 'Name',
+            textOnly: true,
+            render: (title: string, item: DataStructure) => {
+              return (
+                <>
+                  <EuiText size="s" className="datasetTable__itemTitle">
+                    {title}
+                  </EuiText>
+                  {item.description && (
+                    <EuiText size="xs" className="eui-textTruncate">
+                      <EuiTextColor color="subdued" className="datasetTable__itemDescription">
+                        {item.description}
+                      </EuiTextColor>
+                    </EuiText>
+                  )}
+                </>
+              );
+            },
+          },
+        ]}
         loading={loading}
         isSelectable
         selection={{ onSelectionChange }}