DashboardSharingSettingsButton.js

/**
 * DashboardSharingSettingsButton 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.
 */

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { Fragment, useCallback } from '@wordpress/element';

/**
 * Internal dependencies
 */
import { useSelect, useDispatch } from 'googlesitekit-data';
import { Button } from 'googlesitekit-components';
import ShareIcon from '@/svg/icons/share.svg';
import useViewContext from '@/js/hooks/useViewContext';
import { trackEvent } from '@/js/util';
import { CORE_UI } from '@/js/googlesitekit/datastore/ui/constants';
import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
import { AUDIENCE_TILE_CUSTOM_DIMENSION_CREATE } from '@/js/modules/analytics-4/datastore/constants';
import { SETTINGS_DIALOG } from './DashboardSharingSettings/constants';
import DashboardSharingDialog from './DashboardSharingDialog';
import useFormValue from '@/js/hooks/useFormValue';

export default function DashboardSharingSettingsButton() {
	const viewContext = useViewContext();
	const { setValue } = useDispatch( CORE_UI );

	const hasMultipleAdmins = useSelect( ( select ) =>
		select( CORE_SITE ).hasMultipleAdmins()
	);

	const [ isAutoCreatingCustomDimensionsForAudience ] = useFormValue(
		AUDIENCE_TILE_CUSTOM_DIMENSION_CREATE,
		'isAutoCreatingCustomDimensionsForAudience'
	);

	const openDialog = useCallback( () => {
		trackEvent(
			`${ viewContext }_headerbar`,
			'open_sharing',
			hasMultipleAdmins ? 'advanced' : 'simple'
		);

		setValue( SETTINGS_DIALOG, true );
	}, [ setValue, viewContext, hasMultipleAdmins ] );

	return (
		<Fragment>
			<Button
				aria-label={ __( 'Open sharing settings', 'google-site-kit' ) }
				className="googlesitekit-sharing-settings__button googlesitekit-header__dropdown googlesitekit-border-radius-round googlesitekit-button-icon"
				onClick={ openDialog }
				icon={ <ShareIcon width={ 20 } height={ 20 } /> }
				tooltipEnterDelayInMS={ 500 }
				disabled={ isAutoCreatingCustomDimensionsForAudience }
			/>

			<DashboardSharingDialog />
		</Fragment>
	);
}