yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-02 10:55:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #16505 from strapi/feature/review-workflow-1-edit-view-color

Browse Source 
CM: Display stage colors in the edit view sidebar
This commit is contained in:
Gustav Hansen 2023-04-26 14:12:05 +02:00 committed by GitHub
commit c7e7683990
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/core/admin/ee/admin/content-manager/pages/EditView/InformationBox/InformationBoxEE.js
View File

@ -11,6 +11,8 @@ import { useIntl } from 'react-intl';
import { useMutation } from 'react-query';
import { useReviewWorkflows } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflows';
import { OptionColor } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/OptionColor';
import { SingleValueColor } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/SingleValueColor';
import Information from '../../../../../../admin/src/content-manager/pages/EditView/Information';
const ATTRIBUTE_NAME = 'strapi_reviewWorkflows_stage';
@ -113,6 +115,8 @@ export function InformationBoxEE() {
<ReactSelect
components={{
LoadingIndicator: () => <Loader small />,
Option: OptionColor,
SingleValue: SingleValueColor,
}}
error={formattedError}
inputId={ATTRIBUTE_NAME}
@ -122,9 +126,19 @@ export function InformationBoxEE() {
name={ATTRIBUTE_NAME}
onChange={handleStageChange}
options={
workflow ? workflow.stages.map(({ id, name }) => ({ value: id, label: name })) : []
workflow
? workflow.stages.map(({ id, color, name }) => ({
value: id,
label: name,
color,
}))
: []
}
value={{ value: activeWorkflowStage?.id, label: activeWorkflowStage?.name }}
value={{
value: activeWorkflowStage?.id,
label: activeWorkflowStage?.name,
color: activeWorkflowStage?.color,
}}
/>
<FieldError />

1
packages/core/admin/ee/admin/content-manager/pages/EditView/InformationBox/tests/InformationBoxEE.test.js
View File

@ -12,6 +12,7 @@ import { InformationBoxEE } from '../InformationBoxEE';
const STAGE_ATTRIBUTE_NAME = 'strapi_reviewWorkflows_stage';
const STAGE_FIXTURE = {
id: 1,
color: 'red',
name: 'Stage 1',
worklow: 1,
};

9
packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/Stage.js
View File

@ -33,7 +33,7 @@ export function Stage({ id, index, canDelete, isOpen: isOpenDefault = false }) {
const [nameField, nameMeta] = useField(`stages.${index}.name`);
const [colorField, colorMeta] = useField(`stages.${index}.color`);
const dispatch = useDispatch();
const colorOptions = AVAILABLE_COLORS.map(({ themeColorName, hex, name }) => ({
const colorOptions = AVAILABLE_COLORS.map(({ hex, name }) => ({
value: hex,
label: formatMessage(
{
@ -42,7 +42,7 @@ export function Stage({ id, index, canDelete, isOpen: isOpenDefault = false }) {
},
{ name }
),
themeColorName,
color: hex,
}));
return (
@ -121,10 +121,7 @@ export function Stage({ id, index, canDelete, isOpen: isOpenDefault = false }) {
colorField.onChange({ target: { value } });
dispatch(updateStage(id, { color: value }));
}}
value={{
value: colorField.value,
label: colorOptions.find(({ value }) => value === colorField.value).label,
}}
value={colorOptions.find(({ value }) => value === colorField.value)}
/>
<FieldError />

8
packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/OptionColor/OptionColor.js
View File

@ -4,12 +4,12 @@ import { components } from 'react-select';
import { Box, Flex, Typography } from '@strapi/design-system';
export function OptionColor({ children, ...props }) {
const { value } = props.data;
const { color } = props.data;
return (
<components.Option {...props}>
<Flex alignItems="center" gap={2}>
<Box height={2} background={value} hasRadius width={2} />
<Box height={2} background={color} hasRadius width={2} />
<Typography textColor="neutral800" ellipsis>
{children}
@ -22,8 +22,6 @@ export function OptionColor({ children, ...props }) {
OptionColor.propTypes = {
children: PropTypes.node.isRequired,
data: PropTypes.shape({
label: PropTypes.string,
themeColorName: PropTypes.string,
value: PropTypes.string,
color: PropTypes.string,
}).isRequired,
};

12
packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/SingleValueColor/SingleValueColor.js
View File

@ -4,12 +4,12 @@ import { components } from 'react-select';
import { Box, Flex, Typography } from '@strapi/design-system';
export function SingleValueColor({ children, ...props }) {
const { value } = props.data;
const { color } = props.data;
return (
<components.SingleValue {...props}>
<Flex alignItems="center" gap={2}>
<Box height={2} background={value} hasRadius width={2} />
<Box height={2} background={color} hasRadius width={2} />
<Typography textColor="neutral800" ellipsis>
{children}
@ -19,9 +19,13 @@ export function SingleValueColor({ children, ...props }) {
);
}
SingleValueColor.defaultProps = {
children: null,
};
SingleValueColor.propTypes = {
children: PropTypes.node.isRequired,
children: PropTypes.node,
data: PropTypes.shape({
value: PropTypes.string,
color: PropTypes.string,
}).isRequired,
};

1
packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/colors.js
View File

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

1
packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/tests/colors.test.js
View File

@ -9,7 +9,6 @@ describe('Settings | Review Workflows | colors', () => {
colors.forEach((color) => {
expect(color).toMatchObject({
hex: expect.any(String),
themeColorName: expect.any(String),
name: expect.any(String),
});
});