A4A: Sites Dashboard - Update and adds some improvements to the route…

…s code (#88800) * constants.js rename by constants.ts * Remove the A4A_SITES_DASHBOARD_DEFAULT_FEATURE constant * Add the missing key prop to NavITem * Move out the component the filtersMap constant * setSelectedSiteFeature method should accept undefined * Improve the Jetpack Preview Pane. Set Boost as the default selected tab * Move the Activity Preview Pane code to its own folder with the style.scss file * Add the missing siteId prop to the ActivityCardList We were getting a Warning in the console.
Automattic · Mar 25, 2024 · 7e62f53 · 7e62f53
1 parent 91e777d
commit 7e62f53
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 77 deletions.
diff --git a/client/a8c-for-agencies/sections/sites/constants.js b/client/a8c-for-agencies/sections/sites/constants.js
diff --git a/client/a8c-for-agencies/sections/sites/constants.ts b/client/a8c-for-agencies/sections/sites/constants.ts
@@ -0,0 +1 @@
+export const A4A_SITES_DASHBOARD_DEFAULT_CATEGORY = 'overview';
diff --git a/client/a8c-for-agencies/sections/sites/controller.tsx b/client/a8c-for-agencies/sections/sites/controller.tsx
@@ -1,14 +1,13 @@
 import { Context, type Callback } from '@automattic/calypso-router';
 import { setAllSitesSelected } from 'calypso/state/ui/actions';
 import SitesSidebar from '../../components/sidebar-menu/sites';
-import { A4A_SITES_DASHBOARD_DEFAULT_FEATURE } from './constants';
 import SitesDashboard from './sites-dashboard';
 import { SitesDashboardProvider } from './sites-dashboard-provider';
 
 function configureSitesContext( isFavorites: boolean, context: Context ) {
 	const category = context.params.category;
 	const siteUrl = context.params.siteUrl;
-	const siteFeature = context.params.feature || A4A_SITES_DASHBOARD_DEFAULT_FEATURE;
+	const siteFeature = context.params.feature;
 	const hideListingInitialState = !! siteUrl;
 
 	const { s: search, page: contextPage, issue_types, sort_field, sort_direction } = context.query;

diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard/index.tsx
@@ -2,7 +2,7 @@ import page from '@automattic/calypso-router';
 import { isWithinBreakpoint } from '@automattic/viewport';
 import classNames from 'classnames';
 import { translate } from 'i18n-calypso';
-import React, { useContext, useEffect, useState, useMemo, useCallback } from 'react';
+import React, { useContext, useEffect, useState, useCallback } from 'react';
 import Layout from 'calypso/a8c-for-agencies/components/layout';
 import LayoutColumn from 'calypso/a8c-for-agencies/components/layout/column';
 import LayoutHeader, {
@@ -32,15 +32,22 @@ import { checkIfJetpackSiteGotDisconnected } from 'calypso/state/jetpack-agency-
 import useProductsQuery from 'calypso/state/partner-portal/licenses/hooks/use-products-query';
 import { getIsPartnerOAuthTokenLoaded } from 'calypso/state/partner-portal/partner/selectors';
 import { setSelectedSiteId } from 'calypso/state/ui/actions';
-import {
-	A4A_SITES_DASHBOARD_DEFAULT_CATEGORY,
-	A4A_SITES_DASHBOARD_DEFAULT_FEATURE,
-} from '../constants';
+import { A4A_SITES_DASHBOARD_DEFAULT_CATEGORY } from '../constants';
 import SitesDashboardContext from '../sites-dashboard-context';
 import SiteNotifications from '../sites-notifications';
 
 import './style.scss';
 
+const filtersMap: AgencyDashboardFilterMap[] = [
+	{ filterType: 'all_issues', ref: 1 },
+	{ filterType: 'backup_failed', ref: 2 },
+	{ filterType: 'backup_warning', ref: 3 },
+	{ filterType: 'threats_found', ref: 4 },
+	{ filterType: 'site_disconnected', ref: 5 },
+	{ filterType: 'site_down', ref: 6 },
+	{ filterType: 'plugin_updates', ref: 7 },
+];
+
 export default function SitesDashboard() {
 	useQueryJetpackPartnerPortalPartner();
 	const jetpackSiteDisconnected = useSelector( checkIfJetpackSiteGotDisconnected );
@@ -54,19 +61,6 @@ export default function SitesDashboard() {
 		setSelectedCategory: setCategory,
 	} = useContext( SitesDashboardContext );
 
-	const filtersMap = useMemo< AgencyDashboardFilterMap[] >(
-		() => [
-			{ filterType: 'all_issues', ref: 1 },
-			{ filterType: 'backup_failed', ref: 2 },
-			{ filterType: 'backup_warning', ref: 3 },
-			{ filterType: 'threats_found', ref: 4 },
-			{ filterType: 'site_disconnected', ref: 5 },
-			{ filterType: 'site_down', ref: 6 },
-			{ filterType: 'plugin_updates', ref: 7 },
-		],
-		[]
-	);
-
 	const isLargeScreen = isWithinBreakpoint( '>960px' );
 	const { data: products } = useProductsQuery();
 	const isPartnerOAuthTokenLoaded = useSelector( getIsPartnerOAuthTokenLoaded );
@@ -147,12 +141,7 @@ export default function SitesDashboard() {
 		// We need a category in the URL if we have a selected site
 		if ( sitesViewState.selectedSite && ! category ) {
 			setCategory( A4A_SITES_DASHBOARD_DEFAULT_CATEGORY );
-		} else if (
-			category &&
-			sitesViewState.selectedSite &&
-			selectedSiteFeature &&
-			selectedSiteFeature !== A4A_SITES_DASHBOARD_DEFAULT_FEATURE // If the selected feature is the default one, we can leave the url a little cleaner.
-		) {
+		} else if ( category && sitesViewState.selectedSite && selectedSiteFeature ) {
 			page.replace(
 				`/sites/${ category }/${ sitesViewState.selectedSite.url }/${ selectedSiteFeature }`
 			);
@@ -173,8 +162,6 @@ export default function SitesDashboard() {
 	const closeSitePreviewPane = useCallback( () => {
 		if ( sitesViewState.selectedSite ) {
 			setSitesViewState( { ...sitesViewState, type: 'table', selectedSite: undefined } );
-			// We reset the feature to its default upon closing, instead of setting it to undefined. This way, when users switch sites while a site is selected, the feature remains consistent.
-			setSelectedSiteFeature( A4A_SITES_DASHBOARD_DEFAULT_FEATURE );
 		}
 	}, [ sitesViewState, setSelectedSiteFeature ] );
 

diff --git a/client/a8c-for-agencies/sections/sites/types.ts b/client/a8c-for-agencies/sections/sites/types.ts
@@ -12,7 +12,7 @@ export interface SitesDashboardContextInterface {
 	setSelectedSiteUrl: ( siteUrl: string ) => void;
 
 	selectedSiteFeature?: string;
-	setSelectedSiteFeature: ( siteFeature: string ) => void;
+	setSelectedSiteFeature: ( siteFeature: string | undefined ) => void;
 
 	hideListing?: boolean;
 	setHideListing: ( hideListing: boolean ) => void;

diff --git a/...k-cloud/sections/agency-dashboard/sites-overview/site-feature-previews/activity/index.tsx b/...k-cloud/sections/agency-dashboard/sites-overview/site-feature-previews/activity/index.tsx
@@ -0,0 +1,13 @@
+import ActivityLogV2 from 'calypso/my-sites/activity/activity-log-v2';
+import SitePreviewPaneContent from '../../site-preview-pane/site-preview-pane-content';
+
+import 'calypso/my-sites/activity/activity-log-v2/style.scss';
+import './style.scss';
+
+export function JetpackActivityPreview() {
+	return (
+		<SitePreviewPaneContent>
+			<ActivityLogV2 />
+		</SitePreviewPaneContent>
+	);
+}
diff --git a/...-cloud/sections/agency-dashboard/sites-overview/site-feature-previews/activity/style.scss b/...-cloud/sections/agency-dashboard/sites-overview/site-feature-previews/activity/style.scss
@@ -0,0 +1,3 @@
+.activity-log-v2 {
+	text-align: left;
+}
diff --git a/...cloud/sections/agency-dashboard/sites-overview/site-feature-previews/jetpack-activity.tsx b/...cloud/sections/agency-dashboard/sites-overview/site-feature-previews/jetpack-activity.tsx
diff --git a/...d/sections/agency-dashboard/sites-overview/site-feature-previews/jetpack-preview-pane.tsx b/...d/sections/agency-dashboard/sites-overview/site-feature-previews/jetpack-preview-pane.tsx
@@ -1,13 +1,10 @@
 import { useTranslate } from 'i18n-calypso';
 import React, { useCallback, useContext, useEffect, useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import SitesDashboardContext from 'calypso/a8c-for-agencies/sections/sites/sites-dashboard-context';
-import { setSelectedSiteId } from 'calypso/state/ui/actions';
-import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import { useJetpackAgencyDashboardRecordTrackEvent } from '../../hooks';
 import SitePreviewPane, { createFeaturePreview } from '../site-preview-pane';
 import { SitePreviewPaneProps } from '../site-preview-pane/types';
-import { JetpackActivityPreview } from './jetpack-activity';
+import { JetpackActivityPreview } from './activity';
 import { JetpackBackupPreview } from './jetpack-backup';
 import { JetpackBoostPreview } from './jetpack-boost';
 import { JetpackMonitorPreview } from './jetpack-monitor';
@@ -25,15 +22,6 @@ export function JetpackPreviewPane( {
 	const translate = useTranslate();
 	const recordEvent = useJetpackAgencyDashboardRecordTrackEvent( [ site ], ! isSmallScreen );
 
-	const dispatch = useDispatch();
-	const selectedSiteId = useSelector( getSelectedSiteId );
-
-	useEffect( () => {
-		if ( site ) {
-			dispatch( setSelectedSiteId( site.blog_id ) );
-		}
-	}, [ dispatch, site ] );
-
 	const trackEvent = useCallback(
 		( eventName: string ) => {
 			recordEvent( eventName );
@@ -43,14 +31,23 @@ export function JetpackPreviewPane( {
 
 	const { selectedSiteFeature, setSelectedSiteFeature } = useContext( SitesDashboardContext );
 
+	useEffect( () => {
+		if ( selectedSiteFeature === undefined ) {
+			setSelectedSiteFeature( 'jetpack_boost' );
+		}
+		return () => {
+			setSelectedSiteFeature( undefined );
+		};
+	}, [] );
+
 	// Jetpack features: Boost, Backup, Monitor, Stats
 	const features = useMemo(
 		() => [
 			createFeaturePreview(
 				'jetpack_boost',
 				'Boost',
 				true,
-				selectedSiteFeature,
+				selectedSiteFeature ?? 'jetpack_boost',
 				setSelectedSiteFeature,
 				<JetpackBoostPreview site={ site } trackEvent={ trackEvent } hasError={ hasError } />
 			),
@@ -106,18 +103,10 @@ export function JetpackPreviewPane( {
 				true,
 				selectedSiteFeature,
 				setSelectedSiteFeature,
-				<JetpackActivityPreview isLoading={ ! selectedSiteId } />
+				<JetpackActivityPreview />
 			),
 		],
-		[
-			selectedSiteFeature,
-			setSelectedSiteFeature,
-			site,
-			trackEvent,
-			hasError,
-			translate,
-			selectedSiteId,
-		]
+		[ selectedSiteFeature, setSelectedSiteFeature, site, trackEvent, hasError, translate ]
 	);
 
 	return (

diff --git a/client/jetpack-cloud/sections/agency-dashboard/sites-overview/site-preview-pane/index.tsx b/client/jetpack-cloud/sections/agency-dashboard/sites-overview/site-preview-pane/index.tsx
@@ -73,7 +73,11 @@ export default function SitePreviewPane( {
 			return null;
 		}
 		return (
-			<NavItem selected={ featureTab.selected } onClick={ featureTab.onClick }>
+			<NavItem
+				key={ featureTab.key }
+				selected={ featureTab.selected }
+				onClick={ featureTab.onClick }
+			>
 				{ featureTab.label }
 			</NavItem>
 		);

diff --git a/client/my-sites/activity/activity-log-v2/index.tsx b/client/my-sites/activity/activity-log-v2/index.tsx
@@ -124,7 +124,12 @@ const ActivityLogV2: FunctionComponent = () => {
 				/>
 			) }
 			<div className="activity-log-v2__content">
-				<ActivityCardList logs={ logs } pageSize={ 10 } showFilter={ siteHasFullActivityLog } />
+				<ActivityCardList
+					logs={ logs }
+					pageSize={ 10 }
+					showFilter={ siteHasFullActivityLog }
+					siteId={ siteId }
+				/>
 			</div>
 		</Main>
 	);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const A4A_SITES_DASHBOARD_DEFAULT_CATEGORY = 'overview';