Table: update columns visibility on headers change (https://github.com/woocommerce/woocommerce-admin/pull/1846)

* Typos

* Table: update columns visibility on headers change

* Make sure initial user pref columns are loaded in all reports

* Return early filterShownHeaders when hiddenKeys is an empty array

* Undo 'headers', 'prevHeaders' order switch

plugins/woocommerce-admin/client/analytics/components/report-table/index.js

@@ -50,7 +50,7 @@ class ReportTable extends Component {
 	}
 
 	filterShownHeaders( headers, hiddenKeys ) {
-		if ( ! hiddenKeys ) {
+		if ( ! hiddenKeys || ! hiddenKeys.length ) {
 			return headers;
 		}
 
@@ -200,8 +200,19 @@ export default compose(
 			tableQuery,
 			columnPrefsKey,
 		} = props;
+
+		let userPrefColumns = [];
+		if ( columnPrefsKey ) {
+			const { getCurrentUserData } = select( 'wc-api' );
+			const userData = getCurrentUserData();
+
+			userPrefColumns = userData[ columnPrefsKey ];
+		}
+
 		if ( isRequesting || ( query.search && ! ( query[ endpoint ] && query[ endpoint ].length ) ) ) {
-			return {};
+			return {
+				userPrefColumns,
+			};
 		}
 		const chartEndpoint = [ 'variations', 'categories' ].includes( endpoint )
 			? 'products'
@@ -212,20 +223,12 @@ export default compose(
 		const queriedTableData = tableData || getReportTableData( endpoint, query, select, tableQuery );
 		const extendedTableData = extendTableData( select, props, queriedTableData );
 
-		const selectProps = {
+		return {
 			primaryData,
 			tableData: extendedTableData,
 			query: { ...tableQuery, ...query },
+			userPrefColumns,
 		};
-
-		if ( columnPrefsKey ) {
-			const { getCurrentUserData } = select( 'wc-api' );
-			const userData = getCurrentUserData();
-
-			selectProps.userPrefColumns = userData[ columnPrefsKey ];
-		}
-
-		return selectProps;
 	} ),
 	withDispatch( dispatch => {
 		const { updateCurrentUserData } = dispatch( 'wc-api' );

plugins/woocommerce-admin/client/wc-api/user/selectors.js

@@ -8,8 +8,8 @@ import { DEFAULT_REQUIREMENT } from '../constants';
 const getCurrentUserData = ( getResource, requireResource ) => (
 	requirement = DEFAULT_REQUIREMENT
 ) => {
-	const initalState = wcSettings.currentUserData;
-	return requireResource( requirement, 'current-user-data' ).data || initalState;
+	const initialState = wcSettings.currentUserData;
+	return requireResource( requirement, 'current-user-data' ).data || initialState;
 };
 
 export default {

plugins/woocommerce-admin/packages/components/src/table/index.js

@@ -24,7 +24,7 @@ import { getIdsFromQuery, getSearchWords, updateQueryString } from '@woocommerce
  */
 import Card from '../card';
 import CompareButton from '../filters/compare/button';
-import DowloadIcon from './download-icon';
+import DownloadIcon from './download-icon';
 import EllipsisMenu from '../ellipsis-menu';
 import MenuItem from '../ellipsis-menu/menu-item';
 import MenuTitle from '../ellipsis-menu/menu-title';
@@ -46,7 +46,7 @@ class TableCard extends Component {
 	constructor( props ) {
 		super( props );
 		const { query, compareBy } = this.props;
-		const showCols = props.headers.map( ( { key, hiddenByDefault } ) => ! hiddenByDefault && key ).filter( Boolean );
+		const showCols = this.getShowCols( props.headers );
 		const selectedRows = query.filter ? getIdsFromQuery( query[ compareBy ] ) : [];
 
 		this.state = { showCols, selectedRows };
@@ -58,8 +58,8 @@ class TableCard extends Component {
 		this.selectAllRows = this.selectAllRows.bind( this );
 	}
 
-	componentDidUpdate( { headers: prevHeaders, isLoading: prevIsLoading, query: prevQuery } ) {
-		const { compareBy, headers, isLoading, onColumnsChange, query } = this.props;
+	componentDidUpdate( { headers: prevHeaders, query: prevQuery } ) {
+		const { compareBy, headers, onColumnsChange, query } = this.props;
 		const { showCols } = this.state;
 
 		if ( query.filter || prevQuery.filter ) {
@@ -73,10 +73,10 @@ class TableCard extends Component {
 				/* eslint-enable react/no-did-update-set-state */
 			}
 		}
-		if ( ! isLoading && prevIsLoading && ! isEqual( headers, prevHeaders ) ) {
+		if ( ! isEqual( headers, prevHeaders ) ) {
 			/* eslint-disable react/no-did-update-set-state */
 			this.setState( {
-				showCols: headers.map( ( { key, hiddenByDefault } ) => ! hiddenByDefault && key ).filter( Boolean ),
+				showCols: this.getShowCols( headers ),
 			} );
 			/* eslint-enable react/no-did-update-set-state */
 		}
@@ -91,6 +91,10 @@ class TableCard extends Component {
 		}
 	}
 
+	getShowCols( headers ) {
+		return headers.map( ( { key, hiddenByDefault } ) => ! hiddenByDefault && key ).filter( Boolean );
+	}
+
 	getVisibleHeaders() {
 		const { headers } = this.props;
 		const { showCols } = this.state;
@@ -317,7 +321,7 @@ class TableCard extends Component {
 							onClick={ this.onClickDownload }
 							isLink
 						>
-							<DowloadIcon />
+							<DownloadIcon />
 							<span className="woocommerce-table__download-button__label">
 								{ labels.downloadButton || __( 'Download', 'woocommerce-admin' ) }
 							</span>