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') diff --git a/apps/remix-ide/src/app/tabs/settings-tab.js b/apps/remix-ide/src/app/tabs/settings-tab.js index 8c3889a02b..4e264b9100 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,7 @@ 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() } } diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx index 69bdac6f2c..a8a31fd6c8 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer-context-menu.tsx @@ -101,7 +101,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) => break } hideContextMenu() - }}>{item.name} + }}>{item.label || item.name} }) } diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx index a5cbfb205f..eab163b09e 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx @@ -35,7 +35,8 @@ export const FileExplorer = (props: FileExplorerProps) => { path: [], extension: [], pattern: [], - multiselect: false + multiselect: false, + label: '' }, { id: 'newFolder', name: 'New Folder', @@ -43,7 +44,8 @@ export const FileExplorer = (props: FileExplorerProps) => { path: [], extension: [], pattern: [], - multiselect: false + multiselect: false, + label: '' }, { id: 'rename', name: 'Rename', @@ -51,7 +53,8 @@ export const FileExplorer = (props: FileExplorerProps) => { path: [], extension: [], pattern: [], - multiselect: false + multiselect: false, + label: '' }, { id: 'delete', name: 'Delete', @@ -59,7 +62,8 @@ export const FileExplorer = (props: FileExplorerProps) => { path: [], extension: [], pattern: [], - multiselect: false + multiselect: false, + label: '' }, { id: 'run', name: 'Run', @@ -67,7 +71,8 @@ export const FileExplorer = (props: FileExplorerProps) => { path: [], extension: ['.js'], pattern: [], - multiselect: false + multiselect: false, + label: '' }, { id: 'pushChangesToGist', name: 'Push changes to gist', @@ -75,7 +80,8 @@ export const FileExplorer = (props: FileExplorerProps) => { path: [], extension: [], pattern: [], - multiselect: false + multiselect: false, + label: '' }, { id: 'publishFolderToGist', name: 'Publish folder to gist', @@ -83,7 +89,8 @@ export const FileExplorer = (props: FileExplorerProps) => { path: [], extension: [], pattern: [], - multiselect: false + multiselect: false, + label: '' }, { id: 'publishFileToGist', name: 'Publish file to gist', @@ -91,7 +98,8 @@ export const FileExplorer = (props: FileExplorerProps) => { path: [], extension: [], pattern: [], - multiselect: false + multiselect: false, + label: '' }, { id: 'copy', name: 'Copy', @@ -99,7 +107,8 @@ export const FileExplorer = (props: FileExplorerProps) => { path: [], extension: [], pattern: [], - multiselect: false + multiselect: false, + label: '' }, { id: 'deleteAll', name: 'Delete All', @@ -107,7 +116,8 @@ export const FileExplorer = (props: FileExplorerProps) => { path: [], extension: [], pattern: [], - multiselect: true + multiselect: true, + label: '' }], focusContext: { element: null, @@ -282,7 +292,8 @@ export const FileExplorer = (props: FileExplorerProps) => { path: [], extension: [], pattern: [], - multiselect: false + multiselect: false, + label: '' }]) } else { removeMenuItems([{ @@ -292,7 +303,8 @@ export const FileExplorer = (props: FileExplorerProps) => { path: [], extension: [], pattern: [], - multiselect: false + multiselect: false, + label: '' }]) } }, [canPaste]) diff --git a/libs/remix-ui/file-explorer/src/lib/reducers/fileSystem.ts b/libs/remix-ui/file-explorer/src/lib/reducers/fileSystem.ts index ac00815802..7646e03036 100644 --- a/libs/remix-ui/file-explorer/src/lib/reducers/fileSystem.ts +++ b/libs/remix-ui/file-explorer/src/lib/reducers/fileSystem.ts @@ -266,15 +266,16 @@ const removePath = (root, path: string, pathName, files) => { return Array.isArray(cur) ? [...acc, ...cur] : [...acc, cur] }, []) const prevFiles = _.get(files, _path) - - prevFiles && prevFiles.child && prevFiles.child[pathName] && delete prevFiles.child[pathName] - files = _.set(files, _path, { - isDirectory: true, - path, - name: extractNameFromKey(path).indexOf('gist-') === 0 ? extractNameFromKey(path).split('-')[1] : extractNameFromKey(path), - type: extractNameFromKey(path).indexOf('gist-') === 0 ? 'gist' : 'folder', - child: prevFiles ? prevFiles.child : {} - }) + if (prevFiles) { + prevFiles.child && prevFiles.child[pathName] && delete prevFiles.child[pathName] + files = _.set(files, _path, { + isDirectory: true, + path, + name: extractNameFromKey(path).indexOf('gist-') === 0 ? extractNameFromKey(path).split('-')[1] : extractNameFromKey(path), + type: extractNameFromKey(path).indexOf('gist-') === 0 ? 'gist' : 'folder', + child: prevFiles ? prevFiles.child : {} + }) + } return files } diff --git a/libs/remix-ui/file-explorer/src/lib/types/index.ts b/libs/remix-ui/file-explorer/src/lib/types/index.ts index 61fcb4d752..c0c27b765f 100644 --- a/libs/remix-ui/file-explorer/src/lib/types/index.ts +++ b/libs/remix-ui/file-explorer/src/lib/types/index.ts @@ -32,7 +32,7 @@ export interface FileExplorerMenuProps { uploadFile: (target: EventTarget & HTMLInputElement) => void } -export type action = { name: string, type: string[], path: string[], extension: string[], pattern: string[], id: string, multiselect: boolean } +export type action = { name: string, type: string[], path: string[], extension: string[], pattern: string[], id: string, multiselect: boolean, label: string } export type MenuItems = action[] export interface FileExplorerContextMenuProps { 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..adf92ae393 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) => { @@ -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( 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' } }) }