Skip to content
This repository has been archived by the owner on Jun 6, 2024. It is now read-only.

[Web Portal] Align job submit page's submission section to task role card's text field #3065

Merged
merged 1 commit into from
Jul 4, 2019
Merged

[Web Portal] Align job submit page's submission section to task role card's text field #3065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/webportal/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
6 changes: 5 additions & 1 deletion src/webportal/src/app/job-submission/components/basic-section.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
119 changes: 87 additions & 32 deletions src/webportal/src/app/job-submission/components/submission-section.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';
Expand Down Expand Up @@ -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}
Expand Down
30 changes: 28 additions & 2 deletions src/webportal/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==

[email protected]:
version "0.4.23"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down