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
open-metadata · Oct 1, 2024 · 819c405 · 819c405
1 parent 825101e
commit 819c405
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 78 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/...ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.test.tsx b/...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 () => {

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

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;