Merge pull request #1353 from ethereum/fix-settings

Fixed settings tab

apps/remix-ide-e2e/src/tests/editor.spec.ts

@@ -36,7 +36,7 @@ module.exports = {
       .click('*[class="ace_content"]')
       .sendKeys('*[class="ace_text-input"]', 'error')
       .pause(2000)
-      .waitForElementVisible('.ace_error', 60000)
+      .waitForElementVisible('.ace_error', 120000)
       .checkAnnotations('error', 28)
       .clickLaunchIcon('udapp')
       .checkAnnotationsNotPresent('error')

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

@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom'
 import * as packageJson from '../../../../../package.json'
 import { RemixUiSettings } from '@remix-ui/settings' //eslint-disable-line
 const globalRegistry = require('../../global/registry')
-const EventManager = require('../../lib/events')
 
 const profile = {
   name: 'settings',
@@ -21,36 +20,16 @@ const profile = {
 }
 
 module.exports = class SettingsTab extends ViewPlugin {
-  constructor (config, editor, appManager) {
+  constructor (config, editor) {
     super(profile)
     this.config = config
     this.editor = editor
-    this.appManager = appManager
-    this._components = {}
     this._deps = {
       themeModule: globalRegistry.get('themeModule').api
     }
-    this._view = { /* eslint-disable */
-      el: null,
-      optionVM: null,
-      optionVMLabel: null,
-      personal: null,
-      personalLabel: null,
-      useMatomoAnalytics: null,
-      useMatomoAnalyticsLabel: null,
-      useMatomoAnalyticsMode: null,
-      warnPersonalMode: null,
-      generateContractMetadata: null,
-      generateContractMetadataLabel: null,
-      config: {
-        general: null, themes: null
-      },
-      textWrap: null,
-      textWrapLabel: null
-    } /* eslint-enable */
-    this.event = new EventManager()
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'settingsTab')
+    this.useMatomoAnalytics = null
   }
 
   onActivation () {
@@ -67,6 +46,7 @@ module.exports = class SettingsTab extends ViewPlugin {
         config = { this.config }
         editor = { this.editor }
         _deps = { this._deps }
+        useMatomoAnalytics = {this.useMatomoAnalytics}
       />,
       this.element
     )
@@ -78,14 +58,7 @@ module.exports = class SettingsTab extends ViewPlugin {
 
   updateMatomoAnalyticsChoice (isChecked) {
     this.config.set('settings/matomo-analytics', isChecked)
-    if (isChecked) {
+    this.useMatomoAnalytics = isChecked
-      this._view.useMatomoAnalytics.setAttribute('checked', '')
+    this.renderComponent()
-      this._view.useMatomoAnalyticsLabel.classList.remove('text-secondary')
-      this._view.useMatomoAnalyticsLabel.classList.add('text-dark')
-    } else {
-      this._view.useMatomoAnalytics.removeAttribute('checked')
-      this._view.useMatomoAnalyticsLabel.classList.remove('text-dark')
-      this._view.useMatomoAnalyticsLabel.classList.add('text-secondary')
-    }
   }
 }

libs/remix-ui/settings/src/lib/constants.ts

@@ -6,7 +6,7 @@ export const gitAccessTokenTitle = 'Github Access Token'
 export const gitAccessTokenText = 'Manage the access token used to publish to Gist and retrieve Github contents.'
 export const gitAccessTokenText2 = 'Go to github token page (link below) to create a new token and save it in Remix. Make sure this token has only \'create gist\' permission.'
 export const gitAccessTokenLink = 'https://github.com/settings/tokens'
-export const ethereunVMText = 'Always use Ethereum VM at load'
+export const ethereunVMText = 'Always use Javascript VM at load'
 export const wordWrapText = 'Word wrap in editor'
 export const enablePersonalModeText = ' Enable Personal Mode for web3 provider. Transaction sent over Web3 will use the web3.personal API.\n'
 export const matomoAnalytics = 'Enable Matomo Analytics. We do not collect personally identifiable information (PII). The info is used to improve the site’s UX & UI. See more about '

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

@@ -12,7 +12,8 @@ import { Toaster } from '@remix-ui/toaster'// eslint-disable-line
 export interface RemixUiSettingsProps {
   config: any,
   editor: any,
-   _deps: any
+   _deps: any,
+   useMatomoAnalytics: boolean
 }
 
 export const RemixUiSettings = (props: RemixUiSettingsProps) => {
@@ -33,24 +34,28 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
     }
   }, [themeName, state.message])
 
+  useEffect(() => {
+    if (props.useMatomoAnalytics !== null) useMatomoAnalytics(props.config, props.useMatomoAnalytics, dispatch)
+  }, [props.useMatomoAnalytics])
+
   const onchangeGenerateContractMetadata = (event) => {
-    generateContractMetadat(props, event, dispatch)
+    generateContractMetadat(props.config, event.target.checked, dispatch)
   }
 
   const onchangeOption = (event) => {
-    etherumVM(props, event, dispatch)
+    etherumVM(props.config, event.target.checked, dispatch)
   }
 
   const textWrapEvent = (event) => {
-    textWrapEventAction(props, event, dispatch)
+    textWrapEventAction(props.config, props.editor, event.target.checked, dispatch)
   }
 
   const onchangePersonal = event => {
-    personal(props, event, dispatch)
+    personal(props.config, event.target.checked, dispatch)
   }
 
   const onchangeMatomoAnalytics = event => {
-    useMatomoAnalytics(props, event, dispatch)
+    useMatomoAnalytics(props.config, event.target.checked, dispatch)
   }
 
   const onswitchTheme = (event, name) => {
@@ -101,12 +106,12 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
   )
 
   const saveToken = () => {
-    saveTokenToast(props, dispatchToast, tokenValue)
+    saveTokenToast(props.config, dispatchToast, tokenValue)
   }
 
   const removeToken = () => {
     setTokenValue('')
-    removeTokenToast(props, dispatchToast)
+    removeTokenToast(props.config, dispatchToast)
   }
 
   const handleSaveTokenState = useCallback(

libs/remix-ui/settings/src/lib/settingsAction.ts

@@ -8,31 +8,31 @@ declare global {
 
 const _paq = window._paq = window._paq || [] //eslint-disable-line
 
-export const generateContractMetadat = (element, event, dispatch) => {
+export const generateContractMetadat = (config, checked, dispatch) => {
-  element.config.set('settings/generate-contract-metadata', event.target.checked)
+  config.set('settings/generate-contract-metadata', checked)
-  dispatch({ type: 'contractMetadata', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } })
+  dispatch({ type: 'contractMetadata', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } })
 }
 
-export const etherumVM = (element, event, dispatch) => {
+export const etherumVM = (config, checked: boolean, dispatch) => {
-  element.config.set('settings/always-use-vm', event.target.checked)
+  config.set('settings/always-use-vm', checked)
-  dispatch({ type: 'ethereumVM', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } })
+  dispatch({ type: 'ethereumVM', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } })
 }
 
-export const textWrapEventAction = (element, event, dispatch) => {
+export const textWrapEventAction = (config, editor, checked, dispatch) => {
-  element.config.set('settings/text-wrap', event.target.checked)
+  config.set('settings/text-wrap', checked)
-  element.editor.resize(event.target.checked)
+  editor.resize(checked)
-  dispatch({ type: 'textWrap', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } })
+  dispatch({ type: 'textWrap', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } })
 }
 
-export const personal = (element, event, dispatch) => {
+export const personal = (config, checked, dispatch) => {
-  element.config.set('settings/personal-mode', event.target.checked)
+  config.set('settings/personal-mode', checked)
-  dispatch({ type: 'personal', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } })
+  dispatch({ type: 'personal', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } })
 }
 
-export const useMatomoAnalytics = (element, event, dispatch) => {
+export const useMatomoAnalytics = (config, checked, dispatch) => {
-  element.config.set('settings/matomo-analytics', event.target.checked)
+  config.set('settings/matomo-analytics', checked)
-  dispatch({ type: 'useMatomoAnalytics', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } })
+  dispatch({ type: 'useMatomoAnalytics', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } })
-  if (event.target.checked) {
+  if (checked) {
     _paq.push(['forgetUserOptOut'])
     // @TODO remove next line when https://github.com/matomo-org/matomo/commit/9e10a150585522ca30ecdd275007a882a70c6df5 is used
     document.cookie = 'mtm_consent_removed=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'
@@ -41,12 +41,12 @@ export const useMatomoAnalytics = (element, event, dispatch) => {
   }
 }
 
-export const saveTokenToast = (props, dispatch, tokenValue) => {
+export const saveTokenToast = (config, dispatch, tokenValue) => {
-  props.config.set('settings/gist-access-token', tokenValue)
+  config.set('settings/gist-access-token', tokenValue)
   dispatch({ type: 'save', payload: { message: 'Access token has been saved' } })
 }
 
-export const removeTokenToast = (props, dispatch) => {
+export const removeTokenToast = (config, dispatch) => {
-  props.config.set('settings/gist-access-token', '')
+  config.set('settings/gist-access-token', '')
   dispatch({ type: 'removed', payload: { message: 'Access token removed' } })
 }