Sync filters between Suite and Visual Checks pages

lib/static/components/controls/common-controls.jsx

@@ -53,7 +53,7 @@ class ControlButtons extends Component {
                     size='s'
                     label="Show tests"
                     value={app.suitesPage.viewMode}
-                    handler={(data) => actions.changeViewMode({data, page: 'suitesPage'})}
+                    handler={(data) => actions.changeViewMode({data})}
                     options = {this._getShowTestsOptions()}
                 />
                 <ControlSelect

lib/static/components/controls/common-filters.jsx

@@ -73,7 +73,7 @@ CommonFilters.propTypes = {
 
 export default connect(
     ({app, browsers, gui, staticImageAccepter}) => ({
-        filteredBrowsers: app.suitesPage.filteredBrowsers,
+        filteredBrowsers: app.filteredBrowsers,
         browsers,
         gui,
         staticImageAccepter

lib/static/components/controls/test-name-filter-input.jsx

@@ -43,6 +43,6 @@ TestNameFilterInput.propTypes = {
 };
 
 export default connect(
-    (state) => ({testNameFilter: state.app.suitesPage.nameFilter}),
+    (state) => ({testNameFilter: state.app.nameFilter}),
     (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
 )(TestNameFilterInput);

lib/static/components/suites.jsx

@@ -173,9 +173,9 @@ Suites.propTypes = {
 export default connect(
     (state) => ({
         visibleRootSuiteIds: getVisibleRootSuiteIds(state),
-        viewMode: state.app.suitesPage.viewMode,
-        filteredBrowsers: state.app.suitesPage.filteredBrowsers,
-        testNameFilter: state.app.suitesPage.nameFilter,
+        viewMode: state.app.viewMode,
+        filteredBrowsers: state.app.filteredBrowsers,
+        testNameFilter: state.app.nameFilter,
         strictMatchFilter: state.view.strictMatchFilter,
         isReportEmpty: isEmpty(state.tree.browsers.byId)
     }),

lib/static/modules/actions/filters.ts

@@ -2,10 +2,9 @@ import actionNames from '@/static/modules/action-names';
 import type {Action} from '@/static/modules/actions/types';
 import {setFilteredBrowsers} from '@/static/modules/query-params';
 import {BrowserItem} from '@/types';
-import {Page, ViewMode} from '@/constants';
+import {ViewMode} from '@/constants';
 
 interface FilterPayload<T>{
-    page: Page;
     data: T;
 }
 

lib/static/modules/default-state.ts

@@ -99,28 +99,24 @@ export default Object.assign({config: configDefaults}, {
         isNewUi: false,
         isInitialized: false,
         availableFeatures: [],
+
+        viewMode: ViewMode.ALL,
+        nameFilter: '',
+        useRegexFilter: false,
+        useMatchCaseFilter: false,
+        filteredBrowsers: [],
+
         [Page.suitesPage]: {
             currentBrowserId: null,
             currentTreeNodeId: null,
             currentGroupId: null,
             currentStepId: null,
-            currentHighlightedStepId: null,
-
-            viewMode: ViewMode.ALL,
-            nameFilter: '',
-            useRegexFilter: false,
-            useMatchCaseFilter: false,
-            filteredBrowsers: []
+            currentHighlightedStepId: null
         },
         [Page.visualChecksPage]: {
             currentBrowserId: null,
             stateName: null,
 
-            viewMode: ViewMode.ALL,
-            nameFilter: '',
-            useRegexFilter: false,
-            useMatchCaseFilter: false,
-            filteredBrowsers: [],
             diffMode: DiffModes.TWO_UP_INTERACTIVE.id
         },
         loading: {

lib/static/modules/middlewares/local-storage.js

@@ -21,8 +21,7 @@ export default store => next => action => {
         if (action.type === actionNames.VISUAL_CHECKS_SET_DIFF_MODE) {
             localStorageWrapper.setItem(VISUAL_CHECKS_PAGE_DIFF_MODE_KEY, action.payload.diffModeId);
         }
-        localStorageWrapper.setItem('app.suitesPage.viewMode', app.suitesPage.viewMode);
-        localStorageWrapper.setItem('app.visualChecksPage.viewMode', app.visualChecksPage.viewMode);
+        localStorageWrapper.setItem('app.viewMode', app.viewMode);
     }
 
     return result;

lib/static/modules/reducers/filters.ts

@@ -1,5 +1,5 @@
 import {State} from '@/static/new-ui/types/store';
-import {Page, PathNames, VISUAL_CHECKS_PAGE_DIFF_MODE_KEY} from '@/constants';
+import {Page, VISUAL_CHECKS_PAGE_DIFF_MODE_KEY} from '@/constants';
 import actionNames from '@/static/modules/action-names';
 import {FiltersAction, InitGuiReportAction, InitStaticReportAction} from '@/static/modules/actions';
 import {DiffModeId, DiffModes, ViewMode} from '@/constants';
@@ -18,16 +18,15 @@ interface FilterData {
     filteredBrowsers?: BrowserItem[];
 }
 
-const updateAppState = (state: State, page: Page, data: FilterData): State => (
-    applyStateUpdate(state, {app: {[page]: data}})
+const updateAppState = (state: State, data: FilterData): State => (
+    applyStateUpdate(state, {app: data})
 );
 
 export default (state: State, action: FiltersAction | InitGuiReportAction | InitStaticReportAction): State => {
     switch (action.type) {
         case actionNames.INIT_GUI_REPORT:
         case actionNames.INIT_STATIC_REPORT: {
-            const suitesPageViewMode = localStorageWrapper.getItem('app.suitesPage.viewMode', ViewMode.ALL) as ViewMode;
-            const visualChecksPageViewMode = localStorageWrapper.getItem('app.visualChecksPage.viewMode', ViewMode.ALL) as ViewMode;
+            const suitesPageViewMode = localStorageWrapper.getItem('app.viewMode', ViewMode.ALL) as ViewMode;
             const visualChecksPageDiffMode = localStorageWrapper.getItem(VISUAL_CHECKS_PAGE_DIFF_MODE_KEY, DiffModes.TWO_UP_INTERACTIVE.id) as DiffModeId;
 
             const viewQuery = getViewQuery(window.location.search);
@@ -42,33 +41,23 @@ export default (state: State, action: FiltersAction | InitGuiReportAction | Init
                 state,
                 {
                     app: {
-                        [Page.suitesPage]: {
-                            viewMode: suitesPageViewMode
-                        },
+                        viewMode: suitesPageViewMode,
                         [Page.visualChecksPage]: {
-                            viewMode: visualChecksPageViewMode,
                             diffMode: visualChecksPageDiffMode
                         }
                     }
                 }
             );
 
-            if (window.location.hash?.startsWith(`#${PathNames.visualChecks}`)) {
-                newState.app[Page.visualChecksPage].filteredBrowsers = viewQuery.filteredBrowsers as BrowserItem[];
-                newState.app[Page.visualChecksPage].viewMode = viewQuery.viewMode as ViewMode || visualChecksPageViewMode;
-                newState.app[Page.visualChecksPage].nameFilter = viewQuery.testNameFilter as string || '';
-            } else { // Need for backward compatibility with old ui where are suites page only
-                newState.app[Page.suitesPage].filteredBrowsers = viewQuery.filteredBrowsers as BrowserItem[];
-                newState.app[Page.suitesPage].viewMode = viewQuery.viewMode as ViewMode || suitesPageViewMode;
-                newState.app[Page.suitesPage].nameFilter = viewQuery.testNameFilter as string || '';
-            }
+            newState.app.filteredBrowsers = viewQuery.filteredBrowsers as BrowserItem[];
+            newState.app.viewMode = viewQuery.viewMode as ViewMode || suitesPageViewMode;
+            newState.app.nameFilter = viewQuery.testNameFilter as string || '';
 
             return newState;
         }
         case actionNames.CHANGE_VIEW_MODE:
             return updateAppState(
                 state,
-                action.payload.page,
                 {
                     viewMode: action.payload.data
                 }
@@ -77,7 +66,6 @@ export default (state: State, action: FiltersAction | InitGuiReportAction | Init
         case actionNames.VIEW_UPDATE_FILTER_BY_NAME:
             return updateAppState(
                 state,
-                action.payload.page,
                 {
                     nameFilter: action.payload.data
                 }
@@ -86,7 +74,6 @@ export default (state: State, action: FiltersAction | InitGuiReportAction | Init
         case actionNames.VIEW_SET_FILTER_MATCH_CASE: {
             return updateAppState(
                 state,
-                action.payload.page,
                 {
                     useMatchCaseFilter: action.payload.data
                 }
@@ -96,7 +83,6 @@ export default (state: State, action: FiltersAction | InitGuiReportAction | Init
         case actionNames.VIEW_SET_FILTER_USE_REGEX:
             return updateAppState(
                 state,
-                action.payload.page,
                 {
                     useRegexFilter: action.payload.data
                 }
@@ -105,7 +91,6 @@ export default (state: State, action: FiltersAction | InitGuiReportAction | Init
         case actionNames.BROWSERS_SELECTED:
             return updateAppState(
                 state,
-                action.payload.page,
                 {
                     filteredBrowsers: action.payload.data
                 }

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

@@ -1,5 +1,4 @@
 import {SortDirection, State} from '@/static/new-ui/types/store';
-import {Page} from '@/constants';
 import {SomeAction} from '@/static/modules/actions/types';
 import actionNames from '@/static/modules/action-names';
 import {applyStateUpdate} from '@/static/modules/utils';
@@ -94,27 +93,25 @@ export default (state: State, action: SomeAction): State => {
             });
         }
         case actionNames.VIEW_UPDATE_FILTER_BY_NAME: {
-            if (action.payload.page === Page.suitesPage) {
-                const sortTestsData: Partial<State['app']['sortTestsData']> = {};
-                const availableExpressions = [...state.app.sortTestsData.availableExpressions];
-                const previousExpressionIds = state.app.sortTestsData.previousExpressionIds;
-                const previousDirection = state.app.sortTestsData.previousDirection;
-
-                if (action.payload.data.length > 0 && !availableExpressions.some(expr => expr.id === SORT_BY_RELEVANCE.id)) {
-                    sortTestsData.availableExpressions = [...availableExpressions, SORT_BY_RELEVANCE];
-                    sortTestsData.currentExpressionIds = [SORT_BY_RELEVANCE.id];
-                    sortTestsData.currentDirection = SortDirection.Desc;
-                } else if (action.payload.data.length === 0 && availableExpressions.some(expr => expr.id === SORT_BY_RELEVANCE.id)) {
-                    sortTestsData.availableExpressions = availableExpressions.filter(expr => expr.id !== SORT_BY_RELEVANCE.id);
-                    sortTestsData.currentExpressionIds = previousExpressionIds;
-                    sortTestsData.currentDirection = previousDirection;
-                }
+            const sortTestsData: Partial<State['app']['sortTestsData']> = {};
+            const availableExpressions = [...state.app.sortTestsData.availableExpressions];
+            const previousExpressionIds = state.app.sortTestsData.previousExpressionIds;
+            const previousDirection = state.app.sortTestsData.previousDirection;
 
-                return applyStateUpdate(state, {
-                    app: {sortTestsData}
-                });
+            if (action.payload.data.length > 0 && !availableExpressions.some(expr => expr.id === SORT_BY_RELEVANCE.id)) {
+                sortTestsData.availableExpressions = [...availableExpressions, SORT_BY_RELEVANCE];
+                sortTestsData.currentExpressionIds = [SORT_BY_RELEVANCE.id];
+                sortTestsData.currentDirection = SortDirection.Desc;
+            } else if (action.payload.data.length === 0 && availableExpressions.some(expr => expr.id === SORT_BY_RELEVANCE.id)) {
+                sortTestsData.availableExpressions = availableExpressions.filter(expr => expr.id !== SORT_BY_RELEVANCE.id);
+                sortTestsData.currentExpressionIds = previousExpressionIds;
+                sortTestsData.currentDirection = previousDirection;
             }
 
+            return applyStateUpdate(state, {
+                app: {sortTestsData}
+            });
+
             return state;
         }
         default:

lib/static/modules/reducers/tree/helpers.js

@@ -121,7 +121,7 @@ export function updateImagesStatus({tree, view, app, images, imageIdsArray, newS
     const browserIdsUniq = uniq(browserIds);
     const suiteIdsUniq = uniq(browserIdsUniq.map(browserId => tree.browsers.byId[browserId].parentId));
 
-    updateParentSuitesStatus(tree, suiteIdsUniq, app.suitesPage.filteredBrowsers, diff);
+    updateParentSuitesStatus(tree, suiteIdsUniq, app.filteredBrowsers, diff);
 
     !isEmpty(suiteIdsUniq) && calcSuitesOpenness({tree, expand: view.expand, suiteIds: suiteIdsUniq, diff});
     !isEmpty(browserIdsUniq) && calcBrowsersOpenness({tree, expand: view.expand, browserIds: browserIdsUniq, diff});

lib/static/modules/reducers/tree/index.js

@@ -30,7 +30,7 @@ export default ((state, action) => {
         case actionNames.INIT_GUI_REPORT:
         case actionNames.INIT_STATIC_REPORT: {
             const {tree} = action.payload;
-            const {filteredBrowsers} = state.app.suitesPage;
+            const {filteredBrowsers} = state.app;
 
             tree.suites.failedRootIds = getFailedRootSuiteIds(tree.suites);
 
@@ -125,9 +125,9 @@ export default ((state, action) => {
 
         case actionNames.BROWSERS_SELECTED: {
             const {tree, view, app} = state;
-            const filteredBrowsers = isEmpty(app.suitesPage.filteredBrowsers)
+            const filteredBrowsers = isEmpty(app.filteredBrowsers)
                 ? state.browsers.map(({id}) => ({id, versions: []}))
-                : app.suitesPage.filteredBrowsers;
+                : app.filteredBrowsers;
 
             updateAllSuitesStatus(tree, filteredBrowsers, diff.tree);
             calcBrowsersShowness({tree, view, app, diff: diff.tree});
@@ -472,7 +472,7 @@ function addNodesToTree(state, payload) {
         calcBrowsersOpenness({tree, expand: view.expand, browserIds: [browserId]});
         calcImagesOpenness({tree, expand: view.expand, imageIds});
 
-        if (app.suitesPage.viewMode === ViewMode.FAILED) {
+        if (app.viewMode === ViewMode.FAILED) {
             calcBrowsersShowness({tree, view, app, browserIds: [browserId]});
             calcSuitesShowness({tree, suiteIds: [youngestSuiteId]});
         }

lib/static/modules/reducers/tree/nodes/browsers.js

@@ -4,7 +4,7 @@
 import {UNCHECKED} from '../../../../../constants/checked-statuses';
 import {isNodeFailed} from '../../../utils';
 import {changeNodeState, shouldNodeBeOpened} from '../helpers';
-import {checkSearchResultExits} from '@/static/modules/search';
+import {checkSearchResultExits, getSearchPosition} from '@/static/modules/search';
 
 export function initBrowsersState(tree, view, app = {}) {
     tree.browsers.allIds.forEach((browserId) => {
@@ -54,7 +54,7 @@
     ensureDiffProperty(diff, ['browsers', 'byId']);
 
     const {strictMatchFilter} = view;
-    const {viewMode, filteredBrowsers, nameFilter, useMatchCaseFilter, useRegexFilter} = app.suitesPage ? app.suitesPage : {};
+    const {viewMode, filteredBrowsers, nameFilter, useMatchCaseFilter, useRegexFilter} = app ? app : {};
     const {isNewUi = false} = app;
 
     if (empty) {
@@ -63,7 +63,7 @@
 
     ensureDiffProperty(diff, ['browsers', 'stateById']);
 
     browserIds.forEach((browserId, index) => {
         const browser = tree.browsers.byId[browserId];
         const diffBrowser = diff.browsers.byId[browserId];
         const testName = getUpdatedProperty(browser, diffBrowser, 'parentId');
@@ -99,7 +99,7 @@
             shouldBeShown,
             isHiddenBecauseOfStatus,
             checkStatus,
-            fuzzyMatchScore: browserIds.length - index
+            fuzzyMatchScore: getSearchPosition(browserId)
         };
     });
 }

lib/static/modules/search/index.ts

@@ -1,10 +1,10 @@
 import {setMatchCaseFilter, setSearchLoading, updateNameFilter} from '@/static/modules/actions';
-import {Page} from '@/constants';
 import {Tree} from '@/tests-tree-builder/base';
 import {AttachmentType, TagsAttachment} from '@/types';
 
 let worker: Worker;
 let searchResult: Set<string> = new Set([]);
+let searchResultPosition: Map<string, number> = new Map<string, number>([]);
 
 export const initSearch = (tree: Tree): void => {
     const list = tree.results.allIds;
@@ -33,12 +33,12 @@ export const initSearch = (tree: Tree): void => {
 };
 
 export const checkSearchResultExits = (browserId: string): boolean => searchResult.has(browserId);
+export const getSearchPosition = (item: string): number => searchResultPosition.get(item) || -1;
 
 export const search = (
     text: string,
     matchCase = false,
     useRegexFilter = false,
-    page: Page,
     updateMatchCase: boolean,
     dispatch: (action: unknown) => void
 ): void => {
@@ -72,17 +72,23 @@ export const search = (
         }
     }).then((result: string[]) => {
         searchResult = new Set(result);
+        searchResultPosition = new Map<string, number>();
+
+        result.forEach((item, index) => {
+            searchResultPosition.set(
+                item,
+                result.length - index
+            );
+        });
 
         if (updateMatchCase) {
             dispatch(setMatchCaseFilter({
-                data: matchCase,
-                page
+                data: matchCase
             }));
         } else {
             dispatch(
                 updateNameFilter({
-                    data: text,
-                    page
+                    data: text
                 })
             );
         }

lib/static/modules/selectors/tree.js

@@ -19,7 +19,7 @@ const getBrowsersStates = (state) => state.tree.browsers.stateById;
 const getImagesStates = (state) => state.tree.images.stateById;
 const getFailedRootSuiteIds = (state) => state.tree.suites.failedRootIds;
 const getRootSuiteIds = (state) => {
-    const viewMode = state.app.suitesPage.viewMode;
+    const viewMode = state.app.viewMode;
     return viewMode === ViewMode.FAILED ? state.tree.suites.failedRootIds : state.tree.suites.allRootIds;
 };
 

lib/static/modules/selectors/view.js

@@ -1,2 +1,2 @@
-export const getFilteredBrowsers = (state) => state.app.suitesPage.filteredBrowsers;
+export const getFilteredBrowsers = (state) => state.app.filteredBrowsers;
 export const getKeyToGroupTestsBy = (state) => state.view.keyToGroupTestsBy;