minor: add resizable layout for glossary page (#17644)

* minor: add resizable layout for glossary page

* test: update unit test

* chore(ui): update padding-left in GlossaryDetails component

(cherry picked from commit 9ba67cde3e6b9ce57453574a4435bfa07827786d)

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

@@ -271,7 +271,7 @@ const GlossaryDetails = ({
       className="glossary-details"
       data-testid="glossary-details"
       gutter={[0, 16]}>
-      <Col className="p-x-md" span={24}>
+      <Col className="p-x-md p-l-xl" span={24}>
         <GlossaryHeader
           isGlossary
           isVersionView={isVersionView}

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

@@ -19,6 +19,8 @@ import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
 import ErrorPlaceHolder from '../../../components/common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import Loader from '../../../components/common/Loader/Loader';
+import ResizableLeftPanels from '../../../components/common/ResizablePanels/ResizableLeftPanels';
+import ResizablePanels from '../../../components/common/ResizablePanels/ResizablePanels';
 import { VotingDataProps } from '../../../components/Entity/Voting/voting.interface';
 import EntitySummaryPanel from '../../../components/Explore/EntitySummaryPanel/EntitySummaryPanel.component';
 import { EntityDetailsObjectInterface } from '../../../components/Explore/ExplorePage.interface';
@@ -27,7 +29,6 @@ import {
   ModifiedGlossary,
   useGlossaryStore,
 } from '../../../components/Glossary/useGlossary.store';
-import PageLayoutV1 from '../../../components/PageLayoutV1/PageLayoutV1';
 import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { PAGE_SIZE_LARGE, ROUTES } from '../../../constants/constants';
 import { GLOSSARIES_DOCS } from '../../../constants/docs.constants';
@@ -362,24 +363,8 @@ const GlossaryPage = () => {
     );
   }
 
-  return (
+  const glossaryElement = (
-    <PageLayoutV1
+    <div className="p-t-sm">
-      className="glossary-page-layout"
-      leftPanel={
-        isGlossaryActive &&
-        !isImportAction && <GlossaryLeftPanel glossaries={glossaries} />
-      }
-      pageTitle={t('label.glossary')}
-      rightPanel={
-        previewAsset && (
-          <EntitySummaryPanel
-            entityDetails={previewAsset}
-            handleClosePanel={() => setPreviewAsset(undefined)}
-            highlights={{ 'tag.name': [glossaryFqn] }}
-          />
-        )
-      }
-      rightPanelWidth={400}>
       {isRightPanelLoading ? (
         <Loader />
       ) : (
@@ -397,8 +382,55 @@ const GlossaryPage = () => {
           onGlossaryTermUpdate={handleGlossaryTermUpdate}
         />
       )}
-    </PageLayoutV1>
+    </div>
   );
+
+  const resizableLayout = isGlossaryActive ? (
+    <ResizableLeftPanels
+      className="content-height-with-resizable-panel"
+      firstPanel={{
+        className: 'content-resizable-panel-container',
+        minWidth: 280,
+        flex: 0.13,
+        children: <GlossaryLeftPanel glossaries={glossaries} />,
+      }}
+      hideFirstPanel={isImportAction}
+      pageTitle={t('label.glossary')}
+      secondPanel={{
+        children: glossaryElement,
+        className: 'content-resizable-panel-container',
+        minWidth: 800,
+        flex: 0.87,
+      }}
+    />
+  ) : (
+    <ResizablePanels
+      className="content-height-with-resizable-panel"
+      firstPanel={{
+        className: 'content-resizable-panel-container',
+        children: glossaryElement,
+        minWidth: 700,
+        flex: 0.7,
+      }}
+      hideSecondPanel={!previewAsset}
+      pageTitle={t('label.glossary')}
+      secondPanel={{
+        children: previewAsset && (
+          <EntitySummaryPanel
+            entityDetails={previewAsset}
+            handleClosePanel={() => setPreviewAsset(undefined)}
+            highlights={{ 'tag.name': [glossaryFqn] }}
+          />
+        ),
+        className:
+          'content-resizable-panel-container entity-summary-resizable-right-panel-container',
+        minWidth: 400,
+        flex: 0.3,
+      }}
+    />
+  );
+
+  return <>{resizableLayout}</>;
 };
 
 export default GlossaryPage;

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

@@ -98,12 +98,22 @@ jest.mock('../../../rest/glossaryAPI', () => ({
     .mockImplementation(() => Promise.resolve({ data: MOCK_GLOSSARY })),
 }));
 
-jest.mock('../../../components/PageLayoutV1/PageLayoutV1', () =>
+jest.mock(
-  jest.fn().mockImplementation(({ children, leftPanel, rightPanel }) => (
+  '../../../components/common/ResizablePanels/ResizableLeftPanels',
+  () =>
+    jest.fn().mockImplementation(({ firstPanel, secondPanel }) => (
+      <div>
+        {firstPanel.children}
+        {secondPanel.children}
+      </div>
+    ))
+);
+
+jest.mock('../../../components/common/ResizablePanels/ResizablePanels', () =>
+  jest.fn().mockImplementation(({ firstPanel, secondPanel }) => (
     <div>
-      {leftPanel}
+      {firstPanel.children}
-      {children}
+      {secondPanel.children}
-      {rightPanel}
     </div>
   ))
 );

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

@@ -496,6 +496,9 @@
 .p-l-lg {
   padding-left: @padding-lg;
 }
+.p-l-xl {
+  padding-left: @padding-xl;
+}
 .p-t-xl {
   padding-top: @padding-xl;
 }