Forms: Move integrations from tab to CTA button

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

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Forms: Move integrations from tab to CTA button

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

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import jetpackAnalytics from '@automattic/jetpack-analytics';
+import { Button } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useNavigate } from 'react-router';
+
+/**
+ * Renders a button to navigate to the integrations page.
+ *
+ * @return {JSX.Element} The button to open integrations.
+ */
+export default function IntegrationsButton(): JSX.Element {
+	const navigate = useNavigate();
+
+	const onButtonClickHandler = useCallback( () => {
+		jetpackAnalytics.tracks.recordEvent( 'jetpack_forms_integrations_button_click', {
+			origin: 'dashboard',
+		} );
+		navigate( '/integrations' );
+	}, [ navigate ] );
+
+	return (
+		<Button
+			__next40pxDefaultSize
+			variant="secondary"
+			onClick={ onButtonClickHandler }
+			className="integrations-button"
+		>
+			{ __( 'Integrations', 'jetpack-forms' ) }
+		</Button>
+	);
+}

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

@@ -19,6 +19,7 @@ import ExportResponsesButton from '../../inbox/export-responses';
 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.
@@ -53,11 +54,8 @@ const Layout = () => {
 				name: 'responses',
 				title: __( 'Responses', 'jetpack-forms' ),
 			},
-			...( enableIntegrationsTab
-				? [ { name: 'integrations', title: __( 'Integrations', 'jetpack-forms' ) } ]
-				: [] ),
 		],
-		[ enableIntegrationsTab ]
+		[]
 	);
 
 	const getCurrentTab = useCallback( () => {
@@ -108,6 +106,7 @@ const Layout = () => {
 			{ isResponsesTab && <ExportResponsesButton /> }
 			{ isResponsesTab && isResponsesTrashView && <EmptyTrashButton /> }
 			{ isResponsesTab && isResponsesSpamView && <EmptySpamButton /> }
+			{ enableIntegrationsTab && <IntegrationsButton /> }
 			{ ! isResponsesTrashView && ! isResponsesSpamView && (
 				<CreateFormButton label={ __( 'Create form', 'jetpack-forms' ) } />
 			) }