Skip to content

Update the design for the required fields on a custom status #55

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

Merged
ingeniumed merged 4 commits into from
Oct 2, 2024
Merged

Update the design for the required fields on a custom status #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4d5cab6
Update the design for the required users and metadata fields on the c…
ingeniumed Oct 2, 2024
1ae2b49
Tweak the help labels
ingeniumed Oct 2, 2024
cd1f129
Drop the roles
ingeniumed Oct 2, 2024
926835a
Flip the users and metadata around
ingeniumed Oct 2, 2024
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
2 changes: 1 addition & 1 deletion dist/modules/custom-status/custom-status-configure.asset.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'e53bfd4765be1e980144');
<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '1f87bf2f0e1732d5720f');
2 changes: 1 addition & 1 deletion dist/modules/custom-status/custom-status-configure.js
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 9 additions & 4 deletions modules/custom-status/lib/components/metadata-select-form-token-field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { BaseControl, FormTokenField } from '@wordpress/components';
import { debounce } from '@wordpress/compose';
import { useEffect, useMemo, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
* Custom status component
* @param object props
Expand All @@ -21,7 +22,7 @@ export default function MetadataSelectFormTokenField( {
requiredMetadatas.map( requiredMetadata => ( {
title: requiredMetadata.name,
value: requiredMetadata.name,
requiredMetadata,
metadata: requiredMetadata,
} ) )
);

Expand Down Expand Up @@ -97,10 +98,14 @@ export default function MetadataSelectFormTokenField( {
__experimentalShowHowTo={ false }
// Auto-select first match, so that it's possible to press <Enter> and immediately choose it
__experimentalAutoSelectFirstMatch={ true }
__experimentalExpandOnFocus={ true }
/>
<BaseControl
help={ __(
'Select editorial metadata fields that users must complete to proceed.',
'vip-workflow'
) }
/>

{ /* <FormTokenField> doesn't support help text. Provide a BaseControl with the help text instead. */ }
{ help && <BaseControl help={ help }></BaseControl> }
</>
);
}
Expand Down
81 changes: 37 additions & 44 deletions modules/custom-status/lib/components/modals/create-edit-custom-status-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import apiFetch from '@wordpress/api-fetch';
import {
Button,
Card,
CardBody,
__experimentalDivider as Divider,
__experimentalHStack as HStack,
Modal,
RadioControl,
__experimentalSpacer as Spacer,
TextControl,
TextareaControl,
ToggleControl,
Tooltip,
} from '@wordpress/components';
import { useState } from '@wordpress/element';
Expand Down Expand Up @@ -55,8 +53,8 @@ export default function CreateEditCustomStatusModal( {
// Modal properties
const [ error, setError ] = useState( null );
const [ isRequesting, setIsRequesting ] = useState( false );
const [ isRestrictedSectionVisible, setIsRestrictedSectionVisible ] = useState(
requiredUsers.length > 0 || requiredMetadatas.length > 0
const [ areRestrictedUsersSet, setAreRestrictedUsersSet ] = useState(
Copy link
Contributor Author

@ingeniumed ingeniumed Oct 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not the biggest fan of setting text here to control the radio control, so happy to change this. This seemed like the best way imo for now.

requiredUsers.length > 0 ? 'specific' : 'all'
);

let titleText;
Expand All @@ -69,10 +67,12 @@ export default function CreateEditCustomStatusModal( {
const handleSave = async () => {
const data = { name, description };

if ( isRestrictedSectionVisible ) {
if ( areRestrictedUsersSet === 'specific' ) {
const userIds = requiredUsers.map( user => user.id );
data.required_user_ids = userIds;
}

if ( requiredMetadatas.length > 0 ) {
const metadataIds = requiredMetadatas.map( metadata => metadata.term_id );
data.required_metadata_ids = metadataIds;
}
Expand Down Expand Up @@ -110,54 +110,47 @@ export default function CreateEditCustomStatusModal( {
{ error && <ErrorNotice errorMessage={ error } setError={ setError } /> }
<TextControl
label={ __( 'Name', 'vip-workflow' ) }
help={ __( 'The name is used to identify the custom status.', 'vip-workflow' ) }
help={ __( 'Visible to all users involved in the publishing process.', 'vip-workflow' ) }
onChange={ setName }
value={ name }
/>
<TextareaControl
label={ __( 'Description', 'vip-workflow' ) }
help={ __(
'The description is primarily for administrative use, to give you some context on what the custom status is to be used for.',
'vip-workflow'
) }
help={ __( 'Only visible to you and other administrators.', 'vip-workflow' ) }
onChange={ setDescription }
value={ description }
/>
<Divider margin="1rem" />

<ToggleControl
label={ __( 'This status is restricted', 'vip-workflow' ) }
help={ __(
'Require a specific user or editorial metadata field to advance to the next status.',
<Spacer />
<MetadataSelectFormTokenField
label={ __(
'What editorial fields are required to advance to the next status?',
'vip-workflow'
) }
checked={ isRestrictedSectionVisible }
onChange={ setIsRestrictedSectionVisible }
editorialMetadatas={ metadatas }
requiredMetadatas={ requiredMetadatas }
onMetadatasChanged={ setRequiredMetadatas }
/>

{ isRestrictedSectionVisible && (
<>
<Card>
<CardBody>
<UserSelectFormTokenField
label={ __( 'Allowed users', 'vip-workflow' ) }
help={ __( 'These users are allowed to advance this status.', 'vip-workflow' ) }
requiredUsers={ requiredUsers }
onUsersChanged={ setRequiredUsers }
/>
<MetadataSelectFormTokenField
label={ __( 'Required metadata fields', 'vip-workflow' ) }
help={ __(
'These editorial metadata fields are required to advance this status.',
'vip-workflow'
) }
editorialMetadatas={ metadatas }
requiredMetadatas={ requiredMetadatas }
onMetadatasChanged={ setRequiredMetadatas }
/>
</CardBody>
</Card>
</>
<RadioControl
label="Who can advance to the next status?"
selected={ areRestrictedUsersSet }
options={ [
{ label: 'All users', value: 'all' },
{ label: 'Only specific users', value: 'specific' },
] }
onChange={ value => {
setAreRestrictedUsersSet( value );
if ( value === 'all' ) {
setRequiredUsers( [] );
}
} }
/>
<Spacer />
{ areRestrictedUsersSet !== 'all' && (
<UserSelectFormTokenField
label={ '' }
requiredUsers={ requiredUsers }
onUsersChanged={ setRequiredUsers }
/>
) }

<HStack justify="right" style={ { marginTop: '16px' } }>
Expand Down
6 changes: 1 addition & 5 deletions modules/custom-status/lib/components/user-select-form-token-field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import apiFetch from '@wordpress/api-fetch';
import { FormTokenField, BaseControl } from '@wordpress/components';
import { FormTokenField } from '@wordpress/components';
import { debounce } from '@wordpress/compose';
import { useEffect, useMemo, useState } from '@wordpress/element';
/**
Expand All @@ -9,7 +9,6 @@ import { useEffect, useMemo, useState } from '@wordpress/element';
export default function UserSelectFormTokenField( {
requiredUsers,
onUsersChanged,
help,
...formTokenFieldProps
} ) {
const [ userSearch, setUserSearch ] = useState( '' );
Expand Down Expand Up @@ -92,9 +91,6 @@ export default function UserSelectFormTokenField( {
// Auto-select first match, so that it's possible to press <Enter> and immediately choose it
__experimentalAutoSelectFirstMatch={ true }
/>

{ /* <FormTokenField> doesn't support help text. Provide a BaseControl with the help text instead. */ }
{ help && <BaseControl help={ help }></BaseControl> }
</>
);
}
Expand Down