feature: Support tips at top in StepForm component

Support tips at top in StepForm component

Change-Id: I4cc4e489a81847f0c3b6190576141b9c39d9075e

src/components/Form/index.jsx

@@ -42,6 +42,7 @@ export default class BaseForm extends React.Component {
     this.response = null;
     this.responseError = null;
     this.formRef = React.createRef();
+    this.tipRef = React.createRef();
     this.codeError = false;
     this.currentFormValue = {};
     this.init();
@@ -100,7 +101,7 @@ export default class BaseForm extends React.Component {
   }
 
   get listUrl() {
-    return '/base/tmp';
+    return '';
   }
 
   get isAdminPage() {
@@ -386,7 +387,7 @@ export default class BaseForm extends React.Component {
   renderTips() {
     if (this.tips) {
       return (
-        <div className={styles.tips}>
+        <div className={styles.tips} ref={this.tipRef}>
           <InfoCircleOutlined className={styles['tips-icon']} />
           {this.tips}
         </div>
@@ -496,11 +497,28 @@ export default class BaseForm extends React.Component {
   }
 
   render() {
+    const wrapperPadding =
+      this.listUrl || this.isStep || (this.isModal && this.tips)
+        ? styles['wrapper-page-padding']
+        : '';
+    const tips = this.renderTips();
+    const formStyle = {};
+    if ((this.listUrl || this.isStep) && this.tips && this.tipRef.current) {
+      if (this.isStep) {
+        const tipHeight = this.tipRef.current.clientHeight + 219;
+        formStyle.height = `calc(100vh - ${tipHeight}px)`;
+      } else {
+        const tipHeight = this.tipRef.current.clientHeight + 66;
+        formStyle.height = `calc(100% - ${tipHeight}px)`;
+      }
+    }
     return (
-      <div className={classnames(styles.wrapper, this.className)}>
+      <div
+        className={classnames(styles.wrapper, wrapperPadding, this.className)}
+      >
         <Spin spinning={this.isSubmitting}>
-          {this.renderTips()}
+          {tips}
-          <div className={classnames(styles.form, 'sl-form')}>
+          <div className={classnames(styles.form, 'sl-form')} style={formStyle}>
             {this.renderForms()}
           </div>
           {this.renderFooter()}

src/components/Form/index.less

@@ -18,6 +18,10 @@
   }
 }
 
+.wrapper-page-padding {
+  padding-top: 0;
+}
+
 .form {
   margin-left: @body-padding * 2;
   margin-right: @body-padding * 2;
@@ -86,7 +90,6 @@
 .tips {
   padding: 8px 16px;
   background: rgba(89, 157, 255, 0.15);
-  margin-top: -16px;
   margin-bottom: 16px;
 }
 

src/locales/en.json

@@ -1231,7 +1231,6 @@
   "Qos Policy": "Qos Policy",
   "Queued": "Queued",
   "Quota Overview": "Quota Overview",
-  "Quota Resource": "Quota Resource",
   "Quota exceeded": "Quota exceeded",
   "Quota: Insufficient quota to create resources, please adjust resource quantity or quota(left { quota }, input { input }).": "Quota: Insufficient quota to create resources, please adjust resource quantity or quota(left { quota }, input { input }).",
   "Quota: Project quotas sufficient resources can be created": "Quota: Project quotas sufficient resources can be created",
@@ -1842,8 +1841,6 @@
   "image": "image",
   "images": "images",
   "ingress": "ingress",
-  "insert": "insert",
-  "insert rule": "insert rule",
   "instance": "instance",
   "instance snapshot": "instance snapshot",
   "instances": "instances",
@@ -1927,7 +1924,6 @@
   "unlock instance": "unlock instance",
   "unpause instance": "unpause instance",
   "unshelve instance": "unshelve instance",
-  "update": "update",
   "update status": "update status",
   "update template": "update template",
   "user": "user",

src/locales/zh.json

@@ -1231,7 +1231,6 @@
   "Qos Policy": "QoS策略",
   "Queued": "已排队",
   "Quota Overview": "配额概况",
-  "Quota Resource": "Quota(配额)",
   "Quota exceeded": "配额用尽",
   "Quota: Insufficient quota to create resources, please adjust resource quantity or quota(left { quota }, input { input }).": "配额：项目配额不足，无法创建资源，请进行资源数量或配额的调整（剩余{ quota }，输入{ input }）。",
   "Quota: Project quotas sufficient resources can be created": "配额：项目配额充足，可创建资源",
@@ -1842,8 +1841,6 @@
   "image": "镜像",
   "images": "镜像",
   "ingress": "入方向",
-  "insert": "",
-  "insert rule": "插入规则",
   "instance": "云主机",
   "instance snapshot": "云主机快照",
   "instances": "云主机",
@@ -1927,7 +1924,6 @@
   "unlock instance": "解锁云主机",
   "unpause instance": "恢复云主机",
   "unshelve instance": "取消归档云主机",
-  "update": "",
   "update status": "更新状态",
   "update template": "更新模板",
   "user": "用户",

src/pages/heat/containers/Stack/actions/Create/Parameter.jsx

@@ -25,6 +25,10 @@ import {
 @inject('rootStore')
 @observer
 export default class Parameter extends Base {
+  get isStep() {
+    return true;
+  }
+
   get title() {
     return t('Parameter');
   }

src/pages/heat/containers/Stack/actions/Create/Template.jsx

@@ -19,6 +19,10 @@ import { yamlTip, validateYaml, paramTip } from 'resources/stack';
 @inject('rootStore')
 @observer
 export default class Template extends Base {
+  get isStep() {
+    return true;
+  }
+
   get title() {
     return t('Prepare Template');
   }