FLS-1423 - Allowing multi-input row limit to be set in Designer

Author: wjrm500

designer/client/components/multiinput-field-edit/MultiInputFieldEdit.tsx

@@ -42,6 +42,7 @@ enum MultiInputFieldAction {
     EDIT_OPTIONS_HIDE_ROW_TITLE = "EDIT_OPTIONS_HIDE_ROW_TITLE",
     EDIT_OPTIONS_SHOW_TABLE_TITLE = "EDIT_OPTIONS_SHOW_TABLE_TITLE",
     EDIT_OPTIONS_SHOW_TABLE_ITEM_NAME = "EDIT_OPTIONS_SHOW_TABLE_ITEM_NAME",
+    EDIT_MAX_MULTI_INPUT_FIELD_ROWS = "EDIT_MAX_MULTI_INPUT_FIELD_ROWS",
 }
 
 export const MultiInputFieldEdit: any = ({context = AdapterComponentContext}) => {
@@ -92,6 +93,9 @@ export const MultiInputFieldEdit: any = ({context = AdapterComponentContext}) =>
     const [tableTitles, setTableTitles] = useState<string[]>(options.columnTitles ? options.columnTitles : []);
 
     const [showEditor, setShowEditor] = useState(false);
+
+    const [maxRows, setMaxRows] = useState<string>(selectedComponent.options?.maxMultiInputFieldRows?.toString() || "");
+
     const subComponentRef = useRef(null);
 
     const toggleShowEditor = () => {
@@ -622,6 +626,14 @@ export const MultiInputFieldEdit: any = ({context = AdapterComponentContext}) =>
                 }
             })
         }
+        if (e.type === MultiInputFieldAction.EDIT_MAX_MULTI_INPUT_FIELD_ROWS) {
+            setMaxRows(e.payload);
+            const numValue = parseInt(e.payload);
+            if (!selectedComponent.options) {
+                selectedComponent.options = {};
+            }
+            selectedComponent.options.maxMultiInputFieldRows = isNaN(numValue) || numValue <= 0 ? undefined : numValue;
+        }
     }
 
     const renderSelectedSubComponentConfigEdit = () => {
@@ -932,6 +944,26 @@ export const MultiInputFieldEdit: any = ({context = AdapterComponentContext}) =>
                            children: ["Table Item Name"]
                        }}/>
             </div>
+
+            <div className="govuk-form-group" data-test-id="max-multi-input-field-rows-wrapper">
+                <Input id="max-multi-input-field-rows" name="maxMultiInputFieldRows"
+                        onChange={(e) =>
+                            handleData({
+                                type: MultiInputFieldAction.EDIT_MAX_MULTI_INPUT_FIELD_ROWS,
+                                payload: e.target.value,
+                            })
+                        }
+                        value={maxRows}
+                        type="number"
+                        label={{
+                            className: "govuk-label--s",
+                            children: ["Maximum number of rows"]
+                        }}
+                        hint={{
+                            children: ["Set the maximum number of rows users can add. Leave empty for unlimited rows."]
+                        }}/>
+            </div>
+
             <div className="govuk-label govuk-label--s">----- Sub Components list -----</div>
             <div className="govuk-form-group">
                 <label className="govuk-label govuk-label--s" htmlFor="select-field-types">

e2e-test/cypress/e2e/designer/multiInputFieldEdit.feature

@@ -140,3 +140,21 @@ Feature: Multi Input Field Edit
       | YesNoField         | This is a yes no field    |                                                 |
       | MonthYearField     | This is a month field     | {"items": [{"name": "Month"},{"name": "Year"}]} |
       | MultilineTextField | This is a multiline field |                                                 |
+
+  Scenario: Test multi input field with maximum rows configuration
+    And I continue create a component
+      | page       | component         | title                   |
+      | First page | Multi Input Field | Which eggs do you like? |
+    And I add table title name "MaxRowsTest"
+    And I configure maximum rows as "2"
+    And I add child components
+      | component | title      | options | additional | listItem | name     |
+      | TextField | Item name  | {}      | false      |          | itemname |
+    And I save component
+    And I preview the page "First page" without href
+    When I enter "First item" for "Item name"
+    And I click "Save and add another"
+    When I enter "Second item" for "Item name"
+    And I click "Save and add another"
+    Then I should not see the "Save and add another" button
+    And I should see the "Save and continue" button

e2e-test/cypress/support/step_definitions/runner/i_configure_multiinput_field_max_rows.js

@@ -0,0 +1,17 @@
+import { When, Then } from "@badeball/cypress-cucumber-preprocessor";
+
+When("I configure maximum rows as {string}", (maxRows) => {
+  cy.get("#max-multi-input-field-rows").type(maxRows);
+});
+
+When("I click {string}", (buttonText) => {
+  cy.findByRole("button", { name: buttonText }).click();
+});
+
+Then("I should not see the {string} button", (buttonText) => {
+  cy.findByRole("button", { name: buttonText }).should('not.exist');
+});
+
+Then("I should see the {string} button", (buttonText) => {
+  cy.findByRole("button", { name: buttonText }).should('exist');
+});