From a42c813ff29bc9f7e55c5b099ea4c5744ec43db1 Mon Sep 17 00:00:00 2001 From: Inga Vishnivetskaia Date: Mon, 10 Jul 2023 09:51:15 +0300 Subject: [PATCH] #2790-remove-copy-cut-paste-Modal-from-client-to-ketcher-react --- example/src/App.tsx | 4 ++ .../src/script/ui/action/index.js | 46 +++++++++----- .../src/script/ui/dialog/index.ts | 4 +- .../src/script/ui/state/shared.ts | 10 +++ .../InfoModal/InfoModal.module.less | 42 +++++++++++++ .../modal/components/InfoModal/InfoModal.tsx | 63 +++++++++++++++++++ .../PasteErrorModalBody.module.less | 20 ++++++ .../PasteErrorModalBody.tsx | 17 +++++ .../InfoModal/PasteErrorModalBody/index.ts | 1 + .../modal/components/InfoModal/constants.ts | 9 +++ .../views/modal/components/InfoModal/index.ts | 17 +++++ .../modal/components/InfoModal/overlay.svg | 1 + 12 files changed, 217 insertions(+), 17 deletions(-) create mode 100644 packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.module.less create mode 100644 packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.tsx create mode 100644 packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/PasteErrorModalBody/PasteErrorModalBody.module.less create mode 100644 packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/PasteErrorModalBody/PasteErrorModalBody.tsx create mode 100644 packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/PasteErrorModalBody/index.ts create mode 100644 packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/constants.ts create mode 100644 packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/index.ts create mode 100644 packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/overlay.svg diff --git a/example/src/App.tsx b/example/src/App.tsx index 5b6d6a612a..59090916b3 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -46,6 +46,10 @@ if (enablePolymerEditor) { const App = () => { const hiddenButtonsConfig = getHiddenButtonsConfig() + + /* should InfoModal be removed completely from client + and all error handling modals (not only for copy-cut-paste) controlled by library? */ + const [hasError, setHasError] = useState(false) const [errorMessage, setErrorMessage] = useState('') const [showPolymerEditor, setShowPolymerEditor] = useState(false) diff --git a/packages/ketcher-react/src/script/ui/action/index.js b/packages/ketcher-react/src/script/ui/action/index.js index 888ac15066..a6bb05dc4c 100644 --- a/packages/ketcher-react/src/script/ui/action/index.js +++ b/packages/ketcher-react/src/script/ui/action/index.js @@ -27,7 +27,7 @@ import zoom from './zoom' import help from './help' import functionalGroups from './functionalGroups' import fullscreen from './fullscreen' -import { removeStructAction } from '../state/shared' +import { removeStructAction, openInfoModal } from '../state/shared' export * from './action.types' @@ -89,8 +89,14 @@ const config = { cut: { shortcut: 'Mod+x', title: 'Cut', - action: (editor) => { - exec('cut') || dontClipMessage('Cut', editor.errorHandler) // eslint-disable-line no-unused-expressions + action: { + thunk: (dispatch, _) => { + const isCutSupported = exec('cut') + + if (!isCutSupported) { + dispatch(openInfoModal('Cut')) + } + } }, disabled: (editor) => !hasSelection(editor), hidden: (options) => isHidden(options, 'cut') @@ -102,8 +108,14 @@ const config = { copy: { shortcut: 'Mod+c', title: 'Copy', - action: (editor) => { - exec('copy') || dontClipMessage('Copy', editor.errorHandler) // eslint-disable-line no-unused-expressions + action: { + thunk: (dispatch, _) => { + const isCopySupported = exec('copy') + + if (!isCopySupported) { + dispatch(openInfoModal('Copy')) + } + } }, disabled: (editor) => !hasSelection(editor), hidden: (options) => isHidden(options, 'copy') @@ -138,8 +150,14 @@ const config = { paste: { shortcut: 'Mod+v', title: 'Paste', - action: (editor) => { - exec('paste') || dontClipMessage('Paste', editor.errorHandler) // eslint-disable-line no-unused-expressions + action: { + thunk: (dispatch, _) => { + const isPasteSupported = exec('paste') + + if (!isPasteSupported) { + dispatch(openInfoModal('Paste')) + } + } }, selected: ({ actions }) => actions && // TMP @@ -220,6 +238,11 @@ const config = { }, hidden: (options) => isHidden(options, 'any-atom') }, + 'info-modal': { + title: 'Error message', + action: { dialog: 'info-modal' }, + hidden: (options) => isHidden(options, 'info-modal') + }, ...server, ...debug, ...tools, @@ -240,13 +263,4 @@ function hasSelection(editor) { ) } -function dontClipMessage(title, errorHandler) { - errorHandler( - 'This action is unavailable via menu.\n' + // eslint-disable-line no-undef - 'Instead, use shortcut to ' + - title + - '.' - ) -} - export default config diff --git a/packages/ketcher-react/src/script/ui/dialog/index.ts b/packages/ketcher-react/src/script/ui/dialog/index.ts index f85b7caf58..15080938cf 100644 --- a/packages/ketcher-react/src/script/ui/dialog/index.ts +++ b/packages/ketcher-react/src/script/ui/dialog/index.ts @@ -42,6 +42,7 @@ import TemplateAttach from './template/template-attach' import TemplatesDialog from './template/TemplateDialog' import Text from '../views/modal/components/Text' import { Confirm } from '../views/modal/components/Confirm' +import InfoModal from '../views/modal/components/InfoModal' export default { open: Open, @@ -67,5 +68,6 @@ export default { settings: Settings, sgroup: SGroup, text: Text, - confirm: Confirm + confirm: Confirm, + 'info-modal': InfoModal } as any diff --git a/packages/ketcher-react/src/script/ui/state/shared.ts b/packages/ketcher-react/src/script/ui/state/shared.ts index e6e9bbd86d..5aefaaabb0 100644 --- a/packages/ketcher-react/src/script/ui/state/shared.ts +++ b/packages/ketcher-react/src/script/ui/state/shared.ts @@ -182,3 +182,13 @@ export function load(struct: Struct, options?) { } } } + +export function openInfoModal(command: 'Paste' | 'Copy' | 'Cut'): { + type: 'MODAL_OPEN' + data: { name: 'info-modal'; prop: { message: 'Paste' | 'Copy' | 'Cut' } } +} { + return { + type: 'MODAL_OPEN', + data: { name: 'info-modal', prop: { message: command } } + } +} diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.module.less new file mode 100644 index 0000000000..a2be470c45 --- /dev/null +++ b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.module.less @@ -0,0 +1,42 @@ +/**************************************************************************** + * Copyright 2021 EPAM Systems + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + ***************************************************************************/ + + +@import '../../../../../../style/variables.less'; + + .infoModal { + width: @width-settings; + } + + .ok { + min-width: 70px; + height: 24px; + border-radius: 4px; + font-size: 12px; + color: #fff; + background-color: #167782; + border: 1px solid transparent; + } + + .ok:hover, .ok:active { + background-color: #4fb3bf; + } + + .ok:disabled { + color: #333; + background-color: #e1e5ea; + } + \ No newline at end of file diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.tsx new file mode 100644 index 0000000000..2fb25df573 --- /dev/null +++ b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.tsx @@ -0,0 +1,63 @@ +/**************************************************************************** + * Copyright 2021 EPAM Systems + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + ***************************************************************************/ + +import { connect } from 'react-redux' +import config from 'src/script/ui/action' +import { error } from './constants' +import { Dialog } from '../../../components' +import { PasteErrorModalBody } from './PasteErrorModalBody' + +import styles from './InfoModal.module.less' + +function ErrorInfoModal(props) { + console.log('props in ErrorInfoModal', props) + + const paste = config.paste.title ?? 'Paste' + const isPasteError = props.message === paste + + const defaultMessage = `This action is unavailable via menu. Instead, use shortcut to ${props.message}.` + + const headerContent =
{error.message}
+ + return ( + + Close + + ]} + headerContent={headerContent} + > +
{isPasteError ? : defaultMessage}
+ + ) +} + +const mapStateToProps = (state) => ({ + errorMessage: state.options.app.errorMessage +}) + +const mapDispatchToProps = (dispatch) => ({ + onOk: (_result) => { + dispatch({ type: 'MODAL_CLOSE' }) + } +}) + +const InfoModal = connect(mapStateToProps, mapDispatchToProps)(ErrorInfoModal) + +export default InfoModal diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/PasteErrorModalBody/PasteErrorModalBody.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/PasteErrorModalBody/PasteErrorModalBody.module.less new file mode 100644 index 0000000000..a15d6d9a95 --- /dev/null +++ b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/PasteErrorModalBody/PasteErrorModalBody.module.less @@ -0,0 +1,20 @@ +.pasteErrorModalBody { + display: flex; + flex-direction: column; +} + +.shortcutsBlock { + display: flex; + justify-content: space-between; +} + +.shortcuts { + display: flex; + flex-direction: column; + margin-top: 12px; +} + +.shortcut { + font-size: 14px; + color: #167782; +} \ No newline at end of file diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/PasteErrorModalBody/PasteErrorModalBody.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/PasteErrorModalBody/PasteErrorModalBody.tsx new file mode 100644 index 0000000000..61aff573cd --- /dev/null +++ b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/PasteErrorModalBody/PasteErrorModalBody.tsx @@ -0,0 +1,17 @@ +import { pasteErrorText, shortcut } from '../constants' + +import styles from './PasteErrorModalBody.module.less' + +export const PasteErrorModalBody = (): JSX.Element => { + return ( +
+
{pasteErrorText}
+
+
+
{shortcut.hotKey}
+
{shortcut.label}
+
+
+
+ ) +} diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/PasteErrorModalBody/index.ts b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/PasteErrorModalBody/index.ts new file mode 100644 index 0000000000..1e2f22970b --- /dev/null +++ b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/PasteErrorModalBody/index.ts @@ -0,0 +1 @@ +export * from './PasteErrorModalBody' diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/constants.ts b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/constants.ts new file mode 100644 index 0000000000..76431be2b2 --- /dev/null +++ b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/constants.ts @@ -0,0 +1,9 @@ +export const pasteErrorText = + "Your browser doesn't allow pasting clipboard content via button. Please use shortcut instead." + +export const shortcut = { hotKey: 'CTRL/Cmd + V', label: 'for paste' } + +export const error = { + message: 'Error Message', + close: 'Close' +} diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/index.ts b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/index.ts new file mode 100644 index 0000000000..3363ec85f7 --- /dev/null +++ b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/index.ts @@ -0,0 +1,17 @@ +/**************************************************************************** + * Copyright 2021 EPAM Systems + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + ***************************************************************************/ + +export { default } from './InfoModal' diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/overlay.svg b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/overlay.svg new file mode 100644 index 0000000000..ad2b28424c --- /dev/null +++ b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/overlay.svg @@ -0,0 +1 @@ + \ No newline at end of file