Store LastUpdated as a duration, not a timestamp

The `lastUpdated` value is now the duration between timestamp of the
last time the repo was updated and time the file was downloaded.
This fixes the duration and it won't change over time.

Author: aeisenberg

extensions/ql-vscode/src/remote-queries/gh-actions-api-client.ts

@@ -395,7 +395,7 @@ export async function getRepositoriesMetadata(credentials: Credentials, nwos: st
         const owner = node.owner.login;
         const name = node.name;
         const starCount = node.stargazerCount;
-        const lastUpdated = new Date(node.updatedAt).getTime();
+        const lastUpdated = Date.now() - new Date(node.updatedAt).getTime();
         metadata[`${owner}/${name}`] = {
           starCount, lastUpdated
         };

extensions/ql-vscode/src/remote-queries/view/LasstUpdated.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { CalendarIcon } from '@primer/octicons-react';
+import styled from 'styled-components';
+
+const Calendar = styled.span`
+  flex-grow: 0;
+  text-align: right;
+  margin-right: 0;
+`;
+
+const Duration = styled.span`
+  text-align: left;
+  width: 8em;
+  margin-left: 0.5em;
+`;
+
+type Props = { lastUpdated?: number };
+
+const LastUpdated = ({ lastUpdated }: Props) => (
+  Number.isFinite(lastUpdated) ? (
+    <>
+      <Calendar>
+        <CalendarIcon size={16} />
+      </Calendar>
+      <Duration>
+        {humanizeDuration(lastUpdated)}
+      </Duration>
+    </>
+  ) : (
+    <></>
+  )
+);
+
+export default LastUpdated;
+
+const formatter = new Intl.RelativeTimeFormat('en', {
+  numeric: 'auto'
+});
+
+// All these are approximate, specifically months and years
+const MINUTE_IN_MILLIS = 1000 * 60;
+const HOUR_IN_MILLIS = 60 * MINUTE_IN_MILLIS;
+const DAY_IN_MILLIS = 24 * HOUR_IN_MILLIS;
+const MONTH_IN_MILLIS = 30 * DAY_IN_MILLIS;
+const YEAR_IN_MILLIS = 365 * DAY_IN_MILLIS;
+
+function humanizeDuration(diff?: number) {
+  if (!diff) {
+    return '';
+  }
+  if (diff < HOUR_IN_MILLIS) {
+    return formatter.format(- Math.floor(diff / MINUTE_IN_MILLIS), 'minute');
+  } else if (diff < DAY_IN_MILLIS) {
+    return formatter.format(- Math.floor(diff / HOUR_IN_MILLIS), 'hour');
+  } else if (diff < MONTH_IN_MILLIS) {
+    return formatter.format(- Math.floor(diff / DAY_IN_MILLIS), 'day');
+  } else if (diff < YEAR_IN_MILLIS) {
+    return formatter.format(- Math.floor(diff / MONTH_IN_MILLIS), 'month');
+  } else {
+    return formatter.format(- Math.floor(diff / YEAR_IN_MILLIS), 'year');
+  }
+}

extensions/ql-vscode/src/remote-queries/view/LastUpdated.tsx

@@ -23,7 +23,7 @@ import RepositoriesSearch from './RepositoriesSearch';
 import ActionButton from './ActionButton';
 import StarCount from './StarCount';
 import SortRepoFilter, { Sort, sorter } from './SortRepoFilter';
-import LastUpdated from './LasstUpdated';
+import LastUpdated from './LastUpdated';
 
 const numOfReposInContractedMode = 10;