feat: server-admin-ui, migrate from react-jsonschema-form-bs4 to @rjsf/bootstrap-4

docs/develop/plugins/configuration.md

@@ -33,7 +33,7 @@ plugin.schema = {
 
 JSON Schema approach works reasonably well for simple to medium complex configuration data. The server supports also [custom plugin configuration components](../webapps.md), bypassing the automatic configuration format generation.
 
-It should ne noted that some JSON schema constructs are not supported. Refer ([details](https://github.com/peterkelly/react-jsonschema-form-bs4/blob/v1.7.1-bs4/docs/index.md#json-schema-supporting-status)) for details.
+It should be noted that some JSON schema constructs are not supported. Refer to the [RJSF documentation](https://rjsf-team.github.io/react-jsonschema-form/docs/) for details.
 
 The configuration data is stored by the server under the following path `$SIGNALK_NODE_CONFIG_DIR/plugin-config-data/<plugin-name>.json`. _(Default value of SIGNALK_NODE_CONFIG_DIR is $HOME/.signalk.)_
 

packages/server-admin-ui/package.json

@@ -20,6 +20,10 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@rjsf/bootstrap-4": "^5.24.13",
+    "@rjsf/core": "^5.24.13",
+    "@rjsf/utils": "^5.24.13",
+    "@rjsf/validator-ajv8": "^5.24.13",
     "@signalk/server-admin-ui-dependencies": "1.0.1",
     "ansi-to-html": "^0.6.14",
     "babel-loader": "^8.1.0",
@@ -36,13 +40,13 @@
     "lodash.set": "^4.3.2",
     "lodash.uniq": "^4.5.0",
     "moment": "^2.29.1",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
+    "react-bootstrap": "^1.6.8",
     "react-copy-to-clipboard": "^5.0.3",
-    "react-dom": "^16.13.1",
+    "react-dom": "^16.14.0",
     "react-html-parser": "^2.0.2",
     "react-infinite-scroll-component": "^6.1.0",
     "react-json-tree": "^0.20.0",
-    "react-jsonschema-form-bs4": "^1.7.1",
     "react-redux": "^5.1.2",
     "react-router-dom": "^4.3.1",
     "react-select": "^3.1.0",

packages/server-admin-ui/scss/_custom.scss

@@ -1,22 +1,98 @@
 // Here you can add other styles
 
-form.rjsf label {
-  margin-bottom: 0;
-}
+// RJSF Form Styling
 
-form.rjsf div > p.field-description {
-  font-size: 0.7rem;
-  font-style: italic;
-  margin-bottom: 0px;
-}
+// Mixin for button state variants to reduce duplication
+@mixin button-variant(
+  $bg-color,
+  $border-color,
+  $hover-bg,
+  $hover-border,
+  $shadow-color
+) {
+  background-color: $bg-color !important;
+  border-color: $border-color !important;
+  color: white !important;
+
+  &:hover {
+    background-color: $hover-bg !important;
+    border-color: $hover-border !important;
+  }
 
-form.rjsf input {
-  width: auto;
+  &:focus {
+    background-color: $hover-bg !important;
+    border-color: $hover-border !important;
+    box-shadow: 0 0 0 0.2rem $shadow-color !important;
+  }
 }
 
-form.rjsf div.row.array-item {
-  background-color: aliceblue;
-  margin-bottom: 3px;
+form.rjsf {
+  // General form element styling
+  label {
+    margin-bottom: 0;
+  }
+
+  div > p.field-description {
+    font-size: 0.7rem;
+    font-style: italic;
+    margin-bottom: 0px;
+  }
+
+  input {
+    width: auto;
+  }
+
+  div.row.array-item {
+    background-color: aliceblue;
+    margin-bottom: 3px;
+  }
+
+  // Custom button styling for RJSF buttons to match original appearance
+
+  // Add button styling - cyan color
+  button.btn-add,
+  button.array-item-add button {
+    @include button-variant(
+      #20a8d8,
+      // background
+      #20a8d8,
+      // border
+      #1985ac,
+      // hover background
+      #1985ac,
+      // hover border
+      rgba(32, 168, 216, 0.5) // focus shadow
+    );
+  }
+
+  // Remove button styling - red color
+  button.array-item-remove {
+    @include button-variant(
+      #f86c6b,
+      // background
+      #f86c6b,
+      // border
+      #f63c3a,
+      // hover background
+      #f63c3a,
+      // hover border
+      rgba(248, 108, 107, 0.5) // focus shadow
+    );
+  }
+
+  // Array button styling
+  .array-button-style {
+    flex: 1 1 0%;
+    padding-left: 6px;
+    padding-right: 6px;
+    font-weight: bold;
+  }
+
+  // Button group flexbox layout
+  .btn-group-flex {
+    display: flex;
+    justify-content: space-around;
+  }
 }
 
 @media (max-width: 767px) {