feat(y.metrika): send counters id clicked by user (#376)

Author: DudaGod

lib/static/components/details.js

@@ -9,13 +9,18 @@ export default class Details extends Component {
     static propTypes = {
         title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).isRequired,
         content: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.element, PropTypes.array]).isRequired,
-        extendClassNames: PropTypes.oneOfType([PropTypes.array, PropTypes.string])
+        extendClassNames: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+        onClick: PropTypes.func
     };
 
     state = {isOpened: false};
 
     handleClick = () => {
         this.setState({isOpened: !this.state.isOpened});
+
+        if (this.props.onClick) {
+            this.props.onClick();
+        }
     }
 
     render() {

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

@@ -46,7 +46,7 @@ class Body extends Component {
 
     onRetrySwitcherChange = (index) => {
         this.setState({retry: index});
-        this._changeTestRetry({retryIndex: index});
+        this._changeTestRetry({retryIndex: index, isUserClick: true});
     }
 
     onTestRetry = () => {
@@ -55,14 +55,14 @@ class Body extends Component {
         this.props.actions.retryTest({testName, browserName});
     }
 
-    _changeTestRetry({retryIndex}) {
+    _changeTestRetry({retryIndex, isUserClick = false}) {
         const {browserId, browserRetryIndex} = this.props;
 
         if (retryIndex === browserRetryIndex) {
             return;
         }
 
-        this.props.actions.changeTestRetry({browserId, retryIndex});
+        this.props.actions.changeTestRetry({browserId, retryIndex, isUserClick});
     }
 
     _addRetrySwitcher = () => {

lib/static/components/section/body/meta-info.js

@@ -2,8 +2,10 @@ import path from 'path';
 import url from 'url';
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import PropTypes from 'prop-types';
 import {map, mapValues, isObject, omitBy, isEmpty} from 'lodash';
+import * as actions from '../../../modules/actions';
 import Details from '../../details';
 import {isUrl} from '../../../modules/utils';
 
@@ -68,15 +70,21 @@ class MetaInfo extends Component {
         return metaToElements(formattedMetaInfo, metaInfoBaseUrls);
     }
 
+    onToggleMetaInfo = () => {
+        this.props.actions.toggleMetaInfo();
+    }
+
     render() {
         return <Details
             title='Meta'
             content={this._renderMetaInfo}
             extendClassNames='details_type_text'
+            onClick={this.onToggleMetaInfo}
         />;
     }
 }
 
 export default connect(
-    ({config: {metaInfoBaseUrls}, apiValues}) => ({metaInfoBaseUrls, apiValues})
+    ({config: {metaInfoBaseUrls}, apiValues}) => ({metaInfoBaseUrls, apiValues}),
+    (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
 )(MetaInfo);

lib/static/components/section/section-browser.js

@@ -1,8 +1,10 @@
 import React, {Component, Fragment} from 'react';
 import {last} from 'lodash';
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import Parser from 'html-react-parser';
 import PropTypes from 'prop-types';
+import * as actions from '../../modules/actions';
 import SectionWrapper from './section-wrapper';
 import BrowserTitle from './title/browser';
 import BrowserSkippedTitle from './title/browser-skipped';
@@ -48,6 +50,8 @@ class SectionBrowser extends Component {
 
     _onToggleSection = () => {
         this.setState({opened: !this.state.opened});
+
+        this.props.actions.toggleBrowserSection(this.props.browserId);
     }
 
     _getStates(props = this.props) {
@@ -144,4 +148,5 @@ export default connect(
             };
         };
     },
+    (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
 )(SectionWrapper(SectionBrowser));

lib/static/components/section/section-common.js

@@ -1,7 +1,9 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import PropTypes from 'prop-types';
 import LazilyRender from '@gemini-testing/react-lazily-render';
+import * as actions from '../../modules/actions';
 import SectionWrapper from './section-wrapper';
 import SectionBrowser from './section-browser';
 import {isFailStatus, isErroredStatus} from '../../../common-utils';
@@ -56,11 +58,13 @@ class SectionCommon extends Component {
 
     _onToggleSection = () => {
         this.setState({opened: !this.state.opened});
-        const {eventToUpdate} = this.props;
+        const {eventToUpdate, suiteId} = this.props;
 
         if (eventToUpdate) {
             window.dispatchEvent(new Event(eventToUpdate));
         }
+
+        this.props.actions.toggleSuiteSection(suiteId);
     }
 
     _drawSection() {
@@ -155,6 +159,7 @@ const SectionCommonWrapper = connect(
             };
         };
     },
+    (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
 )(SectionWrapper(SectionCommon));
 
 export default SectionCommonWrapper;

lib/static/components/section/title/browser.js

@@ -3,7 +3,9 @@ import React, {Component} from 'react';
 import ClipboardButton from 'react-clipboard.js';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import {get} from 'lodash';
+import * as actions from '../../../modules/actions';
 import {appendQuery} from '../../../modules/query-params';
 import viewModes from '../../../../constants/view-modes';
 
@@ -40,6 +42,18 @@ class BrowserTitle extends Component {
         });
     }
 
+    onViewInBrowser = (e) => {
+        e.stopPropagation();
+
+        this.props.actions.viewInBrowser();
+    }
+
+    onCopyTestLink = (e) => {
+        e.stopPropagation();
+
+        this.props.actions.copyTestLink();
+    }
+
     render() {
         const {title, suiteUrl, handler, parsedHost} = this.props;
 
@@ -49,13 +63,13 @@ class BrowserTitle extends Component {
                 <a
                     className="button section__icon section__icon_view-local"
                     href={this._buildUrl(suiteUrl, parsedHost)}
-                    onClick={(e) => e.stopPropagation()}
+                    onClick={this.onViewInBrowser}
                     title="view in browser"
                     target="_blank">
                 </a>
                 <ClipboardButton
                     className="button section__icon section__icon_share"
-                    onClick={(e) => e.stopPropagation()}
+                    onClick={this.onCopyTestLink}
                     button-title="copy test link"
                     option-text={() => this._getTestUrl()}>
                 </ClipboardButton>
@@ -76,5 +90,6 @@ export default connect(
             suiteUrl: lastResult.suiteUrl,
             parsedHost: view.parsedHost
         };
-    }
+    },
+    (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
 )(BrowserTitle);

lib/static/components/section/title/simple.js

@@ -21,6 +21,12 @@ class SectionTitle extends Component {
         })).isRequired
     }
 
+    onCopySuiteName = (e) => {
+        e.stopPropagation();
+
+        this.props.actions.copySuiteName(this.props.suiteId);
+    }
+
     onSuiteRetry = (e) => {
         e.stopPropagation();
 
@@ -42,7 +48,7 @@ class SectionTitle extends Component {
     _drawCopyButton() {
         return (
             <ClipboardButton
-                onClick={(e) => e.stopPropagation()}
+                onClick={this.onCopySuiteName}
                 className="button section__icon section__icon_copy-to-clipboard"
                 button-title="copy to clipboard"
                 data-clipboard-text={this.props.suiteId}>

lib/static/components/state/index.js

@@ -92,14 +92,14 @@ class State extends Component {
         });
     }
 
-    onToggleStateResult = ({opened}) => {
+    onToggleStateResult = ({opened, isUserClick = false}) => {
         const {imageId, image, imageOpened} = this.props;
 
         if (!image.stateName || imageOpened === opened) {
             return;
         }
 
-        this.props.actions.toggleStateResult({imageId, opened});
+        this.props.actions.toggleStateResult({imageId, opened, isUserClick});
     }
 
     onTestAccept = () => {
@@ -158,7 +158,7 @@ class State extends Component {
 
     _toggleState = () => {
         this.setState({opened: !this.state.opened});
-        this.onToggleStateResult({opened: !this.state.opened});
+        this.onToggleStateResult({opened: !this.state.opened, isUserClick: true});
     }
 
     _getStateTitle() {

lib/static/components/state/state-error.js

@@ -2,9 +2,11 @@
 
 import React, {Component, Fragment} from 'react';
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import PropTypes from 'prop-types';
 import {isEmpty, map, isFunction} from 'lodash';
 import ReactHtmlParser from 'react-html-parser';
+import * as actions from '../../modules/actions';
 import Screenshot from './screenshot';
 import {isNoRefImageError} from '../../modules/utils';
 import ErrorDetails from './error-details';
@@ -43,7 +45,16 @@ class StateError extends Component {
 
         return isNoRefImageError(error)
             ? <Screenshot image={image.actualImg} />
-            : <Details title="Page screenshot" content={() => <Screenshot image={image.actualImg} noLazyLoad={true} />} extendClassNames="details_type_image" />;
+            : <Details
+                title="Page screenshot"
+                content={() => <Screenshot image={image.actualImg} noLazyLoad={true} />}
+                extendClassNames="details_type_image"
+                onClick={this.onTogglePageScreenshot}
+            />;
+    }
+
+    onTogglePageScreenshot = () => {
+        this.props.actions.togglePageScreenshot();
     }
 
     _errorToElements(error) {
@@ -107,7 +118,8 @@ export default connect(
         const errorDetails = image.stateName ? null : result.errorDetails;
 
         return {error, errorDetails, errorPatterns};
-    }
+    },
+    (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
 )(StateError);
 
 function parseHtmlString(str = '') {

lib/static/modules/action-names.js

@@ -37,5 +37,12 @@ export default {
     PROCESS_BEGIN: 'PROCESS_BEGIN',
     PROCESS_END: 'PROCESS_END',
     RUN_CUSTOM_GUI_ACTION: 'RUN_CUSTOM_GUI_ACTION',
-    BROWSERS_SELECTED: 'BROWSERS_SELECTED'
+    BROWSERS_SELECTED: 'BROWSERS_SELECTED',
+    COPY_SUITE_NAME: 'COPY_SUITE_NAME',
+    VIEW_IN_BROWSER: 'VIEW_IN_BROWSER',
+    COPY_TEST_LINK: 'COPY_TEST_LINK',
+    TOGGLE_SUITE_SECTION: 'TOGGLE_SUITE_SECTION',
+    TOGGLE_BROWSER_SECTION: 'TOGGLE_BROWSER_SECTION',
+    TOGGLE_META_INFO: 'TOGGLE_META_INFO',
+    TOGGLE_PAGE_SCREENSHOT: 'TOGGLE_PAGE_SCREENSHOT'
 };