#2790-move-ErrorModal-to-ketcher-react

example/src/App.tsx

@@ -1,12 +1,11 @@
 import 'ketcher-react/dist/index.css'
 
-import { ButtonsConfig, Editor } from 'ketcher-react'
+import { ButtonsConfig, Editor, ErrorModal } from 'ketcher-react'
 import {
   Ketcher,
   RemoteStructServiceProvider,
   StructServiceProvider
 } from 'ketcher-core'
-import { ErrorModal } from './ErrorModal'
 import { PolymerToggler } from './PolymerToggler'
 import { useState } from 'react'
 

packages/ketcher-react/src/components/ErrorModal/ErrorModal.module.less

@@ -0,0 +1,119 @@
+/****************************************************************************
+ * 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.
+ ***************************************************************************/
+
+.errorModalOverlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 40;
+    background: rgba(119, 119, 119, 0.2);
+  }
+
+  .errorModalOverlay .errorModalWindow {
+    outline: 0;
+    position: relative;
+    vertical-align: middle;
+    display: flex;
+    flex-direction: column;
+    width: 360px;
+    max-height: 300px;
+    text-align: left;
+    background-color: #fff;
+    border-radius: 8px;
+    background-clip: padding-box;
+    opacity: 1;
+    transform: scale(1);
+    transition: transform 0.3s, opacity 0.3s;
+    font-family: Inter, FreeSans, Arimo, 'Droid Sans', Helvetica, 'Helvetica Neue',
+      Arial, sans-serif;
+  }
+
+  .errorModalWindow header {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    line-height: 14px;
+    border-radius: 6px 6px 0 0;
+    color: #333;
+    font-weight: 500;
+    padding: 12px;
+  }
+
+  .errorModalBody {
+    font-size: 12px;
+    line-height: 14px;
+    overflow: auto;
+    height: 100%;
+    padding: 12px;
+  }
+
+  .errorModalBody::-webkit-scrollbar {
+    background-color: #eff2f5;
+    width: 6px;
+    height: 6px;
+  }
+
+  .errorModalBody::-webkit-scrollbar-thumb {
+    background-color:rgba(165,175,185,.85);
+    border-radius: 10px;
+    -webkit-border-radius: 10px;
+  }
+
+  .errorModalBody::-webkit-scrollbar-track {
+    background-color: transparent;
+    scrollbar-width: thin;
+  }
+
+  .errorModalBody::-webkit-scrollbar-thumb:active,
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #A5AFB9;
+  }
+
+  .errorModalWindow footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 16px 12px 12px;
+    gap: 8px;
+  }
+
+  .modalHidden {
+    display: none;
+  }
+
+  .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;
+  }
+

example/src/ErrorModal/ErrorModal.tsx → packages/ketcher-react/src/components/ErrorModal/ErrorModal.tsx

@@ -13,32 +13,48 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  ***************************************************************************/
-import styles from './ErrorModal.module.css'
+
+import { PasteErrorModalBody } from './PasteErrorModalBody'
+import config from 'src/script/ui/action'
+import { error } from './constants'
+
+import styles from './ErrorModal.module.less'
 
 interface ErrorModalProps {
   message: string
   close: () => void
 }
 
 const ErrorModal = ({ message, close }: ErrorModalProps): JSX.Element => {
+  const paste = config.paste.title ?? 'Paste'
+  const isPasteError = message?.includes(paste)
+
   return (
-    <div className={styles.modalOverlay}>
-      <div className={styles.modalWindow}>
-        <header>Error Message</header>
-        <div className={styles.modalBody}>{message}</div>
+    <div className={styles.errorModalOverlay}>
+      <div
+        className={styles.errorModalWindow}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="dialog-label"
+        aria-describedby="dialog-content"
+      >
+        <header id="dialog-label">{error.message}</header>
+        <div className={styles.errorModalBody} id="dialog-content">
+          {isPasteError ? <PasteErrorModalBody /> : message}
+        </div>
         <footer>
           <button
             className={styles.ok}
             onClick={() => {
               close()
             }}
           >
-            Close
+            {error.close}
           </button>
         </footer>
       </div>
     </div>
   )
 }
 
-export { ErrorModal }
+export default ErrorModal

packages/ketcher-react/src/components/ErrorModal/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/components/ErrorModal/PasteErrorModalBody/PasteErrorModalBody.tsx

@@ -0,0 +1,21 @@
+import { pasteErrorText, shortcuts } 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}>
+        {shortcuts.map(({ hotKey, label }) => {
+          return (
+            <div className={styles.shortcuts} key={hotKey}>
+              <div className={styles.shortcut}>{hotKey}</div>
+              <div>{label}</div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

packages/ketcher-react/src/components/ErrorModal/PasteErrorModalBody/index.ts

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

packages/ketcher-react/src/components/ErrorModal/constants.ts

@@ -0,0 +1,13 @@
+export const pasteErrorText =
+  'This action is unavailable via menu. Please use shortcuts instead:'
+
+export const shortcuts = [
+  { hotKey: 'CTRL/Cmd + C', label: 'for paste' },
+  { hotKey: 'CTRL/Cmd + X', label: 'for cut' },
+  { hotKey: 'CTRL/Cmd + V', label: 'for paste' }
+]
+
+export const error = {
+  message: 'Error Message',
+  close: 'Close'
+}

packages/ketcher-react/src/components/ErrorModal/index.ts

@@ -0,0 +1,19 @@
+/****************************************************************************
+ * 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 ErrorModal from './ErrorModal'
+
+export { ErrorModal }