#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

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 && (
           <>

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

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();

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>
   );
 };
 

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;
   }

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 ? (