MINOR: fix custom property layout issues (#18065)

* fix custom property layout issues * fix font weight to similar like other * fix the right panel value style issue * fix the edit button alignment issue * changes as per comments and sonar fix (cherry picked from commit 819c405784d520b787042b78cc959445506caf01)
2025-11-01 02:56:10 +00:00 · 2024-10-01 17:51:09 +05:30 · 2024-10-01 17:51:09 +05:30 · 5ce29219b6
commit 5ce29219b6
parent 5d8546c135
8 changed files with 122 additions and 78 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/CustomPropertyTable.tsx
@ -245,40 +245,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) => (
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.test.tsx
@ -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 () => {
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
+++ b/openmetadata-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,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>
@ -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>
@ -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>
@ -1039,11 +1045,6 @@ export const PropertyValue: FC<PropertyValueProps> = ({
          )}
        </div>
      </div>
-      <RichTextEditorPreviewer
-        className="text-grey-muted"
-        markdown={property.description || ''}
-        maxLength={70}
-      />
    </div>
  );

@ -1051,9 +1052,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 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>
@ -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}
@ -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}
+            />
          )}
        </div>
      </Col>
@ -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>
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/property-value.less
+++ b/openmetadata-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 {
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/ResizablePanels/ResizablePanels.tsx
+++ b/openmetadata-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>
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditor.interface.ts
+++ b/openmetadata-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';
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/RichTextEditorPreviewer.tsx
+++ b/openmetadata-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
--- 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;