Implement new site launch and import buttons #2002
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,26 +1,34 @@ | ||||||
| import { check, Icon } from '@wordpress/icons'; | ||||||
| import { useI18n } from '@wordpress/react-i18n'; | ||||||
| import { PropsWithChildren, useEffect, useState } from 'react'; | ||||||
| import { ArrowIcon } from 'src/components/arrow-icon'; | ||||||
| import Button from 'src/components/button'; | ||||||
| import offlineIcon from 'src/components/offline-icon'; | ||||||
| import { Tooltip } from 'src/components/tooltip'; | ||||||
| import { useSyncSites } from 'src/hooks/sync-sites'; | ||||||
| import { useAuth } from 'src/hooks/use-auth'; | ||||||
| import { useOffline } from 'src/hooks/use-offline'; | ||||||
| import { getIpcApi } from 'src/lib/get-ipc-api'; | ||||||
| import { ConnectButton } from 'src/modules/sync/components/connect-button'; | ||||||
| import { SyncConnectedSites } from 'src/modules/sync/components/sync-connected-sites'; | ||||||
| import { SyncDialog } from 'src/modules/sync/components/sync-dialog'; | ||||||
| import { SyncSitesModalSelector } from 'src/modules/sync/components/sync-sites-modal-selector'; | ||||||
| import { SyncTabImage } from 'src/modules/sync/components/sync-tab-image'; | ||||||
| import { | ||||||
| convertTreeToPullOptions, | ||||||
| convertTreeToPushOptions, | ||||||
| } from 'src/modules/sync/lib/convert-tree-to-sync-options'; | ||||||
| import { useAppDispatch, useRootSelector } from 'src/stores'; | ||||||
| import { | ||||||
| useConnectedSitesData, | ||||||
| useSyncSitesData, | ||||||
| useConnectedSitesOperations, | ||||||
| connectedSitesSelectors, | ||||||
| connectedSitesActions, | ||||||
| loadAllConnectedSites, | ||||||
| } from 'src/stores/sync'; | ||||||
| import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types'; | ||||||
| import type { SyncModalMode } from 'src/modules/sync/types'; | ||||||
|
|
||||||
| function SiteSyncDescription( { children }: PropsWithChildren ) { | ||||||
| const { __ } = useI18n(); | ||||||
|
|
@@ -34,13 +42,13 @@ function SiteSyncDescription( { children }: PropsWithChildren ) { | |||||
| </div> | ||||||
| <div className="max-w-[40ch] text-a8c-gray-70 a8c-body"> | ||||||
| { __( | ||||||
| 'Launch your existing WordPress.com or Jetpack-activated Pressable sites, or import an exisiting one. Then, share your work with the world.' | ||||||
sejas marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
| ) } | ||||||
| </div> | ||||||
| <div className="mt-6"> | ||||||
| { [ | ||||||
| __( 'Push and pull changes from your live site.' ), | ||||||
| __( 'Supports staging and production sites.' ), | ||||||
| __( 'Sync database and file changes.' ), | ||||||
|
Contributor
There was a problem hiding this comment. I am finding
Suggested change
Contributor
Author
|
||||||
| ].map( ( text ) => ( | ||||||
| <div key={ text } className="text-a8c-gray-70 a8c-body flex items-center"> | ||||||
|
|
@@ -123,6 +131,15 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails } | |||||
| const { connectedSites } = useConnectedSitesData(); | ||||||
| const { syncSites, isFetching, refetchSites } = useSyncSitesData(); | ||||||
| const { connectSite, disconnectSite } = useConnectedSitesOperations(); | ||||||
| const { pushSite, pullSite } = useSyncSites(); | ||||||
|
|
||||||
| const [ modalState, setModalState ] = useState< { | ||||||
| mode: SyncModalMode | null; | ||||||
| selectedRemoteSite: SyncSite | null; | ||||||
| } >( { | ||||||
| mode: null, | ||||||
| selectedRemoteSite: null, | ||||||
| } ); | ||||||
|
|
||||||
| const { isAuthenticated } = useAuth(); | ||||||
|
|
||||||
|
|
@@ -136,9 +153,14 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails } | |||||
| return <NoAuthSyncTab />; | ||||||
| } | ||||||
|
|
||||||
| const handleConnect = async ( newConnectedSite: SyncSite ): Promise< SyncSite | undefined > => { | ||||||
| try { | ||||||
| await connectSite( newConnectedSite ); | ||||||
|
|
||||||
| await dispatch( loadAllConnectedSites() ); | ||||||
| // Return the connected site with full metadata, or fallback to the original site | ||||||
| const connectedSite = connectedSites.find( ( site ) => site.id === newConnectedSite.id ); | ||||||
| return connectedSite || newConnectedSite; | ||||||
| } catch ( error ) { | ||||||
| getIpcApi().showErrorMessageBox( { | ||||||
| title: __( 'Failed to connect to site' ), | ||||||
|
|
@@ -147,6 +169,54 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails } | |||||
| } | ||||||
| }; | ||||||
|
|
||||||
| const handleLaunchSite = () => { | ||||||
| setModalState( ( prev ) => ( { ...prev, mode: 'push' } ) ); | ||||||
| dispatch( connectedSitesActions.openModal() ); | ||||||
|
||||||
| }; | ||||||
|
|
||||||
| const handleImportSite = () => { | ||||||
| setModalState( ( prev ) => ( { ...prev, mode: 'pull' } ) ); | ||||||
| dispatch( connectedSitesActions.openModal() ); | ||||||
| }; | ||||||
|
|
||||||
| const handleSiteSelection = async ( siteId: number, mode: SyncModalMode | null ) => { | ||||||
| const disconnectSiteId = | ||||||
| typeof isModalOpen === 'object' ? isModalOpen.disconnectSiteId : undefined; | ||||||
|
|
||||||
| if ( disconnectSiteId ) { | ||||||
| await disconnectSite( disconnectSiteId ); | ||||||
| } | ||||||
|
|
||||||
| const selectedSiteFromList = syncSites.find( ( site ) => site.id === siteId ); | ||||||
| if ( ! selectedSiteFromList ) { | ||||||
| getIpcApi().showErrorMessageBox( { | ||||||
| title: __( 'Failed to select site' ), | ||||||
| message: __( 'Please try again.' ), | ||||||
| } ); | ||||||
| return; | ||||||
| } | ||||||
|
|
||||||
| const isAlreadyConnected = connectedSites.some( ( site ) => site.id === siteId ); | ||||||
| if ( ! isAlreadyConnected ) { | ||||||
| const connectedSite = await handleConnect( selectedSiteFromList ); | ||||||
| if ( ! connectedSite ) { | ||||||
| return; | ||||||
| } | ||||||
| } | ||||||
| const siteToUse = connectedSites.find( ( site ) => site.id === siteId ) || selectedSiteFromList; | ||||||
|
|
||||||
| dispatch( connectedSitesActions.closeModal() ); | ||||||
|
|
||||||
| if ( mode === 'push' || mode === 'pull' ) { | ||||||
| setModalState( ( prev ) => ( { ...prev, mode: mode, selectedRemoteSite: siteToUse } ) ); | ||||||
| } else { | ||||||
| setModalState( ( prev ) => ( { ...prev, mode: null } ) ); | ||||||
| } | ||||||
| }; | ||||||
|
|
||||||
| // Using a local variable to avoid non-null assertion operator in pushSite and pullSite | ||||||
| const selectedRemoteSite = modalState.selectedRemoteSite; | ||||||
|
|
||||||
| return ( | ||||||
| <div className="flex flex-col h-full overflow-y-auto"> | ||||||
| { connectedSites.length > 0 ? ( | ||||||
|
|
@@ -168,45 +238,73 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails } | |||||
| </div> | ||||||
| ) : ( | ||||||
| <SiteSyncDescription> | ||||||
| <div className="mt-8 flex flex-wrap gap-4"> | ||||||
| <ConnectButton | ||||||
| variant="primary" | ||||||
| connectSite={ handleLaunchSite } | ||||||
| disableConnectButtonStyle={ true } | ||||||
| tooltipText={ __( 'Publishing your site requires an internet connection.' ) } | ||||||
| > | ||||||
| { __( 'Publish site' ) } | ||||||
| </ConnectButton> | ||||||
| <ConnectButton | ||||||
| variant="secondary" | ||||||
| connectSite={ handleImportSite } | ||||||
| disableConnectButtonStyle={ true } | ||||||
| tooltipText={ __( 'Importing a remote site requires an internet connection.' ) } | ||||||
| > | ||||||
| { __( 'Pull site' ) } | ||||||
|
Contributor
There was a problem hiding this comment. I think we should have a blue border on this button according to the design: 
And I am currently seeing the black one: 
Contributor
Author
There was a problem hiding this comment. Well spotted! Changed as part of 51f1e67 in a similar way than the |
||||||
| </ConnectButton> | ||||||
| </div> | ||||||
| </SiteSyncDescription> | ||||||
| ) } | ||||||
|
|
||||||
| { isModalOpen && ( | ||||||
| <SyncSitesModalSelector | ||||||
| mode={ modalState.mode || 'connect' } | ||||||
| isLoading={ isFetching } | ||||||
| onRequestClose={ () => { | ||||||
| dispatch( connectedSitesActions.closeModal() ); | ||||||
| setModalState( ( prev ) => ( { ...prev, mode: null } ) ); | ||||||
|
||||||
| } } | ||||||
| syncSites={ syncSites } | ||||||
| onInitialRender={ refetchSites } | ||||||
| onConnect={ async ( siteId: number ) => { | ||||||
| await handleSiteSelection( siteId, modalState.mode ); | ||||||
| } } | ||||||
| selectedSite={ selectedSite } | ||||||
| /> | ||||||
| ) } | ||||||
|
|
||||||
| { modalState.mode && modalState.mode !== 'connect' && selectedRemoteSite && ( | ||||||
| <SyncDialog | ||||||
| type={ modalState.mode } | ||||||
| localSite={ selectedSite } | ||||||
| remoteSite={ selectedRemoteSite } | ||||||
| onPush={ ( tree ) => { | ||||||
| const pushOptions = convertTreeToPushOptions( tree ); | ||||||
| void pushSite( selectedRemoteSite, selectedSite, pushOptions ); | ||||||
| setModalState( { | ||||||
| mode: null, | ||||||
| selectedRemoteSite: null, | ||||||
| } ); | ||||||
| } } | ||||||
| onPull={ ( tree ) => { | ||||||
| const pullOptions = convertTreeToPullOptions( tree ); | ||||||
| void pullSite( selectedRemoteSite, selectedSite, pullOptions ); | ||||||
| setModalState( { | ||||||
| mode: null, | ||||||
| selectedRemoteSite: null, | ||||||
| } ); | ||||||
| } } | ||||||
| onRequestClose={ () => { | ||||||
| setModalState( { | ||||||
| mode: null, | ||||||
| selectedRemoteSite: null, | ||||||
| } ); | ||||||
| } } | ||||||
| /> | ||||||
| ) } | ||||||
| </div> | ||||||
| ); | ||||||
| } | ||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was always used as true, so it has been removed, and the functionality updated