Build: Move `lib/nav-utils` and `lib/history` to `@woocommerce/navigation` (https://github.com/woocommerce/woocommerce-admin/pull/763)

* Move nav-utils and history to new package

* Update config to build and use new navigation package

* Update all imports to use new navigation package

* Remove unnecessary README

* Update nav-utils path

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

@@ -7,10 +7,10 @@ import { Component } from '@wordpress/element';
 import PropTypes from 'prop-types';
 
 /**
- * Internal dependencies
+ * WooCommerce dependencies
  */
 import { EmptyContent } from '@woocommerce/components';
-import { getAdminLink } from 'lib/nav-utils';
+import { getAdminLink } from '@woocommerce/navigation';
 
 class ReportError extends Component {
 	render() {

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

@@ -14,12 +14,12 @@ import PropTypes from 'prop-types';
  */
 import { formatCurrency } from '@woocommerce/currency';
 import { getDateParamsFromQuery } from '@woocommerce/date';
+import { getNewPath } from '@woocommerce/navigation';
 import { SummaryList, SummaryListPlaceholder, SummaryNumber } from '@woocommerce/components';
 
 /**
  * Internal dependencies
  */
-import { getNewPath } from 'lib/nav-utils';
 import { getSummaryNumbers } from 'store/reports/utils';
 import { numberFormat } from 'lib/number';
 import ReportError from 'analytics/components/report-error';

plugins/woocommerce-admin/client/analytics/report/orders/table.js

@@ -12,19 +12,19 @@ import { get, map, orderBy } from 'lodash';
 /**
  * WooCommerce dependencies
  */
-import { Link, OrderStatus, TableCard, ViewMoreList } from '@woocommerce/components';
-import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
 import {
 	appendTimestamp,
 	getCurrentDates,
 	getIntervalForQuery,
 	getDateFormatsForInterval,
 } from '@woocommerce/date';
+import { Link, OrderStatus, TableCard, ViewMoreList } from '@woocommerce/components';
+import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
+import { getAdminLink, onQueryChange } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
  */
-import { getAdminLink, onQueryChange } from 'lib/nav-utils';
 import ReportError from 'analytics/components/report-error';
 import { QUERY_DEFAULTS } from 'store/constants';
 import { getReportChartData, getFilterQuery } from 'store/reports/utils';

plugins/woocommerce-admin/client/analytics/report/products/table.js

@@ -11,14 +11,14 @@ import { get, map, orderBy } from 'lodash';
 /**
  * WooCommerce dependencies
  */
+import { appendTimestamp, getCurrentDates } from '@woocommerce/date';
 import { Link, TableCard } from '@woocommerce/components';
 import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
-import { appendTimestamp, getCurrentDates } from '@woocommerce/date';
+import { getNewPath, getTimeRelatedQuery, onQueryChange } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
  */
-import { getNewPath, getTimeRelatedQuery, onQueryChange } from 'lib/nav-utils';
 import ReportError from 'analytics/components/report-error';
 import { getFilterQuery, getReportChartData } from 'store/reports/utils';
 import { QUERY_DEFAULTS } from 'store/constants';

plugins/woocommerce-admin/client/analytics/report/revenue/table.js

@@ -12,19 +12,19 @@ import { get, map } from 'lodash';
 /**
  * WooCommerce dependencies
  */
-import { Link, TableCard } from '@woocommerce/components';
-import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
 import {
 	appendTimestamp,
 	getCurrentDates,
 	getDateFormatsForInterval,
 	getIntervalForQuery,
 } from '@woocommerce/date';
+import { Link, TableCard } from '@woocommerce/components';
+import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
+import { onQueryChange } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
  */
-import { onQueryChange } from 'lib/nav-utils';
 import ReportError from 'analytics/components/report-error';
 import { QUERY_DEFAULTS } from 'store/constants';
 

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

@@ -2,7 +2,6 @@
 /**
  * External dependencies
  */
-
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
@@ -14,15 +13,19 @@ import { interpolateViridis as d3InterpolateViridis } from 'd3-scale-chromatic';
 import { formatDefaultLocale as d3FormatDefaultLocale } from 'd3-format';
 import Gridicon from 'gridicons';
 
+/**
+ * WooCommerce dependencies
+ */
+import { updateQueryString } from '@woocommerce/navigation';
+
 /**
  * Internal dependencies
  */
 import D3Chart from './charts';
+import { gap, gaplarge } from 'stylesheets/abstracts/_variables.scss';
+import { H, Section } from 'components/section';
 import Legend from './legend';
 import { WIDE_BREAKPOINT } from './utils';
-import { H, Section } from 'components/section';
-import { gap, gaplarge } from 'stylesheets/abstracts/_variables.scss';
-import { updateQueryString } from 'lib/nav-utils';
 
 d3FormatDefaultLocale( {
 	decimal: '.',

plugins/woocommerce-admin/client/components/filters/advanced/index.js

@@ -10,6 +10,11 @@ import PropTypes from 'prop-types';
 import Gridicon from 'gridicons';
 import interpolateComponents from 'interpolate-components';
 
+/**
+ * WooCommerce dependencies
+ */
+import { getNewPath } from '@woocommerce/navigation';
+
 /**
  * Internal dependencies
  */
@@ -22,7 +27,6 @@ import {
 	getQueryFromActiveFilters,
 	getDefaultOptionValue,
 } from './utils';
-import { getNewPath } from 'lib/nav-utils';
 import './style.scss';
 
 const matches = [

plugins/woocommerce-admin/client/components/filters/compare/index.js

@@ -8,12 +8,16 @@ import { Button } from '@wordpress/components';
 import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
 
+/**
+ * WooCommerce dependencies
+ */
+import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation';
+
 /**
  * Internal dependencies
  */
 import Card from 'components/card';
 import CompareButton from './button';
-import { getIdsFromQuery, updateQueryString } from 'lib/nav-utils';
 import Search from 'components/search';
 
 /**

plugins/woocommerce-admin/client/components/filters/date/index.js

@@ -11,13 +11,13 @@ import PropTypes from 'prop-types';
  * WooCommerce dependencies
  */
 import { getCurrentDates, getDateParamsFromQuery, isoDateFormat } from '@woocommerce/date';
+import { updateQueryString } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
  */
 import DatePickerContent from './content';
 import DropdownButton from 'components/dropdown-button';
-import { updateQueryString } from 'lib/nav-utils';
 import './style.scss';
 
 const shortDateFormat = __( 'MM/DD/YYYY', 'wc-admin' );

plugins/woocommerce-admin/client/components/filters/filter/index.js

@@ -9,13 +9,17 @@ import { Component } from '@wordpress/element';
 import { find, partial, last, get, includes } from 'lodash';
 import PropTypes from 'prop-types';
 
+/**
+ * WooCommerce dependencies
+ */
+import { getTimeRelatedQuery, updateQueryString } from '@woocommerce/navigation';
+
 /**
  * Internal dependencies
  */
 import AnimationSlider from 'components/animation-slider';
 import DropdownButton from 'components/dropdown-button';
 import Search from 'components/search';
-import { getTimeRelatedQuery, updateQueryString } from 'lib/nav-utils';
 import { flatenFilters } from './utils';
 import './style.scss';
 

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

@@ -3,13 +3,13 @@
  * External dependencies
  */
 import { Component } from '@wordpress/element';
-import PropTypes from 'prop-types';
 import { Link as RouterLink } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
 /**
- * Internal dependencies
+ * WooCommerce dependencies
  */
-import { getAdminLink } from 'lib/nav-utils';
+import { getAdminLink } from '@woocommerce/navigation';
 
 /**
  * Use `Link` to create a link to another resource. It accepts a type to automatically

plugins/woocommerce-admin/client/components/search/autocompleters/coupons.js

@@ -4,11 +4,15 @@
  */
 import apiFetch from '@wordpress/api-fetch';
 
+/**
+ * WooCommerce dependencies
+ */
+import { stringifyQuery } from '@woocommerce/navigation';
+
 /**
  * Internal dependencies
  */
 import { computeSuggestionMatch } from './utils';
-import { stringifyQuery } from 'lib/nav-utils';
 import { NAMESPACE } from 'store/constants';
 
 /**

plugins/woocommerce-admin/client/components/search/autocompleters/product-cat.js

@@ -4,11 +4,15 @@
  */
 import apiFetch from '@wordpress/api-fetch';
 
+/**
+ * WooCommerce dependencies
+ */
+import { stringifyQuery } from '@woocommerce/navigation';
+
 /**
  * Internal dependencies
  */
 import { computeSuggestionMatch } from './utils';
-import { stringifyQuery } from 'lib/nav-utils';
 import { NAMESPACE } from 'store/constants';
 
 /**

plugins/woocommerce-admin/client/components/search/autocompleters/product.js

@@ -4,12 +4,16 @@
  */
 import apiFetch from '@wordpress/api-fetch';
 
+/**
+ * WooCommerce dependencies
+ */
+import { stringifyQuery } from '@woocommerce/navigation';
+
 /**
  * Internal dependencies
  */
 import { computeSuggestionMatch } from './utils';
 import ProductImage from 'components/product-image';
-import { stringifyQuery } from 'lib/nav-utils';
 import { NAMESPACE } from 'store/constants';
 
 /**

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

@@ -9,6 +9,11 @@ import { find, findIndex, first, isEqual, noop, partial, uniq } from 'lodash';
 import { IconButton, ToggleControl } from '@wordpress/components';
 import PropTypes from 'prop-types';
 
+/**
+ * WooCommerce dependencies
+ */
+import { getIdsFromQuery } from '@woocommerce/navigation';
+
 /**
  * Internal dependencies
  */
@@ -18,7 +23,6 @@ import CompareButton from 'components/filters/compare/button';
 import DowloadIcon from './download-icon';
 import EllipsisMenu from 'components/ellipsis-menu';
 import { downloadCSVFile, generateCSVDataFromTable, generateCSVFileName } from 'lib/csv';
-import { getIdsFromQuery } from 'lib/nav-utils';
 import MenuItem from 'components/ellipsis-menu/menu-item';
 import MenuTitle from 'components/ellipsis-menu/menu-title';
 import Pagination from 'components/pagination';

plugins/woocommerce-admin/client/dashboard/top-selling-products/index.js

@@ -13,11 +13,11 @@ import { withSelect } from '@wordpress/data';
  */
 import { Card, EmptyTable, TableCard } from '@woocommerce/components';
 import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
+import { getAdminLink } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies
  */
-import { getAdminLink } from 'lib/nav-utils';
 import { numberFormat } from 'lib/number';
 import ReportError from 'analytics/components/report-error';
 import { NAMESPACE } from 'store/constants';

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

@@ -9,13 +9,17 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { Fill } from 'react-slot-fill';
 import PropTypes from 'prop-types';
 
+/**
+ * WooCommerce dependencies
+ */
+import { getNewPath, getTimeRelatedQuery } from '@woocommerce/navigation';
+import { Link } from '@woocommerce/components';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
 import ActivityPanel from './activity-panel';
-import { Link } from '@woocommerce/components';
-import { getNewPath, getTimeRelatedQuery } from 'lib/nav-utils';
 
 class Header extends Component {
 	constructor() {

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

@@ -6,6 +6,11 @@ import { Component, createElement } from '@wordpress/element';
 import { parse } from 'qs';
 import { find, last } from 'lodash';
 
+/**
+ * WooCommerce dependencies
+ */
+import { getTimeRelatedQuery, stringifyQuery } from '@woocommerce/navigation';
+
 /**
  * Internal dependencies
  */
@@ -13,7 +18,6 @@ import Analytics from 'analytics';
 import AnalyticsReport from 'analytics/report';
 import Dashboard from 'dashboard';
 import DevDocs from 'devdocs';
-import { getTimeRelatedQuery, stringifyQuery } from 'lib/nav-utils';
 
 const getPages = () => {
 	const pages = [

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

@@ -8,13 +8,17 @@ import { Slot } from 'react-slot-fill';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 
+/**
+ * WooCommerce dependencies
+ */
+import { history } from '@woocommerce/navigation';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
 import { Controller, getPages } from './controller';
 import Header from 'header';
-import history from 'lib/history';
 import Notices from './notices';
 import { recordPageView } from 'lib/tracks';
 

plugins/woocommerce-admin/client/lib/async-requests/index.js

@@ -6,9 +6,9 @@ import apiFetch from '@wordpress/api-fetch';
 import { identity } from 'lodash';
 
 /**
- * Internal dependencies
+ * WooCommerce dependencies
  */
-import { getIdsFromQuery, stringifyQuery } from 'lib/nav-utils';
+import { getIdsFromQuery, stringifyQuery } from '@woocommerce/navigation';
 
 /**
  * Get a function that accepts ids as they are found in url parameter and

plugins/woocommerce-admin/client/lib/nav-utils/README.md

@@ -1,24 +0,0 @@
-Nav Utils
-=========
-
-This is a library of functions used in navigation.
-
-## `getPath()`
-
-Get the current path from history.
-
-## `getQuery()`
-
-Get the current query string, parsed into an object, from history.
-
-## `getAdminLink( string: path )`
-
-JS version of `admin_url`. Returns the full URL for a page in wp-admin.
-
-## `getNewPath( object: query, string: path, object: currentQuery )`
-
-Return a URL with set query parameters. Optional `path`, `currentQuery`, both will default to the current value fetched from `history` if not provided.
-
-## `updateQueryString( object: query )`
-
-Updates the query parameters of the current page.

plugins/woocommerce-admin/client/store/notes/resolvers.js

@@ -1,15 +1,18 @@
 /** @format */
-
 /**
  * External dependencies
  */
 import { dispatch } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 
+/**
+ * WooCommerce dependencies
+ */
+import { stringifyQuery } from '@woocommerce/navigation';
+
 /**
  * Internal dependencies
  */
-import { stringifyQuery } from 'lib/nav-utils';
 import { NAMESPACE } from 'store/constants';
 
 export default {

plugins/woocommerce-admin/client/store/orders/resolvers.js

@@ -5,10 +5,14 @@
 import { dispatch } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 
+/**
+ * WooCommerce dependencies
+ */
+import { stringifyQuery } from '@woocommerce/navigation';
+
 /**
  * Internal dependencies
  */
-import { stringifyQuery } from 'lib/nav-utils';
 import { NAMESPACE } from 'store/constants';
 
 export default {

plugins/woocommerce-admin/client/store/reports/stats/resolvers.js

@@ -6,10 +6,14 @@
 import apiFetch from '@wordpress/api-fetch';
 import { dispatch } from '@wordpress/data';
 
+/**
+ * WooCommerce dependencies
+ */
+import { stringifyQuery } from '@woocommerce/navigation';
+
 /**
  * Internal dependencies
  */
-import { stringifyQuery } from 'lib/nav-utils';
 import { NAMESPACE } from 'store/constants';
 
 export default {

plugins/woocommerce-admin/lib/client-assets.php

@@ -26,6 +26,14 @@ function wc_admin_register_script() {
 		true
 	);
 
+	wp_register_script(
+		'wc-navigation',
+		wc_admin_url( 'dist/navigation/index.js' ),
+		array(),
+		filemtime( wc_admin_dir_path( 'dist/navigation/index.js' ) ),
+		true
+	);
+
 	wp_register_script(
 		'wc-date',
 		wc_admin_url( 'dist/date/index.js' ),
@@ -46,6 +54,7 @@ function wc_admin_register_script() {
 			'wp-keycodes',
 			'wc-currency',
 			'wc-date',
+			'wc-navigation',
 		),
 		filemtime( wc_admin_dir_path( 'dist/components/index.js' ) ),
 		true
@@ -54,7 +63,7 @@ function wc_admin_register_script() {
 	wp_register_script(
 		WC_ADMIN_APP,
 		wc_admin_url( "dist/{$entry}/index.js" ),
-		array( 'wc-components', 'wp-date', 'wp-html-entities', 'wp-keycodes' ),
+		array( 'wc-components', 'wc-navigation', 'wp-date', 'wp-html-entities', 'wp-keycodes' ),
 		filemtime( wc_admin_dir_path( "dist/{$entry}/index.js" ) ),
 		true
 	);

plugins/woocommerce-admin/package.json

@@ -130,6 +130,7 @@
     "interpolate-components": "1.1.1",
     "lodash": "^4.17.11",
     "marked": "0.5.1",
+    "qs": "^6.5.2",
     "react-click-outside": "3.0.1",
     "react-dates": "^18.0.4",
     "react-live": "1.12.0",

plugins/woocommerce-admin/packages/navigation/.npmrc

@@ -0,0 +1 @@
+package-lock=false

plugins/woocommerce-admin/packages/navigation/README.md

@@ -0,0 +1,106 @@
+# Navigation
+
+A collection of navigation-related functions for handling query parameter objects, serializing query parameters, updating query parameters, and triggering path changes.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @woocommerce/navigation --save
+```
+
+## Usage
+
+### history
+
+A single history object used to perform path changes. This needs to be passed into ReactRouter to use the other path functions from this library.
+
+```jsx
+import { history } from '@woocommerce/navigation';
+
+render() {
+	return (
+		<Router history={ history }>
+			…
+		</Router>
+	);
+}
+```
+
+### getAdminLink(path) ⇒ <code>String</code>
+Returns a string with the site's wp-admin URL appended. JS version of `admin_url`. This relies on a global object `wcSettings` with a property `adminUrl` set.
+
+**Returns**: <code>String</code> - Full admin URL.
+
+| Param | Type | Description |
+| --- | --- | --- |
+| path | <code>String</code> | Relative path. |
+
+### getPath() ⇒ <code>String</code>
+Get the current path from history.
+
+**Returns**: <code>String</code> - Current path.
+
+### stringifyQuery(query) ⇒ <code>String</code>
+Converts a query object to a query string.
+
+**Returns**: <code>String</code> - Query string.
+
+| Param | Type | Description |
+| --- | --- | --- |
+| query | <code>Object</code> | parameters to be converted. |
+
+### getTimeRelatedQuery(query) ⇒ <code>Object</code>
+Gets time related parameters from a query.
+
+**Returns**: <code>Object</code> - Object containing the time related queries.
+
+| Param | Type | Description |
+| --- | --- | --- |
+| query | <code>Object</code> | Query containing the parameters. |
+
+### getIdsFromQuery(queryString) ⇒ <code>Array</code>
+Get an array of IDs from a comma-separated query parameter.
+
+**Returns**: <code>Array</code> - List of IDs converted to numbers.
+
+| Param | Type | Description |
+| --- | --- | --- |
+| queryString | <code>string</code> | string value extracted from URL. |
+
+### getNewPath(query, path, currentQuery) ⇒ <code>String</code>
+Return a URL with set query parameters.
+
+**Returns**: <code>String</code> - Updated URL merging query params into existing params.
+
+| Param | Type | Description |
+| --- | --- | --- |
+| query | <code>Object</code> | object of params to be updated. |
+| path | <code>String</code> | Relative path (defaults to current path). |
+| currentQuery | <code>Object</code> | object of current query params (defaults to current querystring). |
+
+### getQuery() ⇒ <code>Object</code>
+Get the current query string, parsed into an object, from history.
+
+**Returns**: <code>Object</code> - Current query object, defaults to empty object.
+
+### onQueryChange(param, path, query) ⇒ <code>function</code>
+This function returns an event handler for the given `param`
+
+**Returns**: <code>function</code> - A callback which will update `param` to the passed value when called.
+
+| Param | Type | Description |
+| --- | --- | --- |
+| param | <code>string</code> | The parameter in the querystring which should be updated (ex `page`, `per_page`) |
+| path | <code>string</code> | Relative path (defaults to current path). |
+| query | <code>string</code> | object of current query params (defaults to current querystring). |
+
+### updateQueryString(query, path, currentQuery)
+Updates the query parameters of the current page.
+
+| Param | Type | Description |
+| --- | --- | --- |
+| query | <code>Object</code> | object of params to be updated. |
+| path | <code>String</code> | Relative path (defaults to current path). |
+| currentQuery | <code>Object</code> | object of current query params (defaults to current querystring). |

plugins/woocommerce-admin/packages/navigation/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@woocommerce/navigation",
+  "version": "1.0.0-alpha.0",
+  "description": "WooCommerce navigation utilities.",
+  "author": "Automattic",
+  "license": "GPL-2.0-or-later",
+  "keywords": [
+    "wordpress",
+    "woocommerce",
+    "navigation"
+  ],
+  "homepage": "https://github.com/WooCommerce/wc-admin/tree/master/packages/navigation/README.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/WooCommerce/wc-admin.git"
+  },
+  "bugs": {
+    "url": "https://github.com/WooCommerce/wc-admin/issues"
+  },
+  "main": "build/index.js",
+  "module": "build-module/index.js",
+  "react-native": "src/index",
+  "dependencies": {
+    "@babel/runtime": "^7.0.0",
+    "history": "4.7.2",
+    "lodash": "^4.17.11",
+    "qs": "^6.5.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

plugins/woocommerce-admin/packages/navigation/src/history.js

@@ -1,5 +1,4 @@
 /** @format */
-
 /**
  * External dependencies
  */

plugins/woocommerce-admin/packages/navigation/src/index.js

@@ -2,9 +2,16 @@
 /**
  * External dependencies
  */
-import history from 'lib/history';
-import { parse, stringify } from 'qs';
 import { isEmpty, pick, uniq } from 'lodash';
+import { parse, stringify } from 'qs';
+
+/**
+ * Internal dependencies
+ */
+import history from './history';
+
+// Expose history so all uses get the same history object.
+export { history };
 
 /**
  * Internal dependencies

plugins/woocommerce-admin/tests/js/setup-globals.js

@@ -25,6 +25,7 @@ const wooCommercePackages = [
 	'components',
 	'currency',
 	'date',
+	'navigation',
 ];
 
 wordPressPackages.forEach( lib => {

plugins/woocommerce-admin/webpack.config.js

@@ -31,6 +31,7 @@ const wcAdminPackages = {
 	components: './client/components',
 	currency: './packages/currency',
 	date: './packages/date',
+	navigation: './packages/navigation',
 };
 
 Object.keys( wcAdminPackages ).forEach( ( name ) => {