fix custom property layout issues

open-metadata · Oct 1, 2024 · 967a2fe · 967a2fe
1 parent 2260857
commit 967a2fe
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 74 deletions.
diff --git a/...i/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx b/...i/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx
@@ -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) => (

diff --git a/...data-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx b/...data-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
@@ -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,
@@ -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,
@@ -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,
@@ -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)
@@ -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>
@@ -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)
@@ -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)}
@@ -947,13 +949,13 @@ 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>{`Start Time: `}</Typography.Text>
+ <Typography.Text className="text-sm font-semibold text-grey-body">
  {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>{`End Time: `}</Typography.Text>
+ <Typography.Text className="text-sm font-semibold text-grey-body">
  {timeInterval.end}
  </Typography.Text>
  </span>
@@ -973,7 +975,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>
@@ -1015,7 +1017,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
  <div className="d-flex justify-between w-full">
  <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>
@@ -1039,11 +1041,6 @@ export const PropertyValue: FC<PropertyValueProps> = ({
  )}
  </div>
  </div>
- <RichTextEditorPreviewer
- className="text-grey-muted"
- markdown={property.description || ''}
- maxLength={70}
- />
  </div>
  );
 
@@ -1053,7 +1050,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
  <Row gutter={[0, 2]}>
  <Col className="d-flex justify-between 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>
@@ -1072,18 +1069,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}
@@ -1094,14 +1103,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}
+ />
  )}
  </div>
  </Col>

diff --git a/...ta-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/property-value.less b/...ta-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/property-value.less
@@ -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);
  }
 }
 
@@ -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 {

diff --git a/...tadata-ui/src/main/resources/ui/src/components/common/ResizablePanels/ResizablePanels.tsx b/...tadata-ui/src/main/resources/ui/src/components/common/ResizablePanels/ResizablePanels.tsx
@@ -111,7 +111,7 @@ const ResizablePanels: React.FC<ResizablePanelsProps> = ({
  }}>
  {!hideSecondPanel && (
  <PanelContainer overlay={secondPanel.overlay}>
- {secondPanel.children}
+ <div className="p-l-sm">{secondPanel.children}</div>
  </PanelContainer>
  )}
  </ReflexElement>

diff --git a/...ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditor.interface.ts b/...ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditor.interface.ts
@@ -37,6 +37,7 @@ export interface PreviewerProp {
  showReadMoreBtn?: boolean;
  isDescriptionExpanded?: boolean;
  textVariant?: TextVariant;
+ reducePreviewLineClass?: string;
 }
 
 export type PreviewStyle = 'tab' | 'vertical';

diff --git a/...ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditorPreviewer.tsx b/...ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditorPreviewer.tsx
@@ -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>('');
@@ -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
+ )}
  data-testid="markdown-parser">
  <Viewer
  extendedAutolinks

diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -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;