From 10c21461bdb2208e4f2c98dc9eea5d6e2906fa06 Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Mon, 21 Aug 2023 14:52:32 +0300
Subject: [PATCH] feat: Last seen for toggles that have an old usage reported
 (#4538)

Last seen for toggles that have an old usage reported and no environment

Closes: # [1-1276]
(https://linear.app/unleash/issue/1-1276/last-seen-for-toggles-that-have-an-old-usage-reported-and-that-are)

![Screenshot 2023-08-21 at 14 40
42](https://github.com/Unleash/unleash/assets/104830839/bfa20993-3d52-4c34-959d-f3e34b5c5b47)

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../FeatureEnvironmentSeenCell.tsx            |   5 +-
 .../cells/FeatureSeenCell/LastSeenTooltip.tsx | 123 ++++++++++++------
 .../FeatureEnvironmentSeen.tsx                |   1 +
 3 files changed, 88 insertions(+), 41 deletions(-)

diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
index c28d9798fb..eadb37691f 100644
--- a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
+++ b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell.tsx
@@ -9,7 +9,10 @@ interface IFeatureSeenCellProps {
 export const FeatureEnvironmentSeenCell: VFC<IFeatureSeenCellProps> = ({
     feature,
 }) => {
-    const environments = Object.values(feature.environments);
+    const environments = Boolean(feature.environments)
+        ? Object.values(feature.environments)
+        : [];
+
     return (
         <FeatureEnvironmentSeen
             featureLastSeen={feature.lastSeenAt}
diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx
index a21cfe2867..c1e2e6e1bf 100644
--- a/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx
+++ b/frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx
@@ -1,4 +1,4 @@
-import { styled, SxProps, Theme } from '@mui/material';
+import { styled, SxProps, Theme, Typography } from '@mui/material';
 import TimeAgo from 'react-timeago';
 import { IEnvironments, IFeatureEnvironment } from 'interfaces/featureToggle';
 import React from 'react';
@@ -56,6 +56,7 @@ const StyledValue = styled('div', {
 }));
 
 interface ILastSeenTooltipProps {
+    featureLastSeen: string;
     environments?: IEnvironments[] | IFeatureEnvironment[];
     className?: string;
     sx?: SxProps<Theme>;
@@ -63,10 +64,14 @@ interface ILastSeenTooltipProps {
 
 export const LastSeenTooltip = ({
     environments,
+    featureLastSeen,
     ...rest
 }: ILastSeenTooltipProps) => {
     const getColor = useLastSeenColors();
     const [, defaultTextColor] = getColor();
+    const environmentsHaveLastSeen = environments?.some(environment =>
+        Boolean(environment.lastSeenAt)
+    );
     return (
         <StyledDescription {...rest}>
             <StyledDescriptionHeader sx={{ mb: 0 }}>
@@ -75,46 +80,84 @@ export const LastSeenTooltip = ({
             <StyledDescriptionSubHeader>
                 Usage is reported from connected applications through metrics
             </StyledDescriptionSubHeader>
-            {environments &&
-                environments.map(({ name, lastSeenAt }) => (
-                    <StyledDescriptionBlock key={name}>
-                        <StyledDescriptionBlockHeader>
-                            {name}
-                        </StyledDescriptionBlockHeader>
-                        <StyledValueContainer>
-                            <ConditionallyRender
-                                condition={Boolean(lastSeenAt)}
-                                show={
-                                    <TimeAgo
-                                        date={lastSeenAt!}
-                                        title=""
-                                        live={false}
-                                        formatter={(
-                                            value: number,
-                                            unit: string,
-                                            suffix: string
-                                        ) => {
-                                            const [, textColor] =
-                                                getColor(unit);
-                                            return (
-                                                <StyledValue color={textColor}>
-                                                    {`${value} ${unit}${
-                                                        value !== 1 ? 's' : ''
-                                                    } ${suffix}`}
-                                                </StyledValue>
-                                            );
-                                        }}
+            <ConditionallyRender
+                condition={
+                    Boolean(environments) && Boolean(environmentsHaveLastSeen)
+                }
+                show={
+                    <>
+                        {environments?.map(({ name, lastSeenAt }) => (
+                            <StyledDescriptionBlock key={name}>
+                                <StyledDescriptionBlockHeader>
+                                    {name}
+                                </StyledDescriptionBlockHeader>
+                                <StyledValueContainer>
+                                    <ConditionallyRender
+                                        condition={Boolean(lastSeenAt)}
+                                        show={
+                                            <TimeAgo
+                                                date={lastSeenAt!}
+                                                title=""
+                                                live={false}
+                                                formatter={(
+                                                    value: number,
+                                                    unit: string,
+                                                    suffix: string
+                                                ) => {
+                                                    const [, textColor] =
+                                                        getColor(unit);
+                                                    return (
+                                                        <StyledValue
+                                                            color={textColor}
+                                                        >
+                                                            {`${value} ${unit}${
+                                                                value !== 1
+                                                                    ? 's'
+                                                                    : ''
+                                                            } ${suffix}`}
+                                                        </StyledValue>
+                                                    );
+                                                }}
+                                            />
+                                        }
+                                        elseShow={
+                                            <StyledValue
+                                                color={defaultTextColor}
+                                            >
+                                                no usage
+                                            </StyledValue>
+                                        }
                                     />
-                                }
-                                elseShow={
-                                    <StyledValue color={defaultTextColor}>
-                                        no usage
-                                    </StyledValue>
-                                }
-                            />
-                        </StyledValueContainer>
-                    </StyledDescriptionBlock>
-                ))}
+                                </StyledValueContainer>
+                            </StyledDescriptionBlock>
+                        ))}
+                    </>
+                }
+                elseShow={
+                    <TimeAgo
+                        date={featureLastSeen}
+                        title=""
+                        live={false}
+                        formatter={(
+                            value: number,
+                            unit: string,
+                            suffix: string
+                        ) => {
+                            const [, textColor] = getColor(unit);
+                            return (
+                                <Typography
+                                    fontWeight={'bold'}
+                                    color={'text.primary'}
+                                >
+                                    {`Reported ${value} ${unit}${
+                                        value !== 1 ? 's' : ''
+                                    } ${suffix}`}
+                                </Typography>
+                            );
+                        }}
+                    />
+                }
+            />
         </StyledDescription>
     );
 };
diff --git a/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
index 58fb7d6747..00a037dd30 100644
--- a/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
@@ -91,6 +91,7 @@ export const FeatureEnvironmentSeen = ({
                                     sx={sx}
                                     tooltip={
                                         <LastSeenTooltip
+                                            featureLastSeen={featureLastSeen}
                                             environments={environments}
                                         />
                                     }