Add second set of data table action icons below the report title

[michalkleiner]

Description:

Ref. DEV-13900

Review

• Functional review done
• Potential edge cases thought about (behavior of the code with strange input, with strange internal state or possible interactions with other Matomo subsystems)
• Usability review done (is anything maybe unclear or think about anything that would cause people to reach out to support)
• Security review done
• Wording review done
• Code review done
• Tests were added if useful/possible
• Reviewed for breaking changes
• Developer changelog updated if needed
• Documentation added if needed
• Existing documentation updated if needed

[michalkleiner]

So far found a weird behaviour where the top actions don't display the settings icon when the report doesn't show data, need to dig into that.

[michalkleiner]

This actually fixes the alignment in IDE

[michalkleiner]

Transitions are not within the data table wrapper, so they don't get the top controls.

[michalkleiner]

So far found a weird behaviour where the top actions don't display the settings icon when the report doesn't show data, need to dig into that.

This should be resolved.

[michalkleiner]

See internal Jira card for more details on the context of the change.

[michalkleiner]

Remaining failing UI tests come from submodules.

[caddoo]

I've been reviewing the screenshots and found a few that don't look right.

All the ActionsDataTable_* have the icons bleed out over the top border.

This also applies to the GoalsTable_* as well and a lot more. I won't spend the time listing them all.

Looking at Goals_action_goals_visualization_page_urls, Goals_action_goals_visualization_page_urls, Goals_goals_by_entry_page_titles, Goals_goals_by_entry_pages it looks as though there where no controls before and now they are there, is that expected?

I'll stop reviewing now until those are corrected, as i think fixing them once will fix a lot of the screenshots.

[michalkleiner]

Thanks for the feedback @caddoo.

I've been reviewing the screenshots and found a few that don't look right.

All the ActionsDataTable_* have the icons bleed out over the top border.

This also applies to the GoalsTable_* as well and a lot more. I won't spend the time listing them all.

They actually don't spill over, they are at the very edge with 0 pixels gap. My understanding is that is due to how the report screenshot is taken, not that there would be anything missing. However we do use -10px top margin to lower the gap between the actions and the title, so I can look into updating the styles to only do that when the card title is a sibling element. That should address that.

Looking at Goals_action_goals_visualization_page_urls, Goals_action_goals_visualization_page_urls, Goals_goals_by_entry_page_titles, Goals_goals_by_entry_pages it looks as though there where no controls before and now they are there, is that expected?

Again, this is due to how the screenshots are taken and where the mouse is during that event since the bottom actions were visible on hover. If the mouse is moved outside of the report or the report is not being interacted with, the hover effect is not there and the bottom action are not visible. The change makes both bottom and top controls visible at all times, which is why it is newly visible both at the bottom and at the top. Does that answer your question?

[sgiehl]

@michalkleiner there are still a couple of inconsistencies. For example if you search for something and the table then has no results:

report_search.mp4

And another problem I've spotted is, that the datatable setting do not always have the same options:

report_settings.mp4

[michalkleiner]

Thanks for your testing @sgiehl. The inconsistency around the top controls being hidden came from it being hidden when there's no data initially, but it didn't occur to me that it would also apply when searching, so I guess I'll need to check if we can differentiate those two scenarios - initial table empty and empty search results.

For the latter, I have no idea why that would be happening, unless someone was adding the options via JS. I'll investigate, but any hints would be appreciated.

[mneudert]

The flattening option is not added, it is removed from the table:

matomo/plugins/CoreHome/javascripts/dataTable.js

Lines 1262 to 1270 in 0973713

	if ((typeof self.numberOfSubtables == 'undefined' || self.numberOfSubtables == 0)
	&& (typeof self.param.flat == 'undefined' || self.param.flat != 1)
	) {
	// if there are no subtables, remove the flatten action
	const dataTableActionsVueApp = $('[vue-entry="CoreHome.DataTableActions"]', domElem).data('vueAppInstance');
	if (dataTableActionsVueApp) {
	dataTableActionsVueApp.showFlattenTable_ = false;
	}
	}

So the top action row is correct, and the bottom one is not, because there is no loop over both $('[vue-entry="CoreHome.DataTableActions"]', domElem).

[michalkleiner]

Plugin PRs created

[github-actions]

This issue is in "needs review" but there has been no activity for 7 days. ping @matomo-org/core-reviewers

[michalkleiner]

@matomo-org/core-reviewers please have another look, the merge conflict was resolved, there are no errors in UI tests, the failing ones are from submodules that have their respective PRs prepared to be merged after this.