#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 && (
+        <Col span={24}>
           <Banner
             className="border-radius"
             isLoading={!activeAsyncImportJob.error}
@@ -442,8 +442,8 @@ const BulkEntityImport = ({
             }
             type={activeAsyncImportJob.error ? 'error' : 'success'}
           />
-        )}
         </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,17 +69,14 @@ const ImportGlossary: FC<Props> = ({ glossaryName }) => {
   };
 
   return (
-    <Row className="import-glossary p-x-md p-b-md" gutter={[16, 8]}>
+    <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}>
-        <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}
@@ -88,6 +86,7 @@ const ImportGlossary: FC<Props> = ({ glossaryName }) => {
           />
         </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,9 +460,7 @@ const GlossaryPage = () => {
     );
   }
 
-  const glossaryElement = (
+  const glossaryElement = isRightPanelLoading ? (
-    <div className="p-t-sm">
-      {isRightPanelLoading ? (
     <Loader />
   ) : (
     <GlossaryV1
@@ -478,8 +476,6 @@ const GlossaryPage = () => {
       onGlossaryTermDelete={handleGlossaryTermDelete}
       onGlossaryTermUpdate={handleGlossaryTermUpdate}
     />
-      )}
-    </div>
   );
 
   const resizableLayout = isGlossaryActive ? (