Skip to content

Commit c384fb7

Browse files
casinXNikolayS
authored andcommitted
chore(ui): update react scripts v5
1 parent 2cc01a7 commit c384fb7

File tree

18 files changed

+28115
-4941
lines changed

18 files changed

+28115
-4941
lines changed

ui/cspell.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@
136136
"sidemenu",
137137
"craco",
138138
"Formik",
139-
"healthz"
139+
"healthz",
140+
"rehype"
140141
]
141142
}

ui/package-lock.json

Lines changed: 28035 additions & 4902 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

ui/packages/ce/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"react-dom": "^17.0.2",
1717
"react-router": "^5.2.1",
1818
"react-router-dom": "^5.3.0",
19-
"react-scripts": "4.0.3",
19+
"react-scripts": "^5.0.0",
2020
"typescript": "^4.4.4",
2121
"whatwg-fetch": "^3.6.2"
2222
},

ui/packages/ce/src/api/clones/destroyClone.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*--------------------------------------------------------------------------
66
*/
77

8-
import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destoryClone'
8+
import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destroyClone'
99

1010
import { request } from 'helpers/request'
1111

ui/packages/platform/package.json

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@
1515
"byte-size": "^7.0.1",
1616
"clsx": "^1.1.1",
1717
"copy-to-clipboard": "^3.3.1",
18+
"crypto-browserify": "^3.12.0",
1819
"d3": "^5.12.0",
1920
"d3-flame-graph": "^2.1.3",
2021
"date-fns": "^2.22.1",
2122
"dompurify": "^2.0.12",
2223
"es6-promise": "^4.2.8",
2324
"get-user-locale": "^1.4.0",
24-
"jsonwebtoken": "^8.5.1",
25+
"jwt-decode": "^3.1.2",
2526
"lodash": "^4.17.15",
2627
"md5": "^2.2.1",
2728
"mobx": "^6.3.2",
@@ -32,12 +33,13 @@
3233
"react-countdown-hook": "^1.1.0",
3334
"react-div-100vh": "^0.6.0",
3435
"react-dom": "^17.0.2",
35-
"react-markdown": "^4.2.2",
36+
"react-markdown": "^8.0.0",
3637
"react-router": "^5.1.2",
3738
"react-router-dom": "^5.1.2",
3839
"react-router-hash-link": "^1.2.2",
3940
"reflux": "^6.4.1",
40-
"timeago.js": "^4.0.2",
41+
"rehype-raw": "^6.1.1",
42+
"stream-browserify": "^3.0.0",
4143
"typeface-roboto": "0.0.75",
4244
"use-interval": "^1.3.0",
4345
"uuid": "^3.3.2",
@@ -76,7 +78,7 @@
7678
"eslint": "^7.28.0",
7779
"eslint-plugin-react": "^7.18.0",
7880
"eslint-plugin-react-hooks": "^4.2.0",
79-
"react-scripts": "^4.0.3",
81+
"react-scripts": "^5.0.0",
8082
"sass": "^1.37.5",
8183
"stylelint": "^13.13.1",
8284
"stylelint-config-sass-guidelines": "^8.0.0",

ui/packages/platform/src/api/clones/destroyClone.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*--------------------------------------------------------------------------
66
*/
77

8-
import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destoryClone'
8+
import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destroyClone'
99

1010
import { request } from 'helpers/request'
1111

ui/packages/platform/src/components/Dashboard.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
TableHead, TableRow, Button, Grid
1515
} from '@material-ui/core';
1616
import ReactMarkdown from 'react-markdown';
17+
import rehypeRaw from 'rehype-raw';
1718

1819
import {
1920
HorizontalScrollContainer
@@ -403,10 +404,10 @@ class Dashboard extends Component {
403404
<h1>Getting started</h1>
404405
<ReactMarkdown
405406
className={classes.onboarding}
406-
source={this.state.data.userProfile.data.orgs[org].onboarding_text}
407-
escapeHtml={false}
408-
renderers={{
409-
link: (props) => {
407+
children={this.state.data.userProfile.data.orgs[org].onboarding_text}
408+
rehypePlugins={[rehypeRaw]}
409+
components={{
410+
a: (props) => {
410411
const { href, target, children } = props;
411412
return (
412413
<Link
@@ -426,10 +427,10 @@ class Dashboard extends Component {
426427
<h1>Useful links</h1>
427428
<ReactMarkdown
428429
className={classes.onboarding}
429-
source={this.state.data.userProfile.data.platform_onboarding_text}
430-
escapeHtml={false}
431-
renderers={{
432-
link: (props) => {
430+
children={this.state.data.userProfile.data.platform_onboarding_text}
431+
rehypePlugins={[rehypeRaw]}
432+
components={{
433+
a: (props) => {
433434
const { href, target, children } = props;
434435
return (
435436
<Link

ui/packages/platform/src/components/DbLabSession.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@ import {
1717
TableRow
1818
} from '@material-ui/core';
1919
import Typography from '@material-ui/core/Typography';
20-
import * as timeago from 'timeago.js';
2120
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
2221
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
2322
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
2423
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
2524
import TextField from '@material-ui/core/TextField';
25+
import { formatDistanceToNowStrict } from 'date-fns';
2626

2727
import {
2828
HorizontalScrollContainer
@@ -572,7 +572,10 @@ class DbLabSession extends Component {
572572

573573
<Typography component='p'>
574574
<span className={classes.paramTitle}>Created:</span>
575-
{session && timeago.format(session.started_at + ' UTC')}
575+
{
576+
session &&
577+
formatDistanceToNowStrict(new Date(session.started_at), { addSuffix: true })
578+
}
576579
</Typography>
577580

578581
<div className={classes.summaryDivider} />

ui/packages/platform/src/components/DbLabSessions.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
Table, TableBody, TableCell,
1313
TableHead, TableRow, Button
1414
} from '@material-ui/core';
15-
import * as timeago from 'timeago.js';
15+
import { formatDistanceToNowStrict } from 'date-fns';
1616

1717
import {
1818
HorizontalScrollContainer
@@ -301,7 +301,12 @@ class DbLabSessions extends Component {
301301
</div>
302302
<div>
303303
{icons.calendar}&nbsp;created&nbsp;
304-
{timeago.format(s.started_at + ' UTC')}
304+
{
305+
formatDistanceToNowStrict(
306+
new Date(s.started_at),
307+
{ addSuffix: true }
308+
)
309+
}
305310
{s.tags && s.tags.launched_by ? (
306311
<span> by {s.tags.launched_by}</span>
307312
) : ''}

ui/packages/platform/src/components/JoeHistory.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import {
1313
TableHead, TableRow, Button, Checkbox, InputAdornment,
1414
IconButton, OutlinedInput, Tooltip, Box
1515
} from '@material-ui/core';
16-
import * as timeago from 'timeago.js';
1716
import dompurify from 'dompurify';
17+
import { formatDistanceToNowStrict } from 'date-fns';
1818

1919
import {
2020
HorizontalScrollContainer
@@ -822,7 +822,12 @@ class JoeHistory extends Component {
822822
classes={{ tooltip: classes.toolTip }}
823823
>
824824
<span className={classes.timeLabel}>
825-
{timeago.format(c['created_at'])}
825+
{
826+
formatDistanceToNowStrict(
827+
new Date(c.created_at),
828+
{ addSuffix: true }
829+
)
830+
}
826831
</span>
827832
</Tooltip>
828833
</div>

ui/packages/platform/src/components/ReportFile.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { withStyles } from '@material-ui/core/styles';
1111
import TextField from '@material-ui/core/TextField';
1212
import ReactMarkdown from 'react-markdown';
1313
import Button from '@material-ui/core/Button';
14+
import rehypeRaw from 'rehype-raw';
1415

1516
import { PageSpinner } from '@postgres.ai/shared/components/PageSpinner';
1617
import { styles } from '@postgres.ai/shared/styles/styles';
@@ -318,10 +319,10 @@ class ReportFile extends Component {
318319

319320
<ReactMarkdown
320321
className='md-report-file-preview'
321-
source={data.files[fileId].data}
322-
escapeHtml={false}
323-
renderers={{
324-
link: (props) => {
322+
children={data.files[fileId].data}
323+
rehypePlugins={[rehypeRaw]}
324+
components={{
325+
a: (props) => {
325326
return that.markdownLink(props);
326327
}
327328
}}

ui/packages/platform/src/pages/JoeInstance/Messages/index.jsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
} from '@material-ui/core';
1717
import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
1818
import ReactMarkdown from 'react-markdown';
19+
import rehypeRaw from 'rehype-raw';
1920
import { ResizeObserver } from '@juggle/resize-observer';
2021

2122
import { icons } from '@postgres.ai/shared/styles/icons';
@@ -132,14 +133,14 @@ export const Messages = (props) => {
132133
{
133134
<ReactMarkdown
134135
className='markdown'
135-
source={messages[m].formattedMessage}
136-
escapeHtml={false}
136+
children={messages[m].formattedMessage}
137+
rehypePlugins={[rehypeRaw]}
137138
linkTarget='_blank'
138-
renderers={{
139-
link: (properties) => {
139+
components={{
140+
a: (properties) => {
140141
return markdownLink(properties, m);
141142
},
142-
paragraph: 'div'
143+
p: 'div'
143144
}}
144145
/>
145146
}

ui/packages/platform/src/pages/JoeSessionCommand/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import CloseIcon from '@material-ui/icons/Close';
1818
import Slide from '@material-ui/core/Slide';
1919
import Tabs from '@material-ui/core/Tabs';
2020
import Tab from '@material-ui/core/Tab';
21-
import * as timeago from 'timeago.js';
21+
import { formatDistanceToNowStrict } from 'date-fns';
2222

2323
import { FormattedText } from '@postgres.ai/shared/components/FormattedText';
2424
import { PageSpinner } from '@postgres.ai/shared/components/PageSpinner';
@@ -444,7 +444,9 @@ class JoeSessionCommand extends Component {
444444

445445
<h4>Details:</h4>
446446
<Typography component='p'>
447-
<span>Uploaded</span>:&nbsp;{ timeago.format(data.createdAt) }&nbsp;
447+
<span>Uploaded</span>:&nbsp;{
448+
formatDistanceToNowStrict(new Date(data.createdAt), { addSuffix: true })
449+
}&nbsp;
448450
({ format.formatTimestampUtc(data.createdAt) })
449451
</Typography>
450452
</div>

ui/packages/platform/src/stores/store.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
import Reflux from 'reflux';
9-
import jsonwebtoken from 'jsonwebtoken';
9+
import jwtDecode from 'jwt-decode';
1010
import md5 from 'md5';
1111
import { v4 as uuidv4 } from 'uuid';
1212

@@ -336,7 +336,14 @@ const Store = Reflux.createStore({
336336
this.data.auth.error = !!this.data.auth.errorMessage;
337337

338338
if (typeof data.token !== 'undefined') {
339-
let tokenData = jsonwebtoken.decode(data.token);
339+
let tokenData = null;
340+
341+
try {
342+
tokenData = jwtDecode(data.token);
343+
} catch (e) {
344+
console.log(e);
345+
}
346+
340347
if (tokenData && typeof tokenData.id !== 'undefined') {
341348
this.data = this.getInitialState();
342349
this.data.auth.token = data.token;

ui/packages/shared/craco.config.js

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,21 @@ module.exports = (context) => ({
5858
)
5959

6060
// Passing build timestamp.
61-
const { match: definePlugin } = getPlugin(webpackConfig, pluginByName('DefinePlugin'))
62-
if (definePlugin) definePlugin.definitions['process.env'].BUILD_TIMESTAMP = `${buildTimestamp}`
61+
const { match: definePlugin } = getPlugin(
62+
webpackConfig,
63+
pluginByName('DefinePlugin'),
64+
)
65+
if (definePlugin)
66+
definePlugin.definitions[
67+
'process.env'
68+
].BUILD_TIMESTAMP = `${buildTimestamp}`
69+
70+
// Resolve polyfills.
71+
webpackConfig.resolve.fallback = {
72+
...webpackConfig.resolve.fallback,
73+
crypto: require.resolve('crypto-browserify'),
74+
stream: require.resolve('stream-browserify'),
75+
}
6376

6477
return webpackConfig
6578
},

ui/packages/shared/pages/Clone/stores/Main.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { makeAutoObservable } from 'mobx'
1010
import { GetInstance } from '@postgres.ai/shared/types/api/endpoints/getInstance'
1111
import { GetClone } from '@postgres.ai/shared/types/api/endpoints/getClone'
1212
import { ResetClone } from '@postgres.ai/shared/types/api/endpoints/resetClone'
13-
import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destoryClone'
13+
import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destroyClone'
1414
import { UpdateClone } from '@postgres.ai/shared/types/api/endpoints/updateClone'
1515
import {
1616
SnapshotsStore,

ui/packages/shared/pages/Instance/stores/Main.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { makeAutoObservable } from 'mobx'
99
import { GetSnapshots } from '@postgres.ai/shared/types/api/endpoints/getSnapshots'
1010
import { GetInstance } from '@postgres.ai/shared/types/api/endpoints/getInstance'
1111
import { RefreshInstance } from '@postgres.ai/shared/types/api/endpoints/refreshInstance'
12-
import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destoryClone'
12+
import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destroyClone'
1313
import { ResetClone } from '@postgres.ai/shared/types/api/endpoints/resetClone'
1414
import { Instance } from '@postgres.ai/shared/types/api/entities/instance'
1515
import { SnapshotsStore } from '@postgres.ai/shared/stores/Snapshots'

0 commit comments

Comments
 (0)