Skip to content

Commit e2c1226

Browse files
jkowalskijkowalski
authored
build(deps): upgraded react, react-dom an @types/react to the latest versions (#317)
* build(deps): upgraded react, react-dom an @types/react to the latest versions * switched to a new react-table implementation
1 parent c322e19 commit e2c1226

File tree

9 files changed

+243
-211
lines changed

9 files changed

+243
-211
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
"@fortawesome/free-regular-svg-icons": "^6.7.2",
88
"@fortawesome/free-solid-svg-icons": "^6.6.0",
99
"@fortawesome/react-fontawesome": "^0.2.2",
10+
"@tanstack/react-table": "^8.21.2",
1011
"bootstrap": "^5.3.3",
1112
"http-proxy-middleware": "^3.0.5",
1213
"moment": "^2.30.1",
13-
"react": "^18.2.0",
14+
"react": "^19.1.0",
1415
"react-bootstrap": "^2.10.9",
15-
"react-dom": "^18.3.1",
16-
"react-router-dom": "^5.3.4",
17-
"react-table": "^7.8.0"
16+
"react-dom": "^19.1.0",
17+
"react-router-dom": "^5.3.4"
1818
},
1919
"scripts": {
2020
"start": "vite",
@@ -39,10 +39,10 @@
3939
},
4040
"devDependencies": {
4141
"@testing-library/jest-dom": "^6.6.3",
42-
"@testing-library/react": "^16.2.0",
42+
"@testing-library/react": "^16.3.0",
4343
"@testing-library/user-event": "^14.5.2",
44-
"@types/react": "^18.3.10",
45-
"@types/react-dom": "^18.3.1",
44+
"@types/react": "^19.1.0",
45+
"@types/react-dom": "^19.1.1",
4646
"@vitejs/plugin-react": "^4.3.4",
4747
"axios": "^1.8.1",
4848
"axios-mock-adapter": "^2.0.0",

‎src/components/DirectoryItems.jsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,30 +37,30 @@ export class DirectoryItems extends Component {
3737
const { bytesStringBase2 } = this.context;
3838
const columns = [{
3939
id: "name",
40-
Header: 'Name',
40+
header: 'Name',
4141
width: "",
42-
accessor: x => directoryLinkOrDownload(x, this.props.historyState),
42+
cell: x => directoryLinkOrDownload(x.row.original, this.props.historyState),
4343
}, {
4444
id: "mtime",
45-
accessor: "mtime",
46-
Header: "Last Modification",
45+
accessorFn: x => x.mtime,
46+
header: "Last Modification",
4747
width: 200,
48-
Cell: x => rfc3339TimestampForDisplay(x.cell.value),
48+
cell: x => rfc3339TimestampForDisplay(x.cell.getValue()),
4949
}, {
5050
id: "size",
51-
accessor: x => sizeInfo(x),
52-
Header: "Size",
51+
accessorFn: x => sizeInfo(x),
52+
header: "Size",
5353
width: 100,
54-
Cell: x => sizeWithFailures(x.cell.value, x.row.original.summ, bytesStringBase2),
54+
cell: x => sizeWithFailures(x.cell.getValue(), x.row.original.summ, bytesStringBase2),
5555
}, {
5656
id: "files",
57-
accessor: "summ.files",
58-
Header: "Files",
57+
accessorFn: x => x.summ ? x.summ.files : undefined,
58+
header: "Files",
5959
width: 100,
6060
}, {
6161
id: "dirs",
62-
accessor: "summ.dirs",
63-
Header: "Directories",
62+
accessorFn: x => x.summ ? x.summ.dirs : undefined,
63+
header: "Directories",
6464
width: 100,
6565
}]
6666

‎src/css/App.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -473,4 +473,8 @@ div.tab-body {
473473
#kopia .tab-content-fix {
474474
font-weight: normal;
475475

476+
}
477+
478+
.cursor-pointer {
479+
cursor: pointer;
476480
}

‎src/pages/Policies.jsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -230,24 +230,24 @@ export class Policies extends Component {
230230

231231

232232
const columns = [{
233-
Header: 'Username',
233+
header: 'Username',
234234
width: 100,
235-
accessor: x => x.target.userName || "*",
235+
accessorFn: x => x.target.userName || "*",
236236
}, {
237-
Header: 'Host',
237+
header: 'Host',
238238
width: 100,
239-
accessor: x => x.target.host || "*",
239+
accessorFn: x => x.target.host || "*",
240240
}, {
241-
Header: 'Path',
242-
accessor: x => x.target.path || "*",
241+
header: 'Path',
242+
accessorFn: x => x.target.path || "*",
243243
}, {
244-
Header: 'Defined',
245-
accessor: x => this.policySummary(x),
244+
header: 'Defined',
245+
cell: x => this.policySummary(x.row.original),
246246
}, {
247247
id: 'edit',
248-
Header: 'Actions',
248+
header: 'Actions',
249249
width: 50,
250-
Cell: x => <Button data-testid="edit-policy" as={Link} to={policyEditorURL(x.row.original.target)} variant="primary" size="sm">Edit</Button>
250+
cell: x => <Button data-testid="edit-policy" as={Link} to={policyEditorURL(x.row.original.target)} variant="primary" size="sm">Edit</Button>
251251
}]
252252

253253
return <>

‎src/pages/SnapshotHistory.jsx

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -331,53 +331,53 @@ export class SnapshotHistory extends Component {
331331

332332
const columns = [{
333333
id: 'selected',
334-
Header: 'Selected',
334+
header: 'Selected',
335335
width: 20,
336336
align: "center",
337-
Cell: x => <div className="form-check multiselect"><input type="checkbox" className="form-check-input" checked={this.isSelected(x.row.original)} onChange={() => this.toggleSelected(x.row.original)} /></div>,
337+
cell: x => <div className="form-check multiselect"><input type="checkbox" className="form-check-input" checked={this.isSelected(x.row.original)} onChange={() => this.toggleSelected(x.row.original)} /></div>,
338338
}, {
339339
id: 'startTime',
340-
Header: 'Start time',
340+
header: 'Start time',
341341
width: 200,
342-
accessor: x => {
343-
let timestamp = rfc3339TimestampForDisplay(x.startTime);
344-
return <Link to={objectLink(x.rootID, timestamp, { label: path })}>{timestamp}</Link>;
342+
cell: x => {
343+
let timestamp = rfc3339TimestampForDisplay(x.row.original.startTime);
344+
return <Link to={objectLink(x.row.original.rootID, timestamp, { label: path })}>{timestamp}</Link>;
345345
},
346346
}, {
347347
id: 'description',
348-
Header: '',
348+
header: '',
349349
width: 20,
350-
Cell: x => this.descriptionFor(x.row.original),
350+
cell: x => this.descriptionFor(x.row.original),
351351
}, {
352352
id: 'rootID',
353-
Header: 'Root',
353+
header: 'Root',
354354
width: "",
355-
accessor: x => x.rootID,
356-
Cell: x => <><span className="snapshot-hash">{x.cell.value}</span>
355+
accessorFn: x => x.rootID,
356+
cell: x => <><span className="snapshot-hash">{x.cell.getValue()}</span>
357357
{x.row.original.description && <div className='snapshot-description'><small>{x.row.original.description}</small></div>}</>,
358358
}, {
359-
Header: 'Retention',
359+
header: 'Retention',
360360
accessor: 'retention',
361361
width: "",
362-
Cell: x => <span>
363-
{x.cell.value.map(l => <React.Fragment key={l}><Badge bg={"retention-badge-"+pillVariant(l)}>{l}</Badge>{' '}</React.Fragment>)}
362+
cell: x => <span>
363+
{/* {x.cell.getValue().map(l => <React.Fragment key={l}><Badge bg={"retention-badge-"+pillVariant(l)}>{l}</Badge>{' '}</React.Fragment>)} */}
364364
{x.row.original.pins.map(l => <React.Fragment key={l}>
365365
<Badge bg="snapshot-pin" onClick={() => this.editPin(x.row.original, l)}><FontAwesomeIcon icon={faThumbtack} /> {l}</Badge>{' '}
366366
</React.Fragment>)}
367367
{this.newPinFor(x.row.original)}
368368
</span>
369369
}, {
370-
Header: 'Size',
371-
accessor: 'summary.size',
370+
header: 'Size',
371+
accessorFn: x => x.summary.size,
372372
width: 100,
373-
Cell: x => sizeWithFailures(x.cell.value, x.row.original.summary, bytesStringBase2),
373+
cell: x => sizeWithFailures(x.cell.getValue(), x.row.original.summary, bytesStringBase2),
374374
}, {
375-
Header: 'Files',
376-
accessor: 'summary.files',
375+
header: 'Files',
376+
accessorFn: x => x.summary.files,
377377
width: 100,
378378
}, {
379-
Header: 'Dirs',
380-
accessor: 'summary.dirs',
379+
header: 'Dirs',
380+
accessorFn: x => x.summary.dirs,
381381
width: 100,
382382
}]
383383

0 commit comments

Comments
 (0)