fix: allow access to dashboard for admins on multisite [#4036]

Codeinwp · Aug 29, 2023 · ef680d8 · ef680d8
1 parent e2f07a2
commit ef680d8
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 92 deletions.
diff --git a/assets/apps/dashboard/src/Components/Notification.js b/assets/apps/dashboard/src/Components/Notification.js
@@ -1,15 +1,16 @@
 /* global neveDash */
 import classnames from 'classnames';
 
-import { __ } from '@wordpress/i18n';
+import { sprintf, __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { external } from '@wordpress/icons';
-import { Button, Dashicon, Icon } from '@wordpress/components';
+import { Button, Dashicon, Icon, Tooltip } from '@wordpress/components';
 
 const Notification = ({ data, slug }) => {
 	// eslint-disable-next-line no-unused-vars
 	const [hidden, setHidden] = useState(false);
 	const { text, cta, type, update, url, targetBlank } = data;
+	const { canInstallPlugins } = neveDash;
 	const [inProgress, setInProgress] = useState(false);
 	const [done, setDone] = useState(false);
 	const [errorMessage, setErrorMessage] = useState(null);
@@ -112,6 +113,51 @@ const Notification = ({ data, slug }) => {
 		});
 	};
 
+	const ctaContent = () => {
+		if (!cta || done) {
+			return null;
+		}
+		return (
+			<Button
+				isSecondary
+				disabled={inProgress || !canInstallPlugins}
+				className={classnames({ 'is-loading': inProgress })}
+				onClick={() => {
+					if (update) {
+						updateEntity();
+					}
+				}}
+			>
+				{inProgress ? (
+					<span>
+						<Dashicon icon="update" />{' '}
+						{__('In Progress', 'neve') + '...'}{' '}
+					</span>
+				) : (
+					cta
+				)}
+			</Button>
+		);
+	};
+
+	const wrappedButtonContent = !canInstallPlugins ? (
+		<Tooltip
+			text={sprintf(
+				// translators: %s: Plugin and theme names.
+				__('Ask your admin to update %s on your site', 'neve'),
+				'Neve and Neve Pro'
+			)}
+			position="top center"
+			style={{
+				opacity: 1,
+			}}
+		>
+			{ctaContent()}
+		</Tooltip>
+	) : (
+		ctaContent()
+	);
+
 	const UpdateNotification = () => {
 		return (
 			<div className={classes}>
@@ -132,27 +178,7 @@ const Notification = ({ data, slug }) => {
 							)}
 					</p>
 				)}
-				{cta && !done && (
-					<Button
-						isSecondary
-						disabled={inProgress}
-						className={classnames({ 'is-loading': inProgress })}
-						onClick={() => {
-							if (update) {
-								updateEntity();
-							}
-						}}
-					>
-						{inProgress ? (
-							<span>
-								<Dashicon icon="update" />{' '}
-								{__('In Progress', 'neve') + '...'}{' '}
-							</span>
-						) : (
-							cta
-						)}
-					</Button>
-				)}
+				{wrappedButtonContent}
 			</div>
 		);
 	};

diff --git a/assets/apps/dashboard/src/Components/Plugin/InstallActivate.js b/assets/apps/dashboard/src/Components/Plugin/InstallActivate.js
@@ -1,8 +1,8 @@
 /* global neveDash */
 import { get } from '../../utils/rest';
-import { __ } from '@wordpress/i18n';
+import { sprintf, __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import { Button, Tooltip } from '@wordpress/components';
 
 const InstallActivate = ({
 	labels = {},
@@ -12,8 +12,8 @@ const InstallActivate = ({
 	smallButton = false,
 	description,
 }) => {
-	const { slug, pluginState, activateURL } = pluginData;
-	const { getPluginStateBaseURL, pluginsURL } = neveDash;
+	const { slug, pluginState, activateURL, pluginBasename } = pluginData;
+	const { getPluginStateBaseURL, pluginsURL, canInstallPlugins, canActivatePlugins } = neveDash;
 
 	const [progress, setProgress] = useState(false);
 	// const [updating, setUpdating] = useState(false);
@@ -129,11 +129,24 @@ const InstallActivate = ({
 
 	const isProgress = (type) => progress === type;
 
+	const isButtonDisabled = () => {
+		if (progress) {
+			return true;
+		}
+		if (isProgress('installing')) {
+			return !canInstallPlugins;
+		}
+		if (isProgress('activating')) {
+			return !canActivatePlugins;
+		}
+		return false;
+	};
+
 	const renderNoticeContent = () => {
 		const buttonMap = {
 			install: (
 				<Button
-					disabled={progress}
+					disabled={isButtonDisabled()}
 					isPrimary={!isProgress('installing')}
 					isSmall={smallButton}
 					isSecondary={isProgress('installing')}
@@ -148,7 +161,7 @@ const InstallActivate = ({
 			),
 			activate: activateURL && (
 				<Button
-					disabled={isProgress('activating')}
+					disabled={isButtonDisabled()}
 					isSmall={smallButton}
 					isPrimary={!isProgress('activating')}
 					isSecondary={isProgress('activating')}
@@ -163,11 +176,29 @@ const InstallActivate = ({
 			),
 		};
 
+		const showTooltip =
+			(!canInstallPlugins && isProgress('installing')) ||
+			(!canActivatePlugins && isProgress('activating'));
+
+		const wrappedButtonContent = showTooltip ? (
+			<Tooltip
+				text={sprintf(
+					// translators: %s: Plugin name.
+					__('Ask your admin to enable %s on your site', 'neve'),
+					'Cloud Templates & Patterns Collection'
+				)}
+				position="top center"
+			>
+				{buttonMap[currentState]}
+			</Tooltip>
+		) : (
+			buttonMap[currentState]
+		);
+
 		return (
 			<>
 				{description}
-				{buttonMap.hasOwnProperty(currentState) &&
-					buttonMap[currentState]}
+				{buttonMap.hasOwnProperty(currentState) && wrappedButtonContent}
 			</>
 		);
 	};

diff --git a/assets/apps/dashboard/src/Components/PluginCard.js b/assets/apps/dashboard/src/Components/PluginCard.js
@@ -1,13 +1,15 @@
+/* global neveDash */
 import classnames from 'classnames';
 import { get } from '../utils/rest';
 
-import { __ } from '@wordpress/i18n';
-import { Button, Dashicon, ExternalLink } from '@wordpress/components';
+import { sprintf, __ } from '@wordpress/i18n';
+import { Button, Dashicon, ExternalLink, Tooltip } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { withDispatch } from '@wordpress/data';
 
 const Card = ({ slug, data, setPluginState }) => {
 	const { banner, name, description, version, author, url, premium } = data;
+	const { canInstallPlugins, canActivatePlugins } = neveDash;
 	const action = data.cta;
 	const [inProgress, setInProgress] = useState(false);
 
@@ -27,6 +29,98 @@ const Card = ({ slug, data, setPluginState }) => {
 		external: __('Learn More', 'neve'),
 	};
 
+	const ctaContent = () => {
+		if (action === 'external') {
+			return null;
+		}
+
+		const isButtonDisabled = () => {
+			if (inProgress) {
+				return true;
+			}
+			if (action === 'install') {
+				return !canInstallPlugins;
+			}
+			if (action === 'activate') {
+				return !canActivatePlugins;
+			}
+			return false;
+		};
+
+		return (
+			<Button
+				className="plugin-action"
+				isPrimary={['install', 'activate'].includes(action)}
+				isSecondary={'deactivate' === action}
+				disabled={isButtonDisabled()}
+				onClick={() => {
+					setInProgress(true);
+					if ('install' === action) {
+						installPlugin(slug).then((r) => {
+							if (!r.success) {
+								// Todo handle error with toasts?
+								setInProgress(false);
+								return false;
+							}
+							setInProgress(false);
+							setPluginState(slug, 'activate');
+						});
+						return false;
+					}
+					get(data[action], true).then((r) => {
+						if (!r.ok) {
+							// Todo handle error with toasts?
+							setInProgress(false);
+							return false;
+						}
+
+						if ('activate' === action) {
+							setPluginState(slug, 'deactivate');
+						} else {
+							setPluginState(slug, 'activate');
+						}
+						if ('templates-patterns-collection' === slug) {
+							window.location.reload();
+						}
+						setInProgress(false);
+					});
+				}}
+			>
+				{!inProgress && stringMap[action].static}
+				{inProgress && (
+					<span
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+						}}
+					>
+						<Dashicon icon="update" />
+						{stringMap[action].progress + '...'}
+					</span>
+				)}
+			</Button>
+		);
+	};
+
+	const showTooltip =
+		(!canInstallPlugins && action === 'install') ||
+		(!canActivatePlugins && action === 'activate');
+
+	const wrappedButtonContent = showTooltip ? (
+		<Tooltip
+			text={sprintf(
+				// translators: %s: Plugin name.
+				__('Ask your admin to enable %s on your site', 'neve'),
+				name
+			)}
+			position="top center"
+		>
+			{ctaContent()}
+		</Tooltip>
+	) : (
+		ctaContent()
+	);
+
 	return (
 		<div className={classnames(['card', 'plugin', slug])}>
 			<div className="card-header">
@@ -42,61 +136,7 @@ const Card = ({ slug, data, setPluginState }) => {
 					{version && <span className="version">v{version} | </span>}
 					{author && <span className="author">{author}</span>}
 				</div>
-
-				{action !== 'external' && (
-					<Button
-						className="plugin-action"
-						isPrimary={['install', 'activate'].includes(action)}
-						isSecondary={'deactivate' === action}
-						disabled={inProgress}
-						onClick={() => {
-							setInProgress(true);
-							if ('install' === action) {
-								installPlugin(slug).then((r) => {
-									if (!r.success) {
-										// Todo handle error with toasts?
-										setInProgress(false);
-										return false;
-									}
-									setInProgress(false);
-									setPluginState(slug, 'activate');
-								});
-								return false;
-							}
-							get(data[action], true).then((r) => {
-								if (!r.ok) {
-									// Todo handle error with toasts?
-									setInProgress(false);
-									return false;
-								}
-
-								if ('activate' === action) {
-									setPluginState(slug, 'deactivate');
-								} else {
-									setPluginState(slug, 'activate');
-								}
-								if ('templates-patterns-collection' === slug) {
-									window.location.reload();
-								}
-								setInProgress(false);
-							});
-						}}
-					>
-						{!inProgress && stringMap[action].static}
-						{inProgress && (
-							<span
-								style={{
-									display: 'flex',
-									alignItems: 'center',
-								}}
-							>
-								<Dashicon icon="update" />
-								{stringMap[action].progress + '...'}
-							</span>
-						)}
-					</Button>
-				)}
-
+				{wrappedButtonContent}
 				{action === 'external' && (
 					<ExternalLink className="plugin-action" href={url}>
 						{stringMap[action]}

diff --git a/assets/apps/dashboard/src/scss/components/_notification.scss b/assets/apps/dashboard/src/scss/components/_notification.scss
@@ -110,7 +110,8 @@
 
     &[disabled] {
       text-shadow: none;
-      opacity: .5;
+	  color: rgba( 54, 54, 54, .5 );
+	  border-color: rgba( 54, 54, 54, .5 );
     }
   }
 

diff --git a/assets/apps/dashboard/src/scss/content/_plugins.scss b/assets/apps/dashboard/src/scss/content/_plugins.scss
@@ -24,7 +24,8 @@
     padding: 20px 15px 20px 20px;
     display: flex;
     align-items: center;
-		margin-top: auto;
+	margin-top: auto;
+	justify-content: space-between;
 
     .plugin-data {
       font-size: 14px;