yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-12 08:08:05 +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 { useMutation } from 'react-query';
import { useReviewWorkflows } from '../../../../pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflows'; 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'; import Information from '../../../../../../admin/src/content-manager/pages/EditView/Information';
const ATTRIBUTE_NAME = 'strapi_reviewWorkflows_stage'; const ATTRIBUTE_NAME = 'strapi_reviewWorkflows_stage';
@ -113,6 +115,8 @@ export function InformationBoxEE() {
<ReactSelect <ReactSelect
components={{ components={{
LoadingIndicator: () => <Loader small />, LoadingIndicator: () => <Loader small />,
Option: OptionColor,
SingleValue: SingleValueColor,
}} }}
error={formattedError} error={formattedError}
inputId={ATTRIBUTE_NAME} inputId={ATTRIBUTE_NAME}
@ -122,9 +126,19 @@ export function InformationBoxEE() {
name={ATTRIBUTE_NAME} name={ATTRIBUTE_NAME}
onChange={handleStageChange} onChange={handleStageChange}
options={ 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 /> <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_ATTRIBUTE_NAME = 'strapi_reviewWorkflows_stage';
const STAGE_FIXTURE = { const STAGE_FIXTURE = {
id: 1, id: 1,
color: 'red',
name: 'Stage 1', name: 'Stage 1',
worklow: 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 [nameField, nameMeta] = useField(`stages.${index}.name`);
const [colorField, colorMeta] = useField(`stages.${index}.color`); const [colorField, colorMeta] = useField(`stages.${index}.color`);
const dispatch = useDispatch(); const dispatch = useDispatch();
const colorOptions = AVAILABLE_COLORS.map(({ themeColorName, hex, name }) => ({ const colorOptions = AVAILABLE_COLORS.map(({ hex, name }) => ({
value: hex, value: hex,
label: formatMessage( label: formatMessage(
{ {
@ -42,7 +42,7 @@ export function Stage({ id, index, canDelete, isOpen: isOpenDefault = false }) {
}, },
{ name } { name }
), ),
themeColorName, color: hex,
})); }));
return ( return (
@ -121,10 +121,7 @@ export function Stage({ id, index, canDelete, isOpen: isOpenDefault = false }) {
colorField.onChange({ target: { value } }); colorField.onChange({ target: { value } });
dispatch(updateStage(id, { color: value })); dispatch(updateStage(id, { color: value }));
}} }}
value={{ value={colorOptions.find(({ value }) => value === colorField.value)}
value: colorField.value,
label: colorOptions.find(({ value }) => value === colorField.value).label,
}}
/> />
<FieldError /> <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'; import { Box, Flex, Typography } from '@strapi/design-system';
export function OptionColor({ children, ...props }) { export function OptionColor({ children, ...props }) {
const { value } = props.data; const { color } = props.data;
return ( return (
<components.Option {...props}> <components.Option {...props}>
<Flex alignItems="center" gap={2}> <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> <Typography textColor="neutral800" ellipsis>
{children} {children}
@ -22,8 +22,6 @@ export function OptionColor({ children, ...props }) {
OptionColor.propTypes = { OptionColor.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
data: PropTypes.shape({ data: PropTypes.shape({
label: PropTypes.string, color: PropTypes.string,
themeColorName: PropTypes.string,
value: PropTypes.string,
}).isRequired, }).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'; import { Box, Flex, Typography } from '@strapi/design-system';
export function SingleValueColor({ children, ...props }) { export function SingleValueColor({ children, ...props }) {
const { value } = props.data; const { color } = props.data;
return ( return (
<components.SingleValue {...props}> <components.SingleValue {...props}>
<Flex alignItems="center" gap={2}> <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> <Typography textColor="neutral800" ellipsis>
{children} {children}
@ -19,9 +19,13 @@ export function SingleValueColor({ children, ...props }) {
); );
} }
SingleValueColor.defaultProps = {
children: null,
};
SingleValueColor.propTypes = { SingleValueColor.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node,
data: PropTypes.shape({ data: PropTypes.shape({
value: PropTypes.string, color: PropTypes.string,
}).isRequired, }).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() { 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],
themeColorName,
name, 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) => { colors.forEach((color) => {
expect(color).toMatchObject({ expect(color).toMatchObject({
hex: expect.any(String), hex: expect.any(String),
themeColorName: expect.any(String),
name: expect.any(String), name: expect.any(String),
}); });
}); });