#1240 Create Open file modal window (#1244)

* add modal slice

* create open modal component

* refactoring

* add tests

* fix comments

* fix comments

* fix comments

* update dependencies

packages/ketcher-polymer-editor-react/package.json

@@ -71,6 +71,7 @@
     "@rollup/plugin-replace": "^2.3.4",
     "@rollup/plugin-strip": "^2.0.0",
     "@svgr/rollup": "^5.4.0",
+    "@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",

packages/ketcher-polymer-editor-react/src/Editor.tsx

@@ -32,8 +32,8 @@ 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 { openModal } from 'state/modal'
 import {
@@ -98,16 +98,18 @@ 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.Submenu>
           <Menu.Item itemId="open" />

packages/ketcher-polymer-editor-react/src/__snapshots__/Editor.test.tsx.snap

@@ -324,7 +324,7 @@ Object {
                     </div>
                   </div>
                   <button
-                    class="MuiButtonBase-root Mui-disabled css-pck0ik-MuiButtonBase-root"
+                    class="MuiButtonBase-root Mui-disabled css-1u2dyik-MuiButtonBase-root"
                     disabled=""
                     role="button"
                     tabindex="-1"
@@ -778,7 +778,7 @@ Object {
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root Mui-disabled css-pck0ik-MuiButtonBase-root"
+                  class="MuiButtonBase-root Mui-disabled css-1u2dyik-MuiButtonBase-root"
                   disabled=""
                   role="button"
                   tabindex="-1"

packages/ketcher-polymer-editor-react/src/components/menu/Menu.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  ***************************************************************************/
 import styled from '@emotion/styled'
-import React, { useState } from 'react'
+import React from 'react'
 import { MenuItem } from './menuItem'
 import { SubMenu } from './subMenu'
 import { IMenuContext, MenuContext } from '../../contexts'
@@ -79,17 +79,14 @@ const Menu = ({
   onItemClick,
   activeMenuItem
 }: React.PropsWithChildren<MenuProps>) => {
-  const [activeItem, setActiveItem] = useState(activeMenuItem)
-
   const context = React.useMemo<IMenuContext>(
     () => ({
-      isActive: (itemKey) => activeItem === itemKey,
+      isActive: (itemKey) => activeMenuItem === itemKey,
       activate: (itemKey) => {
-        setActiveItem(itemKey)
         onItemClick(itemKey)
       }
     }),
-    [activeItem, onItemClick]
+    [activeMenuItem, onItemClick]
   )
 
   const subComponents = React.Children.map(

packages/ketcher-polymer-editor-react/src/components/modal/Open/AnalyzingFile/AnalyzingFile.test.tsx

@@ -0,0 +1,32 @@
+/****************************************************************************
+ * 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 { AnalyzingFile } from './AnalyzingFile'
+import { render, screen } from 'test-utils'
+
+const mockFileName = 'MockFileName'
+
+describe('AnalyzingFile component', () => {
+  it('should render correctly', () => {
+    expect(render(<AnalyzingFile />)).toMatchSnapshot()
+  })
+
+  it('should render correctly with passed filename prop', () => {
+    render(<AnalyzingFile fileName={mockFileName} />)
+
+    expect(screen.getByText(mockFileName)).toBeInTheDocument()
+    expect(screen.getByRole('img')).toBeInTheDocument()
+  })
+})

packages/ketcher-polymer-editor-react/src/components/modal/Open/AnalyzingFile/AnalyzingFile.tsx

@@ -0,0 +1,64 @@
+/****************************************************************************
+ * 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 { Icon } from 'components/shared/icon'
+import { LoadingCircles } from './LoadingCircles'
+import styled from '@emotion/styled'
+
+export type AnalyzingFileProps = {
+  fileName?: string
+}
+
+const ICON_NAME = 'file-thumbnail'
+
+const RootContainer = styled.div`
+  width: 410px;
+  min-height: 23em;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
+
+const FileBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  svg {
+    margin-right: 13px;
+  }
+
+  p {
+    color: #585858;
+    font-size: 16px;
+    line-height: 19px;
+  }
+`
+
+export const AnalyzingFile = ({ fileName }: AnalyzingFileProps) => {
+  return (
+    <RootContainer>
+      {fileName && (
+        <FileBox>
+          <Icon name={ICON_NAME} />
+          <p>{fileName}</p>
+        </FileBox>
+      )}
+      <LoadingCircles />
+    </RootContainer>
+  )
+}

packages/ketcher-polymer-editor-react/src/components/modal/Open/AnalyzingFile/LoadingCircles/LoadingCircles.test.tsx

@@ -0,0 +1,23 @@
+/****************************************************************************
+ * 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 { LoadingCircles } from './LoadingCircles'
+import { render } from 'test-utils'
+
+describe('LoadingCircles component', () => {
+  it('should render correctly', () => {
+    expect(render(<LoadingCircles />)).toMatchSnapshot()
+  })
+})

packages/ketcher-polymer-editor-react/src/components/modal/Open/AnalyzingFile/LoadingCircles/LoadingCircles.tsx

@@ -0,0 +1,72 @@
+/****************************************************************************
+ * 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 styled from '@emotion/styled'
+
+const LoadContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 40px;
+  height: 12px;
+  margin-top: 10px;
+
+  & span {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border: 2px solid ${({ theme }) => theme.ketcher.color.spinner};
+    border-radius: 100%;
+    box-sizing: border-box;
+
+    &:nth-of-type(1) {
+      animation: bounce 1s ease-in-out infinite;
+    }
+
+    &:nth-of-type(2) {
+      animation: bounce 1s ease-in-out 0.33s infinite;
+    }
+
+    &:nth-of-type(3) {
+      animation: bounce 1s ease-in-out 0.66s infinite;
+    }
+  }
+
+  @keyframes bounce {
+    0%,
+    75%,
+    100% {
+      -webkit-transform: translateY(0);
+      -ms-transform: translateY(0);
+      -o-transform: translateY(0);
+      transform: translateY(0);
+    }
+
+    25% {
+      -webkit-transform: translateY(-100%);
+      -ms-transform: translateY(-100%);
+      -o-transform: translateY(-100%);
+      transform: translateY(-100%);
+    }
+  }
+`
+export const LoadingCircles = () => (
+  <LoadContainer>
+    <span />
+    <span />
+    <span />
+  </LoadContainer>
+)

packages/ketcher-polymer-editor-react/src/components/modal/Open/AnalyzingFile/LoadingCircles/__snapshots__/LoadingCircles.test.tsx.snap

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoadingCircles component should render correctly 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="css-rmxyg7"
+      >
+        <span />
+        <span />
+        <span />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="css-rmxyg7"
+    >
+      <span />
+      <span />
+      <span />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

packages/ketcher-polymer-editor-react/src/components/modal/Open/AnalyzingFile/LoadingCircles/index.ts

@@ -0,0 +1,16 @@
+/****************************************************************************
+ * 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 * from './LoadingCircles'