Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MINOR: fix custom property layout issues #18065

Merged
merged 5 commits into from
Oct 1, 2024
Merged

MINOR: fix custom property layout issues #18065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
967a2fe
fix custom property layout issues
Ashish8689 Oct 1, 2024
9b22ad5
fix font weight to similar like other
Ashish8689 Oct 1, 2024
9411a60
fix the right panel value style issue
Ashish8689 Oct 1, 2024
b2770b3
fix the edit button alignment issue
Ashish8689 Oct 1, 2024
0d0b93b
changes as per comments and sonar fix
Ashish8689 Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 38 additions & 33 deletions ...i/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,40 +246,45 @@ 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="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="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>
</>
) : (
<Row data-testid="custom-properties-card" gutter={[16, 16]}>
{dataSource.map((record) => (
Expand Down
2 changes: 1 addition & 1 deletion ...ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,7 @@ describe('Test PropertyValue Component', () => {
const iconElement = await screen.findByTestId('edit-icon');

expect(await screen.findByTestId('time-interval-value')).toHaveTextContent(
'StartTime: 1736255200000EndTime: 1736255200020'
'label.start-entity: 1736255200000label.end-entity: 1736255200020'
);

await act(async () => {
Expand Down
84 changes: 49 additions & 35 deletions ...data-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
* limitations under the License.
*/

import Icon, { DownOutlined, UpOutlined } from '@ant-design/icons';
import Icon from '@ant-design/icons';
import {
Button,
Card,
Expand All @@ -29,6 +29,7 @@ import {
} from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { AxiosError } from 'axios';
import classNames from 'classnames';
import { t } from 'i18next';
import {
isArray,
Expand All @@ -50,6 +51,7 @@ 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,
Expand Down Expand Up @@ -865,7 +867,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
isTeam={item.type === 'team'}
name={item.name ?? ''}
type="circle"
width="20"
width="18"
/>
) : (
searchClassBase.getEntityIcon(item.type)
Expand All @@ -874,7 +876,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
}
type="text">
<Typography.Text
className="text-left text-lg truncate w-68"
className="text-left text-primary truncate w-68"
ellipsis={{ tooltip: true }}>
{getEntityName(item)}
</Typography.Text>
Expand Down Expand Up @@ -916,7 +918,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
isTeam={item.type === 'team'}
name={item.name ?? ''}
type="circle"
width="20"
width="18"
/>
) : (
searchClassBase.getEntityIcon(item.type)
Expand All @@ -925,7 +927,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
}
type="text">
<Typography.Text
className="text-left text-lg truncate w-68"
className="text-left text-primary truncate w-68 "
data-testid="entityReference-value-name"
ellipsis={{ tooltip: true }}>
{getEntityName(item)}
Expand All @@ -947,13 +949,17 @@ export const PropertyValue: FC<PropertyValueProps> = ({
className="break-all"
data-testid="time-interval-value">
<span>
<Typography.Text className="text-xs">{`StartTime: `}</Typography.Text>
<Typography.Text className="text-sm font-medium text-grey-body">
<Typography.Text>{`${t('label.start-entity', {
entity: t('label.time'),
})}: `}</Typography.Text>
<Typography.Text className="text-sm text-grey-body property-value">
{timeInterval.start}
</Typography.Text>
<Divider className="self-center" type="vertical" />
<Typography.Text className="text-xs">{`EndTime: `}</Typography.Text>
<Typography.Text className="text-sm font-medium text-grey-body">
<Typography.Text>{`${t('label.end-entity', {
entity: t('label.time'),
})}: `}</Typography.Text>
<Typography.Text className="text-sm text-grey-body property-value">
{timeInterval.end}
</Typography.Text>
</span>
Expand All @@ -973,7 +979,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
default:
return (
<Typography.Text
className="break-all text-lg font-medium text-grey-body"
className="break-all text-grey-body property-value"
data-testid="value">
{value}
</Typography.Text>
Expand Down Expand Up @@ -1012,10 +1018,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">
<div className="d-flex justify-between w-full items-center">
<div className="d-flex flex-column gap-1 w-full">
<Typography.Text
className="text-md text-grey-body"
className="property-name text-grey-body"
data-testid="property-name">
{getEntityName(property)}
</Typography.Text>
Expand All @@ -1039,21 +1045,16 @@ export const PropertyValue: FC<PropertyValueProps> = ({
)}
</div>
</div>
<RichTextEditorPreviewer
className="text-grey-muted"
markdown={property.description || ''}
maxLength={70}
/>
</div>
);

const customPropertyElement = (
<Row data-testid={propertyName} gutter={[0, 16]}>
<Col span={24}>
<Row gutter={[0, 2]}>
<Col className="d-flex justify-between w-full" span={24}>
<Col className="d-flex justify-between items-center w-full" span={24}>
<Typography.Text
className="text-md text-grey-body"
className="text-grey-body property-name"
data-testid="property-name">
{getEntityName(property)}
</Typography.Text>
Expand All @@ -1072,18 +1073,30 @@ export const PropertyValue: FC<PropertyValueProps> = ({
</Tooltip>
)}
</Col>
<Col span={24}>
<RichTextEditorPreviewer
className="text-grey-muted"
markdown={property.description || ''}
maxLength={70}
/>
</Col>
{!isRenderedInRightPanel && (
<Col span={24}>
<RichTextEditorPreviewer
className="text-grey-muted property-description"
markdown={property.description || ''}
maxLength={70}
reducePreviewLineClass="max-one-line"
/>
</Col>
)}
</Row>
</Col>

<Col span={24}>
<div className="d-flex justify-between w-full gap-2">
<div
className={classNames(
'd-flex justify-between w-full gap-2',
{
'items-end': isExpanded,
},
{
'items-center': !isExpanded,
}
)}>
<div
className="w-full"
ref={contentRef}
Expand All @@ -1094,14 +1107,15 @@ export const PropertyValue: FC<PropertyValueProps> = ({
{showInput ? getPropertyInput() : getValueElement()}
</div>
{isOverflowing && !showInput && (
<Button
className="custom-property-value-toggle-btn"
<Icon
className={classNames('custom-property-value-toggle-btn', {
active: isExpanded,
})}
component={ArrowIconComponent}
data-testid={`toggle-${propertyName}`}
size="small"
type="text"
onClick={toggleExpand}>
{isExpanded ? <UpOutlined /> : <DownOutlined />}
</Button>
style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }}
onClick={toggleExpand}
/>
Ashish8689 marked this conversation as resolved.
Show resolved Hide resolved
)}
</div>
</Col>
Expand All @@ -1111,7 +1125,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
if (isRenderedInRightPanel) {
return (
<div
className="custom-property-card-right-panel"
className="custom-property-card custom-property-card-right-panel"
data-testid="custom-property-right-panel-card">
{isInlineProperty ? customPropertyInlineElement : customPropertyElement}
</div>
Expand Down
25 changes: 18 additions & 7 deletions ...ta-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/property-value.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,17 @@
}
}

.ant-btn-text.custom-property-value-toggle-btn {
border-radius: 100%;
background: @btn-bg-color;
border-color: transparent;
height: 30px;
width: 30px;
.anticon {
.custom-property-value-toggle-btn {
svg {
vertical-align: middle;
width: 14px;
transition: 0.3s ease-in-out;
}
}

.custom-property-value-toggle-btn.active {
svg {
transform: rotate(180deg);
}
}

Expand All @@ -59,6 +62,14 @@
.ant-card-body {
overflow-x: scroll;
}

.property-name {
font-weight: 400;
}

.property-value {
font-weight: 500;
}
}

.custom-property-card-right-panel {
Expand Down
2 changes: 1 addition & 1 deletion ...tadata-ui/src/main/resources/ui/src/components/common/ResizablePanels/ResizablePanels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ const ResizablePanels: React.FC<ResizablePanelsProps> = ({
}}>
{!hideSecondPanel && (
<PanelContainer overlay={secondPanel.overlay}>
{secondPanel.children}
<div className="p-l-sm">{secondPanel.children}</div>
Ashish8689 marked this conversation as resolved.
Show resolved Hide resolved
</PanelContainer>
)}
</ReflexElement>
Expand Down
1 change: 1 addition & 0 deletions ...ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditor.interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export interface PreviewerProp {
showReadMoreBtn?: boolean;
isDescriptionExpanded?: boolean;
textVariant?: TextVariant;
reducePreviewLineClass?: string;
}

export type PreviewStyle = 'tab' | 'vertical';
Expand Down
7 changes: 6 additions & 1 deletion ...ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditorPreviewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const RichTextEditorPreviewer = ({
showReadMoreBtn = true,
maxLength = DESCRIPTION_MAX_PREVIEW_CHARACTERS,
isDescriptionExpanded = false,
reducePreviewLineClass,
}: PreviewerProp) => {
const { t, i18n } = useTranslation();
const [content, setContent] = useState<string>('');
Expand Down Expand Up @@ -110,7 +111,11 @@ const RichTextEditorPreviewer = ({
data-testid="viewer-container"
dir={i18n.dir()}>
<div
className={classNames('markdown-parser', textVariant)}
className={classNames(
'markdown-parser',
textVariant,
readMore ? '' : reducePreviewLineClass
)}
Ashish8689 marked this conversation as resolved.
Show resolved Hide resolved
data-testid="markdown-parser">
<Viewer
extendedAutolinks
Expand Down
8 changes: 8 additions & 0 deletions openmetadata-ui/src/main/resources/ui/src/styles/app.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,14 @@ 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;
Expand Down
Loading