Skip to content

Commit 362c197

Browse files
authored
feat: sync filters between Suite and Visual Checks pages
1 parent 812f01c commit 362c197

32 files changed

Lines changed: 399 additions & 304 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ class ControlButtons extends Component {
5353
size='s'
5454
label="Show tests"
5555
value={app.suitesPage.viewMode}
56-
handler={(data) => actions.changeViewMode({data, page: 'suitesPage'})}
56+
handler={(data) => actions.changeViewMode({data})}
5757
options = {this._getShowTestsOptions()}
5858
/>
5959
<ControlSelect

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ CommonFilters.propTypes = {
7373

7474
export default connect(
7575
({app, browsers, gui, staticImageAccepter}) => ({
76-
filteredBrowsers: app.suitesPage.filteredBrowsers,
76+
filteredBrowsers: app.filteredBrowsers,
7777
browsers,
7878
gui,
7979
staticImageAccepter

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,6 @@ TestNameFilterInput.propTypes = {
4343
};
4444

4545
export default connect(
46-
(state) => ({testNameFilter: state.app.suitesPage.nameFilter}),
46+
(state) => ({testNameFilter: state.app.nameFilter}),
4747
(dispatch) => ({actions: bindActionCreators(actions, dispatch)})
4848
)(TestNameFilterInput);

lib/static/components/suites.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -173,9 +173,9 @@ Suites.propTypes = {
173173
export default connect(
174174
(state) => ({
175175
visibleRootSuiteIds: getVisibleRootSuiteIds(state),
176-
viewMode: state.app.suitesPage.viewMode,
177-
filteredBrowsers: state.app.suitesPage.filteredBrowsers,
178-
testNameFilter: state.app.suitesPage.nameFilter,
176+
viewMode: state.app.viewMode,
177+
filteredBrowsers: state.app.filteredBrowsers,
178+
testNameFilter: state.app.nameFilter,
179179
strictMatchFilter: state.view.strictMatchFilter,
180180
isReportEmpty: isEmpty(state.tree.browsers.byId)
181181
}),

lib/static/modules/actions/filters.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@ import actionNames from '@/static/modules/action-names';
22
import type {Action} from '@/static/modules/actions/types';
33
import {setFilteredBrowsers} from '@/static/modules/query-params';
44
import {BrowserItem} from '@/types';
5-
import {Page, ViewMode} from '@/constants';
5+
import {ViewMode} from '@/constants';
66

77
interface FilterPayload<T>{
8-
page: Page;
98
data: T;
109
}
1110

lib/static/modules/default-state.ts

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -99,28 +99,23 @@ export default Object.assign({config: configDefaults}, {
9999
isNewUi: false,
100100
isInitialized: false,
101101
availableFeatures: [],
102+
103+
viewMode: ViewMode.ALL,
104+
nameFilter: '',
105+
useRegexFilter: false,
106+
useMatchCaseFilter: false,
107+
filteredBrowsers: [],
108+
102109
[Page.suitesPage]: {
103110
currentBrowserId: null,
104111
currentTreeNodeId: null,
105112
currentGroupId: null,
106113
currentStepId: null,
107-
currentHighlightedStepId: null,
108-
109-
viewMode: ViewMode.ALL,
110-
nameFilter: '',
111-
useRegexFilter: false,
112-
useMatchCaseFilter: false,
113-
filteredBrowsers: []
114+
currentHighlightedStepId: null
114115
},
115116
[Page.visualChecksPage]: {
116-
currentBrowserId: null,
117117
stateName: null,
118118

119-
viewMode: ViewMode.ALL,
120-
nameFilter: '',
121-
useRegexFilter: false,
122-
useMatchCaseFilter: false,
123-
filteredBrowsers: [],
124119
diffMode: DiffModes.TWO_UP_INTERACTIVE.id
125120
},
126121
loading: {

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,14 @@ export default store => next => action => {
1818
if (action.type === actionNames.SET_DIFF_MODE) {
1919
localStorageWrapper.setItem(SUITES_PAGE_DIFF_MODE_KEY, action.payload.diffModeId);
2020
}
21+
2122
if (action.type === actionNames.VISUAL_CHECKS_SET_DIFF_MODE) {
2223
localStorageWrapper.setItem(VISUAL_CHECKS_PAGE_DIFF_MODE_KEY, action.payload.diffModeId);
2324
}
24-
localStorageWrapper.setItem('app.suitesPage.viewMode', app.suitesPage.viewMode);
25-
localStorageWrapper.setItem('app.visualChecksPage.viewMode', app.visualChecksPage.viewMode);
25+
26+
if (action.type === actionNames.CHANGE_VIEW_MODE) {
27+
localStorageWrapper.setItem('app.viewMode', app.viewMode);
28+
}
2629
}
2730

2831
return result;

lib/static/modules/reducers/filters.ts

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {State} from '@/static/new-ui/types/store';
2-
import {Page, PathNames, VISUAL_CHECKS_PAGE_DIFF_MODE_KEY} from '@/constants';
2+
import {Page, VISUAL_CHECKS_PAGE_DIFF_MODE_KEY} from '@/constants';
33
import actionNames from '@/static/modules/action-names';
44
import {FiltersAction, InitGuiReportAction, InitStaticReportAction} from '@/static/modules/actions';
55
import {DiffModeId, DiffModes, ViewMode} from '@/constants';
@@ -18,16 +18,15 @@ interface FilterData {
1818
filteredBrowsers?: BrowserItem[];
1919
}
2020

21-
const updateAppState = (state: State, page: Page, data: FilterData): State => (
22-
applyStateUpdate(state, {app: {[page]: data}})
21+
const updateAppState = (state: State, data: FilterData): State => (
22+
applyStateUpdate(state, {app: data})
2323
);
2424

2525
export default (state: State, action: FiltersAction | InitGuiReportAction | InitStaticReportAction): State => {
2626
switch (action.type) {
2727
case actionNames.INIT_GUI_REPORT:
2828
case actionNames.INIT_STATIC_REPORT: {
29-
const suitesPageViewMode = localStorageWrapper.getItem('app.suitesPage.viewMode', ViewMode.ALL) as ViewMode;
30-
const visualChecksPageViewMode = localStorageWrapper.getItem('app.visualChecksPage.viewMode', ViewMode.ALL) as ViewMode;
29+
const viewMode = localStorageWrapper.getItem('app.viewMode', ViewMode.ALL) as ViewMode;
3130
const visualChecksPageDiffMode = localStorageWrapper.getItem(VISUAL_CHECKS_PAGE_DIFF_MODE_KEY, DiffModes.TWO_UP_INTERACTIVE.id) as DiffModeId;
3231

3332
const viewQuery = getViewQuery(window.location.search);
@@ -42,33 +41,23 @@ export default (state: State, action: FiltersAction | InitGuiReportAction | Init
4241
state,
4342
{
4443
app: {
45-
[Page.suitesPage]: {
46-
viewMode: suitesPageViewMode
47-
},
44+
viewMode,
4845
[Page.visualChecksPage]: {
49-
viewMode: visualChecksPageViewMode,
5046
diffMode: visualChecksPageDiffMode
5147
}
5248
}
5349
}
5450
);
5551

56-
if (window.location.hash?.startsWith(`#${PathNames.visualChecks}`)) {
57-
newState.app[Page.visualChecksPage].filteredBrowsers = viewQuery.filteredBrowsers as BrowserItem[];
58-
newState.app[Page.visualChecksPage].viewMode = viewQuery.viewMode as ViewMode || visualChecksPageViewMode;
59-
newState.app[Page.visualChecksPage].nameFilter = viewQuery.testNameFilter as string || '';
60-
} else { // Need for backward compatibility with old ui where are suites page only
61-
newState.app[Page.suitesPage].filteredBrowsers = viewQuery.filteredBrowsers as BrowserItem[];
62-
newState.app[Page.suitesPage].viewMode = viewQuery.viewMode as ViewMode || suitesPageViewMode;
63-
newState.app[Page.suitesPage].nameFilter = viewQuery.testNameFilter as string || '';
64-
}
52+
newState.app.filteredBrowsers = viewQuery.filteredBrowsers as BrowserItem[];
53+
newState.app.viewMode = viewQuery.viewMode as ViewMode || viewMode;
54+
newState.app.nameFilter = viewQuery.testNameFilter as string || '';
6555

6656
return newState;
6757
}
6858
case actionNames.CHANGE_VIEW_MODE:
6959
return updateAppState(
7060
state,
71-
action.payload.page,
7261
{
7362
viewMode: action.payload.data
7463
}
@@ -77,7 +66,6 @@ export default (state: State, action: FiltersAction | InitGuiReportAction | Init
7766
case actionNames.VIEW_UPDATE_FILTER_BY_NAME:
7867
return updateAppState(
7968
state,
80-
action.payload.page,
8169
{
8270
nameFilter: action.payload.data
8371
}
@@ -86,7 +74,6 @@ export default (state: State, action: FiltersAction | InitGuiReportAction | Init
8674
case actionNames.VIEW_SET_FILTER_MATCH_CASE: {
8775
return updateAppState(
8876
state,
89-
action.payload.page,
9077
{
9178
useMatchCaseFilter: action.payload.data
9279
}
@@ -96,7 +83,6 @@ export default (state: State, action: FiltersAction | InitGuiReportAction | Init
9683
case actionNames.VIEW_SET_FILTER_USE_REGEX:
9784
return updateAppState(
9885
state,
99-
action.payload.page,
10086
{
10187
useRegexFilter: action.payload.data
10288
}
@@ -105,7 +91,6 @@ export default (state: State, action: FiltersAction | InitGuiReportAction | Init
10591
case actionNames.BROWSERS_SELECTED:
10692
return updateAppState(
10793
state,
108-
action.payload.page,
10994
{
11095
filteredBrowsers: action.payload.data
11196
}

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

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {SortDirection, State} from '@/static/new-ui/types/store';
2-
import {Page} from '@/constants';
32
import {SomeAction} from '@/static/modules/actions/types';
43
import actionNames from '@/static/modules/action-names';
54
import {applyStateUpdate} from '@/static/modules/utils';
@@ -94,27 +93,25 @@ export default (state: State, action: SomeAction): State => {
9493
});
9594
}
9695
case actionNames.VIEW_UPDATE_FILTER_BY_NAME: {
97-
if (action.payload.page === Page.suitesPage) {
98-
const sortTestsData: Partial<State['app']['sortTestsData']> = {};
99-
const availableExpressions = [...state.app.sortTestsData.availableExpressions];
100-
const previousExpressionIds = state.app.sortTestsData.previousExpressionIds;
101-
const previousDirection = state.app.sortTestsData.previousDirection;
102-
103-
if (action.payload.data.length > 0 && !availableExpressions.some(expr => expr.id === SORT_BY_RELEVANCE.id)) {
104-
sortTestsData.availableExpressions = [...availableExpressions, SORT_BY_RELEVANCE];
105-
sortTestsData.currentExpressionIds = [SORT_BY_RELEVANCE.id];
106-
sortTestsData.currentDirection = SortDirection.Desc;
107-
} else if (action.payload.data.length === 0 && availableExpressions.some(expr => expr.id === SORT_BY_RELEVANCE.id)) {
108-
sortTestsData.availableExpressions = availableExpressions.filter(expr => expr.id !== SORT_BY_RELEVANCE.id);
109-
sortTestsData.currentExpressionIds = previousExpressionIds;
110-
sortTestsData.currentDirection = previousDirection;
111-
}
96+
const sortTestsData: Partial<State['app']['sortTestsData']> = {};
97+
const availableExpressions = [...state.app.sortTestsData.availableExpressions];
98+
const previousExpressionIds = state.app.sortTestsData.previousExpressionIds;
99+
const previousDirection = state.app.sortTestsData.previousDirection;
112100

113-
return applyStateUpdate(state, {
114-
app: {sortTestsData}
115-
});
101+
if (action.payload.data.length > 0 && !availableExpressions.some(expr => expr.id === SORT_BY_RELEVANCE.id)) {
102+
sortTestsData.availableExpressions = [...availableExpressions, SORT_BY_RELEVANCE];
103+
sortTestsData.currentExpressionIds = [SORT_BY_RELEVANCE.id];
104+
sortTestsData.currentDirection = SortDirection.Desc;
105+
} else if (action.payload.data.length === 0 && availableExpressions.some(expr => expr.id === SORT_BY_RELEVANCE.id)) {
106+
sortTestsData.availableExpressions = availableExpressions.filter(expr => expr.id !== SORT_BY_RELEVANCE.id);
107+
sortTestsData.currentExpressionIds = previousExpressionIds;
108+
sortTestsData.currentDirection = previousDirection;
116109
}
117110

111+
return applyStateUpdate(state, {
112+
app: {sortTestsData}
113+
});
114+
118115
return state;
119116
}
120117
default:

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ export function updateImagesStatus({tree, view, app, images, imageIdsArray, newS
121121
const browserIdsUniq = uniq(browserIds);
122122
const suiteIdsUniq = uniq(browserIdsUniq.map(browserId => tree.browsers.byId[browserId].parentId));
123123

124-
updateParentSuitesStatus(tree, suiteIdsUniq, app.suitesPage.filteredBrowsers, diff);
124+
updateParentSuitesStatus(tree, suiteIdsUniq, app.filteredBrowsers, diff);
125125

126126
!isEmpty(suiteIdsUniq) && calcSuitesOpenness({tree, expand: view.expand, suiteIds: suiteIdsUniq, diff});
127127
!isEmpty(browserIdsUniq) && calcBrowsersOpenness({tree, expand: view.expand, browserIds: browserIdsUniq, diff});

0 commit comments

Comments
 (0)