From 5321148fec94629acb01dd41f828ed24114d0ecb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gergely=20M=C3=A1rk=20Juh=C3=A1sz?= <36671565+gmjuhasz@users.noreply.github.com> Date: Fri, 23 Aug 2024 11:21:09 +0200 Subject: [PATCH] Social: Add Social Share status component and cleanup panels (#39049) * Move PostPublishPanels to publicize components * changelog * Wrap with ThemeProvider * Move share status component to postpublish component * Add feature flag to postpublishShareStatus * Cleanup ThemeProvider * Pass targetDom and jsDoc update --- .../refactor-social-post-publish-panel | 4 +++ .../js-packages/publicize-components/index.ts | 3 +- .../manual-sharing/styles.module.scss | 1 - .../src/components/panel/index.jsx | 11 ++----- .../post-publish-manual-sharing/index.jsx | 18 ++---------- .../components/post-publish-panels/index.tsx | 16 ++++++++++ .../post-publish-review-prompt/index.js | 4 +-- .../post-publish-share-status/index.tsx | 29 +++++++++++++++++++ .../components/share-status-modal/index.tsx | 29 +++++++++++++++++++ .../share-status-modal/styles.module.scss | 4 +++ .../refactor-social-post-publish-panel | 4 +++ .../extensions/plugins/publicize/index.js | 2 +- .../plugins/publicize/post-publish.js | 15 ---------- .../refactor-social-post-publish-panel | 4 +++ projects/plugins/social/src/js/editor.js | 6 ++-- 15 files changed, 101 insertions(+), 49 deletions(-) create mode 100644 projects/js-packages/publicize-components/changelog/refactor-social-post-publish-panel create mode 100644 projects/js-packages/publicize-components/src/components/post-publish-panels/index.tsx create mode 100644 projects/js-packages/publicize-components/src/components/post-publish-share-status/index.tsx create mode 100644 projects/js-packages/publicize-components/src/components/share-status-modal/index.tsx create mode 100644 projects/js-packages/publicize-components/src/components/share-status-modal/styles.module.scss create mode 100644 projects/plugins/jetpack/changelog/refactor-social-post-publish-panel delete mode 100644 projects/plugins/jetpack/extensions/plugins/publicize/post-publish.js create mode 100644 projects/plugins/social/changelog/refactor-social-post-publish-panel diff --git a/projects/js-packages/publicize-components/changelog/refactor-social-post-publish-panel b/projects/js-packages/publicize-components/changelog/refactor-social-post-publish-panel new file mode 100644 index 0000000000000..c2d9eb2e4c754 --- /dev/null +++ b/projects/js-packages/publicize-components/changelog/refactor-social-post-publish-panel @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Moved PostPublishPanels component to publicize-components package diff --git a/projects/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts index f3764bec1f7a4..33210937ae819 100644 --- a/projects/js-packages/publicize-components/index.ts +++ b/projects/js-packages/publicize-components/index.ts @@ -16,8 +16,7 @@ export { default as SocialImageGeneratorToggle } from './src/components/social-i export { default as TemplatePickerButton } from './src/components/social-image-generator/template-picker/button'; export { default as PublicizePanel } from './src/components/panel'; export { default as ReviewPrompt } from './src/components/review-prompt'; -export { default as PostPublishReviewPrompt } from './src/components/post-publish-review-prompt'; -export { default as PostPublishManualSharing } from './src/components/post-publish-manual-sharing'; +export { default as PostPublishPanels } from './src/components/post-publish-panels'; export { default as RefreshJetpackSocialSettingsWrapper } from './src/components/refresh-jetpack-social-settings'; export { default as ConnectionManagement } from './src/components/connection-management'; diff --git a/projects/js-packages/publicize-components/src/components/manual-sharing/styles.module.scss b/projects/js-packages/publicize-components/src/components/manual-sharing/styles.module.scss index f949387e01aa5..7a44bc078c41f 100644 --- a/projects/js-packages/publicize-components/src/components/manual-sharing/styles.module.scss +++ b/projects/js-packages/publicize-components/src/components/manual-sharing/styles.module.scss @@ -1,5 +1,4 @@ .wrapper { - margin-top: 1rem; padding-block: 1rem; display: flex; flex-direction: column; diff --git a/projects/js-packages/publicize-components/src/components/panel/index.jsx b/projects/js-packages/publicize-components/src/components/panel/index.jsx index d9d348228bb38..9da06f51729af 100644 --- a/projects/js-packages/publicize-components/src/components/panel/index.jsx +++ b/projects/js-packages/publicize-components/src/components/panel/index.jsx @@ -12,10 +12,10 @@ import usePublicizeConfig from '../../hooks/use-publicize-config'; import useRefreshConnections from '../../hooks/use-refresh-connections'; import { usePostJustPublished } from '../../hooks/use-saving-post'; import useSelectSocialMediaConnections from '../../hooks/use-social-media-connections'; -import { store as socialStore } from '../../social-store'; import PublicizeForm from '../form'; import { ManualSharing } from '../manual-sharing'; import { SharePostRow } from '../share-post'; +import { ShareStatusModal } from '../share-status-modal'; import styles from './styles.module.scss'; import './global.scss'; @@ -26,13 +26,6 @@ const PublicizePanel = ( { prePublish, children } ) => { const { isPublicizeEnabled, hidePublicizeFeature, togglePublicizeFeature } = usePublicizeConfig(); - const { featureFlags } = useSelect( select => { - const store = select( socialStore ); - return { - featureFlags: store.featureFlags(), - }; - }, [] ); - // Refresh connections when the post is just published. usePostJustPublished( function () { @@ -81,8 +74,8 @@ const PublicizePanel = ( { prePublish, children } ) => { ) } { isPostPublished && ( <> + - { featureFlags?.useShareStatus && 'Share status modal comes here' } ) } diff --git a/projects/js-packages/publicize-components/src/components/post-publish-manual-sharing/index.jsx b/projects/js-packages/publicize-components/src/components/post-publish-manual-sharing/index.jsx index cc9d57440d7e0..cd38f7b8402e8 100644 --- a/projects/js-packages/publicize-components/src/components/post-publish-manual-sharing/index.jsx +++ b/projects/js-packages/publicize-components/src/components/post-publish-manual-sharing/index.jsx @@ -1,28 +1,19 @@ -import { ThemeProvider } from '@automattic/jetpack-components'; import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils'; import { useSelect } from '@wordpress/data'; import { PluginPostPublishPanel } from '@wordpress/edit-post'; import { store as editorStore } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; -import { store as socialStore } from '../../social-store'; import { ManualSharingInfo } from '../manual-sharing/info'; import { ShareButtons } from '../share-buttons/share-buttons'; import styles from './styles.module.scss'; /** * Post Publish Manual Sharing component. * - * @return {import('react').ReactNode} Post Publish Manual Sharing component. + * @return {import('react').JSX.Element} Post Publish Manual Sharing component. */ export default function PostPublishManualSharing() { const { isCurrentPostPublished } = useSelect( select => select( editorStore ), [] ); - const { featureFlags } = useSelect( select => { - const store = select( socialStore ); - return { - featureFlags: store.featureFlags(), - }; - }, [] ); - if ( ! isCurrentPostPublished() ) { return null; } @@ -34,11 +25,8 @@ export default function PostPublishManualSharing() { id="publicize-manual-sharing" icon={ } > - - - - { featureFlags?.useShareStatus && 'Share status modal comes here' } - + + ); } diff --git a/projects/js-packages/publicize-components/src/components/post-publish-panels/index.tsx b/projects/js-packages/publicize-components/src/components/post-publish-panels/index.tsx new file mode 100644 index 0000000000000..158be6c8cbac9 --- /dev/null +++ b/projects/js-packages/publicize-components/src/components/post-publish-panels/index.tsx @@ -0,0 +1,16 @@ +import { ThemeProvider } from '@automattic/jetpack-components'; +import PostPublishManualSharing from '../post-publish-manual-sharing'; +import PostPublishReviewPrompt from '../post-publish-review-prompt'; +import { PostPublishShareStatus } from '../post-publish-share-status'; + +const PostPublishPanels = () => { + return ( + + + + + + ); +}; + +export default PostPublishPanels; diff --git a/projects/js-packages/publicize-components/src/components/post-publish-review-prompt/index.js b/projects/js-packages/publicize-components/src/components/post-publish-review-prompt/index.js index d70f72e39d0d3..abeb8654c598d 100644 --- a/projects/js-packages/publicize-components/src/components/post-publish-review-prompt/index.js +++ b/projects/js-packages/publicize-components/src/components/post-publish-review-prompt/index.js @@ -8,7 +8,7 @@ import { usePostStartedPublishing } from '../../hooks/use-saving-post'; import useSocialMediaConnections from '../../hooks/use-social-media-connections'; import ReviewPrompt from '../review-prompt'; -const PostPublishReviewPropmpt = () => { +const PostPublishReviewPrompt = () => { const [ isReviewRequestDismissed, setIsReviewRequestDismissed ] = useState( getJetpackData()?.social?.reviewRequestDismissed ?? true ); @@ -54,4 +54,4 @@ const PostPublishReviewPropmpt = () => { ); }; -export default PostPublishReviewPropmpt; +export default PostPublishReviewPrompt; diff --git a/projects/js-packages/publicize-components/src/components/post-publish-share-status/index.tsx b/projects/js-packages/publicize-components/src/components/post-publish-share-status/index.tsx new file mode 100644 index 0000000000000..942ed52ff4aa3 --- /dev/null +++ b/projects/js-packages/publicize-components/src/components/post-publish-share-status/index.tsx @@ -0,0 +1,29 @@ +import { useSelect } from '@wordpress/data'; +import { PluginPostPublishPanel } from '@wordpress/edit-post'; +import { store as socialStore } from '../../social-store'; +import { ShareStatusModal } from '../share-status-modal'; + +/** + * Post publish share status component. + * + * @return {import('react').ReactNode} - Post publish share status component. + */ +export function PostPublishShareStatus() { + const { featureFlags } = useSelect( select => { + const store = select( socialStore ); + return { + featureFlags: store.featureFlags(), + }; + }, [] ); + + if ( ! featureFlags.useShareStatus ) { + return null; + } + + return ( + + Your post was successfully shared in 4 connections. + + + ); +} diff --git a/projects/js-packages/publicize-components/src/components/share-status-modal/index.tsx b/projects/js-packages/publicize-components/src/components/share-status-modal/index.tsx new file mode 100644 index 0000000000000..9d688c6ae2ddc --- /dev/null +++ b/projects/js-packages/publicize-components/src/components/share-status-modal/index.tsx @@ -0,0 +1,29 @@ +import { Button } from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { store as socialStore } from '../../social-store'; +import styles from './styles.module.scss'; + +/** + * Share status modal component. + * + * @return {import('react').ReactNode} - Share status modal component. + */ +export function ShareStatusModal() { + const { featureFlags } = useSelect( select => { + const store = select( socialStore ); + return { + featureFlags: store.featureFlags(), + }; + }, [] ); + + if ( ! featureFlags.useShareStatus ) { + return null; + } + + return ( +
+ { ' ' } +
+ ); +} diff --git a/projects/js-packages/publicize-components/src/components/share-status-modal/styles.module.scss b/projects/js-packages/publicize-components/src/components/share-status-modal/styles.module.scss new file mode 100644 index 0000000000000..a4bdac5ae6174 --- /dev/null +++ b/projects/js-packages/publicize-components/src/components/share-status-modal/styles.module.scss @@ -0,0 +1,4 @@ +.wrapper { + margin-top: 1rem; + padding-block: 1rem; +} \ No newline at end of file diff --git a/projects/plugins/jetpack/changelog/refactor-social-post-publish-panel b/projects/plugins/jetpack/changelog/refactor-social-post-publish-panel new file mode 100644 index 0000000000000..a4c11c733d294 --- /dev/null +++ b/projects/plugins/jetpack/changelog/refactor-social-post-publish-panel @@ -0,0 +1,4 @@ +Significance: minor +Type: other + +Moved PostPublishPanels component to publicize-coomponents package diff --git a/projects/plugins/jetpack/extensions/plugins/publicize/index.js b/projects/plugins/jetpack/extensions/plugins/publicize/index.js index ea955d1918d95..5ac22be8d162b 100644 --- a/projects/plugins/jetpack/extensions/plugins/publicize/index.js +++ b/projects/plugins/jetpack/extensions/plugins/publicize/index.js @@ -11,6 +11,7 @@ import { PublicizePanel, SocialImageGeneratorPanel, usePublicizeConfig, + PostPublishPanels, } from '@automattic/jetpack-publicize-components'; import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils'; import { PostTypeSupportCheck } from '@wordpress/editor'; @@ -18,7 +19,6 @@ import JetpackPluginSidebar from '../../shared/jetpack-plugin-sidebar'; import { PublicizePlaceholder } from './components/placeholder'; import PublicizeSkeletonLoader from './components/skeleton-loader'; import UpsellNotice from './components/upsell'; -import PostPublishPanels from './post-publish'; import PrePublishPanels from './pre-publish'; import './editor.scss'; diff --git a/projects/plugins/jetpack/extensions/plugins/publicize/post-publish.js b/projects/plugins/jetpack/extensions/plugins/publicize/post-publish.js deleted file mode 100644 index f3cceba56e3bf..0000000000000 --- a/projects/plugins/jetpack/extensions/plugins/publicize/post-publish.js +++ /dev/null @@ -1,15 +0,0 @@ -import { - PostPublishManualSharing, - PostPublishReviewPrompt, -} from '@automattic/jetpack-publicize-components'; - -const PostPublishPanels = () => { - return ( - <> - - - - ); -}; - -export default PostPublishPanels; diff --git a/projects/plugins/social/changelog/refactor-social-post-publish-panel b/projects/plugins/social/changelog/refactor-social-post-publish-panel new file mode 100644 index 0000000000000..c2d9eb2e4c754 --- /dev/null +++ b/projects/plugins/social/changelog/refactor-social-post-publish-panel @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Moved PostPublishPanels component to publicize-components package diff --git a/projects/plugins/social/src/js/editor.js b/projects/plugins/social/src/js/editor.js index 840a63360981f..eca205fa7c5ee 100644 --- a/projects/plugins/social/src/js/editor.js +++ b/projects/plugins/social/src/js/editor.js @@ -6,9 +6,8 @@ import { usePublicizeConfig, useSocialMediaConnections, PublicizePanel, - PostPublishReviewPrompt, - PostPublishManualSharing, useSyncPostDataToStore, + PostPublishPanels, } from '@automattic/jetpack-publicize-components'; import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils'; import { PanelBody } from '@wordpress/components'; @@ -113,8 +112,7 @@ const JetpackSocialSidebar = () => { - - + ); };