From 9fcaaaf2c6dc00b051ef3803e785402f6b1647cb Mon Sep 17 00:00:00 2001
From: karanh37 <33024356+karanh37@users.noreply.github.com>
Date: Sat, 24 Jun 2023 17:24:40 +0530
Subject: [PATCH] fix: address feedbacks of explore lineage (#12123)

* fix: feedbacks

* fix: color feedbacks

* fix: query page resizable panel update

* fix: task feed card feedbacks

* fix: unit tests

* fix: spacing issue

* address comments

---------

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>
---
 .../ActivityFeedCard/PopoverContent.tsx       |  14 +-
 .../TaskFeedCard/TaskFeedCard.component.tsx   |   4 +-
 .../AddGlossary/AddGlossary.component.tsx     |   2 -
 .../ui/src/components/AppBar/Appbar.tsx       |   9 +-
 .../DataAssetsHeader.component.tsx            |   4 +-
 .../EntityInfoDrawer.style.less               |   2 +-
 .../EntityLineage/AddPipeLineModal.tsx        |   2 +-
 .../EntityLineage/CustomNodeV1.component.tsx  |   2 +-
 .../EntityLineage/LineageConfigModal.tsx      |   2 +-
 .../components/EntityLineage/custom-node.less |  23 +-
 .../src/components/EntityList/EntityList.tsx  |   2 +-
 .../ExploreSearchCard.interface.ts            |   1 -
 .../ExploreSearchCard/ExploreSearchCard.tsx   | 112 ++++-----
 .../tabs/AssetsTabs.component.tsx             |   1 -
 .../WhatsNewModal/WhatsNewModal.styles.less   |   4 +-
 .../RightSidebar/RightSidebar.component.tsx   |   5 +-
 .../Task/TaskTab/TaskTab.component.tsx        |  46 ++--
 .../Team/TeamDetails/TeamHierarchy.tsx        |   7 +-
 .../src/components/Users/Users.component.tsx  |  39 ++--
 .../EntitySummaryDetails.tsx                  |  13 +-
 .../common/PopOverCard/EntityPopOverCard.tsx  |   1 -
 .../SummaryTagsDescription.component.tsx      |  18 +-
 .../UserSelectableList.component.tsx          |   4 +-
 .../UserTeamSelectableList.component.tsx      |   4 +-
 .../common/description/Description.tsx        |   3 +-
 .../common/description/DescriptionV1.tsx      |   2 +-
 .../ManageButton/ManageButton.tsx             |   3 +-
 .../recently-viewed/RecentlyViewed.tsx        |   2 +-
 .../components/searched-data/SearchedData.tsx |   1 -
 .../AddQueryPage/AddQueryPage.component.tsx   | 216 ++++++++++--------
 .../pages/AddQueryPage/AddQueryPage.test.tsx  |  11 +-
 .../ui/src/pages/DataInsightPage/KPIList.tsx  |  18 +-
 .../PoliciesDetailPage/PoliciesDetailPage.tsx |   7 +-
 .../TableDetailsPageV1/TableDetailsPageV1.tsx |  32 ++-
 .../RequestDescriptionPage.tsx                |   8 +-
 .../resources/ui/src/pages/service/index.tsx  |   7 +-
 .../ui/src/styles/components/card.less        |   7 +
 .../ui/src/styles/components/drawer.less      |   4 +
 .../resources/ui/src/utils/EntityUtils.tsx    |  12 +-
 39 files changed, 342 insertions(+), 312 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx
index eca275533885..19fc1afef0bc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCard/PopoverContent.tsx
@@ -12,6 +12,7 @@
  */
 
 import { Button, Popover, Space } from 'antd';
+import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
 import { isNil, isUndefined, uniqueId } from 'lodash';
 import React, { FC, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -210,18 +211,13 @@ const PopoverContent: FC<Props> = ({
 
       {editCheck && (
         <Button
-          className="p-0"
+          className="p-0 flex-center"
           data-testid="edit-message"
+          icon={<EditIcon width="18px" />}
           size="small"
           type="text"
-          onClick={handleEdit}>
-          <SVGIcons
-            alt="edit"
-            icon={Icons.EDIT}
-            title={t('label.edit')}
-            width="18px"
-          />
-        </Button>
+          onClick={handleEdit}
+        />
       )}
 
       {deleteButtonCheck ? (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCard.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCard.component.tsx
index b07f64b06ea3..e927048f7d5d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCard.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCard.component.tsx
@@ -22,8 +22,8 @@ import { isUndefined, noop } from 'lodash';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
+import { getNameFromFQN } from 'utils/CommonUtils';
 import {
-  entityDisplayName,
   getEntityFieldDisplay,
   getEntityFQN,
   getEntityType,
@@ -100,7 +100,7 @@ const TaskFeedCard = ({
               data-testid="entitylink"
               to={prepareFeedLink(entityType, entityFQN)}
               onClick={(e) => e.stopPropagation()}>
-              {entityDisplayName(entityType, entityFQN)}
+              {getNameFromFQN(entityFQN)}
             </Link>
           </EntityPopOverCard>
         </>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx
index b5e2399c2978..3b5cbed7232f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx
@@ -17,7 +17,6 @@ import { FormProps, useForm } from 'antd/lib/form/Form';
 import ResizablePanels from 'components/common/ResizablePanels/ResizablePanels';
 import { UserTag } from 'components/common/UserTag/UserTag.component';
 import { UserTagSize } from 'components/common/UserTag/UserTag.interface';
-import PageLayoutV1 from 'components/containers/PageLayoutV1';
 import { ENTITY_NAME_REGEX } from 'constants/regex.constants';
 import { EntityReference } from 'generated/type/entityLineage';
 import { FieldProp, FieldTypes } from 'interface/FormUtils.interface';
@@ -305,4 +304,3 @@ const AddGlossary = ({
 };
 
 export default AddGlossary;
-PageLayoutV1;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx
index 67ffd8928707..eecf1f3780d3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AppBar/Appbar.tsx
@@ -292,7 +292,7 @@ const Appbar: React.FC = (): JSX.Element => {
             {name}
           </Typography.Paragraph>
         </Link>
-        <hr className="tw-my-1.5" />
+        <hr className="m-y-sm" />
         {roles.length > 0 ? getUsersRoles(roles, t('label.role-plural')) : null}
         {inheritedRoles.length > 0
           ? getUsersRoles(inheritedRoles, t('label.inherited-role-plural'))
@@ -321,6 +321,7 @@ const Appbar: React.FC = (): JSX.Element => {
             ) : null}
           </div>
         ) : null}
+        <hr className="m-t-sm" />
       </div>
     );
   };
@@ -333,6 +334,12 @@ const Appbar: React.FC = (): JSX.Element => {
       icon: <></>,
       isText: true,
     },
+    {
+      name: t('label.logout'),
+      to: '',
+      disabled: false,
+      method: onLogoutHandler,
+    },
   ];
 
   const searchHandler = (value: string) => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx
index a54c1d302f7a..ef599e36b7f7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetsHeader/DataAssetsHeader.component.tsx
@@ -31,7 +31,7 @@ import TierCard from 'components/common/TierCard/TierCard';
 import TitleBreadcrumb from 'components/common/title-breadcrumb/title-breadcrumb.component';
 import EntityHeaderTitle from 'components/Entity/EntityHeaderTitle/EntityHeaderTitle.component';
 import { FQN_SEPARATOR_CHAR } from 'constants/char.constants';
-import { getDashboardDetailsPath } from 'constants/constants';
+import { DE_ACTIVE_COLOR, getDashboardDetailsPath } from 'constants/constants';
 import { NO_PERMISSION_FOR_ACTION } from 'constants/HelperTextUtil';
 import { EntityTabs, EntityType } from 'enums/entity.enum';
 import { Container } from 'generated/entity/data/container';
@@ -474,7 +474,7 @@ export const DataAssetsHeader = ({
                         disabled={
                           !(permissions.EditAll || permissions.EditTags)
                         }
-                        icon={<EditIcon width="14px" />}
+                        icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
                         size="small"
                         type="text"
                       />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.style.less b/openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.style.less
index a3a031c325eb..8cfdf7a6fd4c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.style.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.style.less
@@ -22,7 +22,7 @@
 }
 
 .entity-panel-container {
-  margin-top: 48px;
+  margin-top: 60px;
   .ant-drawer-header {
     border-bottom: none;
     padding-bottom: 0 !important;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/AddPipeLineModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/AddPipeLineModal.tsx
index 30bb19c04deb..678744d12553 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/AddPipeLineModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/AddPipeLineModal.tsx
@@ -67,8 +67,8 @@ const AddPipeLineModal = ({
         </Button>,
       ]}
       maskClosable={false}
+      open={showAddPipelineModal}
       title={isUndefined(selectedPipelineId) ? 'Add Pipeline' : 'Edit Pipeline'}
-      visible={showAddPipelineModal}
       onCancel={onModalCancel}>
       <Select
         allowClear
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNodeV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNodeV1.component.tsx
index bcac6419c0f1..84f8ac958431 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNodeV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNodeV1.component.tsx
@@ -103,7 +103,7 @@ const CustomNodeV1 = (props: NodeProps) => {
     updateNodeInternals(id);
     if (!isExpanded) {
       setShowAllColumns(false);
-    } else if (Object.values(columns).length < 5) {
+    } else if (!isEmpty(columns) && Object.values(columns).length < 5) {
       setShowAllColumns(true);
     }
   }, [isEditMode, isExpanded, columns]);
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/LineageConfigModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/LineageConfigModal.tsx
index 734d710ae82f..7f8a2254be4d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/LineageConfigModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/LineageConfigModal.tsx
@@ -54,8 +54,8 @@ const LineageConfigModal: React.FC<LineageConfigModalProps> = ({
   return (
     <Modal
       maskClosable={false}
+      open={visible}
       title={t('label.lineage-config')}
-      visible={visible}
       onCancel={onCancel}
       onOk={form.submit}>
       <Form
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/custom-node.less b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/custom-node.less
index 509ed82f0404..393679c22361 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/custom-node.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/custom-node.less
@@ -38,15 +38,19 @@
   box-shadow: none;
 }
 
+.lineage-node {
+  border: @global-border;
+  border-radius: 4px;
+}
+
 .react-flow__node-default,
 .react-flow__node-group,
 .react-flow__node-input,
 .react-flow__node-output {
   padding: 0 !important;
-  border-color: @border-color !important;
-  border-radius: 4px !important;
+  border: none !important;
   box-shadow: none !important;
-  background-color: @grey-1 !important;
+  background-color: @white !important;
 }
 
 .react-flow__node-load-more {
@@ -85,7 +89,9 @@
 .react-flow__node-load-more.selectable.selected,
 .react-flow__node-load-more.selectable:focus,
 .react-flow__node-load-more.selectable:focus-visible {
-  border-color: @primary-color !important;
+  .lineage-node {
+    border-color: @primary-color !important;
+  }
   .lineage-node-handle {
     border-color: @primary-color;
   }
@@ -96,9 +102,6 @@
     background: @primary-color-hover;
     border-top: 1px solid @border-color;
   }
-  .custom-node-header-tracing {
-    border: none;
-  }
 }
 
 .react-flow__handle.connectable {
@@ -128,8 +131,8 @@
   border-radius: 0;
   border-color: @border-color;
   background: @white;
-  top: 0;
-  height: 27px;
+  top: 1px;
+  height: 25px;
   transform: none;
   border: none;
   &.react-flow__handle-left {
@@ -144,4 +147,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
+  background-color: @white;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx
index f6ec6530d816..174194df84c5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityList/EntityList.tsx
@@ -161,7 +161,7 @@ export const EntityListWithV1: FunctionComponent<AntdEntityListProp> = ({
       <>
         <Row className="m-b-xs" justify="space-between">
           <Col>
-            <Typography.Text className="right-panel-heading">
+            <Typography.Text className="right-panel-label">
               {headerTextLabel}
             </Typography.Text>
           </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.interface.ts
index 55bf579ff7b1..b1d8d108521c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.interface.ts
@@ -27,6 +27,5 @@ export interface ExploreSearchCardProps {
   checked?: boolean;
   showCheckboxes?: boolean;
   showTags?: boolean;
-  showNameHeader?: boolean;
   openEntityInNewPage?: boolean;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.tsx
index 83e4da9ca4ec..ecd01d8df093 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.tsx
@@ -10,10 +10,9 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Button, Checkbox, Col, Row, Typography } from 'antd';
+import { Button, Col, Row, Typography } from 'antd';
 import classNames from 'classnames';
 import TitleBreadcrumb from 'components/common/title-breadcrumb/title-breadcrumb.component';
-import { EntityHeader } from 'components/Entity/EntityHeader/EntityHeader.component';
 import TableDataCardBody from 'components/TableDataCardBody/TableDataCardBody';
 import { useTourProvider } from 'components/TourProvider/TourProvider';
 import { FQN_SEPARATOR_CHAR } from 'constants/char.constants';
@@ -48,10 +47,7 @@ const ExploreSearchCard: React.FC<ExploreSearchCardProps> = forwardRef<
       source,
       matches,
       handleSummaryPanelDisplay,
-      showCheckboxes,
-      checked,
       showTags = true,
-      showNameHeader = true,
       openEntityInNewPage,
     },
     ref
@@ -115,72 +111,46 @@ const ExploreSearchCard: React.FC<ExploreSearchCardProps> = forwardRef<
 
     const header = useMemo(() => {
       return (
-        <>
-          {showNameHeader ? (
-            <Row wrap={false}>
-              <Col flex="auto">
-                <EntityHeader
-                  titleIsLink
-                  breadcrumb={breadcrumbs}
-                  entityData={source}
-                  entityType={source.entityType as EntityType}
-                  gutter="large"
-                  icon={serviceIcon}
-                  openEntityInNewPage={openEntityInNewPage}
-                  serviceName={source?.service?.name ?? ''}
-                />
-              </Col>
-              {showCheckboxes && (
-                <Col flex="20px">
-                  <Checkbox checked={checked} className="m-l-auto" />
-                </Col>
-              )}
-            </Row>
-          ) : (
-            <Row gutter={[8, 8]}>
-              <Col span={24}>
-                <div className="d-flex gap-2 items-center">
-                  {serviceIcon}
-                  <div
-                    className="entity-breadcrumb"
-                    data-testid="category-name">
-                    <TitleBreadcrumb titleLinks={breadcrumbs} />
-                  </div>
-                </div>
-              </Col>
-              <Col span={24}>
-                {isTourOpen ? (
-                  <Button data-testid={source.fullyQualifiedName} type="link">
-                    <Typography.Text
-                      className="text-lg font-medium text-link-color"
-                      data-testid="entity-header-display-name">
-                      {stringToHTML(getEntityName(source))}
-                    </Typography.Text>
-                  </Button>
-                ) : (
-                  <Link
-                    className="no-underline"
-                    data-testid="entity-link"
-                    target={openEntityInNewPage ? '_blank' : '_self'}
-                    to={
-                      source.fullyQualifiedName && source.entityType
-                        ? getEntityLinkFromType(
-                            getEncodedFqn(source.fullyQualifiedName),
-                            source.entityType as EntityType
-                          )
-                        : ''
-                    }>
-                    <Typography.Text
-                      className="text-lg font-medium text-link-color"
-                      data-testid="entity-header-display-name">
-                      {stringToHTML(getEntityName(source))}
-                    </Typography.Text>
-                  </Link>
-                )}
-              </Col>
-            </Row>
-          )}
-        </>
+        <Row gutter={[8, 8]}>
+          <Col span={24}>
+            <div className="d-flex gap-2 items-center">
+              {serviceIcon}
+              <div className="entity-breadcrumb" data-testid="category-name">
+                <TitleBreadcrumb titleLinks={breadcrumbs} />
+              </div>
+            </div>
+          </Col>
+          <Col span={24}>
+            {isTourOpen ? (
+              <Button data-testid={source.fullyQualifiedName} type="link">
+                <Typography.Text
+                  className="text-lg font-medium text-link-color"
+                  data-testid="entity-header-display-name">
+                  {stringToHTML(getEntityName(source))}
+                </Typography.Text>
+              </Button>
+            ) : (
+              <Link
+                className="no-underline"
+                data-testid="entity-link"
+                target={openEntityInNewPage ? '_blank' : '_self'}
+                to={
+                  source.fullyQualifiedName && source.entityType
+                    ? getEntityLinkFromType(
+                        getEncodedFqn(source.fullyQualifiedName),
+                        source.entityType as EntityType
+                      )
+                    : ''
+                }>
+                <Typography.Text
+                  className="text-lg font-medium text-link-color"
+                  data-testid="entity-header-display-name">
+                  {stringToHTML(getEntityName(source))}
+                </Typography.Text>
+              </Link>
+            )}
+          </Col>
+        </Row>
       );
     }, [breadcrumbs, source]);
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/AssetsTabs.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/AssetsTabs.component.tsx
index ba3784156c6b..e34b8c4cef11 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/AssetsTabs.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/tabs/AssetsTabs.component.tsx
@@ -261,7 +261,6 @@ const AssetsTabs = forwardRef(
                 handleSummaryPanelDisplay={setSelectedCard}
                 id={_id}
                 key={index}
-                showNameHeader={false}
                 showTags={false}
                 source={_source}
               />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewModal.styles.less b/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewModal.styles.less
index 27b78dc9bbcd..85396f7526c2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewModal.styles.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/WhatsNewModal/WhatsNewModal.styles.less
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-@import url('../../../styles/variables.less');
+@import (reference) url('../../../styles/variables.less');
 
 .whats-new-modal {
   .ant-modal-body {
@@ -42,7 +42,7 @@
     width: 338px;
   }
   .ant-card-body {
-    background-color: #35198e;
+    background-color: @primary-color;
     border-radius: @border-radius-base;
   }
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/RightSidebar.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/RightSidebar.component.tsx
index 8eac21c83a70..4552d1c694d6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/RightSidebar.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/RightSidebar/RightSidebar.component.tsx
@@ -57,7 +57,7 @@ const RightSidebar = ({
       {announcements.length > 0 && (
         <>
           <div className="p-md p-b-xss">
-            <Typography.Paragraph className="right-panel-heading m-b-sm">
+            <Typography.Paragraph className="right-panel-label m-b-sm">
               {t('label.recent-announcement-plural')}
             </Typography.Paragraph>
             <div className="announcement-container-list">
@@ -99,8 +99,6 @@ const RightSidebar = ({
               })}
             </div>
           </div>
-
-          {/* <Divider className="m-0" /> */}
         </>
       )}
 
@@ -130,7 +128,6 @@ const RightSidebar = ({
           testIDText="Following data"
         />
       </div>
-      {/* <Divider className="m-0" /> */}
       <div className="p-md" data-testid="recently-viewed-container">
         <RecentlyViewed />
       </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Task/TaskTab/TaskTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Task/TaskTab/TaskTab.component.tsx
index efac3cb6b81e..00150c37192a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Task/TaskTab/TaskTab.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Task/TaskTab/TaskTab.component.tsx
@@ -46,6 +46,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useHistory } from 'react-router-dom';
 import { updateTask } from 'rest/feedsAPI';
+import { getNameFromFQN } from 'utils/CommonUtils';
 import { ENTITY_LINK_SEPARATOR } from 'utils/EntityUtils';
 import { getEntityField, getEntityFQN, prepareFeedLink } from 'utils/FeedUtils';
 import { getEntityLink } from 'utils/TableUtils';
@@ -56,7 +57,6 @@ import {
   TASK_ACTION_LIST,
 } from 'utils/TasksUtils';
 import { showErrorToast, showSuccessToast } from 'utils/ToastUtils';
-import Fqn from './../../../utils/Fqn';
 import { TaskTabProps } from './TaskTab.interface';
 import { ReactComponent as TaskCloseIcon } from '/assets/svg/ic-close-task.svg';
 import { ReactComponent as TaskOpenIcon } from '/assets/svg/ic-open-task.svg';
@@ -144,7 +144,7 @@ export const TaskTab = ({
             data-testid="entitylink"
             to={prepareFeedLink(entityType, entityFQN)}
             onClick={(e) => e.stopPropagation()}>
-            {Fqn.split(entityFQN).join('  >  ')}
+            {getNameFromFQN(entityFQN)}
           </Link>
         </EntityPopOverCard>
       </>
@@ -247,13 +247,11 @@ export const TaskTab = ({
 
   const onTaskReject = () => {
     if (comment && taskDetails?.id) {
-      //   setIsLoadingOnSave(true);
       updateTask(TaskOperation.REJECT, taskDetails?.id + '', {
         comment,
       } as unknown as TaskDetails)
         .then(() => {
           showSuccessToast(t('server.task-closed-successfully'));
-          //   setModalVisible(false);
         })
         .catch((err: AxiosError) => showErrorToast(err));
     } else {
@@ -277,23 +275,29 @@ export const TaskTab = ({
         {getTaskLinkElement}
       </Col>
       <Col span={24}>
-        <Typography.Text className="text-grey-muted">
-          {t('label.assignee-plural')}:{' '}
-        </Typography.Text>
-
-        <OwnerLabel
-          hasPermission={false}
-          owner={taskDetails?.assignees[0]}
-          onUpdate={noop}
-        />
-        <Typography.Text className="text-grey-muted">
-          {t('label.created-by')}:{' '}
-        </Typography.Text>
-        <OwnerLabel
-          hasPermission={false}
-          owner={{ name: task.createdBy, type: 'user', id: '' }}
-          onUpdate={noop}
-        />
+        <div className="d-flex justify-between">
+          <div className="flex-center gap-2">
+            <Typography.Text className="text-grey-muted">
+              {t('label.assignee-plural')}:{' '}
+            </Typography.Text>
+
+            <OwnerLabel
+              hasPermission={false}
+              owner={taskDetails?.assignees[0]}
+              onUpdate={noop}
+            />
+          </div>
+          <div className="flex-center gap-2">
+            <Typography.Text className="text-grey-muted">
+              {t('label.created-by')}:{' '}
+            </Typography.Text>
+            <OwnerLabel
+              hasPermission={false}
+              owner={{ name: task.createdBy, type: 'user', id: '' }}
+              onUpdate={noop}
+            />
+          </div>
+        </div>
       </Col>
       <Col span={24}>
         {isTaskDescription && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/TeamHierarchy.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/TeamHierarchy.tsx
index 12542c42d5c6..73c8c7a38aeb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/TeamHierarchy.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/TeamHierarchy.tsx
@@ -54,6 +54,7 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
       {
         title: t('label.team-plural'),
         dataIndex: 'teams',
+        className: 'whitespace-nowrap',
         key: 'teams',
         render: (_, record) => (
           <Link
@@ -66,17 +67,20 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
       {
         title: t('label.type'),
         dataIndex: 'teamType',
+        width: 120,
         key: 'teamType',
       },
       {
         title: t('label.sub-team-plural'),
         dataIndex: 'childrenCount',
+        width: 100,
         key: 'subTeams',
         render: (childrenCount: number) => childrenCount ?? '--',
       },
       {
         title: t('label.user-plural'),
         dataIndex: 'userCount',
+        width: 60,
         key: 'users',
         render: (userCount: number) => userCount ?? '--',
       },
@@ -85,13 +89,14 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({
           entity: t('label.asset'),
         }),
         dataIndex: 'owns',
+        width: 120,
         key: 'owns',
         render: (owns) => owns?.length || 0,
       },
       {
         title: t('label.description'),
         dataIndex: 'description',
-        width: 450,
+        width: 300,
         key: 'description',
         render: (description: string) => (
           <Typography.Paragraph
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
index 10aadc0ce066..0b159743b48a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
@@ -40,6 +40,7 @@ import { changePassword } from 'rest/auth-API';
 import { getRoles } from 'rest/rolesAPIV1';
 import { getEntityName } from 'utils/EntityUtils';
 import {
+  DE_ACTIVE_COLOR,
   getUserPath,
   PAGE_SIZE_LARGE,
   TERM_ADMIN,
@@ -240,7 +241,7 @@ const Users = ({
                 className="tw-ml-2 focus:tw-outline-none"
                 data-testid="edit-displayName"
                 onClick={() => setIsDisplayNameEdit(true)}>
-                <EditIcon width={16} />
+                <EditIcon color={DE_ACTIVE_COLOR} width={16} />
               </button>
             </Fragment>
           )}
@@ -332,14 +333,16 @@ const Users = ({
     if (!isAdminUser && !isAuthDisabled) {
       return (
         <Card
-          className="ant-card-feed relative card-body-border-none"
+          className="ant-card-feed relative card-body-border-none card-padding-y-0"
           key="teams-card"
           style={{
             marginTop: '20px',
           }}
           title={
             <div className="d-flex tw-items-center tw-justify-between">
-              <h6 className="tw-heading tw-mb-0">{t('label.team-plural')}</h6>
+              <h6 className="right-panel-label tw-mb-0">
+                {t('label.team-plural')}
+              </h6>
             </div>
           }>
           <div className="tw-mb-4">{teamsElement}</div>
@@ -348,20 +351,22 @@ const Users = ({
     } else {
       return (
         <Card
-          className="ant-card-feed relative card-body-border-none "
+          className="ant-card-feed relative card-body-border-none card-padding-y-0"
           key="teams-card"
           style={{
             marginTop: '20px',
           }}
           title={
             <div className="d-flex tw-items-center tw-justify-between">
-              <h6 className="tw-heading tw-mb-0">{t('label.team-plural')}</h6>
+              <h6 className="right-panel-label tw-mb-0">
+                {t('label.team-plural')}
+              </h6>
               {!isTeamsEdit && (
                 <button
                   className="tw-ml-2 focus:tw-outline-none "
                   data-testid="edit-teams"
                   onClick={() => setIsTeamsEdit(true)}>
-                  <EditIcon width={16} />
+                  <EditIcon color={DE_ACTIVE_COLOR} width={16} />
                 </button>
               )}
             </div>
@@ -428,14 +433,16 @@ const Users = ({
     if (!isAdminUser && !isAuthDisabled) {
       return (
         <Card
-          className="ant-card-feed relative card-body-border-none"
+          className="ant-card-feed relative card-body-border-none card-padding-y-0"
           key="roles-card "
           style={{
             marginTop: '20px',
           }}
           title={
             <div className="d-flex tw-items-center tw-justify-between">
-              <h6 className="tw-heading tw-mb-0">{t('label.role-plural')}</h6>
+              <h6 className="right-panel-label tw-mb-0">
+                {t('label.role-plural')}
+              </h6>
             </div>
           }>
           <div className="roles-container">{rolesElement}</div>
@@ -444,20 +451,22 @@ const Users = ({
     } else {
       return (
         <Card
-          className="ant-card-feed relative card-body-border-none"
+          className="ant-card-feed relative card-body-border-none card-padding-y-0"
           key="roles-card"
           style={{
             marginTop: '20px',
           }}
           title={
             <div className="d-flex tw-items-center tw-justify-between">
-              <h6 className="tw-heading tw-mb-0">{t('label.role-plural')}</h6>
+              <h6 className="right-panel-label tw-mb-0">
+                {t('label.role-plural')}
+              </h6>
               {!isRolesEdit && (
                 <button
                   className="tw-ml-2 focus:tw-outline-none"
                   data-testid="edit-roles"
                   onClick={() => setIsRolesEdit(true)}>
-                  <EditIcon width={16} />
+                  <EditIcon color={DE_ACTIVE_COLOR} width={16} />
                 </button>
               )}
             </div>
@@ -494,14 +503,16 @@ const Users = ({
   const getInheritedRolesComponent = () => {
     return (
       <Card
-        className="ant-card-feed relative card-body-border-none"
+        className="ant-card-feed relative card-body-border-none card-padding-y-0"
         key="inherited-roles-card-component"
         style={{
           marginTop: '20px',
         }}
         title={
           <div className="d-flex">
-            <h6 className="tw-heading tw-mb-0" data-testid="inherited-roles">
+            <h6
+              className="right-panel-label tw-mb-0"
+              data-testid="inherited-roles">
               {t('label.inherited-role-plural')}
             </h6>
           </div>
@@ -547,7 +558,7 @@ const Users = ({
   const fetchLeftPanel = () => {
     return (
       <div className="p-xs user-profile-antd-card" data-testid="left-panel">
-        <Card className="ant-card-feed relative " key="left-panel-card">
+        <Card className="ant-card-feed relative" key="left-panel-card">
           {isImgUrlValid ? (
             <Image
               alt="profile"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx
index ef095ef59c7e..1213675f5b5c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx
@@ -17,6 +17,7 @@ import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
 import { ReactComponent as IconExternalLink } from 'assets/svg/external-links.svg';
 import { ReactComponent as IconTeamsGrey } from 'assets/svg/teams-grey.svg';
 import classNames from 'classnames';
+import { DE_ACTIVE_COLOR } from 'constants/constants';
 import { isString, isUndefined, lowerCase, noop, toLower } from 'lodash';
 import { ExtraInfo } from 'Models';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -178,7 +179,11 @@ const EntitySummaryDetails = ({
               {updateTier && !deleted ? (
                 <TierCard currentTier={tier?.tagFQN} updateTier={updateTier}>
                   <span data-testid="edit-tier">
-                    <EditIcon className="tw-cursor-pointer" width={14} />
+                    <EditIcon
+                      className="tw-cursor-pointer"
+                      color={DE_ACTIVE_COLOR}
+                      width={14}
+                    />
                   </span>
                 </TierCard>
               ) : null}
@@ -312,7 +317,11 @@ const EntitySummaryDetails = ({
               {updateTier && !deleted ? (
                 <TierCard currentTier={tier?.tagFQN} updateTier={updateTier}>
                   <span data-testid="edit-tier">
-                    <EditIcon className="cursor-pointer" width={14} />
+                    <EditIcon
+                      className="cursor-pointer"
+                      color={DE_ACTIVE_COLOR}
+                      width={14}
+                    />
                   </span>
                 </TierCard>
               ) : null}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx
index 2b3b6a363381..e1cbf6aded45 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/PopOverCard/EntityPopOverCard.tsx
@@ -126,7 +126,6 @@ const PopoverContent: React.FC<{
   return (
     <ExploreSearchCard
       id="tabledatacard"
-      showNameHeader={false}
       showTags={false}
       source={{
         ...entityData,
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryTagsDescription/SummaryTagsDescription.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryTagsDescription/SummaryTagsDescription.component.tsx
index 18cd2eaf3a8f..972c554872de 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryTagsDescription/SummaryTagsDescription.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryTagsDescription/SummaryTagsDescription.component.tsx
@@ -11,7 +11,6 @@
  *  limitations under the License.
  */
 import { Col, Divider, Row, Typography } from 'antd';
-import { ReactComponent as TagIcon } from 'assets/svg/classification.svg';
 import { EntityUnion } from 'components/Explore/explore.interface';
 import TagsViewer from 'components/Tag/TagsViewer/tags-viewer';
 import { TagLabel } from 'generated/type/tagLabel';
@@ -30,7 +29,7 @@ const SummaryTagsDescription = ({
 
   return (
     <>
-      <Row className="m-md" gutter={[0, 16]}>
+      <Row className="m-md" gutter={[0, 8]}>
         <Col span={24}>
           <Typography.Text className="summary-panel-section-title">
             {t('label.tag-plural')}
@@ -39,14 +38,6 @@ const SummaryTagsDescription = ({
         <Col span={24}>
           {tags.length > 0 ? (
             <Row>
-              <Col span={1}>
-                <TagIcon
-                  className="m-t-xs"
-                  data-testid="tag-grey-icon"
-                  height={14}
-                  width={14}
-                />
-              </Col>
               <Col span={23}>
                 <TagsViewer sizeCap={-1} tags={tags} />
               </Col>
@@ -61,7 +52,7 @@ const SummaryTagsDescription = ({
 
       <Divider className="m-y-xs" />
 
-      <Row className="m-md" gutter={[0, 16]}>
+      <Row className="m-md" gutter={[0, 8]}>
         <Col span={24}>
           <Typography.Text
             className="summary-panel-section-title"
@@ -72,7 +63,10 @@ const SummaryTagsDescription = ({
         <Col span={24}>
           <div>
             {entityDetail.description?.trim() ? (
-              <RichTextEditorPreviewer markdown={entityDetail.description} />
+              <RichTextEditorPreviewer
+                markdown={entityDetail.description}
+                maxLength={80}
+              />
             ) : (
               <Typography className="text-grey-body">
                 {t('label.no-data-found')}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/UserSelectableList/UserSelectableList.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/UserSelectableList/UserSelectableList.component.tsx
index 632c6578c350..dc0b86c3d7d5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/UserSelectableList/UserSelectableList.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/UserSelectableList/UserSelectableList.component.tsx
@@ -12,7 +12,7 @@
  */
 import { Button, Popover, Tooltip } from 'antd';
 import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
-import { PAGE_SIZE_MEDIUM } from 'constants/constants';
+import { DE_ACTIVE_COLOR, PAGE_SIZE_MEDIUM } from 'constants/constants';
 import { NO_PERMISSION_FOR_ACTION } from 'constants/HelperTextUtil';
 import { EntityType } from 'enums/entity.enum';
 import { SearchIndex } from 'enums/search.enum';
@@ -130,7 +130,7 @@ export const UserSelectableList = ({
             className="p-0 flex-center"
             data-testid="add-user"
             disabled={!hasPermission}
-            icon={<EditIcon width="14px" />}
+            icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
             size="small"
             type="text"
           />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx
index 029bb447ba31..5e8584c71a3b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx
@@ -13,7 +13,7 @@
 import { Button, Popover, Space, Tabs, Typography } from 'antd';
 import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
 import { WILD_CARD_CHAR } from 'constants/char.constants';
-import { PAGE_SIZE_MEDIUM } from 'constants/constants';
+import { DE_ACTIVE_COLOR, PAGE_SIZE_MEDIUM } from 'constants/constants';
 import { EntityType } from 'enums/entity.enum';
 import { SearchIndex } from 'enums/search.enum';
 import { EntityReference } from 'generated/entity/data/table';
@@ -299,7 +299,7 @@ export const UserTeamSelectableList = ({
             <Button
               className="flex-center p-0"
               data-testid="edit-owner"
-              icon={<EditIcon width="14px" />}
+              icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
               size="small"
               type="text"
               onClick={() => setPopupVisible(true)}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx
index de287873b202..817c53525d7c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx
@@ -13,6 +13,7 @@
 import { Button, Popover, Space, Typography } from 'antd';
 import { ReactComponent as IconEdit } from 'assets/svg/edit-new.svg';
 import { AxiosError } from 'axios';
+import { DE_ACTIVE_COLOR } from 'constants/constants';
 import { t } from 'i18next';
 import { isFunction, isUndefined } from 'lodash';
 import React, { FC, Fragment } from 'react';
@@ -182,7 +183,7 @@ const Description: FC<DescriptionProps> = ({
           <Button
             className="w-7 h-7 p-0 flex-center"
             data-testid="edit-description"
-            icon={<IconEdit height={16} width={16} />}
+            icon={<IconEdit color={DE_ACTIVE_COLOR} height={16} width={16} />}
             type="text"
             onClick={handleUpdate}
           />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/description/DescriptionV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/description/DescriptionV1.tsx
index 96731f7dc13e..b5e12f9b77fb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/description/DescriptionV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/description/DescriptionV1.tsx
@@ -144,7 +144,7 @@ const DescriptionV1 = ({
     };
 
     return !isReadOnly && hasEditAccess ? (
-      <Space className="w-full justify-end" size={12}>
+      <Space className="w-full" size={12}>
         <Icon
           component={EditIcon}
           data-testid="edit-description"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx
index 3df638671fc9..14ed668e27cc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx
@@ -18,7 +18,6 @@ import classNames from 'classnames';
 import { ManageButtonItemLabel } from 'components/common/ManageButtonContentItem/ManageButtonContentItem.component';
 import EntityNameModal from 'components/Modals/EntityNameModal/EntityNameModal.component';
 import { EntityName } from 'components/Modals/EntityNameModal/EntityNameModal.interface';
-import { DE_ACTIVE_COLOR } from 'constants/constants';
 import { DROPDOWN_ICON_SIZE_PROPS } from 'constants/ManageButton.constants';
 import React, { FC, ReactNode, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -166,7 +165,7 @@ const ManageButton: FC<Props> = ({
                 description={t('message.update-displayName-entity', {
                   entity: entityName,
                 })}
-                icon={<EditIcon color={DE_ACTIVE_COLOR} width="18px" />}
+                icon={<EditIcon width="18px" />}
                 id="rename-button"
                 name={t('label.rename')}
               />
diff --git 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
index 211d46cf8333..f190c6818e4f 100644
--- 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
@@ -56,7 +56,7 @@ const RecentlyViewed: FunctionComponent = () => {
       dataLength={data.length !== 0 ? data.length : 5}
       loading={Boolean(isLoading)}>
       <>
-        <Typography.Paragraph className="right-panel-heading m-b-sm">
+        <Typography.Paragraph className="right-panel-label m-b-sm">
           {t('label.recent-views')}
         </Typography.Paragraph>
         <div className="entity-list-body">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx
index 48003d060e58..fd1221572f64 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx
@@ -104,7 +104,6 @@ const SearchedData: React.FC<SearchedDataProps> = ({
             handleSummaryPanelDisplay={handleSummaryPanelDisplay}
             id={`tabledatacard${index}`}
             matches={matches}
-            showNameHeader={false}
             showTags={false}
             source={{ ...table, name, description: tDesc, displayName }}
           />
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.component.tsx
index f5db7eb0c3a0..9c00eb54e7e8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.component.tsx
@@ -22,10 +22,10 @@ import {
 import { DefaultOptionType } from 'antd/lib/select';
 import { AxiosError } from 'axios';
 import { AsyncSelect } from 'components/AsyncSelect/AsyncSelect';
+import ResizablePanels from 'components/common/ResizablePanels/ResizablePanels';
 import RichTextEditor from 'components/common/rich-text-editor/RichTextEditor';
 import TitleBreadcrumb from 'components/common/title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from 'components/common/title-breadcrumb/title-breadcrumb.interface';
-import PageLayoutV1 from 'components/containers/PageLayoutV1';
 import { usePermissionProvider } from 'components/PermissionProvider/PermissionProvider';
 import SchemaEditor from 'components/schema-editor/SchemaEditor';
 import { HTTP_STATUS_CODE } from 'constants/auth.constants';
@@ -191,103 +191,125 @@ const AddQueryPage = () => {
   };
 
   return (
-    <PageLayoutV1
-      center
-      pageTitle={t('label.add-entity', { entity: t('label.query') })}>
-      <Space className="w-full" direction="vertical" size="middle">
-        <TitleBreadcrumb titleLinks={titleBreadcrumb} />
-        <Card>
-          <Typography.Paragraph className="text-base" data-testid="form-title">
-            {t('label.add-new-entity', { entity: t('label.query') })}
-          </Typography.Paragraph>
-          <Form
-            data-testid="query-form"
-            form={form}
-            id="query-form"
-            initialValues={{
-              queryUsedIn: table ? [table.id] : undefined,
-            }}
-            layout="vertical"
-            onFinish={handleSubmit}>
-            <Form.Item
-              data-testid="sql-editor-container"
-              label={t('label.sql-uppercase-query')}
-              name="query"
-              rules={[
-                {
-                  required: true,
-                  message: t('label.field-required', {
-                    field: t('label.sql-uppercase-query'),
-                  }),
-                },
-              ]}>
-              <SchemaEditor
-                className="custom-query-editor query-editor-h-200 custom-code-mirror-theme"
-                mode={{ name: CSMode.SQL }}
-                options={{
-                  readOnly: false,
+    <ResizablePanels
+      firstPanel={{
+        children: (
+          <div className="max-width-md w-9/10 service-form-container">
+            <TitleBreadcrumb titleLinks={titleBreadcrumb} />
+            <Card className="m-t-md">
+              <Typography.Paragraph
+                className="text-base"
+                data-testid="form-title">
+                {t('label.add-new-entity', { entity: t('label.query') })}
+              </Typography.Paragraph>
+              <Form
+                data-testid="query-form"
+                form={form}
+                id="query-form"
+                initialValues={{
+                  queryUsedIn: table ? [table.id] : undefined,
                 }}
-                value={sqlQuery}
-                onChange={(value) => setSqlQuery(value)}
-              />
-            </Form.Item>
-            <Form.Item label={`${t('label.description')}:`} name="description">
-              <RichTextEditor
-                height="200px"
-                initialValue={description}
-                placeHolder={t('message.write-your-description')}
-                style={{ margin: 0 }}
-                onTextChange={(value) => setDescription(value)}
-              />
-            </Form.Item>
-            <Form.Item
-              label={`${t('label.query-used-in')}:`}
-              name="queryUsedIn">
-              <AsyncSelect
-                api={fetchTableEntity}
-                mode="multiple"
-                options={initialOptions}
-                placeholder={t('label.please-select-entity', {
-                  entity: t('label.query-used-in'),
-                })}
-              />
-            </Form.Item>
-            <Form.Item>
-              <Space className="w-full justify-end" size={16}>
-                <Button
-                  data-testid="cancel-btn"
-                  type="default"
-                  onClick={handleCancelClick}>
-                  {t('label.cancel')}
-                </Button>
-                <Tooltip
-                  placement="top"
-                  title={!permissions.query.Create && NO_PERMISSION_FOR_ACTION}>
-                  <Button
-                    data-testid="save-btn"
-                    disabled={!permissions.query.Create}
-                    htmlType="submit"
-                    loading={isSaving}
-                    type="primary">
-                    {t('label.save')}
-                  </Button>
-                </Tooltip>
-              </Space>
-            </Form.Item>
-          </Form>
-        </Card>
-      </Space>
-      <div className="m-t-xlg p-l-lg w-max-400">
-        <Typography.Paragraph className="text-base font-medium">
-          {t('label.add-entity', {
-            entity: t('label.query'),
-          })}
-        </Typography.Paragraph>
-        <Typography.Text>
-          {t('message.add-query-helper-message')}
-        </Typography.Text>
-      </div>
-    </PageLayoutV1>
+                layout="vertical"
+                onFinish={handleSubmit}>
+                <Form.Item
+                  data-testid="sql-editor-container"
+                  label={t('label.sql-uppercase-query')}
+                  name="query"
+                  rules={[
+                    {
+                      required: true,
+                      message: t('label.field-required', {
+                        field: t('label.sql-uppercase-query'),
+                      }),
+                    },
+                  ]}>
+                  <SchemaEditor
+                    className="custom-query-editor query-editor-h-200 custom-code-mirror-theme"
+                    mode={{ name: CSMode.SQL }}
+                    options={{
+                      readOnly: false,
+                    }}
+                    value={sqlQuery}
+                    onChange={(value) => setSqlQuery(value)}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label={`${t('label.description')}:`}
+                  name="description">
+                  <RichTextEditor
+                    height="200px"
+                    initialValue={description}
+                    placeHolder={t('message.write-your-description')}
+                    style={{ margin: 0 }}
+                    onTextChange={(value) => setDescription(value)}
+                  />
+                </Form.Item>
+                <Form.Item
+                  label={`${t('label.query-used-in')}:`}
+                  name="queryUsedIn">
+                  <AsyncSelect
+                    api={fetchTableEntity}
+                    mode="multiple"
+                    options={initialOptions}
+                    placeholder={t('label.please-select-entity', {
+                      entity: t('label.query-used-in'),
+                    })}
+                  />
+                </Form.Item>
+                <Form.Item>
+                  <Space className="w-full justify-end" size={16}>
+                    <Button
+                      data-testid="cancel-btn"
+                      type="default"
+                      onClick={handleCancelClick}>
+                      {t('label.cancel')}
+                    </Button>
+                    <Tooltip
+                      placement="top"
+                      title={
+                        !permissions.query.Create && NO_PERMISSION_FOR_ACTION
+                      }>
+                      <Button
+                        data-testid="save-btn"
+                        disabled={!permissions.query.Create}
+                        htmlType="submit"
+                        loading={isSaving}
+                        type="primary">
+                        {t('label.save')}
+                      </Button>
+                    </Tooltip>
+                  </Space>
+                </Form.Item>
+              </Form>
+            </Card>
+          </div>
+        ),
+        minWidth: 700,
+        flex: 0.7,
+      }}
+      pageTitle={t('label.add-entity', { entity: t('label.query') })}
+      secondPanel={{
+        children: (
+          <>
+            <Typography.Paragraph className="text-base font-medium">
+              {t('label.add-entity', {
+                entity: t('label.query'),
+              })}
+            </Typography.Paragraph>
+            <Typography.Text>
+              {t('message.add-query-helper-message')}
+            </Typography.Text>
+          </>
+        ),
+        className: 'p-md service-doc-panel',
+        minWidth: 60,
+        overlay: {
+          displayThreshold: 200,
+          header: t('label.setup-guide'),
+          rotation: 'counter-clockwise',
+        },
+      }}
+    />
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.test.tsx
index ca3d887aeca8..3b051e7a8e6e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.test.tsx
@@ -46,9 +46,14 @@ jest.mock('components/common/rich-text-editor/RichTextEditor', () => {
 jest.mock('components/AsyncSelect/AsyncSelect', () => ({
   AsyncSelect: jest.fn().mockImplementation(() => <div>AsyncSelect</div>),
 }));
-jest.mock('components/containers/PageLayoutV1', () => {
-  return jest.fn().mockImplementation(({ children }) => <div>{children}</div>);
-});
+jest.mock('components/common/ResizablePanels/ResizablePanels', () =>
+  jest.fn().mockImplementation(({ firstPanel, secondPanel }) => (
+    <>
+      <div>{firstPanel.children}</div>
+      <div>{secondPanel.children}</div>
+    </>
+  ))
+);
 jest.mock('components/PermissionProvider/PermissionProvider', () => ({
   usePermissionProvider: jest.fn().mockImplementation(() => ({
     permissions: {
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx
index 6a511678b65f..3d9df1562c3f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/KPIList.tsx
@@ -11,8 +11,9 @@
  *  limitations under the License.
  */
 
-import { Button, Col, Space, Table, Tooltip, Typography } from 'antd';
+import { Button, Col, Table, Tooltip, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
 import DeleteWidgetModal from 'components/common/DeleteWidget/DeleteWidgetModal';
 import NextPrevious from 'components/common/next-previous/NextPrevious';
 import RichTextEditorPreviewer from 'components/common/rich-text-editor/RichTextEditorPreviewer';
@@ -124,7 +125,7 @@ const KPIList = () => {
         key: 'actions',
         render: (_, record) => {
           return (
-            <Space>
+            <div className="d-flex items-center">
               <Tooltip
                 placement="left"
                 title={
@@ -133,15 +134,10 @@ const KPIList = () => {
                     : t('message.no-permission-for-action')
                 }>
                 <Button
+                  className="flex-center"
                   data-testid={`edit-action-${getEntityName(record)}`}
                   disabled={!isAdminUser}
-                  icon={
-                    <SVGIcons
-                      alt={t('label.edit')}
-                      icon={Icons.EDIT}
-                      width="18px"
-                    />
-                  }
+                  icon={<EditIcon width="16px" />}
                   type="text"
                   onClick={() => history.push(getKpiPath(record.name))}
                 />
@@ -157,13 +153,13 @@ const KPIList = () => {
                   data-testid={`delete-action-${getEntityName(record)}`}
                   disabled={!isAdminUser}
                   icon={
-                    <SVGIcons alt="delete" icon={Icons.DELETE} width="18px" />
+                    <SVGIcons alt="delete" icon={Icons.DELETE} width="16px" />
                   }
                   type="text"
                   onClick={() => setSelectedKpi(record)}
                 />
               </Tooltip>
-            </Space>
+            </div>
           );
         },
       },
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailPage.tsx
index 8e2075679c61..bca67a54e408 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailPage.tsx
@@ -25,6 +25,7 @@ import {
   Tooltip,
   Typography,
 } from 'antd';
+import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
 import { AxiosError } from 'axios';
 import Description from 'components/common/description/Description';
 import ErrorPlaceHolder from 'components/common/error-with-placeholder/ErrorPlaceHolder';
@@ -272,11 +273,7 @@ const PoliciesDetailPage = () => {
                         );
                       }}>
                       <Space align="center">
-                        <SVGIcons
-                          alt={t('label.edit')}
-                          icon={Icons.EDIT}
-                          width="16px"
-                        />
+                        <EditIcon width="16px" />
                         {t('label.edit')}
                       </Space>
                     </Button>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx
index d8ae2454c700..e2f8d8c4ac72 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/TableDetailsPageV1.tsx
@@ -525,9 +525,7 @@ const TableDetailsPageV1 = () => {
           />
         ),
         isHidden: !(
-          tablePermissions.ViewAll ||
-          tablePermissions.ViewBasic ||
-          tablePermissions.ViewSampleData
+          tablePermissions.ViewAll || tablePermissions.ViewSampleData
         ),
         key: EntityTabs.SAMPLE_DATA,
         children: (
@@ -598,21 +596,18 @@ const TableDetailsPageV1 = () => {
           </Card>
         ),
       },
-      ...(tableDetails?.dataModel
-        ? [
-            {
-              label: (
-                <TabsLabel
-                  id={EntityTabs.DBT}
-                  name={t('label.dbt-lowercase')}
-                />
-              ),
-              // isHidden: !(dataModel?.sql ?? dataModel?.rawSql),
-              key: EntityTabs.DBT,
-              children: <DbtTab dataModel={tableDetails?.dataModel} />,
-            },
-          ]
-        : []),
+
+      {
+        label: (
+          <TabsLabel id={EntityTabs.DBT} name={t('label.dbt-lowercase')} />
+        ),
+        isHidden: !(
+          tableDetails?.dataModel?.sql ?? tableDetails?.dataModel?.rawSql
+        ),
+        key: EntityTabs.DBT,
+        children: <DbtTab dataModel={tableDetails?.dataModel} />,
+      },
+
       {
         label: (
           <TabsLabel
@@ -645,6 +640,7 @@ const TableDetailsPageV1 = () => {
     entityName,
     onExtensionUpdate,
     getEntityFeedCount,
+    tableDetails?.dataModel,
   ]);
 
   const onTierUpdate = useCallback(
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
index 899cf31ff07a..c7d0be45f893 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/RequestDescriptionPage/RequestDescriptionPage.tsx
@@ -196,8 +196,9 @@ const RequestDescription = () => {
 
   useEffect(() => {
     const owner = entityData.owner;
+    let defaultAssignee: Option[] = [];
     if (owner) {
-      const defaultAssignee = [
+      defaultAssignee = [
         {
           label: getEntityName(owner),
           value: owner.id || '',
@@ -207,7 +208,10 @@ const RequestDescription = () => {
       setAssignees(defaultAssignee);
       setOptions(defaultAssignee);
     }
-    form.setFieldsValue({ title: message.trimEnd() });
+    form.setFieldsValue({
+      title: message.trimEnd(),
+      assignees: defaultAssignee,
+    });
   }, [entityData]);
 
   return (
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
index 37e06b8f5eea..e55651cf093e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx
@@ -1182,9 +1182,12 @@ const ServicePage: FunctionComponent = () => {
             entity: getEntityName(serviceDetails),
           })}>
           {servicePermission.ViewAll || servicePermission.ViewBasic ? (
-            <Row className="page-container" data-testid="service-page">
+            <Row
+              className="page-container"
+              data-testid="service-page"
+              gutter={[0, 8]}>
               {serviceDetails && (
-                <Row className="w-full m-b-xs" wrap={false}>
+                <Row className="w-full" wrap={false}>
                   <Col flex="auto">
                     <EntityHeader
                       breadcrumb={slashedTableName}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/card.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/card.less
index ade5029065e2..b32b7c91eee8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/card.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/card.less
@@ -33,6 +33,13 @@
   }
 }
 
+.card-padding-y-0 {
+  .ant-card-body {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
 .card-body-border-none {
   border: none;
   .ant-card-head {
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/drawer.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/drawer.less
index d68e2ced2fa0..74771ce16e3d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/drawer.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/drawer.less
@@ -31,3 +31,7 @@
 .ant-drawer-header {
   border-bottom: none;
 }
+.ant-drawer-right > .ant-drawer-content-wrapper {
+  box-shadow: none;
+  border: @global-border;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
index d3f4ff5f3135..255a619b0fcb 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
@@ -29,6 +29,7 @@ import {
 } from 'components/searched-data/SearchedData.interface';
 import { EntityField } from 'constants/Feeds.constants';
 import { ExplorePageTabs } from 'enums/Explore.enum';
+import { Tag } from 'generated/entity/classification/tag';
 import { Container } from 'generated/entity/data/container';
 import { DashboardDataModel } from 'generated/entity/data/dashboardDataModel';
 import { GlossaryTerm } from 'generated/entity/data/glossaryTerm';
@@ -1001,7 +1002,7 @@ export const getEntityBreadcrumbs = (
       // eslint-disable-next-line no-case-declarations
       const fqnList = Fqn.split((entity as GlossaryTerm).fullyQualifiedName);
       // eslint-disable-next-line no-case-declarations
-      const tree = fqnList.slice(1, fqnList.length - 1);
+      const tree = fqnList.slice(1, fqnList.length);
 
       return [
         {
@@ -1018,11 +1019,14 @@ export const getEntityBreadcrumbs = (
         })),
       ];
     case EntityType.TAG:
+      // eslint-disable-next-line no-case-declarations
+      const fqnTagList = Fqn.split((entity as Tag).fullyQualifiedName);
+
       return [
-        {
-          name: entity.name,
+        ...fqnTagList.map((fqn) => ({
+          name: fqn,
           url: getTagsDetailsPath(entity?.fullyQualifiedName ?? ''),
-        },
+        })),
       ];
 
     case EntityType.TOPIC: