From 311d93ad5a304e1181089f6dacb4bc996778555f Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 5 Jul 2021 20:27:37 +0100 Subject: [PATCH 1/4] Fixed settings tab --- apps/remix-ide/src/app/tabs/settings-tab.js | 46 ++++++------------- libs/remix-ui/settings/src/lib/constants.ts | 2 +- .../settings/src/lib/remix-ui-settings.tsx | 17 ++++--- .../settings/src/lib/settingsAction.ts | 42 ++++++++--------- 4 files changed, 47 insertions(+), 60 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index 8c3889a02b..594e33d496 100644 --- a/apps/remix-ide/src/app/tabs/settings-tab.js +++ b/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,16 @@ module.exports = class SettingsTab extends ViewPlugin { updateMatomoAnalyticsChoice (isChecked) { this.config.set('settings/matomo-analytics', isChecked) - if (isChecked) { - this._view.useMatomoAnalytics.setAttribute('checked', '') - 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') - } + this.useMatomoAnalytics = isChecked + this.renderComponent() + // if (isChecked) { + // this._view.useMatomoAnalytics.setAttribute('checked', '') + // 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') + // } } } diff --git a/libs/remix-ui/settings/src/lib/constants.ts b/libs/remix-ui/settings/src/lib/constants.ts index 4d6d2a06de..f26d43aff8 100644 --- a/libs/remix-ui/settings/src/lib/constants.ts +++ b/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 ' diff --git a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx index 7af4eb4da2..344ab4f3bb 100644 --- a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx +++ b/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) => { diff --git a/libs/remix-ui/settings/src/lib/settingsAction.ts b/libs/remix-ui/settings/src/lib/settingsAction.ts index 055c84449b..c316af576f 100644 --- a/libs/remix-ui/settings/src/lib/settingsAction.ts +++ b/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) => { - element.config.set('settings/generate-contract-metadata', event.target.checked) - dispatch({ type: 'contractMetadata', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } }) +export const generateContractMetadat = (config, checked, dispatch) => { + config.set('settings/generate-contract-metadata', checked) + dispatch({ type: 'contractMetadata', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } }) } -export const etherumVM = (element, event, dispatch) => { - element.config.set('settings/always-use-vm', event.target.checked) - dispatch({ type: 'ethereumVM', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } }) +export const etherumVM = (config, checked: boolean, dispatch) => { + config.set('settings/always-use-vm', checked) + dispatch({ type: 'ethereumVM', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } }) } -export const textWrapEventAction = (element, event, dispatch) => { - element.config.set('settings/text-wrap', event.target.checked) - element.editor.resize(event.target.checked) - dispatch({ type: 'textWrap', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } }) +export const textWrapEventAction = (config, editor, checked, dispatch) => { + config.set('settings/text-wrap', checked) + editor.resize(checked) + dispatch({ type: 'textWrap', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } }) } -export const personal = (element, event, dispatch) => { - element.config.set('settings/personal-mode', event.target.checked) - dispatch({ type: 'personal', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } }) +export const personal = (config, checked, dispatch) => { + config.set('settings/personal-mode', checked) + dispatch({ type: 'personal', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } }) } -export const useMatomoAnalytics = (element, event, dispatch) => { - element.config.set('settings/matomo-analytics', event.target.checked) - dispatch({ type: 'useMatomoAnalytics', payload: { name: event.target.name, isChecked: event.target.checked, textClass: event.target.checked ? textDark : textSecondary } }) - if (event.target.checked) { +export const useMatomoAnalytics = (config, checked, dispatch) => { + config.set('settings/matomo-analytics', checked) + dispatch({ type: 'useMatomoAnalytics', payload: { isChecked: checked, textClass: checked ? textDark : textSecondary } }) + 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) => { - props.config.set('settings/gist-access-token', tokenValue) +export const saveTokenToast = (config, dispatch, tokenValue) => { + config.set('settings/gist-access-token', tokenValue) dispatch({ type: 'save', payload: { message: 'Access token has been saved' } }) } -export const removeTokenToast = (props, dispatch) => { - props.config.set('settings/gist-access-token', '') +export const removeTokenToast = (config, dispatch) => { + config.set('settings/gist-access-token', '') dispatch({ type: 'removed', payload: { message: 'Access token removed' } }) } From 1a0aefb4b0362bba488ffffa840c1d149f604560 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 6 Jul 2021 10:33:15 +0100 Subject: [PATCH 2/4] Fixed failing test --- libs/remix-ui/settings/src/lib/remix-ui-settings.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx index 344ab4f3bb..adf92ae393 100644 --- a/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx +++ b/libs/remix-ui/settings/src/lib/remix-ui-settings.tsx @@ -106,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( From c70984af9ce38474df2c3ad51b2b2e10ac6052bd Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 6 Jul 2021 11:04:47 +0100 Subject: [PATCH 3/4] Increase timeout --- apps/remix-ide-e2e/src/tests/editor.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/remix-ide-e2e/src/tests/editor.spec.ts b/apps/remix-ide-e2e/src/tests/editor.spec.ts index c2fa0c0edd..83d4f23f8f 100644 --- a/apps/remix-ide-e2e/src/tests/editor.spec.ts +++ b/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') From 896af577f7bccd62039b54d731ac794ad50169a0 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 6 Jul 2021 11:29:35 +0100 Subject: [PATCH 4/4] Removed comments --- apps/remix-ide/src/app/tabs/settings-tab.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index 594e33d496..4e264b9100 100644 --- a/apps/remix-ide/src/app/tabs/settings-tab.js +++ b/apps/remix-ide/src/app/tabs/settings-tab.js @@ -60,14 +60,5 @@ module.exports = class SettingsTab extends ViewPlugin { this.config.set('settings/matomo-analytics', isChecked) this.useMatomoAnalytics = isChecked this.renderComponent() - // if (isChecked) { - // this._view.useMatomoAnalytics.setAttribute('checked', '') - // 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') - // } } }