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

michalkleiner · 2024-12-05T12:52:08Z

Description:

Ref. DEV-13900

Review

michalkleiner · 2024-12-05T20:29:37Z

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 · 2024-12-10T08:15:11Z

plugins/CoreHome/javascripts/dataTable.js

-					delete self.param.totalRows;
+					          delete self.param.totalRows;


This actually fixes the alignment in IDE

michalkleiner · 2024-12-10T09:50:50Z

...nsitions/tests/UI/expected-screenshots/Transitions_transitions_report_period_not_allowed.png

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

michalkleiner · 2024-12-10T10:32:29Z

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 · 2024-12-10T11:01:41Z

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

michalkleiner · 2024-12-10T11:43:06Z

Remaining failing UI tests come from submodules.

caddoo · 2024-12-11T00:41:52Z

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 · 2024-12-11T03:22:22Z

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 · 2024-12-11T16:57:08Z

@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 · 2024-12-11T21:08:12Z

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 · 2024-12-11T21:24:01Z

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 · 2024-12-18T10:35:54Z

There is a few other UI screenshots updated as a leftover from the icons update.

tests/UI/specs/EvolutionGraph_spec.js

plugins/CoreHome/templates/_dataTable.twig

michalkleiner · 2024-12-20T15:30:58Z

Plugin PRs created

github-actions · 2024-12-28T01:56:34Z

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

# Conflicts: # tests/UI/expected-screenshots/Comparison_multi_row_evolution.png # tests/UI/expected-screenshots/IncompletePeriodVisualisation_visitors_overview.png

michalkleiner · 2025-01-08T09:45:50Z

@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.

mneudert · 2025-01-08T17:14:18Z

plugins/CoreHome/templates/_dataTable.twig

@@ -50,6 +57,14 @@
        {% if error is defined %}
            <div vue-entry="CoreHome.Alert" severity="danger">{{ error.message }}</div>
        {% else %}
+            {% if showTableActionsInHeader %}
+                <div class="row dataTableHeaderControls">


There is one relevant test failures broken by the .row selector changes:

https://github.com/matomo-org/matomo/actions/runs/12666720833/job/35298662515#step:3:1054

matomo/tests/UI/specs/UIIntegration_spec.js

Line 557 in bc8e0c2

await page.hover('.dataTableVizVisitorLog .row:nth-child(2) .actionList li.action');

The test selector probably needs to be :nth-child(3) now, or we switch to jQuery and .card:eq(2) 🤔

mneudert · 2025-01-08T17:25:24Z

plugins/PagePerformance/tests/UI/PagePerformance_spec.js

@@ -111,7 +111,7 @@ describe("PagePerformance", function () {
        await page.goto("?module=Widgetize&action=iframe&disableLink=0&widget=1&moduleToWidgetize=Actions&actionToWidgetize=getPageUrls&" + generalParams);

        // hover visualization selection
-        const icon = await page.jQuery('.activateVisualizationSelection');
+        const icon = await page.jQuery('.activateVisualizationSelection:last');


There is one more selector causing issues in this suite:

https://github.com/matomo-org/matomo/actions/runs/12666720833/job/35298664217#step:3:1126

matomo/plugins/PagePerformance/tests/UI/PagePerformance_spec.js

Line 123 in 7d0bef0

const icon = await page.jQuery('.dropdown-content .icon-page-performance');

Changing that to .dropdown-content .icon-page-performance:last could already solve the issue.

mneudert · 2025-01-08T17:39:47Z

tests/UI/specs/EvolutionGraph_spec.js

@@ -218,7 +204,7 @@ describe("EvolutionGraph", function () {
        testEnvironment.save();

        await page.goto(url);
-        await showDataTableFooter();
+        await page.waitForNetworkIdle();


Adding this here only to have a resolvable thread.

There are two weird reported screenshot errors:

https://github.com/matomo-org/matomo/actions/runs/12666720833/job/35298662515#step:3:1041

https://github.com/matomo-org/matomo/actions/runs/12666720833/job/35298663653#step:3:1064

If I download the screenshots from the artifact host they tell me there is no difference, but CI has an issue somehow. Maybe it solves itself in the next CI run 🤔

I noticed those as well and was hoping for them to resolve, but at the same time I can just update them and see if it fixes itself afterwards.

michalkleiner force-pushed the dev-13900 branch from 91d09e8 to 80ee0a8 Compare December 8, 2024 23:08

michalkleiner commented Dec 10, 2024

View reviewed changes

michalkleiner force-pushed the dev-13900 branch from 606f240 to a8e4e9a Compare December 10, 2024 10:01

michalkleiner added Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc. c: Design / UI For issues that impact Matomo's user interface or the design overall. labels Dec 10, 2024

michalkleiner added this to the 5.3.0 milestone Dec 10, 2024

michalkleiner marked this pull request as ready for review December 10, 2024 11:01

michalkleiner added the Needs Review PRs that need a code review label Dec 10, 2024

michalkleiner requested a review from a team December 10, 2024 11:02

michalkleiner changed the title ~~Add second set of data table action icons below report title~~ Add second set of data table action icons below the report title Dec 10, 2024

michalkleiner added 10 commits December 13, 2024 09:48

WIP

be6ebb9

Move top actions below the title

580977b

Use random id for search action

ff9fc8c

Allow for data table actions specific placement

309029c

Ensure search is functional and correctly focusing used input

575be25

Revert random id var name

f6de4b7

Remove unused styles

ac2c26a

Use custom variable for header actions

d51ff23

Hide top controls on dashboard

f7bd1ba

Hide top controls when report doesn't have data

8a7af46

Update UI test unrelated to the PR but the icons change

8be965b

michalkleiner requested review from mneudert and a team December 18, 2024 10:35

mneudert requested changes Dec 18, 2024

View reviewed changes

tests/UI/specs/EvolutionGraph_spec.js Outdated Show resolved Hide resolved

tests/UI/specs/EvolutionGraph_spec.js Outdated Show resolved Hide resolved

plugins/CoreHome/templates/_dataTable.twig Show resolved Hide resolved

plugins/CoreHome/templates/_dataTable.twig Show resolved Hide resolved

michalkleiner added 7 commits December 19, 2024 13:49

Remove hover to display table controls in UI tests as always visible now

3f2b0a3

Adjust for tests

f73ed92

Fix UI tests

bc58b67

Update UI test screenshots

1008eaa

Move mouse out of view to prevent unwanted hover

6dc8d38

Revert 'not is Widget' addition

da3de87

Update UI test screenshots

7585e39

Merge branch '5.x-dev' into dev-13900

855edcc

michalkleiner requested review from mneudert and a team December 20, 2024 15:38

github-actions bot added the Stale The label used by the Close Stale Issues action label Dec 28, 2024

michalkleiner removed the Stale The label used by the Close Stale Issues action label Jan 4, 2025

michalkleiner added 2 commits January 7, 2025 16:24

Merge branch '5.x-dev' into dev-13900

10752d8

# Conflicts: # tests/UI/expected-screenshots/Comparison_multi_row_evolution.png # tests/UI/expected-screenshots/IncompletePeriodVisualisation_visitors_overview.png

Update UI test screenshots

3a79603

mneudert requested changes Jan 8, 2025

View reviewed changes

michalkleiner added 4 commits January 9, 2025 15:55

Tweak UI test selectors

7f81ca0

Remove misbehaving UI test screenshots

61b63d5

Re-add misbehaving UI test screenshots

7252ba0

Merge branch '5.x-dev' into dev-13900

19925e8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

michalkleiner commented Dec 5, 2024

michalkleiner commented Dec 5, 2024

michalkleiner Dec 10, 2024

michalkleiner Dec 10, 2024

michalkleiner commented Dec 10, 2024

michalkleiner commented Dec 10, 2024

michalkleiner commented Dec 10, 2024

caddoo commented Dec 11, 2024

michalkleiner commented Dec 11, 2024

sgiehl commented Dec 11, 2024

michalkleiner commented Dec 11, 2024

mneudert commented Dec 11, 2024

michalkleiner commented Dec 18, 2024

michalkleiner commented Dec 20, 2024

github-actions bot commented Dec 28, 2024

michalkleiner commented Jan 8, 2025

mneudert Jan 8, 2025

mneudert Jan 8, 2025

mneudert Jan 8, 2025

michalkleiner Jan 8, 2025

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

Are you sure you want to change the base?

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

Conversation

michalkleiner commented Dec 5, 2024

Description:

Review

michalkleiner commented Dec 5, 2024

michalkleiner Dec 10, 2024

Choose a reason for hiding this comment

michalkleiner Dec 10, 2024

Choose a reason for hiding this comment

michalkleiner commented Dec 10, 2024

michalkleiner commented Dec 10, 2024

michalkleiner commented Dec 10, 2024

caddoo commented Dec 11, 2024

michalkleiner commented Dec 11, 2024

sgiehl commented Dec 11, 2024

michalkleiner commented Dec 11, 2024

mneudert commented Dec 11, 2024

michalkleiner commented Dec 18, 2024

michalkleiner commented Dec 20, 2024

github-actions bot commented Dec 28, 2024

michalkleiner commented Jan 8, 2025

mneudert Jan 8, 2025

Choose a reason for hiding this comment

mneudert Jan 8, 2025

Choose a reason for hiding this comment

mneudert Jan 8, 2025

Choose a reason for hiding this comment

michalkleiner Jan 8, 2025

Choose a reason for hiding this comment