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">
+        <Row className="p-y-sm">
+          <Col className="p-x-md" span={24}>
             <MyAssetStats entityState={data} />
-        <div className="tw-mb-5" />
+          </Col>
+          <Col span={24}>
+            <Divider className="m-y-sm" />
+          </Col>
+          <Col className="p-x-md" span={24}>
             <RecentlyViewed />
-        <div className="tw-mb-5" />
+          </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,10 +45,6 @@ const RecentSearchedTermsAntd: FunctionComponent = () => {
   }, []);
 
   return (
-    <>
-      <Card
-        className="panel-shadow-color"
-        title={t('label.recent-search-term-plural')}>
     <EntityListSkeleton
       dataLength={
         recentlySearchedTerms.length !== 0
@@ -57,6 +53,10 @@ const RecentSearchedTermsAntd: FunctionComponent = () => {
       }
       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 (
@@ -114,8 +114,6 @@ const RecentSearchedTermsAntd: FunctionComponent = () => {
         )}
       </>
     </EntityListSkeleton>
-      </Card>
-    </>
   );
 };
 

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;