Change deprecated Layout to V1 (#7194)

* Change depreacted Layout to V1

* remove unanted dependecy

* test fixes

* remove scrollbar from layout

openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Glossary.spec.js

@@ -51,11 +51,11 @@ const createGlossaryTerm = (term) => {
     .should('be.visible')
     .click();
   cy.wait(200);
-  cy.get('#left-panel').contains(term.name).should('be.visible');
+  cy.get('#left-panelV1').contains(term.name).should('be.visible');
 };
 
 const deleteGlossary = ({ name }) => {
-  cy.get('#left-panel').contains(name).should('be.visible').click();
+  cy.get('#left-panelV1').contains(name).should('be.visible').click();
   cy.wait(500);
   cy.get('[data-testid="inactive-link"]').contains(name).should('be.visible');
 
@@ -85,7 +85,7 @@ const deleteGlossary = ({ name }) => {
 };
 
 const goToAssetsTab = (term) => {
-  cy.get('#left-panel').should('be.visible').contains(term).click();
+  cy.get('#left-panelV1').should('be.visible').contains(term).click();
   cy.wait(500);
   cy.get('[data-testid="inactive-link"]').contains(term).should('be.visible');
   cy.get('[data-testid="Assets"]').should('be.visible').click();
@@ -212,7 +212,7 @@ describe('Glossary page should work properly', () => {
     const uSynonyms = 'pick up,take,obtain';
     const newRef = { name: 'take', url: 'https://take.com' };
     const newDescription = 'Updated description';
-    cy.get('#left-panel').should('be.visible').contains(term).click();
+    cy.get('#left-panelV1').should('be.visible').contains(term).click();
     cy.wait(500);
     cy.get('[data-testid="inactive-link"]').contains(term).should('be.visible');
 
@@ -300,7 +300,7 @@ describe('Glossary page should work properly', () => {
   it.skip('Releted Terms should work properly', () => {
     const term = NEW_GLOSSARY_TERMS.term_1.name;
     const term2 = NEW_GLOSSARY_TERMS.term_2.name;
-    cy.get('#left-panel').should('be.visible').contains(term).click();
+    cy.get('#left-panelV1').should('be.visible').contains(term).click();
     cy.wait(500);
     cy.get('[data-testid="inactive-link"]').contains(term).should('be.visible');
 

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx

@@ -148,10 +148,10 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
 
   const getFilterDropDown = () => {
     return hideFeedFilter && hideThreadFilter ? null : (
-      <div className="tw-flex tw-justify-between tw-px-1.5">
+      <div className="tw-flex tw-justify-between tw-py-2 tw-px-1.5">
         {/* Feed filter */}
         {!hideFeedFilter && (
-          <div className="tw-relative tw-mt-5 tw-mr-5">
+          <div className="tw-relative tw-mr-5">
             <Button
               className="hover:tw-no-underline focus:tw-no-underline"
               data-testid="feeds"
@@ -175,7 +175,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
         )}
         {/* Thread filter */}
         {!hideThreadFilter && (
-          <div className="tw-relative tw-mt-5">
+          <div className="tw-relative">
             <Button
               className="hover:tw-no-underline focus:tw-no-underline"
               data-testid="thread-filter"

openmetadata-ui/src/main/resources/ui/src/components/AddWebhook/AddWebhook.tsx

@@ -316,11 +316,9 @@ const AddWebhook: FunctionComponent<AddWebhookProps> = ({
   const fetchRightPanel = useCallback(() => {
     return (
       <div className="tw-px-2">
-        <CardV1
+        <CardV1 heading="Configure Webhooks" id="webhook">
-          description={CONFIGURE_TEXT[webhookType]}
+          {CONFIGURE_TEXT[webhookType]}
-          heading="Configure Webhooks"
+        </CardV1>
-          id="webhook"
-        />
       </div>
     );
   }, [webhookType]);

openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx

@@ -16,7 +16,6 @@ import {
   faSortAmountUpAlt,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Card } from 'antd';
 import classNames from 'classnames';
 import { cloneDeep, isEmpty, lowerCase } from 'lodash';
 import {
@@ -26,13 +25,7 @@ import {
   FormattedTableData,
   SearchResponse,
 } from 'Models';
-import React, {
+import React, { useCallback, useEffect, useRef, useState } from 'react';
-  Fragment,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { Button } from '../../components/buttons/Button/Button';
 import ErrorPlaceHolderES from '../../components/common/error-with-placeholder/ErrorPlaceHolderES';
@@ -68,7 +61,8 @@ import { getCountBadge } from '../../utils/CommonUtils';
 import { getFilterCount, getFilterString } from '../../utils/FilterUtils';
 import AdvancedFields from '../AdvancedSearch/AdvancedFields';
 import AdvancedSearchDropDown from '../AdvancedSearch/AdvancedSearchDropDown';
-import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
+import LeftPanelCard from '../common/LeftPanelCard/LeftPanelCard';
+import PageLayoutV1 from '../containers/PageLayoutV1';
 import { AdvanceField, ExploreProps } from './explore.interface';
 import SortingDropDown from './SortingDropDown';
 
@@ -653,11 +647,9 @@ const Explore: React.FC<ExploreProps> = ({
 
   const fetchLeftPanel = () => {
     return (
-      <Card
+      <LeftPanelCard id="explorer">
-        data-testid="data-summary-container"
+        <div className="tw-py-3" data-testid="data-summary-container">
-        style={{ ...leftPanelAntCardStyle, marginTop: '16px', height: '98%' }}>
+          <div className="tw-w-64 tw-px-3 tw-flex-shrink-0">
-        <Fragment>
-          <div className="tw-w-64 tw-mr-5 tw-flex-shrink-0">
             <Button
               className={classNames('tw-underline tw-pb-4')}
               disabled={!getFilterCount(filters)}
@@ -681,8 +673,8 @@ const Explore: React.FC<ExploreProps> = ({
               onSelectHandler={handleSelectedFilter}
             />
           )}
-        </Fragment>
+        </div>
-      </Card>
+      </LeftPanelCard>
     );
   };
 
@@ -690,38 +682,38 @@ const Explore: React.FC<ExploreProps> = ({
     !connectionError && Boolean(selectedAdvancedFields.length);
 
   return (
-    <Fragment>
+    <PageLayoutV1
-      <PageLayout leftPanel={Boolean(!error) && fetchLeftPanel()}>
+      className="tw-h-full tw-px-6"
-        {error ? (
+      leftPanel={Boolean(!error) && fetchLeftPanel()}>
-          <ErrorPlaceHolderES errorMessage={error} type="error" />
+      {error ? (
-        ) : (
+        <ErrorPlaceHolderES errorMessage={error} type="error" />
-          <>
+      ) : (
-            {!connectionError && getTabs()}
+        <div>
-            {advanceFieldCheck && (
+          {!connectionError && getTabs()}
-              <AdvancedFields
+          {advanceFieldCheck && (
-                fields={selectedAdvancedFields}
+            <AdvancedFields
-                index={searchIndex}
+              fields={selectedAdvancedFields}
-                onClear={onAdvancedFieldClear}
+              index={searchIndex}
-                onFieldRemove={onAdvancedFieldRemove}
+              onClear={onAdvancedFieldClear}
-                onFieldValueSelect={onAdvancedFieldValueSelect}
+              onFieldRemove={onAdvancedFieldRemove}
-              />
+              onFieldValueSelect={onAdvancedFieldValueSelect}
-            )}
-            <SearchedData
-              showResultCount
-              currentPage={currentPage}
-              data={data}
-              isFilterSelected={isFilterSelected}
-              isLoading={
-                !location.pathname.includes(ROUTES.TOUR) && isEntityLoading
-              }
-              paginate={paginate}
-              searchText={searchText}
-              totalValue={totalNumberOfValue}
             />
-          </>
+          )}
-        )}
+          <SearchedData
-      </PageLayout>
+            showResultCount
-    </Fragment>
+            currentPage={currentPage}
+            data={data}
+            isFilterSelected={isFilterSelected}
+            isLoading={
+              !location.pathname.includes(ROUTES.TOUR) && isEntityLoading
+            }
+            paginate={paginate}
+            searchText={searchText}
+            totalValue={totalNumberOfValue}
+          />
+        </div>
+      )}
+    </PageLayoutV1>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.test.tsx

@@ -52,7 +52,7 @@ jest.mock('../../components/searched-data/SearchedData', () => {
 });
 
 jest.mock(
-  '../containers/PageLayout',
+  '../containers/PageLayoutV1',
   () =>
     ({
       children,
@@ -64,7 +64,7 @@ jest.mock(
       leftPanel: React.ReactNode;
     }) =>
       (
-        <div data-testid="PageLayout">
+        <div data-testid="PageLayoutV1">
           <div data-testid="left-panel-content">{leftPanel}</div>
           <div data-testid="right-panel-content">{rightPanel}</div>
           {children}
@@ -115,7 +115,7 @@ describe('Test Explore component', () => {
         wrapper: MemoryRouter,
       }
     );
-    const pageContainer = await findByTestId(container, 'PageLayout');
+    const pageContainer = await findByTestId(container, 'PageLayoutV1');
     const searchData = await findByTestId(container, 'search-data');
     const wrappedContent = await findByTestId(container, 'wrapped-content');
     const tabs = await findAllByTestId(container, /tab/i);

openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx

@@ -24,6 +24,7 @@ import {
   MenuList,
 } from '../../utils/GlobalSettingsUtils';
 import { getSettingPath, getTeamsWithFqnPath } from '../../utils/RouterUtils';
+import LeftPanelCard from '../common/LeftPanelCard/LeftPanelCard';
 import { usePermissionProvider } from '../PermissionProvider/PermissionProvider';
 
 const GlobalSettingLeftPanel = () => {
@@ -66,13 +67,15 @@ const GlobalSettingLeftPanel = () => {
   };
 
   return menuItems.length ? (
-    <Menu
+    <LeftPanelCard id="settings">
-      className="global-setting-left-panel"
+      <Menu
-      items={menuItems}
+        className="global-setting-left-panel"
-      mode="inline"
+        items={menuItems}
-      selectedKeys={[`${settingCategory}.${tab}`]}
+        mode="inline"
-      onClick={onClick}
+        selectedKeys={[`${settingCategory}.${tab}`]}
-    />
+        onClick={onClick}
+      />
+    </LeftPanelCard>
   ) : (
     <Empty className="tw-mt-8" />
   );

openmetadata-ui/src/main/resources/ui/src/components/Glossary/Glossary.test.tsx

@@ -75,6 +75,30 @@ jest.mock('react-router-dom', () => ({
     glossaryName: 'GlossaryName',
   }),
 }));
+jest.mock('antd', () => ({
+  Col: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
+  Input: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
+  Row: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
+  Space: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
+  Typography: {
+    Title: jest
+      .fn()
+      .mockImplementation(({ children }) => <div>{children}</div>),
+  },
+  Dropdown: jest.fn().mockImplementation(({ children, overlay }) => (
+    <div>
+      {children}
+      {overlay}
+    </div>
+  )),
+  Menu: jest.fn().mockImplementation(({ items }) => (
+    <div>
+      {items.map((item: { key: string; label: JSX.Element }) => {
+        <div key={item.key}>{item.label}</div>;
+      })}
+    </div>
+  )),
+}));
 
 jest.mock('../../components/GlossaryDetails/GlossaryDetails.component', () => {
   return jest.fn().mockReturnValue(<>Glossary-Details component</>);
@@ -150,6 +174,7 @@ const mockProps = {
   onGlossaryTermDelete: jest.fn(),
   onAssetPaginate: jest.fn(),
   onRelatedTermClick: jest.fn(),
+  handleUserRedirection: jest.fn(),
 };
 
 describe('Test Glossary component', () => {

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx

@@ -48,11 +48,12 @@ import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import { Button } from '../buttons/Button/Button';
 import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
+import LeftPanelCard from '../common/LeftPanelCard/LeftPanelCard';
 import Searchbar from '../common/searchbar/Searchbar';
 import TitleBreadcrumb from '../common/title-breadcrumb/title-breadcrumb.component';
 import { TitleBreadcrumbProps } from '../common/title-breadcrumb/title-breadcrumb.interface';
 import TreeView from '../common/TreeView/TreeView.component';
-import PageLayout from '../containers/PageLayout';
+import PageLayoutV1 from '../containers/PageLayoutV1';
 import GlossaryDetails from '../GlossaryDetails/GlossaryDetails.component';
 import GlossaryTermsV1 from '../GlossaryTerms/GlossaryTermsV1.component';
 import Loader from '../Loader/Loader';
@@ -323,15 +324,15 @@ const GlossaryV1 = ({
 
   const fetchLeftPanel = () => {
     return (
-      <div className="tw-h-full tw-px-1" id="glossary-left-panel">
+      <LeftPanelCard id="glossary">
-        <div className="tw-bg-white tw-h-full tw-py-2 left-panel-container">
+        <div className="tw-h-full tw-py-2">
           <div className="tw-flex tw-justify-between tw-items-center tw-px-3">
-            <h6 className="tw-heading tw-text-base">Glossary</h6>
+            <h6 className="tw-heading tw-text-sm tw-font-semibold">Glossary</h6>
           </div>
           <div>
             {treeData.length ? (
               <Fragment>
-                <div className="tw-px-3 tw-mb-3">
+                <div className="tw-px-3 tw-mb-2">
                   <Searchbar
                     showLoadingStatus
                     placeholder="Search term..."
@@ -346,7 +347,7 @@ const GlossaryV1 = ({
                         : NO_PERMISSION_FOR_ACTION
                     }>
                     <button
-                      className="tw--mt-1 tw-w-full tw-flex-center tw-gap-2 tw-py-1 tw-text-primary tw-border tw-rounded-md"
+                      className="tw-mt-1 tw-w-full tw-flex-center tw-gap-2 tw-py-1 tw-text-primary tw-border tw-rounded-md"
                       disabled={!createGlossaryPermission}
                       onClick={handleAddGlossaryClick}>
                       <SVGIcons alt="plus" icon={Icons.ICON_PLUS_PRIMERY} />{' '}
@@ -379,7 +380,7 @@ const GlossaryV1 = ({
             )}
           </div>
         </div>
-      </div>
+      </LeftPanelCard>
     );
   };
 
@@ -392,7 +393,7 @@ const GlossaryV1 = ({
   }, [selectedData]);
 
   return glossaryList.length ? (
-    <PageLayout classes="tw-h-full tw-px-6" leftPanel={fetchLeftPanel()}>
+    <PageLayoutV1 leftPanel={fetchLeftPanel()}>
       <div
         className="tw-flex tw-justify-between tw-items-center"
         data-testid="header">
@@ -404,7 +405,9 @@ const GlossaryV1 = ({
             }
           />
         </div>
-        <div className="tw-relative tw-mr-2 tw--mt-2" id="add-term-button">
+        <div
+          className="tw-relative tw-flex tw-justify-between tw-items-center"
+          id="add-term-button">
           <Tooltip
             title={
               createGlossaryTermPermission
@@ -412,7 +415,7 @@ const GlossaryV1 = ({
                 : NO_PERMISSION_FOR_ACTION
             }>
             <ButtonAntd
-              className="tw-h-8 tw-rounded tw-mb-1 tw-mr-2"
+              className="tw-h-8 tw-rounded tw-mr-2"
               data-testid="add-new-tag-button"
               disabled={!createGlossaryTermPermission}
               type="primary"
@@ -441,7 +444,7 @@ const GlossaryV1 = ({
                   : NO_PERMISSION_FOR_ACTION
               }>
               <Button
-                className="tw-rounded tw-justify-center tw-w-8 tw-h-8 glossary-manage-button tw-mb-1 tw-flex"
+                className="tw-rounded tw-justify-center tw-w-8 tw-h-8 glossary-manage-button tw-flex"
                 data-testid="manage-button"
                 disabled={!glossaryPermission.Delete}
                 size="small"
@@ -555,9 +558,9 @@ const GlossaryV1 = ({
           onConfirm={handleDelete}
         />
       )}
-    </PageLayout>
+    </PageLayoutV1>
   ) : (
-    <PageLayout>
+    <PageLayoutV1>
       <ErrorPlaceHolder
         buttonId="add-webhook-button"
         buttonLabel="Add New Glossary"
@@ -566,7 +569,7 @@ const GlossaryV1 = ({
         heading="glossaries"
         type="ADD_DATA"
       />
-    </PageLayout>
+    </PageLayoutV1>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx

@@ -33,7 +33,8 @@ import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import ActivityFeedList from '../ActivityFeed/ActivityFeedList/ActivityFeedList';
 import ErrorPlaceHolderES from '../common/error-with-placeholder/ErrorPlaceHolderES';
-import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
+import { leftPanelAntCardStyle } from '../containers/PageLayout';
+import PageLayoutV1 from '../containers/PageLayoutV1';
 import { EntityListWithAntd } from '../EntityList/EntityList';
 import Loader from '../Loader/Loader';
 import MyAssetStats from '../MyAssetStats/MyAssetStats.component';
@@ -67,13 +68,13 @@ const MyData: React.FC<MyDataProps> = ({
 
   const getLeftPanel = () => {
     return (
-      <div className="tw-mt-4">
+      <>
         <MyAssetStats entityCounts={entityCounts} />
         <div className="tw-mb-5" />
         <RecentlyViewed />
         <div className="tw-mb-5" />
         <RecentSearchedTermsAntd />
-      </div>
+      </>
     );
   };
 
@@ -81,7 +82,7 @@ const MyData: React.FC<MyDataProps> = ({
     const currentUserDetails = AppState.getCurrentUserDetails();
 
     return (
-      <div className="tw-mt-4">
+      <>
         {/* Pending task count card */}
         {pendingTaskCount ? (
           <div className="tw-mb-5" data-testid="my-tasks-container ">
@@ -170,7 +171,7 @@ const MyData: React.FC<MyDataProps> = ({
           />
         </div>
         <div className="tw-mt-5" />
-      </div>
+      </>
     );
   }, [ownedData, followedData, pendingTaskCount]);
 
@@ -219,7 +220,7 @@ const MyData: React.FC<MyDataProps> = ({
   );
 
   return (
-    <PageLayout leftPanel={getLeftPanel()} rightPanel={getRightPanel()}>
+    <PageLayoutV1 leftPanel={getLeftPanel()} rightPanel={getRightPanel()}>
       {error ? (
         <ErrorPlaceHolderES errorMessage={error} type="error" />
       ) : (
@@ -228,7 +229,6 @@ const MyData: React.FC<MyDataProps> = ({
             <>
               <ActivityFeedList
                 withSidePanel
-                className="tw-mt-3"
                 deletePostHandler={deletePostHandler}
                 feedList={feedData}
                 postFeedHandler={postFeedHandler}
@@ -252,7 +252,7 @@ const MyData: React.FC<MyDataProps> = ({
           <div className="tw-p-4" />
         </Fragment>
       )}
-    </PageLayout>
+    </PageLayoutV1>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.test.tsx

@@ -285,7 +285,7 @@ jest.mock('../RecentSearchedTerms/RecentSearchedTerms', () => {
 });
 
 jest.mock(
-  '../containers/PageLayout',
+  '../containers/PageLayoutV1',
   () =>
     ({
       children,
@@ -297,7 +297,7 @@ jest.mock(
       leftPanel: ReactNode;
     }) =>
       (
-        <div data-testid="PageLayout">
+        <div data-testid="PageLayoutV1">
           <div data-testid="left-panel-content">{leftPanel}</div>
           <div data-testid="right-panel-content">{rightPanel}</div>
           {children}
@@ -366,7 +366,7 @@ describe('Test MyData page', () => {
     const { container } = render(<MyData {...mockProp} />, {
       wrapper: MemoryRouter,
     });
-    const pageLayout = await findByTestId(container, 'PageLayout');
+    const pageLayout = await findByTestId(container, 'PageLayoutV1');
     const leftPanel = await findByTestId(container, 'left-panel-content');
     const rightPanel = await findByTestId(container, 'right-panel-content');
     const recentSearchedTerms = await findByText(

openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx

@@ -115,7 +115,9 @@ const Services = ({
             <Row data-testid="data-container" gutter={[16, 16]}>
               {serviceData.map((service, index) => (
                 <Col key={index} lg={8} xl={6}>
-                  <Card size="small" style={leftPanelAntCardStyle}>
+                  <Card
+                    size="small"
+                    style={{ ...leftPanelAntCardStyle, height: '100%' }}>
                     <div
                       className="tw-flex tw-justify-between tw-text-grey-muted"
                       data-testid="service-card">

openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx

@@ -61,7 +61,8 @@ import Ellipses from '../common/Ellipses/Ellipses';
 import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
 import { reactSingleSelectCustomStyle } from '../common/react-select-component/reactSelectCustomStyle';
 import TabsPane from '../common/TabsPane/TabsPane';
-import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
+import { leftPanelAntCardStyle } from '../containers/PageLayout';
+import PageLayoutV1 from '../containers/PageLayoutV1';
 import DropDownList from '../dropdown/DropDownList';
 import Loader from '../Loader/Loader';
 import { Option, Props } from './Users.interface';
@@ -630,7 +631,6 @@ const Users = ({
           key="left-panel-card"
           style={{
             ...leftPanelAntCardStyle,
-            marginTop: '12px',
           }}>
           <div className="tw-flex tw-flex-col">
             {image ? (
@@ -818,7 +818,7 @@ const Users = ({
   );
 
   return (
-    <PageLayout classes="tw-h-full tw-px-6" leftPanel={fetchLeftPanel()}>
+    <PageLayoutV1 className="tw-h-full" leftPanel={fetchLeftPanel()}>
       <div className="tw-mb-10">
         <TabsPane
           activeTab={activeTab}
@@ -830,7 +830,7 @@ const Users = ({
       <div>{(activeTab === 1 || activeTab === 2) && getFeedTabData()}</div>
       <div>{activeTab === 3 && getEntityData(userData.owns || [], 3)}</div>
       <div>{activeTab === 4 && getEntityData(userData.follows || [], 4)}</div>
-    </PageLayout>
+    </PageLayoutV1>
   );
 };
 

openmetadata-ui/src/main/resources/ui/src/components/common/Card/CardV1.tsx

@@ -13,19 +13,22 @@
 
 import { Card } from 'antd';
 import { lowerCase } from 'lodash';
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
-
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
-interface CardProps {
-  description: string;
   id: string;
   heading?: string;
+  classes?: string;
 }
 
-const CardV1 = ({ description, id, heading }: CardProps) => {
+const CardV1 = ({ children, id, heading, classes, style }: CardProps) => {
   return (
-    <Card data-testid={`${lowerCase(id)}-summary-container`} size="small">
+    <Card
+      className={`${classes} tw-h-full`}
+      data-testid={`${lowerCase(id)}-summary-container`}
+      size="small"
+      style={style}>
       {heading ? <h6 className="tw-heading tw-text-base">{heading}</h6> : ''}
-      <div style={{ margin: '8px', textAlign: 'justify' }}>{description}</div>
+      <div style={{ textAlign: 'justify' }}>{children}</div>
     </Card>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx

@@ -175,10 +175,10 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
   return (
     <>
       <div
-        className="sidebar-my-data-holder mt-2 mb-3"
+        className="sidebar-my-data-holder my-3"
         data-testid="show-deleted-cntnr">
         <div
-          className="filter-group tw-justify-between tw-mb-1"
+          className="filter-group tw-justify-between tw-my-3 tw-px-3"
           data-testid="filter-container-deleted">
           <div className="tw-flex">
             <div className="filters-title tw-w-36 tw-truncate custom-checkbox-label">
@@ -206,7 +206,7 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
               <div data-testid={aggregation.title}>
                 <div className="tw-flex tw-justify-between tw-flex-col">
                   <h6
-                    className="tw-heading tw-my-1"
+                    className="tw-heading tw-my-1 tw-px-3"
                     data-testid="filter-heading">
                     {
                       facetFilterPlaceholder.find(
@@ -248,7 +248,7 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
                   </div>
                 </div>
                 <div
-                  className="sidebar-my-data-holder"
+                  className="sidebar-my-data-holder tw-px-3"
                   data-testid={`filter-containers-${index}`}>
                   {getFilterItems(aggregation)}
                 </div>

openmetadata-ui/src/main/resources/ui/src/components/containers/PageContainerV1.tsx

@@ -24,7 +24,9 @@ const PageContainerV1 = ({
   className = '',
 }: PageContainerV1Props) => {
   return (
-    <div className={classNames('page-container-v1 tw-bg-body-main', className)}>
+    <div
+      className={classNames('page-container-v1 tw-bg-body-main', className)}
+      data-testid="container">
       {children}
     </div>
   );

openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx

@@ -28,9 +28,6 @@ export const leftPanelAntCardStyle = {
   border: '1px rgb(221, 227, 234) solid',
   borderRadius: '4px',
   boxShadow: '1px 1px 8px rgb(0 0 0 / 6%)',
-  marginRight: '4px',
-  marginLeft: '4px',
-  height: '100%',
 };
 
 /**

openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx

@@ -23,7 +23,9 @@ interface PageLayoutProp extends HTMLAttributes<HTMLDivElement> {
 
 export const pageContainerStyles = {
   height: '100%',
-  padding: '1rem',
+  padding: '1rem 0.5rem',
+  margin: '0px',
+  overflow: 'hidden',
 };
 
 const PageLayoutV1: FC<PageLayoutProp> = ({
@@ -35,24 +37,32 @@ const PageLayoutV1: FC<PageLayoutProp> = ({
   return (
     <Row className={className} gutter={[16, 16]} style={pageContainerStyles}>
       {leftPanel && (
-        <Col flex="312px">
+        <Col
-          <div className="page-layout-v1-left-panel page-layout-v1-vertical-scroll">
+          className="page-layout-v1-vertical-scroll"
-            {leftPanel}
+          flex="284px"
-          </div>
+          id="left-panelV1">
+          {leftPanel}
         </Col>
       )}
       <Col
         className="page-layout-v1-center page-layout-v1-vertical-scroll"
         flex={
           leftPanel && rightPanel
-            ? 'calc(100% - 624px)'
+            ? 'calc(100% - 568px)'
             : leftPanel || rightPanel
-            ? 'calc(100% - 312px)'
+            ? 'calc(100% - 284px)'
-            : '1080px'
+            : '100%'
         }>
         {children}
       </Col>
-      {rightPanel && <Col span={6}>{rightPanel}</Col>}
+      {rightPanel && (
+        <Col
+          className="page-layout-v1-vertical-scroll"
+          flex="284px"
+          id="right-panelV1">
+          {rightPanel}
+        </Col>
+      )}
     </Row>
   );
 };

openmetadata-ui/src/main/resources/ui/src/pages/GlossaryPage/GlossaryPage.test.tsx

@@ -36,6 +36,35 @@ jest.mock('fast-json-patch', () => ({
   compare: jest.fn(),
 }));
 
+jest.mock('antd', () => ({
+  Card: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
+  Col: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
+  Input: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
+  Row: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
+  Space: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
+  Divider: jest
+    .fn()
+    .mockImplementation(({ children }) => <div>{children}</div>),
+  Typography: {
+    Title: jest
+      .fn()
+      .mockImplementation(({ children }) => <div>{children}</div>),
+  },
+  Dropdown: jest.fn().mockImplementation(({ children, overlay }) => (
+    <div>
+      {children}
+      {overlay}
+    </div>
+  )),
+  Menu: jest.fn().mockImplementation(({ items }) => (
+    <div>
+      {items.map((item: { key: string; label: JSX.Element }) => {
+        <div key={item.key}>{item.label}</div>;
+      })}
+    </div>
+  )),
+}));
+
 jest.mock('../../authentication/auth-provider/AuthProvider', () => {
   return {
     useAuthContext: jest.fn(() => ({
@@ -213,8 +242,10 @@ describe('Test GlossaryComponent page', () => {
     fireEvent.click(handleChildLoading);
     fireEvent.click(handleExpandedKey);
     fireEvent.click(handleGlossaryDelete);
+
     fireEvent.click(handleGlossaryTermUpdate);
     fireEvent.click(handleGlossaryTermDelete);
+
     fireEvent.click(handleSearchText);
   });
 

openmetadata-ui/src/main/resources/ui/src/pages/GlossaryPage/GlossaryPageV1.component.tsx

@@ -700,7 +700,7 @@ const GlossaryPageV1 = () => {
   }, [glossaryName]);
 
   return (
-    <PageContainerV1 className="tw-pt-4">
+    <PageContainerV1>
       {isLoading ? (
         <Loader />
       ) : (

openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.component.tsx

@@ -276,7 +276,7 @@ const UserPage = () => {
   }, [AppState.nonSecureUserDetails, AppState.userDetails]);
 
   return (
-    <PageContainerV1 className="tw-pt-4">
+    <PageContainerV1>
       {isLoading ? <Loader /> : getUserComponent()}
     </PageContainerV1>
   );

openmetadata-ui/src/main/resources/ui/src/pages/tags/index.test.tsx

@@ -261,11 +261,11 @@ jest.mock('../../utils/TagsUtils', () => ({
 }));
 
 jest.mock(
-  '../../components/containers/PageLayout',
+  '../../components/containers/PageLayoutV1',
   () =>
     ({ children, leftPanel }: { children: ReactNode; leftPanel: ReactNode }) =>
       (
-        <div data-testid="PageLayout">
+        <div data-testid="PageLayoutV1">
           <div data-testid="left-panel-content">{leftPanel}</div>
           {children}
         </div>

openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx

@@ -33,7 +33,7 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
 import LeftPanelCard from '../../components/common/LeftPanelCard/LeftPanelCard';
 import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
 import PageContainerV1 from '../../components/containers/PageContainerV1';
-import PageLayout from '../../components/containers/PageLayout';
+import PageLayoutV1 from '../../components/containers/PageLayoutV1';
 import Loader from '../../components/Loader/Loader';
 import ConfirmationModal from '../../components/Modals/ConfirmationModal/ConfirmationModal';
 import FormModal from '../../components/Modals/FormModal';
@@ -509,8 +509,8 @@ const TagsPage = () => {
   };
 
   return (
-    <PageContainerV1 className="tw-py-4">
+    <PageContainerV1>
-      <PageLayout leftPanel={fetchLeftPanel()}>
+      <PageLayoutV1 leftPanel={fetchLeftPanel()}>
         {isLoading ? (
           <Loader />
         ) : error ? (
@@ -788,7 +788,7 @@ const TagsPage = () => {
             )}
           </div>
         )}
-      </PageLayout>
+      </PageLayoutV1>
     </PageContainerV1>
   );
 };

openmetadata-ui/src/main/resources/ui/src/styles/app.less

@@ -13,6 +13,9 @@
 
 // common css utils file
 
+@primary: #7147e8;
+@primary-light: rgb(244, 240, 253);
+
 .flex-center {
   display: flex;
   align-items: center;
@@ -35,3 +38,20 @@
 .h-full {
   width: 100%;
 }
+
+.border-l-2 {
+  border-left: 2px;
+}
+
+.border-primary {
+  border-color: @primary;
+}
+
+.bg-primary-lite {
+  background: @primary-light;
+}
+
+.activeCategory {
+  border-left: 2px solid @primary;
+  background: @primary-light;
+}

openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less

@@ -2,10 +2,31 @@
   // 64 header + ( 16 + 16 )spacing Y
   height: calc(100vh - 96px);
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .page-layout-v1-left-panel {
   border: 1px rgb(221, 227, 234) solid;
-  border-radius: '4px';
+  border-radius: 4px;
   box-shadow: 1px 1px 8px rgb(0 0 0 / 6%);
 }
+
+.left-panel-card {
+  .ant-card-body {
+    padding: 0;
+    overflow-x: hidden;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.page-layout-v1-vertical-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.page-layout-v1-vertical-scroll::-webkit-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

openmetadata-ui/src/main/resources/ui/src/styles/x-master.css

@@ -1072,11 +1072,11 @@ code {
 
 @media only screen and (max-width: 1440px) {
   #left-panel {
-    width: 256px;
+    width: 284px;
   }
 
   .page-layout-container.l3-col {
-    grid-template-columns: 256px auto 256px;
+    grid-template-columns: 284px auto 284px;
   }
 }