#2790 Missing warning message when pasting copied structure via the "Paste" button

example/src/App.tsx

@@ -1,14 +1,13 @@
 import 'ketcher-react/dist/index.css';
 
-import { ButtonsConfig, Editor } from 'ketcher-react';
+import { useState } from 'react';
+import { ButtonsConfig, Editor, InfoModal } from 'ketcher-react';
 import {
   Ketcher,
   RemoteStructServiceProvider,
   StructServiceProvider,
 } from 'ketcher-core';
-import { ErrorModal } from './ErrorModal';
 import { PolymerToggler } from './PolymerToggler';
-import { useState } from 'react';
 
 const getHiddenButtonsConfig = (): ButtonsConfig => {
   const searchParams = new URLSearchParams(window.location.search);
@@ -78,7 +77,7 @@ const App = () => {
       />
       {enablePolymerEditor && <PolymerToggler toggle={setShowPolymerEditor} />}
       {hasError && (
-        <ErrorModal
+        <InfoModal
           message={errorMessage}
           close={() => {
             setHasError(false);

ketcher-autotests/tests/Structure-Creating-&-Editing/Actions-With-Structures/Paste-Action/paste-action.spec.ts

@@ -0,0 +1,23 @@
+import { test } from '@playwright/test';
+import {
+  openFileAndAddToCanvas,
+  takeEditorScreenshot,
+  selectAction,
+} from '@utils';
+import { TopPanelButton } from '@utils/selectors';
+
+test.describe('Paste Tool', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('');
+  });
+
+  test('InfoModal with hotkey display for Paste action', async ({ page }) => {
+    const anyStructure = 'mol_1855_to_open.mol';
+    await openFileAndAddToCanvas(anyStructure, page);
+    await page.keyboard.press('Control+a');
+    await selectAction(TopPanelButton.Copy, page);
+    await selectAction(TopPanelButton.Paste, page);
+    await page.getByTestId('infoModal-shortcut-for-paste').first().isVisible();
+    await takeEditorScreenshot(page);
+  });
+});

packages/ketcher-react/src/components/InfoModal/InfoModal.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.
+ ***************************************************************************/
+
+.infoModalOverlay {
+    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);
+  }
+
+  .infoModalOverlay .infoModalWindow {
+    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;
+  }
+
+  .infoModalWindow 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;
+  }
+
+  .infoModalBody {
+    font-size: 12px;
+    line-height: 14px;
+    overflow: auto;
+    height: 100%;
+    padding: 12px;
+  }
+
+  .infoModalBody::-webkit-scrollbar {
+    background-color: #eff2f5;
+    width: 6px;
+    height: 6px;
+  }
+
+  .infoModalBody::-webkit-scrollbar-thumb {
+    background-color:rgba(165,175,185,.85);
+    border-radius: 10px;
+    -webkit-border-radius: 10px;
+  }
+
+  .infoModalBody::-webkit-scrollbar-track {
+    background-color: transparent;
+    scrollbar-width: thin;
+  }
+
+  .infoModalBody::-webkit-scrollbar-thumb:active,
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #A5AFB9;
+  }
+
+  .infoModalWindow 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/InfoModal/InfoModal.tsx

@@ -13,32 +13,38 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  ***************************************************************************/
-import styles from './ErrorModal.module.css';
 
-interface ErrorModalProps {
+import { error } from './constants';
+
+import styles from './InfoModal.module.less';
+
+interface InfoModalProps {
   message: string;
   close: () => void;
 }
 
-const ErrorModal = ({ message, close }: ErrorModalProps): JSX.Element => {
+const InfoModal = ({ message, close }: InfoModalProps): JSX.Element => {
   return (
-    <div className={styles.modalOverlay}>
-      <div className={styles.modalWindow}>
-        <header>Error Message</header>
-        <div className={styles.modalBody}>{message}</div>
+    <div className={styles.infoModalOverlay}>
+      <div
+        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.infoModalBody} id="dialog-content">
+          {message}
+        </div>
         <footer>
-          <button
-            className={styles.ok}
-            onClick={() => {
-              close();
-            }}
-          >
-            Close
+          <button className={styles.ok} onClick={close}>
+            {error.close}
           </button>
         </footer>
       </div>
     </div>
   );
 };
 
-export { ErrorModal };
+export default InfoModal;

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

@@ -0,0 +1,4 @@
+export const error = {
+  message: 'Error Message',
+  close: 'Close',
+};

packages/ketcher-react/src/components/InfoModal/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 InfoModal from './InfoModal';
+
+export { InfoModal };

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

@@ -19,3 +19,4 @@ export * from './Buttons';
 export * from './StructRender';
 export * from './Input';
 export * from './Accordion';
+export * from './InfoModal';