Merge pull request #346 from boxuk/cm/header-fixes

Fixes for Header layout and notifications

Author: jdamner

.env

@@ -1,2 +1,2 @@
 WORDPRESS_VERSION=6.6 #Also update this var in the GitHub repo for the automations to use the correct WP Version
-NODE_VERSION=$(cat .nvmrc) # Ensure .nvmrc is updated as needed
+NODE_VERSION=22 # Ensure .nvmrc is updated as needed

package-lock.json

@@ -18,6 +18,7 @@
 	"author": "",
 	"license": "ISC",
 	"devDependencies": {
+		"@types/wordpress__editor": "^14.3.1",
 		"@wordpress/block-editor": "^13.0.7",
 		"@wordpress/blocks": "^13.0.3",
 		"@wordpress/components": "^28.0.3",

packages/consent-management/package.json

@@ -2,7 +2,6 @@ import React from 'react';
 
 /* WordPress Deps */
 import { useState } from '@wordpress/element';
-import { EditorNotices, EditorSnackbars } from '@wordpress/editor';
 import { InterfaceSkeleton } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
@@ -80,8 +79,8 @@ export const Main = () => {
 				dataHasLoaded && <Sidebar setCurrentTab={ setCurrentTab } />
 			}
 			content={ Content }
-			notices={ <EditorSnackbars /> }
-			editorNotices={ <EditorNotices /> }
+			notices={ <></> }
+			editorNotices={ <></> }
 		/>
 	);
 };

packages/consent-management/src/admin/Main.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { useDispatch } from '@wordpress/data';
-import { Flex, Button } from '@wordpress/components';
-import { drawerRight } from '@wordpress/icons';
+import { Flex, Button, Spinner } from '@wordpress/components';
+import { drawerRight, check } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
+import { ReactComponent as Icon } from './icons/icon.svg';
+
 import { store } from '../data';
 
 export const Header = ( {
@@ -16,35 +18,69 @@ export const Header = ( {
 	setShowSidebar: ( show: boolean ) => void;
 	hasFinishedResolution?: boolean;
 } ) => {
+	const [ isSaving, setIsSaving ] = useState( false );
+	const [ hasJustSaved, setHasJustSaved ] = useState( false );
+
 	const { save } = useDispatch( store );
 
+	const onSave = () => {
+		setIsSaving( true );
+		save().then( () => {
+			setIsSaving( false );
+			setHasJustSaved( true );
+			setTimeout( () => setHasJustSaved( false ), 3000 );
+		} );
+	};
+
+	const buttonIcon = () => {
+		if ( hasJustSaved ) {
+			return check;
+		}
+		if ( isSaving ) {
+			return <Spinner />;
+		}
+		return null;
+	};
+	const buttonText = () => {
+		if ( hasJustSaved ) {
+			return __( 'Saved', 'boxuk' );
+		}
+		if ( isSaving ) {
+			return __( 'Saving', 'boxuk' );
+		}
+		return __( 'Save', 'boxuk' );
+	};
+
 	return (
-		<div className="editor-header edit-post-header">
-			<Flex
-				direction="row"
-				justify="space-between"
-				align="center"
-				style={ { padding: '1em' } }
-			>
-				<h2>{ __( 'Cookie Consent', 'boxuk' ) }</h2>
+		<div className="editor-header">
+			<div>
+				<Icon style={ { padding: '1em' } } />
+			</div>
+			<h2>{ __( 'Cookie Consent', 'boxuk' ) }</h2>
+			<Flex justify="end">
 				{ hasFinishedResolution && (
-					<Flex direction="row" justify="flex-end" gap="1em">
-						<Button
-							onClick={ () => setShowSidebar( ! showSidebar ) }
-							icon={ drawerRight }
-							label={
-								showSidebar
-									? __( 'Hide Settings', 'boxuk' )
-									: __( 'Show Settings', 'boxuk' )
-							}
-							className={ showSidebar ? 'is-pressed' : '' }
-						/>
-						<Button variant="primary" onClick={ save }>
-							{ __( 'Save', 'boxuk' ) }
-						</Button>
-					</Flex>
+					<Button
+						variant="primary"
+						icon={ buttonIcon() }
+						onClick={ onSave }
+						isBusy={ isSaving }
+					>
+						{ buttonText() }
+					</Button>
 				) }
 			</Flex>
+			<div>
+				<Button
+					onClick={ () => setShowSidebar( ! showSidebar ) }
+					icon={ drawerRight }
+					label={
+						showSidebar
+							? __( 'Hide Settings', 'boxuk' )
+							: __( 'Show Settings', 'boxuk' )
+					}
+					className={ showSidebar ? 'is-pressed' : '' }
+				/>
+			</div>
 		</div>
 	);
 };

packages/consent-management/src/admin/components/Header.tsx

@@ -1,7 +1,6 @@
 /* WordPress deps */
 import { apiFetch } from '@wordpress/data-controls';
-import { resolveSelect, dispatch, select } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
+import { resolveSelect, select } from '@wordpress/data';
 
 /* Internal deps */
 import { store } from '.';
@@ -58,11 +57,6 @@ export function* save() {
 			body: JSON.stringify( payload ),
 		} );
 
-		dispatch( noticesStore ).createSuccessNotice( 'Settings saved.', {
-			isDismissible: true,
-			type: 'snackbar',
-		} );
-
 		return {
 			type: SAVE_SUCCESS,
 			data: response[ SETTINGS_KEY ],
@@ -73,14 +67,6 @@ export function* save() {
 		}
 
 		console.error( { payload, error } ); // eslint-disable-line no-console -- We want to log the error
-		dispatch( noticesStore ).createErrorNotice(
-			'Failed to save settings. ',
-			{
-				isDismissible: true,
-				type: 'snackbar',
-				explicitDismiss: true,
-			}
-		);
 
 		return {
 			type: SAVE_FAILURE,