[Papercut][Dashboard][Data Discovery] Add description to saved object…

… finder table if applicable (elastic#198816) ## Summary Closes elastic#79754 This PR adds a description under the titles to the saved object finder table that is used in Dashboard's Add to Library Panel. <img width="736" alt="Screenshot 2024-11-07 at 7 55 14 AM" src="https://github.com/user-attachments/assets/6a2029cb-1958-4ae3-932b-f7fcb584870d"> --------- Co-authored-by: Davis McPhee <[email protected]>
kdelemme · Nov 27, 2024 · 23c4306 · 23c4306
1 parent 6a649b2
commit 23c4306
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 17 deletions.
diff --git a/src/plugins/saved_objects_finder/common/types.ts b/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;
 }
diff --git a/src/plugins/saved_objects_finder/public/finder/saved_object_finder.test.tsx b/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', () => {

diff --git a/src/plugins/saved_objects_finder/public/finder/saved_object_finder.tsx b/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>
           );
         },
       },

diff --git a/x-pack/test/saved_object_tagging/functional/tests/discover_integration.ts b/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'
         );
       });
     });