refactor(web): 所有Input.Group compact组件替换成Space.Compact (#1328)

1.6.1发版测试发现UI故障： ![img_v3_02c7_89dbc0a9-6508-4891-86bf-541664320bfg](https://github.com/PKUHPC/SCOW/assets/78541912/903b6778-057b-4c1d-ac72-59d455a126dc) 定位后antd回复：Input.group已经废弃，因此使用 Space.Compact ant-design/ant-design#49607 ### 解决 mis： 1.账户消费记录、充值记录中的账户多选框 2.平台管理、租户充值记录、租户选择框 portal: 1.提交作业、应用的最长时间输入框、分区选择框 ai: 1.账户选择框 ![image](https://github.com/PKUHPC/SCOW/assets/78541912/a6b568a0-ac11-4ac4-b94b-65ef5f7da532)
PKUHPC · Jun 26, 2024 · be61c74 · be61c74
1 parent 189d0a4
commit be61c74
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 39 deletions.
diff --git a/.changeset/sixty-taxis-shave.md b/.changeset/sixty-taxis-shave.md
@@ -0,0 +1,7 @@
+---
+"@scow/portal-web": patch
+"@scow/mis-web": patch
+"@scow/ai": patch
+---
+
+所有 Input.group compact 组件替换成 Space.Compact
diff --git a/apps/ai/src/components/AccountSelector.tsx b/apps/ai/src/components/AccountSelector.tsx
@@ -13,7 +13,7 @@
 "use client";
 
 import { ReloadOutlined } from "@ant-design/icons";
-import { Button, Input, Select, Tooltip } from "antd";
+import { Button, Select, Space, Tooltip } from "antd";
 import { useEffect } from "react";
 import { trpc } from "src/utils/trpc";
 
@@ -37,7 +37,7 @@ export const AccountSelector: React.FC<Props> = ({ cluster, onChange, value }) =
   }, [data, value]);
 
   return (
-    <Input.Group compact>
+    <Space.Compact style={{ width: "100%" }}>
       <Select
         loading={isLoading}
         options={data ? data.accounts.map((x) => ({ label: x, value: x })) : []}
@@ -49,7 +49,7 @@ export const AccountSelector: React.FC<Props> = ({ cluster, onChange, value }) =
       <Tooltip title="刷新账户列表">
         <Button icon={<ReloadOutlined spin={isLoading} />} onClick={() => { refetch(); }} loading={isLoading} />
       </Tooltip>
-    </Input.Group>
+    </Space.Compact>
   );
 };
 
diff --git a/apps/mis-web/src/pageComponents/finance/AccountMultiSelector.tsx b/apps/mis-web/src/pageComponents/finance/AccountMultiSelector.tsx
@@ -11,7 +11,7 @@
  */
 
 import { ReloadOutlined } from "@ant-design/icons";
-import { Button, Input, Select, Tooltip } from "antd";
+import { Button, Select, Space, Tooltip } from "antd";
 import { useCallback, useState } from "react";
 import { useAsync } from "react-async";
 import { useStore } from "simstate";
@@ -53,7 +53,7 @@ export const AccountMultiSelector: React.FC<Props> = ({
   const userStore = useStore(UserStore);
 
   const promiseFn = useCallback(async () => {
-    return fromAllTenants ? api.getAllAccounts({ query: { } }) : api.getAccounts({ query: { } });
+    return fromAllTenants ? api.getAllAccounts({ query: {} }) : api.getAccounts({ query: {} });
   }, [userStore.user]);
 
   const { data, isLoading, reload } = useAsync({
@@ -66,7 +66,7 @@ export const AccountMultiSelector: React.FC<Props> = ({
     },
   });
 
-  const options = data ? data.results.map((i) => ({ label: i.accountName, value:  i.accountName })) : [];
+  const options = data ? data.results.map((i) => ({ label: i.accountName, value: i.accountName })) : [];
 
   const onBlur = () => {
     const match = options.find((option) => option.value === inputValue);
@@ -76,7 +76,7 @@ export const AccountMultiSelector: React.FC<Props> = ({
     setInputValue(""); // 清空输入框
   };
   return (
-    <Input.Group compact>
+    <Space.Compact style={{ width: "100%" }}>
       <Select
         showSearch
         loading={isLoading}
@@ -87,16 +87,21 @@ export const AccountMultiSelector: React.FC<Props> = ({
         style={{ width: "calc(100% - 32px)", minWidth: "200px" }}
         onChange={(v) => {
           onChange?.(v);
-        } }
+        }}
         onBlur={onBlur}
         onSearch={setInputValue}
         allowClear
         mode="multiple"
       />
       <Tooltip title={t(p("freshList"))}>
-        <Button icon={<ReloadOutlined spin={isLoading} />} disabled={disabled} onClick={reload} loading={isLoading} />
+        <Button
+          icon={<ReloadOutlined spin={isLoading} />}
+          disabled={disabled}
+          onClick={reload}
+          loading={isLoading}
+        />
       </Tooltip>
-    </Input.Group>
+    </Space.Compact>
   );
 };
 
diff --git a/apps/mis-web/src/pageComponents/finance/AccountSelector.tsx b/apps/mis-web/src/pageComponents/finance/AccountSelector.tsx
@@ -11,7 +11,7 @@
  */
 
 import { ReloadOutlined } from "@ant-design/icons";
-import { Button, Input, Select, Tooltip } from "antd";
+import { Button, Select, Space, Tooltip } from "antd";
 import { useCallback } from "react";
 import { useAsync } from "react-async";
 import { useStore } from "simstate";
@@ -53,7 +53,7 @@ export const AccountSelector: React.FC<Props> = ({
   const userStore = useStore(UserStore);
 
   const promiseFn = useCallback(async () => {
-    return fromAllTenants ? api.getAllAccounts({ query: { } }) : api.getAccounts({ query: { } });
+    return fromAllTenants ? api.getAllAccounts({ query: {} }) : api.getAccounts({ query: {} });
   }, [userStore.user]);
 
   const { data, isLoading, reload } = useAsync({
@@ -66,11 +66,11 @@ export const AccountSelector: React.FC<Props> = ({
     },
   });
   return (
-    <Input.Group compact>
+    <Space.Compact style={{ width: "100%" }}>
       <Select
         showSearch
         loading={isLoading}
-        options={data ? data.results.map((i) => ({ label: i.accountName, value:  i.accountName })) : []}
+        options={data ? data.results.map((i) => ({ label: i.accountName, value: i.accountName })) : []}
         placeholder={placeholder}
         value={value}
         disabled={disabled}
@@ -81,6 +81,6 @@ export const AccountSelector: React.FC<Props> = ({
       <Tooltip title={t(p("freshList"))}>
         <Button icon={<ReloadOutlined spin={isLoading} />} disabled={disabled} onClick={reload} loading={isLoading} />
       </Tooltip>
-    </Input.Group>
+    </Space.Compact>
   );
 };
diff --git a/apps/mis-web/src/pageComponents/tenant/TenantSelector.tsx b/apps/mis-web/src/pageComponents/tenant/TenantSelector.tsx
@@ -11,7 +11,7 @@
  */
 
 import { ReloadOutlined } from "@ant-design/icons";
-import { Button, Input, Select, Tooltip } from "antd";
+import { Button, Select, Space, Tooltip } from "antd";
 import { useCallback } from "react";
 import { useAsync } from "react-async";
 import { useStore } from "simstate";
@@ -46,7 +46,7 @@ export const TenantSelector: React.FC<Props> = ({
   const userStore = useStore(UserStore);
 
   const promiseFn = useCallback(async () => {
-    return api.getTenants({ query: { } });
+    return api.getTenants({ query: {} });
   }, [userStore.user]);
 
   const { data, isLoading, reload } = useAsync({
@@ -60,7 +60,7 @@ export const TenantSelector: React.FC<Props> = ({
   });
 
   return (
-    <Input.Group compact>
+    <Space.Compact style={{ width: "100%" }}>
       <Select
         showSearch
         loading={isLoading}
@@ -75,7 +75,7 @@ export const TenantSelector: React.FC<Props> = ({
       <Tooltip title={t(p("fresh"))}>
         <Button icon={<ReloadOutlined spin={isLoading} />} disabled={disabled} onClick={reload} loading={isLoading} />
       </Tooltip>
-    </Input.Group>
+    </Space.Compact>
   );
 };
 
diff --git a/apps/mis-web/src/pages/tenant/storage.tsx b/apps/mis-web/src/pages/tenant/storage.tsx
@@ -11,7 +11,7 @@
  */
 
 import { FormLayout } from "@scow/lib-web/build/layouts/FormLayout";
-import { App, Button, Form, Input, InputNumber, Select } from "antd";
+import { App, Button, Form, Input, InputNumber, Select, Space } from "antd";
 import { NextPage } from "next";
 import React, { useState } from "react";
 import { useStore } from "simstate";
@@ -129,7 +129,7 @@ const StorageForm: React.FC = () => {
         </DisabledA>
       </Form.Item>
       <Form.Item<FormProps> label={t(p("storageChange"))} rules={[{ required: true }]}>
-        <Input.Group compact>
+        <Space.Compact style={{ width: "100%" }}>
           <Form.Item name="mode" noStyle>
             <Select placeholder={t(p("selectSetTo"))}>
               {Object.entries(changeModeText).map(([key, value]) => (
@@ -140,7 +140,7 @@ const StorageForm: React.FC = () => {
           <Form.Item name="value" noStyle>
             <InputNumber min={1} step={1} addonAfter={"TB"} />
           </Form.Item>
-        </Input.Group>
+        </Space.Compact>
       </Form.Item>
       <Form.Item wrapperCol={{ span: 6, offset: 4 }}>
         <Button type="primary" htmlType="submit" loading={loading}>

diff --git a/apps/portal-web/src/components/InputGroupFormItem.tsx b/apps/portal-web/src/components/InputGroupFormItem.tsx
@@ -10,7 +10,7 @@
  * See the Mulan PSL v2 for more details.
  */
 
-import { Input } from "antd";
+import { Input, Space } from "antd";
 
 type Props = React.PropsWithChildren<{
   value?: string;
@@ -19,12 +19,12 @@ type Props = React.PropsWithChildren<{
 }>;
 
 export const InputGroupFormItem: React.FC<Props> = ({ children, deltaWidth, value, onChange }) => (
-  <Input.Group compact>
+  <Space.Compact style={{ width: "100%" }}>
     <Input
       value={value}
       onChange={(e) => onChange?.(e.target.value)}
       style={{ width: `calc(100% - ${deltaWidth})` }}
     />
     {children}
-  </Input.Group>
+  </Space.Compact>
 );
diff --git a/apps/portal-web/src/pageComponents/job/AccountListSelector.tsx b/apps/portal-web/src/pageComponents/job/AccountListSelector.tsx
@@ -11,7 +11,7 @@
  */
 
 import { ReloadOutlined } from "@ant-design/icons";
-import { Button, Input, Select, Tooltip } from "antd";
+import { Button, Select, Space, Tooltip } from "antd";
 import { useEffect } from "react";
 import { prefix, useI18nTranslateToString } from "src/i18n";
 
@@ -36,7 +36,7 @@ export const AccountListSelector: React.FC<Props> = ({ selectableAccounts, isLoa
   const p = prefix("pageComp.job.accountSelector.");
 
   return (
-    <Input.Group compact>
+    <Space.Compact style={{ width: "100%" }}>
       <Select
         loading={isLoading}
         options={selectableAccounts ? selectableAccounts.map((x) => ({ label: x, value: x })) : []}
@@ -48,7 +48,7 @@ export const AccountListSelector: React.FC<Props> = ({ selectableAccounts, isLoa
       <Tooltip title={t(p("refreshAccountList"))}>
         <Button icon={<ReloadOutlined spin={isLoading} />} onClick={() => onReload?.()} loading={isLoading} />
       </Tooltip>
-    </Input.Group>
+    </Space.Compact>
   );
 };
 
diff --git a/apps/portal-web/src/pageComponents/job/AccountSelector.tsx b/apps/portal-web/src/pageComponents/job/AccountSelector.tsx
@@ -11,7 +11,7 @@
  */
 
 import { ReloadOutlined } from "@ant-design/icons";
-import { App, Button, Input, Select, Tooltip } from "antd";
+import { App, Button, Select, Space, Tooltip } from "antd";
 import { useCallback, useEffect } from "react";
 import { useAsync } from "react-async";
 import { useStore } from "simstate";
@@ -54,7 +54,7 @@ export const AccountSelector: React.FC<Props> = ({ cluster, onChange, value }) =
   const p = prefix("pageComp.job.accountSelector.");
 
   return (
-    <Input.Group compact>
+    <Space.Compact style={{ width: "100%" }}>
       <Select
         loading={isLoading}
         options={data ? data.accounts.map((x) => ({ label: x, value: x })) : []}
@@ -66,6 +66,6 @@ export const AccountSelector: React.FC<Props> = ({ cluster, onChange, value }) =
       <Tooltip title={t(p("refreshAccountList"))}>
         <Button icon={<ReloadOutlined spin={isLoading} />} onClick={reload} loading={isLoading} />
       </Tooltip>
-    </Input.Group>
+    </Space.Compact>
   );
 };
diff --git a/apps/portal-web/src/pageComponents/job/PartitionSelector.tsx b/apps/portal-web/src/pageComponents/job/PartitionSelector.tsx
@@ -11,7 +11,7 @@
  */
 
 import { ReloadOutlined } from "@ant-design/icons";
-import { Button, Input, Select, Tooltip } from "antd";
+import { Button, Select, Space, Tooltip } from "antd";
 import { useEffect } from "react";
 import { prefix, useI18nTranslateToString } from "src/i18n";
 
@@ -36,7 +36,7 @@ export const PartitionSelector: React.FC<Props> = ({ selectablePartitions,
   const p = prefix("pageComp.job.partitionSelector.");
 
   return (
-    <Input.Group compact>
+    <Space.Compact style={{ width: "100%" }}>
       <Select
         loading={isLoading}
         options={selectablePartitions ? selectablePartitions.map((x) => ({ label: x, value: x })) : []}
@@ -46,9 +46,13 @@ export const PartitionSelector: React.FC<Props> = ({ selectablePartitions,
         onChange={(v) => onChange?.(v)}
       />
       <Tooltip title={t(p("refreshPartitionList"))}>
-        <Button icon={<ReloadOutlined spin={isLoading} />} onClick={() => onReload?.()} loading={isLoading} />
+        <Button
+          icon={<ReloadOutlined spin={isLoading} />}
+          onClick={() => onReload?.()}
+          loading={isLoading}
+        />
       </Tooltip>
-    </Input.Group>
+    </Space.Compact>
   );
 };
 
diff --git a/apps/portal-web/src/pageComponents/job/SubmitJobForm.tsx b/apps/portal-web/src/pageComponents/job/SubmitJobForm.tsx
@@ -11,7 +11,7 @@
  */
 
 import { parsePlaceholder } from "@scow/lib-config/build/parse";
-import { App, Button, Checkbox, Col, Form, Input, InputNumber, Row, Select } from "antd";
+import { App, Button, Checkbox, Col, Form, Input, InputNumber, Row, Select, Space } from "antd";
 import dayjs from "dayjs";
 import Router from "next/router";
 import { join } from "path";
@@ -511,7 +511,7 @@ export const SubmitJobForm: React.FC<Props> = ({ initial = initialValues, submit
         </Col>
         <Col span={24} sm={6}>
           <Form.Item label={t(p("maxTime"))} required>
-            <Input.Group compact style={{ display: "flex", minWidth: "120px" }}>
+            <Space.Compact style={{ display: "flex", minWidth: "120px" }}>
               <Form.Item
                 name="maxTime"
                 rules={[{ required: true, message: `${t(p("requireMaxTime"))}` }]}
@@ -527,14 +527,14 @@ export const SubmitJobForm: React.FC<Props> = ({ initial = initialValues, submit
               <Form.Item name="maxTimeUnit" rules={[{ required: true }]} noStyle>
                 <Select
                   popupMatchSelectWidth={false}
-                  style={{ flex: "0 1 auto" }}
+                  style={{ flex: "0 1 0" }}
                 >
                   <Select.Option value={TimeUnit.MINUTES}>{t(p("minute"))}</Select.Option>
                   <Select.Option value={TimeUnit.HOURS}>{t(p("hours"))}</Select.Option>
                   <Select.Option value={TimeUnit.DAYS}>{t(p("days"))}</Select.Option>
                 </Select>
               </Form.Item>
-            </Input.Group>
+            </Space.Compact>
 
           </Form.Item>
         </Col>