Merge branch 'chore/update-react-scripts' into 'master'

NikolayS · NikolayS · commit 034d05b58342 · 2022-02-15T17:08:30.000Z
chore(ui): update react scripts v5

See merge request postgres-ai/database-lab!468
diff --git a/ui/cspell.json b/ui/cspell.json
@@ -136,6 +136,7 @@
     "sidemenu",
     "craco",
     "Formik",
-    "healthz"
+    "healthz",
+    "rehype"
   ]
 }
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/packages/ce/package.json b/ui/packages/ce/package.json
@@ -16,7 +16,7 @@
     "react-dom": "^17.0.2",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.0",
     "typescript": "^4.4.4",
     "whatwg-fetch": "^3.6.2"
   },
diff --git a/ui/packages/ce/src/api/clones/destroyClone.ts b/ui/packages/ce/src/api/clones/destroyClone.ts
@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------
  */
 
-import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destoryClone'
+import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destroyClone'
 
 import { request } from 'helpers/request'
 
diff --git a/ui/packages/platform/package.json b/ui/packages/platform/package.json
@@ -15,13 +15,14 @@
     "byte-size": "^7.0.1",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1",
+    "crypto-browserify": "^3.12.0",
     "d3": "^5.12.0",
     "d3-flame-graph": "^2.1.3",
     "date-fns": "^2.22.1",
     "dompurify": "^2.0.12",
     "es6-promise": "^4.2.8",
     "get-user-locale": "^1.4.0",
-    "jsonwebtoken": "^8.5.1",
+    "jwt-decode": "^3.1.2",
     "lodash": "^4.17.15",
     "md5": "^2.2.1",
     "mobx": "^6.3.2",
@@ -32,12 +33,13 @@
     "react-countdown-hook": "^1.1.0",
     "react-div-100vh": "^0.6.0",
     "react-dom": "^17.0.2",
-    "react-markdown": "^4.2.2",
+    "react-markdown": "^8.0.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-router-hash-link": "^1.2.2",
     "reflux": "^6.4.1",
-    "timeago.js": "^4.0.2",
+    "rehype-raw": "^6.1.1",
+    "stream-browserify": "^3.0.0",
     "typeface-roboto": "0.0.75",
     "use-interval": "^1.3.0",
     "uuid": "^3.3.2",
@@ -76,7 +78,7 @@
     "eslint": "^7.28.0",
     "eslint-plugin-react": "^7.18.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.0",
     "sass": "^1.37.5",
     "stylelint": "^13.13.1",
     "stylelint-config-sass-guidelines": "^8.0.0",
diff --git a/ui/packages/platform/src/api/clones/destroyClone.ts b/ui/packages/platform/src/api/clones/destroyClone.ts
@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------
  */
 
-import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destoryClone'
+import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destroyClone'
 
 import { request } from 'helpers/request'
 
diff --git a/ui/packages/platform/src/components/Dashboard.js b/ui/packages/platform/src/components/Dashboard.js
@@ -14,6 +14,7 @@ import {
   TableHead, TableRow, Button, Grid
 } from '@material-ui/core';
 import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
 
 import {
   HorizontalScrollContainer
@@ -403,10 +404,10 @@ class Dashboard extends Component {
                 <h1>Getting started</h1>
                 <ReactMarkdown
                   className={classes.onboarding}
-                  source={this.state.data.userProfile.data.orgs[org].onboarding_text}
-                  escapeHtml={false}
-                  renderers={{
-                    link: (props) => {
+                  children={this.state.data.userProfile.data.orgs[org].onboarding_text}
+                  rehypePlugins={[rehypeRaw]}
+                  components={{
+                    a: (props) => {
                       const { href, target, children } = props;
                       return (
                         <Link
@@ -426,10 +427,10 @@ class Dashboard extends Component {
                 <h1>Useful links</h1>
                 <ReactMarkdown
                   className={classes.onboarding}
-                  source={this.state.data.userProfile.data.platform_onboarding_text}
-                  escapeHtml={false}
-                  renderers={{
-                    link: (props) => {
+                  children={this.state.data.userProfile.data.platform_onboarding_text}
+                  rehypePlugins={[rehypeRaw]}
+                  components={{
+                    a: (props) => {
                       const { href, target, children } = props;
                       return (
                         <Link
diff --git a/ui/packages/platform/src/components/DbLabSession.js b/ui/packages/platform/src/components/DbLabSession.js
@@ -17,12 +17,12 @@ import {
   TableRow
 } from '@material-ui/core';
 import Typography from '@material-ui/core/Typography';
-import * as timeago from 'timeago.js';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import TextField from '@material-ui/core/TextField';
+import { formatDistanceToNowStrict } from 'date-fns';
 
 import {
   HorizontalScrollContainer
@@ -572,7 +572,10 @@ class DbLabSession extends Component {
 
           <Typography component='p'>
             <span className={classes.paramTitle}>Created:</span>
-            {session && timeago.format(session.started_at + ' UTC')}
+            {
+              session &&
+              formatDistanceToNowStrict(new Date(session.started_at), { addSuffix: true })
+            }
           </Typography>
 
           <div className={classes.summaryDivider} />
diff --git a/ui/packages/platform/src/components/DbLabSessions.js b/ui/packages/platform/src/components/DbLabSessions.js
@@ -12,7 +12,7 @@ import {
   Table, TableBody, TableCell,
   TableHead, TableRow, Button
 } from '@material-ui/core';
-import * as timeago from 'timeago.js';
+import { formatDistanceToNowStrict } from 'date-fns';
 
 import {
   HorizontalScrollContainer
@@ -301,7 +301,12 @@ class DbLabSessions extends Component {
                             </div>
                             <div>
                               {icons.calendar}&nbsp;created&nbsp;
-                              {timeago.format(s.started_at + ' UTC')}
+                              {
+                                formatDistanceToNowStrict(
+                                  new Date(s.started_at),
+                                  { addSuffix: true }
+                                )
+                              }
                               {s.tags && s.tags.launched_by ? (
                                 <span> by {s.tags.launched_by}</span>
                               ) : ''}
diff --git a/ui/packages/platform/src/components/JoeHistory.js b/ui/packages/platform/src/components/JoeHistory.js
@@ -13,8 +13,8 @@ import {
   TableHead, TableRow, Button, Checkbox, InputAdornment,
   IconButton, OutlinedInput, Tooltip, Box
 } from '@material-ui/core';
-import * as timeago from 'timeago.js';
 import dompurify from 'dompurify';
+import { formatDistanceToNowStrict } from 'date-fns';
 
 import {
   HorizontalScrollContainer
@@ -822,7 +822,12 @@ class JoeHistory extends Component {
                                   classes={{ tooltip: classes.toolTip }}
                                 >
                                   <span className={classes.timeLabel}>
-                                    {timeago.format(c['created_at'])}
+                                    {
+                                      formatDistanceToNowStrict(
+                                        new Date(c.created_at),
+                                        { addSuffix: true }
+                                      )
+                                    }
                                   </span>
                                 </Tooltip>
                               </div>
diff --git a/ui/packages/platform/src/components/ReportFile.js b/ui/packages/platform/src/components/ReportFile.js
@@ -11,6 +11,7 @@ import { withStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import ReactMarkdown from 'react-markdown';
 import Button from '@material-ui/core/Button';
+import rehypeRaw from 'rehype-raw';
 
 import { PageSpinner } from '@postgres.ai/shared/components/PageSpinner';
 import { styles } from '@postgres.ai/shared/styles/styles';
@@ -318,10 +319,10 @@ class ReportFile extends Component {
 
           <ReactMarkdown
             className='md-report-file-preview'
-            source={data.files[fileId].data}
-            escapeHtml={false}
-            renderers={{
-              link: (props) => {
+            children={data.files[fileId].data}
+            rehypePlugins={[rehypeRaw]}
+            components={{
+              a: (props) => {
                 return that.markdownLink(props);
               }
             }}
diff --git a/ui/packages/platform/src/pages/JoeInstance/Messages/index.jsx b/ui/packages/platform/src/pages/JoeInstance/Messages/index.jsx
@@ -16,6 +16,7 @@ import {
 } from '@material-ui/core';
 import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
 import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
 import { ResizeObserver } from '@juggle/resize-observer';
 
 import { icons } from '@postgres.ai/shared/styles/icons';
@@ -132,14 +133,14 @@ export const Messages = (props) => {
                       {
                         <ReactMarkdown
                           className='markdown'
-                          source={messages[m].formattedMessage}
-                          escapeHtml={false}
+                          children={messages[m].formattedMessage}
+                          rehypePlugins={[rehypeRaw]}
                           linkTarget='_blank'
-                          renderers={{
-                            link: (properties) => {
+                          components={{
+                            a: (properties) => {
                               return markdownLink(properties, m);
                             },
-                            paragraph: 'div'
+                            p: 'div'
                           }}
                         />
                       }
diff --git a/ui/packages/platform/src/pages/JoeSessionCommand/index.js b/ui/packages/platform/src/pages/JoeSessionCommand/index.js
@@ -18,7 +18,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import Slide from '@material-ui/core/Slide';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
-import * as timeago from 'timeago.js';
+import { formatDistanceToNowStrict } from 'date-fns';
 
 import { FormattedText } from '@postgres.ai/shared/components/FormattedText';
 import { PageSpinner } from '@postgres.ai/shared/components/PageSpinner';
@@ -444,7 +444,9 @@ class JoeSessionCommand extends Component {
 
             <h4>Details:</h4>
             <Typography component='p'>
-              <span>Uploaded</span>:&nbsp;{ timeago.format(data.createdAt) }&nbsp;
+              <span>Uploaded</span>:&nbsp;{
+                formatDistanceToNowStrict(new Date(data.createdAt), { addSuffix: true })
+              }&nbsp;
               ({ format.formatTimestampUtc(data.createdAt) })
             </Typography>
           </div>
diff --git a/ui/packages/platform/src/stores/store.js b/ui/packages/platform/src/stores/store.js
@@ -6,7 +6,7 @@
  */
 
 import Reflux from 'reflux';
-import jsonwebtoken from 'jsonwebtoken';
+import jwtDecode from 'jwt-decode';
 import md5 from 'md5';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -336,7 +336,14 @@ const Store = Reflux.createStore({
     this.data.auth.error = !!this.data.auth.errorMessage;
 
     if (typeof data.token !== 'undefined') {
-      let tokenData = jsonwebtoken.decode(data.token);
+      let tokenData = null;
+
+      try {
+        tokenData = jwtDecode(data.token);
+      } catch (e) {
+        console.log(e);
+      }
+
       if (tokenData && typeof tokenData.id !== 'undefined') {
         this.data = this.getInitialState();
         this.data.auth.token = data.token;
diff --git a/ui/packages/shared/craco.config.js b/ui/packages/shared/craco.config.js
@@ -58,8 +58,21 @@ module.exports = (context) => ({
       )
 
       // Passing build timestamp.
-      const { match: definePlugin } = getPlugin(webpackConfig, pluginByName('DefinePlugin'))
-      if (definePlugin) definePlugin.definitions['process.env'].BUILD_TIMESTAMP = `${buildTimestamp}`
+      const { match: definePlugin } = getPlugin(
+        webpackConfig,
+        pluginByName('DefinePlugin'),
+      )
+      if (definePlugin)
+        definePlugin.definitions[
+          'process.env'
+        ].BUILD_TIMESTAMP = `${buildTimestamp}`
+
+      // Resolve polyfills.
+      webpackConfig.resolve.fallback = {
+        ...webpackConfig.resolve.fallback,
+        crypto: require.resolve('crypto-browserify'),
+        stream: require.resolve('stream-browserify'),
+      }
 
       return webpackConfig
     },
diff --git a/ui/packages/shared/pages/Clone/stores/Main.ts b/ui/packages/shared/pages/Clone/stores/Main.ts
@@ -10,7 +10,7 @@ import { makeAutoObservable } from 'mobx'
 import { GetInstance } from '@postgres.ai/shared/types/api/endpoints/getInstance'
 import { GetClone } from '@postgres.ai/shared/types/api/endpoints/getClone'
 import { ResetClone } from '@postgres.ai/shared/types/api/endpoints/resetClone'
-import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destoryClone'
+import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destroyClone'
 import { UpdateClone } from '@postgres.ai/shared/types/api/endpoints/updateClone'
 import {
   SnapshotsStore,
diff --git a/ui/packages/shared/pages/Instance/stores/Main.ts b/ui/packages/shared/pages/Instance/stores/Main.ts
@@ -9,7 +9,7 @@ import { makeAutoObservable } from 'mobx'
 import { GetSnapshots } from '@postgres.ai/shared/types/api/endpoints/getSnapshots'
 import { GetInstance } from '@postgres.ai/shared/types/api/endpoints/getInstance'
 import { RefreshInstance } from '@postgres.ai/shared/types/api/endpoints/refreshInstance'
-import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destoryClone'
+import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destroyClone'
 import { ResetClone } from '@postgres.ai/shared/types/api/endpoints/resetClone'
 import { Instance } from '@postgres.ai/shared/types/api/entities/instance'
 import { SnapshotsStore } from '@postgres.ai/shared/stores/Snapshots'
diff --git a/ui/packages/shared/types/api/endpoints/destroyClone.ts b/ui/packages/shared/types/api/endpoints/destroyClone.ts

Original file line number	Diff line number	Diff line change
`@@ -136,6 +136,7 @@`
`136`	`136`	`"sidemenu",`
`137`	`137`	`"craco",`
`138`	`138`	`"Formik",`
`139`		`- "healthz"`
	`139`	`+ "healthz",`
	`140`	`+ "rehype"`
`140`	`141`	`]`
`141`	`142`	`}`