Skip to content

Commit f9177c3

Browse files
krulis-martinkrulis-martin
committed
Upgrading to bootstrap 5 and AdminLTE 4 and fixing the most critical things that broke in the migration.
1 parent 323e8f0 commit f9177c3

File tree

224 files changed

+1107
-2235
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

224 files changed

+1107
-2235
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ Sample content of this file is following:
8080
"PORT": 8080,
8181
"API_BASE": "https://recodex.base.domain/api/v1",
8282
"TITLE": "ReCodEx",
83-
"SKIN": "green",
83+
"SKIN": "success",
8484
"URL_PATH_PREFIX": "",
8585
"PERSISTENT_TOKENS_KEY_PREFIX": "recodex",
8686
"ENVIRONMENTS_INFO_URL": "https://github.com/ReCodEx/wiki/wiki/Runtime-Environments",
@@ -100,7 +100,7 @@ Meaning of individual values:
100100
* `PORT` - On which port the node.js express server listens.
101101
* `API_BASE` - URL of API to which the frontend is connected.
102102
* `TITLE` - Prefix for the web page title.
103-
* `SKIN` - Which [skin color](https://adminlte.io/docs/3.1//layout.html) of the AdminLTE should be used. This is only a color suffix (e.g., `green` or `primary`).
103+
* `SKIN` - Which [skin color](https://getbootstrap.com/docs/5.3/utilities/background/) of the AdminLTE should be used. This is only a color suffix (e.g., `success` or `primary`).
104104
* `URL_PATH_PREFIX` - If the ReCodEx is not placed in the root path of the current domain, the path prefix should be placed here. This also allows running multiple ReCodEx frontends on one domain.
105105
* `PERSISTENT_TOKENS_KEY_PREFIX` - Prefix used for security token identifiers (in cookies or in local storage). If you run multiple ReCodEx instances on the same domain, it might be necessary to give each instance different prefix.
106106
* `ENVIRONMENTS_INFO_URL` - Link to a web page where individual runtime environments are explained (default refers to our wiki).
@@ -115,7 +115,7 @@ Meaning of individual values:
115115

116116
The application can be run in two modes, development and production. Development
117117
mode uses only client rendering and tracks code changes with rebuilds of the
118-
application in real time. In production mode the compilation (transpilation to _ES5_
118+
application in real time. In production mode the compilation (transpilling to _ES5_
119119
standard using *Babel* and bundle into single file using *webpack*) has to be
120120
done separately prior to running. The scripts for compilation are provided as
121121
additional `npm` commands.

‎etc/env.json.example‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"PORT": 8080,
33
"API_BASE": "https://recodex.base.domain/api/v1",
44
"TITLE": "ReCodEx",
5-
"SKIN": "green",
5+
"SKIN": "success",
66
"URL_PATH_PREFIX": "",
77
"PERSISTENT_TOKENS_KEY_PREFIX": "recodex",
88
"ENVIRONMENTS_INFO_URL": "https://github.com/ReCodEx/wiki/wiki/Runtime-Environments",

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"@fortawesome/react-fontawesome": "^0.2.2",
4040
"@iktakahiro/markdown-it-katex": "^4.0.1",
4141
"@reduxjs/toolkit": "^2.3.0",
42-
"admin-lte": "3.2.0",
42+
"admin-lte": "4.0.0-beta2",
4343
"babel-plugin-formatjs": "^10.5.24",
4444
"bluebird": "^3.7.2",
4545
"browser-cookies": "^1.2.0",
@@ -67,7 +67,7 @@
6767
"prop-types": "^15.8.1",
6868
"react": "^18.3.1",
6969
"react-ace": "^13.0.0",
70-
"react-bootstrap": "1.6.8",
70+
"react-bootstrap": "2.10.5",
7171
"react-collapse": "^5.1.1",
7272
"react-copy-to-clipboard": "^5.1.0",
7373
"react-datetime": "^3.2.0",
@@ -108,7 +108,7 @@
108108
"@babel/preset-env": "^7.26.0",
109109
"@babel/preset-react": "^7.25.9",
110110
"@babel/register": "^7.25.9",
111-
"@eslint/compat": "^1.2.2",
111+
"@eslint/compat": "^1.2.3",
112112
"@eslint/eslintrc": "^3.1.0",
113113
"@eslint/js": "^9.14.0",
114114
"@formatjs/cli-lib": "^6.6.3",

‎src/client.js‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,6 @@ import { getToken, getInstanceId } from './redux/middleware/authMiddleware.js';
1111
import { getLang } from './redux/middleware/langMiddleware.js';
1212
import App from './containers/App/index.js';
1313

14-
import 'admin-lte/plugins/jquery/jquery.min.js';
15-
import 'admin-lte/plugins/jquery-ui/jquery-ui.min.js';
16-
import 'admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js';
1714
import 'admin-lte/dist/js/adminlte.js';
1815

1916
// Patch for ACE editor (it has complex loading)
@@ -42,20 +39,20 @@ import 'ace-builds/src-noconflict/keybinding-vim.js';
4239
/*
4340
* This is an ugly hack that deals with deprecated warnings generated in console log by obsolete
4441
* Overlay and OverlayTrigger components.
45-
* TODO: Remove after upgrading to react-bootstrap 2.0 and AdminLTE 4 (hopefully, the warnings will disapear).
42+
* TODO FIXME: Remove after upgrading to react-bootstrap 2.0 and AdminLTE 4 (hopefully, the warnings will disapear).
4643
*/
47-
const consoleError = console.error; // eslint-disable-line no-console
48-
console.error /* eslint-disable-line no-console */ = (msg, ...rest) => {
49-
if (typeof msg === 'string') {
50-
if (msg.startsWith('Warning: findDOMNode is deprecated and will be removed in the next major release.')) {
51-
return;
52-
}
53-
if (msg.includes('Support for defaultProps will be removed')) {
54-
return;
55-
}
56-
}
57-
consoleError(msg, ...rest);
58-
};
44+
// const consoleError = console.error; // eslint-disable-line no-console
45+
// console.error /* eslint-disable-line no-console */ = (msg, ...rest) => {
46+
// if (typeof msg === 'string') {
47+
// if (msg.startsWith('Warning: findDOMNode is deprecated and will be removed in the next major release.')) {
48+
// return;
49+
// }
50+
// if (msg.includes('Support for defaultProps will be removed')) {
51+
// return;
52+
// }
53+
// }
54+
// consoleError(msg, ...rest);
55+
// };
5956

6057
// override of worker paths, so they load properly
6158
const ACE_CDN_PREFIX = 'https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/';

‎src/components/Assignments/Assignment/AssignmentDetails/AssignmentDetails.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const AssignmentDetails = ({
7272
<tbody>
7373
{permissionHints.update && (
7474
<tr>
75-
<td className="text-center text-muted shrink-col px-2">
75+
<td className="text-center text-body-secondary shrink-col px-2">
7676
<VisibleIcon />
7777
</td>
7878
<th>
@@ -86,7 +86,7 @@ const AssignmentDetails = ({
8686

8787
{permissionHints.update && (
8888
<tr>
89-
<td className="text-center text-muted shrink-col px-2">
89+
<td className="text-center text-body-secondary shrink-col px-2">
9090
<Icon icon="plane-departure" />
9191
</td>
9292
<th>
@@ -106,7 +106,7 @@ const AssignmentDetails = ({
106106

107107
{permissionHints.update && isPublic && visibleFrom && visibleFrom * 1000 > Date.now() && (
108108
<tr>
109-
<td className="text-center text-muted shrink-col px-2">
109+
<td className="text-center text-body-secondary shrink-col px-2">
110110
<Icon icon={['far', 'clock']} />
111111
</td>
112112
<th>
@@ -119,7 +119,7 @@ const AssignmentDetails = ({
119119
)}
120120

121121
<tr>
122-
<td className="text-center text-muted shrink-col px-2">
122+
<td className="text-center text-body-secondary shrink-col px-2">
123123
<DeadlineIcon />
124124
</td>
125125
<th>
@@ -166,7 +166,7 @@ const AssignmentDetails = ({
166166
</tr>
167167

168168
<tr>
169-
<td className="text-center text-muted shrink-col px-2">
169+
<td className="text-center text-body-secondary shrink-col px-2">
170170
<Icon icon="trophy" />
171171
</td>
172172
<th>
@@ -205,7 +205,7 @@ const AssignmentDetails = ({
205205

206206
{isBonus && (
207207
<tr>
208-
<td className="text-center text-muted shrink-col px-2">
208+
<td className="text-center text-body-secondary shrink-col px-2">
209209
<BonusIcon />
210210
</td>
211211
<th>
@@ -218,7 +218,7 @@ const AssignmentDetails = ({
218218
)}
219219

220220
<tr>
221-
<td className="text-center text-muted shrink-col px-2">
221+
<td className="text-center text-body-secondary shrink-col px-2">
222222
<Icon icon="percent" />
223223
</td>
224224
<th>
@@ -234,7 +234,7 @@ const AssignmentDetails = ({
234234
</tr>
235235

236236
<tr>
237-
<td className="text-center text-muted shrink-col px-2">
237+
<td className="text-center text-body-secondary shrink-col px-2">
238238
<CodeIcon />
239239
</td>
240240
<th>
@@ -252,7 +252,7 @@ const AssignmentDetails = ({
252252
</tr>
253253

254254
<tr>
255-
<td className="text-center text-muted shrink-col px-2">
255+
<td className="text-center text-body-secondary shrink-col px-2">
256256
{isStudent && canSubmit.canSubmit ? <SendIcon /> : <Icon icon="hashtag" />}
257257
</td>
258258
<th>
@@ -269,7 +269,7 @@ const AssignmentDetails = ({
269269
<>
270270
{lastAttemptIndex || canSubmit.total}
271271
{canSubmit.total > canSubmit.evaluated && (
272-
<span className="text-muted">
272+
<span className="text-body-secondary">
273273
{' '}
274274
{canSubmit.evaluated - canSubmit.total}
275275
<Explanation id="submissionsCountDecreased">
@@ -283,7 +283,7 @@ const AssignmentDetails = ({
283283
)}
284284
{submissionsCountLimit !== null && ` / ${submissionsCountLimit}`}
285285
{lastAttemptIndex && lastAttemptIndex > canSubmit.total && (
286-
<small className="pl-2 text-muted">
286+
<small className="ps-2 text-body-secondary">
287287
(
288288
<FormattedMessage
289289
id="app.assignment.submissionCountLimitIncreasedByDeletion"
@@ -301,7 +301,7 @@ const AssignmentDetails = ({
301301
</tr>
302302

303303
<tr>
304-
<td className="text-center text-muted shrink-col px-2">
304+
<td className="text-center text-body-secondary shrink-col px-2">
305305
<Icon icon={['far', 'file-code']} />
306306
</td>
307307
<th>

‎src/components/Assignments/Assignment/AssignmentMaxPoints/AssignmentMaxPoints.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const AssignmentMaxPoints = ({
6060
)}
6161

6262
{currentPointsLimit !== null && (allowSecondDeadline || currentPointsLimit !== maxPointsBeforeFirstDeadline) && (
63-
<small className="text-muted ml-3">
63+
<small className="text-body-secondary ms-3">
6464
<FormattedMessage
6565
id="app.assignment.currentMaxPointsNote"
6666
defaultMessage="({currentPointsLimit} at the moment)"

‎src/components/Assignments/Assignment/AssignmentStatusIcon/AssignmentStatusIcon.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const AssignmentStatusIcon = ({ id, submission = null, accepted = false, isBestS
99
return (
1010
<StatusIcon
1111
id={id}
12-
icon={<Icon icon="exclamation-triangle" className="text-red" />}
12+
icon={<Icon icon="exclamation-triangle" className="text-danger" />}
1313
message={
1414
<FormattedMessage
1515
id="app.assignemntStatusIcon.solutionMissingSubmission"
@@ -24,7 +24,7 @@ const AssignmentStatusIcon = ({ id, submission = null, accepted = false, isBestS
2424
return (
2525
<StatusIcon
2626
id={id}
27-
icon={<Icon icon="cogs" className="text-yellow" />}
27+
icon={<Icon icon="cogs" className="text-warning" />}
2828
message={
2929
<FormattedMessage
3030
id="app.assignemntStatusIcon.inProgress"
@@ -50,7 +50,7 @@ const AssignmentStatusIcon = ({ id, submission = null, accepted = false, isBestS
5050
<StatusIcon
5151
id={id}
5252
accepted={accepted}
53-
icon={<Icon icon={isBestSolution ? 'thumbs-up' : ['far', 'thumbs-up']} className="text-green" />}
53+
icon={<Icon icon={isBestSolution ? 'thumbs-up' : ['far', 'thumbs-up']} className="text-success" />}
5454
message={
5555
<>
5656
<FormattedMessage id="app.assignemntStatusIcon.ok" defaultMessage="Assignment is successfully completed." />
@@ -70,7 +70,7 @@ const AssignmentStatusIcon = ({ id, submission = null, accepted = false, isBestS
7070
<StatusIcon
7171
id={id}
7272
accepted={accepted}
73-
icon={<Icon icon={isBestSolution ? 'thumbs-down' : ['far', 'thumbs-down']} className="text-red" />}
73+
icon={<Icon icon={isBestSolution ? 'thumbs-down' : ['far', 'thumbs-down']} className="text-danger" />}
7474
message={
7575
<>
7676
<FormattedMessage

‎src/components/Assignments/Assignment/AssignmentSync/AssignmentSync.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const AssignmentSync = ({ syncInfo, exerciseSync }) => {
4444
</Button>
4545

4646
{!syncInfo.isSynchronizationPossible && (
47-
<span style={{ marginLeft: '2em' }} className="text-muted">
47+
<span style={{ marginLeft: '2em' }} className="text-body-secondary">
4848
<FormattedMessage
4949
id="app.assignment.syncButton.exerciseBroken"
5050
defaultMessage="The update button is disabled since the exercise is broken. The exercise configuration must be mended first."

‎src/components/Assignments/Assignment/AssignmentSyncIcon/AssignmentSyncIcon.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ const AssignmentSyncIcon = ({ id, syncInfo, ...props }) => {
1313
placement="bottom"
1414
overlay={
1515
<Popover id={`assginmentsync-${id}`}>
16-
<Popover.Title>
16+
<Popover.Header>
1717
<FormattedMessage
1818
id="app.assignment.syncRequiredTitle"
1919
defaultMessage="The exercise data are newer than assignment data"
2020
/>
21-
</Popover.Title>
22-
<Popover.Content>
21+
</Popover.Header>
22+
<Popover.Body>
2323
<p>
2424
<FormattedMessage
2525
id="app.assignment.syncRequired"
@@ -41,7 +41,7 @@ const AssignmentSyncIcon = ({ id, syncInfo, ...props }) => {
4141
/>
4242
</p>
4343
)}
44-
</Popover.Content>
44+
</Popover.Body>
4545
</Popover>
4646
}>
4747
<WarningIcon {...props} className={syncInfo.isSynchronizationPossible ? 'text-warning' : 'text-danger'} />

‎src/components/Assignments/Assignment/AssignmentTableRow/AssignmentTableRow.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const AssignmentTableRow = ({
8383
{permissionHints.update || permissionHints.viewAssignmentSolutions ? (
8484
<MaybeVisibleAssignmentIcon id={id} isPublic={isPublic} visibleFrom={visibleFrom} />
8585
) : (
86-
<AssignmentIcon className="text-muted" />
86+
<AssignmentIcon className="text-body-secondary" />
8787
)}
8888
<MaybeBonusAssignmentIcon gapLeft id={id} isBonus={isBonus} />
8989

@@ -146,7 +146,7 @@ const AssignmentTableRow = ({
146146
/>
147147
</td>
148148

149-
<td className="text-right text-nowrap valign-middle">
149+
<td className="text-end text-nowrap align-middle">
150150
<TheButtonGroup>
151151
{discussionOpen &&
152152
(permissionHints.viewAssignmentSolutions || permissionHints.update || permissionHints.remove ? (

0 commit comments

Comments
 (0)