equinor · janhagevold · Jun 2, 2021 · May 25, 2021 · May 25, 2021 · May 25, 2021
@@ -1,12 +1,12 @@
 # build environment
-FROM node:14.16.0 as build
+FROM node:14.17.0 as build
 WORKDIR /app
 COPY . /app
 RUN yarn install
 RUN yarn build --mode=production
 
 # production environment
-FROM nginx:1.19.9-alpine
+FROM nginx:1.19.10-alpine
 ## add permissions for nginx user
 RUN apk add python3
 COPY --from=build /app/build /usr/share/nginx/html

@@ -1,2 +1,5 @@
 # Ignore root config and setup files
 /*.js
+
+# Ignore storybook build
+storybook-static/
@@ -22,6 +22,9 @@ junit.xml
 node_modules/
 jspm_packages/
 
+# Storybook
+storybook-static/
+
 # TypeScript v1 declaration files
 typings/
 

@@ -0,0 +1 @@
+_
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pre-commit
@@ -43,4 +43,8 @@ module.exports = {
     // Return the altered config
     return config;
   },
+  typescript: {
+      // https://github.com/storybookjs/storybook/issues/15067
+      reactDocgen: 'none'
+  }
 };
@@ -3,7 +3,10 @@ module.exports = {
     plugins: [
         //Lets us use React.lazy(() => {})
         '@babel/plugin-syntax-dynamic-import',
-        'react-hot-loader/babel'
+        'react-hot-loader/babel',
+        ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+        ["@babel/plugin-proposal-class-properties", { "loose": true }],
+        ["@babel/plugin-proposal-private-methods", { "loose": true }]
     ],
     env: {
         test: {

@@ -1,6 +1,7 @@
 const { defaults } = require('jest-config');
 
 module.exports = {
+    testEnvironment: "jsdom",
     preset: 'ts-jest/presets/js-with-ts',
     verbose: true,
     globals: {

@@ -17,100 +17,96 @@
         "test-watch": "jest --watch",
         "lint": "./node_modules/.bin/eslint",
         "lint-all": "./node_modules/.bin/eslint --ext .js,.jsx,.ts,.tsx src/",
+        "prepare": "husky install",
+        "pre-commit": "lint-staged",
         "storybook": "start-storybook -p 6006",
         "build-storybook": "build-storybook"
     },
-    "husky": {
-        "hooks": {
-            "pre-commit": "lint-staged"
-        }
-    },
     "lint-staged": {
         "*.{ts,tsx,js,jsx}": "yarn lint"
     },
     "devDependencies": {
-        "@babel/cli": "^7.13.14",
-        "@babel/core": "^7.13.8",
+        "@babel/cli": "^7.14.3",
+        "@babel/core": "^7.14.3",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-transform-runtime": "^7.13.9",
-        "@babel/preset-env": "^7.14.1",
-        "@babel/preset-react": "^7.12.13",
+        "@babel/plugin-transform-runtime": "^7.14.3",
+        "@babel/preset-env": "^7.14.4",
+        "@babel/preset-react": "^7.13.13",
         "@babel/preset-typescript": "^7.13.0",
         "@hot-loader/react-dom": "^17.0.0",
-        "@storybook/addon-actions": "^6.3.0-alpha.19",
-        "@storybook/addon-essentials": "^6.3.0-alpha.19",
-        "@storybook/addon-links": "^6.3.0-alpha.19",
-        "@storybook/react": "^6.3.0-alpha.19",
-        "@testing-library/jest-dom": "^5.11.8",
-        "@testing-library/react": "^11.2.5",
-        "@types/jest": "^26.0.22",
+        "@storybook/addon-actions": "^6.3.0-beta.5",
+        "@storybook/addon-essentials": "^6.3.0-beta.5",
+        "@storybook/addon-links": "^6.3.0-beta.5",
+        "@storybook/react": "^6.3.0-beta.5",
+        "@testing-library/jest-dom": "^5.12.0",
+        "@testing-library/react": "^11.2.7",
+        "@types/jest": "^26.0.23",
         "@types/material-ui": "^0.21.8",
         "@types/qs": "^6.9.4",
-        "@types/react": "^17.0.2",
-        "@types/react-dom": "^17.0.1",
-        "@types/react-helmet": "^6.1.0",
+        "@types/react": "^17.0.8",
+        "@types/react-dom": "^17.0.5",
+        "@types/react-helmet": "^6.1.1",
+        "@types/react-highlight-words": "^0.16.2",
         "@types/react-router-dom": "^5.1.7",
-        "@types/styled-components": "^5.1.3",
-        "@typescript-eslint/eslint-plugin": "^4.16.1",
-        "@typescript-eslint/parser": "^4.16.1",
-        "babel-jest": "^26.6.3",
+        "@types/react-table": "^7.7.1",
+        "@types/react-virtualized-auto-sizer": "^1.0.0",
+        "@types/react-window": "^1.8.3",
+        "@types/styled-components": "^5.1.9",
+        "@typescript-eslint/eslint-plugin": "^4.26.0",
+        "@typescript-eslint/parser": "^4.26.0",
+        "babel-jest": "^27.0.2",
         "babel-loader": "^8.1.0",
         "clean-webpack-plugin": "^3.0.0",
-        "css-loader": "^5.1.1",
-        "eslint": "^7.21.0",
-        "eslint-config-prettier": "^8.2.0",
-        "eslint-plugin-prettier": "^3.3.1",
-        "eslint-plugin-react": "^7.23.2",
+        "css-loader": "^5.2.6",
+        "eslint": "^7.27.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-prettier": "^3.4.0",
+        "eslint-plugin-react": "^7.24.0",
         "file-loader": "^6.1.0",
         "html-webpack-plugin": "^5.2.0",
-        "husky": "^4.2.5",
-        "jest": "^26.4.2",
-        "jest-junit": "^12.0.0",
-        "lint-staged": "^10.5.4",
-        "node-sass": "^5.0.0",
-        "prettier": "^2.1.1",
+        "husky": "^6.0.0",
+        "jest": "^27.0.3",
+        "jest-junit": "^12.1.0",
+        "lint-staged": "^11.0.0",
+        "node-sass": "^6.0.0",
+        "prettier": "^2.3.0",
         "react-hot-loader": "^4.13.0",
         "sass-extract": "^2.1.0",
-        "sass-loader": "11.0.1",
-        "source-map-loader": "^2.0.1",
-        "storybook-addon-jsx": "^7.3.10-canary.147.898.0",
+        "sass-loader": "11.1.1",
+        "source-map-loader": "^3.0.0",
+        "storybook-addon-jsx": "^7.3.10",
         "style-loader": "^2.0.0",
-        "ts-jest": "^26.5.2",
-        "ts-loader": "^8.0.17",
-        "typescript": "^4.2.2",
-        "webpack": "^5.24.2",
-        "webpack-cli": "^4.6.0",
+        "ts-jest": "^27.0.2",
+        "ts-loader": "^9.2.2",
+        "typescript": "^4.3.2",
+        "webpack": "^5.38.1",
+        "webpack-cli": "^4.7.0",
         "webpack-dev-server": "^3.11.2"
     },
     "dependencies": {
-        "@date-io/date-fns": "^2.10.8",
-        "@equinor/eds-core-react": "0.8.3",
+        "@equinor/eds-core-react": "0.12.1",
         "@equinor/eds-icons": "^0.6.0",
-        "@equinor/eds-tokens": "^0.5.7",
-        "@material-ui/core": "^4.11.3",
+        "@equinor/eds-tokens": "^0.6.0",
+        "@material-ui/core": "^4.11.4",
         "@material-ui/icons": "^4.5.1",
-        "@microsoft/applicationinsights-react-js": "^3.0.3",
-        "@microsoft/applicationinsights-web": "^2.5.11",
+        "@microsoft/applicationinsights-react-js": "^3.1.2",
+        "@microsoft/applicationinsights-web": "^2.6.2",
         "@storybook/addon-info": "^6.0.0-alpha.2",
-        "@storybook/builder-webpack5": "^6.3.0-alpha.19",
-        "@types/react-highlight-words": "^0.16.2",
-        "@types/react-table": "^7.0.28",
-        "@types/react-virtualized-auto-sizer": "^1.0.0",
-        "@types/react-window": "^1.8.2",
+        "@storybook/builder-webpack5": "^6.3.0-beta.5",
+        "@storybook/manager-webpack5": "^6.3.0-beta.5",
         "axios": "0.21.1",
-        "date-fns": "^2.19.0",
-        "msal": "^1.4.6",
+        "date-fns": "^2.22.1",
+        "msal": "^1.4.11",
         "qs": "^6.10.1",
         "query-string": "^7.0.0",
-        "react": "^17.0.1",
-        "react-dom": "^17.0.1",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "react-helmet": "^6.1.0",
         "react-highlight-words": "^0.17.0",
         "react-router-dom": "^5.1.2",
         "react-table": "^7.7.0",
         "react-virtualized-auto-sizer": "^1.0.4",
         "react-window": "^1.8.6",
-        "storybook-addon-material-ui": "^0.9.0-alpha.24",
-        "styled-components": "^5.2.0"
+        "styled-components": "^5.3.0"
     }
 }
@@ -1,10 +1,9 @@
-import React from 'react';
-import { Button, Typography, Accordion } from '@equinor/eds-core-react';
-import { SelectedScopeContainer, AccordionContent, TextContainer } from './SelectedScope.style';
+import { Accordion, Button, Typography } from '@equinor/eds-core-react';
+import { AccordionContent, SelectedScopeContainer, TextContainer } from './SelectedScope.style';
 import { CommPkgRow, McPkgRow } from '@procosys/modules/InvitationForPunchOut/types';
-import EdsIcon from '@procosys/components/EdsIcon';
 
-const {AccordionItem, AccordionHeader, AccordionPanel} = Accordion;
+import EdsIcon from '@procosys/components/EdsIcon';
+import React from 'react';
 
 const multipleDisciplinesWarning = <div><EdsIcon name='warning_outlined' size={16}/><Typography>Scope contains multiple disciplines</Typography></div>;
 
@@ -35,14 +34,14 @@ const SelectedScope = ({
 
     const createSectionForCommPkg = (commPkg: CommPkgRow): JSX.Element => {
         return (
-            <AccordionItem key={commPkg.commPkgNo}>
-                <AccordionHeader>
+            <Accordion.Item key={commPkg.commPkgNo}>
+                <Accordion.Header>
                     {commPkg.commPkgNo}
                     <Button  variant="ghost_icon" onClick={(): void => removeCommPkg(commPkg.commPkgNo)}>
                         <EdsIcon name="delete_to_trash"></EdsIcon>
                     </Button>
-                </AccordionHeader>
-                <AccordionPanel>
+                </Accordion.Header>
+                <Accordion.Panel>
                     <AccordionContent>
                         <div>
                             <Typography variant='caption'>
@@ -61,21 +60,21 @@ const SelectedScope = ({
                             </Typography>
                         </div>
                     </AccordionContent>
-                </AccordionPanel>
-            </AccordionItem >
+                </Accordion.Panel>
+            </Accordion.Item >
         );
     };
 
     const createSectionForMcPkg = (mcPkg: McPkgRow): JSX.Element => {
         return (
-            <AccordionItem key={mcPkg.mcPkgNo}>
-                <AccordionHeader>
+            <Accordion.Item key={mcPkg.mcPkgNo}>
+                <Accordion.Header>
                     {mcPkg.mcPkgNo}
                     <Button  variant="ghost_icon" onClick={(): void => removeMcPkg(mcPkg.mcPkgNo)}>
                         <EdsIcon name="delete_to_trash"></EdsIcon>
                     </Button>
-                </AccordionHeader>
-                <AccordionPanel>
+                </Accordion.Header>
+                <Accordion.Panel>
                     <AccordionContent>
                         <div>
                             <Typography variant='caption'>
@@ -102,8 +101,8 @@ const SelectedScope = ({
                             </Typography>
                         </div>
                     </AccordionContent>
-                </AccordionPanel>
-            </AccordionItem >
+                </Accordion.Panel>
+            </Accordion.Item >
         );
     };
 

@@ -1,18 +1,18 @@
+import { Button, Typography } from '@equinor/eds-core-react';
 import { Container, ContentContainer, DropdownItem, FilterContainer, Header, HeaderContainer, IconBar, LeftPartOfHeader, StyledButton, TooltipText } from './index.style';
 import { IPOFilter, IPOs, SavedIPOFilter } from './types';
 import React, { useEffect, useReducer, useRef, useState } from 'react';
-import { Link } from 'react-router-dom';
 
 import { Canceler } from 'axios';
 import Dropdown from '@procosys/components/Dropdown';
 import EdsIcon from '@procosys/components/EdsIcon';
 import InvitationsFilter from './Filter';
 import InvitationsTable from './Table';
+import { Link } from 'react-router-dom';
 import { ProjectDetails } from '@procosys/modules/InvitationForPunchOut/types';
 import { SelectItem } from '@procosys/components/Select';
 import Spinner from '@procosys/components/Spinner';
 import { Tooltip } from '@equinor/eds-core-react';
-import { Typography, Button } from '@equinor/eds-core-react';
 import { showSnackbarNotification } from '@procosys/core/services/NotificationService';
 import { useInvitationForPunchOutContext } from '../../context/InvitationForPunchOutContext';
 

@@ -1,9 +1,9 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import { ThemeProvider } from 'styled-components';
+import { act, fireEvent, render } from '@testing-library/react';
 
 import CustomPopover from '../index';
 import { OutlookResponseType } from '../../../../enums';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
 import theme from '../../../../../../../../assets/theme';
 
 const renderWithTheme = (Component) => {
@@ -60,31 +60,25 @@ const participants = [
 ];
 
 describe('<CustomPopover />', () => {
-    it('Should open the popover on click', () => {
-        const { getByRole, getAllByRole } = renderWithTheme(<CustomPopover 
+    it('Should open the popover on click', async () => {
+        const { getByTestId, getAllByRole } = await renderWithTheme(<CustomPopover 
             participant = { participants[0] }
         />);
-        const button = getByRole('button');
-        fireEvent.click(button);
+        await act(async () => {
+            const button = getByTestId('popover-anchor-ref');
+            fireEvent.click(button);
+        });
         const buttons = getAllByRole('button');
         expect(buttons).toHaveLength(2);
     });
-    it('Should close the popover on click', () => {
-        const { getByRole, getAllByRole } = renderWithTheme(<CustomPopover 
+    it('Should render every person and the correct responses for the correct people', async () => {
+        const { getByTestId } = renderWithTheme(<CustomPopover 
             participant = { participants[0] }
         />);
-        const button = getByRole('button');
-        fireEvent.click(button);
-        fireEvent.click(button);
-        const buttons = getAllByRole('button');
-        expect(buttons).toHaveLength(1);
-    });
-    it('Should render every person and the correct responses for the correct people', () => {
-        const { getByTestId, getByRole } = renderWithTheme(<CustomPopover 
-            participant = { participants[0] }
-        />);
-        const button = getByRole('button');
-        fireEvent.click(button);
+        await act(async () => {
+            const button = getByTestId('popover-anchor-ref');
+            fireEvent.click(button);
+        });
         participants[0].functionalRole.persons.forEach((person) => {
             const response = getByTestId(person.person.id.toString() + 'row', { exact: false });
             expect(response).toHaveTextContent(person.person.firstName);