From ab58e8c8a2d6bbab45a2669283344d9ae354ae99 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Mon, 5 Jul 2021 20:27:37 +0100 Subject: [PATCH 1/6] 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 76cad551b79863cdf67e6e3f487c600c095746c3 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 6 Jul 2021 10:33:15 +0100 Subject: [PATCH 2/6] 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 7a7822d5ca596c150d7b662ff094848a139a73b1 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 6 Jul 2021 11:04:47 +0100 Subject: [PATCH 3/6] 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 c208fb9ab840a8aac6ca3f63f8e8d2694b69c513 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Tue, 6 Jul 2021 11:29:35 +0100 Subject: [PATCH 4/6] 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') - // } } } From 92ae0b3b3be08a2244da3a849aa4a4e7e52c6e75 Mon Sep 17 00:00:00 2001 From: filip mertens Date: Tue, 6 Jul 2021 16:02:34 +0200 Subject: [PATCH 5/6] label to context menu --- .../src/lib/file-explorer-context-menu.tsx | 2 +- .../file-explorer/src/lib/file-explorer.tsx | 36 ++++++++++++------- .../file-explorer/src/lib/types/index.ts | 2 +- 3 files changed, 26 insertions(+), 14 deletions(-) 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/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 { From d95a040477bae7ee1ab076e9832e5e8cba8702bf Mon Sep 17 00:00:00 2001 From: bunsenstraat Date: Tue, 6 Jul 2021 16:09:15 +0200 Subject: [PATCH 6/6] Update fileSystem.ts --- .../src/lib/reducers/fileSystem.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) 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 }