You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by kl...@apache.org on 2023/12/18 04:05:59 UTC
(incubator-devlake) branch main updated: refactor(config-ui): use new ui popover and tooltip to replace old (#6648)
This is an automated email from the ASF dual-hosted git repository.
klesh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new bb272f7e8 refactor(config-ui): use new ui popover and tooltip to replace old (#6648)
bb272f7e8 is described below
commit bb272f7e8ebbc0664728e66684c52df75916ce98
Author: 青湛 <0x...@gmail.com>
AuthorDate: Mon Dec 18 17:05:55 2023 +1300
refactor(config-ui): use new ui popover and tooltip to replace old (#6648)
---
.../src/components/tooltip/text-tooltip/index.tsx | 31 +++++++---------------
.../detail/components/advanced-editor/index.tsx | 19 ++++++-------
.../src/pages/blueprint/detail/status-panel.tsx | 14 +++++-----
config-ui/src/routes/pipeline/components/task.tsx | 3 +--
4 files changed, 25 insertions(+), 42 deletions(-)
diff --git a/config-ui/src/components/tooltip/text-tooltip/index.tsx b/config-ui/src/components/tooltip/text-tooltip/index.tsx
index 2c1b486b3..b89c37833 100644
--- a/config-ui/src/components/tooltip/text-tooltip/index.tsx
+++ b/config-ui/src/components/tooltip/text-tooltip/index.tsx
@@ -16,37 +16,26 @@
*
*/
-import type { IntentProps } from '@blueprintjs/core';
-import { Position, Tooltip } from '@blueprintjs/core';
+import { Tooltip } from 'antd';
+
import styled from 'styled-components';
const Wrapper = styled.div`
- width: 100%;
-
- & > .bp5-popover-target {
- width: 100%;
-
- & > span {
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
`;
-interface Props extends IntentProps {
+interface Props {
content: string;
children: React.ReactNode;
style?: React.CSSProperties;
}
-export const TextTooltip = ({ intent, content, children, style }: Props) => {
+export const TextTooltip = ({ content, children, style }: Props) => {
return (
- <Wrapper style={style}>
- <Tooltip intent={intent} position={Position.TOP} content={content}>
- {children}
- </Tooltip>
- </Wrapper>
+ <Tooltip placement="top" title={content}>
+ <Wrapper style={style}>{children}</Wrapper>
+ </Tooltip>
);
};
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
index 5f6e08db3..a653f25f1 100644
--- a/config-ui/src/pages/blueprint/detail/components/advanced-editor/index.tsx
+++ b/config-ui/src/pages/blueprint/detail/components/advanced-editor/index.tsx
@@ -17,9 +17,8 @@
*/
import { ClearOutlined, CaretDownOutlined } from '@ant-design/icons';
-import { Space, Input, Button } from 'antd';
-import { Menu, MenuItem, Position } from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
+import { Space, Input, Button, Popover } from 'antd';
+import { Menu, MenuItem } from '@blueprintjs/core';
import styled from 'styled-components';
import { ExternalLink } from '@/components';
@@ -76,8 +75,7 @@ export const AdvancedEditor = ({ value, onChange }: Props) => {
>
Reset
</Button>
- <Popover2
- placement={Position.TOP}
+ <Popover
content={
<Menu>
{EXAMPLE_CONFIG.map((it) => (
@@ -90,12 +88,11 @@ export const AdvancedEditor = ({ value, onChange }: Props) => {
))}
</Menu>
}
- renderTarget={({ ref, ...targetProps }) => (
- <Button {...targetProps} ref={ref} size="small" icon={<CaretDownOutlined rev={undefined} />}>
- Load Templates
- </Button>
- )}
- />
+ >
+ <Button size="small" icon={<CaretDownOutlined rev={undefined} />}>
+ Load Templates
+ </Button>
+ </Popover>
</Space>
</Wrapper>
);
diff --git a/config-ui/src/pages/blueprint/detail/status-panel.tsx b/config-ui/src/pages/blueprint/detail/status-panel.tsx
index b9175295d..8ff35c441 100644
--- a/config-ui/src/pages/blueprint/detail/status-panel.tsx
+++ b/config-ui/src/pages/blueprint/detail/status-panel.tsx
@@ -19,9 +19,8 @@
import { useState, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { MoreOutlined, DeleteOutlined } from '@ant-design/icons';
-import { Card, Modal, Switch, Button, Tooltip } from 'antd';
-import { Position, Popover, Menu, MenuItem } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
+import { Card, Modal, Switch, Button, Tooltip, Popover } from 'antd';
+import { Menu, MenuItem } from '@blueprintjs/core';
import API from '@/api';
import { Message } from '@/components';
@@ -129,9 +128,9 @@ export const StatusPanel = ({ from, blueprint, pipelineId, onRefresh }: Props) =
<span>
{cron.label === 'Manual' ? 'Manual' : `Next Run: ${formatTime(cron.nextTime, 'YYYY-MM-DD HH:mm')}`}
</span>
- <Tooltip2
- position={Position.TOP}
- content="It is recommended to re-transform your data in this project if you have updated the transformation of the data scope in this project."
+ <Tooltip
+ placement="top"
+ title="It is recommended to re-transform your data in this project if you have updated the transformation of the data scope in this project."
>
<Button
type="primary"
@@ -141,7 +140,7 @@ export const StatusPanel = ({ from, blueprint, pipelineId, onRefresh }: Props) =
>
Re-transform Data
</Button>
- </Tooltip2>
+ </Tooltip>
<Button type="primary" disabled={!blueprint.enable} loading={operating} onClick={() => handleRun({})}>
Collect Data
</Button>
@@ -151,7 +150,6 @@ export const StatusPanel = ({ from, blueprint, pipelineId, onRefresh }: Props) =
<MenuItem text="Collect Data in Full Refresh Mode" onClick={() => setType('fullSync')} />
</Menu>
}
- placement="bottom"
>
<Button icon={<MoreOutlined rev={undefined} />} />
</Popover>
diff --git a/config-ui/src/routes/pipeline/components/task.tsx b/config-ui/src/routes/pipeline/components/task.tsx
index a521ea0d3..8897e8285 100644
--- a/config-ui/src/routes/pipeline/components/task.tsx
+++ b/config-ui/src/routes/pipeline/components/task.tsx
@@ -19,7 +19,6 @@
import { useState, useMemo } from 'react';
import { RedoOutlined } from '@ant-design/icons';
import { Button } from 'antd';
-import { Intent } from '@blueprintjs/core';
import API from '@/api';
import { TextTooltip } from '@/components';
@@ -123,7 +122,7 @@ export const PipelineTask = ({ task }: Props) => {
{status === IPipelineStatus.COMPLETED && <p>All Subtasks completed</p>}
{status === IPipelineStatus.FAILED && (
- <TextTooltip intent={Intent.DANGER} content={message}>
+ <TextTooltip content={message}>
<p className="error">Task failed: hover to view the reason</p>
</TextTooltip>
)}