From 6504c2130388c0fc485244508c7761d5ca91cfab Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Mon, 16 Sep 2024 12:52:51 +0530 Subject: [PATCH] Migrate useAdminUiV1 feature flag to new script data (#39137) --- pnpm-lock.yaml | 3 --- .../update-social-initial-state-migrate-feature-flags | 4 ++++ projects/js-packages/publicize-components/index.ts | 1 + .../src/components/form/broken-connections-notice.tsx | 6 ++++-- .../publicize-components/src/components/form/index.tsx | 10 +++++----- .../src/components/form/settings-button.tsx | 6 ++++-- .../src/social-store/reducer/index.js | 1 - .../src/social-store/selectors/index.js | 1 - .../publicize-components/src/social-store/types.ts | 1 - .../update-social-initial-state-migrate-feature-flags | 4 ++++ .../_inc/client/recommendations/feature-utils.js | 8 ++++---- projects/plugins/jetpack/_inc/client/sharing/index.jsx | 6 ++++-- .../update-social-initial-state-migrate-feature-flags | 4 ++++ .../update-social-initial-state-migrate-feature-flags | 4 ++++ projects/plugins/social/package.json | 1 - .../plugins/social/src/js/components/header/index.js | 8 ++++---- .../src/js/components/social-module-toggle/index.tsx | 9 ++++++--- .../plugins/social/src/js/components/types/types.ts | 1 - 18 files changed, 48 insertions(+), 30 deletions(-) create mode 100644 projects/js-packages/publicize-components/changelog/update-social-initial-state-migrate-feature-flags create mode 100644 projects/packages/publicize/changelog/update-social-initial-state-migrate-feature-flags create mode 100644 projects/plugins/jetpack/changelog/update-social-initial-state-migrate-feature-flags create mode 100644 projects/plugins/social/changelog/update-social-initial-state-migrate-feature-flags diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e47a4cc83f117..4cdfe70c6c05f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4342,9 +4342,6 @@ importers: '@automattic/jetpack-publicize-components': specifier: workspace:* version: link:../../js-packages/publicize-components - '@automattic/jetpack-script-data': - specifier: workspace:* - version: link:../../js-packages/script-data '@automattic/jetpack-shared-extension-utils': specifier: workspace:* version: link:../../js-packages/shared-extension-utils diff --git a/projects/js-packages/publicize-components/changelog/update-social-initial-state-migrate-feature-flags b/projects/js-packages/publicize-components/changelog/update-social-initial-state-migrate-feature-flags new file mode 100644 index 0000000000000..014cc8d4e4417 --- /dev/null +++ b/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 diff --git a/projects/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts index 16b6a042ff927..36f1fab810ff0 100644 --- a/projects/js-packages/publicize-components/index.ts +++ b/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'; diff --git a/projects/js-packages/publicize-components/src/components/form/broken-connections-notice.tsx b/projects/js-packages/publicize-components/src/components/form/broken-connections-notice.tsx index 75f8c9b58cf18..de9db8ac52020 100644 --- a/projects/js-packages/publicize-components/src/components/form/broken-connections-notice.tsx +++ b/projects/js-packages/publicize-components/src/components/form/broken-connections-notice.tsx @@ -1,6 +1,6 @@ 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'; @@ -8,6 +8,7 @@ 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 ? ( diff --git a/projects/js-packages/publicize-components/src/components/form/index.tsx b/projects/js-packages/publicize-components/src/components/form/index.tsx index e2c9fa5bffe2a..902abd5020b56 100644 --- a/projects/js-packages/publicize-components/src/components/form/index.tsx +++ b/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 ( { // Render modal only once - useAdminUiV1 ? : null + feature_flags.useAdminUiV1 ? : null } { hasConnections ? ( <> diff --git a/projects/js-packages/publicize-components/src/components/form/settings-button.tsx b/projects/js-packages/publicize-components/src/components/form/settings-button.tsx index cfc80641df4be..ec3a8d8ccd617 100644 --- a/projects/js-packages/publicize-components/src/components/form/settings-button.tsx +++ b/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(), }; }, [] ); diff --git a/projects/js-packages/publicize-components/src/social-store/reducer/index.js b/projects/js-packages/publicize-components/src/social-store/reducer/index.js index cb7ae62ef5199..53f86fd31764e 100644 --- a/projects/js-packages/publicize-components/src/social-store/reducer/index.js +++ b/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, } ); diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/index.js b/projects/js-packages/publicize-components/src/social-store/selectors/index.js index 888a83f13377b..58f547f87bab8 100644 --- a/projects/js-packages/publicize-components/src/social-store/selectors/index.js +++ b/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, }; diff --git a/projects/js-packages/publicize-components/src/social-store/types.ts b/projects/js-packages/publicize-components/src/social-store/types.ts index 4e3517ce42b50..9fb5aae263d90 100644 --- a/projects/js-packages/publicize-components/src/social-store/types.ts +++ b/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; }; diff --git a/projects/packages/publicize/changelog/update-social-initial-state-migrate-feature-flags b/projects/packages/publicize/changelog/update-social-initial-state-migrate-feature-flags new file mode 100644 index 0000000000000..014cc8d4e4417 --- /dev/null +++ b/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 diff --git a/projects/plugins/jetpack/_inc/client/recommendations/feature-utils.js b/projects/plugins/jetpack/_inc/client/recommendations/feature-utils.js index bfdac2b6b923b..0fde75a93c411 100644 --- a/projects/plugins/jetpack/_inc/client/recommendations/feature-utils.js +++ b/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 ), diff --git a/projects/plugins/jetpack/_inc/client/sharing/index.jsx b/projects/plugins/jetpack/_inc/client/sharing/index.jsx index 71358d5c95760..196f8cd178b05 100644 --- a/projects/plugins/jetpack/_inc/client/sharing/index.jsx +++ b/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 ); diff --git a/projects/plugins/jetpack/changelog/update-social-initial-state-migrate-feature-flags b/projects/plugins/jetpack/changelog/update-social-initial-state-migrate-feature-flags new file mode 100644 index 0000000000000..54044c039e048 --- /dev/null +++ b/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 diff --git a/projects/plugins/social/changelog/update-social-initial-state-migrate-feature-flags b/projects/plugins/social/changelog/update-social-initial-state-migrate-feature-flags new file mode 100644 index 0000000000000..014cc8d4e4417 --- /dev/null +++ b/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 diff --git a/projects/plugins/social/package.json b/projects/plugins/social/package.json index 32fcbef41fa1d..3c85f3a8fc02e 100644 --- a/projects/plugins/social/package.json +++ b/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", diff --git a/projects/plugins/social/src/js/components/header/index.js b/projects/plugins/social/src/js/components/header/index.js index d25b3697b7aa3..868c0756b61fe 100644 --- a/projects/plugins/social/src/js/components/header/index.js +++ b/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(); diff --git a/projects/plugins/social/src/js/components/social-module-toggle/index.tsx b/projects/plugins/social/src/js/components/social-module-toggle/index.tsx index 02ed5bba11020..bb7c0ef23dbb9 100644 --- a/projects/plugins/social/src/js/components/social-module-toggle/index.tsx +++ b/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; diff --git a/projects/plugins/social/src/js/components/types/types.ts b/projects/plugins/social/src/js/components/types/types.ts index fa7aecea67e22..88e1472f67257 100644 --- a/projects/plugins/social/src/js/components/types/types.ts +++ b/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; };