yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-01 11:09:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "MINOR: fix custom property layout issues (#18065)"

Browse Source 
This reverts commit 778900305fa6e5f3be3d90ce0995d505f067ee87.
This commit is contained in:
Sachin Chaurasiya 2024-10-03 11:38:45 +05:30
parent 6ab15fdf54
commit f4c4f19114
8 changed files with 78 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx
View File

@ -245,45 +245,40 @@ export const CustomPropertyTable = <T extends ExtentionEntitiesKeys>({
<>
{!isEmpty(entityTypeDetail.customProperties) && (
<>
<div className="d-flex justify-between m-b-xs">
<Typography.Text className="right-panel-label">
{t('label.custom-property-plural')}
</Typography.Text>
{viewAllBtn}
</div>
{isRenderedInRightPanel ? (
<>
<div className="d-flex justify-between m-b-md">
<Typography.Text className="right-panel-label">
{t('label.custom-property-plural')}
</Typography.Text>
{viewAllBtn}
</div>
<div className="custom-property-right-panel-container">
{dataSource.map((record, index) => (
<Fragment key={record.name}>
<div
className={classNames(
'custom-property-right-panel-card',
{
'top-border-radius': index === 0,
'bottom-border-radius':
index === dataSource.length - 1,
}
)}
key={record.name}>
<PropertyValue
extension={extensionObject.extensionObject}
hasEditPermissions={hasEditAccess}
isRenderedInRightPanel={isRenderedInRightPanel}
isVersionView={isVersionView}
key={record.name}
property={record}
versionDataKeys={extensionObject.addedKeysList}
onExtensionUpdate={onExtensionUpdate}
/>
</div>
{index !== dataSource.length - 1 && (
<Divider className="m-y-0" />
)}
</Fragment>
))}
</div>
</>
<div className="custom-property-right-panel-container">
{dataSource.map((record, index) => (
<Fragment key={record.name}>
<div
className={classNames('custom-property-right-panel-card', {
'top-border-radius': index === 0,
'bottom-border-radius': index === dataSource.length - 1,
})}
key={record.name}>
<PropertyValue
extension={extensionObject.extensionObject}
hasEditPermissions={hasEditAccess}
isRenderedInRightPanel={isRenderedInRightPanel}
isVersionView={isVersionView}
key={record.name}
property={record}
versionDataKeys={extensionObject.addedKeysList}
onExtensionUpdate={onExtensionUpdate}
/>
</div>
{index !== dataSource.length - 1 && (
<Divider className="m-y-0" />
)}
</Fragment>
))}
</div>
) : (
<Row data-testid="custom-properties-card" gutter={[16, 16]}>
{dataSource.map((record) => (

2
openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.test.tsx
View File

@ -317,7 +317,7 @@ describe('Test PropertyValue Component', () => {
const iconElement = await screen.findByTestId('edit-icon');
expect(await screen.findByTestId('time-interval-value')).toHaveTextContent(
'label.start-entity: 1736255200000label.end-entity: 1736255200020'
'StartTime: 1736255200000EndTime: 1736255200020'
);
await act(async () => {

84
openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
View File

@ -11,7 +11,7 @@
* limitations under the License.
*/
import Icon from '@ant-design/icons';
import Icon, { DownOutlined, UpOutlined } from '@ant-design/icons';
import {
Button,
Card,
@ -29,7 +29,6 @@ import {
} from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { AxiosError } from 'axios';
import classNames from 'classnames';
import { t } from 'i18next';
import {
isArray,
@ -51,7 +50,6 @@ import React, {
useState,
} from 'react';
import { Link } from 'react-router-dom';
import { ReactComponent as ArrowIconComponent } from '../../../assets/svg/drop-down.svg';
import { ReactComponent as EditIconComponent } from '../../../assets/svg/edit-new.svg';
import {
DE_ACTIVE_COLOR,
@ -867,7 +865,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
isTeam={item.type === 'team'}
name={item.name ?? ''}
type="circle"
width="18"
width="20"
/>
) : (
searchClassBase.getEntityIcon(item.type)
@ -876,7 +874,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
}
type="text">
<Typography.Text
className="text-left text-primary truncate w-68"
className="text-left text-lg truncate w-68"
ellipsis={{ tooltip: true }}>
{getEntityName(item)}
</Typography.Text>
@ -918,7 +916,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
isTeam={item.type === 'team'}
name={item.name ?? ''}
type="circle"
width="18"
width="20"
/>
) : (
searchClassBase.getEntityIcon(item.type)
@ -927,7 +925,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
}
type="text">
<Typography.Text
className="text-left text-primary truncate w-68 "
className="text-left text-lg truncate w-68"
data-testid="entityReference-value-name"
ellipsis={{ tooltip: true }}>
{getEntityName(item)}
@ -949,17 +947,13 @@ export const PropertyValue: FC<PropertyValueProps> = ({
className="break-all"
data-testid="time-interval-value">
<span>
<Typography.Text>{`${t('label.start-entity', {
entity: t('label.time'),
})}: `}</Typography.Text>
<Typography.Text className="text-sm text-grey-body property-value">
<Typography.Text className="text-xs">{`StartTime: `}</Typography.Text>
<Typography.Text className="text-sm font-medium text-grey-body">
{timeInterval.start}
</Typography.Text>
<Divider className="self-center" type="vertical" />
<Typography.Text>{`${t('label.end-entity', {
entity: t('label.time'),
})}: `}</Typography.Text>
<Typography.Text className="text-sm text-grey-body property-value">
<Typography.Text className="text-xs">{`EndTime: `}</Typography.Text>
<Typography.Text className="text-sm font-medium text-grey-body">
{timeInterval.end}
</Typography.Text>
</span>
@ -979,7 +973,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
default:
return (
<Typography.Text
className="break-all text-grey-body property-value"
className="break-all text-lg font-medium text-grey-body"
data-testid="value">
{value}
</Typography.Text>
@ -1018,10 +1012,10 @@ export const PropertyValue: FC<PropertyValueProps> = ({
const customPropertyInlineElement = (
<div className="d-flex flex-column gap-2" data-testid={propertyName}>
<div className="d-flex justify-between w-full items-center">
<div className="d-flex justify-between w-full">
<div className="d-flex flex-column gap-1 w-full">
<Typography.Text
className="property-name text-grey-body"
className="text-md text-grey-body"
data-testid="property-name">
{getEntityName(property)}
</Typography.Text>
@ -1045,6 +1039,11 @@ export const PropertyValue: FC<PropertyValueProps> = ({
)}
</div>
</div>
<RichTextEditorPreviewer
className="text-grey-muted"
markdown={property.description || ''}
maxLength={70}
/>
</div>
);
@ -1052,9 +1051,9 @@ export const PropertyValue: FC<PropertyValueProps> = ({
<Row data-testid={propertyName} gutter={[0, 16]}>
<Col span={24}>
<Row gutter={[0, 2]}>
<Col className="d-flex justify-between items-center w-full" span={24}>
<Col className="d-flex justify-between w-full" span={24}>
<Typography.Text
className="text-grey-body property-name"
className="text-md text-grey-body"
data-testid="property-name">
{getEntityName(property)}
</Typography.Text>
@ -1073,30 +1072,18 @@ export const PropertyValue: FC<PropertyValueProps> = ({
</Tooltip>
)}
</Col>
{!isRenderedInRightPanel && (
<Col span={24}>
<RichTextEditorPreviewer
className="text-grey-muted property-description"
markdown={property.description || ''}
maxLength={70}
reducePreviewLineClass="max-one-line"
/>
</Col>
)}
<Col span={24}>
<RichTextEditorPreviewer
className="text-grey-muted"
markdown={property.description || ''}
maxLength={70}
/>
</Col>
</Row>
</Col>
<Col span={24}>
<div
className={classNames(
'd-flex justify-between w-full gap-2',
{
'items-end': isExpanded,
},
{
'items-center': !isExpanded,
}
)}>
<div className="d-flex justify-between w-full gap-2">
<div
className="w-full"
ref={contentRef}
@ -1107,15 +1094,14 @@ export const PropertyValue: FC<PropertyValueProps> = ({
{showInput ? getPropertyInput() : getValueElement()}
</div>
{isOverflowing && !showInput && (
<Icon
className={classNames('custom-property-value-toggle-btn', {
active: isExpanded,
})}
component={ArrowIconComponent}
<Button
className="custom-property-value-toggle-btn"
data-testid={`toggle-${propertyName}`}
style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }}
onClick={toggleExpand}
/>
size="small"
type="text"
onClick={toggleExpand}>
{isExpanded ? <UpOutlined /> : <DownOutlined />}
</Button>
)}
</div>
</Col>
@ -1125,7 +1111,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
if (isRenderedInRightPanel) {
return (
<div
className="custom-property-card custom-property-card-right-panel"
className="custom-property-card-right-panel"
data-testid="custom-property-right-panel-card">
{isInlineProperty ? customPropertyInlineElement : customPropertyElement}
</div>

25
openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/property-value.less
View File

@ -31,17 +31,14 @@
}
}
.custom-property-value-toggle-btn {
svg {
.ant-btn-text.custom-property-value-toggle-btn {
border-radius: 100%;
background: @btn-bg-color;
border-color: transparent;
height: 30px;
width: 30px;
.anticon {
vertical-align: middle;
width: 14px;
transition: 0.3s ease-in-out;
}
}
.custom-property-value-toggle-btn.active {
svg {
transform: rotate(180deg);
}
}
@ -62,14 +59,6 @@
.ant-card-body {
overflow-x: scroll;
}
.property-name {
font-weight: 400;
}
.property-value {
font-weight: 500;
}
}
.custom-property-card-right-panel {

2
openmetadata-ui/src/main/resources/ui/src/components/common/ResizablePanels/ResizablePanels.tsx
View File

@ -111,7 +111,7 @@ const ResizablePanels: React.FC<ResizablePanelsProps> = ({
}}>
{!hideSecondPanel && (
<PanelContainer overlay={secondPanel.overlay}>
<div className="p-l-sm">{secondPanel.children}</div>
{secondPanel.children}
</PanelContainer>
)}
</ReflexElement>

1
openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditor.interface.ts
View File

@ -37,7 +37,6 @@ export interface PreviewerProp {
showReadMoreBtn?: boolean;
isDescriptionExpanded?: boolean;
textVariant?: TextVariant;
reducePreviewLineClass?: string;
}
export type PreviewStyle = 'tab' | 'vertical';

7
openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditorPreviewer.tsx
View File

@ -35,7 +35,6 @@ const RichTextEditorPreviewer = ({
showReadMoreBtn = true,
maxLength = DESCRIPTION_MAX_PREVIEW_CHARACTERS,
isDescriptionExpanded = false,
reducePreviewLineClass,
}: PreviewerProp) => {
const { t, i18n } = useTranslation();
const [content, setContent] = useState<string>('');
@ -111,11 +110,7 @@ const RichTextEditorPreviewer = ({
data-testid="viewer-container"
dir={i18n.dir()}>
<div
className={classNames(
'markdown-parser',
textVariant,
readMore ? '' : reducePreviewLineClass
)}
className={classNames('markdown-parser', textVariant)}
data-testid="markdown-parser">
<Viewer
extendedAutolinks

8
openmetadata-ui/src/main/resources/ui/src/styles/app.less
View File

@ -262,14 +262,6 @@ a[href].link-text-grey,
-webkit-box-orient: vertical;
}
.max-one-line {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
}
.mx-auto {
margin-right: auto;
margin-left: auto;