From 3c1c47818baa9b7463688502d48c18bdc012f264 Mon Sep 17 00:00:00 2001
From: Qinzheng Sun <sunqinzheng@users.noreply.github.com>
Date: Thu, 4 Jul 2019 16:31:05 +0800
Subject: [PATCH] [Web Portal] Align job submit page's submission section to
 task role card's text field #3065

---
 src/webportal/package.json                    |   3 +-
 .../components/basic-section.jsx              |   6 +-
 .../components/submission-section.jsx         | 119 +++++++++++++-----
 src/webportal/yarn.lock                       |  30 ++++-
 4 files changed, 122 insertions(+), 36 deletions(-)

diff --git a/src/webportal/package.json b/src/webportal/package.json
index 966f822591..3e177a96a6 100644
--- a/src/webportal/package.json
+++ b/src/webportal/package.json
@@ -22,7 +22,7 @@
     "@babel/core": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
-    "@hapi/joi": "^15.1.0",
+    "@hapi/joi": "~15.1.0",
     "@webcomponents/custom-elements": "^1.2.1",
     "admin-lte": "~2.4.2",
     "app-root-path": "~2.0.1",
@@ -85,6 +85,7 @@
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-monaco-editor": "^0.25.1",
+    "react-responsive": "^7.0.0",
     "regenerator-runtime": "^0.13.2",
     "rimraf": "~2.6.2",
     "sass-loader": "~6.0.6",
diff --git a/src/webportal/src/app/job-submission/components/basic-section.jsx b/src/webportal/src/app/job-submission/components/basic-section.jsx
index 1799deb27b..42b8a57f5d 100644
--- a/src/webportal/src/app/job-submission/components/basic-section.jsx
+++ b/src/webportal/src/app/job-submission/components/basic-section.jsx
@@ -82,8 +82,12 @@ export const BasicSection = (props) => {
   );
 };
 
+BasicSection.defaultProps = {
+  sectionLabel: '',
+};
+
 BasicSection.propTypes = {
-  sectionLabel: PropTypes.string.isRequired,
+  sectionLabel: PropTypes.string,
   sectionTooltip: PropTypes.node,
   children: PropTypes.node,
   sectionOptional: PropTypes.bool,
diff --git a/src/webportal/src/app/job-submission/components/submission-section.jsx b/src/webportal/src/app/job-submission/components/submission-section.jsx
index 22f3a2f7f4..293f2f8f32 100644
--- a/src/webportal/src/app/job-submission/components/submission-section.jsx
+++ b/src/webportal/src/app/job-submission/components/submission-section.jsx
@@ -23,7 +23,10 @@
  * SOFTWARE.
  */
 
+import PropTypes from 'prop-types';
+import {isNil, debounce, isEqual, isEmpty, cloneDeep} from 'lodash';
 import React, {useState, useRef, useEffect, useContext} from 'react';
+import MediaQuery from 'react-responsive';
 import {
   Stack,
   DefaultButton,
@@ -49,9 +52,8 @@ import {
   removePreCommandsFromProtocolTaskRoles,
 } from '../utils/utils';
 import Context from './context';
-
-import PropTypes from 'prop-types';
-import {isNil, debounce, isEqual, isEmpty, cloneDeep} from 'lodash';
+import {BasicSection} from './basic-section';
+import {FormShortSection} from './form-page';
 
 const JOB_PROTOCOL_SCHEMA_URL =
   'https://github.com/microsoft/pai/blob/master/docs/pai-job-protocol.yaml';
@@ -231,39 +233,92 @@ export const SubmissionSection = (props) => {
     }
   };
 
+  const widthBreakpoint = 1550;
+
   return (
     <Card>
-      <Stack horizontal gap='s1' horizontalAlign='center'>
-        <PrimaryButton onClick={_submitJob} disabled={!isEmpty(errorMessages)}>
-          Submit
-        </PrimaryButton>
-        <DefaultButton
-          onClick={_openEditor}
-          styles={{root: {marginRight: spacing.l2}}}
-        >
-          Edit YAML
-        </DefaultButton>
-        <DefaultButton onClick={_exportYaml}>Export</DefaultButton>
-        <DefaultButton>
-          <Label styles={{root: importButtonStyle.label}}>
-            {'Import'}
-            <input
-              type='file'
-              style={importButtonStyle.input}
-              accept='.yml,.yaml'
-              onChange={_importFile}
+      {/* large - align with task role card (simulate the top section taskrole-sidebar layout) */}
+      <MediaQuery minWidth={widthBreakpoint}>
+        <Stack horizontal gap='l1'>
+          <StackItem grow styles={{root: {minWidth: 600, flexBasis: 0}}}>
+            <BasicSection>
+              <Stack horizontal gap='l1'>
+                <FormShortSection>
+                  <Stack horizontal horizontalAlign='space-between'>
+                    <Stack horizontal gap='s1'>
+                      <PrimaryButton onClick={_submitJob} disabled={!isEmpty(errorMessages)}>
+                        Submit
+                      </PrimaryButton>
+                      <DefaultButton
+                        onClick={_openEditor}
+                      >
+                        Edit YAML
+                      </DefaultButton>
+                    </Stack>
+                    <Stack horizontal gap='s1'>
+                      <DefaultButton onClick={_exportYaml}>Export</DefaultButton>
+                      <DefaultButton>
+                        <Label styles={{root: importButtonStyle.label}}>
+                          {'Import'}
+                          <input
+                            type='file'
+                            style={importButtonStyle.input}
+                            accept='.yml,.yaml'
+                            onChange={_importFile}
+                          />
+                        </Label>
+                      </DefaultButton>
+                    </Stack>
+                  </Stack>
+                </FormShortSection>
+                <Stack horizontal verticalAlign='center' gap='s1'>
+                  <div>Advanced</div>
+                  <Toggle
+                    styles={{root: {margin: 0}}}
+                    checked={advanceFlag}
+                    onChange={onToggleAdvanceFlag}
+                  />
+                </Stack>
+              </Stack>
+            </BasicSection>
+          </StackItem>
+          <div style={{width: 550}}></div>
+        </Stack>
+      </MediaQuery>
+      {/* small screen - center */}
+      <MediaQuery maxWidth={widthBreakpoint-1}>
+        <Stack horizontal gap='s1' horizontalAlign='center'>
+          <PrimaryButton onClick={_submitJob} disabled={!isEmpty(errorMessages)}>
+            Submit
+          </PrimaryButton>
+          <DefaultButton
+            onClick={_openEditor}
+            styles={{root: {marginRight: spacing.l2}}}
+          >
+            Edit YAML
+          </DefaultButton>
+          <DefaultButton onClick={_exportYaml}>Export</DefaultButton>
+          <DefaultButton>
+            <Label styles={{root: importButtonStyle.label}}>
+              {'Import'}
+              <input
+                type='file'
+                style={importButtonStyle.input}
+                accept='.yml,.yaml'
+                onChange={_importFile}
+              />
+            </Label>
+          </DefaultButton>
+          <Stack horizontal padding='0 0 0 s1' verticalAlign='center' gap='s1'>
+            <div>Advanced</div>
+            <Toggle
+              styles={{root: {margin: 0}}}
+              checked={advanceFlag}
+              onChange={onToggleAdvanceFlag}
             />
-          </Label>
-        </DefaultButton>
-        <Stack horizontal padding='0 0 0 s1' verticalAlign='center' gap='s1'>
-          <div>Advanced</div>
-          <Toggle
-            styles={{root: {margin: 0}}}
-            checked={advanceFlag}
-            onChange={onToggleAdvanceFlag}
-          />
+          </Stack>
         </Stack>
-      </Stack>
+      </MediaQuery>
       <MonacoPanel
         isOpen={isEditorOpen}
         onDismiss={_closeEditor}
diff --git a/src/webportal/yarn.lock b/src/webportal/yarn.lock
index 8c91631728..d118dc4d2c 100644
--- a/src/webportal/yarn.lock
+++ b/src/webportal/yarn.lock
@@ -708,7 +708,7 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.0.1.tgz#9712fa2ad124ac64668ab06ba847b1eaf83a03fd"
   integrity sha512-cctMYH5RLbElaUpZn3IJaUj9QNQD8iXDnl7xNY6KB1aFD2ciJrwpo3kvZowIT75uA+silJFDnSR2kGakALUymg==
 
-"@hapi/joi@^15.1.0":
+"@hapi/joi@~15.1.0":
   version "15.1.0"
   resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.0.tgz#940cb749b5c55c26ab3b34ce362e82b6162c8e7a"
   integrity sha512-n6kaRQO8S+kepUTbXL9O/UOL788Odqs38/VOfoCrATDtTvyfiO3fgjlSRaNkHabpTLgM7qru9ifqXlXbXk8SeQ==
@@ -2577,6 +2577,11 @@ css-loader@^2.1.1:
     postcss-value-parser "^3.3.0"
     schema-utils "^1.0.0"
 
+css-mediaquery@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
+  integrity sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=
+
 css-select-base-adapter@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
@@ -4347,6 +4352,11 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
+hyphenate-style-name@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
+  integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
+
 iconv-lite@0.4.23:
   version "0.4.23"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
@@ -5267,6 +5277,13 @@ marked@^0.3.9, marked@~0.3.9:
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.19.tgz#5d47f709c4c9fc3c216b6d46127280f40b39d790"
   integrity sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==
 
+matchmediaquery@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.3.0.tgz#6f672bcdbc44de16825c6917fbcdcfb9b82607b1"
+  integrity sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==
+  dependencies:
+    css-mediaquery "^0.1.2"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -6690,7 +6707,7 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6895,6 +6912,15 @@ react-monaco-editor@^0.25.1:
     monaco-editor "^0.16.0"
     prop-types "^15.7.2"
 
+react-responsive@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-7.0.0.tgz#0abde0ccbb50e5e8407e3d61dd4696447e7ebd3c"
+  integrity sha512-RukaKD+UI/MIR+P8eUgVGURfiCafRvvcVnq41scT0eEQWHwDGliH/OAlrwIr1oyz8aKLGroZa+U8mTZV5ihPfA==
+  dependencies:
+    hyphenate-style-name "^1.0.0"
+    matchmediaquery "^0.3.0"
+    prop-types "^15.6.1"
+
 react@^16.8.3:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"