Merge branch 'develop' into enhancement/5047-remove-ud-ff.

google · Jun 1, 2022 · 2d86db7 · 2d86db7
2 parents 87c5d92 + e52c2e3
commit 2d86db7
Show file tree

Hide file tree

Showing 19 changed files with 1,691 additions and 23 deletions.
diff --git a/assets/js/components/dashboard-sharing/DashboardSharingSettings/Footer.js b/assets/js/components/dashboard-sharing/DashboardSharingSettings/Footer.js
@@ -0,0 +1,105 @@
+/**
+ * DashboardSharingSettings Footer component.
+ *
+ * Site Kit by Google, Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import Link from '../../Link';
+import Button from '../../Button';
+import Notice from './Notice';
+import { CORE_MODULES } from '../../../googlesitekit/modules/datastore/constants';
+import { CORE_UI } from '../../../googlesitekit/datastore/ui/constants';
+import Spinner from '../../Spinner';
+import { EDITING_MANAGEMENT_KEY, SHARING_SETTINGS_SLUG_KEY } from './constants';
+import ErrorText from '../../ErrorText';
+import { trackEvent } from '../../../util';
+import useViewContext from '../../../hooks/useViewContext';
+const { useSelect, useDispatch } = Data;
+
+export default function Footer( { closeDialog } ) {
+	const viewContext = useViewContext();
+
+	const [ errorNotice, setErrorNotice ] = useState( null );
+	const canSubmitSharingChanges = useSelect( ( select ) =>
+		select( CORE_MODULES ).canSubmitSharingChanges()
+	);
+	const isSaving = useSelect( ( select ) =>
+		select( CORE_MODULES ).isDoingSubmitSharingChanges()
+	);
+
+	const { saveSharingSettings } = useDispatch( CORE_MODULES );
+	const { setValue } = useDispatch( CORE_UI );
+
+	const onApply = useCallback( async () => {
+		setErrorNotice( null );
+		const { error } = await saveSharingSettings();
+
+		if ( error ) {
+			setErrorNotice( error.message );
+
+			return;
+		}
+
+		trackEvent( `${ viewContext }_sharing`, 'settings_confirm' );
+
+		// Reset the state to enable modules in when not editing or saving.
+		setValue( SHARING_SETTINGS_SLUG_KEY, undefined );
+		setValue( EDITING_MANAGEMENT_KEY, false );
+
+		closeDialog();
+	}, [ viewContext, saveSharingSettings, setValue, closeDialog ] );
+
+	return (
+		<div className="googlesitekit-dashboard-sharing-settings__footer">
+			<div className="googlesitekit-dashboard-sharing-settings__footer-notice">
+				{ errorNotice && <ErrorText message={ errorNotice } /> }
+				{ ! errorNotice && <Notice /> }
+			</div>
+
+			<div className="googlesitekit-dashboard-sharing-settings__footer-actions">
+				<Link onClick={ closeDialog }>
+					{ __( 'Cancel', 'google-site-kit' ) }
+				</Link>
+
+				<Button
+					onClick={ onApply }
+					disabled={ isSaving || ! canSubmitSharingChanges }
+				>
+					{ __( 'Apply', 'google-site-kit' ) }
+					{ isSaving && <Spinner isSaving={ isSaving } /> }
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+Footer.propTypes = {
+	closeDialog: PropTypes.func.isRequired,
+};
diff --git a/assets/js/components/dashboard-sharing/DashboardSharingSettings/Module.js b/assets/js/components/dashboard-sharing/DashboardSharingSettings/Module.js
@@ -0,0 +1,243 @@
+/**
+ * DashboardSharingSettings Module component.
+ *
+ * Site Kit by Google, Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Tooltip } from '@material-ui/core';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, info } from '@wordpress/icons';
+import {
+	createInterpolateElement,
+	useCallback,
+	useEffect,
+	useState,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import ModuleIcon from '../../ModuleIcon';
+import UserRoleSelect from '../UserRoleSelect';
+import { Select } from '../../../material-components';
+import useViewContext from '../../../hooks/useViewContext';
+import { CORE_MODULES } from '../../../googlesitekit/modules/datastore/constants';
+import { CORE_SITE } from '../../../googlesitekit/datastore/site/constants';
+import { CORE_UI } from '../../../googlesitekit/datastore/ui/constants';
+import { EDITING_MANAGEMENT_KEY, SHARING_SETTINGS_SLUG_KEY } from './constants';
+import { trackEvent } from '../../../util';
+import {
+	CORE_USER,
+	PERMISSION_DELEGATE_MODULE_SHARING_MANAGEMENT,
+	PERMISSION_MANAGE_MODULE_SHARING_OPTIONS,
+} from '../../../googlesitekit/datastore/user/constants';
+const { useSelect, useDispatch } = Data;
+
+const viewAccessOptions = [
+	{
+		value: 'owner',
+		label: __( 'Only Me', 'google-site-kit' ),
+	},
+	{
+		value: 'all_admins',
+		label: __( 'All Admins', 'google-site-kit' ),
+	},
+];
+
+export default function Module( { moduleSlug, moduleName, ownerUsername } ) {
+	const viewContext = useViewContext();
+
+	const [ manageViewAccess, setManageViewAccess ] = useState( undefined );
+	const hasMultipleAdmins = useSelect( ( select ) =>
+		select( CORE_SITE ).hasMultipleAdmins()
+	);
+	const management = useSelect(
+		( select ) =>
+			select( CORE_MODULES ).getSharingManagement( moduleSlug ) ?? 'owner'
+	);
+	const hasOwnedModule = useSelect( ( select ) =>
+		select( CORE_USER ).hasCapability(
+			PERMISSION_DELEGATE_MODULE_SHARING_MANAGEMENT,
+			moduleSlug
+		)
+	);
+	const hasSharingCapability = useSelect( ( select ) =>
+		select( CORE_USER ).hasCapability(
+			PERMISSION_MANAGE_MODULE_SHARING_OPTIONS,
+			moduleSlug
+		)
+	);
+	const sharedOwnershipModules = useSelect( ( select ) =>
+		select( CORE_MODULES ).getSharedOwnershipModules()
+	);
+	const editingModuleSlug = useSelect( ( select ) =>
+		select( CORE_UI ).getValue( SHARING_SETTINGS_SLUG_KEY )
+	);
+	const isSaving = useSelect( ( select ) =>
+		select( CORE_MODULES ).isDoingSubmitSharingChanges()
+	);
+
+	const { setSharingManagement } = useDispatch( CORE_MODULES );
+	const { setValue } = useDispatch( CORE_UI );
+
+	const sharedOwnershipModule =
+		sharedOwnershipModules &&
+		Object.keys( sharedOwnershipModules ).includes( moduleSlug );
+
+	useEffect( () => {
+		if ( sharedOwnershipModule ) {
+			setManageViewAccess( 'all_admins' );
+		} else {
+			setManageViewAccess( management );
+		}
+	}, [ management, sharedOwnershipModule ] );
+
+	const handleOnChange = useCallback(
+		( event ) => {
+			const value = event.target.value;
+			setValue( EDITING_MANAGEMENT_KEY, true );
+			setValue( SHARING_SETTINGS_SLUG_KEY, moduleSlug );
+			setManageViewAccess( value );
+			setSharingManagement( moduleSlug, value );
+			trackEvent(
+				`${ viewContext }_sharing`,
+				`change_management_${ value }`,
+				moduleSlug
+			);
+		},
+		[
+			moduleSlug,
+			viewContext,
+			setManageViewAccess,
+			setSharingManagement,
+			setValue,
+		]
+	);
+
+	const isLocked =
+		( editingModuleSlug !== undefined &&
+			moduleSlug !== editingModuleSlug ) ||
+		isSaving;
+	const isEditing = moduleSlug === editingModuleSlug;
+
+	return (
+		<div
+			className={ classnames(
+				'googlesitekit-dashboard-sharing-settings__module',
+				'googlesitekit-dashboard-sharing-settings__row',
+				{
+					'googlesitekit-dashboard-sharing-settings__row--editing': isEditing,
+					'googlesitekit-dashboard-sharing-settings__row--disabled': isLocked,
+				}
+			) }
+		>
+			<div className="googlesitekit-dashboard-sharing-settings__column--product">
+				<ModuleIcon slug={ moduleSlug } size={ 48 } />
+
+				<span className="googlesitekit-dashboard-sharing-settings__module-name">
+					{ moduleName }
+				</span>
+			</div>
+
+			<div className="googlesitekit-dashboard-sharing-settings__column--view">
+				{ hasSharingCapability && (
+					<UserRoleSelect
+						moduleSlug={ moduleSlug }
+						isLocked={ isLocked }
+					/>
+				) }
+
+				{ ! hasSharingCapability && (
+					<p className="googlesitekit-dashboard-sharing-settings__note">
+						{ __(
+							'Contact managing user to manage view access',
+							'google-site-kit'
+						) }
+					</p>
+				) }
+			</div>
+
+			{ hasMultipleAdmins && (
+				<div className="googlesitekit-dashboard-sharing-settings__column--manage">
+					{ hasOwnedModule && (
+						<Select
+							className="googlesitekit-dashboard-sharing-settings__select"
+							value={ manageViewAccess }
+							options={ viewAccessOptions }
+							onChange={ handleOnChange }
+							onClick={ handleOnChange }
+							disabled={ sharedOwnershipModule }
+							outlined
+						/>
+					) }
+
+					{ ! hasOwnedModule && ownerUsername && (
+						<p className="googlesitekit-dashboard-sharing-settings__note">
+							{ createInterpolateElement(
+								sprintf(
+									/* translators: %s: user who manages the module. */
+									__(
+										'<span>Managed by</span> <strong>%s</strong>',
+										'google-site-kit'
+									),
+									ownerUsername
+								),
+								{
+									span: <span />,
+									strong: <strong />,
+								}
+							) }
+
+							<Tooltip
+								title={ sprintf(
+									/* translators: %s: name of the user who manages the module. */
+									__(
+										'%s has connected this and given managing permissions to all admins. You can change who can view this on the dashboard.',
+										'google-site-kit'
+									),
+									ownerUsername
+								) }
+								classes={ {
+									popper: 'googlesitekit-tooltip-popper',
+									tooltip: 'googlesitekit-tooltip',
+								} }
+							>
+								<span className="googlesitekit-dashboard-sharing-settings__tooltip-icon">
+									<Icon icon={ info } size={ 18 } />
+								</span>
+							</Tooltip>
+						</p>
+					) }
+				</div>
+			) }
+		</div>
+	);
+}
+
+Module.propTypes = {
+	moduleSlug: PropTypes.string.isRequired,
+	moduleName: PropTypes.string.isRequired,
+	ownerUsername: PropTypes.string,
+};