Decouple Navigation from `wcSettings`. (https://github.com/woocommerce/woocommerce-admin/pull/3294)

* Move getAdminLink to wc-admin-settings.

* Add changelog entries.

* Look for `getAdminLink()` in @woocommerce/settings first.

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

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
  * WooCommerce dependencies
  */
 import { EmptyContent } from '@woocommerce/components';
-import { getAdminLink } from '@woocommerce/navigation';
+import { getAdminLink } from '@woocommerce/wc-admin-settings';
 
 /**
  * Component to render when there is an error in a report component due to data

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

@@ -13,7 +13,7 @@ import { defaultTableDateFormat } from '@woocommerce/date';
 import { formatCurrency, getCurrencyFormatDecimal } from 'lib/currency-format';
 import { Date, Link } from '@woocommerce/components';
 import { formatValue } from 'lib/number-format';
-import { getSetting } from '@woocommerce/wc-admin-settings';
+import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
 
 const { countries } = getSetting( 'dataEndpoints', { countries: {} } );
 
@@ -128,7 +128,7 @@ export default class CustomersReportTable extends Component {
 			const countryName = this.getCountryName( country );
 
 			const customerNameLink = user_id ? (
-				<Link href={ 'user-edit.php?user_id=' + user_id } type="wp-admin">
+				<Link href={ getAdminLink( 'user-edit.php?user_id=' + user_id ) } type="wp-admin">
 					{ name }
 				</Link>
 			) : (

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

@@ -14,6 +14,7 @@ import { defaultTableDateFormat, getCurrentDates } from '@woocommerce/date';
 import { Date, Link } from '@woocommerce/components';
 import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
 import { formatValue } from 'lib/number-format';
+import { getAdminLink } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -111,7 +112,10 @@ export default class CouponsReportTable extends Component {
 				},
 				{
 					display: (
-						<Link href={ `post.php?post=${ order_id }&action=edit` } type="wp-admin">
+						<Link
+							href={ getAdminLink( `post.php?post=${ order_id }&action=edit` ) }
+							type="wp-admin"
+						>
 							{ order_number }
 						</Link>
 					),

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

@@ -13,7 +13,7 @@ import { Link } from '@woocommerce/components';
 import { formatCurrency, getCurrencyFormatDecimal } from 'lib/currency-format';
 import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
 import { formatValue } from 'lib/number-format';
-import { getSetting } from '@woocommerce/wc-admin-settings';
+import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -97,7 +97,7 @@ export default class VariationsReportTable extends Component {
 				filter: 'advanced',
 				product_includes: query.products,
 			} );
-			const editPostLink = `post.php?post=${ product_id }&action=edit`;
+			const editPostLink = getAdminLink( `post.php?post=${ product_id }&action=edit` );
 
 			return [
 				{

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

@@ -14,7 +14,7 @@ import { formatCurrency, getCurrencyFormatDecimal, renderCurrency } from 'lib/cu
 import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
 import { Link, Tag } from '@woocommerce/components';
 import { formatValue } from 'lib/number-format';
-import { getSetting } from '@woocommerce/wc-admin-settings';
+import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -131,7 +131,7 @@ class ProductsReportTable extends Component {
 				[];
 
 			const stockStatus = isLowStock( stock_status, stock_quantity, low_stock_amount ) ? (
-				<Link href={ 'post.php?action=edit&post=' + product_id } type="wp-admin">
+				<Link href={ getAdminLink( 'post.php?action=edit&post=' + product_id ) } type="wp-admin">
 					{ _x( 'Low', 'Indication of a low quantity', 'woocommerce-admin' ) }
 				</Link>
 			) : (

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

@@ -11,7 +11,7 @@ import { Component } from '@wordpress/element';
 import { Link } from '@woocommerce/components';
 import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
 import { formatValue } from 'lib/number-format';
-import { getSetting } from '@woocommerce/wc-admin-settings';
+import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -85,12 +85,13 @@ export default class StockReportTable extends Component {
 				</Link>
 			);
 
+			const editProductLink = getAdminLink( 'post.php?action=edit&post=' + ( parent_id || id ) );
 			const stockStatusLink = isLowStock( stock_status, stock_quantity, low_stock_amount ) ? (
-				<Link href={ 'post.php?action=edit&post=' + ( parent_id || id ) } type="wp-admin">
+				<Link href={ editProductLink } type="wp-admin">
 					{ _x( 'Low', 'Indication of a low quantity', 'woocommerce-admin' ) }
 				</Link>
 			) : (
-				<Link href={ 'post.php?action=edit&post=' + ( parent_id || id ) } type="wp-admin">
+				<Link href={ editProductLink } type="wp-admin">
 					{ stockStatuses[ stock_status ] }
 				</Link>
 			);

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

@@ -10,7 +10,8 @@ import { __, sprintf } from '@wordpress/i18n';
  * WooCommerce dependencies
  */
 import { Card } from '@woocommerce/components';
-import { getAdminLink, getHistory, getNewPath, getPersistedQuery } from '@woocommerce/navigation';
+import { getHistory, getNewPath, getPersistedQuery } from '@woocommerce/navigation';
+import { getAdminLink } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/plugins.js

@@ -13,8 +13,8 @@ import { withDispatch } from '@wordpress/data';
  * WooCommerce dependencies
  */
 import { H, Stepper, Card } from '@woocommerce/components';
-import { getNewPath, updateQueryString, getAdminLink } from '@woocommerce/navigation';
-import { getSetting } from '@woocommerce/wc-admin-settings';
+import { getNewPath, updateQueryString } from '@woocommerce/navigation';
+import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies

plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/theme/index.js

@@ -9,7 +9,6 @@ import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
 import { get } from 'lodash';
-import { getAdminLink } from '@woocommerce/navigation';
 import Gridicon from 'gridicons';
 import { TabPanel, Tooltip } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
@@ -18,7 +17,7 @@ import { withDispatch } from '@wordpress/data';
  * WooCommerce dependencies
  */
 import { Card, H } from '@woocommerce/components';
-import { getSetting } from '@woocommerce/wc-admin-settings';
+import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies

plugins/woocommerce-admin/client/dashboard/task-list/tasks.js

@@ -11,8 +11,8 @@ import { get } from 'lodash';
 /**
  * WooCommerce dependencies
  */
-import { getSetting } from '@woocommerce/wc-admin-settings';
-import { updateQueryString, getAdminLink } from '@woocommerce/navigation';
+import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
+import { updateQueryString } from '@woocommerce/navigation';
 
 /**
  * Internal dependencies

plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js

@@ -15,8 +15,12 @@ import { withDispatch } from '@wordpress/data';
  * WooCommerce dependencies
  */
 import { Form, Card, Stepper, TextControl, List } from '@woocommerce/components';
-import { getAdminLink, getHistory, getNewPath } from '@woocommerce/navigation';
-import { WC_ASSET_URL as wcAssetUrl, getSetting } from '@woocommerce/wc-admin-settings';
+import { getHistory, getNewPath } from '@woocommerce/navigation';
+import {
+	WC_ASSET_URL as wcAssetUrl,
+	getAdminLink,
+	getSetting,
+} from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies

plugins/woocommerce-admin/client/dashboard/task-list/tasks/products.js

@@ -9,7 +9,7 @@ import { Component, Fragment } from '@wordpress/element';
  * WooCommerce dependencies
  */
 import { Card, List } from '@woocommerce/components';
-import { getAdminLink } from '@woocommerce/navigation';
+import { getAdminLink } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies

plugins/woocommerce-admin/client/dashboard/task-list/tasks/tax.js

@@ -14,8 +14,8 @@ import { withDispatch } from '@wordpress/data';
  * WooCommerce dependencies
  */
 import { Card, H, Link, Stepper } from '@woocommerce/components';
-import { getAdminLink, getHistory, getNewPath } from '@woocommerce/navigation';
-import { getSetting, setSetting } from '@woocommerce/wc-admin-settings';
+import { getHistory, getNewPath } from '@woocommerce/navigation';
+import { getAdminLink, getSetting, setSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies

plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js

@@ -16,8 +16,8 @@ import { keyBy, map, merge } from 'lodash';
  */
 import { EmptyContent, Flag, Link, OrderStatus, Section } from '@woocommerce/components';
 import { formatCurrency } from 'lib/currency-format';
-import { getAdminLink, getNewPath } from '@woocommerce/navigation';
-import { getSetting } from '@woocommerce/wc-admin-settings';
+import { getNewPath } from '@woocommerce/navigation';
+import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -119,7 +119,12 @@ class OrdersPanel extends Component {
 							}
 						),
 						components: {
-							orderLink: <Link href={ 'post.php?action=edit&post=' + order_id } type="wp-admin" />,
+							orderLink: (
+								<Link
+									href={ getAdminLink( 'post.php?action=edit&post=' + order_id ) }
+									type="wp-admin"
+								/>
+							),
 							destinationFlag: customer.country ? (
 								<Flag code={ customer.country } round={ false } />
 							) : null,

plugins/woocommerce-admin/client/header/activity-panel/panels/reviews.js

@@ -22,7 +22,7 @@ import {
 	ReviewRating,
 	Section,
 } from '@woocommerce/components';
-import { getAdminLink } from '@woocommerce/navigation';
+import { getAdminLink } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies

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

@@ -13,7 +13,7 @@ import PropTypes from 'prop-types';
  */
 import { getNewPath } from '@woocommerce/navigation';
 import { Link } from '@woocommerce/components';
-import { getSetting } from '@woocommerce/wc-admin-settings';
+import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -88,12 +88,14 @@ class Header extends Component {
 			'is-scrolled': isScrolled,
 		} );
 
+		const firstBreadCrumbPath = 'admin.php?page=wc-admin';
+
 		return (
 			<div className={ className }>
 				<h1 className="woocommerce-layout__header-breadcrumbs">
 					<span>
 						<Link
-							href={ 'admin.php?page=wc-admin' }
+							href={ isEmbedded ? getAdminLink( firstBreadCrumbPath ) : firstBreadCrumbPath }
 							type={ isEmbedded ? 'wp-admin' : 'wc-admin' }
 							onClick={ this.trackLinkClick }
 						>
@@ -103,7 +105,9 @@ class Header extends Component {
 					{ _sections.map( ( section, i ) => {
 						const sectionPiece = Array.isArray( section ) ? (
 							<Link
-								href={ isEmbedded ? section[ 0 ] : getNewPath( {}, section[ 0 ], {} ) }
+								href={
+									isEmbedded ? getAdminLink( section[ 0 ] ) : getNewPath( {}, section[ 0 ], {} )
+								}
 								type={ isEmbedded ? 'wp-admin' : 'wc-admin' }
 								onClick={ this.trackLinkClick }
 							>

plugins/woocommerce-admin/client/settings/fallbacks.js

@@ -89,3 +89,13 @@ export function getSetting( name, fallback = false, filter = val => val ) {
 export function setSetting( name, value, filter = val => val ) {
 	allSettings[ name ] = filter( value );
 }
+
+/**
+ * Returns a string with the site's wp-admin URL appended. JS version of `admin_url`.
+ *
+ * @param {String} path Relative path.
+ * @return {String} Full admin URL.
+ */
+export function getAdminLink( path ) {
+	return ( ADMIN_URL || '' ) + path;
+}

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

@@ -26,3 +26,4 @@ export const DEFAULT_DATE_RANGE = SOURCE.DEFAULT_DATE_RANGE;
 
 export const getSetting = SOURCE.getSetting;
 export const setSetting = SOURCE.setSetting;
+export const getAdminLink = SOURCE.getAdminLink;

plugins/woocommerce-admin/client/wp-admin-scripts/onboarding-homepage-notice/index.js

@@ -10,7 +10,7 @@ import domReady from '@wordpress/dom-ready';
 /**
  * WooCommerce dependencies
  */
-import { getAdminLink } from '@woocommerce/navigation';
+import { getAdminLink } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies

plugins/woocommerce-admin/client/wp-admin-scripts/onboarding-product-notice/index.js

@@ -9,7 +9,7 @@ import domReady from '@wordpress/dom-ready';
 /**
  * WooCommerce dependencies
  */
-import { getAdminLink } from '@woocommerce/navigation';
+import { getAdminLink } from '@woocommerce/wc-admin-settings';
 
 /**
  * Displays a notice after product creation.

plugins/woocommerce-admin/client/wp-admin-scripts/onboarding-tax-notice/index.js

@@ -9,7 +9,7 @@ import domReady from '@wordpress/dom-ready';
 /**
  * WooCommerce dependencies
  */
-import { getAdminLink } from '@woocommerce/navigation';
+import { getAdminLink } from '@woocommerce/wc-admin-settings';
 
 /**
  * Returns a promise and resolves when the loader overlay no longer exists.

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -6,6 +6,7 @@
 - Export the `<CompareButton />` component.
 - Add `<TextControl />` component.
 - Require `currency` prop in `<AdvancedFilters />` component.
+- Remove call to `getAdminLink()` inside the `<Link />` component.
 
 # 4.0.0
 - Added a new `<ScrollTo />` component.

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

@@ -9,7 +9,7 @@ import { partial } from 'lodash';
 /**
  * WooCommerce dependencies
  */
-import { getAdminLink, getHistory } from '@woocommerce/navigation';
+import { getHistory } from '@woocommerce/navigation';
 
 /**
  * Use `Link` to create a link to another resource. It accepts a type to automatically
@@ -36,13 +36,6 @@ class Link extends Component {
 	render() {
 		const { children, href, type, ...props } = this.props;
 
-		let path;
-		if ( 'wp-admin' === type ) {
-			path = getAdminLink( href );
-		} else {
-			path = href;
-		}
-
 		const passProps = {
 			...props,
 			'data-link-type': type,
@@ -53,7 +46,7 @@ class Link extends Component {
 		}
 
 		return (
-			<a href={ path } { ...passProps }>
+			<a href={ href } { ...passProps }>
 				{ children }
 			</a>
 		);

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

@@ -5,6 +5,7 @@
 - `stringifyQuery` method is no longer available, instead use `addQueryArgs` from `@wordpress/url` package.
 - Added a new `<Form />` component.
 - Stepper component: Add new `content` and `description` props.
+- Remove `getAdminLink()` and dependency on global settings object.
 
 # 2.1.1
 

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

@@ -28,15 +28,6 @@ render() {
 }
 ```
 
-### 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.
 

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

@@ -5,7 +5,6 @@
 import { addQueryArgs } from '@wordpress/url';
 import { parse } from 'qs';
 import { pick, uniq } from 'lodash';
-import { getSetting } from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -24,14 +23,6 @@ export * from './filters';
 // Import the module into itself. Functions consumed from this import can be mocked in tests.
 import * as navUtils from './index';
 
-/**
- * Returns a string with the site's wp-admin URL appended. JS version of `admin_url`.
- *
- * @param {String} path Relative path.
- * @return {String} Full admin URL.
- */
-export const getAdminLink = path => getSetting( 'adminUrl', '' ) + path;
-
 /**
  * Get the current path from history.
  *