#2790-rename-ErrorModal-to-InfoModal-and-change-modal-text

example/src/App.tsx

@@ -1,6 +1,6 @@
 import 'ketcher-react/dist/index.css'
 
-import { ButtonsConfig, Editor, ErrorModal } from 'ketcher-react'
+import { ButtonsConfig, Editor, InfoModal } from 'ketcher-react'
 import {
   Ketcher,
   RemoteStructServiceProvider,
@@ -77,7 +77,7 @@ const App = () => {
       />
       {enablePolymerEditor && <PolymerToggler toggle={setShowPolymerEditor} />}
       {hasError && (
-        <ErrorModal
+        <InfoModal
           message={errorMessage}
           close={() => {
             setHasError(false)

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  ***************************************************************************/
 
-.errorModalOverlay {
+.infoModalOverlay {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -27,7 +27,7 @@
     background: rgba(119, 119, 119, 0.2);
   }
 
-  .errorModalOverlay .errorModalWindow {
+  .infoModalOverlay .infoModalWindow {
     outline: 0;
     position: relative;
     vertical-align: middle;
@@ -46,7 +46,7 @@
       Arial, sans-serif;
   }
 
-  .errorModalWindow header {
+  .infoModalWindow header {
     display: flex;
     align-items: center;
     font-size: 14px;
@@ -57,37 +57,37 @@
     padding: 12px;
   }
 
-  .errorModalBody {
+  .infoModalBody {
     font-size: 12px;
     line-height: 14px;
     overflow: auto;
     height: 100%;
     padding: 12px;
   }
 
-  .errorModalBody::-webkit-scrollbar {
+  .infoModalBody::-webkit-scrollbar {
     background-color: #eff2f5;
     width: 6px;
     height: 6px;
   }
 
-  .errorModalBody::-webkit-scrollbar-thumb {
+  .infoModalBody::-webkit-scrollbar-thumb {
     background-color:rgba(165,175,185,.85);
     border-radius: 10px;
     -webkit-border-radius: 10px;
   }
 
-  .errorModalBody::-webkit-scrollbar-track {
+  .infoModalBody::-webkit-scrollbar-track {
     background-color: transparent;
     scrollbar-width: thin;
   }
 
-  .errorModalBody::-webkit-scrollbar-thumb:active,
+  .infoModalBody::-webkit-scrollbar-thumb:active,
   &::-webkit-scrollbar-thumb:hover {
     background-color: #A5AFB9;
   }
 
-  .errorModalWindow footer {
+  .infoModalWindow footer {
     display: flex;
     justify-content: flex-end;
     padding: 16px 12px 12px;

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

@@ -18,28 +18,28 @@ import { PasteErrorModalBody } from './PasteErrorModalBody'
 import config from 'src/script/ui/action'
 import { error } from './constants'
 
-import styles from './ErrorModal.module.less'
+import styles from './InfoModal.module.less'
 
-interface ErrorModalProps {
+interface InfoModalProps {
   message: string
   close: () => void
 }
 
-const ErrorModal = ({ message, close }: ErrorModalProps): JSX.Element => {
+const InfoModal = ({ message, close }: InfoModalProps): JSX.Element => {
   const paste = config.paste.title ?? 'Paste'
   const isPasteError = message?.includes(paste)
 
   return (
-    <div className={styles.errorModalOverlay}>
+    <div className={styles.infoModalOverlay}>
       <div
-        className={styles.errorModalWindow}
+        className={styles.infoModalWindow}
         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">
+        <div className={styles.infoModalBody} id="dialog-content">
           {isPasteError ? <PasteErrorModalBody /> : message}
         </div>
         <footer>
@@ -57,4 +57,4 @@ const ErrorModal = ({ message, close }: ErrorModalProps): JSX.Element => {
   )
 }
 
-export default ErrorModal
+export default InfoModal

packages/ketcher-react/src/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/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/components/ErrorModal/index.ts → packages/ketcher-react/src/components/InfoModal/index.ts

@@ -14,6 +14,6 @@
  * limitations under the License.
  ***************************************************************************/
 
-import ErrorModal from './ErrorModal'
+import InfoModal from './InfoModal'
 
-export { ErrorModal }
+export { InfoModal }

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

@@ -16,4 +16,4 @@
 
 export * from './Icon'
 export * from './Buttons'
-export * from './ErrorModal'
+export * from './InfoModal'