fix(pagerduty): use the luxon date library

plugins/pagerduty/package.json

@@ -31,14 +31,14 @@
   },
   "dependencies": {
     "@backstage/catalog-model": "^0.7.1",
-    "@backstage/plugin-catalog-react": "^0.0.2",
     "@backstage/core": "^0.6.0",
+    "@backstage/plugin-catalog-react": "^0.0.2",
     "@backstage/theme": "^0.2.3",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
     "classnames": "^2.2.6",
-    "date-fns": "^2.15.0",
+    "luxon": "1.25.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "6.0.0-beta.0",
@@ -53,9 +53,9 @@
     "@testing-library/user-event": "^12.0.7",
     "@types/jest": "^26.0.7",
     "@types/node": "^12.0.0",
+    "cross-fetch": "^3.0.6",
     "msw": "^0.21.2",
-    "node-fetch": "^2.6.1",
-    "cross-fetch": "^3.0.6"
+    "node-fetch": "^2.6.1"
   },
   "files": [
     "dist"

plugins/pagerduty/src/components/Incident/IncidentListItem.tsx

@@ -27,7 +27,7 @@ import {
   Typography,
 } from '@material-ui/core';
 import { StatusError, StatusWarning } from '@backstage/core';
-import { formatDistanceToNowStrict } from 'date-fns';
+import { DateTime, Duration } from 'luxon';
 import { Incident } from '../types';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
 
@@ -53,8 +53,12 @@ type Props = {
 
 export const IncidentListItem = ({ incident }: Props) => {
   const classes = useStyles();
+  const duration =
+    new Date().getTime() - new Date(incident.created_at).getTime();
+  const createdAt = DateTime.local()
+    .minus(Duration.fromMillis(duration))
+    .toRelative({ locale: 'en' });
   const user = incident.assignments[0]?.assignee;
-  const createdAt = formatDistanceToNowStrict(new Date(incident.created_at));
 
   return (
     <ListItem dense key={incident.id}>
@@ -77,7 +81,7 @@ export const IncidentListItem = ({ incident }: Props) => {
         }}
         secondary={
           <Typography noWrap variant="body2" color="textSecondary">
-            Created {createdAt} ago and assigned to{' '}
+            Created {createdAt} and assigned to{' '}
             <Link
               href={user?.html_url ?? '#'}
               target="_blank"