fix(@rjsf/core): Support ui:orderable and ui:removable (rjsf-team#2797)

* Fix ui:orderable and ui:removable * Add tests, update CHANGELOG * Remove extra bracket in test Co-authored-by: Jacques Nel <jacqueswho@gmail.com>

Author: sophstad

CHANGELOG.md

@@ -21,6 +21,7 @@ should change the heading of the (upcoming) version to include a major version b
 
 ## @rjsf/core
 - Feature for ui:submitButtonOptions on the submit button for forms (https://github.com/rjsf-team/react-jsonschema-form/pull/2640)
+- Fix `ui:orderable` and `ui:removable` in arrays (#2797)
 
 ## Dev / docs / playground
 - Enable ui options in playground, to demonstrate submit button options (https://github.com/rjsf-team/react-jsonschema-form/pull/2640)
@@ -44,7 +45,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/fluent-ui
 - SubmitButton widget to use new ui:submitButtonOptions on the submit button for forms (https://github.com/rjsf-team/react-jsonschema-form/pull/2640)
 
-# v4.1.1 (upcoming)
+# v4.1.1
 
 ## @rjsf/material-ui
 - Fix bloated bundle size by individually requiring all MUI components (#2754)

packages/core/src/components/fields/ArrayField.js

@@ -803,11 +803,7 @@ class ArrayField extends Component {
  const {
  fields: { SchemaField },
  } = registry;
- const { orderable, removable } = {
- orderable: true,
- removable: true,
- ...uiSchema["ui:options"],
- };
+ const { orderable = true, removable = true } = getUiOptions(uiSchema);
  const has = {
  moveUp: orderable && canMoveUp,
  moveDown: orderable && canMoveDown,

packages/core/test/ArrayField_test.js

@@ -710,6 +710,19 @@ describe("ArrayField", () => {
  expect(moveDownBtns).to.be.null;
  });
 
+ it("should not show move up/down buttons if ui:orderable is false", () => {
+ const { node } = createFormComponent({
+ schema,
+ formData: ["foo", "bar"],
+ uiSchema: { "ui:orderable": false },
+ });
+ const moveUpBtns = node.querySelector(".array-item-move-up");
+ const moveDownBtns = node.querySelector(".array-item-move-down");
+
+ expect(moveUpBtns).to.be.null;
+ expect(moveDownBtns).to.be.null;
+ });
+
  it("should remove a field from the list", () => {
  const { node } = createFormComponent({
  schema,
@@ -772,6 +785,17 @@ describe("ArrayField", () => {
  expect(dropBtn).to.be.null;
  });
 
+ it("should not show remove button if ui:removable is false", () => {
+ const { node } = createFormComponent({
+ schema,
+ formData: ["foo", "bar"],
+ uiSchema: { "ui:removable": false },
+ });
+ const dropBtn = node.querySelector(".array-item-remove");
+
+ expect(dropBtn).to.be.null;
+ });
+
  it("should force revalidation when a field is removed", () => {
  // refs #195
  const { node } = createFormComponent({