[8.x] [Papercut][Dashboard][Data Discovery] Add description to saved object finder table if applicable (#198816) (#202031)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Papercut][Dashboard][Data Discovery] Add description to saved object
finder table if applicable
(#198816)](https://github.com/elastic/kibana/pull/198816)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Rachel
Shen","email":"rshen@elastic.co"},"sourceCommit":{"committedDate":"2024-11-27T16:38:39Z","message":"[Papercut][Dashboard][Data
Discovery] Add description to saved object finder table if applicable
(#198816)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/79754\r\n\r\nThis PR adds a
description under the titles to the saved object finder\r\ntable that is
used in Dashboard's Add to Library Panel.\r\n\r\n<img width=\"736\"
alt=\"Screenshot 2024-11-07 at 7 55
14 AM\"\r\nsrc=\"https://github.com/user-attachments/assets/6a2029cb-1958-4ae3-932b-f7fcb584870d\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Davis McPhee
<davis.mcphee@elastic.co>","sha":"23c4306387725cdafc1c6c6d3aec5049a6f82858","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","v9.0.0","backport:prev-major","papercut"],"title":"[Papercut][Dashboard][Data
Discovery] Add description to saved object finder table if
applicable","number":198816,"url":"https://github.com/elastic/kibana/pull/198816","mergeCommit":{"message":"[Papercut][Dashboard][Data
Discovery] Add description to saved object finder table if applicable
(#198816)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/79754\r\n\r\nThis PR adds a
description under the titles to the saved object finder\r\ntable that is
used in Dashboard's Add to Library Panel.\r\n\r\n<img width=\"736\"
alt=\"Screenshot 2024-11-07 at 7 55
14 AM\"\r\nsrc=\"https://github.com/user-attachments/assets/6a2029cb-1958-4ae3-932b-f7fcb584870d\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Davis McPhee
<davis.mcphee@elastic.co>","sha":"23c4306387725cdafc1c6c6d3aec5049a6f82858"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198816","number":198816,"mergeCommit":{"message":"[Papercut][Dashboard][Data
Discovery] Add description to saved object finder table if applicable
(#198816)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/79754\r\n\r\nThis PR adds a
description under the titles to the saved object finder\r\ntable that is
used in Dashboard's Add to Library Panel.\r\n\r\n<img width=\"736\"
alt=\"Screenshot 2024-11-07 at 7 55
14 AM\"\r\nsrc=\"https://github.com/user-attachments/assets/6a2029cb-1958-4ae3-932b-f7fcb584870d\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Davis McPhee
<davis.mcphee@elastic.co>","sha":"23c4306387725cdafc1c6c6d3aec5049a6f82858"}}]}]
BACKPORT-->

Co-authored-by: Rachel Shen <rshen@elastic.co>

src/plugins/saved_objects_finder/common/types.ts

@@ -14,4 +14,5 @@ export type SavedObjectCommon<T extends FinderAttributes = FinderAttributes> = S
 export interface FinderAttributes {
   title?: string;
   name?: string;
+  description?: string;
 }

src/plugins/saved_objects_finder/public/finder/saved_object_finder.test.tsx

@@ -41,17 +41,19 @@ describe('SavedObjectsFinder', () => {
   const doc = {
     id: '1',
     type: 'search',
-    attributes: { title: 'Example title' },
+    attributes: { title: 'Example title', description: 'example description' },
   };
 
   const doc2 = {
     id: '2',
     type: 'search',
-    attributes: { title: 'Another title' },
+    attributes: { title: 'Another title', description: 'another description' },
   };
 
   const doc3 = { type: 'vis', id: '3', attributes: { title: 'Vis' } };
 
+  const doc4 = { type: 'search', id: '4', attributes: { title: 'Search' } };
+
   const searchMetaData = [
     {
       type: 'search',
@@ -234,6 +236,30 @@ describe('SavedObjectsFinder', () => {
         </React.Fragment>
       `);
     });
+
+    it('render description if provided', async () => {
+      (contentClient.mSearch as any as jest.SpyInstance).mockImplementation(() =>
+        Promise.resolve({ hits: [doc, doc2, doc4] })
+      );
+
+      const wrapper = shallow(
+        <SavedObjectFinder
+          {...baseProps}
+          services={{ uiSettings, contentClient, savedObjectsTagging }}
+          savedObjectMetaData={searchMetaData}
+        />
+      );
+
+      wrapper.instance().componentDidMount!();
+      await nextTick();
+      expect(
+        wrapper
+          .find(EuiInMemoryTable)
+          .prop('items')
+          .filter((item: any) => item.attributes.description)
+          .map((item: any) => item.attributes.description)
+      ).toEqual([doc.attributes.description, doc2.attributes.description]);
+    });
   });
 
   describe('sorting', () => {

src/plugins/saved_objects_finder/public/finder/saved_object_finder.tsx

@@ -146,7 +146,7 @@ class SavedObjectFinderUiClass extends React.Component<
     const savedObjects = response.hits
       .map((savedObject) => {
         const {
-          attributes: { name, title },
+          attributes: { name, title, description },
         } = savedObject;
         const titleToUse = typeof title === 'string' ? title : '';
         const nameToUse = name ? name : titleToUse;
@@ -156,6 +156,7 @@ class SavedObjectFinderUiClass extends React.Component<
           title: titleToUse,
           name: nameToUse,
           simple: savedObject,
+          description,
         };
       })
       .filter((savedObject) => {
@@ -317,13 +318,23 @@ class SavedObjectFinderUiClass extends React.Component<
           );
 
           const tooltipText = this.props.getTooltipText?.(item);
-
+          const description = !!item.simple.attributes.description && (
+            <EuiText size="xs" color="subdued">
+              {item.simple.attributes.description}
+            </EuiText>
+          );
           return tooltipText ? (
-            <EuiToolTip position="left" content={tooltipText}>
-              {link}
-            </EuiToolTip>
+            <EuiFlexItem grow={false}>
+              <EuiToolTip position="left" content={tooltipText}>
+                {link}
+              </EuiToolTip>
+              {description}
+            </EuiFlexItem>
           ) : (
-            link
+            <EuiFlexItem grow={false}>
+              {link}
+              {description}
+            </EuiFlexItem>
           );
         },
       },

x-pack/test/saved_object_tagging/functional/tests/discover_integration.ts

@@ -82,22 +82,25 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       it('allows to manually type tag filter query', async () => {
         await PageObjects.discover.openLoadSavedSearchPanel();
         await testSubjects.setValue('savedObjectFinderSearchInput', 'tag:(tag-1)');
-        await expectSavedSearches('A Saved Search');
+        await expectSavedSearches('A Saved Search\nA Saved Search Description');
       });
 
       it('allows to filter by selecting a tag in the filter menu', async () => {
         await PageObjects.discover.openLoadSavedSearchPanel();
         await selectFilterTags('tag-2');
-        await expectSavedSearches('A Saved Search', 'A Different Saved Search');
+        await expectSavedSearches(
+          'A Saved Search\nA Saved Search Description',
+          'A Different Saved Search\nA Different Saved Search Description'
+        );
       });
 
       it('allows to filter by multiple tags', async () => {
         await PageObjects.discover.openLoadSavedSearchPanel();
         await selectFilterTags('tag-2', 'tag-3');
         await expectSavedSearches(
-          'A Saved Search',
-          'A Different Saved Search',
-          'A Third Saved Search'
+          'A Different Saved Search\nA Different Saved Search Description',
+          'A Saved Search\nA Saved Search Description',
+          'A Third Saved Search\nAn Untagged Saved Search Description'
         );
       });
     });
@@ -116,7 +119,11 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         });
         await PageObjects.discover.openLoadSavedSearchPanel();
         await selectFilterTags('tag-1', 'tag-2');
-        await expectSavedSearches('A Saved Search', 'A Different Saved Search', 'My New Search');
+        await expectSavedSearches(
+          'A Different Saved Search\nA Different Saved Search Description',
+          'A Saved Search\nA Saved Search Description',
+          'My New Search'
+        );
       });
 
       it('allows to create a tag from the tag selector', async () => {
@@ -172,9 +179,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         await PageObjects.discover.openLoadSavedSearchPanel();
         await selectFilterTags('tag-3');
         await expectSavedSearches(
-          'A Different Saved Search',
-          'A Third Saved Search',
-          'A Saved Search'
+          'A Different Saved Search\nA Different Saved Search Description',
+          'A Saved Search\nA Saved Search Description',
+          'A Third Saved Search\nAn Untagged Saved Search Description'
         );
       });
     });