Merge branch 'dev' into 'master'

Dev

See merge request turris/reforis/foris-js!276

CHANGELOG.md

@@ -8,427 +8,448 @@ and this project adheres to
 
 ## [Unreleased]
 
+## [6.7.0] - 2025-03-11
+
+### Added
+
+- Added encryption property to guest WiFi settings in tests
+- Added global fuzzy search and columns visibility to RichTable
+
+### Changed
+
+- Made thead of RichTable lighter
+- Updated dependencies in package.json to latest versions
+- Enhanced ActionButtonWithModal to support dynamic methods
+- NPM audit fix
+
+## [6.6.2] - 2025-02-20
+
+### Changed
+
+- Enhanced SubmitButton component to accept a custom label prop
+- Refactored RichTable component to remove forwardRef and simplify data handling
+
 ## [6.6.1] - 2025-02-17
 
 ### Changed
 
--   Refactored RichTable component to use forwardRef
+- Refactored RichTable component to use forwardRef
 
 ## [6.6.0] - 2025-02-07
 
 ### Added
 
--   Added & updated Weblate translations
--   Added Wi-Fi and LAN settings URLs to ForisURLs
--   Added Wi-Fi modes VHT/HE 80+80
--   Added encryption selection to WiFiGuestForm
--   Added optional close button to ModalHeader component
+- Added & updated Weblate translations
+- Added Wi-Fi and LAN settings URLs to ForisURLs
+- Added Wi-Fi modes VHT/HE 80+80
+- Added encryption selection to WiFiGuestForm
+- Added optional close button to ModalHeader component
 
 ### Changed
 
--   Updated Wi-Fi API
--   Enhanced NumberInput component with keyboard & touch accessibility
--   Refactored pagination condition in RichTable component
+- Updated Wi-Fi API
+- Enhanced NumberInput component with keyboard & touch accessibility
+- Refactored pagination condition in RichTable component
 
 ## [6.5.0] - 2024-11-13
 
 ### Added
 
--   Added & updated Weblate translations
--   Added RichTable component with pagination and sorting
--   Added @tanstack/react-table v8.20.5 to dependencies
+- Added & updated Weblate translations
+- Added RichTable component with pagination and sorting
+- Added @tanstack/react-table v8.20.5 to dependencies
 
 ### Changed
 
--   Updated documentation
--   Replaced RebootButton with ActionButtonWithModal component
--   Fixed import path for CustomizationContextMock in customTestRender.js
+- Updated documentation
+- Replaced RebootButton with ActionButtonWithModal component
+- Fixed import path for CustomizationContextMock in customTestRender.js
 
 ## [6.4.0] - 2024-10-02
 
 ### Changed
 
--   Refactored Alert component to include dismiss animation and timeout
--   Refactored ThreeDotsMenu component to include additional props
+- Refactored Alert component to include dismiss animation and timeout
+- Refactored ThreeDotsMenu component to include additional props
 
 ## [6.3.0] - 2024-09-27
 
 ### Added
 
--   Added ThreeDotsMenu component
+- Added ThreeDotsMenu component
 
 ### Changed
 
--   Refactored EmailInput description
--   Refactored RadioSet & ignore Radio component
--   Refactored npm package badge in introduction.md
--   NPM audit fix
+- Refactored EmailInput description
+- Refactored RadioSet & ignore Radio component
+- Refactored npm package badge in introduction.md
+- NPM audit fix
 
 ## [6.2.1] - 2024-09-25
 
 ### Added
 
--   Added & updated Weblate translations
+- Added & updated Weblate translations
 
 ### Changed
 
--   Refactored CopyInput component
--   Refactored ForisURLs to include new URLs for Overview page
+- Refactored CopyInput component
+- Refactored ForisURLs to include new URLs for Overview page
 
 ## [6.2.0] - 2024-09-20
 
 ### Added
 
--   Added useFocusTrap hook
--   Added extendSession endpoint
+- Added useFocusTrap hook
+- Added extendSession endpoint
 
 ### Changed
 
--   Refactored Spinner.css to use CSS variable for color
--   Refactored Modal component to use useFocusTrap hook
--   Refactored Alert component to use useFocusTrap hook
+- Refactored Spinner.css to use CSS variable for color
+- Refactored Modal component to use useFocusTrap hook
+- Refactored Alert component to use useFocusTrap hook
 
 ## [6.1.1] - 2024-08-30
 
 ### Added
 
--   Added & updated Weblate translations
+- Added & updated Weblate translations
 
 ### Changed
 
--   Updated icon color classes to use "text-secondary" instead of "text-dark"
--   Updated Wi-Fi QRCodeModal component to use new styles & added close button
--   Refactored WiFiGuestForm component to get rid of obsolete div element
--   NPM audit fix
+- Updated icon color classes to use "text-secondary" instead of "text-dark"
+- Updated Wi-Fi QRCodeModal component to use new styles & added close button
+- Refactored WiFiGuestForm component to get rid of obsolete div element
+- NPM audit fix
 
 ## [6.1.0] - 2024-08-23
 
 ### Added
 
--   Added & updated Weblate translations
+- Added & updated Weblate translations
 
 ### Changed
 
--   Migrated to Font Awesome v6
--   NPM audit fix
+- Migrated to Font Awesome v6
+- NPM audit fix
 
 ## [6.0.3] - 2024-07-26
 
 ### Changed
 
--   Updated WiFiQRCode component
+- Updated WiFiQRCode component
 
 ## [6.0.2] - 2024-06-28
 
 ### Added
 
--   Added className prop to CheckBox and Radio components
+- Added className prop to CheckBox and Radio components
 
 ## [6.0.1] - 2024-06-26
 
 ### Added
 
--   Added className prop to Switch component
+- Added className prop to Switch component
 
 ### Changed
 
--   Updated dependencies in package.json
--   NPM audit fix
+- Updated dependencies in package.json
+- NPM audit fix
 
 ## [6.0.0] - 2024-06-11
 
 ### Added
 
--   Added CHANGELOG.md
--   Added JS_DIR variable to Makefile
--   Added support for shared reForis ESLint configuration
+- Added CHANGELOG.md
+- Added JS_DIR variable to Makefile
+- Added support for shared reForis ESLint configuration
 
 ### Changed
 
--   Updated dependencies in package.json
--   Updated Spinner.css styles for better positioning and responsiveness
--   Migrated to Bootstrap 5
--   NPM audit fix
--   Other small improvements
+- Updated dependencies in package.json
+- Updated Spinner.css styles for better positioning and responsiveness
+- Migrated to Bootstrap 5
+- NPM audit fix
+- Other small improvements
 
 ## [5.6.1] - 2024-01-19
 
--   Added & updated Weblate translations
--   Fixed loading state & button's layout
--   Updated bootstrap library to version 4.6.2
--   Used custom reforis-image in GitLab CI/CD
--   NPM audit fix
+- Added & updated Weblate translations
+- Fixed loading state & button's layout
+- Updated bootstrap library to version 4.6.2
+- Used custom reforis-image in GitLab CI/CD
+- NPM audit fix
 
 ## [5.6.0] - 2022-12-29
 
--   Add & update Weblate translations
--   Add CustomizationContext and custom hook
--   Update caniuse-lite
--   Remove testUtils from .gitignore
--   Make ieee80211w_disabled as optional in WiFiForm
--   Move contexts in a context folder
--   NPM audit fix
+- Add & update Weblate translations
+- Add CustomizationContext and custom hook
+- Update caniuse-lite
+- Remove testUtils from .gitignore
+- Make ieee80211w_disabled as optional in WiFiForm
+- Move contexts in a context folder
+- NPM audit fix
 
 ## [5.5.0] - 2022-12-02
 
--   Add & update translations
--   Add a switch to disable Management Frame Protection (802.11w)
--   Improved Foris JS documentation
--   NPM audit fix
+- Add & update translations
+- Add a switch to disable Management Frame Protection (802.11w)
+- Improved Foris JS documentation
+- NPM audit fix
 
 ## [5.4.1] - 2022-06-03
 
--   Add Weblate translations
--   Update PropType peer dependency
--   NPM audit fix
+- Add Weblate translations
+- Update PropType peer dependency
+- NPM audit fix
 
 ## [5.4.0] - 2022-05-20
 
--   Add & update translations
--   Add CopyInput bootstrap component
--   Update WiFiForm labels and description for wifi ax
--   Make WS path in lighttpd mode configurable
--   Fix Wi-Fi password helptext string
--   NPM audit fix
+- Add & update translations
+- Add CopyInput bootstrap component
+- Update WiFiForm labels and description for wifi ax
+- Make WS path in lighttpd mode configurable
+- Fix Wi-Fi password helptext string
+- NPM audit fix
 
 ## [5.3.0] - 2022-02-21
 
--   Added & update translations
--   Added rest of the props to DownloadButton component
--   Added hostname validation
--   Added wifi 802.11ax HE modes
--   Set best Wi-Fi HT mode depending on the checked frequency
--   Improved domain name RegEx pattern
--   Removed customOrder prop in Select component
--   Fixed Wi-Fi translation strings
--   Fixed autocomplete attribute in PasswordInput
--   Fixed WiFi password max length check
--   Fixed documentation build
--   Fixed access token in publish script
--   Refined & restructure Makefile
--   Updated GitLab CI image to Node.js v16
--   NPM update (several dependencies)
--   NPM audit fix
+- Added & update translations
+- Added rest of the props to DownloadButton component
+- Added hostname validation
+- Added wifi 802.11ax HE modes
+- Set best Wi-Fi HT mode depending on the checked frequency
+- Improved domain name RegEx pattern
+- Removed customOrder prop in Select component
+- Fixed Wi-Fi translation strings
+- Fixed autocomplete attribute in PasswordInput
+- Fixed WiFi password max length check
+- Fixed documentation build
+- Fixed access token in publish script
+- Refined & restructure Makefile
+- Updated GitLab CI image to Node.js v16
+- NPM update (several dependencies)
+- NPM audit fix
 
 ## [5.2.0] - 2021-12-15
 
--   Remove login page
--   NPM audit fix
+- Remove login page
+- NPM audit fix
 
 ## [5.1.16] - 2021-11-18
 
--   Revert bad NPM audit fix
--   NPM audit fix
+- Revert bad NPM audit fix
+- NPM audit fix
 
 ## [5.1.15] - 2021-11-03
 
--   Add WPA3 option
--   Add custom order ability of Select options
--   NPM audit fix
+- Add WPA3 option
+- Add custom order ability of Select options
+- NPM audit fix
 
 ## [5.1.14] - 2021-07-30
 
--   Add & update translations
--   Fix infinity redirect loop when WS error occurs
--   NPM audit fix
+- Add & update translations
+- Fix infinity redirect loop when WS error occurs
+- NPM audit fix
 
 ## [5.1.13] - 2021-06-30
 
--   Add sentinelAgreement endpoint to forisUrls
--   NPM audit fix
+- Add sentinelAgreement endpoint to forisUrls
+- NPM audit fix
 
 ## [5.1.12] - 2021-05-14
 
--   Add & update translations
--   Add & fix obsolete links
--   Expend library with the ResetWifiSettings function
--   Fix switching Wi-Fi modes depending on bands in WiFiForm
--   Fix translation sources in WiFiForm
--   NPM audit fix
--   Other small improvements
+- Add & update translations
+- Add & fix obsolete links
+- Expend library with the ResetWifiSettings function
+- Fix switching Wi-Fi modes depending on bands in WiFiForm
+- Fix translation sources in WiFiForm
+- NPM audit fix
+- Other small improvements
 
 ## [5.1.11] - 2021-01-04
 
--   Remove duplicated file for Norwegian language
--   Fix translations inconsistency
+- Remove duplicated file for Norwegian language
+- Fix translations inconsistency
 
 ## [5.1.10] - 2021-12-29
 
--   Add and update translations
+- Add and update translations
 
 ## [5.1.9] - 2021-12-20
 
--   Increase bottom margin of formFieldsSize
--   Change formFieldsSize of ResetWiFiSettings card
--   Fix trailing space in Modal classes
+- Increase bottom margin of formFieldsSize
+- Change formFieldsSize of ResetWiFiSettings card
+- Fix trailing space in Modal classes
 
 ## [5.1.8] - 2020-12-19
 
--   Add isPluginInstalled function
+- Add isPluginInstalled function
 
 ## [5.1.7] - 2020-11-27
 
 ## [5.1.6] - 2020-11-25
 
--   NPM audit fix
--   Add displayCard function to utils
--   Add optional sizes to Modal
--   Add information about optional sizes to docs
--   Remove redundant merge.py
+- NPM audit fix
+- Add displayCard function to utils
+- Add optional sizes to Modal
+- Add information about optional sizes to docs
+- Remove redundant merge.py
 
 ## [5.1.5] - 2020-09-25
 
--   Fix DateTime import
--   Fix extra empty space in Switch's classes
+- Fix DateTime import
+- Fix extra empty space in Switch's classes
 
 ## [5.1.4] - 2020-09-25
 
--   Add inline option to Wi-Fi's RadioSet
--   Fix Alert's dismissible class condition
--   Add closing bootstrap modal using ESC
--   Change reboot modal's heading to "Warning!"
+- Add inline option to Wi-Fi's RadioSet
+- Fix Alert's dismissible class condition
+- Add closing bootstrap modal using ESC
+- Change reboot modal's heading to "Warning!"
 
 ## [5.1.3] - 2020-09-11
 
--   Add SSID validation for 32 bytes length
--   Add helpText for SSID input
+- Add SSID validation for 32 bytes length
+- Add helpText for SSID input
 
 ## [5.1.2] - 2020-09-08
 
--   Fix infinity loop caused by WebSockets
--   Resolve small issues
+- Fix infinity loop caused by WebSockets
+- Resolve small issues
 
 ## [5.1.1] - 2020-08-31
 
--   Add "inline" option to RadioSet
--   NPM audit fix
+- Add "inline" option to RadioSet
+- NPM audit fix
 
 ## [5.1.0] - 2020-08-25
 
--   Add new Switch component
--   Swap checkboxes for switches on Wi-Fi page
--   Decrease button width on different breakpoints
--   Add integration of Prettier + ESLint + reForis Style Guide
--   Add appropriate links to dropdown headers
--   Add semantic & accessibility structure for headings
--   NPM audit & Update packages
--   GitLab CI: image update to node 10
+- Add new Switch component
+- Swap checkboxes for switches on Wi-Fi page
+- Decrease button width on different breakpoints
+- Add integration of Prettier + ESLint + reForis Style Guide
+- Add appropriate links to dropdown headers
+- Add semantic & accessibility structure for headings
+- NPM audit & Update packages
+- GitLab CI: image update to node 10
 
 ## [5.0.3] - 2020-09-23
 
--   Fixes issue with WebSockets
+- Fixes issue with WebSockets
 
 ## [5.0.2] - 2020-09-22
 
--   Fix infinity loop caused by WebSockets
+- Fix infinity loop caused by WebSockets
 
 ## [5.0.1] - 2020-07-21
 
--   Fix Wi-Fi Form
--   NPM audit fix & update of packages
+- Fix Wi-Fi Form
+- NPM audit fix & update of packages
 
 ## [5.0.0] - 2020-05-07
 
--   I've realized that it should be major update due to broken API.
+- I've realized that it should be major update due to broken API.
 
 ## [4.5.1] - 2020-05-07
 
--   Add initialData to ForisForm children.
--   Update translations .pot file.
+- Add initialData to ForisForm children.
+- Update translations .pot file.
 
 ## [4.5.0] - 2020-03-25
 
--   Use exposed pdfmake.
--   NPM audit fix & update of packages.
+- Use exposed pdfmake.
+- NPM audit fix & update of packages.
 
 ## [4.4.0] - 2020-03-13
 
--   Update domain validation.
+- Update domain validation.
 
 ## [4.3.1] - 2020-03-06
 
--   Add logout link.
+- Add logout link.
 
 ## [4.3.0] - 2020-02-26
 
--   Allow RadioSet accept elements as children.
--   Add option to make modal scrollable.
+- Allow RadioSet accept elements as children.
+- Add option to make modal scrollable.
 
 ## [4.2.0] - 2020-02-21
 
--   Add translations.
--   Improve datatime localization.
+- Add translations.
+- Improve datatime localization.
 
 ## [4.1.0] - 2020-02-20
 
--   Added date and time utilities.
+- Added date and time utilities.
 
 ## [4.0.0] - 2020-02-20
 
--   Throw an error if unhandled exception happens during API request.
+- Throw an error if unhandled exception happens during API request.
 
 ## [3.4.0] - 2020-02-17
 
--   Display actual GET error response within the form.
--   Added styles extracted from reForis.
--   Added reference to form element (for programmatically submitting it).
+- Display actual GET error response within the form.
+- Added styles extracted from reForis.
+- Added reference to form element (for programmatically submitting it).
 
 ## [3.2.0] - 2020-01-17
 
--   Swapped react-router with react-router-dom. Prepared Foris JS for using
-    react-router-dom exposed by reForis.
--   Added controller ID filter to WebSocket hook.
--   Updated translation messages after moving WiFi form.
--   Increased request timeout to 30.5 sec.
+- Swapped react-router with react-router-dom. Prepared Foris JS for using
+  react-router-dom exposed by reForis.
+- Added controller ID filter to WebSocket hook.
+- Updated translation messages after moving WiFi form.
+- Increased request timeout to 30.5 sec.
 
 ## [3.1.1] - 2020-01-10
 
--   Fixed package dependencies related to exposing libraries via reForis
+- Fixed package dependencies related to exposing libraries via reForis
 
 ## [3.1.0] - 2020-01-09
 
--   Added Wi-Fi settings form
--   Fixed path to index.js file in package.json
+- Added Wi-Fi settings form
+- Fixed path to index.js file in package.json
 
 ## [3.0.0] - 2020-01-07
 
--   Removal of Babel compiler
--   Fixed width of ForisForm, removed default sizing for form widgets (like
-    buttons)
+- Removal of Babel compiler
+- Fixed width of ForisForm, removed default sizing for form widgets (like
+  buttons)
 
 ## [2.1.1] - 2020-01-06
 
--   Display date and time picker above input element
+- Display date and time picker above input element
 
 ## [2.1.0] - 2019-12-19
 
--   Set WebSocket logging to debug level
--   Added hook that detects clicking outside of component
--   Added Radio to list of publicly available components
--   Fixed link to git repository in package.json
+- Set WebSocket logging to debug level
+- Added hook that detects clicking outside of component
+- Added Radio to list of publicly available components
+- Fixed link to git repository in package.json
 
 ## [2.0.0] - 2019-12-09
 
--   Added dynamic suffix for API URLs (allowing to use one hook for different
-    resources with e.g. PUT)
--   Added unsubscribe method to WebSocket client
--   Added custom class to SpinnerElement
--   Improved documentation
--   Published README.md
+- Added dynamic suffix for API URLs (allowing to use one hook for different
+  resources with e.g. PUT)
+- Added unsubscribe method to WebSocket client
+- Added custom class to SpinnerElement
+- Improved documentation
+- Published README.md
 
 ## [1.4.0] - 2019-11-29
 
--   Add reboot button.
--   Fix Foris URLs prefixes
+- Add reboot button.
+- Fix Foris URLs prefixes
 
 ## [1.3.3] - 2019-11-22
 
--   Add translations from Weblate.
+- Add translations from Weblate.
 
 ## [1.3.2] - 2019-11-20
 
--   Expose only AlertContext.
--   Add hook for API pooling.
+- Expose only AlertContext.
+- Add hook for API pooling.
 
 ## [1.3.1] - 2019-11-14
 
@@ -441,7 +462,9 @@ and this project adheres to
 ## [0.0.7] - 2019-09-02
 
 [unreleased]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.1...dev
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.7.0...dev
+[6.7.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.2...v6.7.0
+[6.6.2]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.1...v6.6.2
 [6.6.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.0...v6.6.1
 [6.6.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.5.0...v6.6.0
 [6.5.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.4.0...v6.5.0

jest.config.js

@@ -21,10 +21,7 @@ module.exports = {
     testPathIgnorePatterns: ["/node_modules/", "/__fixtures__/", "/dist/"],
     testEnvironment: "jsdom",
     verbose: false,
-    setupFilesAfterEnv: [
-        "@testing-library/react/cleanup-after-each",
-        "<rootDir>/src/testUtils/setup",
-    ],
+    setupFilesAfterEnv: ["<rootDir>/src/testUtils/setup"],
     globals: {
         TZ: "utc",
     },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "6.6.1",
+    "version": "6.7.0",
     "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -14,17 +14,18 @@
     "license": "GPL-3.0",
     "main": "./src/index.js",
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.6.0",
-        "@fortawesome/free-regular-svg-icons": "^6.6.0",
-        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-regular-svg-icons": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
-        "@tanstack/react-table": "^8.20.5",
-        "axios": "^1.7.2",
+        "@tanstack/match-sorter-utils": "^8.19.4",
+        "@tanstack/react-table": "^8.21.2",
+        "axios": "^1.7.9",
         "immutability-helper": "^3.1.1",
         "moment": "^2.30.1",
-        "qrcode.react": "^3.1.0",
-        "react-datetime": "^3.2.0",
-        "react-uid": "^2.3.3"
+        "qrcode.react": "^4.2.0",
+        "react-datetime": "^3.3.1",
+        "react-uid": "^2.4.0"
     },
     "peerDependencies": {
         "bootstrap": "^5.3.3",
@@ -34,32 +35,32 @@
         "react-router-dom": "^5.1.2"
     },
     "devDependencies": {
-        "@babel/cli": "^7.24.7",
-        "@babel/core": "^7.24.7",
-        "@babel/plugin-transform-runtime": "^7.24.7",
-        "@babel/preset-env": "^7.24.7",
-        "@babel/preset-react": "^7.24.7",
-        "@testing-library/react": "^8.0.9",
-        "babel-loader": "^8.1.0",
+        "@babel/cli": "^7.26.4",
+        "@babel/core": "^7.26.9",
+        "@babel/plugin-transform-runtime": "^7.26.9",
+        "@babel/preset-env": "^7.26.9",
+        "@babel/preset-react": "^7.26.3",
+        "@testing-library/react": "^12.1.5",
+        "babel-loader": "^9.2.1",
         "babel-polyfill": "^6.26.0",
         "bootstrap": "^5.3.3",
-        "css-loader": "^5.2.4",
+        "css-loader": "^7.1.2",
         "eslint": "^8.57.0",
-        "eslint-config-reforis": "^2.1.1",
+        "eslint-config-reforis": "^2.2.1",
         "file-loader": "^6.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "jest-mock-axios": "^4.7.3",
-        "moment-timezone": "^0.5.45",
-        "prettier": "^3.3.2",
+        "jest-mock-axios": "^4.8.0",
+        "moment-timezone": "^0.5.47",
+        "prettier": "^3.5.3",
         "prop-types": "15.8.1",
         "react": "16.9.0",
         "react-dom": "16.9.0",
         "react-router-dom": "^5.1.2",
         "react-styleguidist": "^12.0.1",
         "snapshot-diff": "^0.10.0",
-        "style-loader": "^1.2.1",
-        "webpack": "^5.92.1"
+        "style-loader": "^4.0.0",
+        "webpack": "^5.98.0"
     },
     "scripts": {
         "lint": "eslint src",

src/bootstrap/Input.js

@@ -34,12 +34,14 @@ const Input = forwardRef(
 
         return (
             <div className="mb-3">
-                <label
-                    className={`form-label ${labelClassName || ""}`.trim()}
-                    htmlFor={uid}
-                >
-                    {label}
-                </label>
+                {label && (
+                    <label
+                        className={`form-label ${labelClassName || ""}`.trim()}
+                        htmlFor={uid}
+                    >
+                        {label}
+                    </label>
+                )}
                 <div className={`input-group ${groupClassName || ""}`.trim()}>
                     <input
                         className={`form-control ${inputClassName}`.trim()}
@@ -65,7 +67,7 @@ Input.displayName = "Input";
 
 Input.propTypes = {
     type: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired,
+    label: PropTypes.string,
     helpText: PropTypes.string,
     error: PropTypes.string,
     className: PropTypes.string,

src/bootstrap/__tests__/NumberInput.test.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -7,7 +7,7 @@
 
 import React from "react";
 
-import { render, fireEvent, getByLabelText, wait } from "customTestRender";
+import { render, fireEvent, getByLabelText, waitFor } from "customTestRender";
 
 import NumberInput from "../NumberInput";
 
@@ -34,7 +34,7 @@ describe("<NumberInput/>", () => {
     it("Increase number with button", async () => {
         const increaseButton = getByLabelText(componentContainer, /Increase/);
         fireEvent.mouseDown(increaseButton);
-        await wait(() =>
+        await waitFor(() =>
             expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 2 } })
         );
     });
@@ -42,7 +42,7 @@ describe("<NumberInput/>", () => {
     it("Decrease number with button", async () => {
         const decreaseButton = getByLabelText(componentContainer, /Decrease/);
         fireEvent.mouseDown(decreaseButton);
-        await wait(() =>
+        await waitFor(() =>
             expect(onChangeMock).toHaveBeenCalledWith({ target: { value: 0 } })
         );
     });

src/common/ActionButtonWithModal/ActionButtonWithModal.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -9,7 +9,7 @@ import React, { useState, useEffect } from "react";
 
 import PropTypes from "prop-types";
 
-import { useAPIPost } from "../../api/hooks";
+import { useAPIPost, useAPIPut } from "../../api/hooks";
 import { API_STATE } from "../../api/utils";
 import Button from "../../bootstrap/Button";
 import {
@@ -23,6 +23,8 @@ import { useAlert } from "../../context/alertContext/AlertContext";
 ActionButtonWithModal.propTypes = {
     /** Component that triggers the action. */
     actionTrigger: PropTypes.elementType.isRequired,
+    /** Method to use for the action. */
+    actionMethod: PropTypes.string,
     /** URL to send the action to. */
     actionUrl: PropTypes.string.isRequired,
     /** Title of the modal. */
@@ -41,6 +43,7 @@ ActionButtonWithModal.propTypes = {
 
 function ActionButtonWithModal({
     actionTrigger: ActionTriggerComponent,
+    actionMethod = "POST",
     actionUrl,
     modalTitle,
     modalMessage,
@@ -51,24 +54,43 @@ function ActionButtonWithModal({
 }) {
     const [triggered, setTriggered] = useState(false);
     const [modalShown, setModalShown] = useState(false);
-    const [triggerActionStatus, triggerAction] = useAPIPost(actionUrl);
+    const [triggerPostActionStatus, triggerPostAction] = useAPIPost(actionUrl);
+    const [triggerPutActionStatus, triggerPutAction] = useAPIPut(actionUrl);
 
     const [setAlert] = useAlert();
     useEffect(() => {
-        if (triggerActionStatus.state === API_STATE.SUCCESS) {
+        if (
+            triggerPostActionStatus.state === API_STATE.SUCCESS ||
+            triggerPutActionStatus.state === API_STATE.SUCCESS
+        ) {
             setAlert(
                 successMessage || _("Action successful."),
                 API_STATE.SUCCESS
             );
+            setTriggered(false);
         }
-        if (triggerActionStatus.state === API_STATE.ERROR) {
+        if (
+            triggerPostActionStatus.state === API_STATE.ERROR ||
+            triggerPutActionStatus.state === API_STATE.ERROR
+        ) {
             setAlert(errorMessage || _("Action failed."));
+            setTriggered(false);
         }
-    }, [triggerActionStatus, setAlert, successMessage, errorMessage]);
+    }, [
+        triggerPostActionStatus,
+        triggerPutActionStatus,
+        setAlert,
+        successMessage,
+        errorMessage,
+    ]);
 
     const actionHandler = () => {
         setTriggered(true);
-        triggerAction();
+        if (actionMethod === "POST") {
+            triggerPostAction();
+        } else {
+            triggerPutAction();
+        }
         setModalShown(false);
     };
 

src/common/RichTable/RichTable.js

@@ -1,94 +1,118 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
 
-import React, {
-    useMemo,
-    useState,
-    useImperativeHandle,
-    forwardRef,
-} from "react";
+import React, { useMemo, useState } from "react";
 
+import { rankItem } from "@tanstack/match-sorter-utils";
 import {
     flexRender,
     getCoreRowModel,
     getSortedRowModel,
+    getFilteredRowModel,
     getPaginationRowModel,
     useReactTable,
 } from "@tanstack/react-table";
 import PropTypes from "prop-types";
 
 import RichTableBody from "./RichTableBody";
+import RichTableColumnsDropdown from "./RichTableColumnsDropdown";
 import RichTableHeader from "./RichTableHeader";
 import RichTablePagination from "./RichTablePagination";
-
-const fallbackData = [];
-
-const RichTable = forwardRef(
-    ({ columns, data, withPagination, pageSize = 5, pageIndex = 0 }, ref) => {
-        const tableColumns = useMemo(() => columns, [columns]);
-        const [tableData, setTableData] = useState(data ?? fallbackData);
-        const [sorting, setSorting] = useState([]);
-        const [pagination, setPagination] = useState({
-            pageIndex,
-            pageSize,
-        });
-
-        useImperativeHandle(ref, () => ({
-            setTableData,
-        }));
-
-        const table = useReactTable({
-            data: tableData,
-            columns: tableColumns,
-            getCoreRowModel: getCoreRowModel(),
-            getSortedRowModel: getSortedRowModel(),
-            getPaginationRowModel: getPaginationRowModel(),
-            onPaginationChange: setPagination,
-            onSortingChange: setSorting,
-            state: {
-                sorting,
-                pagination,
-            },
-        });
-
-        const paginationIsNeeded =
-            tableData.length > pageSize && withPagination;
-
-        return (
-            <div className="table-responsive">
-                <table className="table table-hover text-nowrap">
-                    <RichTableHeader table={table} flexRender={flexRender} />
-                    <RichTableBody table={table} flexRender={flexRender} />
-                </table>
-                {paginationIsNeeded && (
-                    <RichTablePagination
-                        table={table}
-                        tablePageSize={pageSize}
-                        allRows={tableData.length}
-                    />
-                )}
-            </div>
-        );
-    }
-);
+import Input from "../../bootstrap/Input";
 
 RichTable.propTypes = {
     /** Columns to be displayed in the table */
     columns: PropTypes.array.isRequired,
-    /** Data to be displayed in the table */
+    /** Data to be displayed in the table, must be passed as a stable reference, for example, useState */
     data: PropTypes.array.isRequired,
     /** Whether to display pagination */
     withPagination: PropTypes.bool,
-    /** Number of rows per page */
+    /** Number of rows per page, the default is 5 */
     pageSize: PropTypes.number,
     /** Index of the current page */
     pageIndex: PropTypes.number,
 };
 
-RichTable.displayName = "RichTable";
+export default function RichTable({
+    columns,
+    data,
+    withPagination,
+    pageSize = 5,
+    pageIndex = 0,
+}) {
+    const tableColumns = useMemo(() => columns, [columns]);
+    const [sorting, setSorting] = useState([]);
+    const [pagination, setPagination] = useState({
+        pageIndex,
+        pageSize,
+    });
+    const [globalFilter, setGlobalFilter] = useState("");
+    const [columnVisibility, setColumnVisibility] = useState({});
 
-export default RichTable;
+    const table = useReactTable({
+        data,
+        columns: tableColumns,
+        filterFns: {
+            fuzzy: fuzzyFilter,
+        },
+        globalFilterFn: "fuzzy",
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onSortingChange: setSorting,
+        onPaginationChange: setPagination,
+        onGlobalFilterChange: setGlobalFilter,
+        onColumnVisibilityChange: setColumnVisibility,
+        state: {
+            sorting,
+            pagination,
+            globalFilter,
+            columnVisibility,
+        },
+    });
+
+    const paginationIsNeeded = data.length > pageSize && withPagination;
+
+    return (
+        <div>
+            <div className="d-flex justify-content-between align-items-center">
+                <Input
+                    className="me-3"
+                    type="text"
+                    placeholder={_("Search…")}
+                    value={globalFilter ?? ""}
+                    onChange={(e) => setGlobalFilter(String(e.target.value))}
+                />
+                <RichTableColumnsDropdown columns={table.getAllLeafColumns()} />
+            </div>
+            <div className="table-responsive">
+                <table className="table table-hover text-nowrap">
+                    <RichTableHeader table={table} flexRender={flexRender} />
+                    <RichTableBody
+                        table={table}
+                        columns={tableColumns}
+                        flexRender={flexRender}
+                    />
+                </table>
+                {paginationIsNeeded && (
+                    <RichTablePagination
+                        table={table}
+                        tablePageSize={pageSize}
+                        allRows={data.length}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}
+
+function fuzzyFilter(row, columnId, value, addMeta) {
+    const itemRank = rankItem(row.getValue(columnId), value);
+    addMeta({ itemRank });
+    return itemRank.passed;
+}

src/common/RichTable/RichTableBody.js

@@ -13,34 +13,44 @@ RichTableBody.propTypes = {
     table: propTypes.shape({
         getRowModel: propTypes.func.isRequired,
     }).isRequired,
+    columns: propTypes.array.isRequired,
     flexRender: propTypes.func.isRequired,
 };
 
-function RichTableBody({ table, flexRender }) {
+function RichTableBody({ table, columns, flexRender }) {
     return (
         <tbody>
-            {table.getRowModel().rows.map((row) => {
-                return (
-                    <tr key={row.id} className="align-middle">
-                        {row.getVisibleCells().map((cell) => {
-                            return (
-                                <td
-                                    key={cell.id}
-                                    {...(cell.column.columnDef.className && {
-                                        className:
-                                            cell.column.columnDef.className,
-                                    })}
-                                >
-                                    {flexRender(
-                                        cell.column.columnDef.cell,
-                                        cell.getContext()
-                                    )}
-                                </td>
-                            );
-                        })}
-                    </tr>
-                );
-            })}
+            {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => {
+                    return (
+                        <tr key={row.id} className="align-middle">
+                            {row.getVisibleCells().map((cell) => {
+                                return (
+                                    <td
+                                        key={cell.id}
+                                        {...(cell.column.columnDef
+                                            .className && {
+                                            className:
+                                                cell.column.columnDef.className,
+                                        })}
+                                    >
+                                        {flexRender(
+                                            cell.column.columnDef.cell,
+                                            cell.getContext()
+                                        )}
+                                    </td>
+                                );
+                            })}
+                        </tr>
+                    );
+                })
+            ) : (
+                <tr>
+                    <td colSpan={columns.length} className="text-center py-4">
+                        <span>{_("No results.")}</span>
+                    </td>
+                </tr>
+            )}
         </tbody>
     );
 }

src/common/RichTable/RichTableColumnsDropdown.js

@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React from "react";
+
+import { faCheck, faRotateLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import PropTypes from "prop-types";
+
+import Button from "../../bootstrap/Button";
+
+RichTableColumnsDropdown.propTypes = {
+    columns: PropTypes.array.isRequired,
+};
+
+function RichTableColumnsDropdown({ columns }) {
+    return (
+        <div className="dropdown mb-3">
+            <Button
+                className="btn btn-outline-secondary dropdown-toggle"
+                data-bs-toggle="dropdown"
+            >
+                {_("Columns")}
+            </Button>
+            <ul className="dropdown-menu dropdown-menu-end">
+                {columns.map((column) => {
+                    return (
+                        <li key={column.id}>
+                            <button
+                                type="button"
+                                className="dropdown-item d-flex align-items-center"
+                                onClick={column.getToggleVisibilityHandler()}
+                                style={{ paddingLeft: "2rem" }}
+                                disabled={
+                                    column.columnDef?.enableHiding === false
+                                }
+                            >
+                                {column.getIsVisible() && (
+                                    <FontAwesomeIcon
+                                        icon={faCheck}
+                                        className="position-absolute text-secondary me-2"
+                                        style={{ left: "0.6rem" }}
+                                        width="1rem"
+                                    />
+                                )}
+                                <span>{column.columnDef.header}</span>
+                            </button>
+                        </li>
+                    );
+                })}
+                {columns.some((column) => !column.getIsVisible()) && (
+                    <>
+                        <li>
+                            <hr className="dropdown-divider" />
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                className="dropdown-item d-flex align-items-center"
+                                style={{ paddingLeft: "2rem" }}
+                                onClick={() => {
+                                    // toggleVisibility for columns that are hidden
+                                    columns.forEach((column) => {
+                                        if (!column.getIsVisible()) {
+                                            column.toggleVisibility();
+                                        }
+                                    });
+                                }}
+                            >
+                                <FontAwesomeIcon
+                                    icon={faRotateLeft}
+                                    className="position-absolute text-secondary me-2"
+                                    width="1rem"
+                                    style={{ left: "0.6rem" }}
+                                />
+                                {_("Reset")}
+                            </button>
+                        </li>
+                    </>
+                )}
+            </ul>
+        </div>
+    );
+}
+
+export default RichTableColumnsDropdown;

src/common/RichTable/RichTableHeader.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -32,7 +32,7 @@ function RichTableHeader({ table, flexRender }) {
     };
 
     return (
-        <thead className="thead-light">
+        <thead className="table-light">
             {table.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id} role="row">
                     {headerGroup.headers.map((header) => (
@@ -55,6 +55,12 @@ function RichTableHeader({ table, flexRender }) {
                             ) : (
                                 <button
                                     type="button"
+                                    style={
+                                        header.column.columnDef
+                                            .headerClassName === "text-center"
+                                            ? { justifySelf: "center" }
+                                            : {}
+                                    }
                                     className={`btn btn-link text-decoration-none text-reset fw-bold p-0 d-flex align-items-center
                                                     ${
                                                         header.column.getCanSort()

src/common/RichTable/RichTablePagination.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.

src/common/WiFiSettings/__tests__/ResetWiFiSettings.test.js

@@ -1,12 +1,12 @@
 /*
- * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
 
 import React from "react";
-import { render, fireEvent, wait } from "customTestRender";
+import { render, fireEvent, waitFor } from "customTestRender";
 
 import mockAxios from "jest-mock-axios";
 import WebSockets from "webSockets/WebSockets";
@@ -35,7 +35,7 @@ describe("<ResetWiFiSettings/>", () => {
             expect.anything()
         );
         mockAxios.mockResponse({ data: { foo: "bar" } });
-        await wait(() =>
+        await waitFor(() =>
             expect(mockSetAlert).toBeCalledWith(
                 "Wi-Fi settings are set to defaults.",
                 ALERT_TYPES.SUCCESS
@@ -46,7 +46,7 @@ describe("<ResetWiFiSettings/>", () => {
     it("should display alert on open ports - failure", async () => {
         fireEvent.click(getAllByText("Reset Wi-Fi Settings")[1]);
         mockJSONError();
-        await wait(() =>
+        await waitFor(() =>
             expect(mockSetAlert).toBeCalledWith(
                 "An error occurred during resetting Wi-Fi settings."
             )

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

@@ -1,15 +1,16 @@
 /*
- * Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
  */
 
 import React from "react";
+
 import diffSnapshot from "snapshot-diff";
 import mockAxios from "jest-mock-axios";
 
-import { fireEvent, render, wait } from "customTestRender";
+import { fireEvent, render, waitFor } from "customTestRender";
 import WebSockets from "webSockets/WebSockets";
 import { mockJSONError } from "testUtils/network";
 
@@ -45,7 +46,7 @@ describe("<WiFiSettings/>", () => {
         getByLabelText = renderRes.getByLabelText;
         getByText = renderRes.getByText;
         mockAxios.mockResponse({ data: wifiSettingsFixture() });
-        await wait(() => renderRes.getByText("Wi-Fi 1"));
+        await waitFor(() => renderRes.getByText("Wi-Fi 1"));
         firstRender = renderRes.asFragment();
     });
 
@@ -60,7 +61,7 @@ describe("<WiFiSettings/>", () => {
         );
         const errorMessage = "An API error occurred.";
         mockJSONError(errorMessage);
-        await wait(() => {
+        await waitFor(() => {
             expect(getByText(errorMessage)).toBeTruthy();
         });
     });
@@ -181,6 +182,7 @@ describe("<WiFiSettings/>", () => {
                     guest_wifi: {
                         SSID: "TestGuestSSID",
                         enabled: true,
+                        encryption: "WPA2",
                         password: "test_password",
                     },
                     hidden: false,

src/common/WiFiSettings/__tests__/__fixtures__/wifiSettings.js

@@ -223,6 +223,7 @@ export function wifiSettingsFixture() {
                 guest_wifi: {
                     SSID: "TestGuestSSID",
                     enabled: false,
+                    encryption: "WPA2",
                     password: "",
                 },
                 hidden: false,

src/common/__tests__/ActionButtonWithModal.test.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -9,13 +9,7 @@ import React from "react";
 
 import Button from "bootstrap/Button";
 
-import {
-    fireEvent,
-    getByText,
-    queryByText,
-    render,
-    wait,
-} from "customTestRender";
+import { fireEvent, getByText, render, waitFor } from "customTestRender";
 import mockAxios from "jest-mock-axios";
 import { mockJSONError } from "testUtils/network";
 import { mockSetAlert } from "testUtils/alertContextMock";
@@ -73,7 +67,7 @@ describe("<ActionButtonWithModal/>", () => {
         fireEvent.click(getByText(componentContainer, "Action"));
         fireEvent.click(getByText(componentContainer, "Confirm action"));
         mockJSONError();
-        await wait(() =>
+        await waitFor(() =>
             expect(mockSetAlert).toBeCalledWith("Action request failed.")
         );
     });
@@ -82,7 +76,7 @@ describe("<ActionButtonWithModal/>", () => {
         fireEvent.click(getByText(componentContainer, "Action"));
         fireEvent.click(getByText(componentContainer, "Confirm action"));
         mockAxios.mockResponse({ status: 200 });
-        await wait(() =>
+        await waitFor(() =>
             expect(mockSetAlert).toBeCalledWith(
                 "Action request succeeded.",
                 "success"

src/context/customizationContext/__tests__/CustomizationContext.test.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -7,7 +7,7 @@
 
 import React from "react";
 
-import { render, wait, getByText } from "customTestRender";
+import { render, waitFor, getByText } from "customTestRender";
 import mockAxios from "jest-mock-axios";
 
 import {
@@ -38,7 +38,7 @@ describe("CustomizationContext", () => {
     it("should render component without customization", async () => {
         mockAxios.mockResponse({ data: {} });
 
-        await wait(() => getByText(componentContainer, ORIGINAL));
+        await waitFor(() => getByText(componentContainer, ORIGINAL));
 
         expect(componentContainer).toMatchSnapshot();
     });
@@ -46,7 +46,7 @@ describe("CustomizationContext", () => {
     it("should render customized component", async () => {
         mockAxios.mockResponse({ data: { customization: "shield" } });
 
-        await wait(() => getByText(componentContainer, CUSTOM));
+        await waitFor(() => getByText(componentContainer, CUSTOM));
 
         expect(componentContainer).toMatchSnapshot();
     });

src/form/__tests__/hooks.test.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -7,7 +7,7 @@
 
 import React from "react";
 
-import { act, fireEvent, render, waitForElement } from "customTestRender";
+import { act, fireEvent, render, waitFor } from "customTestRender";
 import mockAxios from "jest-mock-axios";
 import WebSockets from "webSockets/WebSockets";
 import ForisForm from "../components/ForisForm";
@@ -59,7 +59,7 @@ describe("useForm hook.", () => {
         );
         mockAxios.mockResponse({ field: "fetchedData" });
 
-        input = await waitForElement(() => getByTestId("test-input"));
+        input = await waitFor(() => getByTestId("test-input"));
         form = container.firstChild.firstChild;
     });
 

src/form/components/SubmitButton.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -20,22 +20,25 @@ export const STATES = {
 SubmitButton.propTypes = {
     disabled: PropTypes.bool,
     state: PropTypes.oneOf(Object.keys(STATES).map((key) => STATES[key])),
+    label: PropTypes.string,
 };
 
-export function SubmitButton({ disabled, state, ...props }) {
+export function SubmitButton({ disabled, state, label, ...props }) {
     const disableSubmitButton = disabled || state !== STATES.READY;
     const loadingSubmitButton = state !== STATES.READY;
 
-    let labelSubmitButton;
-    switch (state) {
-        case STATES.SAVING:
-            labelSubmitButton = _("Updating");
-            break;
-        case STATES.LOAD:
-            labelSubmitButton = _("Load settings");
-            break;
-        default:
-            labelSubmitButton = _("Save");
+    let labelSubmitButton = label;
+    if (!labelSubmitButton) {
+        switch (state) {
+            case STATES.SAVING:
+                labelSubmitButton = _("Updating");
+                break;
+            case STATES.LOAD:
+                labelSubmitButton = _("Load settings");
+                break;
+            default:
+                labelSubmitButton = _("Save");
+        }
     }
 
     return (