Merge pull request KelvinTegelaar#29 from KelvinTegelaar/dev

[pull] dev from KelvinTegelaar:dev

Author: JohnDuprey

.vscode/launch.json

@@ -9,7 +9,7 @@
       "cwd": "${file}"
     },
     {
-      "command": "npm run start-api",
+      "command": "npm run start-swa",
       "name": "Run emulator",
       "request": "launch",
       "type": "node-terminal"

package.json

@@ -17,11 +17,11 @@
     "changelog": "auto-changelog --starting-version 3.0.0 --commit-limit false --hide-credit",
     "eject": "react-scripts eject",
     "lint": "eslint \"src/**/*.js\"",
-    "start": "react-scripts start",
+    "start": "set HTTPS=true&&set SSL_CRT_FILE=./.vscode/cert.crt&&set SSL_KEY_FILE=./.vscode/key.key&&react-scripts start",
     "test": "react-scripts test",
     "test:cov": "npm test -- --coverage --watchAll=false",
     "test:debug": "react-scripts --inspect-brk test --runInBand",
-    "start-api": "swa start --ssl --ssl-cert ./.vscode/cert.crt --ssl-key ./.vscode/key.key --swa-config-location .vscode http://localhost:3000 --api-location http://localhost:7071",
+    "start-swa": "swa start --ssl --ssl-cert ./.vscode/cert.crt --ssl-key ./.vscode/key.key --swa-config-location .vscode https://localhost:3000 --api-location http://localhost:7071",
     "prepare": "husky install"
   },
   "config": {
@@ -98,7 +98,7 @@
     "stylelint-order": "^5.0.0"
   },
   "engines": {
-    "node": "16",
+    "node": "18",
     "npm": ">=7"
   }
 }

src/components/forms/RFFComponents.js

@@ -7,6 +7,7 @@ import {
   CFormSwitch,
   CFormTextarea,
   CSpinner,
+  CTooltip,
 } from '@coreui/react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
@@ -75,9 +76,14 @@ RFFCFormCheck.propTypes = {
   ...sharedPropTypes,
 }
 
+function ConditionWrapper({ condition, wrapper, children }) {
+  return condition ? wrapper(children) : children
+}
+
 export const RFFCFormSwitch = ({
   name,
   label,
+  helpText,
   sublabel,
   className = 'mb-3',
   validate,
@@ -86,26 +92,36 @@ export const RFFCFormSwitch = ({
   return (
     <Field name={name} type="checkbox" validate={validate}>
       {({ meta, input }) => (
-        <div className={className}>
-          <CFormSwitch
-            {...input}
-            // @todo revisit this, only shows green when checked
-            valid={!meta.error && meta.touched && validate}
-            invalid={meta.error && meta.touched && validate}
-            disabled={disabled}
-            id={name}
-            label={label}
-          />
-          {input.value && <RFFCFormFeedback meta={meta} />}
-          <sub>{sublabel}</sub>
-        </div>
+        <ConditionWrapper
+          condition={helpText}
+          wrapper={(children) => (
+            <CTooltip placement="left" content={helpText}>
+              {children}
+            </CTooltip>
+          )}
+        >
+          <div className={className}>
+            <CFormSwitch
+              {...input}
+              // @todo revisit this, only shows green when checked
+              valid={!meta.error && meta.touched && validate}
+              invalid={meta.error && meta.touched && validate}
+              disabled={disabled}
+              id={name}
+              label={label}
+            />
+            {input.value && <RFFCFormFeedback meta={meta} />}
+            <sub>{sublabel}</sub>
+          </div>
+        </ConditionWrapper>
       )}
     </Field>
   )
 }
 
 RFFCFormSwitch.propTypes = {
   ...sharedPropTypes,
+  helpText: PropTypes.string,
 }
 
 export const RFFCFormInput = ({