feat: add new endpoint, remove unused element

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/pages/instance/allUsersPage/allUsersHeader/allUsersHeader.jsx

@@ -1,13 +1,26 @@
+/*
+ * 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 React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { defineMessages, useIntl } from 'react-intl';
 import classNames from 'classnames/bind';
-import { GhostButton } from 'components/buttons/ghostButton';
-import { MeatballMenuIcon, FilterOutlineIcon, Button } from '@reportportal/ui-kit';
-import { SearchField } from 'components/fields/searchField';
+import { MeatballMenuIcon, FilterOutlineIcon, Button, SearchIcon } from '@reportportal/ui-kit';
 import { ssoUsersOnlySelector } from 'controllers/appInfo';
-import ExportIcon from 'common/img/export-inline.svg';
 import styles from './allUsersHeader.scss';
 
 const cx = classNames.bind(styles);
@@ -31,7 +44,7 @@ const messages = defineMessages({
   },
 });
 
-export const AllUsersHeader = ({ isLoading, searchValue, setSearchValue, onExport, onInvite }) => {
+export const AllUsersHeader = ({ onInvite }) => {
   const { formatMessage } = useIntl();
   const ssoUsersOnly = useSelector(ssoUsersOnlySelector);
 
@@ -41,18 +54,10 @@ export const AllUsersHeader = ({ isLoading, searchValue, setSearchValue, onExpor
         <span className={cx('title')}>{formatMessage(messages.allUsersTitle)}</span>
         <div className={cx('actions')}>
           <div className={cx('icons')}>
-            <SearchField
-              isLoading={isLoading}
-              value={searchValue}
-              onChange={setSearchValue}
-              placeholder={formatMessage(messages.searchPlaceholder)}
-            />
+            <SearchIcon />
             <i className={cx('filter-icon')}>
               <FilterOutlineIcon />
             </i>
-            <GhostButton icon={ExportIcon} onClick={onExport}>
-              {formatMessage(messages.export)}
-            </GhostButton>
             {!ssoUsersOnly && (
               <Button variant="ghost" onClick={onInvite}>
                 {formatMessage(messages.invite)}

app/src/pages/instance/allUsersPage/allUsersHeader/allUsersHeader.scss

@@ -1,3 +1,19 @@
+/*
+ * 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.
+ */
+
 .all-users-header-container {
   padding: 48px 32px 12px 32px;
   border-bottom: 1px solid $COLOR--e-100;

app/src/pages/instance/allUsersPage/allUsersListTable/allUsersListTable.jsx

@@ -1,12 +1,28 @@
+/*
+ * 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 { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import classNames from 'classnames/bind';
 import { AbsRelTime } from 'components/main/absRelTime';
 import { MeatballMenuIcon, Popover, Tooltip } from '@reportportal/ui-kit';
-import { UserAvatar } from 'pages/inside/common/userAvatar';
-import { userInfoSelector, activeProjectKeySelector } from 'controllers/user';
+import { InstanceUserAvatar } from 'pages/instance/common/instanceUserAvatar';
+import { userInfoSelector } from 'controllers/user';
 import { getRoleBadgesData } from 'common/utils/permissions/getRoleTitle';
 import { ADMIN_TYPE } from 'common/utils/permissions/constants';
 import {
@@ -42,7 +58,6 @@ const AllUsersListTableComponent = ({
   const { formatMessage } = useIntl();
   const dispatch = useDispatch();
   const currentUser = useSelector(userInfoSelector);
-  const activeProjectKey = useSelector(activeProjectKeySelector);
 
   const renderRowActions = () => (
     <Popover
@@ -72,11 +87,7 @@ const AllUsersListTableComponent = ({
             content: user.fullName,
             component: (
               <div className={cx('member-name-column')}>
-                <UserAvatar
-                  className={cx('custom-user-avatar')}
-                  projectKey={activeProjectKey}
-                  userId={user.userId}
-                />
+                <InstanceUserAvatar className={cx('custom-user-avatar')} userId={user.id} />
                 <div className={cx('full-name')}>{user.fullName}</div>
                 <div className={cx('badges')}>
                   {memberBadges.map(({ title, type }) => {
@@ -116,7 +127,7 @@ const AllUsersListTableComponent = ({
           organizations: organizationsCount,
         };
       }),
-    [users, currentUser.id, activeProjectKey, formatMessage],
+    [users, currentUser.id, formatMessage],
   );
 
   const primaryColumn = {

app/src/pages/instance/allUsersPage/allUsersListTable/allUsersListTable.scss

@@ -1,3 +1,19 @@
+/*
+ * 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.
+ */
+
 .date {
   font-family: inherit;
   color: inherit;

app/src/pages/instance/allUsersPage/allUsersListTable/index.js

@@ -1 +1,17 @@
+/*
+ * 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.
+ */
+
 export { AllUsersListTable } from './allUsersListTable';

app/src/pages/instance/common/instanceUserAvatar/index.js

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+export { InstanceUserAvatar } from './instanceUserAvatar';

app/src/pages/instance/common/instanceUserAvatar/instanceUserAvatar.jsx

@@ -0,0 +1,47 @@
+/*
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { URLS } from 'common/urls';
+import DefaultUserImage from 'common/img/default-user-avatar.png';
+import { Image } from 'components/main/image';
+import styles from './instanceUserAvatar.scss';
+
+const cx = classNames.bind(styles);
+
+export const InstanceUserAvatar = ({ className, userId }) => (
+  <div className={cx('user-avatar', className)}>
+    <Image
+      className={cx('avatar')}
+      src={URLS.userAvatar(userId)}
+      alt="avatar"
+      fallback={DefaultUserImage}
+      preloaderColor="charcoal"
+    />
+  </div>
+);
+
+InstanceUserAvatar.propTypes = {
+  className: PropTypes.string,
+  userId: PropTypes.string,
+};
+
+InstanceUserAvatar.defaultProps = {
+  className: '',
+  userId: '',
+};

app/src/pages/instance/common/instanceUserAvatar/instanceUserAvatar.scss

@@ -0,0 +1,29 @@
+/*
+ * 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-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 52px;
+}
+
+.avatar {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}