A4A: Integrate Plugin Management v2 into the A4A dashboard (#98413)

* Add plugins management to A4A dashboard * Add feature flag for Plugins Management * Update feature/section flags
Automattic · Jan 22, 2025 · ac00e61 · ac00e61
1 parent 51015ca
commit ac00e61
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 35 deletions.
diff --git a/client/a8c-for-agencies/components/sidebar-menu/hooks/use-main-menu-items.tsx b/client/a8c-for-agencies/components/sidebar-menu/hooks/use-main-menu-items.tsx
@@ -10,6 +10,7 @@ import {
 	commentAuthorAvatar,
 	people,
 	starEmpty,
+	plugins,
 } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import { useMemo } from 'react';
@@ -28,6 +29,7 @@ import {
 	A4A_MARKETPLACE_HOSTING_LINK,
 	A4A_MIGRATIONS_LINK,
 	A4A_SETTINGS_LINK,
+	A4A_PLUGINS_LINK,
 	A4A_PARTNER_DIRECTORY_DASHBOARD_LINK,
 	A4A_REFERRALS_DASHBOARD,
 	A4A_TEAM_LINK,
@@ -106,18 +108,6 @@ const useMainMenuItems = ( path: string ) => {
 				},
 				withChevron: true,
 			},
-			/*
-			// Hide this section until we support plugin management in A4A
-			{
-				icon: plugins,
-				path: '/',
-				link: A4A_PLUGINS_LINK,
-				title: translate( 'Plugins' ),
-				trackEventProps: {
-					menu_item: 'Automattic for Agencies / Plugins',
-				},
-			},
-			*/
 			{
 				icon: tag,
 				path: A4A_MARKETPLACE_LINK,
@@ -140,6 +130,19 @@ const useMainMenuItems = ( path: string ) => {
 			},
 			...referralItems,
 			migrationMenuItem,
+			...( isSectionNameEnabled( 'a8c-for-agencies-plugins' )
+				? [
+						{
+							icon: plugins,
+							path: '/',
+							link: A4A_PLUGINS_LINK,
+							title: translate( 'Plugins' ),
+							trackEventProps: {
+								menu_item: 'Automattic for Agencies / Plugins',
+							},
+						},
+				  ]
+				: [] ),
 			...( config.isEnabled( 'a4a-partner-directory' ) ||
 			config.isEnabled( 'a8c-for-agencies-agency-tier' )
 				? [

diff --git a/client/a8c-for-agencies/lib/permission.ts b/client/a8c-for-agencies/lib/permission.ts
@@ -14,6 +14,7 @@ import {
 	A4A_SITES_LINK_WALKTHROUGH_TOUR,
 	A4A_SITES_LINK_ADD_NEW_SITE_TOUR,
 	A4A_SITES_CONNECT_URL_LINK,
+	A4A_PLUGINS_LINK,
 	A4A_MARKETPLACE_LINK,
 	A4A_MARKETPLACE_PRODUCTS_LINK,
 	A4A_MARKETPLACE_HOSTING_LINK,
@@ -91,20 +92,23 @@ const MEMBER_ACCESSIBLE_PATHS: Record< string, string[] > = {
 	[ A4A_MIGRATIONS_PAYMENT_SETTINGS ]: [ 'a4a_read_migrations' ],
 	[ A4A_TEAM_INVITE_LINK ]: [ 'a4a_edit_user_invites' ],
 	[ A4A_AGENCY_TIER_LINK ]: [ 'a4a_read_agency_tier' ],
+	[ A4A_PLUGINS_LINK ]: [ 'a4a_read_managed_sites' ],
 };
 
 const MEMBER_ACCESSIBLE_DYNAMIC_PATHS: Record< string, string[] > = {
 	'sites-overview': [ 'a4a_read_managed_sites' ],
 	team: [ 'a4a_read_users' ],
 	marketplace: [ 'a4a_read_marketplace' ],
 	licenses: [ 'a4a_jetpack_licensing' ],
+	plugins: [ 'a4a_read_managed_sites' ],
 };
 
 const DYNAMIC_PATH_PATTERNS: Record< string, RegExp > = {
 	'sites-overview': /^\/sites\/overview\/[^/]+(\/.*)?$/,
 	marketplace: /^\/marketplace\/[^/]+\/[^/]+(\/.*)?$/,
 	licenses: /^\/purchases\/licenses(\/.*)?$/,
 	team: /^\/team(\/.*)?$/,
+	plugins: /^\/plugins(\/.*)?$/,
 };
 
 export const isPathAllowed = ( pathname: string, agency: Agency | null ) => {

diff --git a/client/a8c-for-agencies/sections/plugins/controller.tsx b/client/a8c-for-agencies/sections/plugins/controller.tsx
@@ -1,29 +1,34 @@
+import page from '@automattic/calypso-router';
 import { type Callback } from '@automattic/calypso-router';
-import { LayoutWithGuidedTour as Layout } from 'calypso/a8c-for-agencies/components/layout/layout-with-guided-tour';
-import LayoutTop from 'calypso/a8c-for-agencies/components/layout/layout-with-payment-notification';
-import MobileSidebarNavigation from 'calypso/a8c-for-agencies/components/sidebar/mobile-sidebar-navigation';
-import LayoutBody from 'calypso/layout/hosting-dashboard/body';
-import LayoutHeader, {
-	LayoutHeaderSubtitle as Subtitle,
-	LayoutHeaderTitle as Title,
-} from 'calypso/layout/hosting-dashboard/header';
+import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
+import { A4A_PLUGINS_LINK } from '../../components/sidebar-menu/lib/constants';
 import MainSidebar from '../../components/sidebar-menu/main';
 
-export const pluginsContext: Callback = ( context, next ) => {
+export const pluginsContext: Callback = ( context ) => {
+	const { slug } = context.params;
+	const redirectPath = slug
+		? `${ A4A_PLUGINS_LINK }/manage/sites/${ slug }`
+		: `${ A4A_PLUGINS_LINK }/manage/sites`;
+
+	page.redirect( redirectPath );
+};
+
+export const pluginManagementContext: Callback = ( context, next ) => {
 	context.secondary = <MainSidebar path={ context.path } />;
 	context.primary = (
-		<Layout title="Plugins" wide sidebarNavigation={ <MobileSidebarNavigation /> }>
-			<LayoutTop>
-				<LayoutHeader>
-					<Title>Plugins</Title>
-					<Subtitle>plugins of your agency</Subtitle>
-				</LayoutHeader>
-			</LayoutTop>
-			<LayoutBody>
-				<div>test</div>
-			</LayoutBody>
-		</Layout>
+		<>
+			<PageViewTracker title="Plugins" path={ context.path } />
+		</>
 	);
+	next();
+};
 
+export const pluginDetailsContext: Callback = ( context, next ) => {
+	context.secondary = <MainSidebar path={ context.path } />;
+	context.primary = (
+		<>
+			<PageViewTracker title="Plugins" path={ context.path } />
+		</>
+	);
 	next();
 };
diff --git a/client/a8c-for-agencies/sections/plugins/index.tsx b/client/a8c-for-agencies/sections/plugins/index.tsx
@@ -1,8 +1,29 @@
 import page from '@automattic/calypso-router';
 import { requireAccessContext } from 'calypso/a8c-for-agencies/controller';
 import { makeLayout, render as clientRender } from 'calypso/controller';
-import { pluginsContext } from './controller';
+import { renderPluginsDashboard } from 'calypso/my-sites/plugins/controller';
+import { pluginsContext, pluginManagementContext, pluginDetailsContext } from './controller';
 
 export default function () {
 	page( '/plugins', requireAccessContext, pluginsContext, makeLayout, clientRender );
+
+	page( '/plugins/:slug', requireAccessContext, pluginsContext, makeLayout, clientRender );
+
+	page(
+		'/plugins/manage/sites',
+		requireAccessContext,
+		pluginManagementContext,
+		renderPluginsDashboard,
+		makeLayout,
+		clientRender
+	);
+
+	page(
+		'/plugins/manage/sites/:slug',
+		requireAccessContext,
+		pluginDetailsContext,
+		renderPluginsDashboard,
+		makeLayout,
+		clientRender
+	);
 }
diff --git a/config/a8c-for-agencies-production.json b/config/a8c-for-agencies-production.json
@@ -47,7 +47,7 @@
 		"a8c-for-agencies-auth": true,
 		"a8c-for-agencies-landing": true,
 		"a8c-for-agencies-overview": true,
-		"a8c-for-agencies-plugins": true,
+		"a8c-for-agencies-plugins": false,
 		"a8c-for-agencies-sites": true,
 		"a8c-for-agencies-marketplace": true,
 		"a8c-for-agencies-purchases": true,

diff --git a/config/a8c-for-agencies-stage.json b/config/a8c-for-agencies-stage.json
@@ -49,7 +49,7 @@
 		"a8c-for-agencies-auth": true,
 		"a8c-for-agencies-landing": true,
 		"a8c-for-agencies-overview": true,
-		"a8c-for-agencies-plugins": true,
+		"a8c-for-agencies-plugins": false,
 		"a8c-for-agencies-sites": true,
 		"a8c-for-agencies-marketplace": true,
 		"a8c-for-agencies-purchases": true,