yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2026-01-07 21:16:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improvements #7248 : Worked on UI improvements and bug fixes (#7259)

Browse Source
This commit is contained in:
Aniket Katkar 2022-09-06 20:08:18 +05:30 committed by GitHub
parent b8f1484f4c
commit dc6279af22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 81 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/component/ProfilerSummaryCard.tsx
View File

@ -25,7 +25,7 @@ const ProfilerSummaryCard: React.FC<ProfilerSummaryCardProps> = ({
}) => {
return (
<Card className="tw-rounded-md tw-border">
<p className="tw-text-base tw-font-medium tw-mb-7">{title}</p>
<p className="tw-text-base tw-font-medium tw-mb-4">{title}</p>
<Row className="table-profiler-summary">
{data.map((item) => (
<Col className="overall-summary-card" key={item.title} span={8}>

12
openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ProfilerProgressWidget.test.tsx
View File

@ -17,7 +17,17 @@ import { ProfilerProgressWidgetProps } from '../TableProfiler.interface';
import ProfilerProgressWidget from './ProfilerProgressWidget';
jest.mock('antd', () => ({
Progress: jest.fn().mockImplementation(() => <span>progress bar</span>),
Progress: jest
.fn()
.mockImplementation(() => (
<span data-testid="progress-bar">progress bar</span>
)),
Row: jest
.fn()
.mockImplementation(({ children }) => (
<div data-testid="profiler-progress-bar-container">{children}</div>
)),
Col: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
}));
const mockProps: ProfilerProgressWidgetProps = {

21
openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/Component/ProfilerProgressWidget.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import { Progress } from 'antd';
import { Col, Progress, Row } from 'antd';
import React from 'react';
import { ProfilerProgressWidgetProps } from '../TableProfiler.interface';
@ -22,21 +22,22 @@ const ProfilerProgressWidget: React.FC<ProfilerProgressWidgetProps> = ({
const modifedValue = Math.round(value * 100);
return (
<div
className="profiler-progress-bar-container"
data-testid="profiler-progress-bar-container">
<p className="percent-info" data-testid="percent-info">
{modifedValue}%
</p>
<div className="progress-bar" data-testid="progress-bar">
<Row data-testid="profiler-progress-bar-container">
<Col span={6}>
<p className="percent-info" data-testid="percent-info">
{modifedValue}%
</p>
</Col>
<Col span={16}>
<Progress
data-testid="progress-bar"
percent={modifedValue}
showInfo={false}
size="small"
strokeColor={strokeColor}
/>
</div>
</div>
</Col>
</Row>
);
};

11
openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/tableProfiler.less
View File

@ -40,17 +40,6 @@
color: @abortedColor;
}
.profiler-progress-bar-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 4px;
.progress-bar {
width: 100px;
}
}
.ant-table-row .ant-table-cell:first-child,
.ant-table-thead .ant-table-cell:first-child {
padding-left: 16px;

11
openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx
View File

@ -278,15 +278,8 @@ const EntitySummaryDetails = ({
})}
data-testid="tier-name"
direction="horizontal"
size={0.1}
title={displayVal as string}>
<Button
data-testid="tier-dropdown"
size="custom"
theme="primary"
variant="text">
{displayVal}
</Button>
<span data-testid="tier-dropdown">{displayVal}</span>
<Dropdown
overlay={
<TierCard
@ -297,7 +290,7 @@ const EntitySummaryDetails = ({
placement="bottomRight"
trigger={['click']}>
<span
className="tw-flex tw--mt-1"
className="tw-flex tw--mt-0.5"
data-testid={`edit-${data.key}-icon`}>
{updateTier ? <EditIcon /> : null}
</span>

8
openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
View File

@ -304,7 +304,13 @@ const EntityPageInfo = ({
data-testid="tag-thread"
onClick={() => onThreadLinkSelect?.(tagThread.entityLink)}>
<span className="tw-flex">
<SVGIcons alt="comments" icon={Icons.COMMENT} width="16px" />
<SVGIcons
alt="comments"
className="tw-mt-0.5"
height="16px"
icon={Icons.COMMENT}
width="16px"
/>
<span className="tw-ml-1" data-testid="tag-thread-count">
{tagThread.count}
</span>

38
openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaPage/DatabaseSchemaPage.component.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import { Space } from 'antd';
import { Col, Row, Space } from 'antd';
import { AxiosError } from 'axios';
import classNames from 'classnames';
import { compare, Operation } from 'fast-json-patch';
@ -684,27 +684,27 @@ const DatabaseSchemaPage: FunctionComponent = () => {
setActiveTab={activeTabHandler}
tabs={tabs}
/>
<div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
<div className="tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
{activeTab === 1 && <Fragment>{getSchemaTableList()}</Fragment>}
{activeTab === 2 && (
<div
className="tw-py-4 tw-px-7 tw-grid tw-grid-cols-3 entity-feed-list tw--mx-7 tw--my-4"
<Row
className="tw-py-4 entity-feed-list tw-bg-white tw-border tw-rounded tw-shadow tw-h-full"
id="activityfeed">
<div />
<ActivityFeedList
hideFeedFilter
hideThreadFilter
isEntityFeed
withSidePanel
className=""
deletePostHandler={deletePostHandler}
entityName={databaseSchemaName}
feedList={entityThread}
postFeedHandler={postFeedHandler}
updateThreadHandler={updateThreadHandler}
/>
<div />
</div>
<Col offset={4} span={16}>
<ActivityFeedList
hideFeedFilter
hideThreadFilter
isEntityFeed
withSidePanel
className=""
deletePostHandler={deletePostHandler}
entityName={databaseSchemaName}
feedList={entityThread}
postFeedHandler={postFeedHandler}
updateThreadHandler={updateThreadHandler}
/>
</Col>
</Row>
)}
<div
data-testid="observer-element"

38
openmetadata-ui/src/main/resources/ui/src/pages/database-details/index.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import { Space } from 'antd';
import { Col, Row, Space } from 'antd';
import { AxiosError } from 'axios';
import classNames from 'classnames';
import { compare, Operation } from 'fast-json-patch';
@ -664,7 +664,7 @@ const DatabaseDetails: FunctionComponent = () => {
setActiveTab={activeTabHandler}
tabs={tabs}
/>
<div className="tw-bg-white tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
<div className="tw-flex-grow tw--mx-6 tw-px-7 tw-py-4">
{activeTab === 1 && (
<Fragment>
<div className="tw-table-container tw-mb-4">
@ -768,24 +768,24 @@ const DatabaseDetails: FunctionComponent = () => {
</Fragment>
)}
{activeTab === 2 && (
<div
className="tw-py-4 tw-px-7 tw-grid tw-grid-cols-3 entity-feed-list tw--mx-7 tw--my-4"
<Row
className=" tw-pt-4 entity-feed-list tw-bg-white tw-border tw-rounded tw-shadow tw-h-full"
id="activityfeed">
<div />
<ActivityFeedList
hideFeedFilter
hideThreadFilter
isEntityFeed
withSidePanel
className=""
deletePostHandler={deletePostHandler}
entityName={databaseName}
feedList={entityThread}
postFeedHandler={postFeedHandler}
updateThreadHandler={updateThreadHandler}
/>
<div />
</div>
<Col offset={4} span={16}>
<ActivityFeedList
hideFeedFilter
hideThreadFilter
isEntityFeed
withSidePanel
className=""
deletePostHandler={deletePostHandler}
entityName={databaseName}
feedList={entityThread}
postFeedHandler={postFeedHandler}
updateThreadHandler={updateThreadHandler}
/>
</Col>
</Row>
)}
<div
data-testid="observer-element"

2
openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
View File

@ -894,7 +894,7 @@ const ServicePage: FunctionComponent = () => {
}, [serviceDetails]);
return (
<Row className="tw-my-4" gutter={[16, 16]}>
<Row className="page-container" gutter={[16, 16]}>
{isLoading ? (
<Loader />
) : isError ? (

21
openmetadata-ui/src/main/resources/ui/src/utils/FeedElementUtils.tsx
View File

@ -45,7 +45,7 @@ export const getFieldThreadElement = (
return !isEmpty(threadValue) ? (
<button
className="link-text tw-self-start tw-w-7 tw-h-7 tw-mr-1 tw-flex-none hover-cell-icon"
className="link-text tw-self-start tw-w-7 tw-h-7 tw-mr-1 tw-flex tw-items-center hover-cell-icon"
data-testid="field-thread"
onClick={(e) => {
e.preventDefault();
@ -55,16 +55,15 @@ export const getFieldThreadElement = (
isTaskType ? ThreadType.Task : ThreadType.Conversation
);
}}>
<span className="tw-flex">
<SVGIcons
alt="comments"
heigth="16px"
icon={isTaskType ? Icons.TASK_ICON : Icons.COMMENT}
width="16px"
/>
<span className="tw-ml-1" data-testid="field-thread-count">
{threadValue.count}
</span>
<SVGIcons
alt="comments"
className="tw-mt-0.5"
heigth="16px"
icon={isTaskType ? Icons.TASK_ICON : Icons.COMMENT}
width="16px"
/>
<span className="tw-ml-1" data-testid="field-thread-count">
{threadValue.count}
</span>
</button>
) : (