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)

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

@@ -245,22 +245,26 @@ export const CustomPropertyTable = <T extends ExtentionEntitiesKeys>({
     <>
       {!isEmpty(entityTypeDetail.customProperties) && (
         <>
-          <div className="d-flex justify-between m-b-xs">
+          {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>
-
-          {isRenderedInRightPanel ? (
               <div className="custom-property-right-panel-container">
                 {dataSource.map((record, index) => (
                   <Fragment key={record.name}>
                     <div
-                    className={classNames('custom-property-right-panel-card', {
+                      className={classNames(
+                        'custom-property-right-panel-card',
+                        {
                           'top-border-radius': index === 0,
-                      'bottom-border-radius': index === dataSource.length - 1,
+                          'bottom-border-radius':
-                    })}
+                            index === dataSource.length - 1,
+                        }
+                      )}
                       key={record.name}>
                       <PropertyValue
                         extension={extensionObject.extensionObject}
@@ -279,6 +283,7 @@ export const CustomPropertyTable = <T extends ExtentionEntitiesKeys>({
                   </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(
-      'StartTime: 1736255200000EndTime: 1736255200020'
+      'label.start-entity: 1736255200000label.end-entity: 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, { 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>{`${t('label.start-entity', {
-              <Typography.Text className="text-sm font-medium text-grey-body">
+                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>{`${t('label.end-entity', {
-              <Typography.Text className="text-sm font-medium text-grey-body">
+                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>
+          {!isRenderedInRightPanel && (
             <Col span={24}>
               <RichTextEditorPreviewer
-              className="text-grey-muted"
+                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
+            <Icon
-              className="custom-property-value-toggle-btn"
+              className={classNames('custom-property-value-toggle-btn', {
+                active: isExpanded,
+              })}
+              component={ArrowIconComponent}
               data-testid={`toggle-${propertyName}`}
-              size="small"
+              style={{ color: DE_ACTIVE_COLOR, ...ICON_DIMENSION }}
-              type="text"
+              onClick={toggleExpand}
-              onClick={toggleExpand}>
+            />
-              {isExpanded ? <UpOutlined /> : <DownOutlined />}
-            </Button>
           )}
         </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>

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 {
+.custom-property-value-toggle-btn {
-  border-radius: 100%;
+  svg {
-  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);
   }
 }
 
@@ -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 {

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>

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

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

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;