ui: Markdown timestamp support (#3558)

* add timestamp support to markdown

* support unixstamp format

* stamp -> date

package.json

@@ -88,6 +88,7 @@
     "jest": "29.7.0",
     "lodash": "4.17.21",
     "luxon": "3.4.3",
+    "mdast-util-find-and-replace": "3.0.1",
     "mdi-material-ui": "7.7.0",
     "prettier": "3.1.0",
     "prettier-plugin-go-template": "0.0.15",

web/src/app/util/CopyText.tsx

@@ -16,13 +16,20 @@ const useStyles = makeStyles({
   icon: {
     paddingRight: 4,
   },
+  noTypography: {
+    display: 'inline',
+    textDecorationStyle: 'dotted',
+    textUnderlineOffset: '0.25rem',
+    textDecorationLine: 'underline',
+  },
 })
 
 interface CopyTextProps {
   placement?: TooltipProps['placement']
-  title?: string
+  title?: React.ReactNode
   value: string
   asURL?: boolean
+  noTypography?: boolean
 }
 
 export default function CopyText(props: CopyTextProps): JSX.Element {
@@ -50,6 +57,33 @@ export default function CopyText(props: CopyTextProps): JSX.Element {
         {props.title}
       </AppLink>
     )
+  } else if (props.noTypography) {
+    content = (
+      <span
+        className={classes.copyContainer + ' ' + classes.noTypography}
+        role='button'
+        tabIndex={0}
+        onClick={() => {
+          copyToClipboard(props.value)
+          setCopied(true)
+        }}
+        onKeyPress={(e) => {
+          if (e.key !== 'Enter') {
+            return
+          }
+
+          copyToClipboard(props.value)
+          setCopied(true)
+        }}
+      >
+        <ContentCopy
+          color='primary'
+          className={props.title ? classes.icon : undefined}
+          fontSize='small'
+        />
+        {props.title}
+      </span>
+    )
   } else {
     content = (
       <Typography

web/src/app/util/Markdown.js

@@ -5,6 +5,7 @@ import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
 import makeStyles from '@mui/styles/makeStyles'
 import AppLink from './AppLink'
+import timestampSupport from './Markdown.timestampSupport'
 
 const useStyles = makeStyles({
   markdown: {
@@ -73,7 +74,7 @@ export default function Markdown(props) {
           </AppLink>
         ),
       }}
-      remarkPlugins={[remarkGfm, remarkBreaks]}
+      remarkPlugins={[timestampSupport, remarkGfm, remarkBreaks]}
       allowElement={(element) => {
         if (
           element.tagName === 'a' &&

web/src/app/util/Markdown.timestampSupport.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import {
+  FindAndReplaceTuple,
+  findAndReplace,
+} from 'mdast-util-find-and-replace'
+import { Time } from './Time'
+import CopyText from './CopyText'
+
+type Node = {
+  type: 'element'
+  value: React.ReactNode
+}
+
+// 2006-01-02T15:04:05.999999999Z07:00
+const isoTimestampRegex =
+  /\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d(\.\d+)?([+-][0-2]\d:[0-5]\d|Z)/g
+function fromISO(iso: string): Node {
+  return {
+    type: 'element',
+    value: <CopyText noTypography title={<Time time={iso} />} value={iso} />,
+  }
+}
+
+// Mon Jan _2 15:04:05 MST 2006
+const unixDateRegex = /\w+\s+\w+\s+\d+\s+\d{2}:\d{2}:\d{2}\s\w+\s\d{4}/g
+function fromUnixDate(unix: string): Node {
+  return fromISO(new Date(unix).toISOString())
+}
+
+// mdast types are wrong, so we have to cast to unknown and then to the correct
+// type.
+const isoTuple = [isoTimestampRegex, fromISO] as unknown as FindAndReplaceTuple
+const unixTuple = [
+  unixDateRegex,
+  fromUnixDate,
+] as unknown as FindAndReplaceTuple
+
+export default function timestampSupport() {
+  return function (tree: Parameters<typeof findAndReplace>[0]) {
+    findAndReplace(tree, [isoTuple, unixTuple])
+  }
+}

yarn.lock

@@ -9192,7 +9192,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdast-util-find-and-replace@npm:^3.0.0":
+"mdast-util-find-and-replace@npm:3.0.1, mdast-util-find-and-replace@npm:^3.0.0":
   version: 3.0.1
   resolution: "mdast-util-find-and-replace@npm:3.0.1"
   dependencies:
@@ -11634,6 +11634,7 @@ __metadata:
     jest: 29.7.0
     lodash: 4.17.21
     luxon: 3.4.3
+    mdast-util-find-and-replace: 3.0.1
     mdi-material-ui: 7.7.0
     prettier: 3.1.0
     prettier-plugin-go-template: 0.0.15