[Web Portal] fix submit job page's <p> tag and prop-types warning

src/webportal/src/app/job-submission/components/basic-section.jsx

@@ -63,9 +63,7 @@ export const BasicSection = (props) => {
                   {sectionLabel}
                 </Label>
                 {sectionTooltip && (
-                  <TooltipIcon>
-                    {sectionTooltip}
-                  </TooltipIcon>
+                  <TooltipIcon content={sectionTooltip} />
                 )}
               </Stack>
               {sectionOptional && (
@@ -88,7 +86,7 @@ BasicSection.defaultProps = {
 
 BasicSection.propTypes = {
   sectionLabel: PropTypes.string,
-  sectionTooltip: PropTypes.node,
+  sectionTooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   children: PropTypes.node,
   sectionOptional: PropTypes.bool,
 };

src/webportal/src/app/job-submission/components/controls/tooltip-icon.jsx

@@ -31,15 +31,15 @@ import {
 } from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
 
-export const TooltipIcon = ({children}) => {
+export const TooltipIcon = ({content}) => {
   return (
     <TooltipHost
       calloutProps={{
         isBeakVisible: false,
         directionalHint: DirectionalHint.topAutoEdge,
         gapSpace: 8, // spacing.s1
       }}
-      content={children}
+      content={content}
     >
       <Icon
         styles={{root: {verticalAlign: 'middle'}}}
@@ -50,5 +50,5 @@ export const TooltipIcon = ({children}) => {
 };
 
 TooltipIcon.propTypes = {
-  children: PropTypes.node,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
 };

src/webportal/src/app/job-submission/components/customized-components.jsx

@@ -59,9 +59,7 @@ export const CSpinButton = (props) => {
         <div style={{width: 160}}>{label}</div>
       )}
       {tooltip && (
-        <TooltipIcon>
-          {tooltip}
-        </TooltipIcon>
+        <TooltipIcon content={tooltip} />
       )}
       <SpinButton
         {...props}
@@ -80,7 +78,7 @@ CSpinButton.defaultProps = {
 
 CSpinButton.propTypes = {
   label: PropTypes.string,
-  tooltip: PropTypes.node,
+  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   min: PropTypes.number,
   max: PropTypes.number,
   onChange: PropTypes.func,

src/webportal/src/app/job-submission/components/form-text-field.jsx

@@ -77,7 +77,7 @@ export const FormTextField = React.memo((props) => {
 
 FormTextField.propTypes = {
   sectionLabel: PropTypes.string.isRequired,
-  sectionTooltip: PropTypes.node,
+  sectionTooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   onChange: PropTypes.func,
   value: PropTypes.string,
   sectionOptional: PropTypes.bool,

src/webportal/src/app/job-submission/components/job-information.jsx

@@ -32,6 +32,7 @@ import {FormSpinButton} from './form-spin-button';
 import {VirtualCluster} from './virtual-cluster';
 import Card from '../../components/card';
 import {JobBasicInfo} from '../models/job-basic-info';
+import {PROTOCOL_TOOLTIPS} from '../utils/constants';
 
 export const JobInformation = React.memo(({jobInformation, onChange, advanceFlag}) => {
   const {name, virtualCluster, jobRetryCount} = jobInformation;
@@ -74,6 +75,7 @@ export const JobInformation = React.memo(({jobInformation, onChange, advanceFlag
         </Stack>
         <FormTextField
           sectionLabel={'Job name'}
+          sectionTooltip={PROTOCOL_TOOLTIPS.jobName}
           value={name}
           shortStyle
           onChange={onNameChange}

src/webportal/src/app/job-submission/components/sidebar/sidebar-card.jsx

@@ -57,9 +57,7 @@ export const SidebarCard = ({title, selected, onSelect, children, error, tooltip
           <Stack horizontal gap='s1'>
             <Text styles={style.headerText}>{title}</Text>
             {tooltip && (
-              <TooltipIcon>
-                {tooltip}
-              </TooltipIcon>
+              <TooltipIcon content={tooltip} />
             )}
           </Stack>
           <ActionButton
@@ -80,7 +78,7 @@ export const SidebarCard = ({title, selected, onSelect, children, error, tooltip
 
 SidebarCard.propTypes = {
   title: PropTypes.string,
-  tooltip: PropTypes.node,
+  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   selected: PropTypes.bool,
   onSelect: PropTypes.func,
   children: PropTypes.node,

src/webportal/src/app/job-submission/components/tab-form.jsx

@@ -180,9 +180,7 @@ export class TabForm extends React.Component {
           </Stack.Item>
           <Stack.Item disableShrink align='stretch'>
             <Stack verticalAlign='center' styles={{root: {height: '100%'}}}>
-              <TooltipIcon>
-                {PROTOCOL_TOOLTIPS.taskRole}
-              </TooltipIcon>
+              <TooltipIcon content={PROTOCOL_TOOLTIPS.taskRole} />
             </Stack>
           </Stack.Item>
         </Stack>

src/webportal/src/app/job-submission/utils/constants.jsx → src/webportal/src/app/job-submission/utils/constants.js

@@ -15,8 +15,6 @@
 // DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import React from 'react';
-
 export const STORAGE_PREFIX='/pai_data/';
 export const CUSTOM_STORAGE_START='#CUSTOM_STORAGE_START';
 export const CUSTOM_STORAGE_END='#CUSTOM_STORAGE_END';
@@ -77,19 +75,16 @@ export const PAI_ENV_VAR = [
   },
 ];
 export const PROTOCOL_TOOLTIPS = {
+  jobName: 'Name for the job, need to be unique, should be string in ^[A-Za-z0-9\\-._~]+$ format.',
   taskRoleName: 'Name of the taskRole, string in ^[A-Za-z0-9\\-._~]+$ format.',
-  taskRoleContainerSize: (
-    <div>
-      <p>Resource required per container instance</p>
-      <p>CPU number and memory number will be auto scaled with GPU number by default</p>
-    </div>
-  ),
-  taskRole: (
-    <div>
-      <p>Task roles are different types of task in the protocol.</p>
-      <p>One job may have one or more task roles, each task role has one or more instances, and each instance runs inside one container.</p>
-    </div>
-  ),
+  taskRoleContainerSize: [
+    'Resource required per container instance',
+    'CPU number and memory number will be auto scaled with GPU number by default.',
+  ],
+  taskRole: [
+    'Task roles are different types of task in the protocol.',
+    'One job may have one or more task roles, each task role has one or more instances, and each instance runs inside one container.',
+  ],
   parameters: 'Parameters are key-value pairs that you could save your frequently used values and reference them in command section by their keys.',
   secrets: `Secrets are used to store sensitive data. The value will be masked and won't be seen by other users.`,
   data: 'Data section is used to generate pre-command that download/mount your data to specific path in container.',