feat: Enhance Connectors page on read-only file system

backport-changelog/7.0/11779.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/11779
+
+* https://github.com/WordPress/gutenberg/pull/77521

lib/experimental/connectors/default-connectors.php

@@ -554,7 +554,8 @@ function _gutenberg_get_connector_script_module_data( array $data ): array {
 		$connectors[ $connector_id ] = $connector_out;
 	}
 	ksort( $connectors );
-	$data['connectors'] = $connectors;
+	$data['connectors']        = $connectors;
+	$data['isFileModDisabled'] = ! wp_is_file_mod_allowed( 'install_plugins' );
 	return $data;
 }
 remove_filter( 'script_module_data_options-connectors-wp-admin', '_wp_connectors_get_connector_script_module_data' );

routes/connectors-home/ai-plugin-callout.tsx

@@ -197,11 +197,6 @@ export function AiPluginCallout() {
 		return null;
 	}
 
-	// Not installed and no permissions to install.
-	if ( pluginStatus === 'not-installed' && canInstallPlugins === false ) {
-		return null;
-	}
-
 	// Installed but can't activate (no manage permissions).
 	if ( pluginStatus === 'inactive' && canManagePlugins === false ) {
 		return null;
@@ -215,6 +210,8 @@ export function AiPluginCallout() {
 		( ! initialHasConnectedProvider || justActivated );
 	const showInstallActivate =
 		pluginStatus === 'not-installed' || pluginStatus === 'inactive';
+	const hideButtons =
+		pluginStatus === 'not-installed' && canInstallPlugins === false;
 
 	const getMessage = () => {
 		if ( isJustConnected ) {
@@ -262,29 +259,30 @@ export function AiPluginCallout() {
 						a: <ExternalLink href={ AI_PLUGIN_URL } />,
 					} ) }
 				</p>
-				{ showInstallActivate ? (
-					<Button
-						variant="primary"
-						size="compact"
-						isBusy={ isBusy }
-						disabled={ getPrimaryButtonProps().disabled }
-						accessibleWhenDisabled
-						onClick={ getPrimaryButtonProps().onClick }
-					>
-						{ getPrimaryButtonProps().label }
-					</Button>
-				) : (
-					<Button
-						ref={ actionButtonRef }
-						variant="secondary"
-						size="compact"
-						href={ addQueryArgs( 'options-general.php', {
-							page: AI_PLUGIN_PAGE_SLUG,
-						} ) }
-					>
-						{ __( 'Control features in the AI plugin' ) }
-					</Button>
-				) }
+				{ ! hideButtons &&
+					( showInstallActivate ? (
+						<Button
+							variant="primary"
+							size="compact"
+							isBusy={ isBusy }
+							disabled={ getPrimaryButtonProps().disabled }
+							accessibleWhenDisabled
+							onClick={ getPrimaryButtonProps().onClick }
+						>
+							{ getPrimaryButtonProps().label }
+						</Button>
+					) : (
+						<Button
+							ref={ actionButtonRef }
+							variant="secondary"
+							size="compact"
+							href={ addQueryArgs( 'options-general.php', {
+								page: AI_PLUGIN_PAGE_SLUG,
+							} ) }
+						>
+							{ __( 'Control features in the AI plugin' ) }
+						</Button>
+					) ) }
 			</div>
 			<WpLogoDecoration />
 		</div>

routes/connectors-home/default-connectors.tsx

@@ -12,8 +12,8 @@ import {
 	type ConnectorRenderProps,
 } from '@wordpress/connectors';
 import { select } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { Badge } from '@wordpress/ui';
+import { __, sprintf } from '@wordpress/i18n';
+import { Badge, Link } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -43,22 +43,34 @@ interface ConnectorData {
 	authentication: NonNullable< ConnectorConfig[ 'authentication' ] >;
 }
 
-/**
- * Reads connector data passed from PHP via the script module data mechanism.
- */
-export function getConnectorData(): Record< string, ConnectorData > {
+interface ConnectorScriptModuleData {
+	connectors?: Record< string, ConnectorData >;
+	isFileModDisabled?: boolean;
+}
+
+function getConnectorScriptModuleData(): ConnectorScriptModuleData {
 	try {
-		const parsed = JSON.parse(
+		return JSON.parse(
 			document.getElementById(
 				'wp-script-module-data-options-connectors-wp-admin'
-			)?.textContent ?? ''
+			)?.textContent ?? '{}'
 		);
-		return parsed?.connectors ?? {};
 	} catch {
 		return {};
 	}
 }
 
+/**
+ * Reads connector data passed from PHP via the script module data mechanism.
+ */
+export function getConnectorData(): Record< string, ConnectorData > {
+	return getConnectorScriptModuleData().connectors ?? {};
+}
+
+export function getIsFileModDisabled(): boolean {
+	return !! getConnectorScriptModuleData().isFileModDisabled;
+}
+
 const CONNECTOR_LOGOS: Record< string, React.ComponentType > = {
 	google: GeminiLogo,
 	openai: OpenAILogo,
@@ -96,6 +108,19 @@ const ConnectedBadge = () => (
 	</span>
 );
 
+const PluginDirectoryLink = ( { slug }: { slug: string } ) => (
+	<Link
+		href={ sprintf(
+			/* translators: %s: plugin slug. */
+			__( 'https://wordpress.org/plugins/%s/' ),
+			slug
+		) }
+		openInNewTab
+	>
+		{ __( 'Learn more' ) }
+	</Link>
+);
+
 const UnavailableActionBadge = () => <Badge>{ __( 'Not available' ) }</Badge>;
 
 function ApiKeyConnector( {
@@ -166,7 +191,12 @@ function ApiKeyConnector( {
 			actionArea={
 				<HStack spacing={ 3 } expanded={ false }>
 					{ isConnected && <ConnectedBadge /> }
-					{ showUnavailableBadge && <UnavailableActionBadge /> }
+					{ showUnavailableBadge &&
+						( pluginSlug ? (
+							<PluginDirectoryLink slug={ pluginSlug } />
+						) : (
+							<UnavailableActionBadge />
+						) ) }
 					{ showActionButton && (
 						<Button
 							ref={ actionButtonRef }

routes/connectors-home/stage.tsx

@@ -16,13 +16,18 @@ import { useSelect } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+// eslint-disable-next-line @wordpress/use-recommended-components
+import { Notice } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import { AiPluginCallout } from './ai-plugin-callout';
-import { registerDefaultConnectors } from './default-connectors';
+import {
+	getIsFileModDisabled,
+	registerDefaultConnectors,
+} from './default-connectors';
 import { unlock } from '../lock-unlock';
 
 const { store } = unlock( connectorsPrivateApis );
@@ -31,20 +36,62 @@ const { store } = unlock( connectorsPrivateApis );
 registerDefaultConnectors();
 
 function ConnectorsPage() {
-	const { connectors, canInstallPlugins } = useSelect(
-		( select ) => ( {
-			connectors: unlock( select( store ) ).getConnectors(),
-			canInstallPlugins: select( coreStore ).canUser( 'create', {
-				kind: 'root',
-				name: 'plugin',
-			} ),
-		} ),
+	const isFileModDisabled = getIsFileModDisabled();
+
+	const { connectors, canInstallPlugins, isAiPluginInstalled } = useSelect(
+		( select ) => {
+			const coreSelect = select( coreStore );
+			const aiPlugin = coreSelect.getEntityRecord(
+				'root',
+				'plugin',
+				'ai/ai'
+			);
+			return {
+				connectors: unlock( select( store ) ).getConnectors(),
+				canInstallPlugins: coreSelect.canUser( 'create', {
+					kind: 'root',
+					name: 'plugin',
+				} ),
+				isAiPluginInstalled: !! aiPlugin,
+			};
+		},
 		[]
 	);
 
 	const renderableConnectors = connectors.filter(
 		( connector: ConnectorConfig ) => connector.render
 	);
+	const aiProviderPluginSlugs = Array.from(
+		new Set(
+			connectors
+				.filter(
+					( connector: ConnectorConfig ) =>
+						connector.type === 'ai_provider'
+				)
+				.map(
+					( connector: ConnectorConfig ) =>
+						connector.plugin?.file?.split( '/' )[ 0 ]
+				)
+				.filter( ( slug ): slug is string => !! slug )
+		)
+	).sort();
+	const installedPluginSlugs = new Set(
+		connectors
+			.filter(
+				( connector: ConnectorConfig ) => connector.plugin?.isInstalled
+			)
+			.map(
+				( connector: ConnectorConfig ) =>
+					connector.plugin?.file?.split( '/' )[ 0 ]
+			)
+			.filter( ( slug: string | undefined ): slug is string => !! slug )
+	);
+	if ( isAiPluginInstalled ) {
+		installedPluginSlugs.add( 'ai' );
+	}
+	const manualInstallPluginSlugs = [ 'ai', ...aiProviderPluginSlugs ].filter(
+		( slug ) => ! installedPluginSlugs.has( slug )
+	);
 	const isEmpty = renderableConnectors.length === 0;
 
 	return (
@@ -59,6 +106,23 @@ function ConnectorsPage() {
 					isEmpty ? ' connectors-page--empty' : ''
 				}` }
 			>
+				{ manualInstallPluginSlugs.length > 0 &&
+					( isFileModDisabled || ! canInstallPlugins ) && (
+						<Notice.Root
+							intent="info"
+							className="connectors-page__file-mods-notice"
+						>
+							<Notice.Description>
+								{ isFileModDisabled
+									? __(
+											'Plugins cannot be installed here due to your site configuration. Install them manually using your normal deployment workflow.'
+									  )
+									: __(
+											'You do not have permission to install plugins. Please ask a site administrator to install them for you.'
+									  ) }
+							</Notice.Description>
+						</Notice.Root>
+					) }
 				{ isEmpty ? (
 					<VStack
 						alignment="center"
@@ -109,7 +173,7 @@ function ConnectorsPage() {
 						</VStack>
 					</VStack>
 				) }
-				{ canInstallPlugins && (
+				{ canInstallPlugins && ! isFileModDisabled && (
 					<p>
 						{ createInterpolateElement(
 							__(

routes/connectors-home/style.scss

@@ -29,6 +29,10 @@ $sticky-header-clearance: 120px;
 		scroll-margin-top: $sticky-header-clearance;
 	}
 
+	&__file-mods-notice {
+		margin-bottom: 16px;
+	}
+
 	&--empty {
 		flex-grow: 1;
 		display: flex;

test/e2e/specs/admin/connectors.spec.js

@@ -461,11 +461,13 @@ test.describe( 'Connectors', () => {
 			slug: 'gutenberg-test-connectors-never-installed',
 			name: 'Test Install Required Connector',
 			action: 'Install',
+			pluginSlug: 'gutenberg-test-connectors-never-installed',
 		};
 		const activateRequiredConnector = {
 			slug: 'hello',
 			name: 'Test Activate Required Connector',
 			action: 'Activate',
+			pluginSlug: 'hello',
 		};
 		const clearCapabilityRestriction = async ( requestUtils ) => {
 			await requestUtils.rest( {
@@ -519,7 +521,7 @@ test.describe( 'Connectors', () => {
 					CONNECTORS_PAGE_QUERY
 				);
 
-				for ( const { slug, name, action } of [
+				for ( const { slug, name, action, pluginSlug } of [
 					installRequiredConnector,
 					activateRequiredConnector,
 				] ) {
@@ -528,9 +530,14 @@ test.describe( 'Connectors', () => {
 					await expect(
 						card.getByRole( 'heading', { name, level: 2 } )
 					).toBeVisible();
-					await expect(
-						card.getByText( 'Not available' )
-					).toBeVisible();
+					const learnMoreLink = card.getByRole( 'link', {
+						name: 'Learn more',
+					} );
+					await expect( learnMoreLink ).toBeVisible();
+					await expect( learnMoreLink ).toHaveAttribute(
+						'href',
+						`https://wordpress.org/plugins/${ pluginSlug }/`
+					);
 					await expect(
 						card.getByRole( 'button', { name: action } )
 					).toBeHidden();