feat: Support auto close/expend quota info when create instance

1. Update InfoButton component to support auto close/expend
2. Support auto close/expend quota info when count/size value change in the create instance form

Change-Id: Ida13abe3463af7dc949c51ade267c64029770c93

src/components/InfoButton/index.jsx

@@ -12,33 +12,134 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
-import { Button, Card } from 'antd';
+import { Button, Card, Tooltip, Switch } from 'antd';
 import { ExpandOutlined, CompressOutlined } from '@ant-design/icons';
 
-export default function InfoButton(props) {
+const seconds = 5;
-  const { content, defaultCollapsed = false, title, size = 'small' } = props;
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
 
-  const onChangeCollapsed = () => {
+export default function InfoButton(props) {
-    setCollapsed(!collapsed);
+  const {
+    content,
+    defaultCollapsed = false,
+    size = 'small',
+    ableAuto = true,
+    tip = t(
+      'When auto-expand/close is enabled, if there is no operation in the pop-up window, the pop-up window will be closed automatically after { seconds } seconds, and it will be automatically expanded when the displayed content changes.',
+      { seconds }
+    ),
+    checkValue = '',
+  } = props;
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const [auto, setAuto] = useState(ableAuto);
+  const [timer, setTimer] = useState(null);
+  const [hover, setHover] = useState(false);
+
+  const clearTimer = () => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    setTimer(null);
+  };
+
+  const open = () => {
+    setCollapsed(false);
+  };
+
+  const close = () => {
+    setCollapsed(true);
+    clearTimer();
+  };
+
+  const startTimer = () => {
+    if (collapsed) {
+      return;
+    }
+    if (timer) {
+      clearTimer();
+    }
+    const newTimer = setTimeout(() => {
+      if (!collapsed) {
+        close();
+      }
+    }, seconds * 1000);
+    setTimer(newTimer);
+  };
+
+  useEffect(() => {
+    if (!auto) {
+      return;
+    }
+    if (!collapsed) {
+      if (hover) {
+        clearTimer();
+      } else {
+        startTimer();
+      }
+    }
+  }, [collapsed, hover]);
+
+  useEffect(() => {
+    if (auto) {
+      open();
+      startTimer();
+    }
+  }, [checkValue]);
+
+  const onChangeAuto = (checked) => {
+    setAuto(checked);
+  };
+
+  const renderSwitch = () => {
+    if (!ableAuto) {
+      return null;
+    }
+    return (
+      <Tooltip title={tip}>
+        <Switch size="small" checked={auto} onChange={onChangeAuto} />
+      </Tooltip>
+    );
+  };
+
+  const onMouseEnter = () => {
+    setHover(true);
+  };
+
+  const onMouseLeave = () => {
+    setHover(false);
   };
 
   if (collapsed) {
     return (
-      <Button onClick={onChangeCollapsed} size={size}>
+      <div
-        <CompressOutlined />
+        style={{ padding: 8 }}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        className="content-wrapper"
+      >
+        <Tooltip title={t('Expand')}>
+          <Button onClick={open} size={size}>
+            <ExpandOutlined />
           </Button>
+        </Tooltip>
+      </div>
     );
   }
   const closeButton = (
-    <Button onClick={onChangeCollapsed} size={size}>
+    <Tooltip title={t('Close')}>
-      <ExpandOutlined />
+      <Button onClick={close} size={size}>
+        <CompressOutlined />
       </Button>
+    </Tooltip>
   );
   return (
-    <div>
+    <div
-      <Card title={title} extra={closeButton}>
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      className="content-wrapper"
+      style={{ minWidth: 150 }}
+    >
+      <Card title={renderSwitch()} extra={closeButton}>
         {content}
       </Card>
     </div>

src/components/QuotaChart/Ring.jsx

@@ -128,6 +128,7 @@ export default function Ring(props) {
               fontSize: '14',
               fill: getUsedValueColor(percent),
               textAlign: 'center',
+              fontWeight: 'bold',
             }}
           />
         </View>

src/components/StepForm/index.jsx

@@ -447,9 +447,10 @@ export default class BaseStepForm extends React.Component {
     if (!content) {
       return null;
     }
+    const checkValue = JSON.stringify(this.quotaInfo);
     return (
       <div className={styles['right-top-extra-wrapper']}>
-        <InfoButton content={content} />
+        <InfoButton content={content} checkValue={checkValue} />
       </div>
     );
   }

src/components/StepForm/index.less

@@ -82,9 +82,9 @@
   top: 95px;
   right: 30px;
   z-index: 100;
-  background-color: red;
+  background-color: #fff;
   border-radius: 5px;
-  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 9%);
+  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 20%);
 
   :global {
     .ant-card-head {

src/locales/en.json

@@ -345,6 +345,7 @@
   "Click to show detail": "Click to show detail",
   "Clone Volume": "Clone Volume",
   "Clone volume": "Clone volume",
+  "Close": "Close",
   "Close External Gateway": "Close External Gateway",
   "Close all notifications.": "Close all notifications.",
   "Close external gateway": "Close external gateway",
@@ -855,6 +856,7 @@
   "Evictions": "Evictions",
   "Execution Result": "Execution Result",
   "Exit Policy": "Exit Policy",
+  "Expand": "Expand",
   "Expand Advanced Options": "Expand Advanced Options",
   "Expired Time": "Expired Time",
   "Expires At": "Expires At",
@@ -2472,6 +2474,7 @@
   "Welcome": "Welcome",
   "Welcome, {name}": "Welcome, {name}",
   "Western Sahara": "Western Sahara",
+  "When auto-expand/close is enabled, if there is no operation in the pop-up window, the pop-up window will be closed automatically after { seconds } seconds, and it will be automatically expanded when the displayed content changes.": "When auto-expand/close is enabled, if there is no operation in the pop-up window, the pop-up window will be closed automatically after { seconds } seconds, and it will be automatically expanded when the displayed content changes.",
   "When the computing service starts the recycling instance interval, the instance will be stored in the recycling bin after deletion, and will be retained according to the corresponding time interval. You can choose to restore it within this period. After successful recovery, the status of the instance is running and related resources remain unchanged.": "When the computing service starts the recycling instance interval, the instance will be stored in the recycling bin after deletion, and will be retained according to the corresponding time interval. You can choose to restore it within this period. After successful recovery, the status of the instance is running and related resources remain unchanged.",
   "When the volume is \"bootable\" and the status is \"available\", it can be used as a startup source to create an instance.": "When the volume is \"bootable\" and the status is \"available\", it can be used as a startup source to create an instance.",
   "When you do online backup of the volume that has been bound, you need to pay attention to the following points:": "When you do online backup of the volume that has been bound, you need to pay attention to the following points:",

src/locales/zh.json

@@ -345,6 +345,7 @@
   "Click to show detail": "点击查看详情",
   "Clone Volume": "克隆云硬盘",
   "Clone volume": "克隆云硬盘",
+  "Close": "关闭",
   "Close External Gateway": "关闭公网网关",
   "Close all notifications.": "关闭所有消息提示",
   "Close external gateway": "关闭公网网关",
@@ -855,6 +856,7 @@
   "Evictions": "",
   "Execution Result": "执行结果",
   "Exit Policy": "退出策略",
+  "Expand": "展开",
   "Expand Advanced Options": "展开高级选项",
   "Expired Time": "到期时间",
   "Expires At": "到期时间",
@@ -2472,6 +2474,7 @@
   "Welcome": "欢迎",
   "Welcome, {name}": "欢迎，登录{name}",
   "Western Sahara": "西撒哈拉",
+  "When auto-expand/close is enabled, if there is no operation in the pop-up window, the pop-up window will be closed automatically after { seconds } seconds, and it will be automatically expanded when the displayed content changes.": "开启自动展开/关闭时，如在该弹窗内无操作，将在 { seconds } 秒后自动关闭弹窗，当展示内容有变化时，将自动展开。",
   "When the computing service starts the recycling instance interval, the instance will be stored in the recycling bin after deletion, and will be retained according to the corresponding time interval. You can choose to restore it within this period. After successful recovery, the status of the instance is running and related resources remain unchanged.": "当计算服务开启回收实例间隔时，删除后云主机会存放在回收站，按对应的时间间隔保留，在此期限内可以选择恢复。恢复成功后的云主机状态为运行中，且相关资源保持不变。",
   "When the volume is \"bootable\" and the status is \"available\", it can be used as a startup source to create an instance.": "云硬盘为“可启用”并且状态为“可用”时，可以作为启动源来创建云主机。",
   "When you do online backup of the volume that has been bound, you need to pay attention to the following points:": "当您对已经绑定的硬盘做在线备份时，需要注意以下几点：",