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

This reverts commit 778900305fa6e5f3be3d90ce0995d505f067ee87.

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

@@ -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="custom-property-right-panel-container">
-              <div className="d-flex justify-between m-b-md">
+              {dataSource.map((record, index) => (
-                <Typography.Text className="right-panel-label">
+                <Fragment key={record.name}>
-                  {t('label.custom-property-plural')}
+                  <div
-                </Typography.Text>
+                    className={classNames('custom-property-right-panel-card', {
-                {viewAllBtn}
+                      'top-border-radius': index === 0,
-              </div>
+                      'bottom-border-radius': index === dataSource.length - 1,
-              <div className="custom-property-right-panel-container">
+                    })}
-                {dataSource.map((record, index) => (
+                    key={record.name}>
-                  <Fragment key={record.name}>
+                    <PropertyValue
-                    <div
+                      extension={extensionObject.extensionObject}
-                      className={classNames(
+                      hasEditPermissions={hasEditAccess}
-                        'custom-property-right-panel-card',
+                      isRenderedInRightPanel={isRenderedInRightPanel}
-                        {
+                      isVersionView={isVersionView}
-                          'top-border-radius': index === 0,
+                      key={record.name}
-                          'bottom-border-radius':
+                      property={record}
-                            index === dataSource.length - 1,
+                      versionDataKeys={extensionObject.addedKeysList}
-                        }
+                      onExtensionUpdate={onExtensionUpdate}
-                      )}
+                    />
-                      key={record.name}>
+                  </div>
-                      <PropertyValue
+                  {index !== dataSource.length - 1 && (
-                        extension={extensionObject.extensionObject}
+                    <Divider className="m-y-0" />
-                        hasEditPermissions={hasEditAccess}
+                  )}
-                        isRenderedInRightPanel={isRenderedInRightPanel}
+                </Fragment>
-                        isVersionView={isVersionView}
+              ))}
-                        key={record.name}
+            </div>
-                        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) => (

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(
-      'label.start-entity: 1736255200000label.end-entity: 1736255200020'
+      'StartTime: 1736255200000EndTime: 1736255200020'
     );
 
     await act(async () => {

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

@@ -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', {
+              <Typography.Text className="text-xs">{`StartTime: `}</Typography.Text>
-                entity: t('label.time'),
+              <Typography.Text className="text-sm font-medium text-grey-body">
-              })}: `}</Typography.Text>
-              <Typography.Text className="text-sm text-grey-body property-value">
                 {timeInterval.start}
               </Typography.Text>
               <Divider className="self-center" type="vertical" />
-              <Typography.Text>{`${t('label.end-entity', {
+              <Typography.Text className="text-xs">{`EndTime: `}</Typography.Text>
-                entity: t('label.time'),
+              <Typography.Text className="text-sm font-medium text-grey-body">
-              })}: `}</Typography.Text>
-              <Typography.Text className="text-sm text-grey-body property-value">
                 {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}>
-            <Col span={24}>
+            <RichTextEditorPreviewer
-              <RichTextEditorPreviewer
+              className="text-grey-muted"
-                className="text-grey-muted property-description"
+              markdown={property.description || ''}
-                markdown={property.description || ''}
+              maxLength={70}
-                maxLength={70}
+            />
-                reducePreviewLineClass="max-one-line"
+          </Col>
-              />
-            </Col>
-          )}
         </Row>
       </Col>
 
       <Col span={24}>
-        <div
+        <div className="d-flex justify-between w-full gap-2">
-          className={classNames(
-            'd-flex justify-between w-full gap-2',
-            {
-              'items-end': isExpanded,
-            },
-            {
-              'items-center': !isExpanded,
-            }
-          )}>
           <div
             className="w-full"
             ref={contentRef}
@@ -1107,15 +1094,14 @@ export const PropertyValue: FC<PropertyValueProps> = ({
             {showInput ? getPropertyInput() : getValueElement()}
           </div>
           {isOverflowing && !showInput && (
-            <Icon
+            <Button
-              className={classNames('custom-property-value-toggle-btn', {
+              className="custom-property-value-toggle-btn"
-                active: isExpanded,
-              })}
-              component={ArrowIconComponent}
               data-testid={`toggle-${propertyName}`}
-              style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }}
+              size="small"
-              onClick={toggleExpand}
+              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>

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

@@ -31,17 +31,14 @@
   }
 }
 
-.custom-property-value-toggle-btn {
+.ant-btn-text.custom-property-value-toggle-btn {
-  svg {
+  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 {

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}>
-              <div className="p-l-sm">{secondPanel.children}</div>
+              {secondPanel.children}
             </PanelContainer>
           )}
         </ReflexElement>

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

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

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

@@ -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(
+        className={classNames('markdown-parser', textVariant)}
-          'markdown-parser',
-          textVariant,
-          readMore ? '' : reducePreviewLineClass
-        )}
         data-testid="markdown-parser">
         <Viewer
           extendedAutolinks

openmetadata-ui/src/main/resources/ui/src/styles/app.less

@@ -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;