Migrate useAdminUiV1 feature flag to new script data (#39137)

projects/js-packages/publicize-components/changelog/update-social-initial-state-migrate-feature-flags

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Migrated useAdminUiV1 feature flag to new script data

projects/js-packages/publicize-components/index.ts

@@ -34,5 +34,6 @@ export * from './src/hooks/use-saving-post';
 export * from './src/hooks/use-post-meta';
 export * from './src/components/share-buttons';
 export * from './src/components/manage-connections-modal';
+export * from './src/utils/script-data';
 export * from './src/utils/shares-data';
 export * from './src/components/global-modals';

projects/js-packages/publicize-components/src/components/form/broken-connections-notice.tsx

@@ -1,13 +1,14 @@
 import { Button } from '@automattic/jetpack-components';
 import { ExternalLink } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { createInterpolateElement, Fragment } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import usePublicizeConfig from '../../hooks/use-publicize-config';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import { store } from '../../social-store';
 import { Connection } from '../../social-store/types';
 import { checkConnectionCode } from '../../utils/connections';
+import { getSocialScriptData } from '../../utils/script-data';
 import Notice from '../notice';
 import { useServiceLabel } from '../services/use-service-label';
 import styles from './styles.module.scss';
@@ -27,7 +28,8 @@ export const BrokenConnectionsNotice: React.FC = () => {
 
 	const { connectionsAdminUrl } = usePublicizeConfig();
 
-	const useAdminUiV1 = useSelect( select => select( store ).useAdminUiV1(), [] );
+	const { useAdminUiV1 } = getSocialScriptData().feature_flags;
+
 	const { openConnectionsModal } = useDispatch( store );
 
 	const fixLink = useAdminUiV1 ? (

projects/js-packages/publicize-components/src/components/form/index.tsx

@@ -9,7 +9,7 @@
 import { Disabled, PanelRow } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { Fragment } from '@wordpress/element';
-import { usePublicizeConfig } from '../../..';
+import { getSocialScriptData, usePublicizeConfig } from '../../..';
 import useAttachedMedia from '../../hooks/use-attached-media';
 import useFeaturedImage from '../../hooks/use-featured-image';
 import useMediaDetails from '../../hooks/use-media-details';
@@ -47,22 +47,22 @@ export default function PublicizeForm() {
 			// fix the issues with uploading an image.
 			attachedMedia.length > 0 ||
 			( Object.keys( validationErrors ).length !== 0 && ! isConvertible ) );
-
-	const { useAdminUiV1, featureFlags } = useSelect( select => {
+	const { featureFlags } = useSelect( select => {
 		const store = select( socialStore );
 		return {
-			useAdminUiV1: store.useAdminUiV1(),
 			featureFlags: store.featureFlags(),
 		};
 	}, [] );
 
 	const Wrapper = isPublicizeDisabledBySitePlan ? Disabled : Fragment;
 
+	const { feature_flags } = getSocialScriptData();
+
 	return (
 		<Wrapper>
 			{
 				// Render modal only once
-				useAdminUiV1 ? <ManageConnectionsModal /> : null
+				feature_flags.useAdminUiV1 ? <ManageConnectionsModal /> : null
 			}
 			{ hasConnections ? (
 				<>

projects/js-packages/publicize-components/src/components/form/settings-button.tsx

@@ -9,6 +9,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import usePublicizeConfig from '../../hooks/use-publicize-config';
 import { store } from '../../social-store';
+import { getSocialScriptData } from '../../utils/script-data';
 import styles from './styles.module.scss';
 
 type SettingsButtonProps = {
@@ -24,9 +25,10 @@ type SettingsButtonProps = {
  * @return {import('react').ReactNode} The button/link component.
  */
 export function SettingsButton( { label, variant = 'primary' }: SettingsButtonProps ) {
-	const { useAdminUiV1, connections } = useSelect( select => {
+	const { useAdminUiV1 } = getSocialScriptData().feature_flags;
+
+	const { connections } = useSelect( select => {
 		return {
-			useAdminUiV1: select( store ).useAdminUiV1(),
 			connections: select( store ).getConnections(),
 		};
 	}, [] );

projects/js-packages/publicize-components/src/social-store/reducer/index.js

@@ -13,7 +13,6 @@ const reducer = combineReducers( {
 	shareStatus,
 	hasPaidPlan: ( state = false ) => state,
 	userConnectionUrl: ( state = '' ) => state,
-	useAdminUiV1: ( state = false ) => state,
 	featureFlags: ( state = false ) => state,
 	hasPaidFeatures: ( state = false ) => state,
 } );

projects/js-packages/publicize-components/src/social-store/selectors/index.js

@@ -11,7 +11,6 @@ const selectors = {
 	...socialImageGeneratorSettingsSelectors,
 	...shareStatusSelectors,
 	userConnectionUrl: state => state.userConnectionUrl,
-	useAdminUiV1: state => state.useAdminUiV1,
 	featureFlags: state => state.featureFlags,
 	hasPaidFeatures: state => state.hasPaidFeatures,
 };

projects/js-packages/publicize-components/src/social-store/types.ts

@@ -70,7 +70,6 @@ export type SocialStoreState = {
 	hasPaidPlan?: boolean;
 	// on Jetack Social admin page
 	jetpackSettings?: JetpackSettings;
-	useAdminUiV1?: boolean;
 	featureFlags?: Record< string, boolean >;
 	shareStatus?: ShareStatus;
 };

projects/packages/publicize/changelog/update-social-initial-state-migrate-feature-flags

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Migrated useAdminUiV1 feature flag to new script data

projects/plugins/jetpack/_inc/client/recommendations/feature-utils.js

@@ -1,6 +1,7 @@
 import formatCurrency from '@automattic/format-currency';
 import restApi from '@automattic/jetpack-api';
 import { getRedirectUrl } from '@automattic/jetpack-components';
+import { getSocialScriptData } from '@automattic/jetpack-publicize-components';
 import { sprintf, __, _x } from '@wordpress/i18n';
 import {
 	PLAN_JETPACK_SECURITY_T1_YEARLY,
@@ -14,7 +15,6 @@ import {
 	getSiteRawUrl,
 	getJetpackCloudUrl,
 	getStaticProductsForPurchase,
-	getSocialInitiaState,
 } from 'state/initial-state';
 import { updateSettings } from 'state/settings';
 import { fetchPluginsData } from 'state/site/plugins';
@@ -79,12 +79,12 @@ export const mapStateToSummaryFeatureProps = ( state, featureSlug ) => {
 			};
 		case 'publicize':
 			return {
-				configureButtonLabel: getSocialInitiaState( state ).useAdminUiV1
+				configureButtonLabel: getSocialScriptData().feature_flags.useAdminUiV1
 					? __( 'View Jetpack Social settings', 'jetpack' )
 					: _x( 'Manage connections', '', 'jetpack' ),
 				displayName: __( 'Social Media Sharing', 'jetpack' ),
 				summaryActivateButtonLabel: __( 'Enable', 'jetpack' ),
-				configLink: getSocialInitiaState( state ).useAdminUiV1
+				configLink: getSocialScriptData().feature_flags.useAdminUiV1
 					? '#/sharing'
 					: getRedirectUrl( 'calypso-marketing-connections', {
 							site: getSiteRawUrl( state ),
@@ -562,7 +562,7 @@ export const getStepContent = ( state, stepSlug ) => {
 					'jetpack'
 				),
 				ctaText: __( 'Manage Social Media Connections', 'jetpack' ),
-				ctaLink: getSocialInitiaState( state ).useAdminUiV1
+				ctaLink: getSocialScriptData().feature_flags.useAdminUiV1
 					? getSiteAdminUrl( state ) + 'admin.php?page=jetpack#/sharing'
 					: getRedirectUrl( 'calypso-marketing-connections', {
 							site: getSiteRawUrl( state ),

projects/plugins/jetpack/_inc/client/sharing/index.jsx

@@ -1,3 +1,4 @@
+import { getSocialScriptData } from '@automattic/jetpack-publicize-components';
 import { __ } from '@wordpress/i18n';
 import QuerySite from 'components/data/query-site';
 import React, { Component } from 'react';
@@ -27,6 +28,8 @@ import { ShareButtons } from './share-buttons';
 
 class Sharing extends Component {
 	render() {
+		const { useAdminUiV1 } = getSocialScriptData().feature_flags;
+
 		const commonProps = {
 			settings: this.props.settings,
 			getModule: this.props.module,
@@ -45,7 +48,7 @@ class Sharing extends Component {
 			isAtomicSite: this.props.isAtomicSite,
 			hasSharingBlock: this.props.hasSharingBlock,
 			isBlockTheme: this.props.isBlockTheme,
-			useAdminUiV1: this.props.useAdminUiV1,
+			useAdminUiV1,
 		};
 
 		if ( ! this.props.searchTerm && ! this.props.active ) {
@@ -100,6 +103,5 @@ export default connect( state => {
 		isAtomicSite: isAtomicSite( state ),
 		hasSharingBlock: isSharingBlockAvailable( state ),
 		isBlockTheme: currentThemeIsBlockTheme( state ),
-		useAdminUiV1: state.jetpack.initialState.socialInitialState.useAdminUiV1,
 	};
 } )( Sharing );

projects/plugins/jetpack/changelog/update-social-initial-state-migrate-feature-flags

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Social: Migrated useAdminUiV1 feature flag to new script data

projects/plugins/social/changelog/update-social-initial-state-migrate-feature-flags

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Migrated useAdminUiV1 feature flag to new script data

projects/plugins/social/package.json

@@ -29,7 +29,6 @@
 		"@automattic/jetpack-base-styles": "workspace:*",
 		"@automattic/jetpack-components": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",
-		"@automattic/jetpack-script-data": "workspace:*",
 		"@automattic/jetpack-publicize-components": "workspace:*",
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@wordpress/api-fetch": "7.7.0",

projects/plugins/social/src/js/components/header/index.js

@@ -8,11 +8,11 @@ import {
 } from '@automattic/jetpack-components';
 import { ConnectionError, useConnectionErrorNotice } from '@automattic/jetpack-connection';
 import {
-	store as socialStore,
+	getSocialScriptData,
 	getTotalSharesCount,
 	getSharedPostsCount,
+	store as socialStore,
 } from '@automattic/jetpack-publicize-components';
-import { getScriptData } from '@automattic/jetpack-script-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Icon, postList } from '@wordpress/icons';
@@ -36,8 +36,8 @@ const Header = () => {
 			newPostUrl: `${ store.getAdminUrl() }post-new.php`,
 		};
 	} );
-	// TODO - Replace this with a utility function like `getSocialFeatureFlags` when available
-	const { useAdminUiV1 } = getScriptData().social.feature_flags;
+
+	const { useAdminUiV1 } = getSocialScriptData().feature_flags;
 
 	const { hasConnectionError } = useConnectionErrorNotice();
 

projects/plugins/social/src/js/components/social-module-toggle/index.tsx

@@ -5,8 +5,11 @@ import {
 	getRedirectUrl,
 	useBreakpointMatch,
 } from '@automattic/jetpack-components';
-import { ConnectionManagement, SOCIAL_STORE_ID } from '@automattic/jetpack-publicize-components';
-import { getScriptData } from '@automattic/jetpack-script-data';
+import {
+	ConnectionManagement,
+	SOCIAL_STORE_ID,
+	getSocialScriptData,
+} from '@automattic/jetpack-publicize-components';
 import { ExternalLink } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -37,7 +40,7 @@ const SocialModuleToggle: React.FC = () => {
 		};
 	}, [] );
 
-	const { useAdminUiV1 } = getScriptData().social.feature_flags;
+	const { useAdminUiV1 } = getSocialScriptData().feature_flags;
 
 	const updateOptions = useDispatch( SOCIAL_STORE_ID ).updateJetpackSettings;
 

projects/plugins/social/src/js/components/types/types.ts

@@ -8,7 +8,6 @@ type JetpackSettingsSelectors = {
 	showPricingPage: () => boolean;
 	isUpdatingJetpackSettings: () => boolean;
 	hasPaidPlan: () => boolean;
-	useAdminUiV1: () => boolean;
 	hasPaidFeatures: () => boolean;
 };