Fix/entities chars (#3314)

* Refactor validation schema to use arrays for developers, deployers, harmed parties, and implicated systems * Enhance FieldContainer to accept additional props and improve validation error handling in TagsInputGroup * Update validation messages for developers, deployers, harmed parties, and implicated AI systems in multiple languages * Undo unecessary changes * Validate input fields for character limits in submission form
responsible-ai-collaborative · Jan 20, 2025 · e16cc9d · e16cc9d
1 parent 38998ae
commit e16cc9d
Show file tree

Hide file tree

Showing 7 changed files with 313 additions and 51 deletions.
diff --git a/site/gatsby-site/i18n/locales/es/validation.json b/site/gatsby-site/i18n/locales/es/validation.json
@@ -39,5 +39,9 @@
   "Alleged implicated AI Systems can't be longer than 200 characters": "Los sistemas implicados no pueden tener más de 200 caracteres",
   "*Alleged Implicated AI Systems is required": "Se requieren los sistemas de IA presuntamente implicados",
   "Implicated AI systems must have at least 3 characters": "Los sistemas de IA implicados deben tener al menos 3 caracteres",
-  "Implicated AI systems can't be longer than 200 characters": "Los sistemas de IA implicados no pueden tener más de 200 caracteres"
+  "Implicated AI systems can't be longer than 200 characters": "Los sistemas de IA implicados no pueden tener más de 200 caracteres",
+  "Each alleged Developer must have at least 3 characters and less than 200": "Cada desarrollador presunto debe tener al menos 3 caracteres y menos de 200",
+  "Each alleged Deployer must have at least 3 characters and less than 200": "Cada implementador presunto debe tener al menos 3 caracteres y menos de 200",
+  "Each alleged Harmed parties must have at least 3 characters and less than 200": "Cada parte perjudicada presunta debe tener al menos 3 caracteres y menos de 200",
+  "Each alleged Implicated AI system must have at least 3 characters and less than 200": "Cada sistema de IA implicado presunto debe tener al menos 3 caracteres y menos de 200"
 }
diff --git a/site/gatsby-site/i18n/locales/fr/validation.json b/site/gatsby-site/i18n/locales/fr/validation.json
@@ -41,5 +41,9 @@
   "Some data is missing.": "Certaines données manquent.",
   "Please review. Some data is missing.": "Veuillez vérifier. Certaines données manquent.",
   "Implicated Systems must have at least 3 characters": "Les systèmes impliqués doivent comporter au moins 3 caractères",
-  "Implicated Systems can't be longer than 200 characters": "Les systèmes impliqués ne peuvent pas comporter plus de 200 caractères"
+  "Implicated Systems can't be longer than 200 characters": "Les systèmes impliqués ne peuvent pas comporter plus de 200 caractères",
+  "Each alleged Developer must have at least 3 characters and less than 200": "Chaque développeur présumé doit comporter au moins 3 caractères et moins de 200",
+  "Each alleged Deployer must have at least 3 characters and less than 200": "Chaque implémenteur présumé doit comporter au moins 3 caractères et moins de 200",
+  "Each alleged Harmed parties must have at least 3 characters and less than 200": "Chaque partie lésée présumée doit comporter au moins 3 caractères et moins de 200",
+  "Each alleged Implicated AI system must have at least 3 characters and less than 200": "Chaque système d'IA impliqué présumé doit comporter au moins 3 caractères et moins de 200"
 }
diff --git a/site/gatsby-site/i18n/locales/ja/validation.json b/site/gatsby-site/i18n/locales/ja/validation.json
@@ -41,5 +41,9 @@
   "*Incident Date required": "*インシデント日は必須です",
   "*Incident ID(s) must be a number": "*インシデントIDは数字でなければいけません",
   "Implicated Systems must have at least 3 characters": "関連システムは3文字以上でなければいけません",
-  "Implicated Systems can't be longer than 200 characters": "関連システムは200文字を超えることはできません"
+  "Implicated Systems can't be longer than 200 characters": "関連システムは200文字を超えることはできません",
+  "Each alleged Developer must have at least 3 characters and less than 200": "推定される開発者は3文字以上200文字以下でなければいけません",
+  "Each alleged Deployer must have at least 3 characters and less than 200": "推定されるデプロイヤーは3文字以上200文字以下でなければいけません",
+  "Each alleged Harmed parties must have at least 3 characters and less than 200": "推定される被害グループは3文字以上200文字以下でなければいけません",
+  "Each alleged Implicated AI system must have at least 3 characters and less than 200": "推定される関連AIシステムは3文字以上200文字以下でなければいけません"
 }
diff --git a/site/gatsby-site/playwright/e2e-full/submit.spec.ts b/site/gatsby-site/playwright/e2e-full/submit.spec.ts
@@ -1535,4 +1535,187 @@ 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 show an error for inputs with two or fewer characters in developers, deployers, harmed_parties, and implicated_systems', async ({ page }) => {
+    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('ab');
+    await page.keyboard.press('Enter');
+    await expect(page.locator('text=Each alleged Developer must have at least 3 characters and less than 200')).toBeVisible();
+    await page.locator('[data-testid="developers-input"] .rbt-close').click();
+
+    await page.locator('input[name="developers"]').fill('NewDev');
+    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('cd');
+    await page.keyboard.press('Enter');
+    await expect(page.locator('text=Each alleged Deployer must have at least 3 characters and less than 200')).toBeVisible();
+    await page.locator('[data-testid="deployers-input"] .rbt-close').click();
+
+    await page.locator('input[name="deployers"]').fill('NewDep');
+    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('ef');
+    await page.keyboard.press('Enter');
+    await expect(page.locator('text=Each alleged Harmed parties must have at least 3 characters and less than 200')).toBeVisible();
+    await page.locator('[data-testid="harmed_parties-input"] .rbt-close').click();
+
+    await page.locator('input[name="harmed_parties"]').fill('NewHarmed');
+    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('gh');
+    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')).toBeVisible();
+    await page.locator('[data-testid="implicated_systems-input"] .rbt-close').click();
+
+    await page.locator('input[name="implicated_systems"]').fill('NewSystem');
+    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();
+
+    // Check for "New selection" behavior
+    await page.locator('input[name="developers"]').fill('xy');
+    await page.locator('#developers-tags .dropdown-item:has-text("New selection: xy")').click();
+    await expect(page.locator('text=Each alleged Developer must have at least 3 characters and less than 200')).toBeVisible();
+    await page.locator('div').filter({ hasText: /^xy×Remove$/ }).getByLabel('Remove').click();
+
+    await page.locator('input[name="developers"]').fill('ValidDev');
+    await page.locator('#developers-tags .dropdown-item:has-text("New selection: ValidDev")').click();
+    await expect(page.locator('text=Each alleged Developer must have at least 3 characters and less than 200')).not.toBeVisible();
+
+    // Submit to ensure the form does not proceed with errors
+    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();
+  });
+
+  test('Should show an error for inputs with 200 or more characters 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 test input text is designed to have precisely two hundred characters total so it works perfectly for checking HTML input validation to ensure that anything this length or longer should show error');
+    await page.keyboard.press('Enter');
+    await expect(page.locator('text=Each alleged Developer must have at least 3 characters and less than 200')).toBeVisible();
+    await page.locator('[data-testid="developers-input"] .rbt-close').click();
+
+    await page.locator('input[name="developers"]').fill('NewDev');
+    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 test input text is designed to have precisely two hundred characters total so it works perfectly for checking HTML input validation to ensure that anything this length or longer should show error');
+    await page.keyboard.press('Enter');
+    await expect(page.locator('text=Each alleged Deployer must have at least 3 characters and less than 200')).toBeVisible();
+    await page.locator('[data-testid="deployers-input"] .rbt-close').click();
+
+    await page.locator('input[name="deployers"]').fill('NewDep');
+    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 test input text is designed to have precisely two hundred characters total so it works perfectly for checking HTML input validation to ensure that anything this length or longer should show error');
+    await page.keyboard.press('Enter');
+    await expect(page.locator('text=Each alleged Harmed parties must have at least 3 characters and less than 200')).toBeVisible();
+    await page.locator('[data-testid="harmed_parties-input"] .rbt-close').click();
+
+    await page.locator('input[name="harmed_parties"]').fill('NewHarmed');
+    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 test input text is designed to have precisely two hundred characters total so it works perfectly for checking HTML input validation to ensure that anything this length or longer should show error');
+    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')).toBeVisible();
+    await page.locator('[data-testid="implicated_systems-input"] .rbt-close').click();
+
+    await page.locator('input[name="implicated_systems"]').fill('NewSystem');
+    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();
+
+    // Check for "New selection" behavior
+    await page.locator('input[name="developers"]').fill('This test input text is designed to have precisely two hundred characters total so it works perfectly for checking HTML input validation to ensure that anything this length or longer should show error');
+    await page.locator('#developers-tags .dropdown-item:has-text("New selection: This test input text is designed to have precisely two hundred characters total so it works perfectly for checking HTML input validation to ensure that anything this length or longer should show error")').click();
+    await expect(page.locator('text=Each alleged Developer must have at least 3 characters and less than 200')).toBeVisible();
+    await page.locator('div').filter({ hasText: /^This test input text is designed to have precisely two hundred characters total so it works perfectly for checking HTML input validation to ensure that anything this length or longer should show error×Remove$/ }).getByLabel('Remove').click();
+
+    await page.locator('input[name="developers"]').fill('ValidDev');
+    await page.locator('#developers-tags .dropdown-item:has-text("New selection: ValidDev")').click();
+    await expect(page.locator('text=Each alleged Developer must have at least 3 characters and less than 200')).not.toBeVisible();
+
+    // Submit to ensure the form does not proceed with errors
+    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();
+  });
+
+
 });
diff --git a/site/gatsby-site/src/components/forms/SubmissionWizard/FieldContainer.js b/site/gatsby-site/src/components/forms/SubmissionWizard/FieldContainer.js
@@ -1,5 +1,9 @@
 import React from 'react';
 
-export default function FieldContainer({ className = '', children }) {
-  return <div className={`my-6 first:mt-1 ${className}`}>{children}</div>;
+export default function FieldContainer({ className = '', children, ...props }) {
+  return (
+    <div className={`my-6 first:mt-1 ${className}`} {...props}>
+      {children}
+    </div>
+  );
 }