EPMRPP-91927 || Update "All users" page at instance level (#4140)

* Feat: add the main files

* fix: add export line to index.js

* feat: add buttons

* feat: add pagination

* feat: add the you tag

* refactor: reuse messages

* feat: add new endpoint, remove unused element

* feat: add changes in the localization file after running "manage translations"

* EPMRPP-91927 || Code review fixes - 1

* EPMRPP-91927 || Code review fixes - 2

* refactor: refactor the code

* refactor: delete unused files

* EPMRPP-91927 || Code review fixes - 3

* EPMRPP-91927 || Code review fixes - 4

app/src/common/urls.js

@@ -37,6 +37,7 @@ export const URLS = {
   dataPhoto: (at, loadThumbnail) => `${urlBase}data/photo${getQueryParams({ at, loadThumbnail })}`,
   dataUserPhoto: (projectKey, login, loadThumbnail) =>
     `${urlBase}data/${projectKey}/userphoto${getQueryParams({ login, loadThumbnail })}`,
+  userAvatar: (userId) => `${urlCommonBase}users/${userId}/avatar`,
 
   dashboard: (projectKey, id) => `${urlBase}${projectKey}/dashboard/${id}`,
   dashboards: (projectKey, params) =>

app/src/controllers/instance/allUsers/selectors.js

@@ -17,7 +17,7 @@
 import { DEFAULT_PAGINATION } from 'controllers/pagination';
 import { createQueryParametersSelector } from 'controllers/pages';
 import { createSelectedItemsSelector } from 'controllers/groupOperations';
-import { DEFAULT_SORTING } from './constants';
+import { DEFAULT_SORTING, NAMESPACE } from './constants';
 import { administrateDomainSelector } from '../selectors';
 
 const domainSelector = (state) => administrateDomainSelector(state).allUsers || {};
@@ -32,4 +32,5 @@ export const selectedUsersSelector = createSelectedItemsSelector(groupOperations
 export const querySelector = createQueryParametersSelector({
   defaultPagination: DEFAULT_PAGINATION,
   defaultSorting: DEFAULT_SORTING,
+  namespace: NAMESPACE,
 });

app/src/pages/common/membersPage/userNameCell/userNameCell.jsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import classNames from 'classnames/bind';
+import { Tooltip } from '@reportportal/ui-kit';
+import { ADMIN_TYPE } from 'common/utils/permissions/constants';
+import { messages } from 'pages/common/users/membersListTable/messages';
+import styles from './userNameCell.scss';
+
+const cx = classNames.bind(styles);
+
+export const UserNameCell = ({ user, badges, userAvatar: UserAvatar }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className={cx('user-name-cell')}>
+      <UserAvatar className={cx('user-avatar')} userId={user.id} />
+      <div className={cx('full-name')}>{user.fullName}</div>
+      <div className={cx('badges')}>
+        {badges.map(({ title, type }) => {
+          const badgeContent = (
+            <div key={`${user.id}-${type}`} className={cx('badge', type)}>
+              {formatMessage(title)}
+            </div>
+          );
+
+          return type === ADMIN_TYPE ? (
+            <Tooltip
+              key={`${user.id}-${type}-tooltip`}
+              content={formatMessage(messages.adminAccessInfo)}
+              placement="top"
+              width={248}
+            >
+              {badgeContent}
+            </Tooltip>
+          ) : (
+            badgeContent
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+UserNameCell.propTypes = {
+  user: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    fullName: PropTypes.string.isRequired,
+  }).isRequired,
+  badges: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.object.isRequired,
+      type: PropTypes.string.isRequired,
+    }),
+  ),
+  userAvatar: PropTypes.elementType.isRequired,
+};
+
+UserNameCell.defaultProps = {
+  badges: [],
+};

app/src/pages/common/membersPage/userNameCell/userNameCell.scss

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.user-name-cell {
+  display: flex;
+  align-items: center;
+
+  .user-avatar {
+    width: 32px;
+    height: 32px;
+
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  .full-name {
+    margin-left: 16px;
+  }
+
+  .badges {
+    display: flex;
+    align-items: center;
+    margin-left: 16px;
+    gap: 8px;
+
+    .badge {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      padding: 2px 8px;
+      border-radius: 6px;
+      color: $COLOR--white-two;
+      font-family: $FONT-ROBOTO-BOLD;
+      font-size: 11px;
+      line-height: 16px;
+
+      &.admin {
+        background-color: $COLOR--tag-value-text;
+      }
+
+      &.manager {
+        background-color: $COLOR--test-execution-status-passed;  
+      }
+
+      &.you {
+        background-color: $COLOR--topaz-focused;
+      }
+    }
+  }
+}

app/src/pages/inside/common/userAvatar/index.js

@@ -15,3 +15,4 @@
  */
 
 export { UserAvatar } from './userAvatar';
+export { UserAvatarWithNewApi } from './userAvatarWithNewApi';

app/src/pages/inside/common/userAvatar/userAvatar.jsx

@@ -24,25 +24,31 @@ import styles from './userAvatar.scss';
 
 const cx = classNames.bind(styles);
 
-export const UserAvatar = ({ className, projectKey, userId }) => (
-  <div className={cx('user-avatar', className)}>
-    <Image
-      className={cx('avatar')}
-      src={URLS.dataUserPhoto(projectKey, userId, true)}
-      alt="avatar"
-      fallback={DefaultUserImage}
-      preloaderColor="charcoal"
-    />
-  </div>
-);
+export const UserAvatar = ({ className, userId, projectKey, isNewApi }) => {
+  const src = isNewApi ? URLS.userAvatar(userId) : URLS.dataUserPhoto(projectKey, userId, true);
+
+  return (
+    <div className={cx('user-avatar', className)}>
+      <Image
+        className={cx('avatar')}
+        src={src}
+        alt="avatar"
+        fallback={DefaultUserImage}
+        preloaderColor="charcoal"
+      />
+    </div>
+  );
+};
 
 UserAvatar.propTypes = {
   className: PropTypes.string,
+  userId: PropTypes.string.isRequired,
   projectKey: PropTypes.string,
-  userId: PropTypes.string,
+  isNewApi: PropTypes.bool,
 };
+
 UserAvatar.defaultProps = {
   className: '',
   projectKey: '',
-  userId: '',
+  isNewApi: false,
 };

app/src/pages/instance/allUsersPage/modals/addUserModal/addUserModal.scss → app/src/pages/inside/common/userAvatar/userAvatarWithNewApi.jsx

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2019 EPAM Systems
+ * Copyright 2024 EPAM Systems
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,10 +14,6 @@
  * limitations under the License.
  */
 
-.generate-password-link {
-  font-size: 13px;
-  color: $COLOR--topaz;
-  position: absolute;
-  bottom: 75px;
-  cursor: pointer;
-}
+import { UserAvatar } from './userAvatar';
+
+export const UserAvatarWithNewApi = (props) => <UserAvatar {...props} isNewApi />;