Forms: Add useConfigValue hook and start using it in the forms dashboard (#45472)

* Forms: Add new config hook

* Add tests

* Update to useConfigValue instead of useFormsConfig and config

* Remove the on page config for the dashboard

* changelog

* simply the resolver

* Update the readme with example to add a new config

* update code to be more readable

* Add unknown error constant

* Update getConfig resolver

* Update the includes to be at the right spot

* Add form response type

* fix lint error

* remove comment

Author: enejb

projects/packages/forms/changelog/update-use-config-forms

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Forms: add new useConfigValue hook and start using it on the dashboard

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/integration-card/plugin-action-button.tsx

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useFormsConfig from '../../../../../hooks/use-forms-config';
+import useConfigValue from '../../../../../hooks/use-config-value';
 import { usePluginInstallation } from '../hooks/use-plugin-installation';
 
 type PluginActionButtonProps = {
@@ -34,9 +34,9 @@ const PluginActionButton = ( {
 		trackEventName
 	);
 
-	const config = useFormsConfig();
-	const canUserInstallPlugins = Boolean( config?.canInstallPlugins );
-	const canUserActivatePlugins = Boolean( config?.canActivatePlugins );
+	// Permissions from consolidated Forms config (shared across editor and dashboard)
+	const canUserInstallPlugins = useConfigValue( 'canInstallPlugins' );
+	const canUserActivatePlugins = useConfigValue( 'canActivatePlugins' );
 
 	const canPerformAction = isInstalled ? canUserActivatePlugins : canUserInstallPlugins;
 	const [ isReconcilingStatus, setIsReconcilingStatus ] = useState( false );

projects/packages/forms/src/blocks/contact-form/edit.tsx

@@ -33,7 +33,7 @@ import clsx from 'clsx';
 /*
  * Internal dependencies
  */
-import useFormsConfig from '../../hooks/use-forms-config';
+import useConfigValue from '../../hooks/use-config-value';
 import { store as singleStepStore } from '../../store/form-step-preview';
 import {
 	PREVIOUS_BUTTON_TEMPLATE,
@@ -168,8 +168,7 @@ function JetpackContactFormEdit( {
 		disableSummary,
 		notificationRecipients,
 	} = attributes;
-	const formsConfig = useFormsConfig();
-	const showFormIntegrations = Boolean( formsConfig?.isIntegrationsEnabled );
+	const showFormIntegrations = useConfigValue( 'isIntegrationsEnabled' );
 	const instanceId = useInstanceId( JetpackContactFormEdit );
 
 	// Backward compatibility for the deprecated customThankyou attribute.

projects/packages/forms/src/dashboard/about/index.tsx

@@ -9,13 +9,13 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import useConfigValue from '../../hooks/use-config-value';
 import AkismetIcon from '../../icons/akismet';
 import CreativeMailIcon from '../../icons/creative-mail';
 import GoogleSheetsIcon from '../../icons/google-sheets';
 import SalesforceIcon from '../../icons/salesforce';
 import CreateFormButton from '../components/create-form-button';
 import Details from '../components/details';
-import { config } from '../index';
 import PatternCard from './pattern-card';
 import CheckSVG from './svg/check-svg';
 import CloseSVG from './svg/close-svg';
@@ -32,7 +32,7 @@ import './style.scss';
 import type { Pattern } from '../../types';
 
 const About = () => {
-	const ASSETS_URL = useMemo( () => config( 'pluginAssetsURL' ), [] );
+	const ASSETS_URL = useConfigValue( 'pluginAssetsURL' ); // Ensure config is loaded.
 
 	const patterns: Pattern[] = useMemo(
 		() => [

projects/packages/forms/src/dashboard/class-dashboard.php

@@ -11,9 +11,6 @@
 use Automattic\Jetpack\Assets;
 use Automattic\Jetpack\Connection\Initial_State as Connection_Initial_State;
 use Automattic\Jetpack\Forms\ContactForm\Contact_Form_Plugin;
-use Automattic\Jetpack\Forms\Jetpack_Forms;
-use Automattic\Jetpack\Redirect;
-use Automattic\Jetpack\Status;
 use Automattic\Jetpack\Tracking;
 
 if ( ! defined( 'ABSPATH' ) ) {
@@ -151,29 +148,8 @@ public function add_new_admin_submenu() {
 	 * Render the dashboard.
 	 */
 	public function render_dashboard() {
-		if ( ! class_exists( 'Jetpack_AI_Helper' ) ) {
-			require_once JETPACK__PLUGIN_DIR . '_inc/lib/class-jetpack-ai-helper.php';
-		}
-
-		$ai_feature = \Jetpack_AI_Helper::get_ai_assistance_feature();
-		$has_ai     = ! is_wp_error( $ai_feature ) ? $ai_feature['has-feature'] : false;
-
-		$config = array(
-			'blogId'                  => get_current_blog_id(),
-			'exportNonce'             => wp_create_nonce( 'feedback_export' ),
-			'newFormNonce'            => wp_create_nonce( 'create_new_form' ),
-			'gdriveConnectSupportURL' => esc_url( Redirect::get_url( 'jetpack-support-contact-form-export' ) ),
-			'checkForSpamNonce'       => wp_create_nonce( 'grunion_recheck_queue' ),
-			'pluginAssetsURL'         => Jetpack_Forms::assets_url(),
-			'siteURL'                 => ( new Status() )->get_site_suffix(),
-			'hasFeedback'             => $this->has_feedback(),
-			'hasAI'                   => $has_ai,
-			'dashboardURL'            => self::get_forms_admin_url(),
-			'isMailpoetEnabled'       => Jetpack_Forms::is_mailpoet_enabled(),
-		);
-
 		?>
-		<div id="jp-forms-dashboard" data-config="<?php echo esc_attr( wp_json_encode( $config, JSON_FORCE_OBJECT ) ); ?>"></div>
+		<div id="jp-forms-dashboard"></div>
 		<?php
 	}
 

projects/packages/forms/src/dashboard/components/layout/index.tsx

@@ -11,11 +11,10 @@ import { Outlet, useLocation, useNavigate } from 'react-router';
 /**
  * Internal dependencies
  */
-import useFormsConfig from '../../../hooks/use-forms-config';
+import useConfigValue from '../../../hooks/use-config-value';
 import EmptySpamButton from '../../components/empty-spam-button';
 import EmptyTrashButton from '../../components/empty-trash-button';
 import ExportResponsesButton from '../../inbox/export-responses';
-import { config } from '../../index';
 import { store as dashboardStore } from '../../store';
 import ActionsDropdownMenu from '../actions-dropdown-menu';
 import CreateFormButton from '../create-form-button';
@@ -27,9 +26,10 @@ const Layout = () => {
 	const location = useLocation();
 	const navigate = useNavigate();
 	const [ isSm ] = useBreakpointMatch( 'sm' );
-	const formsConfig = useFormsConfig();
 
-	const enableIntegrationsTab = Boolean( formsConfig?.isIntegrationsEnabled );
+	const enableIntegrationsTab = useConfigValue( 'isIntegrationsEnabled' );
+	const hasFeedback = useConfigValue( 'hasFeedback' );
+	const isLoadingConfig = enableIntegrationsTab === undefined;
 
 	const { currentStatus } = useSelect(
 		select => ( {
@@ -72,15 +72,15 @@ const Layout = () => {
 			return path;
 		}
 
-		return config( 'hasFeedback' ) ? 'responses' : 'about';
-	}, [ location.pathname, tabs ] );
+		return hasFeedback ? 'responses' : 'about';
+	}, [ location.pathname, tabs, hasFeedback ] );
 
 	const isResponsesTab = getCurrentTab() === 'responses';
 
 	const handleTabSelect = useCallback(
 		( tabName: string ) => {
 			if ( ! tabName ) {
-				tabName = config( 'hasFeedback' ) ? 'responses' : 'about';
+				tabName = hasFeedback ? 'responses' : 'about';
 			}
 
 			const currentTab = getCurrentTab();
@@ -98,7 +98,7 @@ const Layout = () => {
 				search: tabName === 'responses' ? location.search : '',
 			} );
 		},
-		[ navigate, location.search, isSm, getCurrentTab ]
+		[ navigate, location.search, isSm, getCurrentTab, hasFeedback ]
 	);
 
 	return (
@@ -124,15 +124,17 @@ const Layout = () => {
 					</div>
 				) }
 			</div>
-			<TabPanel
-				className="jp-forms__dashboard-tabs"
-				tabs={ tabs }
-				initialTabName={ getCurrentTab() }
-				onSelect={ handleTabSelect }
-				key={ getCurrentTab() }
-			>
-				{ () => <Outlet /> }
-			</TabPanel>
+			{ ! isLoadingConfig && (
+				<TabPanel
+					className="jp-forms__dashboard-tabs"
+					tabs={ tabs }
+					initialTabName={ getCurrentTab() }
+					onSelect={ handleTabSelect }
+					key={ getCurrentTab() }
+				>
+					{ () => <Outlet /> }
+				</TabPanel>
+			) }
 		</div>
 	);
 };

projects/packages/forms/src/dashboard/components/response-view/body.tsx

@@ -24,11 +24,11 @@ import clsx from 'clsx';
 /**
  * Internal dependencies
  */
-import useFormsConfig from '../../../hooks/use-forms-config';
+import useConfigValue from '../../../hooks/use-config-value';
+import CopyClipboardButton from '../../components/copy-clipboard-button';
+import Gravatar from '../../components/gravatar';
 import { useMarkAsSpam } from '../../hooks/use-mark-as-spam';
 import { getPath, updateMenuCounter, updateMenuCounterOptimistically } from '../../inbox/utils';
-import CopyClipboardButton from '../copy-clipboard-button';
-import Gravatar from '../gravatar';
 import type { FormResponse } from '../../../types';
 
 const getDisplayName = response => {
@@ -203,8 +203,7 @@ const ResponseViewBody = ( {
 
 	const { editEntityRecord } = useDispatch( 'core' );
 
-	const formsConfig = useFormsConfig();
-	const emptyTrashDays = formsConfig?.emptyTrashDays ?? 0;
+	const emptyTrashDays = useConfigValue( 'emptyTrashDays' ) ?? 0;
 
 	// When opening a "Mark as spam" link from the email, the ResponseViewBody component is rendered, so we use a hook here to handle it.
 	const { isConfirmDialogOpen, onConfirmMarkAsSpam, onCancelMarkAsSpam } = useMarkAsSpam(

projects/packages/forms/src/dashboard/hooks/use-create-form.ts

@@ -5,7 +5,7 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { config } from '../index';
+import useConfigValue from '../../hooks/use-config-value';
 
 type ClickHandlerProps = {
 	formPattern?: string;
@@ -24,30 +24,34 @@ type CreateFormReturn = {
  * @return {CreateFormReturn} The createForm and openNewForm functions.
  */
 export default function useCreateForm(): CreateFormReturn {
-	const createForm = useCallback( async ( formPattern: string ) => {
-		const data = new FormData();
+	const newFormNonce = useConfigValue( 'newFormNonce' );
+	const createForm = useCallback(
+		async ( formPattern: string ) => {
+			const data = new FormData();
 
-		data.append( 'action', 'create_new_form' );
-		data.append( 'newFormNonce', config( 'newFormNonce' ) );
+			data.append( 'action', 'create_new_form' );
+			data.append( 'newFormNonce', newFormNonce );
 
-		if ( formPattern ) {
-			data.append( 'pattern', formPattern );
-		}
+			if ( formPattern ) {
+				data.append( 'pattern', formPattern );
+			}
 
-		const response = await fetch( window.ajaxurl, { method: 'POST', body: data } );
+			const response = await fetch( window.ajaxurl, { method: 'POST', body: data } );
 
-		const {
-			success,
-			post_url: postUrl,
-			data: message,
-		}: { success?: boolean; data?: string; post_url?: string } = await response.json();
+			const {
+				success,
+				post_url: postUrl,
+				data: message,
+			}: { success?: boolean; data?: string; post_url?: string } = await response.json();
 
-		if ( success === false ) {
-			throw new Error( message );
-		}
+			if ( success === false ) {
+				throw new Error( message );
+			}
 
-		return postUrl;
-	}, [] );
+			return postUrl;
+		},
+		[ newFormNonce ]
+	);
 
 	const openNewForm = useCallback(
 		async ( { formPattern, showPatterns, analyticsEvent }: ClickHandlerProps ) => {

projects/packages/forms/src/dashboard/hooks/use-export-responses.ts

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { config } from '..';
+import useConfigValue from '../../hooks/use-config-value';
 import { store as dashboardStore } from '../store';
 
 type ExportHookReturn = {
@@ -78,11 +78,13 @@ export default function useExportResponses(): ExportHookReturn {
 		return { selected: getSelectedResponsesFromCurrentDataset(), currentQuery: getCurrentQuery() };
 	}, [] );
 
+	const exportNonce = useConfigValue( 'exportNonce' );
+
 	const onExport = useCallback(
 		( action: string, nonceName: string ) => {
 			const data = new FormData();
 			data.append( 'action', action );
-			data.append( nonceName, config( 'exportNonce' ) );
+			data.append( nonceName, exportNonce );
 			selected.forEach( ( id: string ) => data.append( 'selected[]', id ) );
 			data.append( 'post', currentQuery.parent || 'all' );
 			data.append( 'search', currentQuery.search || '' );
@@ -95,7 +97,7 @@ export default function useExportResponses(): ExportHookReturn {
 
 			return fetch( window.ajaxurl, { method: 'POST', body: data } );
 		},
-		[ currentQuery, selected ]
+		[ currentQuery, selected, exportNonce ]
 	);
 
 	useEffect( () => {

projects/packages/forms/src/dashboard/inbox/empty-responses.tsx

@@ -3,7 +3,7 @@ import {
 	__experimentalVStack as VStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import useFormsConfig from '../../hooks/use-forms-config';
+import useConfigValue from '../../hooks/use-config-value';
 
 const EmptyWrapper = ( { heading = '', body = '' } ) => (
 	<VStack alignment="center" spacing="2">
@@ -22,8 +22,7 @@ type EmptyResponsesProps = {
 };
 
 const EmptyResponses = ( { status, isSearch }: EmptyResponsesProps ) => {
-	const formsConfig = useFormsConfig();
-	const emptyTrashDays = formsConfig?.emptyTrashDays ?? 0;
+	const emptyTrashDays = useConfigValue( 'emptyTrashDays' ) ?? 0;
 
 	const searchHeading = __( 'No results found', 'jetpack-forms' );
 	const searchMessage = __(