From df00d2f3925e9d5383260aefb88188b5eec5d09a Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Tue, 25 Feb 2025 19:38:55 +0530
Subject: [PATCH] #19850: fix the scroll issue for action button in Glossary
 import (#19965)

* fix the scroll issue for action button in Glossary import

* minor translation fix

* fix sonar issue
---
 .../BulkImport/BulkEntityImport.component.tsx |  8 ++--
 .../GlossaryDetails.component.tsx             |  2 +-
 .../ImportGlossary/ImportGlossary.test.tsx    |  5 ++-
 .../ImportGlossary/ImportGlossary.tsx         | 41 +++++++++----------
 .../ImportGlossary/import-glossary.less       |  6 ---
 .../GlossaryPage/GlossaryPage.component.tsx   | 36 ++++++++--------
 6 files changed, 45 insertions(+), 53 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BulkImport/BulkEntityImport.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BulkImport/BulkEntityImport.component.tsx
index fffceaffac1..8942237a990 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BulkImport/BulkEntityImport.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BulkImport/BulkEntityImport.component.tsx
@@ -432,8 +432,8 @@ const BulkEntityImport = ({
       <Col span={24}>
         <Stepper activeStep={activeStep} steps={ENTITY_IMPORT_STEPS} />
       </Col>
-      <Col span={24}>
-        {activeAsyncImportJob?.jobId && (
+      {activeAsyncImportJob?.jobId && (
+        <Col span={24}>
           <Banner
             className="border-radius"
             isLoading={!activeAsyncImportJob.error}
@@ -442,8 +442,8 @@ const BulkEntityImport = ({
             }
             type={activeAsyncImportJob.error ? 'error' : 'success'}
           />
-        )}
-      </Col>
+        </Col>
+      )}
       <Col span={24}>
         {activeStep === 0 && (
           <>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryDetails/GlossaryDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryDetails/GlossaryDetails.component.tsx
index 470709b6648..2729d08ef27 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryDetails/GlossaryDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryDetails/GlossaryDetails.component.tsx
@@ -381,7 +381,7 @@ const GlossaryDetails = ({
       type={EntityType.GLOSSARY}
       onUpdate={handleGlossaryUpdate}>
       <Row
-        className="glossary-details"
+        className="glossary-details p-t-sm"
         data-testid="glossary-details"
         gutter={[0, 16]}>
         <Col
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportGlossary/ImportGlossary.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportGlossary/ImportGlossary.test.tsx
index 41e22ea9fc9..7f3cb74d242 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportGlossary/ImportGlossary.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportGlossary/ImportGlossary.test.tsx
@@ -37,6 +37,10 @@ jest.mock('../../common/Loader/Loader', () =>
   jest.fn().mockReturnValue(<div data-testid="loader">Loader</div>)
 );
 
+jest.mock('../../PageLayoutV1/PageLayoutV1', () => {
+  return jest.fn().mockImplementation(({ children }) => <p>{children}</p>);
+});
+
 jest.mock('../../BulkImport/BulkEntityImport.component', () =>
   jest.fn().mockImplementation(({ onSuccess, onValidateCsvString }) => (
     <div>
@@ -87,7 +91,6 @@ describe('Import Glossary', () => {
     render(<ImportGlossary glossaryName={glossaryName} />);
 
     expect(await screen.findByTestId('breadcrumb')).toBeInTheDocument();
-    expect(await screen.findByTestId('title')).toBeInTheDocument();
     expect(screen.getByText('BulkEntityImport')).toBeInTheDocument();
     expect(screen.getByText('SuccessButton')).toBeInTheDocument();
     expect(screen.getByText('ValidateCsvButton')).toBeInTheDocument();
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportGlossary/ImportGlossary.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportGlossary/ImportGlossary.tsx
index 2ae67b4ee5a..b3f7e22401c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportGlossary/ImportGlossary.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportGlossary/ImportGlossary.tsx
@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Col, Row, Typography } from 'antd';
+import { Col, Row } from 'antd';
 import { AxiosError } from 'axios';
 import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,6 +22,7 @@ import { showErrorToast } from '../../../utils/ToastUtils';
 import BulkEntityImport from '../../BulkImport/BulkEntityImport.component';
 import TitleBreadcrumb from '../../common/TitleBreadcrumb/TitleBreadcrumb.component';
 import { TitleBreadcrumbProps } from '../../common/TitleBreadcrumb/TitleBreadcrumb.interface';
+import PageLayoutV1 from '../../PageLayoutV1/PageLayoutV1';
 import './import-glossary.less';
 
 interface Props {
@@ -68,26 +69,24 @@ const ImportGlossary: FC<Props> = ({ glossaryName }) => {
   };
 
   return (
-    <Row className="import-glossary p-x-md p-b-md" gutter={[16, 8]}>
-      <Col span={24}>
-        <TitleBreadcrumb titleLinks={breadcrumbList} />
-      </Col>
-      <Col span={24}>
-        <Typography.Title data-testid="title" level={5}>
-          {t('label.import-entity', {
-            entity: t('label.glossary-term-plural'),
-          })}
-        </Typography.Title>
-      </Col>
-      <Col span={24}>
-        <BulkEntityImport
-          entityType={EntityType.GLOSSARY_TERM}
-          fqn={glossaryName}
-          onSuccess={handleGlossaryRedirection}
-          onValidateCsvString={handleImportCsv}
-        />
-      </Col>
-    </Row>
+    <PageLayoutV1
+      pageTitle={t('label.import-entity', {
+        entity: t('label.glossary-term-plural'),
+      })}>
+      <Row className="import-glossary p-x-lg" gutter={[16, 16]}>
+        <Col span={24}>
+          <TitleBreadcrumb titleLinks={breadcrumbList} />
+        </Col>
+        <Col span={24}>
+          <BulkEntityImport
+            entityType={EntityType.GLOSSARY_TERM}
+            fqn={glossaryName}
+            onSuccess={handleGlossaryRedirection}
+            onValidateCsvString={handleImportCsv}
+          />
+        </Col>
+      </Row>
+    </PageLayoutV1>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportGlossary/import-glossary.less b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportGlossary/import-glossary.less
index 6524ea614f3..b1763131815 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportGlossary/import-glossary.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/ImportGlossary/import-glossary.less
@@ -38,12 +38,6 @@
 }
 
 .import-glossary {
-  .stepper-container {
-    max-width: 450px;
-    margin: auto;
-    margin-top: 24px;
-    padding: 0;
-  }
   .browse-text {
     border-bottom: 1px solid;
   }
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx
index 27e57bdde50..3238d7db0f1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryPage/GlossaryPage.component.tsx
@@ -460,26 +460,22 @@ const GlossaryPage = () => {
     );
   }
 
-  const glossaryElement = (
-    <div className="p-t-sm">
-      {isRightPanelLoading ? (
-        <Loader />
-      ) : (
-        <GlossaryV1
-          isGlossaryActive={isGlossaryActive}
-          isSummaryPanelOpen={Boolean(previewAsset)}
-          isVersionsView={false}
-          refreshActiveGlossaryTerm={fetchGlossaryTermDetails}
-          selectedData={activeGlossary as Glossary}
-          updateGlossary={updateGlossary}
-          updateVote={updateVote}
-          onAssetClick={handleAssetClick}
-          onGlossaryDelete={handleGlossaryDelete}
-          onGlossaryTermDelete={handleGlossaryTermDelete}
-          onGlossaryTermUpdate={handleGlossaryTermUpdate}
-        />
-      )}
-    </div>
+  const glossaryElement = isRightPanelLoading ? (
+    <Loader />
+  ) : (
+    <GlossaryV1
+      isGlossaryActive={isGlossaryActive}
+      isSummaryPanelOpen={Boolean(previewAsset)}
+      isVersionsView={false}
+      refreshActiveGlossaryTerm={fetchGlossaryTermDetails}
+      selectedData={activeGlossary as Glossary}
+      updateGlossary={updateGlossary}
+      updateVote={updateVote}
+      onAssetClick={handleAssetClick}
+      onGlossaryDelete={handleGlossaryDelete}
+      onGlossaryTermDelete={handleGlossaryTermDelete}
+      onGlossaryTermUpdate={handleGlossaryTermUpdate}
+    />
   );
 
   const resizableLayout = isGlossaryActive ? (