This is an automated email from the ASF dual-hosted git repository.

mintsweet pushed a commit to branch refactor-6307
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git

commit 279f8662f2e0b1c04c1efdfdfbafb5daf5db8bcb
Author: mintsweet <[email protected]>
AuthorDate: Thu Dec 14 21:17:07 2023 +1300

    refactor(config-ui): use new ui button to replace old
---
 .../pages/blueprint/connection-detail/index.tsx    | 18 ++++++++++------
 .../src/pages/project/detail/settings-panel.tsx    | 12 +++++++----
 .../src/pages/project/detail/webhooks-panel.tsx    | 17 +++++++--------
 .../data-scope-remote/data-scope-remote.tsx        | 18 ++++++----------
 .../plugins/components/data-scope-select/index.tsx | 18 ++++++++++------
 .../plugins/components/scope-config-form/index.tsx | 23 +++++++++-----------
 .../register/github/connection-fields/token.tsx    | 11 ++++++----
 .../jira/transformation-fields/cross-domain.tsx    | 10 ++++-----
 .../jira/transformation-fields/dev-panel.tsx       |  8 ++++---
 config-ui/src/plugins/register/tapd/data-scope.tsx |  6 +++---
 .../register/webhook/components/view-dialog.tsx    |  7 +++---
 config-ui/src/routes/api-keys/api-keys.tsx         | 21 ++++++++++++------
 .../routes/error/components/exception/index.tsx    | 13 ++++++-----
 .../error/components/needs-db-migrate/index.tsx    | 13 +++++------
 .../src/routes/error/components/offline/index.tsx  | 25 +++++++++++++---------
 config-ui/src/routes/pipeline/components/tasks.tsx |  8 ++++---
 16 files changed, 128 insertions(+), 100 deletions(-)

diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx 
b/config-ui/src/pages/blueprint/connection-detail/index.tsx
index 7e9ed4e19..7d275e319 100644
--- a/config-ui/src/pages/blueprint/connection-detail/index.tsx
+++ b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -18,8 +18,8 @@
 
 import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Flex, Table, Popconfirm, Modal } from 'antd';
-import { Button, Intent } from '@blueprintjs/core';
+import { DeleteOutlined, FormOutlined } from '@ant-design/icons';
+import { Flex, Table, Popconfirm, Modal, Button } from 'antd';
 
 import API from '@/api';
 import { PageLoading, PageHeader, ExternalLink, Message } from '@/components';
@@ -108,7 +108,9 @@ export const BlueprintConnectionDetailPage = () => {
     setTips(
       <Flex gap="middle">
         <Message content="The change of Data Scope(s) will affect the metrics 
of this project. Would you like to recollect the data to get them updated?" />
-        <Button loading={operating} intent={Intent.PRIMARY} text="Recollect 
Data" onClick={() => handleRunBP(false)} />
+        <Button type="primary" loading={operating} onClick={() => 
handleRunBP(false)}>
+          Recollect Data
+        </Button>
       </Flex>,
     );
   };
@@ -196,17 +198,21 @@ export const BlueprintConnectionDetailPage = () => {
           okText="Confirm"
           onConfirm={handleRemoveConnection}
         >
-          <Button intent={Intent.DANGER} icon="trash">
+          <Button type="primary" danger icon={<DeleteOutlined rev={undefined} 
/>}>
             Remove this Connection
           </Button>
         </Popconfirm>
       </S.Top>
       <Flex vertical gap="middle">
         <Flex>
-          <Button intent={Intent.PRIMARY} icon="annotation" text="Manage Data 
Scope" onClick={handleShowDataScope} />
+          <Button type="primary" icon={<FormOutlined rev={undefined} />} 
onClick={handleShowDataScope}>
+            Manage Data Scope
+          </Button>
           {pluginConfig.scopeConfig && (
             <ExternalLink style={{ marginLeft: 8 }} 
link={`/connections/${connection.plugin}/${connection.id}`}>
-              <Button intent={Intent.PRIMARY} icon="annotation" text="Edit 
Scope Config" />
+              <Button type="primary" icon={<FormOutlined rev={undefined} />}>
+                Edit Scope Config
+              </Button>
             </ExternalLink>
           )}
         </Flex>
diff --git a/config-ui/src/pages/project/detail/settings-panel.tsx 
b/config-ui/src/pages/project/detail/settings-panel.tsx
index 07d724f49..50bab3e8e 100644
--- 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, message } from 'antd';
-import { Checkbox, Button, Icon, Intent } from '@blueprintjs/core';
+import { Flex, Card, Modal, Input, Button, message } from 'antd';
+import { Checkbox, Icon } from '@blueprintjs/core';
 
 import API from '@/api';
 import { Block } from '@/components';
@@ -113,11 +113,15 @@ export const SettingsPanel = ({ project, onRefresh }: 
Props) => {
           />
         </Block>
         <Flex>
-          <Button text="Save" loading={operating} disabled={!name} 
intent={Intent.PRIMARY} onClick={handleUpdate} />
+          <Button type="primary" loading={operating} disabled={!name} 
onClick={handleUpdate}>
+            Save
+          </Button>
         </Flex>
       </Card>
       <Flex justify="center">
-        <Button intent={Intent.DANGER} text="Delete Project" 
onClick={handleShowDeleteDialog} />
+        <Button type="primary" danger onClick={handleShowDeleteDialog}>
+          Delete Project
+        </Button>
       </Flex>
       <Modal
         open={open}
diff --git a/config-ui/src/pages/project/detail/webhooks-panel.tsx 
b/config-ui/src/pages/project/detail/webhooks-panel.tsx
index 741ae941e..f21dd2011 100644
--- a/config-ui/src/pages/project/detail/webhooks-panel.tsx
+++ b/config-ui/src/pages/project/detail/webhooks-panel.tsx
@@ -18,8 +18,8 @@
 
 import { useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import { Alert } from 'antd';
-import { Button, Intent } from '@blueprintjs/core';
+import { PlusOutlined } from '@ant-design/icons';
+import { Alert, Button } from 'antd';
 
 import API from '@/api';
 import { NoData } from '@/components';
@@ -135,14 +135,13 @@ export const WebhooksPanel = ({ project, onRefresh }: 
Props) => {
             text="Push `incidents` or `deployments` from your tools by 
incoming webhooks."
             action={
               <>
-                <Button intent={Intent.PRIMARY} icon="plus" text="Add a 
Webhook" onClick={() => setType('create')} />
+                <Button type="primary" icon={<PlusOutlined rev={undefined} />} 
onClick={() => setType('create')}>
+                  Add a Webhook
+                </Button>
                 <div style={{ margin: '8px 0' }}>or</div>
-                <Button
-                  outlined
-                  intent={Intent.PRIMARY}
-                  text="Select Existing Webhooks"
-                  onClick={() => setType('selectExist')}
-                />
+                <Button type="primary" onClick={() => setType('selectExist')}>
+                  Select Existing Webhooks
+                </Button>
               </>
             }
           />
diff --git 
a/config-ui/src/plugins/components/data-scope-remote/data-scope-remote.tsx 
b/config-ui/src/plugins/components/data-scope-remote/data-scope-remote.tsx
index 31038e602..6e3388100 100644
--- a/config-ui/src/plugins/components/data-scope-remote/data-scope-remote.tsx
+++ b/config-ui/src/plugins/components/data-scope-remote/data-scope-remote.tsx
@@ -17,8 +17,7 @@
  */
 
 import { useState, useMemo } from 'react';
-import { Flex } from 'antd';
-import { Button, Intent } from '@blueprintjs/core';
+import { Flex, Button } from 'antd';
 
 import API from '@/api';
 import { getPluginConfig } from '@/plugins';
@@ -84,15 +83,12 @@ export const DataScopeRemote = ({ plugin, connectionId, 
disabledScope, onCancel,
         />
       )}
       <Flex justify="flex-end" gap="small">
-        <Button outlined intent={Intent.PRIMARY} text="Cancel" 
disabled={operating} onClick={onCancel} />
-        <Button
-          outlined
-          intent={Intent.PRIMARY}
-          text="Save"
-          loading={operating}
-          disabled={!selectedScope.length}
-          onClick={handleSubmit}
-        />
+        <Button disabled={operating} onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button type="primary" loading={operating} 
disabled={!selectedScope.length} onClick={handleSubmit}>
+          Save
+        </Button>
       </Flex>
     </Flex>
   );
diff --git a/config-ui/src/plugins/components/data-scope-select/index.tsx 
b/config-ui/src/plugins/components/data-scope-select/index.tsx
index 3f1e86092..9d2084c63 100644
--- a/config-ui/src/plugins/components/data-scope-select/index.tsx
+++ b/config-ui/src/plugins/components/data-scope-select/index.tsx
@@ -17,8 +17,8 @@
  */
 
 import { useState, useEffect, useMemo } from 'react';
-import { Flex, Select } from 'antd';
-import { Button, Intent } from '@blueprintjs/core';
+import { RedoOutlined, PlusOutlined } from '@ant-design/icons';
+import { Flex, Select, Button } from 'antd';
 import { useDebounce } from 'ahooks';
 import type { McsItem } from 'miller-columns-select';
 import MillerColumnsSelect from 'miller-columns-select';
@@ -130,7 +130,9 @@ export const DataScopeSelect = ({
             />
           ) : (
             <Flex>
-              <Button intent={Intent.PRIMARY} icon="refresh" text="Refresh 
Data Scope" />
+              <Button type="primary" icon={<RedoOutlined rev={undefined} />}>
+                Refresh Data Scope
+              </Button>
             </Flex>
           )}
           <Select
@@ -153,14 +155,18 @@ export const DataScopeSelect = ({
             onSelectItemIds={setSelectedIds}
           />
           <Flex justify="flex-end" gap="small">
-            <Button outlined intent={Intent.PRIMARY} text="Cancel" 
onClick={onCancel} />
-            <Button disabled={!selectedIds.length} intent={Intent.PRIMARY} 
text="Save" onClick={handleSubmit} />
+            <Button onClick={onCancel}>Cancel</Button>
+            <Button type="primary" disabled={!selectedIds.length} 
onClick={handleSubmit}>
+              Save
+            </Button>
           </Flex>
         </Flex>
       ) : (
         <Flex>
           <ExternalLink link={`/connections/${plugin}/${connectionId}`}>
-            <Button intent={Intent.PRIMARY} icon="add" text="Add Data Scope" />
+            <Button type="primary" icon={<PlusOutlined rev={undefined} />}>
+              Add Data Scope
+            </Button>
           </ExternalLink>
         </Flex>
       )}
diff --git a/config-ui/src/plugins/components/scope-config-form/index.tsx 
b/config-ui/src/plugins/components/scope-config-form/index.tsx
index 4d1be1e88..f7f359eb4 100644
--- a/config-ui/src/plugins/components/scope-config-form/index.tsx
+++ b/config-ui/src/plugins/components/scope-config-form/index.tsx
@@ -18,12 +18,11 @@
 
 import { useState, useEffect, useMemo } from 'react';
 import { omit } from 'lodash';
-import { Flex, Form, Input, Card, Alert, Divider, Select } from 'antd';
-import { Button, Intent } from '@blueprintjs/core';
+import { Flex, Form, Input, Card, Alert, Divider, Select, Button } from 'antd';
 
 import API from '@/api';
 import { ExternalLink, Block, Message } from '@/components';
-import { transformEntities, EntitiesLabel } from '@/config';
+import { transformEntities } from '@/config';
 import { getPluginConfig } from '@/plugins';
 import { GitHubTransformation } from '@/plugins/register/github';
 import { JiraTransformation } from '@/plugins/register/jira';
@@ -162,8 +161,10 @@ export const ScopeConfigForm = ({
             )}
           </Card>
           <Flex justify="flex-end" gap="small">
-            <Button outlined intent={Intent.PRIMARY} text="Cancel" 
onClick={onCancel} />
-            <Button disabled={!name || !entities.length} 
intent={Intent.PRIMARY} text="Next" onClick={handleNextStep} />
+            <Button onClick={onCancel}>Cancel</Button>
+            <Button type="primary" disabled={!name || !entities.length} 
onClick={handleNextStep}>
+              Next
+            </Button>
           </Flex>
         </>
       )}
@@ -251,14 +252,10 @@ export const ScopeConfigForm = ({
             </Form>
           </Card>
           <Flex justify="flex-end" gap="small">
-            <Button outlined intent={Intent.PRIMARY} text="Prev" 
onClick={handlePrevStep} />
-            <Button
-              loading={operating}
-              disabled={hasError}
-              intent={Intent.PRIMARY}
-              text="Save"
-              onClick={handleSubmit}
-            />
+            <Button onClick={handlePrevStep}>Prev</Button>
+            <Button type="primary" loading={operating} disabled={hasError} 
onClick={handleSubmit}>
+              Save
+            </Button>
           </Flex>
         </>
       )}
diff --git a/config-ui/src/plugins/register/github/connection-fields/token.tsx 
b/config-ui/src/plugins/register/github/connection-fields/token.tsx
index 96826ce6f..b31d07154 100644
--- a/config-ui/src/plugins/register/github/connection-fields/token.tsx
+++ b/config-ui/src/plugins/register/github/connection-fields/token.tsx
@@ -17,8 +17,9 @@
  */
 
 import { useEffect, useState } from 'react';
-import { Input } from 'antd';
-import { FormGroup, Button, Icon, Intent } from '@blueprintjs/core';
+import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
+import { Input, Button } from 'antd';
+import { FormGroup, Icon } from '@blueprintjs/core';
 
 import API from '@/api';
 import { ExternalLink } from '@/components';
@@ -155,7 +156,7 @@ export const Token = ({
               onChange={(e) => handleChangeToken(i, e.target.value)}
               onBlur={() => handleTestToken(i)}
             />
-            <Button minimal icon="cross" onClick={() => handleRemoveToken(i)} 
/>
+            <Button size="small" icon={<CloseOutlined rev={undefined} />} 
onClick={() => handleRemoveToken(i)} />
             <div className="info">
               {isValid === false && <span className="error">Invalid</span>}
               {isValid === true && <span className="success">Valid From: 
{from}</span>}
@@ -187,7 +188,9 @@ export const Token = ({
         </S.Input>
       ))}
       <div className="action">
-        <Button outlined small intent={Intent.PRIMARY} text="Another Token" 
icon="plus" onClick={handleCreateToken} />
+        <Button type="primary" size="small" icon={<PlusOutlined 
rev={undefined} />} onClick={handleCreateToken}>
+          Another Token
+        </Button>
       </div>
     </FormGroup>
   );
diff --git 
a/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx 
b/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx
index bf9f8a6a4..5abf1bc66 100644
--- a/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx
+++ b/config-ui/src/plugins/register/jira/transformation-fields/cross-domain.tsx
@@ -17,7 +17,8 @@
  */
 
 import { useEffect, useState } from 'react';
-import { Radio, Icon, Collapse, Button } from '@blueprintjs/core';
+import { Button } from 'antd';
+import { Radio, Icon, Collapse } from '@blueprintjs/core';
 
 import { ExternalLink } from '@/components';
 import JiraIssueTipsImg from '@/images/jira-issue-tips.png';
@@ -100,10 +101,9 @@ export const CrossDomain = ({ connectionId, 
transformation, setTransformation }:
                     
<span>{transformation.remotelinkRepoPattern[0]?.pattern}</span>
                   </div>
                 )}
-                <Button
-                  text={!transformation.applicationType ? 'Configure' : 'Edit 
Configuration'}
-                  onClick={() => setOpen(true)}
-                />
+                <Button onClick={() => setOpen(true)}>
+                  {!transformation.applicationType ? 'Configure' : 'Edit 
Configuration'}
+                </Button>
                 <DevPanel
                   connectionId={connectionId}
                   transformation={transformation}
diff --git 
a/config-ui/src/plugins/register/jira/transformation-fields/dev-panel.tsx 
b/config-ui/src/plugins/register/jira/transformation-fields/dev-panel.tsx
index 690330e8b..d01470005 100644
--- a/config-ui/src/plugins/register/jira/transformation-fields/dev-panel.tsx
+++ b/config-ui/src/plugins/register/jira/transformation-fields/dev-panel.tsx
@@ -17,8 +17,8 @@
  */
 
 import { useEffect, useState } from 'react';
-import { Modal, Input, message } from 'antd';
-import { Button, RadioGroup, Radio, Icon, Collapse } from '@blueprintjs/core';
+import { Modal, Input, Button, message } from 'antd';
+import { RadioGroup, Radio, Icon, Collapse } from '@blueprintjs/core';
 
 import API from '@/api';
 import { Block } from '@/components';
@@ -150,7 +150,9 @@ export const DevPanel = ({ connectionId, transformation, 
setTransformation, open
             >
               <div className="search">
                 <Input placeholder="Please enter..." value={issueKey} 
onChange={(e) => setIssueKey(e.target.value)} />
-                <Button loading={searching} disabled={!issueKey} text="See 
Results" onClick={handleSearch} />
+                <Button loading={searching} disabled={!issueKey} 
onClick={handleSearch}>
+                  See Results
+                </Button>
               </div>
             </Block>
             {applicationTypes.length > 0 && (
diff --git a/config-ui/src/plugins/register/tapd/data-scope.tsx 
b/config-ui/src/plugins/register/tapd/data-scope.tsx
index cd801ba2b..3701a05b7 100644
--- a/config-ui/src/plugins/register/tapd/data-scope.tsx
+++ b/config-ui/src/plugins/register/tapd/data-scope.tsx
@@ -17,8 +17,8 @@
  */
 
 import { useEffect, useState } from 'react';
-import { Input } from 'antd';
-import { Button, ControlGroup, Intent } from '@blueprintjs/core';
+import { Input, Button } from 'antd';
+import { ControlGroup } from '@blueprintjs/core';
 import type { McsID, McsItem } from 'miller-columns-select';
 import MillerColumnsSelect from 'miller-columns-select';
 
@@ -102,7 +102,7 @@ export const DataScope = ({ connectionId, disabledItems, 
selectedItems, onChange
             
localStorage.setItem(`plugin/tapd/connections/${connectionId}/company_id`, 
e.target.value);
           }}
         />
-        <Button intent={Intent.PRIMARY} onClick={() => 
getPageToken(companyId)}>
+        <Button type="primary" onClick={() => getPageToken(companyId)}>
           Search
         </Button>
       </ControlGroup>
diff --git a/config-ui/src/plugins/register/webhook/components/view-dialog.tsx 
b/config-ui/src/plugins/register/webhook/components/view-dialog.tsx
index 360868f0b..a3a21c176 100644
--- a/config-ui/src/plugins/register/webhook/components/view-dialog.tsx
+++ b/config-ui/src/plugins/register/webhook/components/view-dialog.tsx
@@ -17,8 +17,7 @@
  */
 
 import { useState, useMemo } from 'react';
-import { Modal } from 'antd';
-import { Button, Intent } from '@blueprintjs/core';
+import { Modal, Button } from 'antd';
 
 import { useAppDispatch, useAppSelector } from '@/app/hook';
 import { Block, CopyText, ExternalLink, Message } from '@/components';
@@ -128,7 +127,9 @@ export const ViewDialog = ({ initialId, onCancel }: Props) 
=> {
           description="If you have forgotten your API key, you can revoke the 
previous key and generate a new one as a replacement."
         >
           {!apiKey ? (
-            <Button intent={Intent.PRIMARY} text="Revoke and generate a new 
key" onClick={() => setOpen(true)} />
+            <Button type="primary" onClick={() => setOpen(true)}>
+              Revoke and generate a new key
+            </Button>
           ) : (
             <>
               <S.ApiKey>
diff --git a/config-ui/src/routes/api-keys/api-keys.tsx 
b/config-ui/src/routes/api-keys/api-keys.tsx
index 6271b4674..96b0eb39b 100644
--- a/config-ui/src/routes/api-keys/api-keys.tsx
+++ b/config-ui/src/routes/api-keys/api-keys.tsx
@@ -17,8 +17,9 @@
  */
 
 import { useState, useMemo } from 'react';
-import { Table, Modal, Input, Select } from 'antd';
-import { Button, Tag, Intent } from '@blueprintjs/core';
+import { PlusOutlined } from '@ant-design/icons';
+import { Table, Modal, Input, Select, Button } from 'antd';
+import { Tag } from '@blueprintjs/core';
 import dayjs from 'dayjs';
 
 import API from '@/api';
@@ -93,7 +94,11 @@ export const ApiKeys = () => {
   return (
     <PageHeader
       breadcrumbs={[{ name: 'API Keys', path: '/keys' }]}
-      extra={<Button intent={Intent.PRIMARY} icon="plus" text="New API Key" 
onClick={() => setModal('create')} />}
+      extra={
+        <Button type="primary" icon={<PlusOutlined rev={undefined} />} 
onClick={() => setModal('create')}>
+          New API Key
+        </Button>
+      }
     >
       <p>You can generate and manage your API keys to access the DevLake 
API.</p>
       <Table
@@ -132,14 +137,16 @@ export const ApiKeys = () => {
             width: 100,
             render: (id) => (
               <Button
-                small
-                intent={Intent.DANGER}
-                text="Revoke"
+                size="small"
+                type="primary"
+                danger
                 onClick={() => {
                   setCurrentId(id);
                   setModal('delete');
                 }}
-              />
+              >
+                Revoke
+              </Button>
             ),
           },
         ]}
diff --git a/config-ui/src/routes/error/components/exception/index.tsx 
b/config-ui/src/routes/error/components/exception/index.tsx
index d39e2d0d2..c0ab88d8a 100644
--- a/config-ui/src/routes/error/components/exception/index.tsx
+++ b/config-ui/src/routes/error/components/exception/index.tsx
@@ -17,8 +17,8 @@
  */
 
 import { useNavigate } from 'react-router-dom';
-import { Card, Flex } from 'antd';
-import { Icon, Colors, Button, Intent } from '@blueprintjs/core';
+import { Card, Flex, Button } from 'antd';
+import { Icon, Colors } from '@blueprintjs/core';
 
 interface Props {
   error: string | Error;
@@ -40,11 +40,14 @@ export const Exception = ({ error }: Props) => {
         solutions to common issues.
       </p>
       <Flex justify="center">
-        <Button text="Continue" intent={Intent.PRIMARY} 
onClick={handleResetError} />
+        <Button type="primary" onClick={handleResetError}>
+          Continue
+        </Button>
         <Button
-          text="Visit GitHub"
           onClick={() => 
window.open('https://github.com/apache/incubator-devlake', '_blank', 
'noopener,noreferrer')}
-        />
+        >
+          Visit GitHub
+        </Button>
       </Flex>
     </Card>
   );
diff --git a/config-ui/src/routes/error/components/needs-db-migrate/index.tsx 
b/config-ui/src/routes/error/components/needs-db-migrate/index.tsx
index 80c6bbc6d..8c8571e03 100644
--- a/config-ui/src/routes/error/components/needs-db-migrate/index.tsx
+++ b/config-ui/src/routes/error/components/needs-db-migrate/index.tsx
@@ -17,8 +17,8 @@
  */
 
 import { useState } from 'react';
-import { Card, Flex } from 'antd';
-import { Icon, Button, Colors, Intent } from '@blueprintjs/core';
+import { Card, Flex, Button } from 'antd';
+import { Icon, Colors } from '@blueprintjs/core';
 import { useNavigate } from 'react-router-dom';
 
 import API from '@/api';
@@ -53,12 +53,9 @@ export const NeedsDBMigrate = () => {
         Warning: Performing migration may wipe collected data for consistency 
and re-collecting data may be required.
       </p>
       <Flex justify="center">
-        <Button
-          loading={operating}
-          text="Proceed to Database Migration"
-          intent={Intent.PRIMARY}
-          onClick={handleSubmit}
-        />
+        <Button type="primary" loading={operating} onClick={handleSubmit}>
+          Proceed to Database Migration
+        </Button>
       </Flex>
     </Card>
   );
diff --git a/config-ui/src/routes/error/components/offline/index.tsx 
b/config-ui/src/routes/error/components/offline/index.tsx
index 85984785c..a53070dd1 100644
--- a/config-ui/src/routes/error/components/offline/index.tsx
+++ b/config-ui/src/routes/error/components/offline/index.tsx
@@ -18,8 +18,9 @@
 
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Card, Flex } from 'antd';
-import { Icon, Tag, Button, Intent, Colors, IconName } from 
'@blueprintjs/core';
+import { RedoOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { Card, Flex, Button } from 'antd';
+import { Icon, Tag, Colors, IconName } from '@blueprintjs/core';
 
 import API from '@/api';
 import { DEVLAKE_ENDPOINT } from '@/config';
@@ -77,22 +78,24 @@ export const Offline = () => {
           </p>
           <Flex justify="center">
             <Button
+              type="primary"
               loading={loading}
-              icon="refresh"
-              intent={Intent.PRIMARY}
-              text="Refresh"
+              icon={<RedoOutlined rev={undefined} />}
               onClick={() => setVersion((v) => v + 1)}
-            />
+            >
+              Refresh
+            </Button>
           </Flex>
         </>
       ) : (
         <>
           <p>Connectivity to the Lake API service was successful.</p>
           <Flex justify="center">
-            <Button intent={Intent.PRIMARY} text="Continue" 
onClick={handleContinue} />
+            <Button type="primary" onClick={handleContinue}>
+              Continue
+            </Button>
             <Button
-              icon="help"
-              text="Read Documentation"
+              icon={<QuestionCircleOutlined rev={undefined} />}
               onClick={() =>
                 window.open(
                   
'https://github.com/apache/incubator-devlake/blob/main/README.md',
@@ -100,7 +103,9 @@ export const Offline = () => {
                   'noopener,noreferrer',
                 )
               }
-            />
+            >
+              Read Documentation
+            </Button>
           </Flex>
         </>
       )}
diff --git a/config-ui/src/routes/pipeline/components/tasks.tsx 
b/config-ui/src/routes/pipeline/components/tasks.tsx
index 3c51ceba7..a0402d9ea 100644
--- a/config-ui/src/routes/pipeline/components/tasks.tsx
+++ b/config-ui/src/routes/pipeline/components/tasks.tsx
@@ -17,7 +17,9 @@
  */
 
 import { useState } from 'react';
-import { Button, Collapse, Icon } from '@blueprintjs/core';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { Collapse, Icon } from '@blueprintjs/core';
 import { groupBy, sortBy } from 'lodash';
 
 import API from '@/api';
@@ -112,9 +114,9 @@ export const PipelineTasks = ({ id, style }: Props) => {
         </Collapse>
       </div>
       <Button
+        size="small"
         className="collapse-control"
-        minimal
-        icon={isOpen ? 'chevron-down' : 'chevron-up'}
+        icon={isOpen ? <DownOutlined rev={undefined} /> : <UpOutlined 
rev={undefined} />}
         onClick={handleToggleOpen}
       />
     </S.Tasks>

Reply via email to