Scaffold DashboardMainApp and DashboardEntityApp

Feature Description

The GoogleSiteKitDashboard component is the entry-point to the dashboard and can be set to render differently based on the unifiedDashboard feature flag. When the feature flag for unifiedDashboard is disabled, the existing DashboardApp component should render. When the feature flag for unifiedDashboard is enabled, we should instead render either DashboardMainApp (or DashboardEntityApp, if on an Entity Dashboard page).

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Two new components should be scaffolded in the assets/js/components folder: DashboardMainApp and DashboardEntityApp. They should only render the Site Kit Header (assets/js/components/Header.js) component for now.
• The GoogleSiteKitDashboard component should, when unifiedDashboard feature flag is enabled: render DashboardMainApp. The DashboardDetailsApp should, when unifiedDashboard feature flag is enabled, render DashboardEntityApp.
• If the unifiedDashboard feature flag is not enabled: GoogleSiteKitDashboard and DashboardDetailsApp should behave as they currently do today.

Implementation Brief

Inside assets/js/components, create the following files:

• dashboard-main/DashboardMainApp.js
• dashboard-entity/DashboardEntityApp.js

Inside DashboardMainApp and DashboardEntityApp:

• Import Header from assets/js/components/Header
• Create a simple functional component that renders the Header only, and export it as the default.

Inside assets/js/googlesitekit-dashboard.js:

• Check if the unifiedDashboard feature flag is enabled using the useFeature hook.
• If the flag is NOT enabled, the existing logic should run.
• If the flag IS enabled, render the new DashboardEntityApp component

Inside assets/js/googlesitekit-dashboard-details.js:

• Create a new functional component, GoogleSitekitDashboardDetails, in the same way as has been done in googlesitekit-dashboard
• Inside the new GoogleSitekitDashboardDetails function, check if the unifiedDashboard feature flag is enabled using the useFeature hook.
  • If the flag is NOT enabled, the function should return <DashboardDetailsApp />.
  • If the flag IS enabled, return <DashboardEntityApp/>
• Refactor the render call inside domReady to render <GoogleSitekitDashboardDetails /> inside of <Root> instead of <DashboardDetailsApp />. See the gist below:

const GoogleSitekitDashboardDetails = () => {
	const unifiedDashboardEnabled = useFeature( 'unifiedDashboard' );

	if ( unifiedDashboardEnabled ) {
		return <DashboardEntityApp />;
	}

	return <DashboardDetailsApp />;
};

domReady( () => {
	// ...
	render(
		<Root viewContext={ VIEW_CONTEXT_PAGE_DASHBOARD }>
			<GoogleSitekitDashboardDetails />
		</Root>,
		renderTarget
	);
}

Test Coverage

• No new tests required.

Visual Regression Changes

• Unlikely to require VRT updates.

QA Brief

• Enable the unifiedDashboard feature flag in the tester plugin.
• Go to the main dashboard: wp-admin/admin.php?page=googlesitekit-dashboard.
  • You should see an empty page with a plain header (no help menu or date select).
  • If you search the source code, near the bottom you should find a <div> with an ID of js-googlesitekit-dashboard.
• Append a permaLink query string to the URL (e.g. wp-admin/admin.php?page=googlesitekit-dashboard&permaLink=test) to load the entity dashboard.
  • Again, you should see an empty page with a plain header (no help menu or date select).
  • However, if you search the source code, you should find a <div> with an ID of js-googlesitekit-dashboard-details.

Changelog entry

• N/A

[aaemnnosttv]

Inside assets/js/googlesitekit-dashboard.js

• If the permalink query argument is present, render the new DashboardEntityApp component

@johnPhillips this entrypoint would remain specific to the main dashboard. I see now that this is how it is defined in the ACs which I think may be a mistake. As far as I understand it, GoogleSitekitDashboard only decides to render DashboardApp or the new DashboardMainApp based on the feature flag. Similarly, the assets/js/googlesitekit-dashboard-details.js entry would conditionally render DashboardDetailsApp or the new DashboardEntityApp as you have defined – no query param checks should be needed in either case because that is still done on page load and controls which entry and render target are loaded.

@tofumatt can you confirm and if so, would you please update the ACs?

[asvinb]

QA: ✅

• Enabled the unifiedDashboard feature flag via the tester plugin
• Visited the main dashboard and it’s an empty page with a plain header.
• div with js-googlesitekit-dashboard as ID present.
• 
• Added the permaLink URL param
• Empty page with plain header displayed as expected.
• div with js-googlesitekit-dashboard-details as ID present.
•