RFF ArrayFields

- Add new component for ArrayFields - New react packages - Add Hashtable support for scheduler
KelvinTegelaar · Oct 13, 2023 · b1f94e7 · b1f94e7
1 parent 4c0aaaa
commit b1f94e7
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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 (
+    <>
+      <FieldArray name={name}>
+        {({ fields }) => (
+          <div>
+            <div className="mb-2">
+              {label && (
+                <CFormLabel className="me-2" htmlFor={name}>
+                  {label}
+                </CFormLabel>
+              )}
+              <CButton
+                onClick={() => fields.push({ Key: '', Value: '' })}
+                className="circular-button"
+                title={'+'}
+              >
+                <FontAwesomeIcon icon={'plus'} />
+              </CButton>
+            </div>
+            {fields.map((name, index) => (
+              <div key={name} className={className}>
+                <div>
+                  <Field name={`${name}.Key`} component="input">
+                    {({ input, meta }) => {
+                      return <CFormInput placeholder="Key" {...input} className="mb-2" />
+                    }}
+                  </Field>
+                  <Field name={`${name}.Value`} component="input">
+                    {({ input, meta }) => {
+                      return <CFormInput placeholder="Value" {...input} className="mb-2" />
+                    }}
+                  </Field>
+                </div>
+                <CButton
+                  onClick={() => fields.remove(index)}
+                  className={`circular-button`}
+                  title={'-'}
+                >
+                  <FontAwesomeIcon icon={'minus'} />
+                </CButton>
+              </div>
+            ))}
+          </div>
+        )}
+      </FieldArray>
+    </>
+  )
+}
+RFFCFormInputArray.propTypes = {
+  ...sharedPropTypes,
+}
+
 export const RFFCFormRadio = ({
   name,
   label,

diff --git 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
@@ -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 = () => {
             <CippContentCard title="Add Task" icon={faEdit}>
               <Form
                 onSubmit={onSubmit}
+                mutators={{
+                  ...arrayMutators,
+                }}
                 initialValues={{ taskName }}
                 initialValuesEqual={() => true}
                 render={({ handleSubmit, submitting, values }) => {
@@ -315,12 +321,22 @@ const Scheduler = () => {
                                             />
                                           </>
                                         ) : (
-                                          <RFFCFormInput
-                                            type="text"
-                                            key={idx}
-                                            name={`parameters.${param.Name}`}
-                                            label={`${param.Name}`}
-                                          />
+                                          <>
+                                            {param.Type === 'System.Collections.Hashtable' ? (
+                                              <RFFCFormInputArray
+                                                name={`parameters.${param.Name}`}
+                                                label={`${param.Name}`}
+                                                key={idx}
+                                              />
+                                            ) : (
+                                              <RFFCFormInput
+                                                type="text"
+                                                key={idx}
+                                                name={`parameters.${param.Name}`}
+                                                label={`${param.Name}`}
+                                              />
+                                            )}
+                                          </>
                                         )}
                                       </CCol>
                                     </CTooltip>
@@ -332,7 +348,11 @@ const Scheduler = () => {
                           }}
                         </FormSpy>
                       </CRow>
-
+                      <CRow className="mb-3">
+                        <CCol>
+                          <RFFCFormInputArray name={`additional`} label="Additional Properties" />
+                        </CCol>
+                      </CRow>
                       <CRow className="mb-3">
                         <CCol>
                           <label>Send results to</label>