Skip to content
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

Global Styles: Add link to compare revisions #52829

Closed
wants to merge 3 commits into from
Closed

Global Styles: Add link to compare revisions #52829

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ef2ce3b
Add View revision changes link
cbravobernal Jul 25, 2023
ef02d9c
Commit to checkpoint a working comparison code
cbravobernal Jul 25, 2023
5999e19
Commit to checkpoint, object comparison seems fine, still UI to code …
cbravobernal Jul 25, 2023
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
132 changes: 111 additions & 21 deletions packages/edit-site/src/components/global-styles/screen-revisions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import {
Button,
__experimentalUseNavigator as useNavigator,
__experimentalConfirmDialog as ConfirmDialog,
Spinner,
__experimentalSpacer as Spacer,
MenuItem,
VisuallyHidden,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { useContext, useState, useEffect } from '@wordpress/element';
import {
privateApis as blockEditorPrivateApis,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { external } from '@wordpress/icons';

/**
* Internal dependencies
Expand Down Expand Up @@ -55,6 +59,8 @@ function ScreenRevisions() {
const { setEditorCanvasContainerView } = unlock(
useDispatch( editSiteStore )
);
const [ globalStylesDiffs, setGlobalStylesDiffs ] = useState( [] );
const [ diffModal, setDiffModal ] = useState( false );

useEffect( () => {
if ( editorCanvasContainerView !== 'global-styles-revisions' ) {
Expand All @@ -78,6 +84,7 @@ function ScreenRevisions() {
};

const selectRevision = ( revision ) => {
setGlobalStylesDiffs( deepCompare( revision, userConfig ) );
setGlobalStylesRevision( {
styles: revision?.styles,
settings: revision?.settings,
Expand All @@ -87,6 +94,51 @@ function ScreenRevisions() {
setSelectedRevisionId( revision?.id );
};

function deepCompare(
revisionValue,
configValue,
depth = 0,
parentPath = ''
) {
if (
typeof revisionValue !== 'object' ||
revisionValue === null ||
typeof configValue !== 'object' ||
configValue === null
) {
return [
{
path: parentPath,
revisionValue,
configValue,
},
];
}

const keys1 = Object.keys( revisionValue );
const keys2 = Object.keys( configValue );
const allKeys = new Set( [ ...keys1, ...keys2 ] );

let diffs = [];
for ( const key of allKeys ) {
const path = parentPath ? parentPath + '.' + key : key;
const subDiffs = deepCompare(
revisionValue[ key ],
configValue[ key ],
depth + 1,
path
);
diffs = diffs.concat( subDiffs );
}
diffs = diffs.filter(
( diff ) =>
diff.path.includes( 'behaviors' ) ||
diff.path.includes( 'settings' ) ||
diff.path.includes( 'styles' )
);
return diffs;
}

const isLoadButtonEnabled =
!! globalStylesRevision?.id &&
! areGlobalStyleConfigsEqual( globalStylesRevision, userConfig );
Expand Down Expand Up @@ -118,27 +170,48 @@ function ScreenRevisions() {
/>
{ isLoadButtonEnabled && (
<SidebarFixedBottom>
<Button
variant="primary"
className="edit-site-global-styles-screen-revisions__button"
disabled={
! globalStylesRevision?.id ||
globalStylesRevision?.id === 'unsaved'
}
onClick={ () => {
if ( hasUnsavedChanges ) {
setIsLoadingRevisionWithUnsavedChanges(
true
);
} else {
restoreRevision(
globalStylesRevision
);
<VStack>
<MenuItem
onClick={ () => setDiffModal( true ) }
target="_blank"
icon={ external }
disabled={
! globalStylesRevision?.id ||
globalStylesRevision?.id ===
'unsaved'
}
} }
>
{ __( 'Apply' ) }
</Button>
>
{ __( 'View revision changes' ) }
<VisuallyHidden as="span">
{
/* translators: accessibility text */
__( '(opens in a new tab)' )
}
</VisuallyHidden>
</MenuItem>
<Button
variant="primary"
className="edit-site-global-styles-screen-revisions__button"
disabled={
! globalStylesRevision?.id ||
globalStylesRevision?.id ===
'unsaved'
}
onClick={ () => {
if ( hasUnsavedChanges ) {
setIsLoadingRevisionWithUnsavedChanges(
true
);
} else {
restoreRevision(
globalStylesRevision
);
}
} }
>
{ __( 'Apply' ) }
</Button>
</VStack>
</SidebarFixedBottom>
) }
</div>
Expand All @@ -158,6 +231,23 @@ function ScreenRevisions() {
) }
</ConfirmDialog>
) }
{ diffModal && (
<ConfirmDialog
title={ __( 'Changes:' ) }
isOpen={ diffModal }
confirmButtonText={ __( 'Close modal' ) }
onConfirm={ () => setDiffModal( false ) }
>
<>
<h2>
{ sprintf(
'We will show the %s changes as soon as possible.',
globalStylesDiffs.length
) }
</h2>
</>
</ConfirmDialog>
) }
</>
) : (
<Spacer marginX={ 4 } data-testid="global-styles-no-revisions">
Expand Down