Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EPMRPP-78764 || Defect types system messages depending on length #3248

Merged
merged 5 commits into from
Sep 1, 2022
Merged

EPMRPP-78764 || Defect types system messages depending on length #3248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a8bbd9d
EPMRPP-78764 || Defect types system messages depending on length, col…
tr1ble Aug 29, 2022
a9533a5
EPMRPP-78764 || Code review fixes - 1, EPMRPP-78986 || Defect initial…
tr1ble Aug 30, 2022
39847c4
EPMRPP-78764 || Code review fixes - 2
tr1ble Aug 30, 2022
4191192
EPMRPP-78764 || Code review fixes - 3
tr1ble Sep 1, 2022
84b6298
EPMRPP-78764 || Test fix
tr1ble Sep 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions app/localization/translated/be.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,11 @@
"DefectTypesTab.deleteModalHeader": "Выдаліць тып дэфекту",
"DefectTypesTab.description": "Тыпы дэфектаў - гэта набор дэфектаў, якія найбольш верагодна з'явяцца падчас выканання тэстаў. Вы можаце выкарыстоўваць дэфекты па змаўчанні, каб пазначыць элементы тэсту, або стварыць уласныя дэфекты, каб было прасцей аналізаваць выкананне тэстаў.",
"DefectTypesTab.diagramCol": "Дыяграма",
"DefectTypesTab.informationMessage": "У вас засталося толькі {length} {slot} для стварэння тыпаў дэфектаў",
"DefectTypesTab.informationMessageSingle": "слот",
"DefectTypesTab.informationMessageMultiply": "слотаў",
"DefectTypesTab.informationSubMessage": "Вы выкарысталі {currentLength} тыпаў дэфектаў з {maxLength} даступных. Пасля дасягнення ліміту вы не зможаце стварыць новы тып дэфекту, пакуль не выдаліце хаця б адзін, створаны раней",
"DefectTypesTab.informationTitle": "Інфармацыя",
"DefectTypesTab.noColorsToUpdate": "Няма кветак для абнаўлення",
"DefectTypesTab.noDefectBugsGroup": "Група без дэфектаў",
"DefectTypesTab.productBugsGroup": "Група хібаў прадукту",
Expand All @@ -500,6 +505,8 @@
"DefectTypesTab.subtypesCanBeAdded": "падтыпаў можна дадаць",
"DefectTypesTab.systemIssuesGroup": "Група сістэмных праблем",
"DefectTypesTab.toInvestigateBugsGroup": "Група неабходны аналіз",
"DefectTypesTab.warningMessage": "Вы дасягнулі максімальнага ліміту тыпаў дэфектаў, даступных для праекта",
"DefectTypesTab.warningSubMessage": "Колькасць тыпаў дэфектаў у вашым праекце зараз складае {maxLength} з {maxLength}. Вы зможаце стварыць новы пасля выдалення хаця б аднаго, створанага раней",
"DeleteDefectTypeModal.message": "Вы ўпэўнены, што хочаце выдаліць {name}?",
"DeleteDefectTypeModal.title": "Выдаліць {name}",
"DeleteFilterDialog.deleteFilter": "Вы ўпэўнены, што хочаце выдаліць фільтр '<b>{name}</b>'? Ён больш не будзе існаваць.",
Expand Down
7 changes: 7 additions & 0 deletions app/localization/translated/ru.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,11 @@
"DefectTypesTab.deleteModalHeader": "Удалить тип дефекта",
"DefectTypesTab.description": "Типы дефектов — это набор дефектов, которые с наибольшей вероятностью могут появиться во время выполнения тестов. Вы можете использовать Дефекты по умолчанию, чтобы пометить элементы теста, или создать свои собственные Дефекты, чтобы упростить анализ выполнения тестов.",
"DefectTypesTab.diagramCol": "Диаграмма",
"DefectTypesTab.informationMessage": "У вас осталось только {length} {slot} для создания типов дефектов",
"DefectTypesTab.informationMessageSingle": "слот",
"DefectTypesTab.informationMessageMultiply": "слотов",
"DefectTypesTab.informationSubMessage": "Вы использовали {currentLength} типов дефектов из {maxLength} доступных. После достижения лимита вы не сможете создать новый тип дефекта, пока не удалите хотя бы один созданный ранее",
"DefectTypesTab.informationTitle": "Информация",
"DefectTypesTab.noColorsToUpdate": "Нет цветов для обновления",
"DefectTypesTab.noDefectBugsGroup": "Группа без дефектов",
"DefectTypesTab.productBugsGroup": "Группа дефектов продукта",
Expand All @@ -500,6 +505,8 @@
"DefectTypesTab.subtypesCanBeAdded": "подтипов можно добавить",
"DefectTypesTab.systemIssuesGroup": "Группа системных ошибок",
"DefectTypesTab.toInvestigateBugsGroup": "Группе требуется анализ",
"DefectTypesTab.warningMessage": "Вы достигли максимального предела типов дефектов, доступных для каждого проекта",
"DefectTypesTab.warningSubMessage": "Количество типов дефектов в вашем проекте в настоящее время составляет {maxLength} из {maxLength}. Вы сможете создать новый после удаления хотя бы одного созданного ранее",
"DeleteDefectTypeModal.message": "Вы уверены, что хотите удалить {имя}?",
"DeleteDefectTypeModal.title": "Удалить {имя}",
"DeleteFilterDialog.deleteFilter": "Вы уверены, что хотите удалить фильтр '<b>{name}</b>'?",
Expand Down
7 changes: 7 additions & 0 deletions app/localization/translated/uk.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,11 @@
"DefectTypesTab.deleteModalHeader": "Видалити дефекту тип",
"DefectTypesTab.description": "Типи дефектів — це набір дефектів, які з найбільшою ймовірністю можуть з’явитися під час виконання тестів. Ви можете використовувати Дефекти за замовчуванням, щоб позначити елементи тесту, або створити власні Дефекти, щоб полегшити аналіз виконання тестів.",
"DefectTypesTab.diagramCol": "Діаграма",
"DefectTypesTab.informationMessage": "У вас залишилося лише {length} {slot} для створення типів дефектів",
"DefectTypesTab.informationMessageSingle": "слот",
"DefectTypesTab.informationMessageMultiply": "слотів",
"DefectTypesTab.informationSubMessage": "Ви використали {currentLength} типів дефектів із {maxLength} доступних. Після досягнення ліміту ви не зможете створити новий тип дефекту, доки не видалите хоча б один, створений раніше",
"DefectTypesTab.informationTitle": "Інформація",
"DefectTypesTab.noColorsToUpdate": "Квітів для оновлення Немає",
"DefectTypesTab.noDefectBugsGroup": "Група без дефектів",
"DefectTypesTab.productBugsGroup": "Група продукту дефектів",
Expand All @@ -500,6 +505,8 @@
"DefectTypesTab.subtypesCanBeAdded": "підтипів можна додати",
"DefectTypesTab.systemIssuesGroup": "Група системних помилок",
"DefectTypesTab.toInvestigateBugsGroup": "Групі потрібен аналіз",
"DefectTypesTab.warningMessage": "Ви досягли максимальної кількості типів дефектів, доступних для проекту",
"DefectTypesTab.warningSubMessage": "Кількість типів дефектів у вашому проекті наразі становить {maxLength} із {maxLength}. Ви зможете створити новий, видаливши принаймні один створений раніше",
"DeleteDefectTypeModal.message": "Ви впевнені, що хочете видалити {name}?",
"DeleteDefectTypeModal.title": "Видалити {name}",
"DeleteFilterDialog.deleteFilter": "Вы уверены, что хотите удалить фильтр '<b>{name}</b>'?",
Expand Down
10 changes: 5 additions & 5 deletions app/src/common/constants/colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ export const COLOR_FAILEDSKIPPEDTOTAL = '#f36c4a';
export const COLOR_PASSED = '#56b985';
export const COLOR_SKIPPED = '#6d6d6d';
export const COLOR_TOTAL = '#489beb';
export const COLOR_AUTOMATION_BUG = '#f7d63e';
export const COLOR_PRODUCT_BUG = '#ec3900';
export const COLOR_NO_DEFECT = '#777777';
export const COLOR_SYSTEM_ISSUE = '#0274d1';
export const COLOR_TO_INVESTIGATE = '#ffb743';
export const COLOR_AUTOMATION_BUG = '#ffc208';
export const COLOR_PRODUCT_BUG = '#d32f2f';
export const COLOR_NO_DEFECT = '#76839b';
export const COLOR_SYSTEM_ISSUE = '#3e7be6';
export const COLOR_TO_INVESTIGATE = '#00829b';
export const COLOR_TOINVESTIGATE = COLOR_TO_INVESTIGATE;
export const COLOR_AUTOMATIONBUG = COLOR_AUTOMATION_BUG;
export const COLOR_PRODUCTBUG = COLOR_PRODUCT_BUG;
Expand Down
1 change: 1 addition & 0 deletions app/src/common/css/variables/newColors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,4 @@ $COLOR--system-message-information-line-100: #ced3db;
$COLOR--system-issue-group: #3e7be6;
$COLOR--product-bug-group: #d32f2f;
$COLOR--automation-bug-group: #ffc208;
$COLOR--no-defect-bug-group: #76839b;
4 changes: 2 additions & 2 deletions app/src/common/utils/calculateFontColor.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
import {
COLOR_BLACK_2,
COLOR_WHITE_TWO,
COLOR_TO_INVESTIGATE,
COLOR_PRODUCT_BUG,
COLOR_AUTOMATION_BUG,
} from 'common/constants/colors';
import { calculateFontColor } from './calculateFontColor';

Expand All @@ -28,7 +28,7 @@ describe('calculateFontColor', () => {
});

test('should return black color in case of bright argument color', () => {
expect(calculateFontColor(COLOR_TO_INVESTIGATE)).toBe(COLOR_BLACK_2);
expect(calculateFontColor(COLOR_AUTOMATION_BUG)).toBe(COLOR_BLACK_2);
});

test('should return white color in case of dark argument color', () => {
Expand Down
1 change: 1 addition & 0 deletions app/src/componentLibrary/systemMessage/systemMessage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@

p {
margin-top: 4px;
max-width: 780px;
@include font-config($FONT-ROBOTO-REGULAR, 11px, 16px, $COLOR--e-400);
}
}
Expand Down
12 changes: 12 additions & 0 deletions app/src/components/main/hexColorPicker/hexColorPicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,18 @@
margin-left: 20px;
border-radius: 4px;
}

.react-colorful__saturation-pointer {
width: 18px;
height: 18px;
border-width: 3px;
}

.react-colorful__hue-pointer {
width: 14px;
height: 14px;
border-width: 2px;
}
}
}

Expand Down
3 changes: 2 additions & 1 deletion app/src/pages/inside/projectSettingsPageContainer/content/defectTypes/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
* limitations under the License.
*/

export const MAX_DEFECT_TYPES_COUNT = 74;
export const MAX_DEFECT_TYPES_COUNT = 75;
export const WARNING_DEFECT_TYPES_COUNT = 65;

export const NAME_FIELD_KEY = 'longName';
export const GROUP_FIELD_KEY = 'typeRef';
Expand Down
62 changes: 50 additions & 12 deletions app/src/pages/inside/projectSettingsPageContainer/content/defectTypes/defectTypes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,12 @@ import {
} from 'pages/inside/projectSettingsPageContainer/content/elements';
import { withHoverableTooltip } from 'components/main/tooltips/hoverableTooltip';
import { showModalAction } from 'controllers/modal';
import { MAX_DEFECT_TYPES_COUNT } from 'pages/inside/projectSettingsPageContainer/content/defectTypes/constants';
import {
MAX_DEFECT_TYPES_COUNT,
WARNING_DEFECT_TYPES_COUNT,
} from 'pages/inside/projectSettingsPageContainer/content/defectTypes/constants';
import { SystemMessage } from 'componentLibrary/systemMessage';
import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
import { DefectTypeRow } from './defectTypeRow';
import { messages } from './defectTypesMessages';
import styles from './defectTypes.scss';
Expand All @@ -53,15 +58,15 @@ const CreateDefect = withHoverableTooltip({
placement: 'bottom',
dynamicWidth: true,
},
})(({ onClick }) => (
<i className={cx('group-create')} onClick={onClick}>
})(({ onClick, disabled }) => (
<i className={cx('group-create', { disabled })} onClick={onClick}>
{Parser(CreateDefectIcon)}
</i>
));

CreateDefect.propTypes = {
formatMessage: PropTypes.func.isRequired,
onClick: PropTypes.func.isRequired,
disabled: PropTypes.bool.isRequired,
};

export const DefectTypes = ({ setHeaderTitleNode }) => {
Expand Down Expand Up @@ -89,15 +94,29 @@ export const DefectTypes = ({ setHeaderTitleNode }) => {
);
};

const isEditable = canUpdateSettings(userAccountRole, userProjectRole);
const canAddNewDefectType = useMemo(
() =>
DEFECT_TYPES_SEQUENCE.reduce((acc, groupName) => defectTypes[groupName].length + acc, 0) <
MAX_DEFECT_TYPES_COUNT,
const defectTypesLength = useMemo(
() => DEFECT_TYPES_SEQUENCE.reduce((acc, groupName) => defectTypes[groupName].length + acc, 0),
[defectTypes],
);
const interactionAllowed = isEditable && canAddNewDefectType;
const isEditable = canUpdateSettings(userAccountRole, userProjectRole);
const canAddNewDefectType = defectTypesLength < MAX_DEFECT_TYPES_COUNT;
const isInformationMessage =
defectTypesLength >= WARNING_DEFECT_TYPES_COUNT && canAddNewDefectType;

const getSystemMessagesProps = !canAddNewDefectType
? {
mode: 'warning',
header: formatMessage(COMMON_LOCALE_KEYS.warning),
caption: formatMessage(messages.warningSubMessage, { maxLength: MAX_DEFECT_TYPES_COUNT }),
}
: {
mode: 'info',
header: formatMessage(messages.informationTitle),
caption: formatMessage(messages.informationSubMessage, {
currentLength: defectTypesLength,
maxLength: MAX_DEFECT_TYPES_COUNT,
}),
};
useEffect(() => {
setHeaderTitleNode(
<span className={cx('button')}>
Expand All @@ -117,6 +136,24 @@ export const DefectTypes = ({ setHeaderTitleNode }) => {
<>
<TabDescription>{formatMessage(messages.description)}</TabDescription>
<Divider />
{(isInformationMessage || !canAddNewDefectType) && (
<div className={cx('system-message')}>
<SystemMessage {...getSystemMessagesProps}>
<span className={cx('system-message-description')}>
{formatMessage(
!canAddNewDefectType ? messages.warningMessage : messages.informationMessage,
{
length: MAX_DEFECT_TYPES_COUNT - defectTypesLength,
slot:
MAX_DEFECT_TYPES_COUNT - defectTypesLength === 1
? formatMessage(messages.informationMessageSingle)
: formatMessage(messages.informationMessageMultiply),
},
)}
</span>
</SystemMessage>
</div>
)}
<div className={cx('defect-types-list')}>
{DEFECT_TYPES_SEQUENCE.map((groupName) => {
return (
Expand All @@ -134,10 +171,11 @@ export const DefectTypes = ({ setHeaderTitleNode }) => {
{formatMessage(messages[groupName.toLowerCase()])}
</div>
</div>
{interactionAllowed && (
{isEditable && (
<CreateDefect
formatMessage={formatMessage}
onClick={() => onAdd(defectTypes[groupName][0])}
onClick={() => canAddNewDefectType && onAdd(defectTypes[groupName][0])}
disabled={!canAddNewDefectType}
/>
)}
</div>
Expand Down
20 changes: 18 additions & 2 deletions app/src/pages/inside/projectSettingsPageContainer/content/defectTypes/defectTypes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ $DEFECT_NAME_PADDING: 16px;

&.type-no_defect {
path {
stroke: $COLOR--darkmode-gray-100;
stroke: $COLOR--no-defect-bug-group;
}
}
}
Expand All @@ -100,7 +100,12 @@ $DEFECT_NAME_PADDING: 16px;
height: 16px;
cursor: pointer;

&:hover {
&.disabled {
opacity: 0.3;
cursor: initial;
}

&:hover:not(.disabled) {
@include fill-svg($COLOR--e-400);
}
}
Expand All @@ -127,3 +132,14 @@ $DEFECT_NAME_PADDING: 16px;
.button {
margin-left: auto;
}

.system-message {
padding-top: 24px;
}

.system-message-description {
font-family: $FONT-ROBOTO-BOLD;
font-size: 13px;
color: $COLOR--almost-black;
line-height: 16px;
}
30 changes: 30 additions & 0 deletions app/src/pages/inside/projectSettingsPageContainer/content/defectTypes/defectTypesMessages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,34 @@ export const messages = defineMessages({
defaultMessage:
'Defect Types are a set of defects that are most likely to appear during tests execution. You can use default Defects to mark your test items or create your own Defects to make it easier to analyze tests execution.',
},
informationTitle: {
id: 'DefectTypesTab.informationTitle',
defaultMessage: 'Information',
},
informationMessage: {
id: 'DefectTypesTab.informationMessage',
defaultMessage: 'You have only {length} {slot} left for creating Defect Types',
},
informationMessageSingle: {
id: 'DefectTypesTab.informationMessageSingle',
defaultMessage: 'slot',
},
informationMessageMultiply: {
id: 'DefectTypesTab.informationMessageMultiply',
defaultMessage: 'slots',
},
informationSubMessage: {
id: 'DefectTypesTab.informationSubMessage',
defaultMessage:
'You’ve used {currentLength} Defect Types out of {maxLength} available. After reaching the limit you won’t be able to create a new Defect Type until you delete at least one created previously',
},
warningMessage: {
id: 'DefectTypesTab.warningMessage',
defaultMessage: 'You have reached the maximum limit of Defect Types available per project',
},
warningSubMessage: {
id: 'DefectTypesTab.warningSubMessage',
defaultMessage:
'The number of Defect Types on your project is currently {maxLength} out of {maxLength}. You will be able to create a new one after deleting at least one created previously',
},
});