From c6bfa0f550e1850d9f3bbdbe9d75f1406af81f00 Mon Sep 17 00:00:00 2001
From: maria-hambardzumian <maria_hambardzumyan@epam.com>
Date: Tue, 22 Oct 2024 16:20:01 +0400
Subject: [PATCH] EPMRPP-96401 || Added space for pagination in scrollWrapper

---
 .../main/scrollWrapper/scrollWrapper.jsx      | 19 +++++-
 .../main/scrollWrapper/scrollWrapper.scss     |  3 +
 .../instance/allUsersPage/allUsersPage.jsx    | 61 ++++++++++---------
 .../organizationsPage/organizationsPage.jsx   |  2 +-
 .../organizationsPanelView.scss               |  2 +-
 .../organizationProjectsPage.jsx              |  2 +-
 .../organizationUsersPage.jsx                 |  2 +-
 .../projectTeamPage/projectTeamPage.jsx       |  2 +-
 8 files changed, 56 insertions(+), 37 deletions(-)

diff --git a/app/src/components/main/scrollWrapper/scrollWrapper.jsx b/app/src/components/main/scrollWrapper/scrollWrapper.jsx
index c524091029..8da5154d47 100644
--- a/app/src/components/main/scrollWrapper/scrollWrapper.jsx
+++ b/app/src/components/main/scrollWrapper/scrollWrapper.jsx
@@ -50,6 +50,7 @@ export class ScrollWrapper extends Component {
     thumbMinSize: PropTypes.number,
     withBackToTop: PropTypes.bool,
     withFooter: PropTypes.bool,
+    withPaginationOffset: PropTypes.bool,
     resetRequired: PropTypes.bool,
     onReset: PropTypes.func,
     className: PropTypes.string,
@@ -71,8 +72,15 @@ export class ScrollWrapper extends Component {
     renderTrackVertical: (props) => <div {...props} className={cx('track-vertical')} />,
     renderThumbHorizontal: (props) => <div {...props} className={cx('thumb-horizontal')} />,
     renderThumbVertical: (props) => <div {...props} className={cx('thumb-vertical')} />,
-    renderView: ({ withFooter, ...props }) => (
-      <div {...props} className={cx('scrolling-content', { 'with-footer': withFooter })} />
+    renderView: ({ withFooter, withPaginationOffset, ...props }) => (
+      <div
+        {...props}
+        className={cx(
+          'scrolling-content',
+          { 'with-footer': withFooter },
+          { 'with-pagination-offset': withPaginationOffset },
+        )}
+      />
     ),
     onLazyLoad: false,
     hideTracksWhenNotNeeded: false,
@@ -165,7 +173,12 @@ export class ScrollWrapper extends Component {
     this.scrollbars.thumbHorizontal.style.opacity = '';
   };
 
-  renderView = (props) => this.props.renderView({ withFooter: this.props.withFooter, ...props });
+  renderView = (props) =>
+    this.props.renderView({
+      withFooter: this.props.withFooter,
+      withPaginationOffset: this.props.withPaginationOffset,
+      ...props,
+    });
 
   render() {
     return (
diff --git a/app/src/components/main/scrollWrapper/scrollWrapper.scss b/app/src/components/main/scrollWrapper/scrollWrapper.scss
index c484b8cc56..246cd3b2f5 100644
--- a/app/src/components/main/scrollWrapper/scrollWrapper.scss
+++ b/app/src/components/main/scrollWrapper/scrollWrapper.scss
@@ -62,6 +62,9 @@
     flex-direction: column;
     justify-content: stretch;
   }
+  &.with-pagination-offset {
+    margin-bottom: 45px !important;
+  }
   @media print {
     position: relative !important;
     max-height: none !important;
diff --git a/app/src/pages/instance/allUsersPage/allUsersPage.jsx b/app/src/pages/instance/allUsersPage/allUsersPage.jsx
index c5a9a5d570..0572139547 100644
--- a/app/src/pages/instance/allUsersPage/allUsersPage.jsx
+++ b/app/src/pages/instance/allUsersPage/allUsersPage.jsx
@@ -43,6 +43,7 @@ import {
 import { userInfoSelector } from 'controllers/user';
 import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
 import { SORTING_ASC, withSortingURL } from 'controllers/sorting';
+import { ScrollWrapper } from 'components/main/scrollWrapper';
 import { UsersToolbar } from './usersToolbar';
 import { AllUsersGrid } from './allUsersGrid';
 
@@ -265,36 +266,38 @@ export class AllUsersPage extends Component {
       onChangeSorting,
     } = this.props;
     return (
-      <PageLayout>
-        <PageHeader breadcrumbs={this.getBreadcrumbs()} />
-        <PageSection>
-          <UsersToolbar onDelete={this.handlerDelete} selectedUsers={selectedUsers} />
-          <AllUsersGrid
-            data={users}
-            loading={loading}
-            selectedItems={selectedUsers}
-            onToggleSelection={this.handleOneUserSelection}
-            excludeFromSelection={this.excludeFromSelection}
-            onToggleSelectAll={this.handleToggleAllUserSelection}
-            sortingColumn={sortingColumn}
-            sortingDirection={sortingDirection}
-            onChangeSorting={onChangeSorting}
-          />
-          {!!pageCount && !loading && (
-            <PaginationToolbar
-              activePage={activePage}
-              itemCount={itemCount}
-              pageCount={pageCount}
-              pageSize={pageSize}
-              onChangePage={onChangePage}
-              onChangePageSize={onChangePageSize}
+      <ScrollWrapper autoHeightMax={100}>
+        <PageLayout>
+          <PageHeader breadcrumbs={this.getBreadcrumbs()} />
+          <PageSection>
+            <UsersToolbar onDelete={this.handlerDelete} selectedUsers={selectedUsers} />
+            <AllUsersGrid
+              data={users}
+              loading={loading}
+              selectedItems={selectedUsers}
+              onToggleSelection={this.handleOneUserSelection}
+              excludeFromSelection={this.excludeFromSelection}
+              onToggleSelectAll={this.handleToggleAllUserSelection}
+              sortingColumn={sortingColumn}
+              sortingDirection={sortingDirection}
+              onChangeSorting={onChangeSorting}
             />
-          )}
-          {!users.length && !loading && (
-            <NoItemMessage message={intl.formatMessage(COMMON_LOCALE_KEYS.NO_RESULTS)} />
-          )}
-        </PageSection>
-      </PageLayout>
+            {!!pageCount && !loading && (
+              <PaginationToolbar
+                activePage={activePage}
+                itemCount={itemCount}
+                pageCount={pageCount}
+                pageSize={pageSize}
+                onChangePage={onChangePage}
+                onChangePageSize={onChangePageSize}
+              />
+            )}
+            {!users.length && !loading && (
+              <NoItemMessage message={intl.formatMessage(COMMON_LOCALE_KEYS.NO_RESULTS)} />
+            )}
+          </PageSection>
+        </PageLayout>
+      </ScrollWrapper>
     );
   }
 }
diff --git a/app/src/pages/instance/organizationsPage/organizationsPage.jsx b/app/src/pages/instance/organizationsPage/organizationsPage.jsx
index 60fdf955d4..08c2f6359f 100644
--- a/app/src/pages/instance/organizationsPage/organizationsPage.jsx
+++ b/app/src/pages/instance/organizationsPage/organizationsPage.jsx
@@ -80,7 +80,7 @@ export const OrganizationsPage = () => {
   };
 
   return (
-    <ScrollWrapper autoHeightMax={100}>
+    <ScrollWrapper autoHeightMax={100} withPaginationOffset>
       <div className={cx('organizations-page')}>
         <OrganizationsPageHeader
           hasPermission={hasPermission}
diff --git a/app/src/pages/instance/organizationsPage/organizationsPanelView/organizationsPanelView.scss b/app/src/pages/instance/organizationsPage/organizationsPanelView/organizationsPanelView.scss
index be620a937e..865f026e02 100644
--- a/app/src/pages/instance/organizationsPage/organizationsPanelView/organizationsPanelView.scss
+++ b/app/src/pages/instance/organizationsPage/organizationsPanelView/organizationsPanelView.scss
@@ -25,6 +25,6 @@
 }
 
 .organizations-list-wrapper {
-  padding: 0px 96px;
+  padding: 0px 96px 32px 96px;
   width: calc(100% - 192px);
 }
diff --git a/app/src/pages/organization/organizationProjectsPage/organizationProjectsPage.jsx b/app/src/pages/organization/organizationProjectsPage/organizationProjectsPage.jsx
index be104b3116..6303500dab 100644
--- a/app/src/pages/organization/organizationProjectsPage/organizationProjectsPage.jsx
+++ b/app/src/pages/organization/organizationProjectsPage/organizationProjectsPage.jsx
@@ -105,7 +105,7 @@ export const OrganizationProjectsPage = () => {
   };
 
   return (
-    <ScrollWrapper autoHeightMax={100}>
+    <ScrollWrapper autoHeightMax={100} withPaginationOffset>
       <div className={cx('organization-projects-container')}>
         <ProjectsPageHeader
           hasPermission={hasPermission}
diff --git a/app/src/pages/organization/organizationUsersPage/organizationUsersPage.jsx b/app/src/pages/organization/organizationUsersPage/organizationUsersPage.jsx
index 5e8f000809..c507f0c028 100644
--- a/app/src/pages/organization/organizationUsersPage/organizationUsersPage.jsx
+++ b/app/src/pages/organization/organizationUsersPage/organizationUsersPage.jsx
@@ -31,7 +31,7 @@ export const OrganizationUsersPage = () => {
   const isEmptyUsers = users.length === 0;
 
   return (
-    <ScrollWrapper autoHeightMax={100}>
+    <ScrollWrapper autoHeightMax={100} withPaginationOffset>
       <div className={cx('organization-users-page')}>
         <OrganizationUsersPageHeader isNotEmpty={!isEmptyUsers} />
         {isEmptyUsers ? (
diff --git a/app/src/pages/organization/projectTeamPage/projectTeamPage.jsx b/app/src/pages/organization/projectTeamPage/projectTeamPage.jsx
index 3981c2439e..2e94d662f4 100644
--- a/app/src/pages/organization/projectTeamPage/projectTeamPage.jsx
+++ b/app/src/pages/organization/projectTeamPage/projectTeamPage.jsx
@@ -50,7 +50,7 @@ export const ProjectTeamPage = () => {
   };
 
   return (
-    <ScrollWrapper autoHeightMax={100}>
+    <ScrollWrapper autoHeightMax={100} withPaginationOffset>
       <div className={cx('project-team-page')}>
         <ProjectTeamPageHeader
           hasPermission={hasPermission}