From c4240cdf2f11d4d7f7164f3cb9c16d32b9ca0eb8 Mon Sep 17 00:00:00 2001 From: Sky020 <2397860h@student.gla.ac.uk> Date: Wed, 9 Sep 2020 17:12:48 +0100 Subject: [PATCH] fix: allow form label and name to differ Co-authored-by: Oliver Eyton-Williams --- client/src/components/formHelpers/Form.js | 7 ++++-- .../src/components/formHelpers/Form.test.js | 15 ++++++++----- .../src/components/formHelpers/FormFields.js | 22 ++++++++++--------- client/src/components/formHelpers/index.js | 7 ------ .../src/components/settings/Certification.js | 7 +++++- .../Challenges/projects/SolutionForm.js | 7 ++++-- 6 files changed, 37 insertions(+), 28 deletions(-) diff --git a/client/src/components/formHelpers/Form.js b/client/src/components/formHelpers/Form.js index 3a17e17e66..809ddfc6d2 100644 --- a/client/src/components/formHelpers/Form.js +++ b/client/src/components/formHelpers/Form.js @@ -12,7 +12,10 @@ import { const propTypes = { buttonText: PropTypes.string, enableSubmit: PropTypes.bool, - formFields: PropTypes.arrayOf(PropTypes.string).isRequired, + formFields: PropTypes.arrayOf( + PropTypes.shape({ name: PropTypes.string, label: PropTypes.string }) + .isRequired + ).isRequired, hideButton: PropTypes.bool, id: PropTypes.string.isRequired, initialValues: PropTypes.object, @@ -47,7 +50,7 @@ function DynamicForm({ onSubmit={handleSubmit} style={{ width: '100%' }} > - + {hideButton ? null : ( diff --git a/client/src/components/formHelpers/Form.test.js b/client/src/components/formHelpers/Form.test.js index e0cb43e723..573a6b4c0d 100644 --- a/client/src/components/formHelpers/Form.test.js +++ b/client/src/components/formHelpers/Form.test.js @@ -8,7 +8,10 @@ import Form from './Form'; const defaultTestProps = { buttonText: 'Submit', - formFields: ['name', 'website'], + formFields: [ + { name: 'name', label: 'name Label' }, + { name: 'website', label: 'WebSite label' } + ], id: 'my-test-form', options: { types: { @@ -23,11 +26,11 @@ const defaultTestProps = { test('should render', () => { const { getByLabelText, getByText } = render(
); - const nameInput = getByLabelText(/name/i); + const nameInput = getByLabelText(/name Label/); expect(nameInput).not.toBeRequired(); expect(nameInput).toHaveAttribute('type', 'text'); - const websiteInput = getByLabelText(/website/i); + const websiteInput = getByLabelText(/WebSite label/); expect(websiteInput).toBeRequired(); expect(websiteInput).toHaveAttribute('type', 'url'); @@ -48,10 +51,10 @@ test('should render with default values', () => { /> ); - const nameInput = getByLabelText(/name/i); + const nameInput = getByLabelText(/name Label/); expect(nameInput).toHaveValue(nameValue); - const websiteInput = getByLabelText(/website/i); + const websiteInput = getByLabelText(/WebSite label/); expect(websiteInput).toHaveValue(websiteValue); const button = getByText(/submit/i); @@ -68,7 +71,7 @@ test('should submit', () => { const { getByLabelText, getByText } = render(); - const websiteInput = getByLabelText(/website/i); + const websiteInput = getByLabelText(/WebSite label/); fireEvent.change(websiteInput, { target: { value: websiteValue } }); expect(websiteInput).toHaveValue(websiteValue); diff --git a/client/src/components/formHelpers/FormFields.js b/client/src/components/formHelpers/FormFields.js index a0b9b606ae..485f59ce61 100644 --- a/client/src/components/formHelpers/FormFields.js +++ b/client/src/components/formHelpers/FormFields.js @@ -1,5 +1,5 @@ import React from 'react'; -import { kebabCase, startCase } from 'lodash'; +import { kebabCase } from 'lodash'; import PropTypes from 'prop-types'; import { Alert, @@ -12,7 +12,10 @@ import { import { Field } from 'react-final-form'; const propTypes = { - fields: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired, + formFields: PropTypes.arrayOf( + PropTypes.shape({ name: PropTypes.string, label: PropTypes.string }) + .isRequired + ).isRequired, options: PropTypes.shape({ ignored: PropTypes.arrayOf(PropTypes.string), placeholders: PropTypes.objectOf(PropTypes.string), @@ -22,19 +25,20 @@ const propTypes = { }; function FormFields(props) { - const { fields, options = {} } = props; + const { formFields, options = {} } = props; const { ignored = [], placeholders = {}, required = [], types = {} } = options; + return (
- {fields - .filter(field => !ignored.includes(field)) - .map(name => ( - + {formFields + .filter(formField => !ignored.includes(formField.name)) + .map(({ name, label }) => ( + {({ input: { value, onChange }, meta: { pristine, error } }) => { const key = kebabCase(name); const type = name in types ? types[name] : 'text'; @@ -44,9 +48,7 @@ function FormFields(props) { {type === 'hidden' ? null : ( - - {startCase(name)} - + {label} )} Any) => (value: Any) => Any export function callIfDefined(fn) { return value => (value ? fn(value) : value); @@ -24,7 +23,6 @@ export function formatUrlValues(values, options) { return { ...result, [key]: value }; }, {}); } - // formatUrl(url: String) => String export function formatUrl(url) { if (typeof url === 'string' && url.length > 4 && url.indexOf('.') !== -1) { @@ -41,21 +39,17 @@ export function formatUrl(url) { } return url; } - export function isValidURL(data) { /* eslint-disable camelcase */ return isURL(data, { require_protocol: true }); /* eslint-enable camelcase */ } - export function makeOptional(validator) { return val => (val ? validator(val) : true); } - export function makeRequired(validator) { return val => (val ? validator(val) : false); } - export function createFormValidator(fieldValidators) { const fieldKeys = Object.keys(fieldValidators); return values => @@ -69,7 +63,6 @@ export function createFormValidator(fieldValidators) { .filter(Boolean) .reduce((errors, error) => ({ ...errors, ...error }), {}); } - export function getValidationState(field) { if (field.pristine) { return null; diff --git a/client/src/components/settings/Certification.js b/client/src/components/settings/Certification.js index dc058b0b25..f47da57f67 100644 --- a/client/src/components/settings/Certification.js +++ b/client/src/components/settings/Certification.js @@ -415,6 +415,11 @@ export class CertificationSettings extends Component { { types: {} } ); + const formFields = challengeTitles.map(title => ({ + name: title, + label: title + })); + const fullForm = filledforms === challengeTitles.length; const createClickHandler = certLocation => e => { @@ -436,7 +441,7 @@ export class CertificationSettings extends Component {