Merge pull request woocommerce/woocommerce-admin#2194 from woocommerce/fix/dashboard-issues

Fix/dashboard issues

plugins/woocommerce-admin/client/dashboard/README.md

@@ -46,3 +46,4 @@ The component will get the following props:
 - `path` (string): The exact path for this view.
 - `query` (object): The query string for the current view, can be used to read current preferences for time periods or chart interval/type.
 - `title` (string): Title of the section according to the default settings or the user preferences if they had made any modification.
+- `controls` (react component): Controls to move a section up/down or remove it from view to be rendered inside the EllipsisMenu. 

plugins/woocommerce-admin/client/dashboard/components/section-controls/style.scss

@@ -1,14 +0,0 @@
-/** @format */
-
-.woocommerce-section-controls {
-	border-top: $border-width solid $core-grey-light-500;
-
-	.dashicon {
-		margin: 0 $gap-smaller 0 0;
-		vertical-align: bottom;
-	}
-
-	.woocommerce-ellipsis-menu__item {
-		padding-bottom: 10px;
-	}
-}

plugins/woocommerce-admin/client/dashboard/customizable.js

@@ -19,7 +19,7 @@ import { H, ReportFilters } from '@woocommerce/components';
  */
 import './style.scss';
 import defaultSections from './default-sections';
-import Section from './components/section';
+import Section from './section';
 import withSelect from 'wc-api/with-select';
 
 class CustomizableDashboard extends Component {
@@ -109,9 +109,23 @@ class CustomizableDashboard extends Component {
 	onMove( index, change ) {
 		const sections = [ ...this.state.sections ];
 		const movedSection = sections.splice( index, 1 ).shift();
-		sections.splice( index + change, 0, movedSection );
+		const newIndex = index + change;
 
-		this.updateSections( sections );
+		// Figure out the index of the skipped section.
+		const nextJumpedSectionIndex = change < 0 ? newIndex : newIndex - 1;
+
+		if (
+			sections[ nextJumpedSectionIndex ].isVisible || // Is the skipped section visible?
+			index === 0 || // Will this be the first element?
+			index === sections.length - 1 // Will this be the last element?
+		) {
+			// Yes, lets insert.
+			sections.splice( newIndex, 0, movedSection );
+			this.updateSections( sections );
+		} else {
+			// No, lets try the next one.
+			this.onMove( index, change + change );
+		}
 	}
 
 	renderAddMore() {
@@ -163,29 +177,34 @@ class CustomizableDashboard extends Component {
 	render() {
 		const { query, path } = this.props;
 		const { sections } = this.state;
-		const visibleSections = sections.filter( section => section.isVisible );
+		const visibleSectionKeys = sections
+			.filter( section => section.isVisible )
+			.map( section => section.key );
 
 		return (
 			<Fragment>
 				<H>{ __( 'Customizable Dashboard', 'woocommerce-admin' ) }</H>
 				<ReportFilters query={ query } path={ path } />
-				{ visibleSections.map( ( section, index ) => {
+				{ sections.map( ( section, index ) => {
-					return (
+					if ( section.isVisible ) {
-						<Section
+						return (
-							component={ section.component }
+							<Section
-							hiddenBlocks={ section.hiddenBlocks }
+								component={ section.component }
-							key={ section.key }
+								hiddenBlocks={ section.hiddenBlocks }
-							onChangeHiddenBlocks={ this.onChangeHiddenBlocks( section.key ) }
+								key={ section.key }
-							onTitleUpdate={ this.onSectionTitleUpdate( section.key ) }
+								onChangeHiddenBlocks={ this.onChangeHiddenBlocks( section.key ) }
-							path={ path }
+								onTitleUpdate={ this.onSectionTitleUpdate( section.key ) }
-							query={ query }
+								path={ path }
-							title={ section.title }
+								query={ query }
-							onMove={ partial( this.onMove, index ) }
+								title={ section.title }
-							onRemove={ this.toggleVisibility( section.key ) }
+								onMove={ partial( this.onMove, index ) }
-							isFirst={ 0 === index }
+								onRemove={ this.toggleVisibility( section.key ) }
-							isLast={ visibleSections.length === index + 1 }
+								isFirst={ section.key === visibleSectionKeys[ 0 ] }
-						/>
+								isLast={ section.key === visibleSectionKeys[ visibleSectionKeys.length - 1 ] }
-					);
+							/>
+						);
+					}
+					return null;
 				} ) }
 				{ this.renderAddMore() }
 			</Fragment>

plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js

@@ -24,7 +24,6 @@ import ChartBlock from './block';
 import { getChartFromKey, uniqCharts } from './config';
 import withSelect from 'wc-api/with-select';
 import './style.scss';
-import SectionControls from 'dashboard/components/section-controls';
 
 class DashboardCharts extends Component {
 	constructor( props ) {
@@ -57,6 +56,7 @@ class DashboardCharts extends Component {
 			onTitleChange,
 			onToggleHiddenBlock,
 			titleInput,
+			controls: Controls,
 		} = this.props;
 
 		return (
@@ -89,13 +89,15 @@ class DashboardCharts extends Component {
 								</MenuItem>
 							);
 						} ) }
-						<SectionControls
+						{ window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] && (
-							onToggle={ onToggle }
+							<Controls
-							onMove={ onMove }
+								onToggle={ onToggle }
-							onRemove={ onRemove }
+								onMove={ onMove }
-							isFirst={ isFirst }
+								onRemove={ onRemove }
-							isLast={ isLast }
+								isFirst={ isFirst }
-						/>
+								isLast={ isLast }
+							/>
+						) }
 					</Fragment>
 				) }
 			/>

plugins/woocommerce-admin/client/dashboard/dashboard-charts/style.scss

@@ -16,3 +16,16 @@
 		margin: 0;
 	}
 }
+
+.woocommerce-section-controls {
+	border-top: $border-width solid $core-grey-light-500;
+
+	.dashicon {
+		margin: 0 $gap-smaller 0 0;
+		vertical-align: bottom;
+	}
+
+	.woocommerce-ellipsis-menu__item {
+		padding-bottom: 10px;
+	}
+}

plugins/woocommerce-admin/client/dashboard/leaderboards/index.js

@@ -19,7 +19,6 @@ import { EllipsisMenu, MenuItem, MenuTitle, SectionHeader } from '@woocommerce/c
  */
 import Leaderboard from 'analytics/components/leaderboard';
 import withSelect from 'wc-api/with-select';
-import SectionControls from 'dashboard/components/section-controls';
 import './style.scss';
 
 class Leaderboards extends Component {
@@ -51,6 +50,7 @@ class Leaderboards extends Component {
 			onTitleChange,
 			onToggleHiddenBlock,
 			titleInput,
+			controls: Controls,
 		} = this.props;
 		const { rowsPerTable } = this.state;
 
@@ -97,13 +97,15 @@ class Leaderboards extends Component {
 							} ) ) }
 							onChange={ this.setRowsPerTable }
 						/>
-						<SectionControls
+						{ window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] && (
-							onToggle={ onToggle }
+							<Controls
-							onMove={ onMove }
+								onToggle={ onToggle }
-							onRemove={ onRemove }
+								onMove={ onMove }
-							isFirst={ isFirst }
+								onRemove={ onRemove }
-							isLast={ isLast }
+								isFirst={ isFirst }
-						/>
+								isLast={ isLast }
+							/>
+						) }
 					</Fragment>
 				) }
 			/>

plugins/woocommerce-admin/client/dashboard/section-controls.js

@@ -10,7 +10,6 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import { MenuItem } from '@woocommerce/components';
-import './style.scss';
 
 class SectionControls extends Component {
 	constructor( props ) {
@@ -36,10 +35,6 @@ class SectionControls extends Component {
 	render() {
 		const { onRemove, isFirst, isLast } = this.props;
 
-		if ( ! window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] ) {
-			return null;
-		}
-
 		return (
 			<div className="woocommerce-section-controls">
 				{ ! isFirst && (

plugins/woocommerce-admin/client/dashboard/section.js

@@ -5,6 +5,11 @@
 import { Component } from '@wordpress/element';
 import { xor } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
+import SectionControls from './section-controls';
+
 export default class Section extends Component {
 	constructor( props ) {
 		super( props );
@@ -57,6 +62,7 @@ export default class Section extends Component {
 					onTitleBlur={ this.onTitleBlur }
 					onToggleHiddenBlock={ this.onToggleHiddenBlock }
 					titleInput={ titleInput }
+					controls={ SectionControls }
 					{ ...props }
 				/>
 			</div>

plugins/woocommerce-admin/client/dashboard/store-performance/index.js

@@ -31,7 +31,6 @@ import {
 	SummaryNumber,
 } from '@woocommerce/components';
 import withSelect from 'wc-api/with-select';
-import SectionControls from 'dashboard/components/section-controls';
 import './style.scss';
 
 class StorePerformance extends Component {
@@ -47,6 +46,7 @@ class StorePerformance extends Component {
 			onTitleChange,
 			onToggleHiddenBlock,
 			titleInput,
+			controls: Controls,
 		} = this.props;
 
 		return (
@@ -83,13 +83,15 @@ class StorePerformance extends Component {
 								</MenuItem>
 							);
 						} ) }
-						<SectionControls
+						{ window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] && (
-							onToggle={ onToggle }
+							<Controls
-							onMove={ onMove }
+								onToggle={ onToggle }
-							onRemove={ onRemove }
+								onMove={ onMove }
-							isFirst={ isFirst }
+								onRemove={ onRemove }
-							isLast={ isLast }
+								isFirst={ isFirst }
-						/>
+								isLast={ isLast }
+							/>
+						) }
 					</Fragment>
 				) }
 			/>