[UA] Make the entire row in the deprecations table clickable

[SoniaSanzV]

Fixes #123469

Summary

In the deprecations table, the icon that we show in the resolution column can be confused with a call to action by some users. To avoid them to click it with no result, this PR changes the behavior of the table so clicking in anywhere in the row opens the resolution flyout. As agreed with @jovana-andjelkovic, I left the original link in the Issue column.

How to test

• Follow the instructions in https://github.com/elastic/kibana-team/issues/1521. Use the data folder starting with [01] because it has the largest variety of deprecations.
• Go to "Stack Management > Upgrade Assistant"
  • Navigate to "Elasticsearch deprecation issues"
    • Click in the row outside of the issue link to verify that the flyout opens.
  • Navigate to "Kibana deprecation issues"
    • Click in the row outside of the issue link to verify that the flyout opens.

Demo

Video

UA-click-row.mov

[elasticmachine]

Pinging @elastic/kibana-management (Team:Kibana Management)

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 68f1bb4

Metrics [docs]

Async chunks

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

id	before	after	diff
upgradeAssistant	207.6KB	208.1KB	+605.0B

cc @SoniaSanzV

[sabarasaba]

Nice work @SoniaSanzV! I was having a look at the code and I think we could maybe improve it a bit and reduce the amount of effect hooks we are using by doing a small refactor of the existing code and I wanted to know what you think about it:

Currently in es_deprecations_table we do something like:

{visibleDeprecations.map((deprecation, index) => {
  return (
    <EuiTableRow data-test-subj="deprecationTableRow" key={`deprecation-row-${index}`}>
      {renderTableRowCells(deprecation, mlUpgradeModeEnabled)}
    </EuiTableRow>
  );
})}

This is a bit misleading because the renderTableRowCells actually renders rows which contain cells. So my idea would be to first rename that function to renderTableRow and then to move the EuiTableRow definition to be inside the row definition for each deprecation type and attach the click event handler to it for opening the flyout. This would make it so that each row is responsible for managing the state of their flyouts without leaking the logic outside of it. So for example the deprecation_types/indices/table_row might look something like:

<EuiTableRow
  data-test-subj="deprecationTableRow"
  key={`deprecation-row-${index}`}
  onClick={() => setShowFlyout(true)}
>
  {rowFieldNames.map((field: DeprecationTableColumns) => {
    return (
      <EuiTableRowCell
        key={field}
        truncateText={false}
        data-test-subj={`reindexTableCell-${field}`}
      >
        <EsDeprecationsTableCells
          fieldName={field}
          deprecation={deprecation}
          resolutionTableCell={<ReindexResolutionCell />}
        />
      </EuiTableRowCell>
    );
  })}
</EuiTableRow>

With this we would prevent tight coupling between each row type and the parent table state and also make it easier to maintain given that if we add a new row type later we would need to remember to add this custom logic for handling flyouts

[github-actions]

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

• /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
• run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

[SoniaSanzV]

Thank you for the review @sabarasaba! I've addressed the feedback in this PR #213058