Merge remote-tracking branch 'origin/develop' into enhancement/1775-a…

…nalytics-getreport.

assets/js/googlesitekit/api/index.js

@@ -39,7 +39,7 @@ import {
 import { stringifyObject } from '../../util';
 
 // Specific error to handle here, see below.
-import { STORE_NAME as CORE_USER, PERMISSION_SCOPE_ERROR_CODE } from '../datastore/user/constants';
+import { STORE_NAME as CORE_USER, ERROR_MISSING_REQUIRED_SCOPE } from '../datastore/user/constants';
 
 // Caching is enabled by default.
 let cachingEnabled = true;
@@ -135,11 +135,11 @@ export const siteKitRequest = async ( type, identifier, datapoint, {
 
 		return response;
 	} catch ( error ) {
-		// Check to see if this error was a `PERMISSION_SCOPE_ERROR_CODE` error;
+		// Check to see if this error was a `ERROR_MISSING_REQUIRED_SCOPE` error;
 		// if so and there is a data store available to dispatch on, dispatch a
 		// `setPermissionScopeError()` action.
 		// Kind of a hack, but scales to all components.
-		if ( error.code === PERMISSION_SCOPE_ERROR_CODE && global.googlesitekit?.data?.dispatch?.( CORE_USER ) ) {
+		if ( error.code === ERROR_MISSING_REQUIRED_SCOPE && global.googlesitekit?.data?.dispatch?.( CORE_USER ) ) {
 			global.googlesitekit.data.dispatch( CORE_USER ).setPermissionScopeError( error );
 		}
 

assets/js/googlesitekit/datastore/user/constants.js

@@ -18,5 +18,14 @@
 
 export const STORE_NAME = 'core/user';
 
+// Permissions list.
+export const PERMISSION_AUTHENTICATE = 'googlesitekit_authenticate';
+export const PERMISSION_SETUP = 'googlesitekit_setup';
+export const PERMISSION_VIEW_POSTS_INSIGHTS = 'googlesitekit_view_posts_insights';
+export const PERMISSION_VIEW_DASHBOARD = 'googlesitekit_view_dashboard';
+export const PERMISSION_VIEW_MODULE_DETAILS = 'googlesitekit_view_module_details';
+export const PERMISSION_MANAGE_OPTIONS = 'googlesitekit_manage_options';
+export const PERMISSION_PUBLISH_POSTS = 'googlesitekit_publish_posts';
+
 // Error code returned when scopes are missing.
-export const PERMISSION_SCOPE_ERROR_CODE = 'missing_required_scopes';
+export const ERROR_MISSING_REQUIRED_SCOPE = 'missing_required_scopes';

assets/js/googlesitekit/datastore/user/permissions.js

@@ -21,12 +21,21 @@
  */
 import invariant from 'invariant';
 
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { STORE_NAME } from './constants';
+const { createRegistrySelector } = Data;
+
 // Actions
 const CLEAR_PERMISSION_SCOPE_ERROR = 'CLEAR_PERMISSION_SCOPE_ERROR';
 const SET_PERMISSION_SCOPE_ERROR = 'SET_PERMISSION_SCOPE_ERROR';
+const RECEIVE_CAPABILITIES = 'RECEIVE_CAPABILITIES';
 
 export const INITIAL_STATE = {
 	permissionError: null,
+	capabilities: {},
 };
 
 export const actions = {
@@ -62,6 +71,22 @@ export const actions = {
 			type: SET_PERMISSION_SCOPE_ERROR,
 		};
 	},
+
+	/**
+	 * Sets user capabilities.
+	 *
+	 * @since n.e.x.t
+	 * @private
+	 *
+	 * @param {Object} capabilities User capabilities.
+	 * @return {Object} Redux-style action.
+	 */
+	receiveCapabilities( capabilities ) {
+		return {
+			type: RECEIVE_CAPABILITIES,
+			payload: { capabilities },
+		};
+	},
 };
 
 export const controls = {};
@@ -84,13 +109,30 @@ export const reducer = ( state, { type, payload } ) => {
 			};
 		}
 
+		case RECEIVE_CAPABILITIES: {
+			const { capabilities } = payload;
+
+			return {
+				...state,
+				capabilities,
+			};
+		}
+
 		default: {
 			return { ...state };
 		}
 	}
 };
 
-export const resolvers = {};
+export const resolvers = {
+	*getCapabilities() {
+		if ( ! global._googlesitekitUserData?.permissions ) {
+			global.console.error( 'Could not load core/user permissions.' );
+		}
+
+		yield actions.receiveCapabilities( global._googlesitekitUserData?.permissions );
+	},
+};
 
 export const selectors = {
 	/**
@@ -106,6 +148,37 @@ export const selectors = {
 		const { permissionError } = state;
 		return permissionError;
 	},
+
+	/**
+	 * Gets capabilities of the current user.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param {Object} state Data store's state.
+	 * @return {(Object|undefined)} Capabilities object. Returns undefined if it is not loaded yet.
+	 */
+	getCapabilities( state ) {
+		const { capabilities } = state;
+		return capabilities;
+	},
+
+	/**
+	 * Checks if the current user has the specified capability or not.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param {Object} state Data store's state.
+	 * @param {string} capability Capability name to check.
+	 * @return {(boolean|undefined)} TRUE if the current user has this capability, otherwise FALSE. If capabilities ain't loaded yet, returns undefined.
+	 */
+	hasCapability: createRegistrySelector( ( select ) => ( state, capability ) => {
+		const capabilities = select( STORE_NAME ).getCapabilities();
+		if ( capabilities ) {
+			return !! capabilities[ capability ];
+		}
+
+		return undefined;
+	} ),
 };
 
 export default {

assets/js/googlesitekit/datastore/user/utils/is-permission-scope-error.js

@@ -19,7 +19,7 @@
 /**
  * Internal dependencies
  */
-import { PERMISSION_SCOPE_ERROR_CODE } from '../constants';
+import { ERROR_MISSING_REQUIRED_SCOPE } from '../constants';
 
 /**
  * Checks if the given error is a permission scope error.
@@ -31,5 +31,5 @@ import { PERMISSION_SCOPE_ERROR_CODE } from '../constants';
  * @return {boolean} True if permission scope error, otherwise false.
  */
 export function isPermissionScopeError( error ) {
-	return error?.code === PERMISSION_SCOPE_ERROR_CODE;
+	return error?.code === ERROR_MISSING_REQUIRED_SCOPE;
 }

assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.js

@@ -40,7 +40,7 @@ const WidgetAreaRenderer = ( { slug } ) => {
 			<div className="mdc-layout-grid__inner">
 				<header className={ classnames(
 					'googlesitekit-widget-area-header',
-					'mdc-layout-grid__cell--span-12-desktop'
+					'mdc-layout-grid__cell--span-12'
 				) }>
 					<img alt="" src={ widgetArea.icon } />
 					{ widgetArea.title &&

assets/js/googlesitekit/widgets/components/WidgetRenderer.js

@@ -39,11 +39,16 @@ const WidgetRenderer = ( { slug } ) => {
 
 	// Capitalize the "component" variable, as it is required by JSX.
 	const { component: Component, wrapWidget } = widget;
-	const widgetComponent = <Component slug={ slug } />;
 
-	return widgetComponent && wrapWidget
-		? <Widget slug={ slug }>{ widgetComponent }</Widget>
-		: widgetComponent;
+	if ( ! wrapWidget ) {
+		return <Component />;
+	}
+
+	return (
+		<Widget slug={ slug }>
+			<Component />
+		</Widget>
+	);
 };
 
 WidgetRenderer.propTypes = {

assets/js/googlesitekit/widgets/components/WidgetRenderer.test.js

@@ -50,7 +50,11 @@ describe( 'WidgetRenderer', () => {
 	it( 'should wrap children when wrapWidget is true', () => {
 		const { container } = render( <WidgetRenderer slug="TestWidget" />, { setupRegistry: setupRegistry( { wrapWidget: true } ) } );
 
-		expect( Object.values( container.firstChild.classList ) ).toEqual( [ 'googlesitekit-widget', 'googlesitekit-widget--TestWidget' ] );
+		expect( Object.values( container.firstChild.classList ) ).toEqual( [
+			'googlesitekit-widget',
+			'googlesitekit-widget--TestWidget',
+		] );
+
 		expect( container.firstChild ).toMatchSnapshot();
 	} );
 

assets/js/googlesitekit/widgets/index.js

@@ -26,14 +26,12 @@ import { React } from '@wordpress/element';
  */
 import { dispatch, select } from 'googlesitekit-data';
 import Widget from './components/Widget';
-import { STORE_NAME } from './datastore/constants';
+import { STORE_NAME, WIDGET_WIDTHS, WIDGET_STYLES } from './datastore/constants';
 // This import has side-effects; it registers the Widgets datastore on the default
 // data store registry (eg. `googlesitekit.data`).
 import './datastore';
 
 export { registerDefaults } from './register-defaults';
-export { default as contexts } from './default-contexts';
-export { default as areas } from './default-areas';
 
 const Widgets = {
 	/**
@@ -43,6 +41,20 @@ const Widgets = {
 	 */
 	components: { Widget },
 
+	/**
+	 * Supported styles for Site Kit widgets.
+	 *
+	 * @since n.e.x.t
+	 */
+	WIDGET_STYLES,
+
+	/**
+	 * Supported widths for Site Kit widgets.
+	 *
+	 * @since n.e.x.t
+	 */
+	WIDGET_WIDTHS,
+
 	/**
 	 * Registers a widget area.
 	 *

assets/js/modules/analytics/components/common/AccountCreate/index.js

@@ -37,7 +37,7 @@ import CountrySelect from './CountrySelect';
 import ErrorNotice from '../ErrorNotice';
 import { STORE_NAME, FORM_ACCOUNT_CREATE, PROVISIONING_SCOPE } from '../../../datastore/constants';
 import { STORE_NAME as CORE_SITE } from '../../../../../googlesitekit/datastore/site/constants';
-import { STORE_NAME as CORE_USER, PERMISSION_SCOPE_ERROR_CODE } from '../../../../../googlesitekit/datastore/user/constants';
+import { STORE_NAME as CORE_USER, ERROR_MISSING_REQUIRED_SCOPE } from '../../../../../googlesitekit/datastore/user/constants';
 import { STORE_NAME as CORE_FORMS } from '../../../../../googlesitekit/datastore/forms/constants';
 import { countryCodesByTimezone } from '../../../util/countries-timezones';
 import Data from 'googlesitekit-data';
@@ -94,7 +94,7 @@ export default function AccountCreate() {
 				// When state is restored, auto-submit the request again.
 				setValues( FORM_ACCOUNT_CREATE, { autoSubmit: true } );
 				setPermissionScopeError( {
-					code: PERMISSION_SCOPE_ERROR_CODE,
+					code: ERROR_MISSING_REQUIRED_SCOPE,
 					message: __( 'Additional permissions are required to create a new Analytics account.', 'google-site-kit' ),
 					data: {
 						status: 403,

assets/js/modules/index.js

@@ -22,5 +22,4 @@
 import './adsense/index.legacy';
 import './analytics/index.legacy';
 import './optimize/index.legacy';
-import './pagespeed-insights/index.legacy';
 import './search-console/index.legacy';

assets/js/modules/pagespeed-insights/components/LabReportMetrics.js → assets/js/modules/pagespeed-insights/components/common/LabReportMetrics.js

@@ -33,7 +33,7 @@ import { __ } from '@wordpress/i18n';
 import ReportMetric from './ReportMetric';
 import ReportDetailsLink from './ReportDetailsLink';
 import MetricsLearnMoreLink from './MetricsLearnMoreLink';
-import { getScoreCategory } from './dashboard/util';
+import { getScoreCategory } from '../../util';
 
 export default function LabReportMetrics( { data } ) {
 	const totalBlockingTime = data?.lighthouseResult?.audits?.[ 'total-blocking-time' ];

assets/js/modules/pagespeed-insights/components/MetricsLearnMoreLink.js → assets/js/modules/pagespeed-insights/components/common/MetricsLearnMoreLink.js

@@ -24,8 +24,8 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import Link from '../../../components/link';
-import { sanitizeHTML } from '../../../util';
+import Link from '../../../../components/link';
+import { sanitizeHTML } from '../../../../util';
 
 export default function MetricsLearnMoreLink() {
 	return (

assets/js/modules/pagespeed-insights/components/ReportDetailsLink.js → assets/js/modules/pagespeed-insights/components/common/ReportDetailsLink.js

@@ -26,8 +26,8 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
-import { STORE_NAME as CORE_SITE } from '../../../googlesitekit/datastore/site/constants';
-import { sanitizeHTML } from '../../../util';
+import { STORE_NAME as CORE_SITE } from '../../../../googlesitekit/datastore/site/constants';
+import { sanitizeHTML } from '../../../../util';
 const { useSelect } = Data;
 
 export default function ReportDetailsLink() {

assets/js/modules/pagespeed-insights/components/ReportMetric.js → assets/js/modules/pagespeed-insights/components/common/ReportMetric.js

@@ -30,7 +30,7 @@ import { _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { CATEGORY_FAST, CATEGORY_AVERAGE, CATEGORY_SLOW } from './constants';
+import { CATEGORY_FAST, CATEGORY_AVERAGE, CATEGORY_SLOW } from '../../util/constants';
 
 export default function ReportMetric( {
 	title,

assets/js/modules/pagespeed-insights/components/DashboardPageSpeed.js → assets/js/modules/pagespeed-insights/components/dashboard/DashboardPageSpeed.js

@@ -32,21 +32,21 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
-import DeviceSizeTabBar from '../../../components/DeviceSizeTabBar';
-import ProgressBar from '../../../components/progress-bar';
-import Layout from '../../../components/layout/layout';
-import LabReportMetrics from './LabReportMetrics';
-import FieldReportMetrics from './FieldReportMetrics';
-import { STORE_NAME as CORE_FORMS } from '../../../googlesitekit/datastore/forms/constants';
-import { STORE_NAME as CORE_SITE } from '../../../googlesitekit/datastore/site/constants';
+import DeviceSizeTabBar from '../../../../components/DeviceSizeTabBar';
+import ProgressBar from '../../../../components/progress-bar';
+import Layout from '../../../../components/layout/layout';
+import LabReportMetrics from '../common/LabReportMetrics';
+import FieldReportMetrics from '../common/FieldReportMetrics';
+import { STORE_NAME as CORE_FORMS } from '../../../../googlesitekit/datastore/forms/constants';
+import { STORE_NAME as CORE_SITE } from '../../../../googlesitekit/datastore/site/constants';
 import {
 	STORE_NAME,
 	STRATEGY_MOBILE,
 	STRATEGY_DESKTOP,
 	DATA_SRC_FIELD,
 	DATA_SRC_LAB,
 	FORM_DASH_WIDGET,
-} from '../datastore/constants';
+} from '../../datastore/constants';
 
 const { useSelect, useDispatch } = Data;
 

assets/js/modules/pagespeed-insights/components/DashboardPageSpeed.test.js → assets/js/modules/pagespeed-insights/components/dashboard/DashboardPageSpeed.test.js

@@ -16,16 +16,20 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import fetchMock from 'fetch-mock';
+
 /**
  * Internal dependencies
  */
 import DashboardPageSpeed from './DashboardPageSpeed';
-import { fireEvent, render } from '../../../../../tests/js/test-utils';
-import { STORE_NAME, STRATEGY_MOBILE, STRATEGY_DESKTOP } from '../datastore/constants';
-import { STORE_NAME as CORE_SITE } from '../../../googlesitekit/datastore/site/constants';
-import * as fixtures from '../datastore/__fixtures__';
-import fetchMock from 'fetch-mock';
-import { freezeFetch } from '../../../../../tests/js/utils';
+import { fireEvent, render } from '../../../../../../tests/js/test-utils';
+import { STORE_NAME, STRATEGY_MOBILE, STRATEGY_DESKTOP } from '../../datastore/constants';
+import { STORE_NAME as CORE_SITE } from '../../../../googlesitekit/datastore/site/constants';
+import * as fixtures from '../../datastore/__fixtures__';
+import { freezeFetch } from '../../../../../../tests/js/utils';
 
 const activeClass = 'mdc-tab--active';
 const url = fixtures.pagespeedMobile.loadingExperience.id;