Revert "Forms: Integrations to CTA + Modal (#45662)"

This reverts commit b2d9287.

Author: enejb

projects/packages/forms/changelog/update-integrations-button-modal

@@ -8,22 +8,6 @@ import { __ } from '@wordpress/i18n';
  */
 import IntegrationsList from './integrations-list';
 import './style.scss';
-/**
- * Types
- */
-import type { Integration } from '../../../../types';
-
-type BlockAttributes = Record< string, unknown >;
-
-type IntegrationsModalProps = {
-	isOpen: boolean;
-	onClose: () => void;
-	attributes?: BlockAttributes;
-	setAttributes?: ( attributes: BlockAttributes ) => void;
-	integrationsData: Integration[];
-	refreshIntegrations: () => Promise< void >;
-	context?: 'block-editor' | 'dashboard';
-};
 
 const IntegrationsModal = ( {
 	isOpen,
@@ -32,8 +16,7 @@ const IntegrationsModal = ( {
 	setAttributes,
 	integrationsData,
 	refreshIntegrations,
-	context = 'block-editor',
-}: IntegrationsModalProps ) => {
+} ) => {
 	if ( ! isOpen ) {
 		return null;
 	}
@@ -49,7 +32,7 @@ const IntegrationsModal = ( {
 				<IntegrationsList
 					integrations={ integrationsData }
 					refreshIntegrations={ refreshIntegrations }
-					context={ context }
+					context="block-editor"
 					attributes={ attributes }
 					setAttributes={ setAttributes }
 				/>

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/index.tsx

@@ -17,15 +17,14 @@ interface ExpandedCardsState {
 const IntegrationsList = ( {
 	integrations = [],
 	refreshIntegrations,
-	context,
 	handlers,
 	attributes,
 	setAttributes,
 }: IntegrationsListProps ) => {
 	const items = useIntegrationCardsData( {
 		integrations,
 		refreshIntegrations,
-		context,
+		context: 'block-editor',
 		handlers,
 		attributes,
 		setAttributes,
@@ -42,21 +41,18 @@ const IntegrationsList = ( {
 	const [ expandedCards, setExpandedCards ] =
 		useState< ExpandedCardsState >( initialCardsExpandedState );
 
-	const toggleCard = useCallback(
-		( id: string ) => {
-			setExpandedCards( prev => {
-				const isExpanding = ! prev[ id ];
-				if ( isExpanding ) {
-					jetpackAnalytics.tracks.recordEvent( 'jetpack_forms_integrations_card_expand', {
-						card: id,
-						origin: context,
-					} );
-				}
-				return { ...prev, [ id ]: isExpanding };
-			} );
-		},
-		[ context ]
-	);
+	const toggleCard = useCallback( ( id: string ) => {
+		setExpandedCards( prev => {
+			const isExpanding = ! prev[ id ];
+			if ( isExpanding ) {
+				jetpackAnalytics.tracks.recordEvent( 'jetpack_forms_integrations_card_expand', {
+					card: id,
+					origin: 'block-editor',
+				} );
+			}
+			return { ...prev, [ id ]: isExpanding };
+		} );
+	}, [] );
 
 	return (
 		<>

projects/packages/forms/src/blocks/contact-form/components/jetpack-integrations-modal/integrations-list.tsx

@@ -14,7 +14,6 @@ import useCreateForm from '../../hooks/use-create-form';
 type CreateFormButtonProps = {
 	label?: string;
 	showPatterns?: boolean;
-	variant?: 'primary' | 'secondary';
 };
 
 /**
@@ -23,13 +22,11 @@ type CreateFormButtonProps = {
  * @param {object}  props              - The component props.
  * @param {string}  props.label        - The label for the button.
  * @param {boolean} props.showPatterns - Whether to show the patterns on the editor immediately.
- * @param {string}  props.variant      - The button variant (primary or secondary).
  * @return {JSX.Element}                 The button to create a new form.
  */
 export default function CreateFormButton( {
 	label = __( 'Create a free form', 'jetpack-forms' ),
 	showPatterns = false,
-	variant = 'secondary',
 }: CreateFormButtonProps ): JSX.Element {
 	const { openNewForm } = useCreateForm();
 
@@ -49,7 +46,7 @@ export default function CreateFormButton( {
 	return (
 		<Button
 			__next40pxDefaultSize
-			variant={ variant }
+			variant="primary"
 			onClick={ onButtonClickHandler }
 			icon={ plus }
 			className="create-form-button"

projects/packages/forms/src/dashboard/components/create-form-button/index.tsx

@@ -4,28 +4,28 @@
 import jetpackAnalytics from '@automattic/jetpack-analytics';
 import { useBreakpointMatch, JetpackLogo } from '@automattic/jetpack-components';
 import { NavigableRegion, Page } from '@wordpress/admin-ui';
+import { TabPanel } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useCallback, useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Outlet, useLocation } from 'react-router';
+import { Outlet, useLocation, useNavigate } from 'react-router';
 /**
  * Internal dependencies
  */
 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 Integrations from '../../integrations';
 import { store as dashboardStore } from '../../store';
 import ActionsDropdownMenu from '../actions-dropdown-menu';
 import CreateFormButton from '../create-form-button';
-import IntegrationsButton from '../integrations-button';
 
 import './style.scss';
 // eslint-disable-next-line import/no-unresolved -- aliased to the package's built asset in webpack config.
 import '@wordpress/admin-ui/build-style/style.css';
 const Layout = () => {
 	const location = useLocation();
+	const navigate = useNavigate();
 	const [ isSm ] = useBreakpointMatch( 'sm' );
 
 	const enableIntegrationsTab = useConfigValue( 'isIntegrationsEnabled' );
@@ -40,32 +40,78 @@ const Layout = () => {
 
 	const isResponsesTrashView = currentStatus.includes( 'trash' );
 	const isResponsesSpamView = currentStatus.includes( 'spam' );
-	const isIntegrationsOpen = location.pathname === '/integrations';
 
 	useEffect( () => {
 		jetpackAnalytics.tracks.recordEvent( 'jetpack_forms_dashboard_page_view', {
 			viewport: isSm ? 'mobile' : 'desktop',
 		} );
 	}, [ isSm ] );
 
+	const tabs = useMemo(
+		() => [
+			{
+				name: 'responses',
+				title: __( 'Responses', 'jetpack-forms' ),
+			},
+			...( enableIntegrationsTab
+				? [ { name: 'integrations', title: __( 'Integrations', 'jetpack-forms' ) } ]
+				: [] ),
+		],
+		[ enableIntegrationsTab ]
+	);
+
+	const getCurrentTab = useCallback( () => {
+		const path = location.pathname.split( '/' )[ 1 ];
+		const validTabNames = tabs.map( tab => tab.name );
+
+		if ( validTabNames.includes( path ) ) {
+			return path;
+		}
+
+		return 'responses';
+	}, [ location.pathname, tabs ] );
+
+	const isResponsesTab = getCurrentTab() === 'responses';
+
+	const handleTabSelect = useCallback(
+		( tabName: string ) => {
+			if ( ! tabName ) {
+				tabName = 'responses';
+			}
+
+			const currentTab = getCurrentTab();
+
+			if ( currentTab !== tabName ) {
+				jetpackAnalytics.tracks.recordEvent( 'jetpack_forms_dashboard_tab_change', {
+					tab: tabName,
+					viewport: isSm ? 'mobile' : 'desktop',
+					previous_tab: currentTab,
+				} );
+			}
+
+			navigate( {
+				pathname: `/${ tabName }`,
+				search: tabName === 'responses' ? location.search : '',
+			} );
+		},
+		[ navigate, location.search, isSm, getCurrentTab ]
+	);
+
 	const headerActions = isSm ? (
 		<>
-			{ isResponsesTrashView && <EmptyTrashButton /> }
-			{ isResponsesSpamView && <EmptySpamButton /> }
-			<ActionsDropdownMenu exportData={ { show: true } } />
+			{ isResponsesTab && isResponsesTrashView && <EmptyTrashButton /> }
+			{ isResponsesTab && isResponsesSpamView && <EmptySpamButton /> }
+			<ActionsDropdownMenu exportData={ { show: isResponsesTab } } />
 		</>
 	) : (
-		<>
-			{ isResponsesTrashView && <EmptyTrashButton /> }
-			{ isResponsesSpamView && <EmptySpamButton /> }
+		<div className="jp-forms__layout-header-actions">
+			{ isResponsesTab && <ExportResponsesButton /> }
+			{ isResponsesTab && isResponsesTrashView && <EmptyTrashButton /> }
+			{ isResponsesTab && isResponsesSpamView && <EmptySpamButton /> }
 			{ ! isResponsesTrashView && ! isResponsesSpamView && (
-				<>
-					{ enableIntegrationsTab && <IntegrationsButton /> }
-					<CreateFormButton label={ __( 'Create form', 'jetpack-forms' ) } />
-				</>
+				<CreateFormButton label={ __( 'Create form', 'jetpack-forms' ) } />
 			) }
-			<ExportResponsesButton />
-		</>
+		</div>
 	);
 
 	return (
@@ -82,9 +128,18 @@ const Layout = () => {
 				className="admin-ui-page__content"
 				ariaLabel={ __( 'Forms dashboard content', 'jetpack-forms' ) }
 			>
-				{ ! isLoadingConfig && <Outlet /> }
+				{ ! isLoadingConfig && (
+					<TabPanel
+						className="jp-forms__dashboard-tabs"
+						tabs={ tabs }
+						initialTabName={ getCurrentTab() }
+						onSelect={ handleTabSelect }
+						key={ getCurrentTab() }
+					>
+						{ () => <Outlet /> }
+					</TabPanel>
+				) }
 			</NavigableRegion>
-			{ isIntegrationsOpen && <Integrations /> }
 		</Page>
 	);
 };