My Jetpack: Update filesystem check (#24884)

* Export Alert component * display alert when we cant install the plugin * versions bump
Automattic · Jun 30, 2022 · c031558 · c031558
1 parent 55ae0e4
commit c031558
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 6 deletions.
diff --git a/projects/js-packages/components/changelog/update-my-jetpack-cant-install-plugin b/projects/js-packages/components/changelog/update-my-jetpack-cant-install-plugin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Export Alert component
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
@@ -42,4 +42,5 @@ export { default as ProductOffer, IconsCard } from './components/product-offer';
 export { default as Dialog } from './components/dialog';
 export { default as RecordMeterBar } from './components/record-meter-bar';
 export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger';
+export { default as Alert } from './components/alert';
 export { getUserLocale, cleanLocale } from './lib/locale';
diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.16.4",
+	"version": "0.16.5-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-button/index.js b/projects/packages/my-jetpack/_inc/components/product-detail-button/index.js
@@ -2,14 +2,22 @@ import { Button, Spinner } from '@wordpress/components';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const ProductDetailButton = ( { children, className, href, isLoading, onClick, isPrimary } ) => {
+const ProductDetailButton = ( {
+	children,
+	className,
+	href,
+	isLoading,
+	onClick,
+	isPrimary,
+	disabled,
+} ) => {
 	return (
 		<Button
 			onClick={ onClick }
 			className={ className }
 			href={ href }
 			variant={ isPrimary ? 'primary' : 'secondary' }
-			disabled={ isLoading }
+			disabled={ isLoading || disabled }
 		>
 			{ isLoading ? <Spinner /> : children }
 		</Button>
@@ -20,11 +28,13 @@ ProductDetailButton.propTypes = {
 	className: PropTypes.string,
 	isLoading: PropTypes.bool,
 	isPrimary: PropTypes.bool,
+	disabled: PropTypes.bool,
 };
 
 ProductDetailButton.defaultProps = {
 	isLoading: false,
 	isPrimary: true,
+	disabled: false,
 };
 
 export default ProductDetailButton;
diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
@@ -1,5 +1,16 @@
+// eslint-disable-next-line no-unused-vars
+/* global myJetpackInitialState */
+
 import { getCurrencyObject } from '@automattic/format-currency';
-import { CheckmarkIcon, getIconBySlug, StarIcon, Text, H3 } from '@automattic/jetpack-components';
+import {
+	CheckmarkIcon,
+	getIconBySlug,
+	StarIcon,
+	Text,
+	H3,
+	Alert,
+} from '@automattic/jetpack-components';
+import { ExternalLink } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, plus } from '@wordpress/icons';
 import classnames from 'classnames';
@@ -55,6 +66,7 @@ function Price( { value, currency, isOld } ) {
  * @returns {object}                               ProductDetailCard react component.
  */
 const ProductDetailCard = ( { slug, onClick, trackButtonClick, className, supportingInfo } ) => {
+	const fileSystemWriteAccess = window?.myJetpackInitialState?.fileSystemWriteAccess;
 	const { detail, isFetching } = useProduct( slug );
 	const {
 		title,
@@ -64,8 +76,12 @@ const ProductDetailCard = ( { slug, onClick, trackButtonClick, className, suppor
 		isBundle,
 		supportedProducts,
 		hasRequiredPlan,
+		status,
+		pluginSlug,
 	} = detail;
 
+	const cantInstallPlugin = status === 'plugin_absent' && 'no' === fileSystemWriteAccess;
+
 	const {
 		isFree,
 		fullPricePerMonth: price,
@@ -181,11 +197,31 @@ const ProductDetailCard = ( { slug, onClick, trackButtonClick, className, suppor
 
 				{ isFree && <H3>{ __( 'Free', 'jetpack-my-jetpack' ) }</H3> }
 
+				{ cantInstallPlugin && (
+					<Alert>
+						<Text>
+							{ sprintf(
+								// translators: %s is the plugin name.
+								__(
+									"Due to your server settings, we can't automatically install the plugin for you. Please manually install the %s plugin.",
+									'jetpack-my-jetpack'
+								),
+								title
+							) }
+							&nbsp;
+							<ExternalLink href={ `https://wordpress.org/plugins/${ pluginSlug }` }>
+								{ __( 'Get plugin', 'jetpack-my-jetpack' ) }
+							</ExternalLink>
+						</Text>
+					</Alert>
+				) }
+
 				{ ( ! isBundle || ( isBundle && ! hasRequiredPlan ) ) && (
 					<Text
 						component={ ProductDetailButton }
 						onClick={ clickHandler }
 						isLoading={ isFetching }
+						disabled={ cantInstallPlugin }
 						isPrimary={ ! isBundle }
 						href={ onClick ? undefined : addProductUrl }
 						className={ styles[ 'checkout-button' ] }

diff --git a/projects/packages/my-jetpack/changelog/update-my-jetpack-cant-install-plugin b/projects/packages/my-jetpack/changelog/update-my-jetpack-cant-install-plugin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Display alert when we cant automatically install the plugin
diff --git a/projects/packages/my-jetpack/package.json b/projects/packages/my-jetpack/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-my-jetpack",
-	"version": "1.7.2",
+	"version": "1.7.3-alpha",
 	"description": "WP Admin page with information and configuration shared among all Jetpack stand-alone plugins",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/my-jetpack/#readme",
 	"bugs": {

diff --git a/projects/packages/my-jetpack/src/class-initializer.php b/projects/packages/my-jetpack/src/class-initializer.php
@@ -28,7 +28,7 @@ class Initializer {
 	 *
 	 * @var string
 	 */
-	const PACKAGE_VERSION = '1.7.2';
+	const PACKAGE_VERSION = '1.7.3-alpha';
 
 	/**
 	 * Initialize My Jetapack

diff --git a/projects/packages/my-jetpack/src/products/class-product.php b/projects/packages/my-jetpack/src/products/class-product.php
@@ -112,6 +112,7 @@ public static function get_info() {
 		}
 		return array(
 			'slug'                     => static::$slug,
+			'plugin_slug'              => static::$plugin_slug,
 			'name'                     => static::get_name(),
 			'title'                    => static::get_title(),
 			'description'              => static::get_description(),