Add help info

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

@@ -58,7 +58,7 @@ export const BasicSection = props => {
           />
           <StackItem grow>
             <div>
-              <Stack horizontal gap='s1'>
+              <Stack horizontal verticalAlign='baseline'>
                 <Label styles={basicSectionStyle.label}>{sectionLabel}</Label>
                 {sectionTooltip && <TooltipIcon content={sectionTooltip} />}
               </Stack>

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

@@ -24,22 +24,11 @@
  */
 
 import React from 'react';
-import { DirectionalHint, TooltipHost, Icon } from 'office-ui-fabric-react';
+import { IconButton } from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
 
 export const TooltipIcon = ({ content }) => {
-  return (
-    <TooltipHost
-      calloutProps={{
-        isBeakVisible: false,
-        directionalHint: DirectionalHint.topAutoEdge,
-        gapSpace: 8, // spacing.s1
-      }}
-      content={content}
-    >
-      <Icon styles={{ root: { verticalAlign: 'middle' } }} iconName='Info' />
-    </TooltipHost>
-  );
+  return <IconButton iconProps={{ iconName: 'Info' }} href={content} />;
 };
 
 TooltipIcon.propTypes = {

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

@@ -31,7 +31,6 @@ 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 }) => {
@@ -67,7 +66,6 @@ export const JobInformation = React.memo(
         <FormPage>
           <FormTextField
             sectionLabel={'Job name'}
-            sectionTooltip={PROTOCOL_TOOLTIPS.jobName}
             value={name}
             shortStyle
             onChange={onNameChange}

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

@@ -66,7 +66,6 @@ export const TabFormContent = ({
       {!isSingle && (
         <FormTextField
           sectionLabel={'Task role name'}
-          sectionTooltip={PROTOCOL_TOOLTIPS.taskRoleName}
           shortStyle
           value={jobTaskRole.name}
           onChange={value => _onValueChange('name', value)}

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

@@ -84,32 +84,23 @@ 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: [
-    'Resource required per container instance',
-    'CPU number and memory number will be auto scaled with GPU number by default.',
-  ],
-  hivedSkuType: [
-    'SKU defines a resource unit in all resource dimensions, ',
-    'including GPU, CPU, and memory.',
-  ],
-  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.',
-  ],
+  taskRoleContainerSize:
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/quick-start.html',
+  hivedSkuType:
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/quick-start.html',
+  taskRole:
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-run-distributed-job.html#taskrole-and-instance',
   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.`,
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/quick-start.html',
+  secrets: `https://openpai.readthedocs.io/en/latest/manual/cluster-user/quick-start.html`,
   data:
-    'Data section is used to generate pre-command that download/mount your data to specific path in container.',
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-manage-data.html',
   tools:
-    'Tools section is used to configure the tools that are useful for jobs.',
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-debug-jobs.html#how-to-debug-jobs',
   dockerImage:
-    'Please contact admin to make sure which cuda versions in docker image is supported by gpu drivers.',
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/docker-images-and-job-examples.html',
   teamStorage:
-    "Team share storage is external storage defined by cluster admin. Select an element means the external storage will be mount to 'path' and user can treat it as local path.",
+    'https://openpai.readthedocs.io/en/latest/manual/cluster-user/how-to-manage-data.html#use-storage-in-jobs',
 };
 
 export const COMMAND_PLACEHOLDER = `'You could define your own Parameters, Secrets or Data mount point on the right sidebar.