[Papercut][Dashboard][Data Discovery] Add description to saved object finder table if applicable

[rshen91]

Summary

Closes #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.

[jughosta]

QQ: what if we show descriptions under the title as on Dashboard page for example:

This would help to reduce the number of columns and give more space for a longer text or a larger number of tags. Wdyt?

[sebelga]

Overall looks good, I left a comment on where to check if there is or not a description for the row item.

[sebelga]

I think we should make this check separately for each row item. So I would remove it here and change L317 (see comment)

[sebelga]

This could be

const description = !!item.simple.attributes.description && (
  <EuiText size="xs" color="subdued" className="eui-textTruncate">
    {item.simple.attributes.description}
  </EuiText>
)

[rshen91]

ooooo TIL boolean !! thanks!

[sebelga]

@rshen91 I should have said ask for it in my previous comment: can we update the jest test for the saved object finder to test that description are rendered (if one is provided)? thanks!

[sebelga]

Thanks for adding the test! I added a comment about avoiding testing implementation details. I'll approve the PR to unblock you but it would be nice to update the test 👍

[sebelga]

In this test you are testing implementation details which is not ideal. Changing the implementation (underlying component, props to those component) will break this test.

Concretely you assume that the EuiInMemoryTable is present and that it takes items prop.

Now I know that you basically copied what other tests are doing 😊 but let's take this opportunity to improve the test.

In https://github.com/elastic/kibana/blob/main/packages/kbn-test-jest-helpers/src/testbed/testbed.ts I wrote a helper function to parse an EUI table and read its content for testing purpose. Let's copy it over in this file.

So on L37 (below the imports), add the helper func

...
import { coreMock } from '@kbn/core/public/mocks';

// Copied from packages/kbn-test-jest-helpers/src/testbed/testbed.ts
const getTableMetadata = (subject: string, reactWrapper: ReactWrapper) => {
  const table = findTestSubject(reactWrapper, subject);

  if (!table.length) {
    throw new Error(`Eui Table "${subject}" not found.`);
  }

  const rows = table
    .find('tr')
    .slice(1) // we remove the first row as it is the table header
    .map((row) => ({
      reactWrapper: row,
      columns: row.find('div.euiTableCellContent').map((col) => ({
        reactWrapper: col,
        // We can't access the td value with col.text() because
        // eui adds an extra div in td on mobile => (.euiTableRowCell__mobileHeader)
        value: col.find('div.euiTableCellContent').text(),
      })),
    }));

  // Also output the raw cell values, in the following format: [[td0, td1, td2], [td0, td1, td2]]
  const tableCellsValues = rows.map(({ columns }) => columns.map((col) => col.value));
  return { rows, tableCellsValues };
};

Now this test can become

it('render description if provided', async () => {
  (contentClient.mSearch as any as jest.SpyInstance).mockImplementation(() =>
    Promise.resolve({ hits: [doc, doc2, doc4] })
  );

  const wrapper = mount(
    <SavedObjectFinder
      services={{ uiSettings, contentClient, savedObjectsTagging }}
      savedObjectMetaData={searchMetaData}
    />
  );

  await nextTick();
  wrapper.update();

  const table = getTableMetadata('savedObjectsFinderTable', wrapper);
  expect(table.tableCellsValues).toEqual([
    ['Another titleanother description', 'tag-2'],
    ['Example titleexample description', 'tag-1'],
    ['Search', 'tag-4'],
  ]);
});

See how we don't test the underlying implementation. We test that the table renders the correct text.

[jughosta]

Nice improvement for the users! LGTM 👍

[jughosta]

Let's update the branch and merge? 🙂

[jughosta]

/ci

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 7c7e052

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
savedObjectsFinder	25	26	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
savedObjectsFinder	7.4KB	7.6KB	+232.0B

Unknown metric groups

API count

id	before	after	diff
savedObjectsFinder	25	26	+1

History

• 💔 Build #252870 failed eb0c924
• 💔 Build #252515 failed ba3f1b1
• 💚 Build #249980 succeeded 006686e
• 💚 Build #249391 succeeded 6b6fe38
• 💚 Build #249327 succeeded 9533a35

cc @rshen91

[jughosta]

@elasticmachine run docs-build

[kibanamachine]

Starting backport for target branches: 8.15, 8.16, 8.17, 8.x

https://github.com/elastic/kibana/actions/runs/12054630713

[kibanamachine]

💚 All backports created successfully

Status	Branch	Result
✅	8.15
✅	8.16
✅	8.17
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation