refactor(new-ui): Change url format

rocketraccoon · rocketraccoon · commit 007bb5e79cb8 · 2025-10-28T19:16:15.000+07:00
diff --git a/lib/static/components/modals/screenshot-accepter/header.jsx b/lib/static/components/modals/screenshot-accepter/header.jsx
@@ -1,7 +1,7 @@
 import React, {Component, Fragment} from 'react';
 import {GlobalHotKeys} from 'react-hotkeys';
 import PropTypes from 'prop-types';
-import {uniqBy, pick} from 'lodash';
+import {uniqBy} from 'lodash';
 
 import ProgressBar from '../../progress-bar';
 import ControlButton from '../../controls/control-button';
diff --git a/lib/static/modules/actions/visual-checks-page.ts b/lib/static/modules/actions/visual-checks-page.ts
@@ -2,12 +2,15 @@ import actionNames from '@/static/modules/action-names';
 import {Action} from '@/static/modules/actions/types';
 import {DiffModeId, TwoUpFitMode} from '@/constants';
 
-export type VisualChecksPageSetCurrentNamedImageAction = Action<typeof actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE, {
-    namedImageId: string;
-}>;
+export type VisualChecksPageSetCurrentNamedImageData = {
+    suiteId?: string;
+    stateName?: string;
+};
+
+export type VisualChecksPageSetCurrentNamedImageAction = Action<typeof actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE, VisualChecksPageSetCurrentNamedImageData>;
 
-export const visualChecksPageSetCurrentNamedImage = (namedImageId: string): VisualChecksPageSetCurrentNamedImageAction => {
-    return {type: actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE, payload: {namedImageId}};
+export const visualChecksPageSetCurrentNamedImage = (data: VisualChecksPageSetCurrentNamedImageData): VisualChecksPageSetCurrentNamedImageAction => {
+    return {type: actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE, payload: data};
 };
 
 export type Toggle2UpDiffVisibilityAction = Action<typeof actionNames.VISUAL_CHECKS_TOGGLE_2UP_DIFF_VISIBILITY, {
diff --git a/lib/static/modules/default-state.ts b/lib/static/modules/default-state.ts
@@ -113,7 +113,8 @@ export default Object.assign({config: configDefaults}, {
             filteredBrowsers: []
         },
         [Page.visualChecksPage]: {
-            currentNamedImageId: null,
+            suiteId: null,
+            stateName: null,
 
             viewMode: ViewMode.ALL,
             nameFilter: '',
diff --git a/lib/static/modules/reducers/visual-checks-page.ts b/lib/static/modules/reducers/visual-checks-page.ts
@@ -8,7 +8,7 @@ import {TWO_UP_DIFF_VISIBILITY_KEY, TWO_UP_FIT_MODE_KEY} from '@/constants/local
 export default (state: State, action: VisualChecksPageAction): State => {
     switch (action.type) {
         case actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE:
-            return applyStateUpdate(state, {app: {visualChecksPage: {currentNamedImageId: action.payload.namedImageId}}}) as State;
+            return applyStateUpdate(state, {app: {visualChecksPage: action.payload}}) as State;
         case actionNames.VISUAL_CHECKS_TOGGLE_2UP_DIFF_VISIBILITY:
             localStorageWrapper.setItem(TWO_UP_DIFF_VISIBILITY_KEY, action.payload.isVisible);
             return applyStateUpdate(state, {
diff --git a/lib/static/new-ui/app/App.tsx b/lib/static/new-ui/app/App.tsx
@@ -29,14 +29,14 @@ export function App(): ReactNode {
             url: '/suites',
             icon: ListCheck,
             element: <SuitesPage/>,
-            children: [<Route key={'suite'} path='/suites/:suiteId?/:stateName?/:attempt?' element={<SuitesPage/>} />]
+            children: [<Route key={'suite'} path='/suites/:suiteId?/:attempt?/:stateName?' element={<SuitesPage/>} />]
         },
         {
             title: 'Visual Checks',
             url: '/visual-checks',
             icon: Eye,
             element: <VisualChecksPage/>,
-            children: [<Route key={'image'} path='/visual-checks/:imageId?/:attempt?' element={<VisualChecksPage/>} />]
+            children: [<Route key={'image'} path='/visual-checks/:suiteId?/:attempt?/:stateName?' element={<VisualChecksPage/>} />]
         }
     ];
 
diff --git a/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx b/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx
@@ -4,7 +4,7 @@ import React, {ReactNode, createRef, useEffect, useRef} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 
 import {AssertViewResult} from '@/static/new-ui/components/AssertViewResult';
-import {ImageEntity} from '@/static/new-ui/types/store';
+import {ImageEntity, Page} from '@/static/new-ui/types/store';
 import {DiffModeId, EditScreensFeature, TestStatus} from '@/constants';
 import {getAvailableDiffModes} from '@/static/new-ui/utils/diffModes';
 import {
@@ -20,6 +20,7 @@ import {thunkAcceptImages, thunkRevertImages} from '@/static/modules/actions/scr
 import {useAnalytics} from '@/static/new-ui/hooks/useAnalytics';
 import {ErrorHandler} from '../../../error-handling/components/ErrorHandling';
 import {useNavigate, useParams} from 'react-router-dom';
+import {getUrl} from '@/static/new-ui/utils/getUrl';
 
 interface ScreenshotsTreeViewItemProps {
     image: ImageEntity;
@@ -87,7 +88,12 @@ export function ScreenshotsTreeViewItem(props: ScreenshotsTreeViewItemProps): Re
     const imageId = `${currentResult?.parentId} ${props.image.stateName}`;
 
     const onVisualChecks = (): void => {
-        navigate(`/visual-checks/${encodeURIComponent(imageId)}/${currentResult?.attempt}`);
+        navigate(getUrl({
+            page: Page.visualChecksPage,
+            suiteId: suiteId,
+            stateName: props.image.stateName,
+            attempt: currentResult?.attempt
+        }));
     };
 
     useEffect(() => {
diff --git a/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx b/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx
@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import React, {ReactNode, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {useNavigate, useParams} from 'react-router-dom';
-
 import {UiCard} from '@/static/new-ui/components/Card/UiCard';
 import {getAttempt, getCurrentResult, getCurrentResultImages} from '@/static/new-ui/features/suites/selectors';
 import {SplitViewLayout} from '@/static/new-ui/components/SplitViewLayout';
@@ -31,6 +30,7 @@ import {getIconByStatus} from '@/static/new-ui/utils';
 import {Page} from '@/static/new-ui/types/store';
 import {usePage} from '@/static/new-ui/hooks/usePage';
 import {changeTestRetry, setCurrentTreeNode, setStrictMatchFilter} from '@/static/modules/actions';
+import {getUrl} from '@/static/new-ui/utils/getUrl';
 
 export function SuitesPage(): ReactNode {
     const page = usePage();
@@ -59,13 +59,13 @@ export function SuitesPage(): ReactNode {
     }, [page]);
 
     useEffect(() => {
-        if (currentResult?.parentId && attempt !== null && resultImages.length) {
-            navigate('/' + [
-                'suites',
-                currentResult.parentId as string,
-                params.stateName !== undefined ? params.stateName : resultImages[0].stateName as string,
-                attempt?.toString() as string
-            ].map(encodeURIComponent).join('/'));
+        if (currentResult?.parentId && attempt !== null) {
+            navigate(getUrl({
+                page: Page.suitesPage,
+                attempt,
+                suiteId: currentResult.parentId,
+                stateName: resultImages.length ? resultImages[0].stateName : undefined
+            }));
         }
     }, [currentResult, attempt]);
 
diff --git a/lib/static/new-ui/features/suites/components/SuitesPage/types.ts b/lib/static/new-ui/features/suites/components/SuitesPage/types.ts
@@ -20,6 +20,8 @@ export interface TreeViewItemData {
     images?: ImageEntity[];
     parentData?: TreeViewItemData;
     skipReason?: string;
+    suiteId?: string;
+    stateName?: string;
 }
 
 export interface TreeRoot {
diff --git a/lib/static/new-ui/features/suites/components/TestSteps/index.tsx b/lib/static/new-ui/features/suites/components/TestSteps/index.tsx
@@ -27,6 +27,8 @@ import {ErrorHandler} from '../../../error-handling/components/ErrorHandling';
 import {goToTimeInSnapshotsPlayer, setCurrentPlayerHighlightTime} from '@/static/modules/actions/snapshots';
 import {setCurrentStep} from '@/static/modules/actions';
 import {useNavigate} from 'react-router-dom';
+import {getUrl} from '@/static/new-ui/utils/getUrl';
+import {Page} from '@/static/new-ui/types/store';
 
 type TestStepClickHandler = (item: {id: string}) => void
 
@@ -171,13 +173,13 @@ function TestStepsInternal(props: TestStepsProps): ReactNode {
             expandedById: Object.assign({}, props.stepsExpandedById, {[id]: !props.stepsExpandedById[id]})
         });
 
-        if (step.type === StepType.Action) {
-            navigate('/' + [
-                'suites',
-                currentResult?.parentId as string,
-                step.args[0] as string,
-                currentResult?.attempt?.toString() as string
-            ].map(encodeURIComponent).join('/'));
+        if (step.type === StepType.Action && step.title === 'assertView') {
+            navigate(getUrl({
+                page: Page.suitesPage,
+                suiteId: currentResult?.parentId,
+                attempt: currentResult?.attempt,
+                stateName: step.args[0]
+            }));
         }
     }, [items, props.actions, props.stepsExpandedById]);
 
diff --git a/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/VisualChecksStickyHeader.tsx b/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/VisualChecksStickyHeader.tsx
@@ -31,11 +31,15 @@ import {preloadImageEntity} from '../../../../../modules/utils/imageEntity';
 import {useNavigate} from 'react-router-dom';
 import {RunTestButton} from '../../../../components/RunTest';
 import {IconButton} from '../../../../components/IconButton';
+import {getUrl} from '@/static/new-ui/utils/getUrl';
+import {Page} from '@/static/new-ui/types/store';
+import {TreeViewData} from '@/static/new-ui/components/TreeView';
+import {TreeViewItemData} from '@/static/new-ui/features/suites/components/SuitesPage/types';
 
 interface VisualChecksStickyHeaderProps {
     currentNamedImage: NamedImageEntity | null;
-    visibleNamedImageIds: string[];
-    onImageChange: (id: string) => void;
+    treeData: TreeViewData;
+    onImageChange: (item: TreeViewItemData) => void;
 }
 
 export const PRELOAD_IMAGES_COUNT = 3;
@@ -63,16 +67,17 @@ const usePreloadImages = (
     }, []);
 };
 
-export function VisualChecksStickyHeader({currentNamedImage, visibleNamedImageIds, onImageChange}: VisualChecksStickyHeaderProps): ReactNode {
+export function VisualChecksStickyHeader({currentNamedImage, treeData, onImageChange}: VisualChecksStickyHeaderProps): ReactNode {
+    const visibleNamedImageIds = treeData.allTreeNodeIds;
     const dispatch = useDispatch();
     const analytics = useAnalytics();
     const currentImage = useSelector(getCurrentImage);
     const attempt = useSelector(getAttempt);
     const navigate = useNavigate();
 
     const currentNamedImageIndex = visibleNamedImageIds.indexOf(currentNamedImage?.id as string);
-    const onPreviousImageHandler = (): void => onImageChange(visibleNamedImageIds[currentNamedImageIndex - 1]);
-    const onNextImageHandler = (): void => onImageChange(visibleNamedImageIds[currentNamedImageIndex + 1]);
+    const onPreviousImageHandler = (): void => onImageChange(treeData.tree[currentNamedImageIndex - 1].data);
+    const onNextImageHandler = (): void => onImageChange(treeData.tree[currentNamedImageIndex + 1].data);
 
     usePreloadImages(currentNamedImageIndex, visibleNamedImageIds);
 
@@ -134,12 +139,12 @@ export function VisualChecksStickyHeader({currentNamedImage, visibleNamedImageId
 
     const onSuites = (): void => {
         if (currentNamedImage) {
-            navigate('/' + [
-                'suites',
-                currentNamedImage?.browserId as string,
-                currentNamedImage?.stateName as string,
-                attempt?.toString() as string
-            ].map(encodeURIComponent).join('/'));
+            navigate(getUrl({
+                page: Page.suitesPage,
+                suiteId: currentNamedImage?.browserId,
+                attempt,
+                stateName: currentNamedImage?.stateName
+            }));
         }
     };
 
diff --git a/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/index.tsx b/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/index.tsx
@@ -31,6 +31,7 @@ import {Page} from '@/static/new-ui/types/store';
 import {usePage} from '@/static/new-ui/hooks/usePage';
 import {useNavigate, useParams} from 'react-router-dom';
 import {RunTestLoading} from '@/static/new-ui/components/RunTestLoading';
+import {getUrl} from '@/static/new-ui/utils/getUrl';
 
 export function VisualChecksPage(): ReactNode {
     const dispatch = useDispatch();
@@ -49,7 +50,18 @@ export function VisualChecksPage(): ReactNode {
     const inited = useRef(false);
     const isRunning = currentNamedImage?.status === TestStatus.RUNNING;
 
-    const currentTreeNodeId = useSelector((state) => state.app.visualChecksPage.currentNamedImageId);
+    const currentImageSuiteId = useSelector((state) => (
+        state.app.visualChecksPage.suiteId
+    ));
+
+    const currentImageStateName = useSelector((state) => (
+        state.app.visualChecksPage.stateName
+    ));
+
+    const currentTreeNodeId = useMemo(
+        () => [currentImageSuiteId, currentImageStateName].join(' '),
+        [currentImageSuiteId, currentImageStateName]
+    );
 
     const treeData = useSelector(getVisualTreeViewData);
     const suitesTreeViewRef = useRef<TreeViewHandle>(null);
@@ -59,15 +71,14 @@ export function VisualChecksPage(): ReactNode {
     }, [suitesTreeViewRef, currentTreeNodeId]);
 
     const isInitialized = useSelector(state => state.app.isInitialized);
-    const onImageChange = useCallback((imageId: string) => {
-        dispatch(visualChecksPageSetCurrentNamedImage(imageId));
-        setImageChanged(true);
-    }, [currentBrowser]);
 
-    const onTreeItemClick = useCallback((item: TreeViewItemData) => {
-        dispatch(visualChecksPageSetCurrentNamedImage(item.id));
+    const onImageChange = useCallback((item: TreeViewItemData) => {
+        dispatch(visualChecksPageSetCurrentNamedImage({
+            suiteId: item.suiteId,
+            stateName: item.stateName
+        }));
         setImageChanged(true);
-    }, [currentBrowser, attempt]);
+    }, [treeData]);
 
     useEffect(() => {
         if (imageChanged && currentBrowser) {
@@ -78,21 +89,24 @@ export function VisualChecksPage(): ReactNode {
 
     useEffect(() => {
         if (currentTreeNodeId && attempt !== null) {
-            navigate(`${encodeURIComponent(currentTreeNodeId as string)}/${attempt}`);
+            navigate(getUrl({
+                page: Page.visualChecksPage,
+                suiteId: currentImageSuiteId,
+                attempt: attempt,
+                stateName: currentImageStateName
+            }));
         }
     }, [currentTreeNodeId, attempt]);
 
     useEffect(() => {
         if (params && isInitialized && !inited.current) {
             inited.current = true;
 
-            if (params.imageId) {
-                dispatch(visualChecksPageSetCurrentNamedImage(params.imageId));
-
-                if (params.attempt !== undefined) {
-                    const browserId = params.imageId.split(' ').slice(0, -1).join(' ');
-                    dispatch(changeTestRetry({browserId, retryIndex: Number(params.attempt)}));
-                }
+            if (params.suiteId && params.stateName) {
+                dispatch(visualChecksPageSetCurrentNamedImage({
+                    suiteId: params.suiteId,
+                    stateName: params.stateName
+                }));
             }
         }
     }, [params, isInitialized]);
@@ -153,7 +167,7 @@ export function VisualChecksPage(): ReactNode {
                     treeData={treeData}
                     treeViewExpandedById={{}}
                     currentTreeNodeId={currentTreeNodeId}
-                    onClick={onTreeItemClick}
+                    onClick={onImageChange}
                     statusList={statusList}
                     statusValue={statusValue}
                     onStatusChange={onStatusChange}
@@ -165,7 +179,7 @@ export function VisualChecksPage(): ReactNode {
                                 {currentNamedImage && (
                                     <VisualChecksStickyHeader
                                         currentNamedImage={currentNamedImage}
-                                        visibleNamedImageIds={treeData.allTreeNodeIds}
+                                        treeData={treeData}
                                         onImageChange={onImageChange}
                                     />
                                 )}
diff --git a/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/selectors.ts b/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/selectors.ts
@@ -91,6 +91,8 @@ export const getVisualTreeViewData = createSelector(
                     status: item.status === TestStatus.RUNNING ? item.status : images[item.imageIds[item.imageIds.length - 1]].status,
                     tags: [],
                     title: [...item.suitePath, item.browserName],
+                    suiteId: item.browserId,
+                    stateName: item.stateName,
                     images: [
                         images[item.imageIds[item.imageIds.length - 1]] as ImageEntity
                     ]
diff --git a/lib/static/new-ui/features/visual-checks/selectors.ts b/lib/static/new-ui/features/visual-checks/selectors.ts
@@ -88,7 +88,7 @@ export const getNamedImages = createSelector(
 );
 
 export const getCurrentNamedImage = (state: State): NamedImageEntity | null => {
-    const currentNamedImageId = state.app.visualChecksPage.currentNamedImageId;
+    const currentNamedImageId = [state.app.visualChecksPage.suiteId, state.app.visualChecksPage.stateName].join(' ');
     const namedImages = getNamedImages(state);
 
     if (!currentNamedImageId) {
@@ -167,7 +167,7 @@ export const getLastAttempt = (state: State): number => {
 };
 
 export const getCurrentBrowser = (state: State): BrowserEntity | null => {
-    const currentNamedImageId = state.app.visualChecksPage.currentNamedImageId;
+    const currentNamedImageId = getCurrentNamedImage(state)?.id;
     const namedImages = getNamedImages(state);
 
     if (currentNamedImageId) {
diff --git a/lib/static/new-ui/types/store.ts b/lib/static/new-ui/types/store.ts
@@ -277,7 +277,8 @@ export interface State {
             filteredBrowsers: BrowserItem[];
         };
         [Page.visualChecksPage]: {
-            currentNamedImageId: string | null;
+            suiteId: string | null;
+            stateName: string | null;
 
             // Filters in top of sidebar
             nameFilter: string;
diff --git a/lib/static/new-ui/utils/getUrl.ts b/lib/static/new-ui/utils/getUrl.ts
@@ -0,0 +1,29 @@
+import {Page} from '@/static/new-ui/types/store';
+
+const getPathnameByPage = (page: Page): string => {
+    if (page === Page.visualChecksPage) {
+        return 'visual-checks';
+    }
+
+    if (page === Page.suitesPage) {
+        return 'suites';
+    }
+
+    return 'suites';
+};
+
+export type GetUrlParams = {
+    page: Page
+    suiteId?: string | null;
+    attempt?: number | string | null;
+    stateName?: string | null;
+};
+
+export const getUrl = (params: GetUrlParams): string => (
+    '/' + [
+        getPathnameByPage(params.page),
+        params.suiteId as string,
+        params.attempt?.toString() as string,
+        params.stateName as string
+    ].filter(Boolean).map(encodeURIComponent).join('/')
+);
diff --git a/test/unit/lib/static/new-ui/features/visual-checks/components/VisualChecksStickyHeader.jsx b/test/unit/lib/static/new-ui/features/visual-checks/components/VisualChecksStickyHeader.jsx

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,8 @@ export interface TreeViewItemData {`
`20`	`20`	`images?: ImageEntity[];`
`21`	`21`	`parentData?: TreeViewItemData;`
`22`	`22`	`skipReason?: string;`
	`23`	`+ suiteId?: string;`
	`24`	`+ stateName?: string;`
`23`	`25`	`}`
`24`	`26`
`25`	`27`	`export interface TreeRoot {`