fix(ui) UI: Inconsistency in left panel #9431 (#11081)

* fix(ui) UI: Inconsistency in left panel #9431 * addressing comment * updated left panel style for mydata page * updated style as per feedback
2025-08-31 20:51:26 +00:00 · 2023-04-18 00:12:51 +05:30 · 2023-04-18 00:12:51 +05:30 · 9e23f03d56
commit 9e23f03d56
parent af853d7b4f
11 changed files with 175 additions and 106 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx
@ -11,7 +11,7 @@
 *  limitations under the License.
 */

-import { Button, Card, Typography } from 'antd';
+import { Button, Card, Col, Row, Typography } from 'antd';
 import React, { Fragment, FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 import { getEntityName } from 'utils/EntityUtils';
@ -90,14 +90,21 @@ export const EntityListWithAntd: FunctionComponent<AntdEntityListProp> = ({
  loading,
 }: AntdEntityListProp) => {
  return (
-    <Card
-      className="panel-shadow-color"
-      extra={headerText}
-      title={headerTextLabel}>
+    <Card className="panel-shadow-color">
      <EntityListSkeleton
        dataLength={entityList.length !== 0 ? entityList.length : 5}
        loading={Boolean(loading)}>
        <>
+          <Row className="p-b-sm" justify="space-between">
+            <Col>
+              <Typography.Text className="common-left-panel-card-heading">
+                {headerTextLabel}
+              </Typography.Text>
+            </Col>
+            <Col>
+              <Typography.Text>{headerText}</Typography.Text>
+            </Col>
+          </Row>
          {entityList.length
            ? entityList.map((item, index) => {
                return (
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
@ -318,7 +318,7 @@ const Explore: React.FC<ExploreProps> = ({
      leftPanel={
        tabItems.length > 0 && (
          <Card
-            className="page-layout-v1-left-panel page-layout-v1-vertical-scroll"
+            className="page-layout-v1-left-panel page-layout-v1-vertical-scroll card-padding-0"
            data-testid="data-summary-container">
            <ExploreSkeleton loading={Boolean(loading)}>
              <FacetFilter
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyAssetStats/MyAssetStats.component.tsx
@ -11,7 +11,7 @@
 *  limitations under the License.
 */

-import { Button, Card } from 'antd';
+import { Button, Typography } from 'antd';
 import {
  GlobalSettingOptions,
  GlobalSettingsMenuCategory,
@ -125,16 +125,16 @@ const MyAssetStats: FunctionComponent<MyAssetStatsProps> = ({
  );

  return (
-    <Card
-      className="panel-shadow-color"
-      data-testid="data-summary-container"
-      id="assetStatsCount">
+    <div data-testid="data-summary-container" id="assetStatsCount">
      <EntityListSkeleton
        isCount
        isLabel
        isSelect
        loading={Boolean(entityCountLoading)}>
        <>
+          <Typography.Paragraph className="common-left-panel-card-heading m-b-sm">
+            {t('label.asset-plural')}
+          </Typography.Paragraph>
          {Object.values(dataSummary).map((data, index) => (
            <div
              className="tw-flex tw-items-center tw-justify-between"
@ -166,7 +166,7 @@ const MyAssetStats: FunctionComponent<MyAssetStatsProps> = ({
          ))}
        </>
      </EntityListSkeleton>
-    </Card>
+    </div>
  );
 };

--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
@ -11,7 +11,7 @@
 *  limitations under the License.
 */

-import { Card } from 'antd';
+import { Card, Col, Divider, Row } from 'antd';
 import { ELASTICSEARCH_ERROR_PLACEHOLDER_TYPE } from 'enums/common.enum';
 import { observer } from 'mobx-react';
 import React, {
@ -70,13 +70,25 @@ const MyData: React.FC<MyDataProps> = ({

  const getLeftPanel = () => {
    return (
-      <>
-        <MyAssetStats entityState={data} />
-        <div className="tw-mb-5" />
-        <RecentlyViewed />
-        <div className="tw-mb-5" />
-        <RecentSearchedTermsAntd />
-      </>
+      <Card className="panel-shadow-color card-padding-0">
+        <Row className="p-y-sm">
+          <Col className="p-x-md" span={24}>
+            <MyAssetStats entityState={data} />
+          </Col>
+          <Col span={24}>
+            <Divider className="m-y-sm" />
+          </Col>
+          <Col className="p-x-md" span={24}>
+            <RecentlyViewed />
+          </Col>
+          <Col span={24}>
+            <Divider className="m-y-sm" />
+          </Col>
+          <Col className="p-x-md" span={24}>
+            <RecentSearchedTermsAntd />
+          </Col>
+        </Row>
+      </Card>
    );
  };

--- a/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTermsAntd.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/RecentSearchedTerms/RecentSearchedTermsAntd.tsx
@ -11,7 +11,7 @@
 *  limitations under the License.
 */

-import { Button, Card, Popover } from 'antd';
+import { Button, Popover, Typography } from 'antd';
 import { RecentlySearchedData } from 'Models';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@ -45,77 +45,75 @@ const RecentSearchedTermsAntd: FunctionComponent = () => {
  }, []);

  return (
-    <>
-      <Card
-        className="panel-shadow-color"
-        title={t('label.recent-search-term-plural')}>
-        <EntityListSkeleton
-          dataLength={
-            recentlySearchedTerms.length !== 0
-              ? recentlySearchedTerms.length
-              : DEFAULT_SKELETON_DATA_LENGTH
-          }
-          loading={loading}>
-          <>
-            {recentlySearchedTerms.length ? (
-              recentlySearchedTerms.map((item, index) => {
-                return (
-                  <div
-                    className="tw-flex tw-items-center tw-justify-between tw-group"
-                    data-testid={`Recently-Search-${item.term}`}
-                    key={index}>
-                    <div className="tw-flex">
+    <EntityListSkeleton
+      dataLength={
+        recentlySearchedTerms.length !== 0
+          ? recentlySearchedTerms.length
+          : DEFAULT_SKELETON_DATA_LENGTH
+      }
+      loading={loading}>
+      <>
+        <Typography.Paragraph className="common-left-panel-card-heading m-b-sm">
+          {t('label.recent-search-term-plural')}
+        </Typography.Paragraph>
+
+        {recentlySearchedTerms.length ? (
+          recentlySearchedTerms.map((item, index) => {
+            return (
+              <div
+                className="tw-flex tw-items-center tw-justify-between tw-group"
+                data-testid={`Recently-Search-${item.term}`}
+                key={index}>
+                <div className="tw-flex">
+                  <SVGIcons
+                    alt="search"
+                    className="tw-h-4 tw-w-4 tw-self-center"
+                    icon={Icons.SEARCHV1}
+                  />
+                  <div className="tw-flex tw-justify-between">
+                    <Link
+                      className="tw-font-medium"
+                      to={getExplorePath({ search: item.term })}>
+                      <Button
+                        className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline"
+                        data-testid={`search-term-${item.term}`}
+                        type="text">
+                        {item.term.length > 20 ? (
+                          <Popover
+                            content={
+                              <div className="tw-flex tw-flex-nowrap">
+                                {item.term}
+                              </div>
+                            }
+                            placement="top"
+                            trigger="hover">
+                            <span>{item.term.slice(0, 20)}...</span>
+                          </Popover>
+                        ) : (
+                          item.term
+                        )}
+                      </Button>
+                    </Link>
+                    <Button
+                      className="tw-opacity-0 group-hover:tw-opacity-100 tw-ml-2"
+                      type="text"
+                      onClick={() => onRemove(item.term)}>
                      <SVGIcons
-                        alt="search"
-                        className="tw-h-4 tw-w-4 tw-self-center"
-                        icon={Icons.SEARCHV1}
+                        alt="delete"
+                        icon="icon-times-circle"
+                        width="12"
                      />
-                      <div className="tw-flex tw-justify-between">
-                        <Link
-                          className="tw-font-medium"
-                          to={getExplorePath({ search: item.term })}>
-                          <Button
-                            className="tw-text-grey-body hover:tw-text-primary-hover hover:tw-underline"
-                            data-testid={`search-term-${item.term}`}
-                            type="text">
-                            {item.term.length > 20 ? (
-                              <Popover
-                                content={
-                                  <div className="tw-flex tw-flex-nowrap">
-                                    {item.term}
-                                  </div>
-                                }
-                                placement="top"
-                                trigger="hover">
-                                <span>{item.term.slice(0, 20)}...</span>
-                              </Popover>
-                            ) : (
-                              item.term
-                            )}
-                          </Button>
-                        </Link>
-                        <Button
-                          className="tw-opacity-0 group-hover:tw-opacity-100 tw-ml-2"
-                          type="text"
-                          onClick={() => onRemove(item.term)}>
-                          <SVGIcons
-                            alt="delete"
-                            icon="icon-times-circle"
-                            width="12"
-                          />
-                        </Button>
-                      </div>
-                    </div>
+                    </Button>
                  </div>
-                );
-              })
-            ) : (
-              <>{t('message.no-searched-terms')}.</>
-            )}
-          </>
-        </EntityListSkeleton>
-      </Card>
-    </>
+                </div>
+              </div>
+            );
+          })
+        ) : (
+          <>{t('message.no-searched-terms')}.</>
+        )}
+      </>
+    </EntityListSkeleton>
  );
 };

--- a/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx
@ -11,7 +11,7 @@
 *  limitations under the License.
 */

-import { Button, Divider } from 'antd';
+import { Button, Divider, Typography } from 'antd';
 import classNames from 'classnames';
 import { AggregationEntry } from 'interface/search.interface';
 import { isEmpty, isNil } from 'lodash';
@ -114,7 +114,7 @@ const FacetFilter: React.FC<FacetFilterProps> = ({

  return (
    <div data-testid="face-filter">
-      <div className="sidebar-my-data-holder mt-2 mb-3">
+      <div className="sidebar-my-data-holder mt-2 mb-3 p-x-md">
        <Button
          className="text-primary cursor-pointer p-0"
          disabled={isEmpty(filters)}
@ -127,7 +127,7 @@ const FacetFilter: React.FC<FacetFilterProps> = ({
      </div>
      <hr className="m-y-xs" />
      <div
-        className="sidebar-my-data-holder mt-2 mb-3"
+        className="sidebar-my-data-holder mt-2 mb-3 p-x-md"
        data-testid="show-deleted-cntnr">
        <div
          className="filter-group justify-between m-b-xs"
@ -150,7 +150,7 @@ const FacetFilter: React.FC<FacetFilterProps> = ({
          </div>
        </div>
      </div>
-      <hr className="m-y-xs" />
+      <hr className="m-t-xs" />
      {aggregationEntries.map(
        (
          [aggregationKey, aggregation],
@ -158,13 +158,13 @@ const FacetFilter: React.FC<FacetFilterProps> = ({
          { length: aggregationsLength }
        ) => (
          <div data-testid={`filter-heading-${aggregationKey}`} key={index}>
-            <div className="d-flex justify-between flex-col">
-              <h6 className="font-medium text-grey-body m-b-sm m-y-xs">
+            <div className="d-flex justify-between flex-col p-x-md">
+              <Typography.Paragraph className="m-y-sm common-left-panel-card-heading">
                {translateAggregationKeyToTitle(aggregationKey)}
-              </h6>
+              </Typography.Paragraph>
            </div>
            <div
-              className="sidebar-my-data-holder"
+              className="sidebar-my-data-holder p-x-md"
              data-testid="filter-container">
              {aggregation.buckets
                .slice(0, aggregationsPageSize[aggregationKey])
--- a/openmetadata-ui/src/main/resources/ui/src/components/recently-viewed/RecentlyViewed.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/recently-viewed/RecentlyViewed.tsx
@ -11,11 +11,15 @@
 *  limitations under the License.
 */

+import { Button, Typography } from 'antd';
+import EntityListSkeleton from 'components/Skeleton/MyData/EntityListSkeleton/EntityListSkeleton.component';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { getEntityName } from 'utils/EntityUtils';
+import { getEntityIcon, getEntityLink } from 'utils/TableUtils';
 import { EntityReference } from '../../generated/type/entityReference';
 import { getRecentlyViewedData, prepareLabel } from '../../utils/CommonUtils';
-import { EntityListWithAntd } from '../EntityList/EntityList';

 const RecentlyViewed: FunctionComponent = () => {
  const { t } = useTranslation();
@ -46,13 +50,50 @@ const RecentlyViewed: FunctionComponent = () => {
  }, []);

  return (
-    <EntityListWithAntd
-      entityList={data}
-      headerTextLabel={t('label.recent-views')}
-      loading={isLoading}
-      noDataPlaceholder={<>{t('message.no-recently-viewed-date')}</>}
-      testIDText={t('label.recently-viewed')}
-    />
+    <EntityListSkeleton
+      dataLength={data.length !== 0 ? data.length : 5}
+      loading={Boolean(isLoading)}>
+      <>
+        <Typography.Paragraph className="common-left-panel-card-heading m-b-sm">
+          {t('label.recent-views')}
+        </Typography.Paragraph>
+        {data.length
+          ? data.map((item, index) => {
+              return (
+                <div
+                  className="flex items-center justify-between"
+                  data-testid={`Recently Viewed-${getEntityName(
+                    item as unknown as EntityReference
+                  )}`}
+                  key={index}>
+                  <div className="flex items-center">
+                    {getEntityIcon(item.type || '')}
+                    <Link
+                      className="font-medium"
+                      to={getEntityLink(
+                        item.type || '',
+                        item.fullyQualifiedName as string
+                      )}>
+                      <Button
+                        className="entity-button"
+                        title={getEntityName(
+                          item as unknown as EntityReference
+                        )}
+                        type="text">
+                        <Typography.Text
+                          className="w-48 text-left"
+                          ellipsis={{ tooltip: true }}>
+                          {getEntityName(item as unknown as EntityReference)}
+                        </Typography.Text>
+                      </Button>
+                    </Link>
+                  </div>
+                </div>
+              );
+            })
+          : t('message.no-recently-viewed-date')}
+      </>
+    </EntityListSkeleton>
  );
 };

--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@ -362,3 +362,8 @@
 .switch-field .ant-form-item {
  margin: 0;
 }
+
+.common-left-panel-card-heading {
+  color: @group-title-color;
+  font-size: 12px;
+}
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/card.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/card.less
@ -27,3 +27,9 @@
    padding: 16px;
  }
 }
+
+.card-padding-0 {
+  .ant-card-body {
+    padding: 0;
+  }
+}
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/menu.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/menu.less
@ -17,7 +17,6 @@
@left-panel-border-color: rgb(229, 231, 235);
@box-shadow-color: rgba(0, 0, 0, 0.06);
@icon-color: #515151;
-@group-title-color: #76746f;

 .custom-menu.ant-menu-root.ant-menu-inline {
  background: @white;
--- a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
@ -49,3 +49,4 @@
@announcement-background: #fffdf8;
@announcement-border: #ffc143;
@test-parameter-bg-color: #e7ebf0;
+@group-title-color: #76746f;