feat: implement tests sorting (#621)

* feat: implement tests sorting

* refactor: simplify sorting logic

* fix: make toolbar select popups stay on top of tree view

* fix: adaptive select redesign, group by message fixes, perf optimisation

* fix: make custom sorting groups possible

* fix: fix imports

* refactor: introduce tree node weight metadata, move tags logic to a helper

Author: shadowusr

lib/static/constants/sort-tests.ts

@@ -0,0 +1,5 @@
+import {SortByExpression, SortType} from '@/static/new-ui/types/store';
+
+export const SORT_BY_NAME: SortByExpression = {id: 'by-name', label: 'Name', type: SortType.ByName};
+export const SORT_BY_FAILED_RETRIES: SortByExpression = {id: 'by-failed-runs', label: 'Failed runs count', type: SortType.ByFailedRuns};
+export const SORT_BY_TESTS_COUNT: SortByExpression = {id: 'by-tests-count', label: 'Tests count', type: SortType.ByTestsCount};

lib/static/modules/action-names.ts

@@ -69,11 +69,14 @@ export default {
     SUITES_PAGE_SET_ALL_TREE_NODES: 'SUITES_PAGE_SET_ALL_TREE_NODES',
     SUITES_PAGE_REVEAL_TREE_NODE: 'SUITES_PAGE_REVEAL_TREE_NODE',
     SUITES_PAGE_SET_STEPS_EXPANDED: 'SUITES_PAGE_SET_STEPS_EXPANDED',
+    SUITES_PAGE_SET_TREE_VIEW_MODE: 'SUITES_PAGE_SET_TREE_VIEW_MODE',
     VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE: 'VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE',
     UPDATE_LOADING_PROGRESS: 'UPDATE_LOADING_PROGRESS',
     UPDATE_LOADING_VISIBILITY: 'UPDATE_LOADING_VISIBILITY',
     UPDATE_LOADING_TITLE: 'UPDATE_LOADING_TITLE',
     UPDATE_LOADING_IS_IN_PROGRESS: 'UPDATE_LOADING_IS_IN_PROGRESS',
     SELECT_ALL: 'SELECT_ALL',
-    DESELECT_ALL: 'DESELECT_ALL'
+    DESELECT_ALL: 'DESELECT_ALL',
+    SORT_TESTS_SET_CURRENT_EXPRESSION: 'SORT_TESTS_SET_CURRENT_EXPRESSION',
+    SORT_TESTS_SET_DIRECTION: 'SORT_TESTS_SET_DIRECTION'
 } as const;

lib/static/modules/actions/sort-tests.ts

@@ -0,0 +1,19 @@
+import actionNames from '@/static/modules/action-names';
+import {Action} from '@/static/modules/actions/types';
+import {SortDirection} from '@/static/new-ui/types/store';
+
+type SetCurrentSortByExpressionAction = Action<typeof actionNames.SORT_TESTS_SET_CURRENT_EXPRESSION, {
+    expressionIds: string[];
+}>;
+export const setCurrentSortByExpression = (payload: SetCurrentSortByExpressionAction['payload']): SetCurrentSortByExpressionAction =>
+    ({type: actionNames.SORT_TESTS_SET_CURRENT_EXPRESSION, payload});
+
+type SetSortByDirectionAction = Action<typeof actionNames.SORT_TESTS_SET_DIRECTION, {
+    direction: SortDirection
+}>;
+export const setSortByDirection = (payload: SetSortByDirectionAction['payload']): SetSortByDirectionAction =>
+    ({type: actionNames.SORT_TESTS_SET_DIRECTION, payload});
+
+export type SortTestsAction =
+    | SetCurrentSortByExpressionAction
+    | SetSortByDirectionAction;

lib/static/modules/actions/suites-page.ts

@@ -1,5 +1,6 @@
 import actionNames from '@/static/modules/action-names';
 import {Action} from '@/static/modules/actions/types';
+import {TreeViewMode} from '@/static/new-ui/types/store';
 
 export type SuitesPageSetCurrentTreeNodeAction = Action<typeof actionNames.SUITES_PAGE_SET_CURRENT_SUITE, Partial<{
     treeNodeId: string;
@@ -43,10 +44,17 @@ type SetStepsExpandedStateAction = Action<typeof actionNames.SUITES_PAGE_SET_STE
 export const setStepsExpandedState = (payload: SetStepsExpandedStateAction['payload']): SetStepsExpandedStateAction =>
     ({type: actionNames.SUITES_PAGE_SET_STEPS_EXPANDED, payload});
 
+type SetTreeViewModeAction = Action<typeof actionNames.SUITES_PAGE_SET_TREE_VIEW_MODE, {
+    treeViewMode: TreeViewMode;
+}>;
+export const setTreeViewMode = (payload: SetTreeViewModeAction['payload']): SetTreeViewModeAction =>
+    ({type: actionNames.SUITES_PAGE_SET_TREE_VIEW_MODE, payload});
+
 export type SuitesPageAction =
     | SetTreeNodeExpandedStateAction
     | SetAllTreeNodesStateAction
     | SuitesPageSetCurrentTreeNodeAction
     | SetSectionExpandedStateAction
     | SetStepsExpandedStateAction
-    | RevealTreeNodeAction;
+    | RevealTreeNodeAction
+    | SetTreeViewModeAction;

lib/static/modules/actions/types.ts

@@ -7,6 +7,7 @@ import {ThunkAction} from 'redux-thunk';
 import {State} from '@/static/new-ui/types/store';
 import {LifecycleAction} from '@/static/modules/actions/lifecycle';
 import {SuitesPageAction} from '@/static/modules/actions/suites-page';
+import {SortTestsAction} from '@/static/modules/actions/sort-tests';
 
 export type {Dispatch} from 'redux';
 
@@ -22,4 +23,5 @@ export type AppThunk<ReturnType = Promise<void>> = ThunkAction<ReturnType, State
 export type SomeAction =
     | GroupTestsAction
     | LifecycleAction
-    | SuitesPageAction;
+    | SuitesPageAction
+    | SortTestsAction;

lib/static/modules/default-state.ts

@@ -4,7 +4,7 @@ import {DiffModes} from '../../constants/diff-modes';
 import {EXPAND_ERRORS} from '../../constants/expand-modes';
 import {RESULT_KEYS} from '../../constants/group-tests';
 import {ToolName} from '../../constants';
-import {State} from '@/static/new-ui/types/store';
+import {SortDirection, State, TreeViewMode} from '@/static/new-ui/types/store';
 
 export default Object.assign({config: configDefaults}, {
     gui: true,
@@ -121,10 +121,16 @@ export default Object.assign({config: configDefaults}, {
             availableSections: [],
             availableExpressions: [],
             currentExpressionIds: []
+        },
+        sortTestsData: {
+            availableExpressions: [],
+            currentExpressionIds: [],
+            currentDirection: SortDirection.Asc
         }
     },
     ui: {
         suitesPage: {
+            treeViewMode: TreeViewMode.Tree,
             retryIndexByTreeNodeId: {},
             expandedSectionsById: {},
             expandedStepsByResultId: {},

lib/static/modules/reducers/index.js

@@ -30,6 +30,7 @@ import suitesPage from './suites-page';
 import visualChecksPage from './visual-checks-page';
 import isInitialized from './is-initialized';
 import newUiGroupedTests from './new-ui-grouped-tests';
+import sortTests from './sort-tests';
 
 // The order of specifying reducers is important.
 // At the top specify reducers that does not depend on other state fields.
@@ -60,6 +61,7 @@ export default reduceReducers(
     tree,
     groupedTests,
     newUiGroupedTests,
+    sortTests,
     plugins,
     progressBar,
     suitesPage,

lib/static/modules/reducers/new-ui-grouped-tests/index.ts

@@ -16,10 +16,10 @@ export default (state: State, action: SomeAction): State => {
         case actionNames.INIT_STATIC_REPORT: {
             const availableSections: GroupBySection[] = [{
                 id: 'meta',
-                label: 'meta'
+                label: 'Meta'
             }, {
                 id: 'error',
-                label: 'error'
+                label: 'Error'
             }];
 
             const availableExpressions: GroupByExpression[] = [];

lib/static/modules/reducers/new-ui-grouped-tests/utils.ts

@@ -12,6 +12,7 @@ import {isAssertViewError} from '@/common-utils';
 import stripAnsi from 'strip-ansi';
 import {IMAGE_COMPARISON_FAILED_MESSAGE, TestStatus} from '@/constants';
 import {stringify} from '@/static/new-ui/utils';
+import {EntityType} from '@/static/new-ui/features/suites/components/SuitesPage/types';
 
 const extractErrors = (result: ResultEntity, images: ImageEntity[]): string[] => {
     const errors = new Set<string>();
@@ -48,7 +49,8 @@ const extractErrors = (result: ResultEntity, images: ImageEntity[]): string[] =>
 const groupTestsByMeta = (expr: GroupByMetaExpression, resultsById: Record<string, ResultEntity>): Record<string, GroupEntity> => {
     const DEFAULT_GROUP = `__${GroupByType.Meta}__DEFAULT_GROUP`;
     const results = Object.values(resultsById);
-    const groups: Record<string | symbol, GroupEntity> = {};
+    const groupsById: Record<string | symbol, GroupEntity> = {};
+    const groupingKeyToId: Record<string, string> = {};
     let id = 1;
 
     for (const result of results) {
@@ -59,28 +61,35 @@ const groupTestsByMeta = (expr: GroupByMetaExpression, resultsById: Record<strin
             groupingKey = `${GroupByType.Meta}__${expr.key}__${stringify(result.metaInfo[expr.key])}`;
         }
 
-        if (!groups[groupingKey]) {
-            groups[groupingKey] = {
-                id: id.toString(),
+        if (!groupingKeyToId[groupingKey]) {
+            groupingKeyToId[groupingKey] = id.toString();
+            id++;
+        }
+
+        const groupId = groupingKeyToId[groupingKey];
+        if (!groupsById[groupId]) {
+            groupsById[groupId] = {
+                id: groupId,
                 key: expr.key,
                 label: stringify(result.metaInfo[expr.key]),
                 resultIds: [],
-                browserIds: []
+                browserIds: [],
+                type: EntityType.Group
             };
-            id++;
         }
 
-        groups[groupingKey].resultIds.push(result.id);
-        if (!groups[groupingKey].browserIds.includes(result.parentId)) {
-            groups[groupingKey].browserIds.push(result.parentId);
+        groupsById[groupId].resultIds.push(result.id);
+        if (!groupsById[groupId].browserIds.includes(result.parentId)) {
+            groupsById[groupId].browserIds.push(result.parentId);
         }
     }
 
-    return groups;
+    return groupsById;
 };
 
 const groupTestsByError = (resultsById: Record<string, ResultEntity>, imagesById: Record<string, ImageEntity>, errorPatterns: State['config']['errorPatterns']): Record<string, GroupEntity> => {
-    const groups: Record<string | symbol, GroupEntity> = {};
+    const groupsById: Record<string | symbol, GroupEntity> = {};
+    const groupingKeyToId: Record<string, string> = {};
     const results = Object.values(resultsById);
     let id = 1;
 
@@ -101,25 +110,31 @@ const groupTestsByError = (resultsById: Record<string, ResultEntity>, imagesById
                 groupingKey = `${GroupByType.Error}__${errorText}`;
             }
 
-            if (!groups[groupingKey]) {
-                groups[groupingKey] = {
-                    id: id.toString(),
+            if (!groupingKeyToId[groupingKey]) {
+                groupingKeyToId[groupingKey] = id.toString();
+                id++;
+            }
+
+            const groupId = groupingKeyToId[groupingKey];
+            if (!groupsById[groupId]) {
+                groupsById[groupId] = {
+                    id: groupId,
                     key: 'error',
                     label: stripAnsi(groupLabel),
                     resultIds: [],
-                    browserIds: []
+                    browserIds: [],
+                    type: EntityType.Group
                 };
-                id++;
             }
 
-            groups[groupingKey].resultIds.push(result.id);
-            if (!groups[groupingKey].browserIds.includes(result.parentId)) {
-                groups[groupingKey].browserIds.push(result.parentId);
+            groupsById[groupId].resultIds.push(result.id);
+            if (!groupsById[groupId].browserIds.includes(result.parentId)) {
+                groupsById[groupId].browserIds.push(result.parentId);
             }
         }
     }
 
-    return groups;
+    return groupsById;
 };
 
 export const groupTests = (groupByExpressions: GroupByExpression[], resultsById: Record<string, ResultEntity>, imagesById: Record<string, ImageEntity>, errorPatterns: State['config']['errorPatterns']): Record<string, GroupEntity> => {

lib/static/modules/reducers/sort-tests.ts

@@ -0,0 +1,71 @@
+import {SortByExpression, SortDirection, State} from '@/static/new-ui/types/store';
+import {SomeAction} from '@/static/modules/actions/types';
+import actionNames from '@/static/modules/action-names';
+import {applyStateUpdate} from '@/static/modules/utils';
+import {SORT_BY_FAILED_RETRIES, SORT_BY_NAME, SORT_BY_TESTS_COUNT} from '@/static/constants/sort-tests';
+
+export default (state: State, action: SomeAction): State => {
+    switch (action.type) {
+        case actionNames.INIT_STATIC_REPORT:
+        case actionNames.INIT_GUI_REPORT: {
+            const availableExpressions: SortByExpression[] = [
+                SORT_BY_NAME,
+                SORT_BY_FAILED_RETRIES
+            ];
+
+            return applyStateUpdate(state, {
+                app: {
+                    sortTestsData: {
+                        availableExpressions,
+                        currentDirection: SortDirection.Asc,
+                        currentExpressionIds: [availableExpressions[0].id]
+                    }
+                }
+            });
+        }
+        case actionNames.SORT_TESTS_SET_CURRENT_EXPRESSION: {
+            return applyStateUpdate(state, {
+                app: {
+                    sortTestsData: {
+                        currentExpressionIds: action.payload.expressionIds
+                    }
+                }
+            });
+        }
+        case actionNames.SORT_TESTS_SET_DIRECTION: {
+            return applyStateUpdate(state, {
+                app: {
+                    sortTestsData: {
+                        currentDirection: action.payload.direction
+                    }
+                }
+            });
+        }
+        case actionNames.GROUP_TESTS_SET_CURRENT_EXPRESSION: {
+            let availableExpressions: SortByExpression[];
+
+            if (action.payload.expressionIds.length > 0) {
+                availableExpressions = [
+                    SORT_BY_NAME,
+                    SORT_BY_FAILED_RETRIES,
+                    SORT_BY_TESTS_COUNT
+                ];
+            } else {
+                availableExpressions = [
+                    SORT_BY_NAME,
+                    SORT_BY_FAILED_RETRIES
+                ];
+            }
+
+            return applyStateUpdate(state, {
+                app: {
+                    sortTestsData: {
+                        availableExpressions
+                    }
+                }
+            });
+        }
+        default:
+            return state;
+    }
+};