#2790-remove-copy-cut-paste-Modal-from-client-to-ketcher-react

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)

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

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

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 } }
+  }
+}

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;
+  }
+

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 = <div>{error.message}</div>
+
+  return (
+    <Dialog
+      className={styles.infoModal}
+      params={props}
+      buttons={[
+        <button onClick={props.onOk} className={styles.ok} key="ok">
+          Close
+        </button>
+      ]}
+      headerContent={headerContent}
+    >
+      <div>{isPasteError ? <PasteErrorModalBody /> : defaultMessage}</div>
+    </Dialog>
+  )
+}
+
+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

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;
+}

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 (
+    <div className={styles.pasteErrorModalBody}>
+      <div>{pasteErrorText}</div>
+      <div className={styles.shortcutsBlock}>
+        <div className={styles.shortcuts}>
+          <div className={styles.shortcut}>{shortcut.hotKey}</div>
+          <div>{shortcut.label}</div>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/PasteErrorModalBody/index.ts

@@ -0,0 +1 @@
+export * from './PasteErrorModalBody'

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

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'