performance improve and style change

For text filed doesn't render for every value change, only render when blur happends minor style change
microsoft · Jun 5, 2019 · a5cebe1 · a5cebe1
1 parent 3d1f514
commit a5cebe1
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 28 deletions.
diff --git a/src/webportal/src/plugins/job-submission/components/App.jsx b/src/webportal/src/plugins/job-submission/components/App.jsx
@@ -61,7 +61,6 @@ export class App extends React.Component {
     const {jobTaskRoles, parameters, jobInformation} = this.state;
     const formLayout = getFormClassNames().formLayout;
     const topForm = getFormClassNames().topForm;
-    // const job = new Job(jobInformation, jobTaskRoles.map((taskRole) => taskRole.content), parameters);
 
     return (
       <Fabric>

diff --git a/src/webportal/src/plugins/job-submission/components/DeploymentSection.jsx b/src/webportal/src/plugins/job-submission/components/DeploymentSection.jsx
@@ -46,15 +46,15 @@ export const DeploymentSection = (props) => {
   return (
     <BasicSection sectionLabel={'Deployment'} sectionOptional>
       <TextField label={'PreCommands'}
-                 value={preCommands}
-                 onChange={(_, v) => _onChange('preCommands', v)}
+                 defaultValue={preCommands}
+                 onBlur={(e) => _onChange('preCommands', e.target.value)}
                  multiline
                  rows={3}/>
       <TextField label={'PostCommands'}
-                 value={postCommands}
+                 defaultValue={postCommands}
                  multiline
                  rows={3}
-                 onChange={(_, v) => _onChange('postCommands', v)}/>
+                 onBlur={(e) => _onChange('postCommands', e.target.value)}/>
     </BasicSection>
   );
 };

diff --git a/src/webportal/src/plugins/job-submission/components/DockerSection.jsx b/src/webportal/src/plugins/job-submission/components/DockerSection.jsx
@@ -49,8 +49,8 @@ export const DockerSection = (props) => {
     <Stack horizontal gap='s2' >
       <TextField id={textFieldId}
                    placeholder='Enter docker uri...'
-                   onChange={(_, value) => _onChange('uri', value)}
-                   value={dockerInfo.uri}/>
+                   onBlur={(event) => _onChange('uri', event.target.value)}
+                   defaultValue={dockerInfo.uri}/>
       <DefaultButton>Auth</DefaultButton>
     </Stack>
   </BasicSection>

diff --git a/src/webportal/src/plugins/job-submission/components/FormTextField.jsx b/src/webportal/src/plugins/job-submission/components/FormTextField.jsx
@@ -30,26 +30,25 @@ import PropTypes from 'prop-types';
 import {BasicSection} from './BasicSection';
 
 export const FormTextField = (props) => {
-  const {sectionLabel, onChange, value, sectionOptional} = props;
+  const {sectionLabel, onBlur, sectionOptional} = props;
   const textFieldId = getId('textField');
-  const _onChange = (_, value) => {
-    if (onChange === undefined) {
+  const _onBlur= (event) => {
+    if (onBlur === undefined) {
       return;
     }
-    onChange(value);
+    onBlur(event.target.value);
   };
 
   return (
     <BasicSection sectionLabel={sectionLabel} optional={sectionOptional}>
-      <TextField {...props} id={textFieldId} value={value} onChange={_onChange}/>
+      <TextField {...props} id={textFieldId} onBlur={_onBlur}/>
     </BasicSection>
   );
 };
 
 FormTextField.propTypes = {
   sectionLabel: PropTypes.string.isRequired,
-  onChange: PropTypes.func,
-  value: PropTypes.string,
+  onBlur: PropTypes.func,
   textFiledProps: PropTypes.object,
   sectionOptional: PropTypes.bool,
 };
diff --git a/src/webportal/src/plugins/job-submission/components/JobInformation.jsx b/src/webportal/src/plugins/job-submission/components/JobInformation.jsx
@@ -49,8 +49,8 @@ export const JobInformation= (props) => {
     <FormPage>
       <Text variant='xxLarge' styles={{root: {fontWeight: 'semibold'}}}>Job Information</Text>
       <FormTextField sectionLabel={'Job name'}
-                     value={jobBasicInfo.name}
-                     onChange={(value) => _onChange('name', value)}
+                     defaultValue={jobBasicInfo.name}
+                     onBlur={(value) => _onChange('name', value)}
                      placeholder='Enter job name'/>
       <BasicSection sectionLabel={'Virutual cluster'}>
         <Dropdown placeholder='Select an option'></Dropdown>

diff --git a/src/webportal/src/plugins/job-submission/components/Parameters.jsx b/src/webportal/src/plugins/job-submission/components/Parameters.jsx
@@ -70,8 +70,8 @@ export const Parameters= (props) => {
   return (
     <Stack gap='m'>
       <Stack horizontal>
-        <Text variant='large'>Parameter</Text>
-        <ActionButton iconProps={{iconName: iconName}} styles={parameterStyle} onClick={_onClick}/>
+        <Text styles={parameterStyle.headerText}>Parameter</Text>
+        <ActionButton iconProps={{iconName: iconName}} styles={parameterStyle.actionButton} onClick={_onClick}/>
       </Stack>
       {
         !isParameterOn && <Text>{'you could use these predefined parameters as command variables with prefix \'$\''}</Text>
@@ -84,7 +84,7 @@ export const Parameters= (props) => {
                         })}
                         onItemAdd={_onParameterAdd}
                         onItemDelete={_onParameterDelete}/>
-          <Text variant='large'>Environment</Text>
+          <Text styles={parameterStyle.headerText}>Environment</Text>
           <DetailsList items={environment} columns={columns} checkboxVisibility={CheckboxVisibility.hidden} compact/>
         </React.Fragment>
       }

diff --git a/src/webportal/src/plugins/job-submission/components/TabFormContent.jsx b/src/webportal/src/plugins/job-submission/components/TabFormContent.jsx
@@ -60,8 +60,8 @@ export const TabFormContent = (props) => {
   return (
     <FormPage>
       <FormTextField sectionLabel={'Task role name'}
-                     value={jobTaskRole.name}
-                     onChange={(value) => _onValueChange('name', value)}
+                     defaultValue={jobTaskRole.name}
+                     onBlur={(value) => _onValueChange('name', value)}
                      textFiledProps={{placeholder: 'Enter task role name...'}}/>
       <DockerSection defaultValue={jobTaskRole.dockerInfo}
                      onValueChange={(dockerInfo) => _onValueChange('dockerInfo', dockerInfo)}/>
@@ -88,8 +88,8 @@ export const TabFormContent = (props) => {
       <FormTextField sectionLabel={'Command'}
                      multiline={true}
                      rows={10}
-                     value={jobTaskRole.commands}
-                     onChange={(value)=>_onValueChange('commands', value)}/>
+                     defaultValue={jobTaskRole.commands}
+                     onBlur={(value)=>_onValueChange('commands', value)}/>
       <DeploymentSection defaultValue={jobTaskRole.deployment}
                          onChange={(deployment) => _onValueChange('deployment', deployment)}/>
     </FormPage>

diff --git a/src/webportal/src/plugins/job-submission/components/formStyle.js b/src/webportal/src/plugins/job-submission/components/formStyle.js
@@ -121,12 +121,20 @@ export const getFormBasicSectionStyle = (optional) => {
 
 export const getParameterStyle = () => {
   return ({
-    flexContainer: {
-      alignItems: 'end',
-      height: 'auto',
+    headerText: {
+      root: {
+        fontSize: FontSizes.large,
+        fontWeight: FontWeights.semibold,
+      },
     },
-    root: {
-      height: 'auto',
+    actionButton: {
+      flexContainer: {
+        alignItems: 'end',
+        height: 'auto',
+      },
+      root: {
+        height: 'auto',
+      },
     },
   });
 };