Update Bootstrap library to version 5.3.x

package-lock.json

@@ -22,11 +22,11 @@
                 "@babel/plugin-transform-runtime": "^7.9.0",
                 "@babel/preset-env": "^7.9.0",
                 "@babel/preset-react": "^7.9.4",
-                "@fortawesome/fontawesome-free": "^5.13.0",
+                "@fortawesome/fontawesome-free": "^6.5.2",
                 "@testing-library/react": "^8.0.9",
                 "babel-loader": "^8.1.0",
                 "babel-polyfill": "^6.26.0",
-                "bootstrap": "^4.6.2",
+                "bootstrap": "^5.3.3",
                 "css-loader": "^5.2.4",
                 "eslint": "^6.8.0",
                 "eslint-config-prettier": "^6.11.0",
@@ -47,7 +47,7 @@
                 "webpack": "^5.68.0"
             },
             "peerDependencies": {
-                "bootstrap": "^4.6.2",
+                "bootstrap": "^5.3.3",
                 "prop-types": "15.8.1",
                 "react": "16.9.0",
                 "react-dom": "16.9.0",
@@ -1822,9 +1822,9 @@
             }
         },
         "node_modules/@fortawesome/fontawesome-free": {
-            "version": "5.15.3",
+            "version": "6.5.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
-            "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==",
+            "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
             "dev": true,
             "hasInstallScript": true,
             "engines": {
@@ -2814,9 +2814,9 @@
             }
         },
         "node_modules/@popperjs/core": {
-            "version": "2.11.2",
+            "version": "2.11.8",
-            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-            "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
             "dev": true,
             "funding": {
                 "type": "opencollective",
@@ -4330,9 +4330,9 @@
             }
         },
         "node_modules/bootstrap": {
-            "version": "4.6.2",
+            "version": "5.3.3",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
-            "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+            "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
             "dev": true,
             "funding": [
                 {
@@ -4345,8 +4345,7 @@
                 }
             ],
             "peerDependencies": {
-                "jquery": "1.9.1 - 3",
+                "@popperjs/core": "^2.11.8"
-                "popper.js": "^1.16.1"
             }
         },
         "node_modules/brace-expansion": {
@@ -11673,13 +11672,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/jquery": {
-            "version": "3.6.0",
-            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-            "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-            "dev": true,
-            "peer": true
-        },
         "node_modules/js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -13791,18 +13783,6 @@
             "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
             "dev": true
         },
-        "node_modules/popper.js": {
-            "version": "1.16.1",
-            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-            "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-            "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-            "dev": true,
-            "peer": true,
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/popperjs"
-            }
-        },
         "node_modules/portfinder": {
             "version": "1.0.28",
             "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -20398,9 +20378,9 @@
             }
         },
         "@fortawesome/fontawesome-free": {
-            "version": "5.15.3",
+            "version": "6.5.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz",
-            "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==",
+            "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==",
             "dev": true
         },
         "@gar/promisify": {
@@ -21165,9 +21145,9 @@
             }
         },
         "@popperjs/core": {
-            "version": "2.11.2",
+            "version": "2.11.8",
-            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-            "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
             "dev": true
         },
         "@sheerun/mutationobserver-shim": {
@@ -22452,9 +22432,9 @@
             }
         },
         "bootstrap": {
-            "version": "4.6.2",
+            "version": "5.3.3",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
-            "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+            "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
             "dev": true,
             "requires": {}
         },
@@ -28040,13 +28020,6 @@
                 }
             }
         },
-        "jquery": {
-            "version": "3.6.0",
-            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
-            "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
-            "dev": true,
-            "peer": true
-        },
         "js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -29672,13 +29645,6 @@
             "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
             "dev": true
         },
-        "popper.js": {
-            "version": "1.16.1",
-            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-            "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-            "dev": true,
-            "peer": true
-        },
         "portfinder": {
             "version": "1.0.28",
             "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",

package.json

@@ -22,7 +22,7 @@
         "react-uid": "^2.2.0"
     },
     "peerDependencies": {
-        "bootstrap": "^4.6.2",
+        "bootstrap": "^5.3.3",
         "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
@@ -34,11 +34,11 @@
         "@babel/plugin-transform-runtime": "^7.9.0",
         "@babel/preset-env": "^7.9.0",
         "@babel/preset-react": "^7.9.4",
-        "@fortawesome/fontawesome-free": "^5.13.0",
+        "@fortawesome/fontawesome-free": "^6.5.2",
         "@testing-library/react": "^8.0.9",
         "babel-loader": "^8.1.0",
         "babel-polyfill": "^6.26.0",
-        "bootstrap": "^4.6.2",
+        "bootstrap": "^5.3.3",
         "css-loader": "^5.2.4",
         "eslint": "^6.8.0",
         "eslint-config-prettier": "^6.11.0",

src/bootstrap/Alert.js

@@ -38,16 +38,17 @@ Alert.defaultProps = {
 export function Alert({ type, onDismiss, children }) {
     return (
         <div
-            className={`alert ${
+            className={`alert alert-${type} ${
                 onDismiss ? "alert-dismissible" : ""
-            } alert-${type}`}
+            }`.trim()}
         >
-            {onDismiss ? (
+            {onDismiss && (
-                <button type="button" className="close" onClick={onDismiss}>
+                <button
-                    &times;
+                    type="button"
-                </button>
+                    className="btn-close"
-            ) : (
+                    onClick={onDismiss}
-                false
+                    aria-label={_("Close")}
+                />
             )}
             {children}
         </div>

src/bootstrap/Button.js

@@ -33,7 +33,7 @@ export function Button({
 }) {
     let buttonClass = className ? `btn ${className}` : "btn btn-primary";
     if (forisFormSize) {
-        buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
+        buttonClass = `${buttonClass} col-12 col-md-3 col-lg-2`;
     }
 
     return (
@@ -44,7 +44,7 @@ export function Button({
         >
             {loading && (
                 <span
-                    className="spinner-border spinner-border-sm mr-1"
+                    className="spinner-border spinner-border-sm me-1"
                     role="status"
                     aria-hidden="true"
                 />

src/bootstrap/CheckBox.js

@@ -24,25 +24,24 @@ CheckBox.defaultProps = {
 
 export function CheckBox({ label, helpText, disabled, ...props }) {
     const uid = useUID();
+
     return (
-        <div className="form-group">
+        <div className="mb-3 form-check">
-            <div className="custom-control custom-checkbox ">
             <input
-                    className="custom-control-input"
+                className="form-check-input"
                 type="checkbox"
                 id={uid}
                 disabled={disabled}
                 {...props}
             />
-                <label className="custom-control-label" htmlFor={uid}>
+            <label className="form-check-label" htmlFor={uid}>
                 {label}
-                    {helpText && (
-                        <small className="form-text text-muted">
-                            {helpText}
-                        </small>
-                    )}
             </label>
+            {helpText && (
+                <div className="form-text">
+                    <small>{helpText}</small>
                 </div>
+            )}
         </div>
     );
 }

src/bootstrap/Input.js

@@ -32,13 +32,16 @@ export const Input = forwardRef(
         }`.trim();
 
         return (
-            <div className="form-group">
+            <div className="mb-3">
-                <label className={labelClassName} htmlFor={uid}>
+                <label
+                    className={`form-label ${labelClassName}`.trim()}
+                    htmlFor={uid}
+                >
                     {label}
                 </label>
                 <div className={`input-group ${groupClassName || ""}`.trim()}>
                     <input
-                        className={inputClassName}
+                        className={`form-control ${inputClassName}`.trim()}
                         type={type}
                         id={uid}
                         ref={ref}
@@ -46,10 +49,12 @@ export const Input = forwardRef(
                     />
                     {children}
                 </div>
-                {error ? <div className="invalid-feedback">{error}</div> : null}
+                {error && <div className="invalid-feedback">{error}</div>}
-                {helpText ? (
+                {helpText && (
-                    <small className="form-text text-muted">{helpText}</small>
+                    <div className="form-text">
-                ) : null}
+                        <small>{helpText}</small>
+                    </div>
+                )}
             </div>
         );
     }

src/bootstrap/RadioSet.js

@@ -17,7 +17,7 @@ RadioSet.propTypes = {
     /** Choices . */
     choices: PropTypes.arrayOf(
         PropTypes.shape({
-            /** Choice lable . */
+            /** Choice label . */
             label: PropTypes.oneOfType([
                 PropTypes.string,
                 PropTypes.element,
@@ -64,7 +64,7 @@ export function RadioSet({
     });
 
     return (
-        <div className="form-group">
+        <div className="mb-3">
             {label && (
                 <label htmlFor={uid} className="d-block">
                     {label}
@@ -72,7 +72,9 @@ export function RadioSet({
             )}
             {radios}
             {helpText && (
-                <small className="form-text text-muted">{helpText}</small>
+                <div className="form-text">
+                    <small>{helpText}</small>
+                </div>
             )}
         </div>
     );
@@ -94,23 +96,23 @@ export function Radio({ label, id, helpText, inline, ...props }) {
     return (
         <>
             <div
-                className={`custom-control custom-radio ${
+                className={`${
-                    inline ? "custom-control-inline" : ""
+                    inline ? "form-check form-check-inline" : ""
                 }`.trim()}
             >
                 <input
                     id={id}
-                    className="custom-control-input"
+                    className="form-check-input"
                     type="radio"
                     {...props}
                 />
-                <label className="custom-control-label" htmlFor={id}>
+                <label className="form-check-label" htmlFor={id}>
                     {label}
                 </label>
                 {helpText && (
-                    <small className="form-text text-muted mt-0 mb-3">
+                    <div className="form-text">
-                        {helpText}
+                        <small>{helpText}</small>
-                    </small>
+                    </div>
                 )}
             </div>
         </>

src/bootstrap/Select.js

@@ -30,14 +30,18 @@ export function Select({ label, choices, helpText, ...props }) {
     ));
 
     return (
-        <div className="form-group">
+        <div className="mb-3">
-            <label htmlFor={uid}>{label}</label>
+            <label className="form-label" htmlFor={uid}>
-            <select className="custom-select" id={uid} {...props}>
+                {label}
+            </label>
+            <select className="form-select" id={uid} {...props}>
                 {options}
             </select>
-            {helpText ? (
+            {helpText && (
-                <small className="form-text text-muted">{helpText}</small>
+                <div className="form-text">
-            ) : null}
+                    <small>{helpText}</small>
+                </div>
+            )}
         </div>
     );
 }

src/bootstrap/Switch.js

@@ -22,28 +22,30 @@ Switch.propTypes = {
 
 export function Switch({ label, helpText, switchHeading, ...props }) {
     const uid = useUID();
+
     return (
-        <div className={`form-group ${switchHeading ? "switch" : ""}`.trim()}>
         <div
-                className={`custom-control custom-switch ${
+            className={`form-check form-switch mb-3 ${
-                    !helpText ? "custom-control-inline" : ""
+                switchHeading ? "d-flex align-items-center" : null
-                } ${switchHeading ? "switch-heading" : ""}`.trim()}
+            }`.trim()}
         >
             <input
                 type="checkbox"
-                    className="custom-control-input"
+                className={`form-check-input ${
+                    switchHeading ? "me-2" : ""
+                }`.trim()}
+                role="switch"
                 id={uid}
                 {...props}
             />
-                <label className="custom-control-label" htmlFor={uid}>
+            <label className="form-check-label" htmlFor={uid}>
                 {label}
             </label>
             {helpText && (
-                    <small className="form-text text-muted mt-0 mb-3">
+                <div className="form-text">
-                        {helpText}
+                    <small>{helpText}</small>
-                    </small>
-                )}
                 </div>
+            )}
         </div>
     );
 }

src/bootstrap/__tests__/__snapshots__/Button.test.js.snap

@@ -29,7 +29,7 @@ exports[`<Button /> Render button with spinner 1`] = `
 >
   <span
     aria-hidden="true"
-    class="spinner-border spinner-border-sm mr-1"
+    class="spinner-border spinner-border-sm me-1"
     role="status"
   />
   <span>

src/common/WiFiSettings/ResetWiFiSettings.js

@@ -58,7 +58,7 @@ export function ResetWiFiSettings({ ws, endpoint }) {
                     "If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values."
                 )}
             </p>
-            <div className="text-right">
+            <div className="text-end">
                 <Button
                     className="btn-primary"
                     forisFormSize

src/common/WiFiSettings/WiFiForm.js

@@ -92,7 +92,7 @@ function DeviceForm({
     return (
         <>
             <Switch
-                label={<h2>{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
+                label={<h2 className="mb-0">{_(`Wi-Fi ${deviceID + 1}`)}</h2>}
                 checked={formData.enabled}
                 onChange={setFormValue((value) => ({
                     devices: {

src/common/WiFiSettings/WiFiQRCode.js

@@ -87,7 +87,7 @@ function QRCodeModal({ shown, setShown, SSID, password }) {
                         createAndDownloadPdf(SSID, password);
                     }}
                 >
-                    <i className="fas fa-arrow-down mr-2" />
+                    <i className="fas fa-arrow-down me-2" />
                     {_("Download PDF")}
                 </Button>
             </ModalFooter>

src/common/WiFiSettings/__tests__/__snapshots__/WiFiSettings.test.js.snap

@@ -298,7 +298,7 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
         </div>
       </div>
       <div
-        class="text-right"
+        class="text-end"
       >
         <button
           class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
@@ -321,7 +321,7 @@ exports[`<WiFiSettings/> Snapshot both modules disabled. 1`] = `
       If a number of wireless cards doesn't match, you may try to reset the Wi-Fi settings. Note that this will remove the current Wi-Fi configuration and restore the default values.
     </p>
     <div
-      class="text-right"
+      class="text-end"
     >
       <button
         class="btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center"
@@ -436,7 +436,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
           <div
 @@ -551,10 +633,11 @@
         <div
-          class=\\"text-right\\"
+          class=\\"text-end\\"
         >
           <button
             class=\\"btn btn-primary col-sm-12 col-md-3 col-lg-2 d-inline-flex justify-content-center align-items-center\\"

src/form/__tests__/__snapshots__/SubmitButton.test.js.snap

@@ -9,7 +9,7 @@ exports[`<SubmitButton/> Render load 1`] = `
   >
     <span
       aria-hidden="true"
-      class="spinner-border spinner-border-sm mr-1"
+      class="spinner-border spinner-border-sm me-1"
       role="status"
     />
     <span>
@@ -41,7 +41,7 @@ exports[`<SubmitButton/> Render saving 1`] = `
   >
     <span
       aria-hidden="true"
-      class="spinner-border spinner-border-sm mr-1"
+      class="spinner-border spinner-border-sm me-1"
       role="status"
     />
     <span>

src/form/components/ForisForm.js

@@ -190,7 +190,7 @@ export function ForisForm({
             <Prompt message={getMessageOnLeavingPage} />
             <form onSubmit={onSubmit} ref={formReference}>
                 {childrenWithFormProps}
-                <div className="text-right">
+                <div className="text-end">
                     <SubmitButton
                         state={getSubmitButtonState()}
                         disabled={submitButtonIsDisabled}