Feature/tags split

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();
+    });
+
 });

site/gatsby-site/src/components/forms/SubmissionWizard/StepThree.js

@@ -360,6 +360,7 @@ const FormDetails = ({
                 touched={touched}
                 values={values}
                 errors={errors}
+                splitChar={null}
               />
             </FieldContainer>
 
@@ -377,6 +378,7 @@ const FormDetails = ({
                 touched={touched}
                 values={values}
                 errors={errors}
+                splitChar={null}
               />
             </FieldContainer>
 
@@ -394,6 +396,7 @@ const FormDetails = ({
                 touched={touched}
                 values={values}
                 errors={errors}
+                splitChar={null}
               />
             </FieldContainer>
 
@@ -411,6 +414,7 @@ const FormDetails = ({
                 touched={touched}
                 values={values}
                 errors={errors}
+                splitChar={null}
               />
             </FieldContainer>
           </>

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);
         }
       }}

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,
       }}
     />
   );

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']}
         >
           <TagsControl
-            {...{ name, placeholder, disabled, options, handleChange: props.handleChange }}
+            {...{
+              name,
+              placeholder,
+              disabled,
+              options,
+              handleChange: props.handleChange,
+              splitChar,
+            }}
           />
         </div>
         <div className="text-sm text-red-700">