Fixmatomo

apps/remix-ide-e2e/src/tests/matomo.test.ts

@@ -0,0 +1,143 @@
+'use strict'
+import { NightwatchBrowser } from 'nightwatch'
+import init from '../helpers/init'
+
+module.exports = {
+    before: function (browser: NightwatchBrowser, done: VoidFunction) {
+        init(browser, done)
+
+    },
+    confirmMatomo: function (browser: NightwatchBrowser) {
+
+        browser.perform((done) => {
+
+            browser
+                .execute(function () { // override a plugin url for testing purpose
+                    localStorage.setItem('showMatomo', 'true')
+                }, [])
+                .refreshPage()
+                .perform(done())
+        })
+            .waitForElementVisible('*[data-id="matomoModalModalDialogModalBody-react"]')
+            .pause(1000)
+            .click('[data-id="matomoModal-modal-footer-ok-react"]') // submitted
+            .waitForElementNotVisible('*[data-id="matomoModalModalDialogModalBody-react"]')
+            .waitForElementVisible('*[data-id="beginnerbtn"]', 10000)
+            .pause(1000)
+            .click('[data-id="beginnerbtn"]')
+            .waitForElementNotPresent('*[data-id="beginnerbtn"]')
+            .waitForElementVisible({
+                selector: `//*[contains(text(), 'Welcome to Remix IDE')]`,
+                locateStrategy: 'xpath'
+            })
+            .refreshPage()
+            .waitForElementPresent({
+                selector: `//*[@data-id='compilerloaded']`,
+                locateStrategy: 'xpath',
+                timeout: 120000
+            })
+            .waitForElementNotPresent('*[data-id="matomoModalModalDialogModalBody-react"]')
+            .clickLaunchIcon('settings')
+            .verify.elementPresent('[id="settingsMatomoAnalytics"]:checked')
+            .execute(function () {
+                return JSON.parse(window.localStorage.getItem('config-v0.8:.remix.config'))['settings/matomo-analytics'] == true
+            }, [], (res) => {
+                console.log('res', res)
+                browser.assert.ok((res as any).value, 'matomo analytics is enabled')
+            })
+    },
+    declineMatomo: function (browser: NightwatchBrowser) {
+        browser.perform((done) => {
+            browser.execute(function () {
+                localStorage.removeItem('config-v0.8:.remix.config')
+                localStorage.setItem('showMatomo', 'true')
+
+            }, [])
+                .refreshPage()
+                .perform(done())
+        })
+            .waitForElementPresent({
+                selector: `//*[@data-id='compilerloaded']`,
+                locateStrategy: 'xpath',
+                timeout: 120000
+            })
+            .waitForElementVisible('*[data-id="matomoModalModalDialogModalBody-react"]')
+            .click('[data-id="matomoModal-modal-footer-cancel-react"]') // cancel
+            .waitForElementNotVisible('*[data-id="matomoModalModalDialogModalBody-react"]')
+            .pause(2000)
+            .waitForElementNotPresent('*[data-id="beginnerbtn"]', 10000)
+            .clickLaunchIcon('settings')
+            .waitForElementNotPresent('[id="settingsMatomoAnalytics"]:checked')
+            .execute(function () {
+                return JSON.parse(window.localStorage.getItem('config-v0.8:.remix.config'))['settings/matomo-analytics'] == false
+            }, [], (res) => {
+                console.log('res', res)
+                browser.assert.ok((res as any).value, 'matomo analytics is disabled')
+            })
+    },
+    blurMatomo: function (browser: NightwatchBrowser) {
+        browser.perform((done) => {
+            browser.execute(function () {
+                localStorage.removeItem('config-v0.8:.remix.config')
+                localStorage.setItem('showMatomo', 'true')
+
+            }, [])
+                .refreshPage()
+                .perform(done())
+        })
+            .waitForElementPresent({
+                selector: `//*[@data-id='compilerloaded']`,
+                locateStrategy: 'xpath',
+                timeout: 120000
+            })
+            .waitForElementVisible('*[data-id="matomoModalModalDialogModalBody-react"]')
+            .waitForElementVisible('*[data-id="matomoModal-modal-close"]')
+            .click('[data-id="matomoModal-modal-close"]')
+            .waitForElementNotVisible('*[data-id="matomoModalModalDialogModalBody-react"]')
+            .pause(2000)
+            .waitForElementNotPresent('*[data-id="beginnerbtn"]', 10000)
+            .clickLaunchIcon('settings')
+            .waitForElementNotPresent('[id="settingsMatomoAnalytics"]:checked')
+            .execute(function () {
+                return JSON.parse(window.localStorage.getItem('config-v0.8:.remix.config'))['settings/matomo-analytics'] == undefined
+            }, [], (res) => {
+                console.log('res', res)
+                browser.assert.ok((res as any).value, 'matomo analytics is undefined')
+            })
+    },
+    shouldReappearMatomo: function (browser: NightwatchBrowser) {
+        browser
+        .refreshPage()
+        .waitForElementPresent({
+            selector: `//*[@data-id='compilerloaded']`,
+            locateStrategy: 'xpath',
+            timeout: 120000
+        })
+        .waitForElementVisible('*[data-id="matomoModalModalDialogModalBody-react"]')
+        .waitForElementVisible('*[data-id="matomoModal-modal-close"]')
+        .click('[data-id="matomoModal-modal-close"]')
+        .waitForElementNotVisible('*[data-id="matomoModalModalDialogModalBody-react"]')
+    },
+    changeSettings : function (browser: NightwatchBrowser) {
+        browser
+        .clickLaunchIcon('settings')
+        .waitForElementVisible('*[data-id="label-matomo-settings"]')
+        .pause(1000)
+        .click('*[data-id="label-matomo-settings"]')
+        .refreshPage()
+        .waitForElementPresent({
+            selector: `//*[@data-id='compilerloaded']`,
+            locateStrategy: 'xpath',
+            timeout: 120000
+        })
+        .waitForElementNotPresent('*[data-id="matomoModalModalDialogModalBody-react"]')
+        .clickLaunchIcon('settings')
+        .waitForElementPresent('[id="settingsMatomoAnalytics"]:checked')
+        .execute(function () {
+            return JSON.parse(window.localStorage.getItem('config-v0.8:.remix.config'))['settings/matomo-analytics'] == true
+        }, [], (res) => {
+            console.log('res', res)
+            browser.assert.ok((res as any).value, 'matomo analytics is enabled')
+        })
+    }
+}

apps/remix-ide/src/app.js

@@ -170,7 +170,7 @@ class AppComponent {
 
     this.matomoConfAlreadySet = Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
     this.matomoCurrentSetting = Registry.getInstance().get('config').api.get('settings/matomo-analytics')
-    this.showMatamo = matomoDomains[window.location.hostname] && !this.matomoConfAlreadySet
+    this.showMatomo = (matomoDomains[window.location.hostname] || (window.localStorage.getItem('showMatomo') && window.localStorage.getItem('showMatomo') === 'true')) && !this.matomoConfAlreadySet
 
     this.walkthroughService = new WalkthroughService(appManager)
 

apps/remix-ide/src/app/tabs/settings-tab.tsx

@@ -108,6 +108,7 @@ module.exports = class SettingsTab extends ViewPlugin {
   }
 
   updateMatomoAnalyticsChoice(isChecked) {
+    console.log('isChecked', isChecked)
     this.config.set('settings/matomo-analytics', isChecked)
     this.useMatomoAnalytics = isChecked
     if (!isChecked) {

apps/remix-ide/src/assets/js/loader.js

@@ -5,29 +5,33 @@ const domains = {
   '6fd22d6fe5549ad4c4d8fd3ca0b7816b.mod': 35 // remix desktop
 }
 
-const domainsSecondaryTracker = {
-  'remix-alpha.ethereum.org': 27,
-  'remix-beta.ethereum.org': 25,
-  'remix.ethereum.org': 23,
-  '6fd22d6fe5549ad4c4d8fd3ca0b7816b.mod': 35 // remix desktop
-}
-
 if (domains[window.location.hostname]) {
-  var _paq = window._paq = window._paq || []
+  const _paq = window._paq = window._paq || []
   /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
   _paq.push(["setExcludedQueryParams", ["code","gist"]]);
   _paq.push(["setExcludedReferrers", ["etherscan.io"]]);
   _paq.push(['enableJSErrorTracking']);
   _paq.push(['trackPageView']);
   _paq.push(['enableLinkTracking']);
   _paq.push(['enableHeartBeatTimer']);
-  if (!window.localStorage.getItem('config-v0.8:.remix.config') ||
-    (window.localStorage.getItem('config-v0.8:.remix.config') && !window.localStorage.getItem('config-v0.8:.remix.config').includes('settings/matomo-analytics'))) {
+  const remixConfig = window.localStorage.getItem('config-v0.8:.remix.config');
+  if (!remixConfig || (remixConfig && !remixConfig.includes('settings/matomo-analytics'))) {
     // require user tracking consent before processing data
     _paq.push(['requireConsent']);
   } else {
-    // user has given consent to process their data
-    _paq.push(['setConsentGiven'])
+    try {
+      const config = JSON.parse(remixConfig);
+      if (config['settings/matomo-analytics'] === true) {
+        // user has given consent to process their data
+        _paq.push(['setConsentGiven']);
+      } else {
+        // user has not given consent to process their data
+        _paq.push(['requireConsent']);
+      }
+    } catch (e) {
+      console.error('Error parsing remix config:', e);
+      _paq.push(['requireConsent']);
+    }
   }
   (function () {
     var u = "https://ethereumfoundation.matomo.cloud/";

libs/remix-ui/app/src/lib/remix-app/components/modals/matomo.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { AppContext } from '../../context/context'
 import { useDialogDispatchers } from '../../context/provider'
+import { AppModalCancelTypes } from '../../types'
 declare global {
   interface Window {
     _paq: any
@@ -15,7 +16,7 @@ interface MatomoDialogProps {
 }
 
 const MatomoDialog = (props: MatomoDialogProps) => {
-  const { settings, showMatamo, appManager } = useContext(AppContext)
+  const { settings, showMatomo, appManager } = useContext(AppContext)
   const { modal } = useDialogDispatchers()
   const [visible, setVisible] = useState<boolean>(props.hide)
 
@@ -63,27 +64,32 @@ const MatomoDialog = (props: MatomoDialogProps) => {
   }
 
   useEffect(() => {
-    if (visible && showMatamo) {
+    if (visible && showMatomo) {
       modal({
         id: 'matomoModal',
         title: <FormattedMessage id="remixApp.matomoTitle" />,
         message: message(),
         okLabel: <FormattedMessage id="remixApp.accept" />,
         okFn: handleModalOkClick,
         cancelLabel: <FormattedMessage id="remixApp.decline" />,
-        cancelFn: declineModal,
+        cancelFn: declineModal
       })
     }
+    console.log('visible', visible)
   }, [visible])
 
-  const declineModal = async () => {
-    settings.updateMatomoAnalyticsChoice(false)
-    // revoke tracking consent
-    _paq.push(['forgetConsentGiven'])
-    setVisible(false)
+  const declineModal = async (reason: AppModalCancelTypes) => {
+    console.log('declineModal', reason)
+    if (reason === AppModalCancelTypes.click || reason === AppModalCancelTypes.enter) {
+      settings.updateMatomoAnalyticsChoice(false)
+      // revoke tracking consent
+      _paq.push(['forgetConsentGiven'])
+      setVisible(false)
+    }
   }
 
   const handleModalOkClick = async () => {
+
     // user has given consent to process their data
     _paq.push(['setConsentGiven'])
     settings.updateMatomoAnalyticsChoice(true)

libs/remix-ui/app/src/lib/remix-app/components/modals/modal-wrapper.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { ModalDialog, ModalDialogProps, ValidationResult } from '@remix-ui/modal-dialog'
-import { ModalTypes } from '../../types'
+import { AppModalCancelTypes, ModalTypes } from '../../types'
 
 interface ModalWrapperProps extends ModalDialogProps {
   modalType?: ModalTypes
@@ -42,8 +42,8 @@ const ModalWrapper = (props: ModalWrapperProps) => {
     props.okFn ? props.okFn(data.current) : props.resolve(data.current || true)
   }
 
-  const onCancelFn = async () => {
-    props.cancelFn ? props.cancelFn() : props.resolve(false)
+  const onCancelFn = async (reason?: AppModalCancelTypes) => {
+    props.cancelFn ? props.cancelFn(reason) : props.resolve(false)
   }
 
   const onInputChanged = (event) => {

libs/remix-ui/app/src/lib/remix-app/context/context.tsx

@@ -5,7 +5,7 @@ import { AppAction } from '../actions/app'
 
 export type appProviderContextType = {
   settings: any,
-  showMatamo: boolean,
+  showMatomo: boolean,
   showEnter: boolean,
   appManager: any
   modal: any

libs/remix-ui/app/src/lib/remix-app/interface/index.ts

@@ -1,5 +1,5 @@
 import { GitHubUser } from '@remix-ui/git'
-import { ModalTypes } from '../types'
+import { AppModalCancelTypes, ModalTypes } from '../types'
 
 export type ValidationResult = {
     valid: boolean,
@@ -17,7 +17,7 @@ export interface AppModal {
     okLabel: string | JSX.Element
     okFn?: (value?:any) => void
     cancelLabel?: string | JSX.Element
-    cancelFn?: () => void,
+    cancelFn?: (reason?: AppModalCancelTypes) => void,
     modalType?: ModalTypes,
     modalParentClass?: string
     defaultValue?: string

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -60,7 +60,7 @@ const RemixApp = (props: IRemixAppUi) => {
       activateApp()
     }
     const hadUsageTypeAsked = localStorage.getItem('hadUsageTypeAsked')
-    if (props.app.showMatamo) {
+    if (props.app.showMatomo) {
       // if matomo dialog is displayed, it will take care of calling "setShowEnterDialog",
       // if the user approves matomo tracking.
       // so "showEnterDialog" stays false
@@ -149,7 +149,7 @@ const RemixApp = (props: IRemixAppUi) => {
 
   const value: appProviderContextType = {
     settings: props.app.settings,
-    showMatamo: props.app.showMatamo,
+    showMatomo: props.app.showMatomo,
     appManager: props.app.appManager,
     showEnter: props.app.showEnter,
     modal: props.app.notification,

libs/remix-ui/app/src/lib/remix-app/types/index.ts

@@ -8,6 +8,15 @@ export const enum ModalTypes {
   forceChoice = 'forceChoice'
 }
 
+export const enum AppModalCancelTypes {
+  close = 'close',
+  cancel = 'cancel',
+  blur = 'blur',
+  escape = 'escape',
+  enter = 'enter',
+  click = 'click'
+}
+
 export const enum UsageTypes {
   Beginner = 1,
   Prototyper,

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -2,6 +2,7 @@ import React, {useRef, useState, useEffect} from 'react' // eslint-disable-line
 import {ModalDialogProps} from './types' // eslint-disable-line
 
 import './remix-ui-modal-dialog.css'
+import { AppModalCancelTypes } from 'libs/remix-ui/app/src/lib/remix-app/types'
 
 declare global {
   // eslint-disable-next-line no-unused-vars
@@ -41,15 +42,15 @@ export const ModalDialog = (props: ModalDialogProps) => {
       e.stopPropagation()
       if (document.activeElement !== this) {
         !window.testmode && handleHide()
-        !window.testmode && props.cancelFn && props.cancelFn()
+        !window.testmode && props.cancelFn && props.cancelFn(AppModalCancelTypes.blur)
       }
     }
   }
 
   const modalKeyEvent = (keyCode) => {
     if (keyCode === 27) {
       // Esc
-      if (props.cancelFn) props.cancelFn()
+      if (props.cancelFn) props.cancelFn(AppModalCancelTypes.escape)
       handleHide()
     } else if (keyCode === 13) {
       // Enter
@@ -71,7 +72,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
     if (state.toggleBtn) {
       if (props.okFn) props.okFn()
     } else {
-      if (props.cancelFn) props.cancelFn()
+      if (props.cancelFn) props.cancelFn(AppModalCancelTypes.enter)
     }
     handleHide()
   }
@@ -99,7 +100,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
               {props.title && props.title}
             </h6>
             {!props.showCancelIcon && (
-              <span className="modal-close" onClick={() => handleHide()}>
+              <span data-id={`${props.id}-modal-close`} className="modal-close" onClick={() => handleHide()}>
                 <i className="fas fa-times" aria-hidden="true"></i>
               </span>
             )}
@@ -130,7 +131,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
                 className={'modal-cancel btn btn-sm ' + (props.cancelBtnClass ? props.cancelBtnClass : state.toggleBtn ? 'border-secondary' : 'border-primary')}
                 data-dismiss="modal"
                 onClick={() => {
-                  if (props.cancelFn) props.cancelFn()
+                  if (props.cancelFn) props.cancelFn(AppModalCancelTypes.click)
                   handleHide()
                 }}
               >