diff --git a/frontend/src/component/common/TimeAgo/TimeAgo.tsx b/frontend/src/component/common/TimeAgo/TimeAgo.tsx index a5b7b45126d2..399d73a0aabb 100644 --- a/frontend/src/component/common/TimeAgo/TimeAgo.tsx +++ b/frontend/src/component/common/TimeAgo/TimeAgo.tsx @@ -1,11 +1,13 @@ import { useEffect, useState, type FC } from 'react'; import { formatDistanceToNow, secondsToMilliseconds } from 'date-fns'; +import { styled } from '@mui/material'; type TimeAgoProps = { date: Date | number | string | null | undefined; fallback?: string; refresh?: boolean; timeElement?: boolean; + className?: string; }; const formatTimeAgo = (date: string | number | Date) => @@ -15,13 +17,19 @@ const formatTimeAgo = (date: string | number | Date) => .replace('about ', '') .replace('less than a minute ago', '< 1 minute ago'); +const StyledTime = styled('time')({}); + export const TimeAgo: FC = ({ date, fallback = '', refresh = true, timeElement = true, + className, }) => { - const getValue = (): { description: string; dateTime?: Date } => { + const getValue = (): { + description: string; + dateTime?: Date; + } => { try { if (!date) return { description: fallback }; return { @@ -53,6 +61,11 @@ export const TimeAgo: FC = ({ } return ( - + + {state.description} + ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx index 2510467f700c..7c3ab92d814b 100644 --- a/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx @@ -3,16 +3,18 @@ import type React from 'react'; import type { FC, ReactElement } from 'react'; import type { ILastSeenEnvironments } from 'interfaces/featureToggle'; import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver'; -import { Box, styled, type SxProps } from '@mui/material'; +import { Box, Typography, styled, type SxProps } from '@mui/material'; import { ReactComponent as UsageLine } from 'assets/icons/usage-line.svg'; import { ReactComponent as UsageRate } from 'assets/icons/usage-rate.svg'; import { useLastSeenColors } from './useLastSeenColors'; import { getLatestLastSeenAt } from './getLatestLastSeenAt'; +import { TimeAgo } from 'component/common/TimeAgo/TimeAgo'; interface IFeatureEnvironmentSeenProps { featureLastSeen: string | undefined; environments: ILastSeenEnvironments[]; sx?: SxProps; + showTimeAgo?: boolean; } const StyledContainer = styled('div')(({ theme }) => ({ @@ -50,12 +52,29 @@ const StyledTooltipResolver = styled(TooltipResolver)(({ theme }) => ({ maxWidth: theme.spacing(47.5), })); +const TooltipContentWrapper = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + gap: theme.spacing(0.5), + alignItems: 'center', +})); + +const StyledNoUsage = styled(Typography)(({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, + color: theme.palette.text.secondary, +})); + +const StyledTimeAgo = styled(TimeAgo)(({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, +})); + const TooltipContainer: FC<{ color?: string; tooltip: ReactElement | string; sx?: SxProps; children?: React.ReactNode; -}> = ({ sx, tooltip, color, children }) => { + timeAgo?: React.ReactNode; +}> = ({ sx, tooltip, color, children, timeAgo = <> }) => { return ( - - - {children} - - + + + + {children} + + + {timeAgo} + ); @@ -83,6 +105,7 @@ export const FeatureEnvironmentSeen = ({ featureLastSeen, environments, sx, + showTimeAgo, ...rest }: IFeatureEnvironmentSeenProps) => { const getColor = useLastSeenColors(); @@ -94,6 +117,7 @@ export const FeatureEnvironmentSeen = ({ No usage} > @@ -116,6 +140,7 @@ export const FeatureEnvironmentSeen = ({ {...rest} /> } + timeAgo={} color={background} > diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure.tsx index 5b53229e52e0..ca05171f430c 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure.tsx @@ -12,8 +12,9 @@ export const FlagExposure: FC<{ project: string; flagName: string; onArchive: () => void; + showTimeAgo?: boolean; className?: string; -}> = ({ project, flagName, onArchive, className }) => { +}> = ({ project, flagName, onArchive, className, showTimeAgo }) => { const { feature, refetchFeature } = useFeature(project, flagName); const lastSeenEnvironments: ILastSeenEnvironments[] = feature.environments?.map((env) => ({ @@ -33,6 +34,7 @@ export const FlagExposure: FC<{ sx={{ pt: 0, pb: 0 }} featureLastSeen={feature.lastSeenAt} environments={lastSeenEnvironments} + showTimeAgo={showTimeAgo} />