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

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
+    <Card className="panel-shadow-color">
-      className="panel-shadow-color"
-      extra={headerText}
-      title={headerTextLabel}>
       <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 (

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

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
+    <div data-testid="data-summary-container" id="assetStatsCount">
-      className="panel-shadow-color"
-      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>
   );
 };
 

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 (
-      <>
+      <Card className="panel-shadow-color card-padding-0">
-        <MyAssetStats entityState={data} />
+        <Row className="p-y-sm">
-        <div className="tw-mb-5" />
+          <Col className="p-x-md" span={24}>
-        <RecentlyViewed />
+            <MyAssetStats entityState={data} />
-        <div className="tw-mb-5" />
+          </Col>
-        <RecentSearchedTermsAntd />
+          <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>
     );
   };
 

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 (
-    <>
+    <EntityListSkeleton
-      <Card
+      dataLength={
-        className="panel-shadow-color"
+        recentlySearchedTerms.length !== 0
-        title={t('label.recent-search-term-plural')}>
+          ? recentlySearchedTerms.length
-        <EntityListSkeleton
+          : DEFAULT_SKELETON_DATA_LENGTH
-          dataLength={
+      }
-            recentlySearchedTerms.length !== 0
+      loading={loading}>
-              ? recentlySearchedTerms.length
+      <>
-              : DEFAULT_SKELETON_DATA_LENGTH
+        <Typography.Paragraph className="common-left-panel-card-heading m-b-sm">
-          }
+          {t('label.recent-search-term-plural')}
-          loading={loading}>
+        </Typography.Paragraph>
-          <>
+
-            {recentlySearchedTerms.length ? (
+        {recentlySearchedTerms.length ? (
-              recentlySearchedTerms.map((item, index) => {
+          recentlySearchedTerms.map((item, index) => {
-                return (
+            return (
-                  <div
+              <div
-                    className="tw-flex tw-items-center tw-justify-between tw-group"
+                className="tw-flex tw-items-center tw-justify-between tw-group"
-                    data-testid={`Recently-Search-${item.term}`}
+                data-testid={`Recently-Search-${item.term}`}
-                    key={index}>
+                key={index}>
-                    <div className="tw-flex">
+                <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"
+                        alt="delete"
-                        className="tw-h-4 tw-w-4 tw-self-center"
+                        icon="icon-times-circle"
-                        icon={Icons.SEARCHV1}
+                        width="12"
                       />
-                      <div className="tw-flex tw-justify-between">
+                    </Button>
-                        <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>
                   </div>
-                );
+                </div>
-              })
+              </div>
-            ) : (
+            );
-              <>{t('message.no-searched-terms')}.</>
+          })
-            )}
+        ) : (
-          </>
+          <>{t('message.no-searched-terms')}.</>
-        </EntityListSkeleton>
+        )}
-      </Card>
+      </>
-    </>
+    </EntityListSkeleton>
   );
 };
 

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">
+            <div className="d-flex justify-between flex-col p-x-md">
-              <h6 className="font-medium text-grey-body m-b-sm m-y-xs">
+              <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])

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
+    <EntityListSkeleton
-      entityList={data}
+      dataLength={data.length !== 0 ? data.length : 5}
-      headerTextLabel={t('label.recent-views')}
+      loading={Boolean(isLoading)}>
-      loading={isLoading}
+      <>
-      noDataPlaceholder={<>{t('message.no-recently-viewed-date')}</>}
+        <Typography.Paragraph className="common-left-panel-card-heading m-b-sm">
-      testIDText={t('label.recently-viewed')}
+          {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>
   );
 };
 

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;
+}

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;
+  }
+}

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;

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;