Merge branch 'master' of github.com:epam/ketcher into #1241-ketcher-r…

…eact-not-working-out-of-the-box-with-create-react-app
epam · Feb 21, 2022 · f8e2ddd · f8e2ddd
2 parents f0e3deb + d1a5b90
commit f8e2ddd
Show file tree

Hide file tree

Showing 96 changed files with 4,240 additions and 373 deletions.
diff --git a/example/package.json b/example/package.json
@@ -33,6 +33,7 @@
     "ketcher-polymer-editor-react": "workspace:*",
     "ketcher-react": "workspace:*",
     "ketcher-standalone": "workspace:*",
+    "normalize.css": "^8.0.1",
     "react": "^17.0.2",
     "react-app-polyfill": "^2.0.0",
     "react-dom": "^17.0.2"

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -57,6 +57,12 @@ const App = () => {
         structServiceProvider={structServiceProvider}
         onInit={(ketcher: Ketcher) => {
           ;(global as any).ketcher = ketcher
+          window.parent.postMessage(
+            {
+              eventType: 'init'
+            },
+            '*'
+          )
         }}
       />
       {polymerEditor && <PolymerToggler toggle={setShowPolymerEditor} />}

diff --git a/example/src/index.css b/example/src/index.css
@@ -1,3 +1,5 @@
+@import 'normalize.css';
+
 body {
   margin: 0;
   padding: 0;

diff --git a/example/src/typing.d.ts b/example/src/typing.d.ts
@@ -0,0 +1,13 @@
+declare global {
+  export interface IMessage {
+    eventType: string
+    data?: any
+  }
+  export interface Window {
+    postMessage(
+      message: IMessage,
+      targetOrigin: string,
+      transfer?: Transferable[] | undefined
+    ): void
+  }
+}
diff --git a/packages/ketcher-polymer-editor-react/jest.config.js b/packages/ketcher-polymer-editor-react/jest.config.js
@@ -14,7 +14,8 @@ module.exports = {
     '^theming(.*)$': '<rootDir>/src/theming/$1',
     '^hooks(.*)$': '<rootDir>/src/hooks/$1',
     '^assets(.*)$': '<rootDir>/src/assets/$1',
-    '^test-utils(.*)$': '<rootDir>/src/test-utils/$1'
+    '^test-utils(.*)$': '<rootDir>/src/test-utils/$1',
+    '^helpers(.*)$': '<rootDir>/src/helpers/$1'
   },
   setupFilesAfterEnv: ['<rootDir>/src/testsSetup.ts']
 }
diff --git a/packages/ketcher-polymer-editor-react/package.json b/packages/ketcher-polymer-editor-react/package.json
@@ -51,6 +51,7 @@
     "@mui/material": "^5.2.4",
     "@reduxjs/toolkit": "^1.7.1",
     "clsx": "^1.1.1",
+    "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
     "react-redux": "^7.2.1",
     "redux": "^4.0.5",
@@ -70,9 +71,10 @@
     "@rollup/plugin-replace": "^2.3.4",
     "@rollup/plugin-strip": "^2.0.0",
     "@svgr/rollup": "^5.4.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
+    "@testing-library/dom": "^8.11.3",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.0.3",
     "@types/lodash": "^4.14.178",
     "@types/node": "^16.11.12",

diff --git a/packages/ketcher-polymer-editor-react/src/Editor.tsx b/packages/ketcher-polymer-editor-react/src/Editor.tsx
@@ -15,7 +15,7 @@
  ***************************************************************************/
 
 import { Provider } from 'react-redux'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef } from 'react'
 import { Global, ThemeProvider } from '@emotion/react'
 import { createTheme } from '@mui/material/styles'
 import { merge } from 'lodash'
@@ -32,11 +32,14 @@ import { Layout } from 'components/Layout'
 import { MonomerLibrary } from 'components/monomerLibrary'
 import { NotationInput } from 'components/notationInput'
 import { Menu } from 'components/menu'
-import { selectTool } from 'state/common'
-import { useAppDispatch } from 'hooks'
+import { selectEditorActiveTool, selectTool } from 'state/common'
+import { useAppDispatch, useAppSelector } from 'hooks'
 import { Logo } from 'components/Logo'
-import { ActionButton } from 'components/shared/actionButton'
-import { DummyDialog } from 'components/dummyDialog/DummyDialog'
+import { openModal } from 'state/modal'
+import {
+  modalComponentList,
+  ModalContainer
+} from 'components/modal/modalContainer'
 
 const muiTheme = createTheme(muiOverrides)
 
@@ -58,18 +61,16 @@ function Editor({ onInit, theme }: EditorProps) {
 
   const mergedTheme: MergedThemeType = merge(muiTheme, { ketcher: editorTheme })
 
-  const [isModalOpen, setIsModalOpen] = useState(false)
-
   useEffect(() => {
     onInit?.()
   }, [onInit])
 
   return (
     <Provider store={store}>
       <ThemeProvider theme={mergedTheme}>
-        <div ref={rootElRef} className="Ketcher-polymer-editor-root">
-          <Global styles={getGlobalStyles} />
+        <Global styles={getGlobalStyles} />
 
+        <div ref={rootElRef} className="Ketcher-polymer-editor-root">
           <Layout>
             <Layout.Left>
               <MenuComponent />
@@ -88,18 +89,7 @@ function Editor({ onInit, theme }: EditorProps) {
 
           <Logo />
 
-          <div style={{ position: 'absolute', bottom: 5, right: 0 }}>
-            <ActionButton
-              label="Show dummy modal dialog"
-              clickHandler={() => {
-                setIsModalOpen(true)
-              }}
-            />
-            <DummyDialog
-              isModalOpen={isModalOpen}
-              setIsModalOpen={setIsModalOpen}
-            />
-          </div>
+          <ModalContainer />
         </div>
       </ThemeProvider>
     </Provider>
@@ -108,15 +98,23 @@ function Editor({ onInit, theme }: EditorProps) {
 
 function MenuComponent() {
   const dispatch = useAppDispatch()
+  const activeTool = useAppSelector(selectEditorActiveTool)
 
   const menuItemChanged = (name) => {
-    dispatch(selectTool(name))
+    if (modalComponentList[name]) {
+      dispatch(openModal(name))
+    } else {
+      dispatch(selectTool(name))
+    }
   }
 
   return (
-    <Menu onItemClick={menuItemChanged}>
+    <Menu onItemClick={menuItemChanged} activeMenuItem={activeTool}>
       <Menu.Group>
-        <Menu.Item itemId="open" />
+        <Menu.Submenu>
+          <Menu.Item itemId="open" />
+          <Menu.Item itemId="save" />
+        </Menu.Submenu>
       </Menu.Group>
       <Menu.Group>
         <Menu.Item itemId="undo" />