Use modal instead of metabox for Wincher SEO performance

packages/js/src/components/WincherSEOPerformanceModal.js

@@ -2,9 +2,11 @@
 import { Fragment, useCallback } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import PropTypes from "prop-types";
+import styled from "styled-components";
 
 /* Yoast dependencies */
 import { colors } from "@yoast/style-guide";
+import { CollapsibleStateless } from "@yoast/components";
 
 /* Internal dependencies */
 import { ModalContainer } from "./modals/Container";
@@ -14,6 +16,17 @@ import { isCloseEvent } from "./modals/editorModals/EditorModal.js";
 import SidebarButton from "./SidebarButton";
 import WincherSEOPerformance from "../containers/WincherSEOPerformance";
 
+const MetaboxModalButton = styled( CollapsibleStateless )`
+	h2 > button {
+		padding-left: 24px;
+		padding-top: 16px;
+
+		&:hover {
+			background-color: #f0f0f0;
+		}
+	}
+`;
+
 /**
  * Handles the click event on the "Track SEO performance" button.
  *
@@ -98,6 +111,19 @@ export default function WincherSEOPerformanceModal( props ) {
 				onClick={ onModalOpen }
 			/>
 			}
+
+			{ location === "metabox" && <MetaboxModalButton
+				hasPadding={ false }
+				hasSeparator={ true }
+				suffixIconCollapsed={ {
+					icon: "pencil-square",
+					color: colors.$black,
+					size: "20px",
+				} }
+				id={ `wincher-open-button-${location}` }
+				title={ title }
+				onToggle={ onModalOpen }
+			/> }
 		</Fragment>
 	);
 }

packages/js/src/components/fills/MetaboxFill.js

@@ -1,11 +1,11 @@
 /* External dependencies */
-import { Fragment, useCallback } from "@wordpress/element";
+import { Fragment } from "@wordpress/element";
 import { Fill } from "@wordpress/components";
 import { __ } from "@wordpress/i18n";
 import PropTypes from "prop-types";
-import { colors } from "@yoast/style-guide";
 
 /* Internal dependencies */
+import WincherSEOPerformanceModal from "../../containers/WincherSEOPerformanceModal";
 import CollapsibleCornerstone from "../../containers/CollapsibleCornerstone";
 import SnippetEditor from "../../containers/SnippetEditor";
 import Warning from "../../containers/Warning";
@@ -17,7 +17,6 @@ import AdvancedSettings from "../../containers/AdvancedSettings";
 import SocialMetadataPortal from "../portals/SocialMetadataPortal";
 import SchemaTabContainer from "../../containers/SchemaTab";
 import SEMrushRelatedKeyphrases from "../../containers/SEMrushRelatedKeyphrases";
-import WincherSEOPerformance from "../../containers/WincherSEOPerformance";
 import { isWordProofIntegrationActive } from "../../helpers/wordproof";
 import WordProofAuthenticationModals from "../../components/modals/WordProofAuthenticationModals";
 import PremiumSEOAnalysisModal from "../modals/PremiumSEOAnalysisModal";
@@ -28,23 +27,10 @@ import KeywordUpsell from "../KeywordUpsell";
  * Creates the Metabox component.
  *
  * @param {Object} settings 				The feature toggles.
- * @param {Object} store    				The Redux store.
- * @param {Object} theme    				The theme to use.
- * @param {Array} wincherKeyphrases 		The Wincher trackable keyphrases.
- * @param {Function} setWincherNoKeyphrase	Sets wincher no keyphrases in the store.
  *
  * @returns {wp.Element} The Metabox component.
  */
-export default function MetaboxFill( { settings, wincherKeyphrases, setWincherNoKeyphrase } ) {
-	const onToggleWincher = useCallback( () => {
-		if ( ! wincherKeyphrases.length ) {
-			setWincherNoKeyphrase( true );
-			// This is fragile, should replace with a real React ref.
-			document.querySelector( "#focus-keyword-input-metabox" ).focus();
-			return false;
-		}
-	}, [ wincherKeyphrases, setWincherNoKeyphrase ] );
-
+export default function MetaboxFill( { settings } ) {
 	return (
 		<>
 			{ isWordProofIntegrationActive() && <WordProofAuthenticationModals /> }
@@ -93,16 +79,7 @@ export default function MetaboxFill( { settings, wincherKeyphrases, setWincherNo
 				</SidebarItem> }
 				{ settings.isKeywordAnalysisActive && settings.isWincherIntegrationActive &&
 				<SidebarItem key="wincher-seo-performance" renderPriority={ 25 }>
-					<MetaboxCollapsible
-						id={ "yoast-wincher-seo-performance-metabox" }
-						title={ __( "Track SEO performance", "wordpress-seo" ) }
-						initialIsOpen={ false }
-						prefixIcon={ { icon: "chart-square-bar", color: colors.$color_grey_medium_dark } }
-						prefixIconCollapsed={ { icon: "chart-square-bar", color: colors.$color_grey_medium_dark } }
-						onToggle={ onToggleWincher }
-					>
-						<WincherSEOPerformance />
-					</MetaboxCollapsible>
+					<WincherSEOPerformanceModal location="metabox" />
 				</SidebarItem> }
 				{ settings.isCornerstoneActive && <SidebarItem key="cornerstone" renderPriority={ 30 }>
 					<CollapsibleCornerstone />
@@ -131,8 +108,6 @@ export default function MetaboxFill( { settings, wincherKeyphrases, setWincherNo
 
 MetaboxFill.propTypes = {
 	settings: PropTypes.object.isRequired,
-	wincherKeyphrases: PropTypes.array.isRequired,
-	setWincherNoKeyphrase: PropTypes.func.isRequired,
 };
 
 /* eslint-enable complexity */

packages/js/src/containers/MetaboxFill.js

@@ -1,24 +1,16 @@
-import { withSelect, withDispatch } from "@wordpress/data";
+import { withSelect } from "@wordpress/data";
 import { compose } from "@wordpress/compose";
 import MetaboxFill from "../components/fills/MetaboxFill";
 
 export default compose( [
 	withSelect( ( select, ownProps ) => {
 		const {
 			getPreferences,
-			getWincherTrackableKeyphrases,
 		} = select( "yoast-seo/editor" );
 
 		return {
 			settings: getPreferences(),
 			store: ownProps.store,
-			wincherKeyphrases: getWincherTrackableKeyphrases(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { setWincherNoKeyphrase } = dispatch( "yoast-seo/editor" );
-		return {
-			setWincherNoKeyphrase,
 		};
 	} ),
 ] )( MetaboxFill );