Forms: add dashboard tabs with feature flag (#46506)

---------

Co-authored-by: Enej Bajgoric <[email protected]>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/20932210767

Upstream-Ref: Automattic/jetpack@31a8b3c

Author: edanzer

composer.json

@@ -31,7 +31,7 @@
 		"automattic/jetpack-error": "^3.0.6",
 		"automattic/jetpack-external-connections": "^0.1.11",
 		"automattic/jetpack-external-media": "^0.7.3",
-		"automattic/jetpack-forms": "^7.3.0",
+		"automattic/jetpack-forms": "^7.4.0-alpha",
 		"automattic/jetpack-image-cdn": "^0.7.24",
 		"automattic/jetpack-import": "^0.9.13",
 		"automattic/jetpack-ip": "^0.4.10",

jetpack_vendor/automattic/jetpack-forms/CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [7.4.0-alpha] - unreleased
+
+This is an alpha version! The changes listed here are not final.
+
+### Added
+- Forms: add centralized dashboard tabs.
+
 ## [7.3.0] - 2026-01-12
 ### Security
 - Add SSRF protection for webhook URLs to prevent requests to internal networks and cloud metadata endpoints. [#46424]
@@ -2043,6 +2050,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added a new jetpack/forms package [#28409]
 - Added a public load_contact_form method for initializing the contact form module. [#28416]
 
+[7.4.0-alpha]: https://github.com/automattic/jetpack-forms/compare/v7.3.0...v7.4.0-alpha
 [7.3.0]: https://github.com/automattic/jetpack-forms/compare/v7.2.0...v7.3.0
 [7.2.0]: https://github.com/automattic/jetpack-forms/compare/v7.1.0...v7.2.0
 [7.1.0]: https://github.com/automattic/jetpack-forms/compare/v7.0.0...v7.1.0

jetpack_vendor/automattic/jetpack-forms/dist/dashboard/jetpack-forms-dashboard.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('jetpack-script-data', 'lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-dom', 'wp-dom-ready', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '4da4124d202b6334a254');
+<?php return array('dependencies' => array('jetpack-script-data', 'lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-dom', 'wp-dom-ready', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-notices', 'wp-plugins', 'wp-polyfill', 'wp-primitives', 'wp-url'), 'version' => '73b258659b48830e0d67');

jetpack_vendor/automattic/jetpack-forms/dist/dashboard/jetpack-forms-dashboard.css

@@ -14,7 +14,7 @@
  */
 class Jetpack_Forms {
 
-	const PACKAGE_VERSION = '7.3.0';
+	const PACKAGE_VERSION = '7.4.0-alpha';
 
 	/**
 	 * Load the contact form module.

jetpack_vendor/automattic/jetpack-forms/dist/dashboard/jetpack-forms-dashboard.js

@@ -1493,29 +1493,31 @@ public function update_read_status( $request ) {
 	 */
 	public function get_forms_config( WP_REST_Request $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
 		$config = array(
+			// Feature flags.
+			'isCentralFormManagementEnabled' => Contact_Form_Plugin::has_editor_feature_flag( 'central-form-management' ),
 			// From jpFormsBlocks in class-contact-form-block.php.
-			'formsResponsesUrl'         => Forms_Dashboard::get_forms_admin_url(),
-			'isMailPoetEnabled'         => Jetpack_Forms::is_mailpoet_enabled(),
-			'isHostingerReachEnabled'   => Jetpack_Forms::is_hostinger_reach_enabled(),
+			'formsResponsesUrl'              => Forms_Dashboard::get_forms_admin_url(),
+			'isMailPoetEnabled'              => Jetpack_Forms::is_mailpoet_enabled(),
+			'isHostingerReachEnabled'        => Jetpack_Forms::is_hostinger_reach_enabled(),
 			// From config in class-dashboard.php.
-			'blogId'                    => get_current_blog_id(),
-			'gdriveConnectSupportURL'   => esc_url( Redirect::get_url( 'jetpack-support-contact-form-export' ) ),
-			'pluginAssetsURL'           => Jetpack_Forms::assets_url(),
-			'siteURL'                   => ( new Status() )->get_site_suffix(),
-			'hasFeedback'               => ( new Forms_Dashboard() )->has_feedback(),
-			'isNotesEnabled'            => Forms_Dashboard::is_notes_enabled(),
-			'isIntegrationsEnabled'     => Jetpack_Forms::is_integrations_enabled(),
-			'isWebhooksEnabled'         => Jetpack_Forms::is_webhooks_enabled(),
-			'showDashboardIntegrations' => Jetpack_Forms::show_dashboard_integrations(),
-			'showBlockIntegrations'     => Jetpack_Forms::show_block_integrations(),
-			'showIntegrationIcons'      => Jetpack_Forms::show_integration_icons(),
-			'dashboardURL'              => Forms_Dashboard::get_forms_admin_url(),
+			'blogId'                         => get_current_blog_id(),
+			'gdriveConnectSupportURL'        => esc_url( Redirect::get_url( 'jetpack-support-contact-form-export' ) ),
+			'pluginAssetsURL'                => Jetpack_Forms::assets_url(),
+			'siteURL'                        => ( new Status() )->get_site_suffix(),
+			'hasFeedback'                    => ( new Forms_Dashboard() )->has_feedback(),
+			'isNotesEnabled'                 => Forms_Dashboard::is_notes_enabled(),
+			'isIntegrationsEnabled'          => Jetpack_Forms::is_integrations_enabled(),
+			'isWebhooksEnabled'              => Jetpack_Forms::is_webhooks_enabled(),
+			'showDashboardIntegrations'      => Jetpack_Forms::show_dashboard_integrations(),
+			'showBlockIntegrations'          => Jetpack_Forms::show_block_integrations(),
+			'showIntegrationIcons'           => Jetpack_Forms::show_integration_icons(),
+			'dashboardURL'                   => Forms_Dashboard::get_forms_admin_url(),
 			// New data.
-			'canInstallPlugins'         => current_user_can( 'install_plugins' ),
-			'canActivatePlugins'        => current_user_can( 'activate_plugins' ),
-			'exportNonce'               => wp_create_nonce( 'feedback_export' ),
-			'newFormNonce'              => wp_create_nonce( 'create_new_form' ),
-			'emptyTrashDays'            => defined( 'EMPTY_TRASH_DAYS' ) ? EMPTY_TRASH_DAYS : 0,
+			'canInstallPlugins'              => current_user_can( 'install_plugins' ),
+			'canActivatePlugins'             => current_user_can( 'activate_plugins' ),
+			'exportNonce'                    => wp_create_nonce( 'feedback_export' ),
+			'newFormNonce'                   => wp_create_nonce( 'create_new_form' ),
+			'emptyTrashDays'                 => defined( 'EMPTY_TRASH_DAYS' ) ? EMPTY_TRASH_DAYS : 0,
 		);
 
 		return rest_ensure_response( $config );

jetpack_vendor/automattic/jetpack-forms/dist/dashboard/jetpack-forms-dashboard.rtl.css

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useLocation, useNavigate } from 'react-router';
+/**
+ * Internal dependencies
+ */
+import * as Tabs from '../tabs/index.ts';
+
+type TabValue = 'forms' | 'responses';
+
+/**
+ * Route-aware top tabs for the Forms dashboard (Forms / All Responses).
+ * This component controls routing; it does not manage filters.
+ *
+ * @return {JSX.Element} The tabs component.
+ */
+export default function FormsResponsesTabs(): JSX.Element {
+	const location = useLocation();
+	const navigate = useNavigate();
+
+	const value: TabValue = location.pathname === '/forms' ? 'forms' : 'responses';
+
+	const onValueChange = useCallback(
+		( nextValue: TabValue ) => {
+			navigate( nextValue === 'forms' ? '/forms' : '/responses' );
+		},
+		[ navigate ]
+	);
+
+	return (
+		<Tabs.Root value={ value } onValueChange={ onValueChange }>
+			<Tabs.List density="compact">
+				<Tabs.Tab value="forms">{ __( 'Forms', 'jetpack-forms' ) }</Tabs.Tab>
+				<Tabs.Tab value="responses">{ __( 'All Responses', 'jetpack-forms' ) }</Tabs.Tab>
+			</Tabs.List>
+		</Tabs.Root>
+	);
+}

jetpack_vendor/automattic/jetpack-forms/src/class-jetpack-forms.php

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { JetpackLogo } from '@automattic/jetpack-components';
+import { useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useNavigate } from 'react-router';
+/**
+ * Internal dependencies
+ */
+import useConfigValue from '../../hooks/use-config-value.ts';
+import FormsResponsesTabs from '../components/forms-responses-tabs/index.tsx';
+import Page from '../components/page/index.tsx';
+
+/**
+ * Forms dashboard "Forms" route placeholder.
+ *
+ * @return {JSX.Element|null} The placeholder page, or null when redirecting.
+ */
+export default function FormsDashboardForms(): JSX.Element | null {
+	const navigate = useNavigate();
+	const isCentralFormManagementEnabled = useConfigValue( 'isCentralFormManagementEnabled' );
+
+	useEffect( () => {
+		if ( isCentralFormManagementEnabled === false ) {
+			navigate( '/responses', { replace: true } );
+		}
+	}, [ isCentralFormManagementEnabled, navigate ] );
+
+	// Avoid rendering the placeholder if the flag is off (we'll redirect).
+	if ( isCentralFormManagementEnabled === false ) {
+		return null;
+	}
+
+	return (
+		<div className="jp-forms-layout__surface is-stage">
+			<Page
+				title={
+					<div className="jp-forms-page-header-title">
+						<JetpackLogo showText={ false } width={ 20 } />
+						{ __( 'Forms', 'jetpack-forms' ) }
+					</div>
+				}
+				subTitle={ __( 'View and manage all your forms in one place.', 'jetpack-forms' ) }
+				tabs={ <FormsResponsesTabs /> }
+				hasPadding={ false }
+			>
+				<p style={ { fontWeight: 'bold', margin: '20px' } }>
+					{ __( 'Forms will appear here', 'jetpack-forms' ) }
+				</p>
+			</Page>
+		</div>
+	);
+}