apache · klesh · Dec 19, 2023 · Dec 18, 2023 · Dec 18, 2023 · Dec 18, 2023
diff --git a/config-ui/README.md b/config-ui/README.md
@@ -5,7 +5,7 @@ The **Config-UI Application** is a **React.js** SPA (Single-Page-Application) th
 #### Technology / Stack Overview
 
 - React
-- Blueprint
+- Antd
 - Vite
 - TypeScript
 - Yarn3

diff --git a/config-ui/package.json b/config-ui/package.json
@@ -24,10 +24,6 @@
   "dependencies": {
     "@ahooksjs/use-url-state": "^3.5.1",
     "@ant-design/icons": "^5.2.6",
-    "@blueprintjs/core": "^5.3.0",
-    "@blueprintjs/datetime2": "^1.0.10",
-    "@blueprintjs/popover2": "^2.0.10",
-    "@blueprintjs/select": "^5.0.10",
     "@reduxjs/toolkit": "^1.9.7",
     "ahooks": "^3.7.8",
     "antd": "^5.11.1",
@@ -46,28 +42,28 @@
     "react-router-dom": "^6.14.1",
     "react-transition-group": "^4.4.5",
     "redux": "^4.2.1",
-    "styled-components": "^5.3.6"
+    "styled-components": "^6.1.1"
   },
   "devDependencies": {
     "@types/file-saver": "^2.0.5",
     "@types/node": "^18.15.1",
-    "@types/react": "^18.0.24",
+    "@types/react": "^17.0.73",
     "@types/react-copy-to-clipboard": "^5.0.4",
-    "@types/react-dom": "^18.0.10",
+    "@types/react-dom": "^17.0.25",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.6",
-    "@types/styled-components": "^5.1.26",
+    "@types/styled-components": "^5.1.34",
     "@vitejs/plugin-react": "^3.1.0",
-    "eslint": "^8.30.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^8.10.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-header": "^3.1.1",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.0",
     "lint-staged": "^13.1.0",
     "prettier": "^2.7.1",
-    "typescript": "^4.9.4",
-    "vite": "^4.2.3",
+    "typescript": "^4.9.5",
+    "vite": "^4.5.1",
     "vite-plugin-svgr": "^4.2.0"
   }
 }
diff --git a/config-ui/src/components/action/copy-text/index.tsx b/config-ui/src/components/action/copy-text/index.tsx
@@ -42,7 +42,7 @@ export const CopyText = ({ content }: Props) => {
         {content}
       </TextTooltip>
       <CopyToClipboard text={content} onCopy={() => message.success('Copy successfully.')}>
-        <Button icon={<CopyOutlined rev={undefined} />} />
+        <Button icon={<CopyOutlined />} />
       </CopyToClipboard>
     </Wrapper>
   );

diff --git a/config-ui/src/components/message/index.tsx b/config-ui/src/components/message/index.tsx
@@ -33,7 +33,7 @@ interface Props {
 export const Message = ({ style, size = 20, content }: Props) => {
   return (
     <Wrapper style={style}>
-      <WarningOutlined rev={undefined} size={size} color="#f4be55" />
+      <WarningOutlined size={size} color="#f4be55" />
       <span>{content}</span>
     </Wrapper>
   );

diff --git a/config-ui/src/components/page-header/index.tsx b/config-ui/src/components/page-header/index.tsx
@@ -40,7 +40,7 @@ export const PageHeader = ({ breadcrumbs, extra, children }: Props) => {
               {breadcrumbs.length !== i + 1 ? (
                 <Link to={path}>
                   {name}
-                  <RightOutlined rev={undefined} />
+                  <RightOutlined />
                 </Link>
               ) : (
                 <span>{name}</span>

diff --git a/config-ui/src/components/tooltip/help-tooltip/index.tsx b/config-ui/src/components/tooltip/help-tooltip/index.tsx
@@ -34,7 +34,7 @@ export const HelpTooltip = ({ content, style }: Props) => {
   return (
     <Wrapper style={style}>
       <Tooltip title={content} placement="top">
-        <QuestionCircleOutlined rev={undefined} />
+        <QuestionCircleOutlined />
       </Tooltip>
     </Wrapper>
   );

diff --git a/config-ui/src/index.css b/config-ui/src/index.css
@@ -16,13 +16,6 @@
  *
  */
 
-@import 'normalize.css';
-@import '@blueprintjs/core/lib/css/blueprint.css';
-@import '@blueprintjs/icons/lib/css/blueprint-icons.css';
-@import '@blueprintjs/select/lib/css/blueprint-select.css';
-@import '@blueprintjs/popover2/lib/css/blueprint-popover2.css';
-@import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
-
 body {
   color: #292b3f;
 }

diff --git a/config-ui/src/pages/blueprint/connection-detail/index.tsx b/config-ui/src/pages/blueprint/connection-detail/index.tsx
@@ -198,19 +198,19 @@ export const BlueprintConnectionDetailPage = () => {
           okText="Confirm"
           onConfirm={handleRemoveConnection}
         >
-          <Button type="primary" danger icon={<DeleteOutlined rev={undefined} />}>
+          <Button type="primary" danger icon={<DeleteOutlined />}>
             Remove this Connection
           </Button>
         </Popconfirm>
       </S.Top>
       <Flex vertical gap="middle">
         <Flex>
-          <Button type="primary" icon={<FormOutlined rev={undefined} />} onClick={handleShowDataScope}>
+          <Button type="primary" icon={<FormOutlined />} onClick={handleShowDataScope}>
             Manage Data Scope
           </Button>
           {pluginConfig.scopeConfig && (
             <ExternalLink style={{ marginLeft: 8 }} link={`/connections/${connection.plugin}/${connection.id}`}>
-              <Button type="primary" icon={<FormOutlined rev={undefined} />}>
+              <Button type="primary" icon={<FormOutlined />}>
                 Edit Scope Config
               </Button>
             </ExternalLink>

diff --git a/config-ui/src/pages/blueprint/detail/components/advanced-editor/index.tsx b/config-ui/src/pages/blueprint/detail/components/advanced-editor/index.tsx
@@ -67,11 +67,7 @@ export const AdvancedEditor = ({ value, onChange }: Props) => {
       </p>
       <Input.TextArea rows={6} value={value} onChange={(e) => onChange(e.target.value)} />
       <Space>
-        <Button
-          size="small"
-          icon={<ClearOutlined rev={undefined} />}
-          onClick={() => onChange(JSON.stringify([[]], null, '  '))}
-        >
+        <Button size="small" icon={<ClearOutlined />} onClick={() => onChange(JSON.stringify([[]], null, '  '))}>
           Reset
         </Button>
         <Dropdown
@@ -88,7 +84,7 @@ export const AdvancedEditor = ({ value, onChange }: Props) => {
             },
           }}
         >
-          <Button size="small" icon={<CaretDownOutlined rev={undefined} />}>
+          <Button size="small" icon={<CaretDownOutlined />}>
             Load Templates
           </Button>
         </Dropdown>

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
@@ -117,6 +117,7 @@ export const SyncPolicy = ({
           </div>
 
           <div className="time-selection">
+            {/* @ts-ignore */}
             <DatePicker
               value={timeAfter ? dayjs(timeAfter) : null}
               placeholder="Select start from"

diff --git a/config-ui/src/pages/blueprint/detail/configuration-panel.tsx b/config-ui/src/pages/blueprint/detail/configuration-panel.tsx
@@ -126,14 +126,14 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
         <h3>Blueprint Name</h3>
         <Space>
           <span>{blueprint.name}</span>
-          <Button type="primary" icon={<FormOutlined rev={undefined} />} onClick={handleShowNameDialog} />
+          <Button type="primary" icon={<FormOutlined />} onClick={handleShowNameDialog} />
         </Space>
       </div>
       <div className="block">
         <h3>
           <Space>
             <span>Sync Policy</span>
-            <Button type="primary" icon={<FormOutlined rev={undefined} />} onClick={handleShowPolicyDialog} />
+            <Button type="primary" icon={<FormOutlined />} onClick={handleShowPolicyDialog} />
           </Space>
         </h3>
         <Table
@@ -188,15 +188,15 @@ export const ConfigurationPanel = ({ from, blueprint, onRefresh, onChangeTab }:
                 </>
               }
               action={
-                <Button type="primary" icon={<PlusOutlined rev={undefined} />} onClick={handleShowAddConnectionDialog}>
+                <Button type="primary" icon={<PlusOutlined />} onClick={handleShowAddConnectionDialog}>
                   Add a Connection
                 </Button>
               }
             />
           ) : (
             <Flex vertical gap="middle">
               <Flex>
-                <Button type="primary" icon={<PlusOutlined rev={undefined} />} onClick={handleShowAddConnectionDialog}>
+                <Button type="primary" icon={<PlusOutlined />} onClick={handleShowAddConnectionDialog}>
                   Add a Connection
                 </Button>
               </Flex>

diff --git a/config-ui/src/pages/blueprint/detail/status-panel.tsx b/config-ui/src/pages/blueprint/detail/status-panel.tsx
@@ -158,7 +158,7 @@ export const StatusPanel = ({ from, blueprint, pipelineId, onRefresh }: Props) =
               },
             }}
           >
-            <Button icon={<MoreOutlined rev={undefined} />} />
+            <Button icon={<MoreOutlined />} />
           </Dropdown>
         </S.ProjectACtion>
       )}
@@ -178,7 +178,7 @@ export const StatusPanel = ({ from, blueprint, pipelineId, onRefresh }: Props) =
               type="primary"
               loading={operating}
               disabled={!!blueprint.projectName}
-              icon={<DeleteOutlined rev={undefined} />}
+              icon={<DeleteOutlined />}
               onClick={() => setType('delete')}
             />
           </Tooltip>

diff --git a/config-ui/src/pages/blueprint/home/index.tsx b/config-ui/src/pages/blueprint/home/index.tsx
@@ -108,7 +108,7 @@ export const BlueprintHomePage = () => {
               </Radio>
             ))}
           </Radio.Group>
-          <Button type="primary" icon={<PlusOutlined rev={undefined} />} onClick={handleShowDialog}>
+          <Button type="primary" icon={<PlusOutlined />} onClick={handleShowDialog}>
             New Blueprint
           </Button>
         </Flex>
@@ -193,7 +193,7 @@ export const BlueprintHomePage = () => {
               align: 'center',
               render: (val) => (
                 <Link to={`/advanced/blueprints/${val}?tab=configuration`}>
-                  <Button type="primary" icon={<SettingOutlined rev={undefined} />} />
+                  <Button type="primary" icon={<SettingOutlined />} />
                 </Link>
               ),
             },

diff --git a/config-ui/src/pages/project/detail/settings-panel.tsx b/config-ui/src/pages/project/detail/settings-panel.tsx
@@ -134,7 +134,7 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
         onOk={handleDelete}
       >
         <S.DialogBody>
-          <WarningOutlined rev={undefined} />
+          <WarningOutlined />
           <span>
             This operation cannot be undone. Deleting a Data Connection will delete all data that have been collected in
             this Connection.

diff --git a/config-ui/src/pages/project/detail/webhooks-panel.tsx b/config-ui/src/pages/project/detail/webhooks-panel.tsx
@@ -135,7 +135,7 @@ export const WebhooksPanel = ({ project, onRefresh }: Props) => {
             text="Push `incidents` or `deployments` from your tools by incoming webhooks."
             action={
               <>
-                <Button type="primary" icon={<PlusOutlined rev={undefined} />} onClick={() => setType('create')}>
+                <Button type="primary" icon={<PlusOutlined />} onClick={() => setType('create')}>
                   Add a Webhook
                 </Button>
                 <div style={{ margin: '8px 0' }}>or</div>

diff --git a/config-ui/src/pages/project/home/index.tsx b/config-ui/src/pages/project/home/index.tsx
@@ -121,7 +121,7 @@ export const ProjectHomePage = () => {
     <PageHeader
       breadcrumbs={[{ name: 'Projects', path: '/projects' }]}
       extra={
-        <Button type="primary" icon={<PlusOutlined rev={undefined} />} onClick={handleShowDialog}>
+        <Button type="primary" icon={<PlusOutlined />} onClick={handleShowDialog}>
           New Project
         </Button>
       }
@@ -193,7 +193,7 @@ export const ProjectHomePage = () => {
             render: (name: any) => (
               <Button
                 type="primary"
-                icon={<SettingOutlined rev={undefined} />}
+                icon={<SettingOutlined />}
                 onClick={() => navigate(`/projects/${encodeName(name)}?tab=configuration`)}
               />
             ),

diff --git a/config-ui/src/plugins/components/connection-list/index.tsx b/config-ui/src/plugins/components/connection-list/index.tsx
@@ -99,14 +99,10 @@ export const ConnectionList = ({ plugin, onCreate }: Props) => {
             width: 200,
             render: (_, { plugin, id }) => (
               <>
-                <Button
-                  type="link"
-                  icon={<EyeOutlined rev={undefined} />}
-                  onClick={() => navigate(`/connections/${plugin}/${id}`)}
-                >
+                <Button type="link" icon={<EyeOutlined />} onClick={() => navigate(`/connections/${plugin}/${id}`)}>
                   Details
                 </Button>
-                <Button type="link" icon={<EditOutlined rev={undefined} />} onClick={() => handleShowForm(id)}>
+                <Button type="link" icon={<EditOutlined />} onClick={() => handleShowForm(id)}>
                   Edit
                 </Button>
               </>
@@ -116,7 +112,7 @@ export const ConnectionList = ({ plugin, onCreate }: Props) => {
         dataSource={connections}
         pagination={false}
       />
-      <Button style={{ marginTop: 16 }} type="primary" icon={<PlusOutlined rev={undefined} />} onClick={onCreate}>
+      <Button style={{ marginTop: 16 }} type="primary" icon={<PlusOutlined />} onClick={onCreate}>
         Create a New Connection
       </Button>
       <Modal

diff --git a/config-ui/src/plugins/components/connection-status/index.tsx b/config-ui/src/plugins/components/connection-status/index.tsx
@@ -60,11 +60,7 @@ export const ConnectionStatus = ({ connection }: Props) => {
     <Wrapper>
       <span className={status}>{STATUS_MAP[status]}</span>
       {status !== IConnectionStatus.ONLINE && (
-        <Button
-          loading={status === IConnectionStatus.TESTING}
-          icon={<RedoOutlined rev={undefined} />}
-          onClick={handleTest}
-        />
+        <Button loading={status === IConnectionStatus.TESTING} icon={<RedoOutlined />} onClick={handleTest} />
       )}
     </Wrapper>
   );

diff --git a/config-ui/src/plugins/components/data-scope-remote/search-local.tsx b/config-ui/src/plugins/components/data-scope-remote/search-local.tsx
@@ -217,7 +217,7 @@ export const SearchLocal = ({ plugin, connectionId, config, disabledScope, selec
 
         {status === 'loaded' && (
           <S.JobLoad>
-            <CheckCircleFilled style={{ color: '#4DB764' }} rev={undefined} />
+            <CheckCircleFilled style={{ color: '#4DB764' }} />
             <span className="count">{miller.items.length}</span> scopes found
           </S.JobLoad>
         )}
@@ -232,7 +232,7 @@ export const SearchLocal = ({ plugin, connectionId, config, disabledScope, selec
       </Form.Item>
       <Form.Item>
         {status === 'loaded' && (
-          <Input prefix={<SearchOutlined rev={undefined} />} value={query} onChange={(e) => setQuery(e.target.value)} />
+          <Input prefix={<SearchOutlined />} value={query} onChange={(e) => setQuery(e.target.value)} />
         )}
         <MillerColumnsSelect
           items={scopes}

diff --git a/config-ui/src/plugins/components/data-scope-remote/search-remote.tsx b/config-ui/src/plugins/components/data-scope-remote/search-remote.tsx
@@ -170,7 +170,7 @@ export const SearchRemote = ({ plugin, connectionId, config, disabledScope, sele
       </Form.Item>
       <Form.Item>
         <Input
-          prefix={<SearchOutlined rev={undefined} />}
+          prefix={<SearchOutlined />}
           placeholder={config.searchPlaceholder ?? 'Search'}
           value={search.query}
           onChange={(e) => setSearch({ ...search, query: e.target.value })}

diff --git a/config-ui/src/plugins/components/data-scope-select/index.tsx b/config-ui/src/plugins/components/data-scope-select/index.tsx
@@ -130,7 +130,7 @@ export const DataScopeSelect = ({
             />
           ) : (
             <Flex>
-              <Button type="primary" icon={<RedoOutlined rev={undefined} />}>
+              <Button type="primary" icon={<RedoOutlined />}>
                 Refresh Data Scope
               </Button>
             </Flex>
@@ -164,7 +164,7 @@ export const DataScopeSelect = ({
       ) : (
         <Flex>
           <ExternalLink link={`/connections/${plugin}/${connectionId}`}>
-            <Button type="primary" icon={<PlusOutlined rev={undefined} />}>
+            <Button type="primary" icon={<PlusOutlined />}>
               Add Data Scope
             </Button>
           </ExternalLink>

diff --git a/config-ui/src/plugins/components/scope-config-select/index.tsx b/config-ui/src/plugins/components/scope-config-select/index.tsx
@@ -73,7 +73,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
   return (
     <Flex vertical gap="middle">
       <Flex>
-        <Button type="primary" icon={<PlusOutlined rev={undefined} />} onClick={handleShowDialog}>
+        <Button type="primary" icon={<PlusOutlined />} onClick={handleShowDialog}>
           Add New Scope Config
         </Button>
       </Flex>
@@ -89,9 +89,7 @@ export const ScopeConfigSelect = ({ plugin, connectionId, scopeConfigId, onCance
             key: 'id',
             width: 100,
             render: (id) =>
-              id !== 'None' ? (
-                <Button type="link" icon={<EditOutlined rev={undefined} />} onClick={() => handleUpdate(id)} />
-              ) : null,
+              id !== 'None' ? <Button type="link" icon={<EditOutlined />} onClick={() => handleUpdate(id)} /> : null,
           },
         ]}
         dataSource={dataSource}
-Original file line number
+Diff line change
@@ Expand Up @@
     #### Technology / Stack Overview
     - React
-    - Blueprint
+    - Antd
     - Vite
     - TypeScript
     - Yarn3
@@ Expand Down @@