Refactor: Remove react-timeago (#7943)

Remove dependency 🫡
Unleash · Aug 21, 2024 · 6c5ce52 · 6c5ce52
1 parent 43100f9
commit 6c5ce52
Show file tree

Hide file tree

Showing 20 changed files with 352 additions and 330 deletions.
diff --git a/frontend/src/component/application/ApplicationChart.tsx b/frontend/src/component/application/ApplicationChart.tsx
@@ -13,7 +13,7 @@ import CheckCircle from '@mui/icons-material/CheckCircle';
 import CloudCircle from '@mui/icons-material/CloudCircle';
 import Flag from '@mui/icons-material/Flag';
 import WarningAmberRounded from '@mui/icons-material/WarningAmberRounded';
-import TimeAgo from 'react-timeago';
+import { TimeAgo } from 'component/common/TimeAgo/TimeAgo';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { getApplicationIssues } from './ApplicationIssues/ApplicationIssues';
 
@@ -305,17 +305,9 @@ export const ApplicationChart = ({ data }: IApplicationChartProps) => {
                                         <tr>
                                             <StyledCell>Last seen:</StyledCell>
                                             <StyledCell>
-                                                {environment.lastSeen && (
-                                                    <TimeAgo
-                                                        key={`${environment.lastSeen}`}
-                                                        minPeriod={60}
-                                                        date={
-                                                            new Date(
-                                                                environment.lastSeen,
-                                                            )
-                                                        }
-                                                    />
-                                                )}
+                                                <TimeAgo
+                                                    date={environment.lastSeen}
+                                                />
                                             </StyledCell>
                                         </tr>
                                     </tbody>

diff --git a/frontend/src/component/application/ApplicationOverview.test.tsx b/frontend/src/component/application/ApplicationOverview.test.tsx
@@ -13,7 +13,11 @@ const setupApi = (application: ApplicationOverviewSchema) => {
         '/api/admin/metrics/applications/my-app/overview',
         application,
     );
-    testServerRoute(server, '/api/admin/ui-config', {});
+    testServerRoute(server, '/api/admin/ui-config', {
+        flags: {
+            timeAgoRefactor: true,
+        },
+    });
 };
 
 test('Display application overview with environments', async () => {
@@ -51,7 +55,7 @@ test('Display application overview with environments', async () => {
     await screen.findByText('development environment');
     await screen.findByText('999');
     await screen.findByText('unleash-client-node:5.5.0-beta.0');
-    await screen.findByText('0 seconds ago');
+    await screen.findByText('< 1 minute ago');
 });
 
 test('Display application overview without environments', async () => {

diff --git a/frontend/src/component/archive/ArchiveTable/FeatureArchivedCell/FeatureArchivedCell.tsx b/frontend/src/component/archive/ArchiveTable/FeatureArchivedCell/FeatureArchivedCell.tsx
@@ -1,5 +1,5 @@
-import type { VFC } from 'react';
-import TimeAgo from 'react-timeago';
+import type { FC } from 'react';
+import { TimeAgo } from 'component/common/TimeAgo/TimeAgo';
 import { Tooltip, Typography, useTheme } from '@mui/material';
 import { formatDateYMD } from 'utils/formatDate';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
@@ -9,7 +9,7 @@ interface IFeatureArchivedCellProps {
     value?: string | Date | null;
 }
 
-export const FeatureArchivedCell: VFC<IFeatureArchivedCellProps> = ({
+export const FeatureArchivedCell: FC<IFeatureArchivedCellProps> = ({
     value: archivedAt,
 }) => {
     const { locationSettings } = useLocationSettings();
@@ -37,12 +37,7 @@ export const FeatureArchivedCell: VFC<IFeatureArchivedCellProps> = ({
                 arrow
             >
                 <Typography noWrap variant='body2' data-loading>
-                    <TimeAgo
-                        key={`${archivedAt}`}
-                        date={new Date(archivedAt)}
-                        title=''
-                        live={false}
-                    />
+                    <TimeAgo date={new Date(archivedAt)} refresh={false} />
                 </Typography>
             </Tooltip>
         </TextCell>

diff --git a/...ponent/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx b/...ponent/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import { Markdown } from 'component/common/Markdown/Markdown';
 import Paper from '@mui/material/Paper';
 import { Box, styled, Typography } from '@mui/material';
-import TimeAgo from 'react-timeago';
+import { TimeAgo } from 'component/common/TimeAgo/TimeAgo';
 import { StyledAvatar } from './StyledAvatar';
 import type { IChangeRequestComment } from '../../changeRequest.types';
 
@@ -35,12 +35,7 @@ export const ChangeRequestComment: FC<{ comment: IChangeRequestComment }> = ({
                 <Box>
                     <strong>{comment.createdBy.username}</strong>{' '}
                     <Typography color='text.secondary' component='span'>
-                        commented{' '}
-                        <TimeAgo
-                            key={`${comment.createdAt}`}
-                            minPeriod={60}
-                            date={new Date(comment.createdAt)}
-                        />
+                        commented <TimeAgo date={comment.createdAt} />
                     </Typography>
                 </Box>
             </CommentHeader>

diff --git a/...component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx b/...component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@mui/material';
 import { type FC, useState } from 'react';
 import { Typography, Tooltip } from '@mui/material';
-import TimeAgo from 'react-timeago';
+import { TimeAgo } from 'component/common/TimeAgo/TimeAgo';
 import type { ChangeRequestType } from 'component/changeRequest/changeRequest.types';
 import { ChangeRequestStatusBadge } from 'component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge';
 import {
@@ -38,13 +38,7 @@ export const ChangeRequestHeader: FC<{ changeRequest: ChangeRequestType }> = ({
                         margin: theme.spacing('auto', 0, 'auto', 2),
                     })}
                 >
-                    Created{' '}
-                    <TimeAgo
-                        key={`${changeRequest.createdAt}`}
-                        minPeriod={60}
-                        date={new Date(changeRequest.createdAt)}
-                    />{' '}
-                    by
+                    Created <TimeAgo date={changeRequest.createdAt} /> by
                 </Typography>
                 <Box
                     sx={(theme) => ({

diff --git a/frontend/src/component/common/Notifications/Notification.tsx b/frontend/src/component/common/Notifications/Notification.tsx
@@ -11,7 +11,7 @@ import type {
     NotificationsSchemaItemNotificationType,
 } from 'openapi';
 import { ReactComponent as ChangesAppliedIcon } from 'assets/icons/merge.svg';
-import TimeAgo from 'react-timeago';
+import { TimeAgo } from 'component/common/TimeAgo/TimeAgo';
 import ToggleOffOutlined from '@mui/icons-material/ToggleOffOutlined';
 import { flexRow } from 'themes/themeStyles';
 
@@ -157,11 +157,7 @@ export const Notification = ({
                     </StyledUserContainer>
 
                     <StyledTimeAgoTypography>
-                        <TimeAgo
-                            key={`${notification.createdAt}`}
-                            date={new Date(notification.createdAt)}
-                            minPeriod={60}
-                        />
+                        <TimeAgo date={notification.createdAt} />
                     </StyledTimeAgoTypography>
                 </StyledSecondaryInfoBox>
             </StyledNotificationMessageBox>

diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx