diff --git a/package-lock.json b/package-lock.json index 2db89fb7513f..7ecc83e4101a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,7 @@ "core-js": "^3.18.3", "enzyme": "^3.11.0", "final-form": "^4.20.4", + "final-form-arrays": "^3.1.0", "fuzzysort": "^1.1.4", "javascript-time-ago": "^2.5.9", "jspdf": "^2.4.0", @@ -48,6 +49,7 @@ "react-datepicker": "^4.10.0", "react-dom": "^17.0.2", "react-final-form": "^6.5.7", + "react-final-form-arrays": "^3.1.4", "react-final-form-listeners": "^1.0.3", "react-helmet": "^6.1.0", "react-hotkeys-hook": "^3.4.4", @@ -8510,16 +8512,28 @@ } }, "node_modules/final-form": { - "version": "4.20.6", - "license": "MIT", + "version": "4.20.10", + "resolved": "https://registry.npmjs.org/final-form/-/final-form-4.20.10.tgz", + "integrity": "sha512-TL48Pi1oNHeMOHrKv1bCJUrWZDcD3DIG6AGYVNOnyZPr7Bd/pStN0pL+lfzF5BNoj/FclaoiaLenk4XUIFVYng==", "dependencies": { "@babel/runtime": "^7.10.0" }, + "engines": { + "node": ">=8" + }, "funding": { "type": "opencollective", "url": "https://opencollective.com/final-form" } }, + "node_modules/final-form-arrays": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/final-form-arrays/-/final-form-arrays-3.1.0.tgz", + "integrity": "sha512-TWBvun+AopgBLw9zfTFHBllnKMVNEwCEyDawphPuBGGqNsuhGzhT7yewHys64KFFwzIs6KEteGLpKOwvTQEscQ==", + "peerDependencies": { + "final-form": "^4.20.8" + } + }, "node_modules/finalhandler": { "version": "1.1.2", "dev": true, @@ -15149,6 +15163,20 @@ "react": "^16.8.0 || ^17.0.0" } }, + "node_modules/react-final-form-arrays": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/react-final-form-arrays/-/react-final-form-arrays-3.1.4.tgz", + "integrity": "sha512-siVFAolUAe29rMR6u8VwepoysUcUdh6MLV2OWnCtKpsPRUdT9VUgECjAPaVMAH2GROZNiVB9On1H9MMrm9gdpg==", + "dependencies": { + "@babel/runtime": "^7.19.4" + }, + "peerDependencies": { + "final-form": "^4.15.0", + "final-form-arrays": ">=1.0.4", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-final-form": "^6.2.1" + } + }, "node_modules/react-final-form-listeners": { "version": "1.0.3", "license": "MIT", @@ -24179,11 +24207,19 @@ } }, "final-form": { - "version": "4.20.6", + "version": "4.20.10", + "resolved": "https://registry.npmjs.org/final-form/-/final-form-4.20.10.tgz", + "integrity": "sha512-TL48Pi1oNHeMOHrKv1bCJUrWZDcD3DIG6AGYVNOnyZPr7Bd/pStN0pL+lfzF5BNoj/FclaoiaLenk4XUIFVYng==", "requires": { "@babel/runtime": "^7.10.0" } }, + "final-form-arrays": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/final-form-arrays/-/final-form-arrays-3.1.0.tgz", + "integrity": "sha512-TWBvun+AopgBLw9zfTFHBllnKMVNEwCEyDawphPuBGGqNsuhGzhT7yewHys64KFFwzIs6KEteGLpKOwvTQEscQ==", + "requires": {} + }, "finalhandler": { "version": "1.1.2", "dev": true, @@ -28203,6 +28239,14 @@ "@babel/runtime": "^7.15.4" } }, + "react-final-form-arrays": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/react-final-form-arrays/-/react-final-form-arrays-3.1.4.tgz", + "integrity": "sha512-siVFAolUAe29rMR6u8VwepoysUcUdh6MLV2OWnCtKpsPRUdT9VUgECjAPaVMAH2GROZNiVB9On1H9MMrm9gdpg==", + "requires": { + "@babel/runtime": "^7.19.4" + } + }, "react-final-form-listeners": { "version": "1.0.3", "requires": { diff --git a/package.json b/package.json index 9d1cc1f15d02..5e277e8bc02b 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "core-js": "^3.18.3", "enzyme": "^3.11.0", "final-form": "^4.20.4", + "final-form-arrays": "^3.1.0", "fuzzysort": "^1.1.4", "javascript-time-ago": "^2.5.9", "jspdf": "^2.4.0", @@ -67,6 +68,7 @@ "react-datepicker": "^4.10.0", "react-dom": "^17.0.2", "react-final-form": "^6.5.7", + "react-final-form-arrays": "^3.1.4", "react-final-form-listeners": "^1.0.3", "react-helmet": "^6.1.0", "react-hotkeys-hook": "^3.4.4", diff --git a/src/components/forms/RFFComponents.js b/src/components/forms/RFFComponents.js index 9aef7ca81c35..5365819e6623 100644 --- a/src/components/forms/RFFComponents.js +++ b/src/components/forms/RFFComponents.js @@ -1,4 +1,5 @@ import { + CButton, CFormCheck, CFormFeedback, CFormInput, @@ -12,9 +13,11 @@ import { import Select from 'react-select' import AsyncSelect from 'react-select/async' import { Field } from 'react-final-form' +import { FieldArray } from 'react-final-form-arrays' import React from 'react' import PropTypes from 'prop-types' import { useRef } from 'react' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' /* wrapper classes for React Final Form with CoreUI @@ -167,6 +170,59 @@ RFFCFormInput.propTypes = { placeholder: PropTypes.string, } +export const RFFCFormInputArray = ({ name, label, className = 'mb-3' }) => { + return ( + <> + + {({ fields }) => ( +
+
+ {label && ( + + {label} + + )} + fields.push({ Key: '', Value: '' })} + className="circular-button" + title={'+'} + > + + +
+ {fields.map((name, index) => ( +
+
+ + {({ input, meta }) => { + return + }} + + + {({ input, meta }) => { + return + }} + +
+ fields.remove(index)} + className={`circular-button`} + title={'-'} + > + + +
+ ))} +
+ )} +
+ + ) +} +RFFCFormInputArray.propTypes = { + ...sharedPropTypes, +} + export const RFFCFormRadio = ({ name, label, diff --git a/src/components/forms/index.js b/src/components/forms/index.js index 47709152242b..616687f88a0f 100644 --- a/src/components/forms/index.js +++ b/src/components/forms/index.js @@ -8,6 +8,7 @@ import { RFFCFormTextarea, RFFCFormSelect, RFFSelectSearch, + RFFCFormInputArray, } from 'src/components/forms/RFFComponents' export { @@ -20,4 +21,5 @@ export { RFFCFormTextarea, RFFCFormSelect, RFFSelectSearch, + RFFCFormInputArray, } diff --git a/src/views/cipp/Scheduler.js b/src/views/cipp/Scheduler.js index 202009c5fd5d..af533a68b800 100644 --- a/src/views/cipp/Scheduler.js +++ b/src/views/cipp/Scheduler.js @@ -7,6 +7,7 @@ import { Condition, RFFCFormCheck, RFFCFormInput, + RFFCFormInputArray, RFFCFormRadio, RFFCFormSwitch, RFFCFormTextarea, @@ -36,6 +37,7 @@ import 'react-datepicker/dist/react-datepicker.css' import TenantListSelector from 'src/components/utilities/TenantListSelector' import { ModalService, TenantSelector } from 'src/components/utilities' import CippCodeOffCanvas from 'src/components/utilities/CippCodeOffcanvas' +import arrayMutators from 'final-form-arrays' const Offcanvas = (row, rowIndex, formatExtraData) => { const [ExecuteGetRequest, getResults] = useLazyGenericGetRequestQuery() @@ -110,6 +112,7 @@ const Scheduler = () => { Parameters: values.parameters, ScheduledTime: unixTime, Recurrence: values.Recurrence, + AdditionalProperties: values.additional, PostExecution: { Webhook: values.webhook, Email: values.email, @@ -199,6 +202,9 @@ const Scheduler = () => {
true} render={({ handleSubmit, submitting, values }) => { @@ -315,12 +321,22 @@ const Scheduler = () => { /> ) : ( - + <> + {param.Type === 'System.Collections.Hashtable' ? ( + + ) : ( + + )} + )} @@ -332,7 +348,11 @@ const Scheduler = () => { }} - + + + + +