EPMRPP-93637 || Implement Back to the top button

reportportal · Feb 3, 2025 · 9dc6a3e · 9dc6a3e
1 parent a9779c2
commit 9dc6a3e
Show file tree

Hide file tree

Showing 20 changed files with 131 additions and 170 deletions.
diff --git a/app/localization/translated/be.json b/app/localization/translated/be.json
@@ -1786,7 +1786,6 @@
   "SauceLabsFormFields.accessTokenTitle": "Токен доступа",
   "SauceLabsFormFields.dataCenter": "Цэнтр дадзеных",
   "SauceLabsFormFields.userNameTitle": "Імя карыстальніка",
-  "ScrollWrapper.backToTop": "Уверх",
   "SearchDashboardForm.dashboardNameSearchHint": "Назва панэлі кіравання павінна мець памер ад 3 да 128.",
   "ServerSettingsPage.title": "Налады сервера",
   "ServerSettingsTabs.analytics": "Аналітыка",

diff --git a/app/localization/translated/es.json b/app/localization/translated/es.json
@@ -1786,7 +1786,6 @@
   "SauceLabsFormFields.accessTokenTitle": "Token de acceso",
   "SauceLabsFormFields.dataCenter": "Centro de datos",
   "SauceLabsFormFields.userNameTitle": "Nombre de usuario",
-  "ScrollWrapper.backToTop": "Arriba",
   "SearchDashboardForm.dashboardNameSearchHint": "El nombre del panel de control debe tener entre 3 y 128 caracteres.",
   "ServerSettingsPage.title": "Configuración del servidor",
   "ServerSettingsTabs.analytics": "Analítica",

diff --git a/app/localization/translated/ru.json b/app/localization/translated/ru.json
@@ -1786,7 +1786,6 @@
   "SauceLabsFormFields.accessTokenTitle": "Токен доступа",
   "SauceLabsFormFields.dataCenter": "Центр данных",
   "SauceLabsFormFields.userNameTitle": "Имя пользователя",
-  "ScrollWrapper.backToTop": "Вверх",
   "SearchDashboardForm.dashboardNameSearchHint": "Имя панели управления должно быть длиной от 3 до 128.",
   "ServerSettingsPage.title": "Настройки сервера",
   "ServerSettingsTabs.analytics": "Аналитика",

diff --git a/app/localization/translated/uk.json b/app/localization/translated/uk.json
@@ -1786,7 +1786,6 @@
   "SauceLabsFormFields.accessTokenTitle": "Токен доступу",
   "SauceLabsFormFields.dataCenter": "Центр даних",
   "SauceLabsFormFields.userNameTitle": "Ім’я користувача",
-  "ScrollWrapper.backToTop": "Вгору",
   "SearchDashboardForm.dashboardNameSearchHint": "Ім’я панелі управління повинно бути довжиною від 3 до 128.",
   "ServerSettingsPage.title": "Налаштування сервера",
   "ServerSettingsTabs.analytics": "Аналітика",

diff --git a/app/localization/translated/zh.json b/app/localization/translated/zh.json
@@ -1786,7 +1786,6 @@
   "SauceLabsFormFields.accessTokenTitle": "访问令牌",
   "SauceLabsFormFields.dataCenter": "数据中心",
   "SauceLabsFormFields.userNameTitle": "用户名",
-  "ScrollWrapper.backToTop": "回到顶部",
   "SearchDashboardForm.dashboardNameSearchHint": "报告面板名称的长度应为3到128个字符",
   "ServerSettingsPage.title": "服务器设置",
   "ServerSettingsTabs.analytics": "分析",

diff --git a/app/src/componentLibrary/sidebar/sidebar.scss b/app/src/componentLibrary/sidebar/sidebar.scss
@@ -20,7 +20,7 @@
   width: 48px;
   transition: width 0.3s ease-out;
   position: relative;
-  z-index: 1;
+  z-index: 2;
   overflow: hidden;
 }
 

diff --git a/app/src/components/main/paginationWrapper/paginationWrapper.jsx b/app/src/components/main/paginationWrapper/paginationWrapper.jsx
@@ -18,17 +18,30 @@ import { useIntl } from 'react-intl';
 import { Pagination } from '@reportportal/ui-kit';
 import classNames from 'classnames/bind';
 import PropTypes from 'prop-types';
+import { ScrollWrapper } from 'components/main/scrollWrapper';
 import { messages } from './messages';
 import styles from './paginationWrapper.scss';
 
 const cx = classNames.bind(styles);
 
-export const PaginationWrapper = ({ children, showPagination, className, ...paginationProps }) => {
+export const PaginationWrapper = ({
+  children,
+  showPagination,
+  className,
+  scrollWrapperClassName,
+  ...paginationProps
+}) => {
   const { formatMessage } = useIntl();
 
   return (
     <div className={cx('pagination-wrapper', className)}>
-      {children}
+      <ScrollWrapper
+        withBackToTop
+        className={cx('scroll', scrollWrapperClassName)}
+        classNameBackToTop={cx('back-to-top')}
+      >
+        {children}
+      </ScrollWrapper>
       {showPagination && (
         <div className={cx('pagination')}>
           <Pagination
@@ -52,9 +65,11 @@ PaginationWrapper.propTypes = {
   showPagination: PropTypes.bool.isRequired,
   children: PropTypes.node,
   className: PropTypes.string,
+  scrollWrapperClassName: PropTypes.string,
 };
 
 PaginationWrapper.defaultProps = {
   children: null,
   className: '',
+  scrollWrapperClassName: '',
 };
diff --git a/app/src/components/main/paginationWrapper/paginationWrapper.scss b/app/src/components/main/paginationWrapper/paginationWrapper.scss
@@ -24,13 +24,20 @@
 }
 
 .pagination {
-  padding: 0 32px;
   box-sizing: border-box;
-  width: calc(100% - 48px);
+  width: 100%;
   border-top: 1px solid $COLOR--e-100;
   background-color: $COLOR--bg-100;
   position: sticky;
   bottom: 0;
   display: flex;
   justify-content: center;
 }
+
+.scroll {
+  height: calc(100vh - 165px) !important;
+}
+
+.back-to-top {
+  bottom: 102px;
+}
diff --git a/app/src/components/main/scrollWrapper/img/back-to-top-inline.svg b/app/src/components/main/scrollWrapper/img/back-to-top-inline.svg
diff --git a/app/src/components/main/scrollWrapper/scrollWrapper.jsx b/app/src/components/main/scrollWrapper/scrollWrapper.jsx
@@ -19,7 +19,6 @@ import track from 'react-tracking';
 import classNames from 'classnames/bind';
 import PropTypes from 'prop-types';
 import Parser from 'html-react-parser';
-import { FormattedMessage } from 'react-intl';
 import { SpringSystem } from 'rebound';
 import { Scrollbars } from 'react-custom-scrollbars-2';
 import { FOOTER_EVENTS } from 'components/main/analytics/events';
@@ -29,6 +28,7 @@ import BackToTopIcon from './img/back-to-top-inline.svg';
 import styles from './scrollWrapper.scss';
 
 const cx = classNames.bind(styles);
+const SCROLL_HEIGHT = 800;
 
 @track()
 export class ScrollWrapper extends Component {
@@ -53,6 +53,7 @@ export class ScrollWrapper extends Component {
     resetRequired: PropTypes.bool,
     onReset: PropTypes.func,
     className: PropTypes.string,
+    classNameBackToTop: PropTypes.string,
     tracking: PropTypes.shape({
       trackEvent: PropTypes.func,
       getTrackingData: PropTypes.func,
@@ -61,6 +62,7 @@ export class ScrollWrapper extends Component {
   static defaultProps = {
     initialScrollRight: false,
     className: '',
+    classNameBackToTop: '',
     children: null,
     autoHide: false,
     autoHeight: false,
@@ -143,7 +145,7 @@ export class ScrollWrapper extends Component {
     const { lastViewScrollTop, lastViewScrollLeft } = this.scrollbars;
     const { withBackToTop, onLazyLoad } = this.props;
 
-    const isBackToTopVisible = withBackToTop && scrollTop > 100;
+    const isBackToTopVisible = withBackToTop && scrollTop >= SCROLL_HEIGHT;
     if (isBackToTopVisible !== this.state.showButton) {
       this.setState({ showButton: isBackToTopVisible });
     }
@@ -190,12 +192,9 @@ export class ScrollWrapper extends Component {
       >
         {this.props.children}
         {this.state.showButton && (
-          <div className={cx('back-to-top')}>
-            <button className={cx('back-to-top-button')} onClick={this.scrollTop}>
+          <div className={cx('back-to-top', this.props.classNameBackToTop)}>
+            <button className={cx('back-to-top-button')} onClick={this.scrollTop} tabIndex={0}>
               <i className={cx('top-icon')}>{Parser(BackToTopIcon)}</i>
-              <div className={cx('message')}>
-                <FormattedMessage id="ScrollWrapper.backToTop" defaultMessage="Back to top" />
-              </div>
             </button>
           </div>
         )}

diff --git a/app/src/components/main/scrollWrapper/scrollWrapper.scss b/app/src/components/main/scrollWrapper/scrollWrapper.scss
@@ -15,6 +15,14 @@
  * limitations under the License.
  */
 
+ @mixin fill-svg($color) {
+  svg {
+    path {
+      fill: $color;
+    }
+  }
+}
+
 .scroll-component {
   &:hover {
     .thumb-horizontal {
@@ -72,89 +80,37 @@
 
 .back-to-top {
   position: fixed;
-  left: 10px;
-  bottom: 65px;
-  padding: 0;
-  font-size: 12px;
-  font-family: $FONT-LIGHT;
-
-  @media (max-width: $SCREEN_SM_MAX) {
-    position: sticky;
-    z-index: $Z_INDEX-STICKY-TOOLBAR;
-    bottom: 0;
-    left: 0;
-    text-align: center;
-    margin-right: 15px;
-    margin-left: 15px;
-    margin-top: 5px;
-    background-color: $COLOR--white-two;
-    height: 35px;
-  }
-
-  @media (max-width: $SCREEN_XS_MAX) {
-    margin-right: 0;
-    margin-left: 0;
-  }
-
-  @media print {
-    display: none;
-  }
+  right: 32px;
+  bottom: 32px;
 }
 
 .back-to-top-button {
-  border: none;
-  color: color.adjust($COLOR--gray-91, $lightness: -25%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: $COLOR--white-two;
   cursor: pointer;
+  border: none;
   outline: none;
-  background: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8px 40px $COLOR--item-shadow-hover;
 
   &:hover {
-    color: $COLOR--gray-91;
+    @include fill-svg($COLOR--topaz-hover-2);
   }
-  @media (max-width: $SCREEN_SM_MAX) {
-    padding: 0;
-    width: 100%;
-    margin-bottom: 1px;
-    line-height: 34px;
-    color: $COLOR--gray-47;
-    background-color: $COLOR--white-two;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-
-    &:hover {
-      color: $COLOR--gray-47;
-    }
+  &:active {
+    @include fill-svg($COLOR--topaz-pressed);
   }
-}
-
-.message {
-  display: none;
-
-  @media (max-width: $SCREEN_SM_MAX) {
-    display: inline-block;
+  &:focus-visible {
+    @include fill-svg($COLOR--topaz-focused);
+    outline: 2px solid $COLOR--topaz-focused;
   }
 }
 
 .top-icon {
-  width: 20px;
-  margin-right: 5px;
+  width: 15px;
+  height: 15px;
   display: inline-block;
-
-  svg {
-    fill: $COLOR--white-two;
-  }
-
-  &:hover {
-    svg {
-      fill: $COLOR--gray-80;
-    }
-  }
-
-  @media (max-width: $SCREEN_SM_MAX) {
-    width: 15px;
-    vertical-align: sub;
-
-    svg {
-      fill: $COLOR--gray-47;
-    }
-  }
 }
diff --git a/app/src/pages/common/users/membersListTable/membersListTable.scss b/app/src/pages/common/users/membersListTable/membersListTable.scss
@@ -15,11 +15,11 @@
  */
 
 .members-list-table {
+  margin: 0 auto;
   margin-top: 24px;
   padding: 0 32px 32px 32px;
   max-width: 1264px;
   box-sizing: border-box;
-  flex: 1;
 }
 
 .members-pagination-wrapper {

diff --git a/app/src/pages/instance/allUsersPage/allUsersPage.jsx b/app/src/pages/instance/allUsersPage/allUsersPage.jsx
@@ -17,7 +17,6 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useIntl, defineMessages } from 'react-intl';
-import { ScrollWrapper } from 'components/main/scrollWrapper';
 import { EmptyPageState } from 'pages/common';
 import NoResultsIcon from 'common/img/newIcons/no-results-icon-inline.svg';
 import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
@@ -43,23 +42,21 @@ export const AllUsersPage = () => {
   const [searchValue, setSearchValue] = useState(null);
 
   return (
-    <ScrollWrapper>
-      <div className={cx('all-users-page')}>
-        <AllUsersHeader
-          isLoading={isLoading}
-          searchValue={searchValue}
-          setSearchValue={setSearchValue}
+    <div className={cx('all-users-page')}>
+      <AllUsersHeader
+        isLoading={isLoading}
+        searchValue={searchValue}
+        setSearchValue={setSearchValue}
+      />
+      {users.length === 0 && !isLoading ? (
+        <EmptyPageState
+          label={formatMessage(COMMON_LOCALE_KEYS.NO_RESULTS)}
+          description={formatMessage(messages.noResultsDescription)}
+          emptyIcon={NoResultsIcon}
         />
-        {users.length === 0 && !isLoading ? (
-          <EmptyPageState
-            label={formatMessage(COMMON_LOCALE_KEYS.NO_RESULTS)}
-            description={formatMessage(messages.noResultsDescription)}
-            emptyIcon={NoResultsIcon}
-          />
-        ) : (
-          <AllUsersListTable users={users} />
-        )}
-      </div>
-    </ScrollWrapper>
+      ) : (
+        <AllUsersListTable users={users} />
+      )}
+    </div>
   );
 };