Merge pull request #16562 from strapi/feature/review-workflow-1-normalize-color

Settings: Normalize color hex; display custom color values
This commit is contained in:
Gustav Hansen 2023-05-02 11:57:27 +02:00 committed by GitHub
commit a8adb71ec2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 4 deletions

View File

@ -282,7 +282,7 @@ describeOnCondition(edition === 'EE')('Review workflows', () => {
test("It should assign a default color to stages if they don't have one", async () => { test("It should assign a default color to stages if they don't have one", async () => {
await requests.admin.put(`/admin/review-workflows/workflows/${testWorkflow.id}/stages`, { await requests.admin.put(`/admin/review-workflows/workflows/${testWorkflow.id}/stages`, {
body: { body: {
data: [defaultStage, { id: secondStage.id, name: 'new_name', color: '#000000' }], data: [defaultStage, { id: secondStage.id, name: secondStage.name, color: '#000000' }],
}, },
}); });

View File

@ -172,6 +172,9 @@ export function Stage({
), ),
color: hex, color: hex,
})); }));
// TODO: the .toUpperCase() conversion can be removed once the hex code is normalized in
// the admin API
const colorValue = colorOptions.find(({ value }) => value === colorField.value.toUpperCase());
return ( return (
<Box ref={composedRef}> <Box ref={composedRef}>
@ -275,7 +278,19 @@ export function Stage({
colorField.onChange({ target: { value } }); colorField.onChange({ target: { value } });
dispatch(updateStage(id, { color: value })); dispatch(updateStage(id, { color: value }));
}} }}
value={colorOptions.find(({ value }) => value === colorField.value)} // If no color was found in all the valid theme colors it means a user
// has set a custom value e.g. through the content API. In that case we
// display the custom color and a "Custom" label.
value={
colorValue ?? {
value: colorField.value,
label: formatMessage({
id: 'Settings.review-workflows.stage.color.name.custom',
defaultMessage: 'Custom',
}),
color: colorField.value,
}
}
/> />
<FieldError /> <FieldError />

View File

@ -27,7 +27,7 @@ export function getStageColorByHex(hex) {
export function getAvailableStageColors() { export function getAvailableStageColors() {
return Object.entries(STAGE_COLORS).map(([themeColorName, name]) => ({ return Object.entries(STAGE_COLORS).map(([themeColorName, name]) => ({
hex: lightTheme.colors[themeColorName], hex: lightTheme.colors[themeColorName].toUpperCase(),
name, name,
})); }));
} }

View File

@ -11,6 +11,8 @@ describe('Settings | Review Workflows | colors', () => {
hex: expect.any(String), hex: expect.any(String),
name: expect.any(String), name: expect.any(String),
}); });
expect(color.hex).toBe(color.hex.toUpperCase());
}); });
}); });

View File

@ -208,7 +208,7 @@ function getDiffBetweenStages(sourceStages, comparisonStages) {
if (!srcStage) { if (!srcStage) {
acc.created.push(stageToCompare); acc.created.push(stageToCompare);
} else if (srcStage.name !== stageToCompare.name) { } else if (srcStage.name !== stageToCompare.name || srcStage.color !== stageToCompare.color) {
acc.updated.push(stageToCompare); acc.updated.push(stageToCompare);
} }
return acc; return acc;