Update tooltips in the new Previews tab (redo) (#1027)

* Update tooltips in site previews.

* Add back link tooltips and standardize with Sync tab..

* Linting.

Author: ndiego

src/components/sync-connected-sites.tsx

@@ -220,8 +220,14 @@ const SyncConnectedSitesSection = ( {
 									<Badge className="bg-a8c-green-5 text-a8c-green-80">{ __( 'Production' ) }</Badge>
 								) }
 							</div>
-
-							<Tooltip text={ connectedSite.url } className="overflow-hidden">
+							<Tooltip
+								text={ sprintf(
+									/* translators: %s: The URL of the connected site */
+									__( 'Open %s' ),
+									connectedSite.url
+								) }
+								className="overflow-hidden"
+							>
 								<Button
 									variant="link"
 									className="!text-a8c-gray-70 hover:!text-a8c-blueberry max-w-[100%]"

src/hooks/use-expiration-date.ts

@@ -65,6 +65,6 @@ export function useExpirationDate( snapshotDate: number ) {
 		isExpired,
 		countDown: isExpired ? __( 'Expired' ) : countDown,
 		expireDateString: formatStringDate( endDate.getTime(), locale, 'long' ),
-		dateString: formatStringDate( snapshotDate, locale ),
+		dateString: formatStringDate( snapshotDate, locale, 'long' ),
 	};
 }

src/modules/preview-site/components/preview-site-row.tsx

@@ -33,7 +33,7 @@ export function PreviewSiteRow( {
 }: PreviewSiteRowProps ) {
 	const { __ } = useI18n();
 	const { url, date, isDeleting } = snapshot;
-	const { countDown, expireDateString, isExpired } = useExpirationDate( date );
+	const { countDown, dateString, expireDateString, isExpired } = useExpirationDate( date );
 	const { fetchSnapshotUsage, removeSnapshot } = useSnapshots();
 	const { isDemoSiteUpdating, hasDemoSiteError } = useUpdateDemoSite();
 	const isPreviewSiteUpdating = isDemoSiteUpdating( snapshot.atomicSiteId );
@@ -117,7 +117,15 @@ export function PreviewSiteRow( {
 							{ snapshot.name || sprintf( __( '%s Preview' ), selectedSite.name ) }
 						</div>
 					</div>
-					<Tooltip text={ urlWithHTTPS } disabled={ isExpired } className="overflow-hidden">
+					<Tooltip
+						text={ sprintf(
+							/* translators: %s: The preview site URL */
+							__( 'Open %s' ),
+							urlWithHTTPS
+						) }
+						disabled={ isExpired }
+						className="overflow-hidden"
+					>
 						<Button
 							variant="link"
 							disabled={ isExpired }
@@ -142,7 +150,9 @@ export function PreviewSiteRow( {
 								{ __( 'Updating' ) }
 							</div>
 						) : (
-							getLastUpdateTimeText()
+							<Tooltip text={ dateString } disabled={ ! date }>
+								{ getLastUpdateTimeText() }
+							</Tooltip>
 						) }
 					</div>
 					<div className="flex items-center">