Add chevron collapsible table

[arbulu89]

Description

Update Table collapsible rows usage to add a chevron to collapse/expand instead of clicking anywhere in the row.
When a table has collapsible rows, the first cell of the row is reserved to add chevron.

How was this tested?

UT and e2e

[EMaksy]

Hey @arbulu89 great job, it looks good to me only check out my comment about the selectors.

Quick question: why did you go back to using just the chevron? Would it make sense to keep both — the chevron to indicate the table is collapsible, and also keep the row clickable to expand it?
I’m just thinking in terms of usability — making it easier for users to interact with either element but sure @jagabomb had his reasons :D

[EMaksy]

Hey could we extract this as own selector ?
Someting like this ?

export const hdqDatabaseRowFirstCell = `${hdqDatabaseCell} > td:eq(0)`;
export const hddDatabaseRowFirstCell = `${hddDatabaseCell} > td:eq(0)`;

And put the selectors on top of the file so we have code like this

export const clickHdqDatabaseRow = () => cy.get(hdqDatabaseRowFirstCell).click();

export const clickHddDatabaseRow = () => cy.get(hddDatabaseRowFirstCell).click();

We use this approach through the different page objects.

web/test/e2e/cypress/pageObject/databases_overview_po.js

Line 40 in 9ddb29f

const hddDatabaseCell = `tr:contains("${hddDatabase.sid}")`;

and

web/test/e2e/cypress/pageObject/hana_cluster_details_po.js

Line 41 in 9ddb29f

const providerLabel = 'div[class*="text-lg"]:contains("Provider") + div';

Checkout the adr from @vicenteqa https://github.com/trento-project/docs/blob/main/adr/0019-e2e-testing-practices.md#decisions

[arbulu89]

Yes, good idea!
Done!

[jagabomb]

Minor feedback, can we change the padding-left of the arrow/chevron icon to 1em? I think its pl-4 😅. I think it will create a better balance in the row.

[arbulu89]

@jagabomb @EMaksy changes done!
About only having the chevron as clickable: I think it is better. Otherwise we need to handle the onClick propagation in other clickable items in the row, which can be problematic.

[jagabomb]

LGTM