diff --git a/site/gatsby-site/playwright/e2e-full/submit.spec.ts b/site/gatsby-site/playwright/e2e-full/submit.spec.ts index 7fcf6fd818..cbeed641f0 100644 --- a/site/gatsby-site/playwright/e2e-full/submit.spec.ts +++ b/site/gatsby-site/playwright/e2e-full/submit.spec.ts @@ -1707,4 +1707,66 @@ test.describe('The Submit form', () => { await expect(page.locator('.tw-toast:has-text("Report successfully added to review queue. You can see your submission")')).toBeVisible(); await expect(page.locator(':text("Please review. Some data is missing.")')).not.toBeVisible(); }); + + test('Should allow commas in developers, deployers, harmed_parties, and implicated_systems', async ({ page }) => { + await init(); + await conditionalIntercept( + page, + '**/parseNews**', + () => true, + parseNews, + 'parseNews' + ); + + await trackRequest( + page, + '**/graphql', + (req) => req.postDataJSON().operationName == 'FindSubmissions', + 'findSubmissions' + ); + + await page.goto(url); + + await waitForRequest('findSubmissions'); + + await page.locator('input[name="url"]').fill( + `https://www.arstechnica.com/gadgets/2017/11/youtube-to-crack-down-on-inappropriate-content-masked-as-kids-cartoons/` + ); + + await page.locator('button:has-text("Fetch info")').click(); + + await waitForRequest('parseNews'); + + await page.locator('[name="incident_date"]').fill('2020-01-01'); + + await expect(page.locator('.form-has-errors')).not.toBeVisible(); + + await page.locator('[data-cy="to-step-2"]').click(); + + await page.locator('[data-cy="to-step-3"]').click(); + + await page.locator('input[name="developers"]').fill('This developer has a comma in its name, test'); + await page.keyboard.press('Enter'); + + await expect(page.locator('text=Each alleged Developer must have at least 3 characters and less than 200')).not.toBeVisible(); + + // Check for deployers field + await page.locator('input[name="deployers"]').fill('This deployer has a comma in its name, test'); + await page.keyboard.press('Enter'); + await expect(page.locator('text=Each alleged Deployer must have at least 3 characters and less than 200')).not.toBeVisible(); + + // Check for harmed_parties field + await page.locator('input[name="harmed_parties"]').fill('This harmed_parties has a comma in its name, test'); + await page.keyboard.press('Enter'); + await expect(page.locator('text=Each alleged Harmed parties must have at least 3 characters and less than 200')).not.toBeVisible(); + + await page.locator('input[name="implicated_systems"]').fill('This implicated_systems has a comma in its name, test'); + await page.keyboard.press('Enter'); + await expect(page.locator('text=Each alleged Implicated AI system must have at least 3 characters and less than 200')).not.toBeVisible(); + + await page.locator('button[type="submit"]').click(); + await expect(page.locator('.tw-toast:has-text("Report successfully added to review queue. You can see your submission")')).toBeVisible(); + await expect(page.locator(':text("Please review. Some data is missing.")')).not.toBeVisible(); + }); + }); \ No newline at end of file diff --git a/site/gatsby-site/src/components/forms/SubmissionWizard/StepThree.js b/site/gatsby-site/src/components/forms/SubmissionWizard/StepThree.js index 0ae8ff942d..599fdfc311 100644 --- a/site/gatsby-site/src/components/forms/SubmissionWizard/StepThree.js +++ b/site/gatsby-site/src/components/forms/SubmissionWizard/StepThree.js @@ -360,6 +360,7 @@ const FormDetails = ({ touched={touched} values={values} errors={errors} + splitChar={null} /> @@ -377,6 +378,7 @@ const FormDetails = ({ touched={touched} values={values} errors={errors} + splitChar={null} /> @@ -394,6 +396,7 @@ const FormDetails = ({ touched={touched} values={values} errors={errors} + splitChar={null} /> @@ -411,6 +414,7 @@ const FormDetails = ({ touched={touched} values={values} errors={errors} + splitChar={null} /> diff --git a/site/gatsby-site/src/components/forms/Tags.js b/site/gatsby-site/src/components/forms/Tags.js index d9783d1ab8..fa073780b5 100644 --- a/site/gatsby-site/src/components/forms/Tags.js +++ b/site/gatsby-site/src/components/forms/Tags.js @@ -14,13 +14,20 @@ export default function Tags({ className, allowNew = true, stayOpen = false, + splitChar = ',', }) { const [open, setOpen] = useState(false); const ref = useRef(null); const commitTag = (tag) => { - const splitTags = tag.split(',').map((tag) => tag.trim()); + let splitTags = []; + + if (splitChar) { + splitTags = tag.split(splitChar).map((tag) => tag.trim()); + } else { + splitTags = [tag.trim()]; + } onChange(value ? value.concat(splitTags) : splitTags); ref.current.clear(); @@ -31,10 +38,12 @@ export default function Tags({ className={`Typeahead ${className || ''}`} inputProps={{ id: inputId, name }} onKeyDown={(e) => { - if (e.key === ',') { + if (splitChar && e.key === splitChar) { e.preventDefault(); } - if (['Enter', ','].includes(e.key) && e.target.value) { + const splitChars = splitChar ? ['Enter', splitChar] : ['Enter']; + + if (splitChars.includes(e.key) && e.target.value) { commitTag(e.target.value); } }} diff --git a/site/gatsby-site/src/components/forms/TagsControl.js b/site/gatsby-site/src/components/forms/TagsControl.js index 45746b4a83..d52e4384c9 100644 --- a/site/gatsby-site/src/components/forms/TagsControl.js +++ b/site/gatsby-site/src/components/forms/TagsControl.js @@ -10,6 +10,7 @@ const TagsControl = ({ disabled = false, options = undefined, handleChange = undefined, + splitChar = ',', }) => { const { 0: { value }, @@ -36,6 +37,7 @@ const TagsControl = ({ disabled, className, options, + splitChar, }} /> ); diff --git a/site/gatsby-site/src/components/forms/TagsInputGroup.js b/site/gatsby-site/src/components/forms/TagsInputGroup.js index ace7382442..feecc0f71a 100644 --- a/site/gatsby-site/src/components/forms/TagsInputGroup.js +++ b/site/gatsby-site/src/components/forms/TagsInputGroup.js @@ -16,6 +16,7 @@ const TagsInputGroup = ({ disabled = false, options = undefined, popoverName = null, + splitChar = ',', ...props }) => { const [optional, setOptional] = useState(true); @@ -42,7 +43,14 @@ const TagsInputGroup = ({ data-cy={props['data-cy']} >