Skip to content

Commit f7ece19

Browse files
epeicherepeicher
authored
Gate behind a feature flag the new Publish and Import buttons (#2098)
* Gate behind a feature flag the new Publish and Import buttons * Add cloudUp icon to Publish site button in Sync tab
1 parent 6592b0b commit f7ece19

File tree

3 files changed

+73
-38
lines changed

3 files changed

+73
-38
lines changed

‎src/modules/sync/components/connect-button.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useOffline } from 'src/hooks/use-offline';
66

77
interface ConnectButtonProps {
88
variant: ButtonVariant;
9+
icon?: JSX.Element;
910
connectSite?: () => void;
1011
disabled?: boolean;
1112
className?: string;
@@ -16,6 +17,7 @@ interface ConnectButtonProps {
1617

1718
export const ConnectButton = ( {
1819
variant,
20+
icon,
1921
connectSite,
2022
disabled,
2123
className,
@@ -39,6 +41,7 @@ export const ConnectButton = ( {
3941
disabled={ isDisabled }
4042
aria-disabled={ isDisabled }
4143
variant={ variant }
44+
icon={ icon }
4245
className={ className }
4346
isBusy={ isBusy }
4447
>

‎src/modules/sync/index.tsx‎

Lines changed: 52 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { check, Icon } from '@wordpress/icons';
1+
import { check, cloudUpload, Icon } from '@wordpress/icons';
22
import { useI18n } from '@wordpress/react-i18n';
33
import { PropsWithChildren, useEffect, useState } from 'react';
44
import { ArrowIcon } from 'src/components/arrow-icon';
@@ -7,6 +7,7 @@ import offlineIcon from 'src/components/offline-icon';
77
import { Tooltip } from 'src/components/tooltip';
88
import { useSyncSites } from 'src/hooks/sync-sites';
99
import { useAuth } from 'src/hooks/use-auth';
10+
import { useFeatureFlags } from 'src/hooks/use-feature-flags';
1011
import { useOffline } from 'src/hooks/use-offline';
1112
import { getIpcApi } from 'src/lib/get-ipc-api';
1213
import { ConnectButton } from 'src/modules/sync/components/connect-button';
@@ -134,6 +135,7 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
134135
const { connectSite, disconnectSite } = useConnectedSitesOperations();
135136
const { pushSite, pullSite, isAnySitePulling, isAnySitePushing } = useSyncSites();
136137
const isAnySiteSyncing = isAnySitePulling || isAnySitePushing;
138+
const { streamlineOnboarding } = useFeatureFlags();
137139

138140
const [ selectedRemoteSite, setSelectedRemoteSite ] = useState< SyncSite | null >( null );
139141
const [ pendingModalMode, setPendingModalMode ] = useState< 'push' | 'pull' | null >( null );
@@ -226,43 +228,55 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails }
226228
</div>
227229
) : (
228230
<SiteSyncDescription>
229-
<div className="mt-8 flex flex-wrap gap-4">
230-
<ConnectButton
231-
variant="primary"
232-
connectSite={ handleLaunchSite }
233-
disabled={ isAnySiteSyncing || pendingModalMode !== null }
234-
isBusy={ pendingModalMode === 'push' }
235-
tooltipText={
236-
pendingModalMode === 'pull'
237-
? __( 'Please wait for the current operation to finish.' )
238-
: isAnySiteSyncing
239-
? __(
240-
'Another site is syncing. Please wait for the sync to finish before you publish your site.'
241-
)
242-
: __( 'Publishing your site requires an internet connection.' )
243-
}
244-
>
245-
{ __( 'Publish site' ) }
246-
</ConnectButton>
247-
<ConnectButton
248-
variant="secondary"
249-
connectSite={ handleImportSite }
250-
className={ isAnySiteSyncing ? '' : '!text-a8c-blue-50 !shadow-a8c-blue-50' }
251-
disabled={ isAnySiteSyncing || pendingModalMode !== null }
252-
isBusy={ pendingModalMode === 'pull' }
253-
tooltipText={
254-
pendingModalMode === 'push'
255-
? __( 'Please wait for the current operation to finish.' )
256-
: isAnySiteSyncing
257-
? __(
258-
'Another site is syncing. Please wait for the sync to finish before you pull a site.'
259-
)
260-
: __( 'Importing a remote site requires an internet connection.' )
261-
}
262-
>
263-
{ __( 'Pull site' ) }
264-
</ConnectButton>
265-
</div>
231+
{ streamlineOnboarding ? (
232+
<div className="mt-8 flex flex-wrap gap-4">
233+
<ConnectButton
234+
variant="primary"
235+
icon={ cloudUpload }
236+
connectSite={ handleLaunchSite }
237+
disabled={ isAnySiteSyncing || pendingModalMode !== null }
238+
isBusy={ pendingModalMode === 'push' }
239+
tooltipText={
240+
pendingModalMode === 'pull'
241+
? __( 'Please wait for the current operation to finish.' )
242+
: isAnySiteSyncing
243+
? __(
244+
'Another site is syncing. Please wait for the sync to finish before you publish your site.'
245+
)
246+
: __( 'Publishing your site requires an internet connection.' )
247+
}
248+
>
249+
{ __( 'Publish site' ) }
250+
</ConnectButton>
251+
<ConnectButton
252+
variant="secondary"
253+
connectSite={ handleImportSite }
254+
className={ isAnySiteSyncing ? '' : '!text-a8c-blue-50 !shadow-a8c-blue-50' }
255+
disabled={ isAnySiteSyncing || pendingModalMode !== null }
256+
isBusy={ pendingModalMode === 'pull' }
257+
tooltipText={
258+
pendingModalMode === 'push'
259+
? __( 'Please wait for the current operation to finish.' )
260+
: isAnySiteSyncing
261+
? __(
262+
'Another site is syncing. Please wait for the sync to finish before you pull a site.'
263+
)
264+
: __( 'Importing a remote site requires an internet connection.' )
265+
}
266+
>
267+
{ __( 'Pull site' ) }
268+
</ConnectButton>
269+
</div>
270+
) : (
271+
<div className="mt-8">
272+
<ConnectButton
273+
variant="primary"
274+
connectSite={ () => dispatch( connectedSitesActions.openModal( 'connect' ) ) }
275+
>
276+
{ __( 'Connect site' ) }
277+
</ConnectButton>
278+
</div>
279+
) }
266280
</SiteSyncDescription>
267281
) }
268282

‎src/modules/sync/tests/index.test.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { SyncSitesProvider, useSyncSites } from 'src/hooks/sync-sites';
55
import { SyncPushState } from 'src/hooks/sync-sites/use-sync-push';
66
import { useAuth } from 'src/hooks/use-auth';
77
import { ContentTabsProvider } from 'src/hooks/use-content-tabs';
8+
import { useFeatureFlags } from 'src/hooks/use-feature-flags';
89
import { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
910
import { getIpcApi } from 'src/lib/get-ipc-api';
1011
import { ContentTabSync } from 'src/modules/sync';
@@ -21,6 +22,7 @@ import {
2122

2223
jest.mock( 'src/hooks/use-auth' );
2324
jest.mock( 'src/lib/get-ipc-api' );
25+
jest.mock( 'src/hooks/use-feature-flags' );
2426
jest.mock( 'src/hooks/sync-sites/sync-sites-context', () => ( {
2527
...jest.requireActual( '../../../hooks/sync-sites/sync-sites-context' ),
2628
useSyncSites: jest.fn(),
@@ -126,6 +128,10 @@ describe( 'ContentTabSync', () => {
126128
beforeEach( () => {
127129
jest.resetAllMocks();
128130
( useAuth as jest.Mock ).mockReturnValue( createAuthMock( false ) );
131+
( useFeatureFlags as jest.Mock ).mockReturnValue( {
132+
enableBlueprints: true,
133+
streamlineOnboarding: false,
134+
} );
129135
( getIpcApi as jest.Mock ).mockReturnValue( {
130136
authenticate: jest.fn(),
131137
generateProposedSitePath: jest.fn(),
@@ -269,6 +275,10 @@ describe( 'ContentTabSync', () => {
269275

270276
it( 'displays publish and import actions to authenticated user', () => {
271277
( useAuth as jest.Mock ).mockReturnValue( createAuthMock( true ) );
278+
( useFeatureFlags as jest.Mock ).mockReturnValue( {
279+
enableBlueprints: true,
280+
streamlineOnboarding: true,
281+
} );
272282
renderWithProvider( <ContentTabSync selectedSite={ selectedSite } /> );
273283
const publishButton = screen.getByRole( 'button', { name: /Publish site/i } );
274284
const importButton = screen.getByRole( 'button', { name: /Pull site/i } );
@@ -291,6 +301,10 @@ describe( 'ContentTabSync', () => {
291301
};
292302

293303
( useAuth as jest.Mock ).mockReturnValue( createAuthMock( true ) );
304+
( useFeatureFlags as jest.Mock ).mockReturnValue( {
305+
enableBlueprints: true,
306+
streamlineOnboarding: true,
307+
} );
294308
setupConnectedSitesMocks( [], [ mockSyncSite ] );
295309
( connectedSitesSelectors.selectIsModalOpen as jest.Mock ).mockReturnValue( true );
296310
( connectedSitesSelectors.selectModalMode as jest.Mock ).mockReturnValue( 'pull' );
@@ -397,6 +411,10 @@ describe( 'ContentTabSync', () => {
397411

398412
it( 'displays publish and import buttons when there are no connected sites', () => {
399413
( useAuth as jest.Mock ).mockReturnValue( createAuthMock( true ) );
414+
( useFeatureFlags as jest.Mock ).mockReturnValue( {
415+
enableBlueprints: true,
416+
streamlineOnboarding: true,
417+
} );
400418
renderWithProvider( <ContentTabSync selectedSite={ selectedSite } /> );
401419

402420
const publishButton = screen.getByRole( 'button', { name: /Publish site/i } );

0 commit comments

Comments
 (0)