Format date according to designs

extensions/ql-vscode/src/pure/date.ts

@@ -0,0 +1,26 @@
+/*
+ * Contains an assortment of helper constants and functions for working with dates.
+ */
+
+const dateWithoutYearFormatter = new Intl.DateTimeFormat('en', {
+  month: 'short',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+});
+
+const dateFormatter = new Intl.DateTimeFormat('en', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+});
+
+export function formatDate(value: Date): string {
+  if (value.getFullYear() === new Date().getFullYear()) {
+    return dateWithoutYearFormatter.format(value);
+  }
+
+  return dateFormatter.format(value);
+}

extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisCompletionStats.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { VSCodeLink } from '@vscode/webview-ui-toolkit/react';
+import { formatDate } from '../../pure/date';
 
 type Props = {
   completedAt?: Date | undefined;
@@ -8,15 +9,17 @@ type Props = {
   onViewLogsClick: () => void;
 };
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+`;
+
 const Icon = styled.span`
   font-size: 1em !important;
   vertical-align: text-bottom;
 `;
 
-const ViewLogsLink = styled(VSCodeLink)`
-  margin-top: 0.2em;
-`;
-
 export const VariantAnalysisCompletionStats = ({
   completedAt,
   onViewLogsClick,
@@ -26,9 +29,9 @@ export const VariantAnalysisCompletionStats = ({
   }
 
   return (
-    <>
-      {completedAt.toLocaleString()}
-      <ViewLogsLink onClick={onViewLogsClick}>View logs</ViewLogsLink>
-    </>
+    <Container>
+      <span>{formatDate(completedAt)}</span>
+      <VSCodeLink onClick={onViewLogsClick}>View logs</VSCodeLink>
+    </Container>
   );
 };