advanced form

Feature #13863

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 06a56172ffb52077d48e6c05734b5a627dd4b697..5d99aea93b76b12b17b2367ad570f01a4439c6ce 100644 (file)
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -20,6 +20,7 @@ import CreateNewFolder from '@material-ui/icons/CreateNewFolder';
 import Delete from '@material-ui/icons/Delete';
 import DeviceHub from '@material-ui/icons/DeviceHub';
 import Edit from '@material-ui/icons/Edit';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Folder from '@material-ui/icons/Folder';
 import GetApp from '@material-ui/icons/GetApp';
 import Help from '@material-ui/icons/Help';
@@ -62,6 +63,7 @@ export const CloudUploadIcon: IconType = (props) => <CloudUpload {...props} />;
 export const DefaultIcon: IconType = (props) => <RateReview {...props} />;
 export const DetailsIcon: IconType = (props) => <Info {...props} />;
 export const DownloadIcon: IconType = (props) => <GetApp {...props} />;
+export const ExpandIcon: IconType = (props) => <ExpandMoreIcon {...props} />;
 export const FavoriteIcon: IconType = (props) => <Star {...props} />;
 export const HelpIcon: IconType = (props) => <Help {...props} />;
 export const HelpOutlineIcon: IconType = (props) => <HelpOutline {...props} />;

diff --git a/src/views/run-process-panel/run-process-advanced-form.tsx b/src/views/run-process-panel/run-process-advanced-form.tsx
new file mode 100644 (file)
index 0000000..19beab6
--- /dev/null
+++ b/src/views/run-process-panel/run-process-advanced-form.tsx
@@ -0,0 +1,45 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary } from '@material-ui/core';
+import { reduxForm, Field } from 'redux-form';
+import { Grid } from '@material-ui/core';
+import { TextField } from '~/components/text-field/text-field';
+import { ExpandIcon } from '~/components/icon/icon';
+
+export const RUN_PROCESS_ADVANCED_FORM = 'runProcessAdvancedForm';
+
+export interface RunProcessAdvancedFormData {
+    output: string;
+    runtime: string;
+}
+
+export const RunProcessAdvancedForm =
+    reduxForm<RunProcessAdvancedFormData>({
+        form: RUN_PROCESS_ADVANCED_FORM
+    })(() =>
+        <form>
+            <ExpansionPanel elevation={0}>
+                <ExpansionPanelSummary style={{ padding: 0 }} expandIcon={<ExpandIcon />}>
+                    Advanced
+                </ExpansionPanelSummary>
+                <ExpansionPanelDetails style={{ padding: 0 }}>
+                    <Grid container spacing={32}>
+                        <Grid item xs={12} md={6}>
+                            <Field
+                                name='output'
+                                component={TextField}
+                                label="Output name" />
+                        </Grid>
+                        <Grid item xs={12} md={6}>
+                            <Field
+                                name='runtime'
+                                component={TextField}
+                                label="Runtime limit (hh)" />
+                        </Grid>
+                    </Grid>
+                </ExpansionPanelDetails>
+            </ExpansionPanel>
+        </form >);

diff --git a/src/views/run-process-panel/run-process-second-step.tsx b/src/views/run-process-panel/run-process-second-step.tsx
index d66576c2671dce55a048038624edf5640551c0a1..2585136e6ea20a86fb86d3584a471ddf98ede586 100644 (file)
--- a/src/views/run-process-panel/run-process-second-step.tsx
+++ b/src/views/run-process-panel/run-process-second-step.tsx
@@ -11,6 +11,7 @@ import { connect } from 'react-redux';
 import { RootState } from '~/store/store';
 import { isValid } from 'redux-form';
 import { RUN_PROCESS_INPUTS_FORM } from './run-process-inputs-form';
+import { RunProcessAdvancedForm } from './run-process-advanced-form';
 
 export interface RunProcessSecondStepFormDataProps {
     inputs: CommandInputParameter[];
@@ -35,6 +36,7 @@ export const RunProcessSecondStepForm = connect(mapStateToProps)(
             <Grid item xs={12}>
                 <RunProcessBasicForm />
                 <RunProcessInputsForm inputs={inputs} />
+                <RunProcessAdvancedForm />
             </Grid>
             <Grid item xs={12}>
                 <Button color="primary" onClick={goBack}>