Skip to content

Commit

Permalink
EPMRPP-96659 || Update the veiw of selected project in the header (#4120
Browse files Browse the repository at this point in the history
)
  • Loading branch information
BlazarQSO authored Dec 5, 2024
1 parent d60648d commit 7d08ade
Show file tree
Hide file tree
Showing 17 changed files with 205 additions and 8 deletions.
1 change: 1 addition & 0 deletions app/localization/translated/be.json
Original file line number Diff line number Diff line change
Expand Up @@ -1784,6 +1784,7 @@
"ProjectStatusPage.oneMonth": "1 месяц",
"ProjectStatusPage.sixMonths": "6 месяцаў",
"ProjectStatusPage.threeMonths": "3 месяца",
"ProjectTeamPage.allOrganizations": "Усе арганізацыі",
"ProjectTeamPage.description": "Спіс карыстальнікаў у дадзены момант пусты. Каб атрымаць максімальную аддачу ад свайго праекта, Запрасіце членаў сваёй каманды і эфектыўна супрацоўнічайце.",
"ProjectTeamPage.inviteUser": "Запрасіць карыстальніка",
"ProjectTeamPage.noResultsDescription": "Вынікі пошуку або фільтрацыі не супалі ні з адным з крытэраў. Калі ласка, паспрабуйце выкарыстоўваць іншыя ключавыя словы або змяніць налады фільтра.",
Expand Down
1 change: 1 addition & 0 deletions app/localization/translated/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -1783,6 +1783,7 @@
"ProjectStatusPage.oneMonth": "1 mes",
"ProjectStatusPage.sixMonths": "6 meses",
"ProjectStatusPage.threeMonths": "3 meses",
"ProjectTeamPage.allOrganizations": "All Organizations",
"ProjectTeamPage.description": "User list is currently empty. To make the most out of your project, invite your team members and collaborate efficiently.",
"ProjectTeamPage.inviteUser": "Invite user",
"ProjectTeamPage.noResultsDescription": "Your search or filter criteria didn't match any results. Please try different keywords or adjust your filter settings.",
Expand Down
1 change: 1 addition & 0 deletions app/localization/translated/ru.json
Original file line number Diff line number Diff line change
Expand Up @@ -1780,6 +1780,7 @@
"ProjectStatusPage.oneMonth": "1 месяц",
"ProjectStatusPage.sixMonths": "6 месяцев",
"ProjectStatusPage.threeMonths": "3 месяца",
"ProjectTeamPage.allOrganizations": "Все организации",
"ProjectTeamPage.description": "Список пользователей в данный момент пуст. Чтобы получить максимальную отдачу от своего проекта, пригласите членов своей команды и эффективно сотрудничайте.",
"ProjectTeamPage.inviteUser": "Пригласить пользователя",
"ProjectTeamPage.noResultsDescription": "Результаты поиска или фильтрации не совпали ни с одним из критериев. Пожалуйста, попробуйте использовать другие ключевые слова или измените настройки фильтра.",
Expand Down
1 change: 1 addition & 0 deletions app/localization/translated/uk.json
Original file line number Diff line number Diff line change
Expand Up @@ -1782,6 +1782,7 @@
"ProjectStatusPage.oneMonth": "1 місяць",
"ProjectStatusPage.sixMonths": "6 місяців",
"ProjectStatusPage.threeMonths": "3 місяці",
"ProjectTeamPage.allOrganizations": "Всі організації",
"ProjectTeamPage.description": "Список користувачів на даний момент порожній. Щоб отримати максимальну віддачу від свого проекту, запросіть членів своєї команди та ефективно співпрацюйте.",
"ProjectTeamPage.inviteUser": "Запросити користувача",
"ProjectTeamPage.noResultsDescription": "Результати пошуку або фільтрації не співпали з жодним із критеріїв. Будь ласка, спробуйте використовувати інші ключові слова або змініть налаштування фільтра.",
Expand Down
1 change: 1 addition & 0 deletions app/localization/translated/zh.json
Original file line number Diff line number Diff line change
Expand Up @@ -1782,6 +1782,7 @@
"ProjectStatusPage.oneMonth": "1个月",
"ProjectStatusPage.sixMonths": "6个月",
"ProjectStatusPage.threeMonths": "3个月",
"ProjectTeamPage.allOrganizations": "All Organizations",
"ProjectTeamPage.description": "User list is currently empty. To make the most out of your project, invite your team members and collaborate efficiently.",
"ProjectTeamPage.inviteUser": "Invite user",
"ProjectTeamPage.noResultsDescription": "Your search or filter criteria didn't match any results. Please try different keywords or adjust your filter settings.",
Expand Down
3 changes: 1 addition & 2 deletions app/src/common/urls.js
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,6 @@ export const URLS = {
logSearch: (projectKey, itemId) => `${urlBase}${projectKey}/log/search/${itemId}`,
bulkLastLogs: (projectKey) => `${urlBase}${projectKey}/log/under`,
users: (ids = []) => `${urlCommonBase}users?ids=${ids.join(',')}`,
usersMe: () => `${urlCommonBase}users/me`,
userRegistration: () => `${urlCommonBase}users/registration`,
userValidateRegistrationInfo: () => `${urlCommonBase}users/registration/info`,
userPasswordReset: () => `${urlCommonBase}users/password/reset`,
Expand All @@ -266,7 +265,7 @@ export const URLS = {
events: () => `${urlBase}activities/searches`,
searchEventsBySubjectName: (projectName) => (searchTerm = '') =>
`${urlBase}activities/${projectName}/subjectName?filter.cnt.subjectName=${searchTerm}`,
allUsers: () => `${urlCommonBase}users`,
allUsers: () => `${urlCommonBase}users/all`,

exportUsers: (filterEntities) =>
`${urlCommonBase}users/export${getQueryParams({
Expand Down
2 changes: 1 addition & 1 deletion app/src/controllers/user/sagas.js
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ function* unassignFromProject({ payload: project }) {
function* fetchUserWorker() {
let user;
try {
user = yield call(fetch, URLS.usersMe());
user = yield call(fetch, URLS.users());
yield put(fetchUserSuccessAction(user));
} catch (err) {
yield put(fetchUserErrorAction());
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,15 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import { UserPageLocationLevel } from './userPageLocationLevel';
import styles from './membersPageHeader.scss';

const cx = classNames.bind(styles);

export const MembersPageHeader = ({ title, children }) => {
export const MembersPageHeader = ({ title, children, organizationName, projectName }) => {
return (
<div className={cx('members-page-header-container')}>
<UserPageLocationLevel organizationName={organizationName} projectName={projectName} />
<div className={cx('header')}>
<span className={cx('title')}>{title}</span>
{children}
Expand All @@ -35,8 +37,11 @@ export const MembersPageHeader = ({ title, children }) => {
MembersPageHeader.propTypes = {
title: PropTypes.string.isRequired,
children: PropTypes.node,
organizationName: PropTypes.string.isRequired,
projectName: PropTypes.string,
};

MembersPageHeader.defaultProps = {
children: null,
projectName: null,
};
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*/

.members-page-header-container {
padding: 48px 32px 16px 32px;
padding: 16px 32px 16px 32px;
border-bottom: 1px solid $COLOR--e-100;
background: $COLOR--bg-000;
box-sizing: border-box;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,8 @@ export const messages = defineMessages({
defaultMessage:
"Your search or filter criteria didn't match any results. Please try different keywords or adjust your filter settings.",
},
allOrganizations: {
id: 'ProjectTeamPage.allOrganizations',
defaultMessage: 'All Organizations',
},
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -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 { UserPageLocationLevel } from './userPageLocationLevel';
Original file line number Diff line number Diff line change
@@ -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 { useState } from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import Parser from 'html-react-parser';
import classNames from 'classnames/bind';
import { BaseIconButton, Popover } from '@reportportal/ui-kit';
import TreeIcon from './img/tree-inline.svg';
import SubLevelIcon from './img/sub-level-inline.svg';
import { messages } from '../messages';
import styles from './userPageLocationLevel.scss';

const cx = classNames.bind(styles);

export const UserPageLocationLevel = ({ organizationName, projectName }) => {
const { formatMessage } = useIntl();
const [isOpen, setIsOpen] = useState(false);

const getContent = () => (
<div className={cx('members-page-header-container')}>
<div>{formatMessage(messages.allOrganizations)}</div>
<div className={cx('organization-name', { active: !projectName })}>
{Parser(SubLevelIcon)}
{organizationName}
</div>
{projectName && (
<div className={cx('project-name')}>
{Parser(SubLevelIcon)}
{projectName}
</div>
)}
</div>
);

return (
<div className={cx('user-page-location-level')}>
<Popover
content={getContent()}
placement="bottom-start"
className={cx('popover')}
isOpened={isOpen}
setIsOpened={setIsOpen}
fallbackPlacements={[]}
>
<BaseIconButton className={cx('tree-button', { open: isOpen })}>
{Parser(TreeIcon)}
</BaseIconButton>
</Popover>
<div className={cx('name')}>{projectName || organizationName}</div>
</div>
);
};

UserPageLocationLevel.propTypes = {
organizationName: PropTypes.string.isRequired,
projectName: PropTypes.string,
};

UserPageLocationLevel.defaultProps = {
projectName: null,
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/*!
* 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-page-location-level {
display: flex;
align-items: center;
gap: 16px;
color: $COLOR--e-300;
font-size: 13px;
margin-bottom: 12px;

svg {
width: 16px;
height: 16px;
}
}

.tree-button {
width: 16px;
height: 16px;
}

.name {
font-size: 13px;
line-height: 20px;
}

.open {
svg path {
fill: $COLOR--topaz-pressed;
}

&:hover:not(.disabled) {
svg path {
fill: $COLOR--topaz-2;
}
}
}

.popover {
font-size: 13px;
line-height: 20px;
min-width: 175px;
}

.project-name,
.organization-name {
display: flex;
align-items: center;
gap: 4px;
margin-top: 8px;
}

.project-name {
color: $COLOR--topaz-2;
margin-left: 16px;
}

.active {
color: $COLOR--topaz-2;
}
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,10 @@ export const OrganizationUsersPageHeader = ({
const isNotEmpty = usersCount > 0;

return (
<MembersPageHeader title={formatMessage(messages.organizationUsersTitle)}>
<MembersPageHeader
title={formatMessage(messages.organizationUsersTitle)}
organizationName={organization.name}
>
<div className={cx('actions')}>
{isNotEmpty && (
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,13 @@ import Parser from 'html-react-parser';
import classNames from 'classnames/bind';
import { Button } from '@reportportal/ui-kit';
import { useIntl } from 'react-intl';
import { projectMembersSelector } from 'controllers/project';
import { projectMembersSelector, projectNameSelector } from 'controllers/project';
import { SearchField } from 'components/fields/searchField';
import { NAMESPACE, SEARCH_KEY } from 'controllers/members/constants';
import { withFilter } from 'controllers/filter';
import filterIcon from 'common/img/newIcons/filters-outline-inline.svg';
import { PROJECT_PAGE_EVENTS } from 'components/main/analytics/events/ga4Events/projectPageEvents';
import { activeOrganizationNameSelector } from 'controllers/organization';
import { messages } from '../../common/membersPage/membersPageHeader/messages';
import { MembersPageHeader } from '../../common/membersPage/membersPageHeader';
import styles from './projectTeamPageHeader.scss';
Expand All @@ -46,10 +47,16 @@ export const ProjectTeamPageHeader = ({
}) => {
const { formatMessage } = useIntl();
const projectMembers = useSelector(projectMembersSelector);
const projectName = useSelector(projectNameSelector);
const organizationName = useSelector(activeOrganizationNameSelector);
const isNotEmptyMembers = projectMembers.length !== 0;

return (
<MembersPageHeader title={formatMessage(messages.projectTeamTitle)}>
<MembersPageHeader
title={formatMessage(messages.projectTeamTitle)}
organizationName={organizationName}
projectName={projectName}
>
<div className={cx('actions')}>
{isNotEmptyMembers && (
<>
Expand Down

0 comments on commit 7d08ade

Please sign in to comment.