fix(#243, #244): menu actions run and next behave like the form

Author: marisademeglio

src/main/index.ts

@@ -151,7 +151,7 @@ function buildMenu() {
             store.dispatch(selectJob(job))
         },
         onRunJob: async (job) => {
-            MainWindow().then((w) => w.webContents.send('run-job'))
+            MainWindow().then((w) => w.webContents.send('submit-script-form'))
             // store.dispatch(
             //     runJob({
             //         ...job,

src/main/menu.ts

@@ -64,6 +64,12 @@ export function buildMenuTemplate({
         .replace(' - App', '')
         .replace('(2023)', '')
         .trim()
+    let submitFormLabel =
+        currentJob &&
+        currentJob.is2StepsJob &&
+        currentJob.stylesheetParameters == null
+            ? 'Next'
+            : 'Run job'
 
     // @ts-ignore
     const template: MenuItemConstructorOptions = [
@@ -123,7 +129,7 @@ export function buildMenuTemplate({
                     : []),
                 { type: 'separator' },
                 {
-                    label: 'Run job',
+                    label: submitFormLabel,
                     click: () => {
                         onRunJob(currentJob)
                     },

src/renderer/bridge/index.ts

@@ -45,6 +45,7 @@ const API = {
     copyToClipboard: ipcs.copyToClipboard,
     log: ipcs.log,
     oneTimeFetch: ipcs.oneTimeFetch,
+    onScriptFormSubmit: (channel, listener) => ipcRenderer.on(channel, listener),
     // we can add on to this API and restructure it as we move more commands to the redux side
     store: {
         dispatch,

src/renderer/components/NewJobPane/index.tsx

@@ -16,6 +16,7 @@ import {
     setSponsorshipMessageLastShown,
 } from 'shared/data/slices/settings'
 import { externalLinkClick } from 'renderer/utils'
+import * as utils from '../../utils'
 
 const { App } = window
 
@@ -24,8 +25,7 @@ import {
     updateSponsorshipMessage,
 } from '../../utils'
 
-// is datestring more than 2 weeks old
-// datestring is milliseconds (string)
+// is dateInMs more than 2 weeks old
 let isExpired = (dateInMs: number) => {
     if (dateInMs == 0) return true
 
@@ -70,6 +70,7 @@ export function NewJobPane({ job }: { job: Job }) {
             updateJob({
                 ...job,
                 script: selection,
+                is2StepsJob: utils.is2StepsScript(selection),
                 jobData: {
                     ...job.jobData,
                     nicename: selection.nicename,

src/renderer/components/ScriptForm/index.tsx

@@ -9,7 +9,7 @@ import {
     ScriptItemBase,
     ScriptOption,
 } from 'shared/types'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef, useMemo } from 'react'
 import { useWindowStore } from 'renderer/store'
 import {
     findValue,
@@ -44,11 +44,21 @@ export function ScriptForm({ job, script }: { job: Job; script: Script }) {
     const [submitInProgress, setSubmitInProgress] = useState(false)
     const [error, setError] = useState(false)
     const [canRunJob, setCanRunJob] = useState(false)
+    const submitButtonRef = useRef(null)
 
     let required = getAllRequired(script)
     let optional = getAllOptional(script)
     const { settings } = useWindowStore()
 
+    useMemo(() => {
+        App.onScriptFormSubmit('submit-script-form', async () => {
+            // console.log("SUBMIT script form for ", job.script.id)
+            if (submitButtonRef && submitButtonRef.current) {
+                submitButtonRef.current.click()
+            }
+        })
+    }, [])
+
     useEffect(() => {
         setCanRunJob(settings.downloadFolder?.trim() != '')
     }, [settings.downloadFolder])
@@ -65,8 +75,9 @@ export function ScriptForm({ job, script }: { job: Job; script: Script }) {
     // - page-width
     // - page-height
 
-    const is2StepsJob =
-        optional.findIndex((item) => item.name === 'stylesheet-parameters') > -1
+    // moved to job datatype
+    // const is2StepsJob =
+    //     optional.findIndex((item) => item.name === 'stylesheet-parameters') > -1
     // Filter out the options that are to be defined in the first step of braille script
     const filteredOptions = [
         'stylesheet',
@@ -77,7 +88,7 @@ export function ScriptForm({ job, script }: { job: Job; script: Script }) {
         'tts',
     ]
     const hiddenOptions = ['transform', 'stylesheet-parameters']
-    if (is2StepsJob) {
+    if (job.is2StepsJob) {
         optional = optional.filter((item) =>
             filteredOptions.includes(item.name)
         )
@@ -96,7 +107,7 @@ export function ScriptForm({ job, script }: { job: Job; script: Script }) {
     // When this property is set
     // 'optional' is what is displayed on screen as optional values. they could technically be job inputs, options, or stylesheet parameters
     // but the user input values aren't stored there, those go in the job request itself
-    if (is2StepsJob && job.stylesheetParameters != null) {
+    if (job.is2StepsJob && job.stylesheetParameters != null) {
         required = []
         optional = [
             ...getAllOptional(script)
@@ -176,7 +187,7 @@ export function ScriptForm({ job, script }: { job: Job; script: Script }) {
     // submit a job
     let onSubmit = async (e) => {
         e.preventDefault()
-        if (is2StepsJob && job.stylesheetParameters == null) {
+        if (job.is2StepsJob && job.stylesheetParameters == null) {
             /*  constraints on the stylesheet parameters :
                 the /stylesheet-parameters call should not be made if
                 - TTS is disabled (audio = false) on scripts dtbook-to-daisy3, dtbook-to-epub3 and zedai-to-epub3
@@ -206,7 +217,7 @@ export function ScriptForm({ job, script }: { job: Job; script: Script }) {
             }
         } else {
             let options = [...job.jobRequest.options]
-            if (is2StepsJob) {
+            if (job.is2StepsJob) {
                 // format all the stylesheet parameter options as a string
                 // and assign it to the 'stylesheet-parameters' option
                 let stylesheetParametersOption =
@@ -411,20 +422,21 @@ export function ScriptForm({ job, script }: { job: Job; script: Script }) {
                     </div>
                 )}
                 <div className="form-buttons">
-                    {is2StepsJob && job.stylesheetParameters != null && (
+                    {job.is2StepsJob && job.stylesheetParameters != null && (
                         <button className="run" onClick={previous}>
                             Back
                         </button>
                     )}
-                    {is2StepsJob && job.stylesheetParameters == null ? (
-                        <button className="run" type="submit">
+                    {job.is2StepsJob && job.stylesheetParameters == null ? (
+                        <button className="run" type="submit" ref={submitButtonRef}>
                             Next
                         </button>
                     ) : (
                         <button
                             className="run"
                             type="submit"
                             disabled={!canRunJob || submitInProgress}
+                            ref={submitButtonRef}
                         >
                             {submitInProgress ? 'Starting...' : 'Run'}
                         </button>

src/renderer/utils/utils.ts

@@ -87,3 +87,11 @@ export function externalLinkClick(e, app) {
         app.openInBrowser(closest.href)
     }
 }
+
+export function is2StepsScript(script: Script) {
+    return (
+        script.options.findIndex(
+            (item) => item.name == 'stylesheet-parameters'
+        ) > -1
+    )
+}

src/shared/types/pipeline.ts

@@ -211,6 +211,7 @@ export type Job = {
      * from the pipeline stylesheet-parameters end point and stored here.
      */
     stylesheetParameters?: ScriptOption[]
+    is2StepsJob?: boolean
 }
 // JobData is the JSON representation of Pipeline WS data for a single job
 export type JobData = {