Merge pull request KelvinTegelaar#29 from KelvinTegelaar/dev

[pull] dev from KelvinTegelaar:dev

.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 = ({