+
+
+ { sync.label }
+
+
+
+
+ }
+ />
+
+
+ pullSiteFromLive.mutate( { siteId: site.id, remoteSiteId: connection.id } )
+ }
+ >
+
+
+
+ { __( 'Pull from live' ) }
+
+
+ pushSiteToLive.mutate( { siteId: site.id, remoteSiteId: connection.id } )
+ }
+ >
+
+
+
+ { __( 'Push to live' ) }
+
+
+
+
+
+ }
+ />
+
+ void connector.openExternalUrl( url ) }>
+
+
+
+ { __( 'Open live site' ) }
+
+ void connector.copyText( url ) }>
+
+
+
+ { __( 'Copy URL' ) }
+
+
+
+
+
diff --git a/apps/ui/src/components/site-overview-view/overview-card.tsx b/apps/ui/src/components/site-overview-view/overview-card.tsx
index b88a6f2172..fb40bcf6a7 100644
--- a/apps/ui/src/components/site-overview-view/overview-card.tsx
+++ b/apps/ui/src/components/site-overview-view/overview-card.tsx
@@ -2,9 +2,43 @@ import styles from './cards.module.css';
import type { ReactNode } from 'react';
export function OverviewCard( { children }: { children: ReactNode } ) {
- return
{ children }
;
+ return
;
}
-export function CardSection( { children }: { children: ReactNode } ) {
- return
;
+export function CardSection( {
+ title,
+ action,
+ children,
+}: {
+ title?: string;
+ action?: ReactNode;
+ children: ReactNode;
+} ) {
+ return (
+
+ { ( title || action ) && (
+
+ { title &&
{ title }
}
+ { action }
+
+ ) }
+ { children }
+
+ );
+}
+
+export function CardSectionDivider() {
+ return
;
+}
+
+export function CardEmptyState( { children }: { children: ReactNode } ) {
+ return
{ children }
;
+}
+
+export function CardRows( { children }: { children: ReactNode } ) {
+ return
{ children }
;
+}
+
+export function RowDivider() {
+ return
;
}
diff --git a/apps/ui/src/components/site-overview-view/row-link.tsx b/apps/ui/src/components/site-overview-view/row-link.tsx
new file mode 100644
index 0000000000..4db4c08a06
--- /dev/null
+++ b/apps/ui/src/components/site-overview-view/row-link.tsx
@@ -0,0 +1,40 @@
+import { sprintf, __ } from '@wordpress/i18n';
+import { Tooltip } from '@wordpress/ui';
+import { useConnector } from '@/data/core';
+import styles from './cards.module.css';
+
+export function RowLink( {
+ label,
+ url,
+ tooltip,
+}: {
+ label: string;
+ url: string;
+ tooltip?: string;
+} ) {
+ const connector = useConnector();
+
+ return (
+
+ void connector.openExternalUrl( url ) }
+ >
+ { label }
+
+ }
+ />
+ }>
+ { tooltip || url }
+
+
+ );
+}
diff --git a/apps/ui/src/hooks/use-is-site-syncing.ts b/apps/ui/src/hooks/use-is-site-syncing.ts
new file mode 100644
index 0000000000..cc680d2cd6
--- /dev/null
+++ b/apps/ui/src/hooks/use-is-site-syncing.ts
@@ -0,0 +1,21 @@
+import { useIsMutating } from '@tanstack/react-query';
+import {
+ PULL_FROM_LIVE_MUTATION_KEY,
+ PUSH_TO_LIVE_MUTATION_KEY,
+} from '@/data/queries/use-sync-site';
+
+export function useIsSiteSyncing( siteId: string ): { push: boolean; pull: boolean } {
+ const push =
+ useIsMutating( {
+ mutationKey: PUSH_TO_LIVE_MUTATION_KEY,
+ predicate: ( mutation ) =>
+ ( mutation.state.variables as { siteId: string } | undefined )?.siteId === siteId,
+ } ) > 0;
+ const pull =
+ useIsMutating( {
+ mutationKey: PULL_FROM_LIVE_MUTATION_KEY,
+ predicate: ( mutation ) =>
+ ( mutation.state.variables as { siteId: string } | undefined )?.siteId === siteId,
+ } ) > 0;
+ return { push, pull };
+}