Merge branch 'master' into fixError

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/file-explorer/src/lib/file-explorer-context-menu.tsx

@@ -101,7 +101,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
               break
           }
           hideContextMenu()
-        }}>{item.name}</li>
+        }}>{item.label || item.name}</li>
     })
   }
 

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])

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)
-
+  if (prevFiles) {
-  prevFiles && prevFiles.child && prevFiles.child[pathName] && delete prevFiles.child[pathName]
+    prevFiles.child && prevFiles.child[pathName] && delete prevFiles.child[pathName]
-  files = _.set(files, _path, {
+    files = _.set(files, _path, {
-    isDirectory: true,
+      isDirectory: true,
-    path,
+      path,
-    name: extractNameFromKey(path).indexOf('gist-') === 0 ? extractNameFromKey(path).split('-')[1] : extractNameFromKey(path),
+      name: extractNameFromKey(path).indexOf('gist-') === 0 ? extractNameFromKey(path).split('-')[1] : extractNameFromKey(path),
-    type: extractNameFromKey(path).indexOf('gist-') === 0 ? 'gist' : 'folder',
+      type: extractNameFromKey(path).indexOf('gist-') === 0 ? 'gist' : 'folder',
-    child: prevFiles ? prevFiles.child : {}
+      child: prevFiles ? prevFiles.child : {}
-  })
+    })
+  }
 
   return files
 }

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 {

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' } })
 }