refactor: re-write actions to typescript and implement new analytics API (#626)

* refactor: re-write actions to typescript and implement new analytics API

* fix: fix static accepter action naming

Author: shadowusr

lib/common-utils.ts

@@ -16,7 +16,7 @@ import {
     COMMITED
 } from './constants';
 
-import {CHECKED, INDETERMINATE, UNCHECKED} from './constants/checked-statuses';
+import {CHECKED, CheckStatus, INDETERMINATE, UNCHECKED} from './constants/checked-statuses';
 import {
     ImageBase64,
     ImageBuffer,
@@ -247,7 +247,7 @@ export const normalizeUrls = (urls: string[] = [], baseUrl: string): string[] =>
 export const isCheckboxChecked = (status: number): boolean => Number(status) === CHECKED;
 export const isCheckboxIndeterminate = (status: number): boolean => Number(status) === INDETERMINATE;
 export const isCheckboxUnchecked = (status: number): boolean => Number(status) === UNCHECKED;
-export const getToggledCheckboxState = (status: number): number => isCheckboxChecked(status) ? UNCHECKED : CHECKED;
+export const getToggledCheckboxState = (status: number): CheckStatus => isCheckboxChecked(status) ? UNCHECKED : CHECKED;
 
 export function getDetailsFileName(testId: string, browserId: string, attempt: number): string {
     return `${testId}-${browserId}_${Number(attempt) + 1}_${Date.now()}.json`;

lib/static/components/controls/accept-opened-button.jsx

@@ -5,8 +5,11 @@ import PropTypes from 'prop-types';
 import * as actions from '../../modules/actions';
 import ControlButton from './control-button';
 import {getAcceptableOpenedImageIds} from '../../modules/selectors/tree';
+import {AnalyticsContext} from '@/static/new-ui/providers/analytics';
 
 class AcceptOpenedButton extends Component {
+    static contextType = AnalyticsContext;
+
     static propTypes = {
         isSuiteContol: PropTypes.bool,
         // from store
@@ -16,11 +19,14 @@ class AcceptOpenedButton extends Component {
         actions: PropTypes.object.isRequired
     };
 
-    _acceptOpened = () => {
+    _acceptOpened = async () => {
+        const analytics = this.context;
+        await analytics?.trackOpenedScreenshotsAccept({acceptedImagesCount: this.props.acceptableOpenedImageIds.length});
+
         if (this.props.isStaticImageAccepterEnabled) {
             this.props.actions.staticAccepterStageScreenshot(this.props.acceptableOpenedImageIds);
         } else {
-            this.props.actions.acceptOpened(this.props.acceptableOpenedImageIds);
+            this.props.actions.thunkAcceptImages({imageIds: this.props.acceptableOpenedImageIds});
         }
     };
 

lib/static/components/controls/custom-gui-controls.jsx

@@ -29,7 +29,7 @@ class CustomGuiControls extends PureComponent {
         const onClickHandler = (event, {value}) => {
             const controlIndex = controls.findIndex((control) => control.value === value);
 
-            actions.runCustomGuiAction({sectionName, groupIndex, controlIndex});
+            actions.thunkRunCustomGuiAction({sectionName, groupIndex, controlIndex});
         };
 
         return map(controls, ({label, value, active}, i) =>

lib/static/components/controls/find-same-diffs-button.jsx

@@ -21,7 +21,7 @@ class FindSameDiffsButton extends Component {
     _findSameDiffs = () => {
         const {actions, imageId, failedOpenedImageIds, browserName} = this.props;
 
-        actions.findSameDiffs(imageId, failedOpenedImageIds, browserName);
+        actions.thunkFindSameDiffs(imageId, failedOpenedImageIds, browserName);
     };
 
     render() {

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

@@ -30,7 +30,7 @@ class GuiControls extends Component {
                     <ControlButton
                         label="Stop tests"
                         isDisabled={!running || stopping}
-                        handler={actions.stopTests}
+                        handler={actions.thunkStopTests}
                     />
                     <AcceptOpenedButton />
                     <CommonControls/>

lib/static/components/controls/run-button/index.jsx

@@ -29,9 +29,9 @@ const RunButton = ({actions, autoRun, isDisabled, isRunning, failedTests, checke
     const selectFailedTests = () => !shouldDisableFailed && setMode(RunMode.FAILED);
     const selectCheckedTests = () => !shouldDisableChecked && setMode(RunMode.CHECKED);
 
-    const runAllTests = () => actions.runAllTests();
-    const runFailedTests = () => actions.runFailedTests(failedTests);
-    const runCheckedTests = () => actions.retrySuite(checkedTests);
+    const runAllTests = () => actions.thunkRunAllTests();
+    const runFailedTests = () => actions.thunkRunFailedTests({tests: failedTests});
+    const runCheckedTests = () => actions.thunkRunSuite({tests: checkedTests});
 
     const handleRunClick = () => {
         const action = {

lib/static/components/gui.jsx

@@ -10,7 +10,7 @@ import StickyHeader from './sticky-header/gui';
 import Loading from './loading';
 import ModalContainer from '../containers/modal';
 import MainTree from './main-tree';
-import CustomScripts from './custom-scripts';
+import {CustomScripts} from '../new-ui/components/CustomScripts';
 import {ClientEvents} from '../../gui/constants/client-events';
 import FaviconChanger from './favicon-changer';
 import ExtensionPoint from './extension-point';
@@ -60,7 +60,7 @@ class Gui extends Component {
         });
 
         eventSource.addEventListener(ClientEvents.END, () => {
-            actions.testsEnd();
+            actions.thunkTestsEnd();
         });
     }
 

lib/static/components/modals/screenshot-accepter/index.jsx

@@ -13,10 +13,13 @@ import {staticImageAccepterPropType} from '../../../modules/static-image-accepte
 import {preloadImage} from '../../../modules/utils';
 
 import './style.css';
+import {AnalyticsContext} from '@/static/new-ui/providers/analytics';
 
 const PRELOAD_IMAGE_COUNT = 3;
 
 class ScreenshotAccepter extends Component {
+    static contextType = AnalyticsContext;
+
     static propTypes = {
         view: PropTypes.shape({
             diffMode: PropTypes.string.isRequired
@@ -58,6 +61,8 @@ class ScreenshotAccepter extends Component {
         for (let i = 1; i <= PRELOAD_IMAGE_COUNT; i++) {
             this._preloadAdjacentImages(activeImageIndex, stateNameImageIds, i);
         }
+
+        this.analytics = this.context;
     }
 
     componentDidUpdate() {
@@ -138,7 +143,7 @@ class ScreenshotAccepter extends Component {
         if (this.props.staticImageAccepter.enabled) {
             this.props.actions.staticAccepterUndoDelayScreenshot();
         } else {
-            await this.props.actions.undoAcceptImage(imageId, {skipTreeUpdate: true});
+            await this.props.actions.thunkRevertImages({imageIds: [imageId], shouldCommitUpdatesToTree: false});
             this.delayedTestResults.pop();
         }
 
@@ -164,7 +169,7 @@ class ScreenshotAccepter extends Component {
 
             this.props.actions.staticAccepterStageScreenshot(imageIdsToStage);
         } else {
-            this.props.actions.applyDelayedTestResults(this.delayedTestResults);
+            this.props.actions.commitAcceptedImagesToTree(this.delayedTestResults);
         }
 
         this.props.onClose();
@@ -184,7 +189,8 @@ class ScreenshotAccepter extends Component {
     }
 
     async _acceptScreenshot(imageId, stateName) {
-        const updatedData = await this.props.actions.screenshotAccepterAccept(imageId);
+        const updatedData = await this.props.actions.thunkAcceptImages({imageIds: [imageId], shouldCommitUpdatesToTree: false});
+        this.analytics?.trackScreenshotsAccept();
 
         if (updatedData === null) {
             return null;

lib/static/components/report.jsx

@@ -10,7 +10,7 @@ import Loading from './loading';
 import StickyHeader from './sticky-header/report';
 import ModalContainer from '../containers/modal';
 import MainTree from './main-tree';
-import CustomScripts from './custom-scripts';
+import {CustomScripts} from '../new-ui/components/CustomScripts';
 import FaviconChanger from './favicon-changer';
 import ExtensionPoint from './extension-point';
 import BottomProgressBar from './bottom-progress-bar';

lib/static/components/section/body/index.jsx

@@ -27,7 +27,7 @@ function Body(props) {
     const onTestRetry = () => {
         const {testName, browserName} = props;
 
-        props.actions.retryTest({testName, browserName});
+        props.actions.thunkRunTest({test: {testName, browserName}});
     };
 
     const addRetrySwitcher = () => {