Merge pull request #144 from i-VRESSE/form-autosave

Form autosave
i-VRESSE · May 16, 2024 · 1fe927d · 1fe927d
2 parents 7af06d8 + a958379
commit 1fe927d
Show file tree

Hide file tree

Showing 46 changed files with 2,545 additions and 370 deletions.
diff --git a/apps/haddock3-download/integration-tests/dupheader.spec.ts b/apps/haddock3-download/integration-tests/dupheader.spec.ts
@@ -14,7 +14,7 @@ test.describe('given an uploaded archive with a workflow.cfg file with a duplica
             molecules = [
               'some.pdb'
             ]
-            
+
             [caprieval]
 
             [caprieval]
@@ -23,30 +23,37 @@ test.describe('given an uploaded archive with a workflow.cfg file with a duplica
     // Upload workflow archive
     await page.locator('text="Upload" >> input[type="file"]')
       .setInputFiles({ name: 'workflow.zip', mimeType: 'application/zip', buffer: archive.toBuffer() })
+  })
 
-    // Click text=Text
-    await page.locator('text=Text').click()
-
+  test('it should show uplaoded file', async ({ page }) => {
+    // Click Files tab
+    await page.locator('text=Files').click()
+    // validate file button is present
     await page.waitForSelector('button:has-text("some.pdb")')
   })
 
   test('should have both headers and added index number', async ({ page }) => {
+    // Click Text tab
+    await page.locator('text=Text').click()
+    // debug
+    // await page.pause()
+
     const highlightedCode = await page.locator('#highlightedcode pre')
     const lines = await highlightedCode.allTextContents()
     const content = lines.join('\n')
     const expected = dedent`
 
-            run_dir = 'run1'
-            molecules = [
-              'some.pdb',
-            ]
-            
+      molecules = [
+        'some.pdb',
+      ]
 
-            [caprieval]
+      run_dir = 'run1'
+
+      [caprieval]
 
-            ['caprieval.2']
+      ['caprieval.2']
 
-        `
+    `
     expect(content).toEqual(expected)
   })
 })
diff --git a/apps/haddock3-download/integration-tests/syntaxhighlighter.spec.ts b/apps/haddock3-download/integration-tests/syntaxhighlighter.spec.ts
@@ -3,13 +3,19 @@ import { test, expect } from '@playwright/test'
 test('Verify that [object Object] bug does not show up (issue #74)', async ({ page }) => {
   await page.goto('http://localhost:3000')
 
+  // debugger
+  // await page.pause()
+
   // Load the example
   await page.locator('text=docking-protein-ligand').click()
 
-  // Click 'text' and ensure the files appear
-  await page.locator('text=Text').click()
+  // validate that file is used
+  await page.locator('text=Files').click()
   await page.waitForSelector('button:has-text("data/target.pdb")')
 
+  // change to 'text' tab
+  await page.locator('text=Text').click()
+
   // verify that the [object Object] text does not show up
   // see https://github.com/i-VRESSE/workflow-builder/issues/74
   const highlightedCode = await page.locator('#highlightedcode pre')

diff --git a/apps/haddock3-download/integration-tests/topoaamol.spec.ts b/apps/haddock3-download/integration-tests/topoaamol.spec.ts
@@ -5,32 +5,38 @@ import { readFile } from 'fs/promises'
 test.describe('given 1 molecule and a topoaa node', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:3000')
+
+    // Disable autosave
+    // await page.locator('text=Autosave').click();
+
     // Click input[type="text"]
     await page.locator('input[type="text"]').click()
     // Fill input[type="text"]
     await page.locator('input[type="text"]').fill('x')
     // Upload e2a-hpr_1GGR.pdb
     const file1 = await readFile('./integration-tests/data/e2a-hpr_1GGR.pdb')
+
+    // Click text=Input MoleculesThe input molecules that will be used for docking. >> button
+    await page.locator('text=Input MoleculesThe input molecules that will be used for docking. >> button').click()
     await page.locator('text=1* >> input[type="file"]')
       .setInputFiles({ name: 'e2a-hpr_1GGR.pdb', mimeType: 'chemical/x-pdb', buffer: file1 })
-    // Click text=Save
-    await page.locator('button:has-text("Save")').click()
-    // Click text=Cancel
-    await page.locator('button:has-text("Cancel")').click()
-    // Click button:has-text("topoaa")
+
+    // add topoaa step to workflow
     await page.locator('button:has-text("topoaa")').click()
+    // select topoaa step
+    await page.locator('button:has-text("1. topoaa")').click()
 
     // Click #expander4molecule svg
     await page.locator('#expander4molecule svg').click()
     // Click #expander4input_molecules svg
     await page.locator('#expander4input_molecules svg').click()
     // Click text=Save
-    await page.locator('button:has-text("Save")').click()
-    // Click text=Text
-    await page.locator('text=Text').click()
+    // await page.locator('button:has-text("Save")').click()
   })
 
   test('should have "[topoaa.mol1]" header', async ({ page }) => {
+    // select Text tab
+    await page.locator('text=Text').click()
     await expectHighlightedCodeToContain(page, '[topoaa.mol1]')
   })
 
@@ -41,7 +47,7 @@ test.describe('given 1 molecule and a topoaa node', () => {
         // It is important to call waitForEvent before click to set up waiting.
         page.waitForEvent('download'),
         // Triggers the download.
-        page.locator('text=Download archive').click()
+        page.locator('text=Download').click()
       ])
       // wait for download to complete
       path = await download.path() ?? ''
@@ -64,10 +70,16 @@ test.describe('given 1 molecule and a topoaa node', () => {
         await page.locator('text="Upload" >> input[type="file"]')
           .setInputFiles({ name: 'workflow.zip', mimeType: 'application/zip', buffer: file1 })
 
+        // ensure file is uploaded
+        await page.locator('text=Files').click()
         await page.waitForSelector('button:has-text("e2a-hpr_1GGR.pdb")')
       })
 
       test('should have "[topoaa.mol1]" header', async ({ page }) => {
+        // debugger
+        // await page.pause()
+        // change to Text tab
+        await page.locator('text=Text').click()
         await expectHighlightedCodeToContain(page, '[topoaa.mol1]')
       })
     })

diff --git a/apps/haddock3-download/src/App.css b/apps/haddock3-download/src/App.css
@@ -10,7 +10,7 @@
   grid-template-areas: "head head head"
                         "catalog workflow node"
                         "catalog workflow-actions node-actions";
-  grid-template-columns: min-content minmax(12rem,1fr) minmax(20rem,2fr);
+  grid-template-columns: min-content minmax(19rem,1fr) minmax(20rem,2fr);
   grid-template-rows: auto 1fr auto;
   column-gap: 1rem;
 }
@@ -91,6 +91,7 @@ div[role="button"],
   display: flex;
   gap: 1rem;
   padding: 1rem 0rem;
+  align-items: baseline;
 }
 
 /* Show panel section is clickable */

diff --git a/apps/haddock3-download/src/App.tsx b/apps/haddock3-download/src/App.tsx
@@ -9,40 +9,75 @@ import {
   WorkflowDownloadButton,
   WorkflowPanel,
   WorkflowUploadButton,
-  Wrapper
+  Wrapper,
+  useAutosaveValue,
+  useSetAutosave
 } from '@i-vresse/wb-core'
 
 import '@i-vresse/wb-form/dist/index.css'
 import './App.css'
 
-function App (): JSX.Element {
+function AutosaveManagement (): JSX.Element {
+  const autosave = useAutosaveValue()
+  const setAutosave = useSetAutosave()
+
   return (
-    <Wrapper>
-      <div className='page'>
-        <GridArea area='head'>
-          <Header />
-        </GridArea>
-        <GridArea area='catalog'>
-          <CatalogPanel>
-            <CatalogPicker />
-          </CatalogPanel>
-        </GridArea>
-        <GridArea area='workflow' className='workflow-area'>
-          <WorkflowPanel>
-            <WorkflowUploadButton />
-          </WorkflowPanel>
-        </GridArea>
-        <GridArea area='node'>
-          <NodePanel />
-        </GridArea>
-        <GridArea className='action-row' area='workflow-actions'>
+    <div
+      className='form-group form-check'
+    >
+      <input
+        type='checkbox'
+        className='form-check-input'
+        id='autosave'
+        checked={autosave}
+        onChange={(e) => {
+          setAutosave(!autosave)
+        }}
+      />
+      <label
+        className='form-check-label'
+        htmlFor='autosave'
+      >
+        Autosave
+      </label>
+    </div>
+  )
+}
+
+function PageContent (): JSX.Element {
+  const autosave = useAutosaveValue()
+
+  return (
+    <div className='page'>
+      <GridArea area='head'>
+        <Header />
+      </GridArea>
+      <GridArea area='catalog'>
+        <CatalogPanel>
+          <CatalogPicker />
+        </CatalogPanel>
+      </GridArea>
+      <GridArea area='workflow' className='workflow-area'>
+        <WorkflowPanel>
           <WorkflowDownloadButton />
+          <WorkflowUploadButton />
           <WorkflowClear />
-        </GridArea>
-        <GridArea className='action-row' area='node-actions'>
-          <FormActions />
-        </GridArea>
-      </div>
+          <AutosaveManagement />
+        </WorkflowPanel>
+      </GridArea>
+      <GridArea area='node'>
+        <NodePanel />
+        {/* show form actions if autosave is OFF */}
+        {!autosave ? <FormActions /> : null}
+      </GridArea>
+    </div>
+  )
+}
+
+function App (): JSX.Element {
+  return (
+    <Wrapper>
+      <PageContent />
     </Wrapper>
   )
 }

diff --git a/apps/haddock3-galaxy/src/App.tsx b/apps/haddock3-galaxy/src/App.tsx
@@ -7,14 +7,13 @@ import {
   NodePanel,
   CatalogPicker,
   WorkflowClear,
-  WorkflowPanel,
-  WorkflowUploadButton
+  WorkflowPanel
 } from '@i-vresse/wb-core'
 import './App.css'
 import '@i-vresse/wb-form/dist/index.css'
 import { WorkflowSubmitButton } from './WorkflowSubmitButton'
 import originalCatalogIndexURL from '../public/catalog/index.json'
-import { useCatalog, useSetCatalog, useWorkflow } from '@i-vresse/wb-core/dist/store'
+import { useAutosaveValue, useCatalog, useSetAutosave, useSetCatalog, useWorkflow } from '@i-vresse/wb-core/dist/store'
 import { useEffect } from 'react'
 import { toast } from 'react-toastify'
 
@@ -26,9 +25,37 @@ const catalogIndexURL = `data:application/json,${JSON.stringify(
   // reverse to load guru catalog by default (as it now is first entry) so example zip file is compliant
 )}`
 
+function AutosaveManagement (): JSX.Element {
+  const autosave = useAutosaveValue()
+  const setAutosave = useSetAutosave()
+
+  return (
+    <div
+      className='form-group form-check'
+    >
+      <input
+        type='checkbox'
+        className='form-check-input'
+        id='autosave'
+        checked={autosave}
+        onChange={(e) => {
+          setAutosave(!autosave)
+        }}
+      />
+      <label
+        className='form-check-label'
+        htmlFor='autosave'
+      >
+        Autosave
+      </label>
+    </div>
+  )
+}
+
 function App (): JSX.Element {
   // Examples URLS need to prepended baseUrl
   const catalog = useCatalog()
+  const autosave = useAutosaveValue()
   const setCatalog = useSetCatalog()
   const { loadWorkflowArchive } = useWorkflow()
 
@@ -45,7 +72,6 @@ function App (): JSX.Element {
         }))
       if (touched) {
         setCatalog({ ...catalog, examples })
-
         // Load from dataset
         addDatasetToBuilder(loadWorkflowArchive).catch((e) => console.error(e))
       }
@@ -64,18 +90,15 @@ function App (): JSX.Element {
       </GridArea>
       <GridArea area='workflow' className='workflow-area'>
         <WorkflowPanel>
-          <WorkflowUploadButton />
+          <WorkflowSubmitButton />
+          <WorkflowClear />
+          <AutosaveManagement />
         </WorkflowPanel>
       </GridArea>
       <GridArea area='node'>
         <NodePanel />
-      </GridArea>
-      <GridArea className='action-row' area='workflow-actions'>
-        <WorkflowSubmitButton />
-        <WorkflowClear />
-      </GridArea>
-      <GridArea className='action-row' area='node-actions'>
-        <FormActions />
+        {/* show form actions if autosave is OFF */}
+        {!autosave ? <FormActions /> : null}
       </GridArea>
     </div>
   )