refactor(config-ui): use new ui checkbox to replace old

apache · Dec 15, 2023 · 34fa77a · 34fa77a
1 parent bf214f9
commit 34fa77a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 23 deletions.
diff --git a/config-ui/src/pages/blueprint/detail/components/sync-policy/index.tsx b/config-ui/src/pages/blueprint/detail/components/sync-policy/index.tsx
@@ -19,8 +19,8 @@
 import { useState, useEffect, useMemo } from 'react';
 import dayjs from 'dayjs';
 import type { RadioChangeEvent } from 'antd';
-import { Radio, Space, Input } from 'antd';
-import { Tag, Checkbox } from '@blueprintjs/core';
+import { Radio, Space, Checkbox, Input } from 'antd';
+import { Tag } from '@blueprintjs/core';
 import { TimePrecision } from '@blueprintjs/datetime';
 import { DateInput2 } from '@blueprintjs/datetime2';
 
@@ -205,11 +205,10 @@ export const SyncPolicy = ({
         </Block>
       </div>
       <Block title="Running Policy">
-        <Checkbox
-          label="Skip failed tasks (Recommended when collecting a large volume of data, eg. 10+ GitHub repos, Jira boards, etc.)"
-          checked={skipOnFail}
-          onChange={(e) => onChangeSkipOnFail((e.target as HTMLInputElement).checked)}
-        />
+        <Checkbox checked={skipOnFail} onChange={(e) => onChangeSkipOnFail(e.target.checked)}>
+          Skip failed tasks (Recommended when collecting a large volume of data, eg. 10+ GitHub repos, Jira boards,
+          etc.)
+        </Checkbox>
         <p style={{ paddingLeft: 28 }}>
           A task is a unit of a pipeline, an execution of a blueprint. By default, when a task is failed, the whole
           pipeline will fail and all the data that has been collected will be discarded. By skipping failed tasks, the

diff --git a/config-ui/src/pages/project/detail/settings-panel.tsx b/config-ui/src/pages/project/detail/settings-panel.tsx
@@ -18,8 +18,8 @@
 
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Flex, Card, Modal, Input, Button, message } from 'antd';
-import { Checkbox, Icon } from '@blueprintjs/core';
+import { Flex, Card, Modal, Input, Checkbox, Button, message } from 'antd';
+import { Icon } from '@blueprintjs/core';
 
 import API from '@/api';
 import { Block } from '@/components';
@@ -106,17 +106,15 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
           <Input style={{ width: 386 }} value={name} onChange={(e) => setName(e.target.value)} />
         </Block>
         <Block description="DORA metrics are four widely-adopted metrics for measuring software delivery performance.">
-          <Checkbox
-            label="Enable DORA Metrics"
-            checked={enableDora}
-            onChange={(e) => setEnableDora((e.target as HTMLInputElement).checked)}
-          />
+          <Checkbox checked={enableDora} onChange={(e) => setEnableDora(e.target.checked)}>
+            Enable DORA Metrics
+          </Checkbox>
         </Block>
-        <Flex>
+        <Block>
           <Button type="primary" loading={operating} disabled={!name} onClick={handleUpdate}>
             Save
           </Button>
-        </Flex>
+        </Block>
       </Card>
       <Flex justify="center">
         <Button type="primary" danger onClick={handleShowDeleteDialog}>

diff --git a/config-ui/src/pages/project/home/index.tsx b/config-ui/src/pages/project/home/index.tsx
@@ -19,8 +19,7 @@
 import { useState, useMemo } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { PlusOutlined, SettingOutlined } from '@ant-design/icons';
-import { Table, Button, Modal, Input, message } from 'antd';
-import { Checkbox } from '@blueprintjs/core';
+import { Table, Button, Modal, Input, Checkbox, message } from 'antd';
 import dayjs from 'dayjs';
 
 import API from '@/api';
@@ -245,11 +244,9 @@ export const ProjectHomePage = () => {
               </>
             }
           >
-            <Checkbox
-              label="Enable DORA Metrics"
-              checked={enableDora}
-              onChange={(e) => setEnableDora((e.target as HTMLInputElement).checked)}
-            />
+            <Checkbox checked={enableDora} onChange={(e) => setEnableDora(e.target.checked)}>
+              Enable DORA Metrics
+            </Checkbox>
           </Block>
         </S.DialogWrapper>
       </Modal>