Skip to content

Commit

Permalink
Boost: make the setting modules work more consistently (#40224)
Browse files Browse the repository at this point in the history 
* Update minification modules, clean up

* changelog

* Remove the InputLabel, not used any more

* Reset the text input value if closed (and opened)

* Add Tracks events to minification modules

* Add events in comments and minify toggle will say "panel"

* Don't show "Hide" to hide minify modules. Others don't

There's an Up chevron for that.

* Remove "closeEditText" from imageCDN quality meta.

* Update CSS to fix concatenate panels

* Update so it works with other modules.

* Allow it to use Chevrons as well as pencil
* External state for enclosing module to track expanded status.
* Set a Tracks event when it's toggled open/closed.

* Use CollapsibleMeta component to display meta information

* Saving forms will close form so add Tracks event there.
* Pass the same event to component to do the same

* Quality settings don't use chevrons for toggle

* Move collapsible meta features/ui/ and adjusted paths to load it

* Use the state to record the toggle Tracks event

* Moving Page Cache to CollapsibleMeta

* Add colouring of the chevron, using that instead of pencil

* Update so it handles modules more consistently.

* Add extraButtons prop for the Clear Cache button.
* Replaced Header for most modules with headerText and summary
* Renamed editText to toggleText
* Added onToggleHandler, a callback called when the section is toggled
  up/down.

* Renamed editText to toggleText, remove useChevron prop

* The Quality module uses the up/down chevrons now

* * Use callback instead of state to update minify exceptions

* Add wrapper div, like Page Cache module.

* Style the minify title text correctly

* Remove a bunch of CSS that's not needed here

* Update for changes to CollapsibleModule

* Use extraButtons and headerText instead of Header
* Add Exceptions title back in.
* Don't use external isExpanded state any more.

* Fix up the logging status messages

* Press Return or Enter to submit the concatenate exceptions

* Minor edits to force a failed rebuild

* Break it up, the optimizer is breaking things

* Use this wait function like PageCache uses

* This started to cause a linter error just now.

* Pass the data-testid to the CollapsibleMeta to display

This should fix the concatenate tests that were failing

* Revert this as I figured out where the selector went

* Describe what modules were changed

* Try to fix tests

* Remove this, not needed as it's on the wrapper now

* Remove this wrapper, the div wraps this code.

* Use the original "Exclude" strings that will be translated.

* Update projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.tsx

Add the Number Pad Enter so it can be used to save exceptions.

Co-authored-by: Peter Petrov <[email protected]>

* Update projects/plugins/boost/app/assets/src/js/features/page-cache/meta/meta.tsx

Align closing bracket with opening one.

Co-authored-by: Peter Petrov <[email protected]>

* Remove most of this, it's not good

* Remove, it's not used anywhere

* Replace useEffect with a single function, props @dilirity

* Add default values and handle extraButtons better

* Update the CollapsibleMeta Storybook

* The title points at Features/UI now

* Only style the up/down chevrons green

* Trying this because linter is showing an odd error.

Error:   58:46  error  Replace `⏎↹↹↹` with `·`  prettier/prettier

* Add default value for onToggleHandler

* Change this so svg files in icons are coloured green

* This style isn't used any more, remove it

---------

Co-authored-by: Peter Petrov <[email protected]>
  • Loading branch information
@donnchawp @dilirity
donnchawp and dilirity authored Dec 5, 2024
1 parent c5d6a4b commit 5c12e7a
Show file tree
Hide file tree
Showing 12 changed files with 334 additions and 253 deletions.
52 changes: 0 additions & 52 deletions .../plugins/boost/app/assets/src/js/features/image-cdn/collapsible-meta/collapsible-meta.tsx
View file

This file was deleted.

5 changes: 2 additions & 3 deletions .../plugins/boost/app/assets/src/js/features/image-cdn/quality-settings/quality-settings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import CollapsibleMeta from '../collapsible-meta/collapsible-meta';
import CollapsibleMeta from '$features/ui/collapsible-meta/collapsible-meta';
import { __, sprintf } from '@wordpress/i18n';
import styles from './quality-settings.module.scss';
import { IconTooltip } from '@automattic/jetpack-components';
Expand Down Expand Up @@ -50,8 +50,7 @@ const QualitySettings = ( { isPremium }: QualitySettingsProps ) => {
imageCdnQuality && (
<ModuleSubsection>
<CollapsibleMeta
editText={ __( 'Adjust Quality', 'jetpack-boost' ) }
closeEditText={ __( 'Hide', 'jetpack-boost' ) }
toggleText={ __( 'Adjust Quality', 'jetpack-boost' ) }
header={ <Header /> }
summary={ <Summary imageCdnQuality={ imageCdnQuality } /> }
>
Expand Down
163 changes: 102 additions & 61 deletions projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,119 @@
@import "$css/main/variables";
@import "$css/main/mixins";

.minify-meta {
align-items: flex-start;
display: flex;
flex-direction: row;
.wrapper {
font-size: 14px;
line-height: 22px;

@include breakpoint(xs) {
display: block;
.summary {
flex-grow: 1;
}
}

.summary {
flex-grow: 1;
}
.minify-meta {
align-items: flex-start;
display: flex;
flex-direction: row;
font-size: 14px;
line-height: 22px;

.manage-excludes {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
@include breakpoint(xs) {
display: block;
}
}

.manage-excludes label {
display: block;
text-align: left;
margin-bottom: 16px;
font-weight: bold;
width: 100%;
}
.section {
margin-top: 16px;
padding: 16px;
border-radius: 4px;
background-color: var(--gray-0);

.manage-excludes input[type="text"] {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid $gray_10;
margin-bottom: 16px;
}
.title {
margin-bottom: 16px;
font-size: 16px;
line-height: 1;
font-weight: 600;
}
}

.buttons-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100%;
}
.manage-excludes {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;

.buttons-container button {
margin-right: 10px;
padding: 8px 24px;
border: 1px solid $primary-black;
border-radius: 4px;
cursor: pointer;
color: $primary-black;
}
.help {
font-size: 14px;
line-height: 1.5;
color: var( --gray-60 );
font-weight: 400;
}
}

.buttons-container button:first-child {
background-color: $primary-black;
color: $primary-white;
}
.manage-excludes label {
display: block;
text-align: left;
margin-bottom: 16px;
font-weight: 600;
width: 100%;
font-size: 16px;
line-height: 1;
}

.buttons-container button:last-child {
margin-right: 0;
background-color: transparent;
}
.manage-excludes span {
display: block;
text-align: left;
width: 100%;
margin-bottom: 16px;
line-height: 1.5;
}

.buttons-container button[disabled] {
border-color: $gray-5;
background-color: $gray-5;
color: $gray-20;
cursor: not-allowed;
}
.manage-excludes input[type="text"] {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid $gray_10;
margin-bottom: 16px;
}

.buttons-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100%;

button {
margin-right: 10px;
padding: 8px 24px;
border: 1px solid $primary-black;
border-radius: 4px;
cursor: pointer;
color: $primary-black;

.edit-button svg {
fill: $jetpack-green;
}
}
button[disabled] {
border-color: $gray-5;
background-color: $gray-5;
color: $gray-20;
cursor: not-allowed;
}
button:not([disabled]) {
background-color: $primary-black;
color: $primary-white;
}
button:not([disabled]):hover {
background-color: lighten($primary-black, 10%);
}
}

.edit-button svg {
fill: $jetpack-green;
}

.sub-header {
font-size: 16px;
line-height: 1;
color: var( --gray-60 );
font-weight: 400;
padding-bottom: 2px;
}
}
98 changes: 61 additions & 37 deletions projects/plugins/boost/app/assets/src/js/features/minify-meta/minify-meta.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,97 @@
import { useEffect, useState } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { type Props, useMetaQuery } from '$lib/stores/minify';
import { recordBoostEvent } from '$lib/utils/analytics';
import styles from './minify-meta.module.scss';
import { Button } from '@automattic/jetpack-components';
import Pencil from '$svg/pencil';
import CollapsibleMeta from '$features/ui/collapsible-meta/collapsible-meta';

const MetaComponent = ( { inputLabel, buttonText, placeholder, datasyncKey }: Props ) => {
const MetaComponent = ( { buttonText, placeholder, datasyncKey }: Props ) => {
const [ values, updateValues ] = useMetaQuery( datasyncKey );
const [ inputValue, setInputValue ] = useState( () => values.join( ', ' ) );
const [ isEditing, setIsEditing ] = useState( false );

const concatenateType = datasyncKey === 'minify_js_excludes' ? 'js' : 'css';
const togglePanelTracksEvent = 'concatenate_' + concatenateType + '_panel_toggle'; // possible events: concatenate_js_panel_toggle, concatenate_css_panel_toggle

useEffect( () => {
setInputValue( values.join( ', ' ) );
}, [ values ] );

const onToggleHandler = ( isExpanded: boolean ) => {
if ( ! isExpanded ) {
setInputValue( values.join( ', ' ) );
}
};

function save() {
/*
* Possible Events:
* concatenate_js_exceptions_save_clicked
* concatenate_css_exceptions_save_clicked
*/
recordBoostEvent( 'concatenate_' + concatenateType + '_exceptions_save_clicked', {} );

updateValues( inputValue );
setIsEditing( false );
}

const htmlId = `jb-minify-meta-${ datasyncKey }`;

return (
<div className={ styles[ 'minify-meta' ] } data-testid={ `meta-${ datasyncKey }` }>
{ isEditing ? (
const summary =
values.length > 0
? /* Translators: %s refers to the list of excluded items. */
sprintf( __( 'Except: %s', 'jetpack-boost' ), values.join( ', ' ) )
: '';

// Be explicit about this because the optimizer breaks the linter otherwise.
let subHeaderText = '';
if ( datasyncKey === 'minify_js_excludes' ) {
subHeaderText = __( 'Exclude JS Strings:', 'jetpack-boost' );
}

if ( datasyncKey === 'minify_css_excludes' ) {
subHeaderText = __( 'Exclude CSS Strings:', 'jetpack-boost' );
}

const content = (
<div className={ styles.body }>
<div className={ styles.section }>
<div className={ styles.title }>{ __( 'Exceptions', 'jetpack-boost' ) }</div>
<div className={ styles[ 'manage-excludes' ] }>
<label htmlFor={ htmlId }>{ inputLabel }</label>
<span className={ styles[ 'sub-header' ] }>{ subHeaderText }</span>
<input
type="text"
value={ inputValue }
placeholder={ placeholder }
id={ htmlId }
onChange={ e => setInputValue( e.target.value ) }
onKeyDown={ e => {
if ( e.key === 'Enter' || e.key === 'NumpadEnter' ) {
save();
}
} }
/>
<span className={ styles.help }>
{ __( 'Use a comma (,) to separate the strings.', 'jetpack-boost' ) }
</span>
<div className={ styles[ 'buttons-container' ] }>
<button disabled={ values.join( ', ' ) === inputValue } onClick={ save }>
{ __( 'Save', 'jetpack-boost' ) }
</button>
<button onClick={ () => setIsEditing( false ) }>
{ __( 'Cancel', 'jetpack-boost' ) }
</button>
</div>
</div>
) : (
<>
<div className={ styles.summary }>
{ values.length > 0 && (
<div className="successes">
{ sprintf(
/* Translators: %s refers to the list of excluded items. */
__( 'Except: %s', 'jetpack-boost' ),
values.join( ', ' )
) }
</div>
) }
</div>
</div>
</div>
);

<Button
variant="link"
size="small"
weight="regular"
className={ styles[ 'edit-button' ] }
onClick={ () => setIsEditing( true ) }
icon={ <Pencil /> }
>
{ buttonText }
</Button>
</>
) }
return (
<div className={ styles.wrapper } data-testid={ `meta-${ datasyncKey }` }>
<CollapsibleMeta
headerText={ summary }
toggleText={ buttonText }
tracksEvent={ togglePanelTracksEvent }
onToggleHandler={ onToggleHandler }
>
{ content }
</CollapsibleMeta>
</div>
);
};
Expand Down
Loading

0 comments on commit 5c12e7a

Please sign in to comment.