Update ui deps

ui/package.json

@@ -5,12 +5,12 @@
   "homepage": ".",
   "proxy": "http://localhost:80",
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
+    "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.9.1",
     "axios": "^0.21.1",
-    "codemirror": "^5.60.0",
+    "codemirror": "^5.61.1",
     "detect-browser": "^5.2.0",
-    "js-base64": "^3.6.0",
+    "js-base64": "^3.6.1",
     "mobx": "^5.15.6",
     "mobx-react": "^6.3.0",
     "mobx-utils": "^5.6.1",
@@ -20,12 +20,13 @@
     "react-codemirror2": "^7.2.1",
     "react-dom": "^16.4.2",
     "react-infinite": "^0.13.0",
-    "react-markdown": "^4.0.6",
+    "react-markdown": "^6.0.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-timeago": "^4.1.9",
+    "react-timeago": "^6.2.1",
+    "remark-gfm": "^1.0.0",
     "remove-markdown": "^0.3.0",
-    "typeface-roboto": "0.0.75"
+    "typeface-roboto": "1.1.13"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -37,19 +38,19 @@
     "testformat": "prettier \"src/**/*.{ts,tsx}\" --list-different"
   },
   "devDependencies": {
-    "@types/codemirror": "0.0.98",
+    "@types/codemirror": "5.60.0",
     "@types/detect-browser": "^4.0.0",
     "@types/get-port": "^4.0.0",
-    "@types/jest": "^26.0.13",
+    "@types/jest": "^26.0.23",
-    "@types/js-base64": "^3.0.0",
+    "@types/js-base64": "^3.3.1",
-    "@types/node": "^14.10.1",
+    "@types/node": "^15.12.2",
     "@types/notifyjs": "^3.0.2",
-    "@types/puppeteer": "^3.0.2",
+    "@types/puppeteer": "^5.4.3",
     "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
     "@types/react-infinite": "0.0.35",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/react-router-dom": "^5.1.7",
-    "@types/remove-markdown": "^0.1.1",
+    "@types/remove-markdown": "^0.3.0",
     "@types/rimraf": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^4.1.0",
     "@typescript-eslint/parser": "^4.1.0",
@@ -60,13 +61,13 @@
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-unicorn": "^21.0.0",
     "get-port": "^5.1.1",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.1",
-    "puppeteer": "^8.0.0",
+    "puppeteer": "^10.0.0",
     "react-scripts": "^4.0.3",
     "rimraf": "^3.0.2",
     "tree-kill": "^1.2.0",
     "typescript": "4.0.2",
-    "wait-on": "^5.2.0"
+    "wait-on": "^5.3.0"
   },
   "eslintConfig": {
     "extends": "react-app"

ui/src/common/Markdown.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import gfm from 'remark-gfm';
+
+export const Markdown = ({children}: {children: string}) => (
+    <ReactMarkdown plugins={[gfm]}>{children}</ReactMarkdown>
+);

ui/src/message/Message.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import TimeAgo from 'react-timeago';
 import Container from '../common/Container';
 import * as config from '../config';
-import ReactMarkdown from 'react-markdown';
+import {Markdown} from '../common/Markdown';
 import {RenderMode, contentType} from './extras';
 import {IMessageExtras} from '../types';
 
@@ -86,7 +86,7 @@ class Message extends React.PureComponent<IProps & WithStyles<typeof styles>> {
         const content = this.props.content;
         switch (contentType(this.props.extras)) {
             case RenderMode.Markdown:
-                return <ReactMarkdown source={content} escapeHtml={true} />;
+                return <Markdown>{content}</Markdown>;
             case RenderMode.Plain:
             default:
                 return content;

ui/src/plugin/PluginDetailView.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {RouteComponentProps} from 'react-router';
-import ReactMarkDown from 'react-markdown';
+import {Markdown} from '../common/Markdown';
 import {UnControlled as CodeMirror} from 'react-codemirror2';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/material.css';
@@ -213,7 +213,7 @@ interface IDisplayerPanelProps {
 }
 const DisplayerPanel: React.FC<IDisplayerPanelProps> = ({displayText}) => (
     <Typography variant="body2">
-        <ReactMarkDown source={displayText} />
+        <Markdown>{displayText}</Markdown>
     </Typography>
 );
 

ui/src/tests/setup.ts

@@ -50,7 +50,7 @@ export const newTest = async (pluginsDir = ''): Promise<GotifyTest> => {
         close: async () => {
             await Promise.all([
                 browser.close(),
-                new Promise((resolve) => kill(gotifyInstance.pid, 'SIGKILL', () => resolve())),
+                new Promise((resolve) => kill(gotifyInstance.pid!, 'SIGKILL', () => resolve())),
             ]);
             rimraf.sync(gotifyFile, {maxBusyTries: 8});
         },