chore: initial draft

Unleash · Oct 10, 2024 · 8367855 · 8367855
1 parent 23b0401
commit 8367855
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 10 deletions.
diff --git 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<TimeAgoProps> = ({
     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<TimeAgoProps> = ({
     }
 
     return (
-        <time dateTime={state.dateTime.toISOString()}>{state.description}</time>
+        <StyledTime
+            className={className}
+            dateTime={state.dateTime.toISOString()}
+        >
+            {state.description}
+        </StyledTime>
     );
 };
diff --git 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 (
         <StyledContainer sx={sx}>
             <StyledTooltipResolver
@@ -64,11 +83,14 @@ const TooltipContainer: FC<{
                 arrow
                 describeChild
             >
-                <StyledBox sx={{ '&:hover': { background: color } }}>
-                    <StyledIconWrapper style={{ background: color }}>
-                        {children}
-                    </StyledIconWrapper>
-                </StyledBox>
+                <TooltipContentWrapper>
+                    <StyledBox sx={{ '&:hover': { background: color } }}>
+                        <StyledIconWrapper style={{ background: color }}>
+                            {children}
+                        </StyledIconWrapper>
+                    </StyledBox>
+                    {timeAgo}
+                </TooltipContentWrapper>
             </StyledTooltipResolver>
         </StyledContainer>
     );
@@ -83,6 +105,7 @@ export const FeatureEnvironmentSeen = ({
     featureLastSeen,
     environments,
     sx,
+    showTimeAgo,
     ...rest
 }: IFeatureEnvironmentSeenProps) => {
     const getColor = useLastSeenColors();
@@ -94,6 +117,7 @@ export const FeatureEnvironmentSeen = ({
             <TooltipContainer
                 sx={sx}
                 tooltip='No usage reported from connected applications'
+                timeAgo={<StyledNoUsage>No usage</StyledNoUsage>}
             >
                 <Box data-loading>
                     <LineBox>
@@ -116,6 +140,7 @@ export const FeatureEnvironmentSeen = ({
                     {...rest}
                 />
             }
+            timeAgo={<StyledTimeAgo date={lastSeen} />}
             color={background}
         >
             <UsageRate stroke={text} />

diff --git 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}
             />
             <FeatureLifecycle
                 feature={feature}

diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
@@ -176,6 +176,7 @@ export const FlagMetricsChart: FC<{
         <ChartContainer>
             <ExposureAndSelectors>
                 <StyledExposure
+                    showTimeAgo
                     project={flag.project}
                     flagName={flag.name}
                     onArchive={onArchive}