Skip to content

Studio: Display tooltip with the demo site last update time #812

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ivan-ottinger merged 3 commits into from
Jan 17, 2025
Merged

Studio: Display tooltip with the demo site last update time #812

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e63be0d
Add tooltip with the demo site last update time
ivan-ottinger Jan 16, 2025
c0a6eaf
Update tooltip placement
ivan-ottinger Jan 16, 2025
38a15d2
Update tooltip placement
ivan-ottinger Jan 17, 2025
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 30 additions & 14 deletions src/components/content-tab-snapshots.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { useArchiveErrorMessages } from '../hooks/use-archive-error-messages';
import { useArchiveSite } from '../hooks/use-archive-site';
import { useAuth } from '../hooks/use-auth';
import { useExpirationDate } from '../hooks/use-expiration-date';
import { useFormatLocalizedTimestamps } from '../hooks/use-format-localized-timestamps';
import { useOffline } from '../hooks/use-offline';
import { useProgressTimer } from '../hooks/use-progress-timer';
import { useSnapshots } from '../hooks/use-snapshots';
Expand All @@ -21,7 +22,7 @@ import Button from './button';
import offlineIcon from './offline-icon';
import ProgressBar from './progress-bar';
import { ScreenshotDemoSite } from './screenshot-demo-site';
import { Tooltip, TooltipProps } from './tooltip';
import { Tooltip, TooltipProps, DynamicTooltip } from './tooltip';

interface ContentTabSnapshotsProps {
selectedSite: SiteDetails;
Expand Down Expand Up @@ -60,6 +61,7 @@ function SnapshotRow( {
const { updateDemoSite, isDemoSiteUpdating } = useUpdateDemoSite();
const errorMessages = useArchiveErrorMessages();
const isSiteDemoUpdating = isDemoSiteUpdating( snapshot.localSiteId );
const { formatRelativeTime } = useFormatLocalizedTimestamps();

const isOffline = useOffline();
const updateDemoSiteOfflineMessage = __(
Expand All @@ -68,6 +70,13 @@ function SnapshotRow( {
const deleteDemoSiteOfflineMessage = __(
'Deleting a demo site requires an internet connection.'
);
const getLastUpdateTimeText = () => {
if ( ! date ) {
return __( 'Never updated' );

@sejas sejas Jan 17, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this Never updated won’t ever be displayed.
No need to change it, it's just an observation.

@ivan-ottinger ivan-ottinger Jan 17, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your review and feedback, Antonio. Yes it should never display. I left it there as a fallback in case the date is not available for some reason. But now thinking about it further, maybe instead we should hide the tooltip in that case completely.
}
const timeDistance = formatRelativeTime( new Date( date ).toISOString() );
return sprintf( __( 'Last updated %s ago.' ), timeDistance );
};
const userBlockedMessage = errorMessages.rest_site_creation_blocked;

const { progress, setProgress } = useProgressTimer( {
Expand Down Expand Up @@ -212,24 +221,31 @@ function SnapshotRow( {
</div>
) : (
<>
<Tooltip disabled={ ! isUpdateDisabled } { ...tooltipContent }>
<Button
aria-description={ tooltipContent?.text || '' }
aria-disabled={ isUpdateDisabled }
variant="primary"
onClick={ () => {
if ( isUpdateDisabled ) {
return;
}
handleUpdateDemoSite();
} }
<Tooltip disabled={ ! isUpdateDisabled } placement="top-start" { ...tooltipContent }>
<DynamicTooltip
getTooltipText={ getLastUpdateTimeText }
placement="bottom-start"
disabled={ isUpdateDisabled }
>
{ __( 'Update demo site' ) }
</Button>
<Button
aria-description={ tooltipContent?.text || '' }
aria-disabled={ isUpdateDisabled }
variant="primary"
onClick={ () => {
if ( isUpdateDisabled ) {
return;
}
handleUpdateDemoSite();
} }
>
{ __( 'Update demo site' ) }
</Button>
</DynamicTooltip>
</Tooltip>
<Tooltip
disabled={ ! isOffline }
icon={ offlineIcon }
placement="top-start"
text={ deleteDemoSiteOfflineMessage }
>
<Button
Expand Down