Expand WP notices with header toggle (https://github.com/woocommerce/woocommerce-admin/pull/101)

* Display WP notices behind a button

* Expand WP notices inline when the WP toggle is clicked

* Update setState calls

* Fix string display when only 1 notice is present

* Remove display:none that snuck in during rebase

plugins/woocommerce-admin/client/components/header/index.js

@@ -14,6 +14,7 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import './style.scss';
+import WordPressNotices from './wordpress-notices';
 
 const Header = ( { sections, onToggle, isSidebarOpen } ) => {
 	const _sections = isArray( sections ) ? sections : [ sections ];
@@ -48,14 +49,17 @@ const Header = ( { sections, onToggle, isSidebarOpen } ) => {
 					return <span key={ i }>{ sectionPiece }</span>;
 				} ) }
 			</h1>
-			<div className="woocommerce-header__toggle">
-				<IconButton
-					className="woocommerce-header__button"
-					onClick={ onToggle }
-					icon="clock"
-					label={ __( 'Show Sidebar', 'woo-dash' ) }
-					aria-expanded={ isSidebarOpen }
-				/>
+			<div className="woocommerce-header__buttons">
+				<div className="woocommerce-header__toggle">
+					<IconButton
+						className="woocommerce-header__button"
+						onClick={ onToggle }
+						icon="clock"
+						label={ __( 'Show Sidebar', 'woo-dash' ) }
+						aria-expanded={ isSidebarOpen }
+					/>
+				</div>
+				<WordPressNotices />
 			</div>
 		</div>
 	);

plugins/woocommerce-admin/client/components/header/style.scss

@@ -24,3 +24,9 @@
 		}
 	}
 }
+
+.woocommerce-header__buttons {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}

plugins/woocommerce-admin/client/components/header/wordpress-notices.js

@@ -0,0 +1,111 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { Component } from '@wordpress/element';
+import { IconButton } from '@wordpress/components';
+import { sprintf, _n } from '@wordpress/i18n';
+
+class WordPressNotices extends Component {
+	constructor() {
+		super();
+		this.state = {
+			count: 0,
+			notices: null,
+			noticesOpen: false,
+			hasEventListeners: false,
+		};
+
+		this.onToggle = this.onToggle.bind( this );
+		this.updateCount = this.updateCount.bind( this );
+		this.showNotices = this.showNotices.bind( this );
+		this.hideNotices = this.hideNotices.bind( this );
+	}
+
+	componentDidMount() {
+		const notices = document.getElementById( 'wpadmin-notice-list' );
+		const count = notices.getElementsByClassName( 'notice' ).length;
+		const noticesOpen = notices.classList.contains( 'woocommerce__admin-notice-list-show' );
+
+		// See https://reactjs.org/docs/react-component.html#componentdidmount
+		this.setState( { count, notices, noticesOpen } ); // eslint-disable-line react/no-did-mount-set-state
+
+		// Move WordPress notifications into the main WooDash body
+		const primary = document.getElementById( 'woocommerce-layout__primary' );
+		primary.insertAdjacentElement( 'afterbegin', notices );
+	}
+
+	componentWillUnmount() {
+		document
+			.getElementById( 'wpbody-content' )
+			.insertAdjacentElement( 'afterbegin', this.state.notices );
+
+		const dismissNotices = document.getElementsByClassName( 'notice-dismiss' );
+		Object.keys( dismissNotices ).forEach( function( key ) {
+			dismissNotices[ key ].removeEventListener( 'click', this.updateCount );
+		}, this );
+
+		this.setState( { noticesOpen: false, hasEventListeners: false } );
+		this.hideNotices();
+	}
+
+	updateCount() {
+		this.setState( { count: this.state.count - 1 } );
+	}
+
+	maybeAddDismissEvents() {
+		if ( this.state.hasEventListeners ) {
+			return;
+		}
+
+		const dismiss = document.getElementsByClassName( 'notice-dismiss' );
+		Object.keys( dismiss ).forEach( function( key ) {
+			dismiss[ key ].addEventListener( 'click', this.updateCount );
+		}, this );
+
+		this.setState( { hasEventListeners: true } );
+	}
+
+	showNotices() {
+		this.state.notices.className = 'woocommerce__admin-notice-list-show';
+	}
+
+	hideNotices() {
+		this.state.notices.className = 'woocommerce__admin-notice-list-hide';
+	}
+
+	onToggle() {
+		const { noticesOpen } = this.state;
+
+		if ( noticesOpen ) {
+			this.hideNotices();
+		} else {
+			this.showNotices();
+			this.maybeAddDismissEvents();
+		}
+
+		this.setState( { noticesOpen: ! noticesOpen } );
+	}
+
+	render() {
+		const { count, noticesOpen } = this.state;
+
+		if ( count < 1 ) {
+			return null;
+		}
+
+		return (
+			<IconButton
+				onClick={ this.onToggle }
+				icon="wordpress-alt"
+				label={ sprintf(
+					_n( 'View %d WordPress Notice', 'View %d WordPress Notices', count, 'woo-dash' ),
+					count
+				) }
+				aria-expanded={ noticesOpen }
+			/>
+		);
+	}
+}
+
+export default WordPressNotices;

plugins/woocommerce-admin/client/layout/index.js

@@ -45,7 +45,7 @@ class Layout extends Component {
 		return (
 			<div className={ className }>
 				<Slot name="header" fillChildProps={ headerProps } />
-				<div className="woocommerce-layout__primary">
+				<div className="woocommerce-layout__primary" id="woocommerce-layout__primary">
 					<Notices />
 					<div className="woocommerce-layout__main">
 						<Controller { ...this.props } />

plugins/woocommerce-admin/client/stylesheets/_wpadmin-reset.scss

@@ -51,7 +51,19 @@
 }
 
 .woocommerce__admin-notice-list-hide {
-	display: none;
+	opacity: 0;
+	height: 0;
+	overflow: hidden;
+}
+
+.woocommerce__admin-notice-list-show {
+	opacity: 1;
+	height: auto;
+	transition: all 1s ease-in-out;
+}
+
+.wp-header-end {
+	margin: 0;
 }
 
 #wpfooter {

plugins/woocommerce-admin/lib/admin.php

@@ -115,7 +115,7 @@ function woo_dash_admin_before_notices() {
 	if ( ! woo_dash_is_admin_page() ) {
 		return;
 	}
-	echo '<div class="woocommerce__admin-notice-list-hide">';
+	echo '<div class="woocommerce__admin-notice-list-hide" id="wpadmin-notice-list">';
 	echo '<div class="wp-header-end"></div>'; // https://github.com/WordPress/WordPress/blob/f6a37e7d39e2534d05b9e542045174498edfe536/wp-admin/js/common.js#L737
 }
 add_action( 'admin_notices', 'woo_dash_admin_before_notices', 0 );