diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index c5b1a52f21..2c7a8d83db 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -16,6 +16,7 @@ env: KETCHER_URL: http://host.docker.internal:4002 DOCKER: true IGNORE_UNSTABLE_TESTS: true + CI_ENVIRONMENT: true jobs: playwright_tests: timeout-minutes: 60 @@ -30,7 +31,7 @@ jobs: - name: Install dependencies run: npm ci - name: Build all packages - run: npm run build + run: npm run build:packages && npm run build:example:standalone - name: Run example in standalone mode run: cd example/ && nohup npm run serve:standalone & - name: Create env file @@ -40,6 +41,7 @@ jobs: echo "KETCHER_URL=$KETCHER_URL" >> .env echo "MODE=$MODE" >> .env echo "IGNORE_UNSTABLE_TESTS=$IGNORE_UNSTABLE_TESTS" >> .env + echo "CI_ENVIRONMENT=$CI_ENVIRONMENT" >> .env - name: Build autotests for docker run: cd ketcher-autotests && npm run docker:build - name: Run playwright tests in docker diff --git a/demo/src/components/FileInputForm.tsx b/demo/src/components/FileInputForm.tsx index 39055340b9..e9925ab397 100644 --- a/demo/src/components/FileInputForm.tsx +++ b/demo/src/components/FileInputForm.tsx @@ -1,8 +1,8 @@ -import { useState } from 'react' -import styled from '@emotion/styled' +import { useState } from 'react'; +import styled from '@emotion/styled'; -import { PanelButton } from './shared/Buttons' -import { Button } from '@mui/material' +import { PanelButton } from './shared/Buttons'; +import { Button } from '@mui/material'; const Form = styled('form')` margin-top: 10px; @@ -15,7 +15,7 @@ const Form = styled('form')` font-size: 12px; text-transform: none; } -` +`; const FileNameBox = styled('div')` margin-top: 5px; @@ -23,53 +23,51 @@ const FileNameBox = styled('div')` color: rgba(0, 0, 0, 0.6); font-size: 13px; text-align: left; -` +`; const parseFile = (file): Promise => new Promise((resolve, reject) => { - const reader = new FileReader() + const reader = new FileReader(); - reader.readAsText(file, 'UTF-8') + reader.readAsText(file, 'UTF-8'); reader.onload = function (evt) { - const fileContent = evt?.target?.result - console.log('Parsed file:') - console.log(fileContent) + const fileContent = evt?.target?.result; if (typeof fileContent === 'string') { - resolve(fileContent) + resolve(fileContent); } - resolve('') - } + resolve(''); + }; reader.onerror = function (err) { - reject(err) - } - }) + reject(err); + }; + }); const submitHandler = (event) => { - event.preventDefault() - let file = event.target[0].files[0] + event.preventDefault(); + let file = event.target[0].files[0]; parseFile(file).then((str) => { - KetcherFunctions.renderFromCtab(str) - }) -} + KetcherFunctions.renderFromCtab(str); + }); +}; interface FileInputProps { - printToTerminal: (str: string) => void + printToTerminal: (str: string) => void; } export const FileInputForm = ({ printToTerminal }: FileInputProps) => { - const [chosenFile, setFile] = useState('') + const [chosenFile, setFile] = useState(''); const chooseFileHandler = (event) => { - const file: File = event.target.files[0] - setFile(file.name) + const file: File = event.target.files[0]; + setFile(file.name); parseFile(file).then((str) => { - let message = 'Selected file content:' + str - printToTerminal(message) - }) - } + let message = 'Selected file content:' + str; + printToTerminal(message); + }); + }; return ( <> @@ -103,5 +101,5 @@ export const FileInputForm = ({ printToTerminal }: FileInputProps) => { {chosenFile} - ) -} + ); +}; diff --git a/demo/src/components/Panel.tsx b/demo/src/components/Panel.tsx index f334c3a4a6..7999e6bb80 100644 --- a/demo/src/components/Panel.tsx +++ b/demo/src/components/Panel.tsx @@ -1,12 +1,12 @@ -import styled from '@emotion/styled' +import styled from '@emotion/styled'; -import { PanelButton } from './shared/Buttons' +import { PanelButton } from './shared/Buttons'; -import { InputSelect } from './InputSelect' -import { Highlighting } from './Highlighting' -import { ButtonsSelect } from './ButtonsSelect' -import { FileInputForm } from './FileInputForm' -import { ControlsCard } from './ControlsCard' +import { InputSelect } from './InputSelect'; +import { Highlighting } from './Highlighting'; +import { ButtonsSelect } from './ButtonsSelect'; +import { FileInputForm } from './FileInputForm'; +import { ControlsCard } from './ControlsCard'; const FlexBox = styled('div')` display: flex; @@ -15,42 +15,40 @@ const FlexBox = styled('div')` flex-wrap: wrap; justify-content: flex-start; gap: 10px; -` +`; -const clearSelection = () => KetcherFunctions.clearSelection() +const clearSelection = () => KetcherFunctions.clearSelection(); -const selectAll = () => KetcherFunctions.selectAll() +const selectAll = () => KetcherFunctions.selectAll(); interface Props { - printToTerminal: (string) => void - hiddenButtons: string[] - buttonsHideHandler: (arg: string[]) => void + printToTerminal: (string) => void; + hiddenButtons: string[]; + buttonsHideHandler: (arg: string[]) => void; } export const Panel = ({ printToTerminal, hiddenButtons, - buttonsHideHandler + buttonsHideHandler, }: Props) => { const exportHandler = () => { KetcherFunctions.exportCtab().then((str) => { - let message = 'Export content:' + str - console.log(message) - printToTerminal(message) - }) - } + let message = 'Export content:' + str; + console.log(message); + printToTerminal(message); + }); + }; const showAtomIds = () => { - const atoms = KetcherFunctions.getSelectedAtomId() - console.log('Selected atoms:') - console.log(atoms) + const atoms = KetcherFunctions.getSelectedAtomId(); if (!atoms) { - printToTerminal('No atoms selected') + printToTerminal('No atoms selected'); } else { - printToTerminal('Selected atoms: ' + atoms) + printToTerminal('Selected atoms: ' + atoms); } - } + }; return ( @@ -105,5 +103,5 @@ export const Panel = ({ - ) -} + ); +}; diff --git a/example/config/webpack.config.js b/example/config/webpack.config.js index 18728d8072..87cc3939cc 100644 --- a/example/config/webpack.config.js +++ b/example/config/webpack.config.js @@ -10,8 +10,9 @@ const GitRevisionPlugin = require('git-revision-webpack-plugin'); const gitRevisionPlugin = new GitRevisionPlugin(); const applicationVersion = gitRevisionPlugin.version().split('-')[0]; + const envVariables = { - MODE: process.env.MODE, + MODE: process.env.MODE || 'standalone', API_PATH: process.env.REACT_APP_API_PATH, ENABLE_POLYMER_EDITOR: !!process.env.ENABLE_POLYMER_EDITOR, KETCHER_ENABLE_REDUX_LOGGER: JSON.stringify(false), diff --git a/example/package.json b/example/package.json index f93a0a3828..64ae7fbdc8 100644 --- a/example/package.json +++ b/example/package.json @@ -13,9 +13,9 @@ "copy:build": "cross-env-shell shx cp -r build/. dist/$MODE", "prebuild": "cross-env-shell run-s init:build delete:dist init:dist", "postbuild": "cross-env-shell npm run copy:build", - "build:remote": "cross-env MODE=remote run-s prebuild build:react postbuild", - "build:standalone": "cross-env MODE=standalone run-s prebuild build:react postbuild", - "build:react": "react-app-rewired build", + "build:remote": "cross-env-shell MODE=remote run-s prebuild build:react postbuild", + "build:standalone": "cross-env-shell MODE=standalone run-s prebuild build:react postbuild", + "build:react": "cross-env-shell MODE=$MODE react-app-rewired build && echo $MODE", "build:react:analyze": "react-app-rewired build --analyze", "build": "npm run build:standalone && npm run build:remote", "build:standalone:analyze": "cross-env MODE=standalone run-s prebuild build:react:analyze postbuild", diff --git a/example/src/PolymerToggler/PolymerToggler.tsx b/example/src/PolymerToggler/PolymerToggler.tsx index fe3841610b..bdb6a7ee57 100644 --- a/example/src/PolymerToggler/PolymerToggler.tsx +++ b/example/src/PolymerToggler/PolymerToggler.tsx @@ -22,7 +22,7 @@ export interface PolymerTogglerProps { const PolymerToggler = ({ toggle }: PolymerTogglerProps): JSX.Element => { return ( -