diff --git a/apps/remix-ide-e2e/src/tests/pluginManager.spec.ts b/apps/remix-ide-e2e/src/tests/pluginManager.spec.ts index a610b86ae0..39b24ad9a4 100644 --- a/apps/remix-ide-e2e/src/tests/pluginManager.spec.ts +++ b/apps/remix-ide-e2e/src/tests/pluginManager.spec.ts @@ -131,7 +131,7 @@ module.exports = { .clearValue('*[data-id="localPluginUrl"]').setValue('*[data-id="localPluginUrl"]', testData.pluginUrl) .click('*[data-id="localPluginRadioButtoniframe"]') .click('*[data-id="localPluginRadioButtonsidePanel"]') - .click('*[data-id="pluginManagerLocalPluginModalDialogModalDialogModalFooter-react"]') + .click('*[data-id="pluginManagerLocalPluginModalDialog-modal-footer-ok-react"]') // .modalFooterOKClick() .pause(5000) .waitForElementVisible('*[data-shared="tooltipPopup"]') diff --git a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx index cfc9741a71..61792be08a 100644 --- a/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx +++ b/libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx @@ -1,9 +1,10 @@ /* eslint-disable no-debugger */ -import React, { useState } from 'react' +import React, { Dispatch, useReducer } from 'react' import { ModalDialog } from '@remix-ui/modal-dialog' import { Toaster } from '@remix-ui/toaster' import { IframePlugin, WebsocketPlugin } from '@remixproject/engine-web' import { FormStateProps, PluginManagerComponent } from '../../types' +import { localPluginReducerActionType, localPluginToastReducer } from '../../pluginManagerReducer' interface LocalPluginFormProps { changeHandler: (propertyName: string, value: any) => void @@ -13,7 +14,8 @@ interface LocalPluginFormProps { pluginManager: PluginManagerComponent } -const handleModalOkClick = async (pluginManager: PluginManagerComponent, plugin: FormStateProps, setErrorMsg: React.Dispatch>) => { +const handleModalOkClick = async (pluginManager: PluginManagerComponent, plugin: FormStateProps, + toastDispatcher: Dispatch) => { try { const profile = JSON.parse(localStorage.getItem('plugins/local')) if (profile && profile.profile && Object.keys(profile).length > 0) { @@ -28,7 +30,6 @@ const handleModalOkClick = async (pluginManager: PluginManagerComponent, plugin: const localPlugin = plugin.type === 'iframe' ? new IframePlugin(plugin) : new WebsocketPlugin(plugin) localPlugin.profile.hash = `local-${plugin.name}` - // <-------------------------------- Plumbing starts here ---------------------------------------> const targetPlugin = { name: localPlugin.profile.name, displayName: localPlugin.profile.displayName, @@ -45,13 +46,14 @@ const handleModalOkClick = async (pluginManager: PluginManagerComponent, plugin: localPlugin.profile = { ...localPlugin.profile, ...targetPlugin } pluginManager.activateAndRegisterLocalPlugin(localPlugin) } catch (error) { - console.error(error) + console.log(error) // setErrorMsg(error.message) - setErrorMsg(error.message) + const action: localPluginReducerActionType = { type: 'show', payload: `${error.message}` } + toastDispatcher(action) } } function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginManager }: LocalPluginFormProps) { - const [errorMsg, setErrorMsg] = useState('') + const [errorMsg, dispatchToastMsg] = useReducer(localPluginToastReducer, '') return ( <> handleModalOkClick(pluginManager, plugin, setErrorMsg) } + okFn={() => handleModalOkClick(pluginManager, plugin, dispatchToastMsg) } cancelLabel="Cancel" cancelFn={closeModal} > @@ -173,7 +175,9 @@ function LocalPluginForm ({ changeHandler, plugin, closeModal, visible, pluginMa - + + {errorMsg ? : null} + ) } diff --git a/libs/remix-ui/plugin-manager/src/pluginManagerReducer.ts b/libs/remix-ui/plugin-manager/src/pluginManagerReducer.ts new file mode 100644 index 0000000000..014b140c6e --- /dev/null +++ b/libs/remix-ui/plugin-manager/src/pluginManagerReducer.ts @@ -0,0 +1,12 @@ + +export type localPluginReducerActionType = { + type: 'show' | 'close', + payload?: any +} + +export function localPluginToastReducer (currentState: string, toastAction: localPluginReducerActionType) { + switch (toastAction.type) { + case 'show': + return `Cannot create Plugin : ${toastAction.payload!}` + } +}