diff --git a/projects/packages/forms/changelog/update-integrations-button b/projects/packages/forms/changelog/update-integrations-button new file mode 100644 index 0000000000000..e1b731a5843e7 --- /dev/null +++ b/projects/packages/forms/changelog/update-integrations-button @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Forms: Move integrations from tab to CTA button diff --git a/projects/packages/forms/src/dashboard/components/integrations-button/index.tsx b/projects/packages/forms/src/dashboard/components/integrations-button/index.tsx new file mode 100644 index 0000000000000..12500df87c53e --- /dev/null +++ b/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 ( + + ); +} diff --git a/projects/packages/forms/src/dashboard/components/layout/index.tsx b/projects/packages/forms/src/dashboard/components/layout/index.tsx index fee5ae2a5a38e..039650ce51993 100644 --- a/projects/packages/forms/src/dashboard/components/layout/index.tsx +++ b/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 && } { isResponsesTab && isResponsesTrashView && } { isResponsesTab && isResponsesSpamView && } + { enableIntegrationsTab && } { ! isResponsesTrashView && ! isResponsesSpamView && ( ) }