Merge branch 'main' into 1013-institution_profile-language_and_error

.env.example

@@ -9,4 +9,15 @@ SBL_LOGOUT_REDIRECT_URL=""
 SBL_VALIDATION_TIMEOUT_SECONDS="1200"
 SBL_LONGPOLLING_DELAY_SECONDS="backoff"
 SBL_UPLOAD_FILE_SIZE_LIMIT_BYTES="50000000"
-SBL_ENABLE_PLAYWRIGHT_TEST_SETTINGS="false"
+SBL_ENABLE_PLAYWRIGHT_TEST_SETTINGS="false"
+SBL_PLAYWRIGHT_TEST_TARGET="http://localhost:8899"
+SBL_PLAYWRIGHT_TEST_KC_TARGET="http://localhost:8880/"
+SBL_PLAYWRIGHT_TEST_KC_REALM="regtech"
+SBL_PLAYWRIGHT_TEST_KC_CLI_USERNAME="admin"
+SBL_PLAYWRIGHT_TEST_KC_CLI_CLIENT_ID="admin-cli"
+SBL_PLAYWRIGHT_TEST_KC_CLI_CLIENT_SECRET="local_test_only"
+SBL_PLAYWRIGHT_TEST_KC_CLI_GRANT_TYPE="client_credentials"
+SBL_PLAYWRIGHT_TEST_KC_ADMIN_USERNAME="admin1"
+SBL_PLAYWRIGHT_TEST_KC_ADMIN_PASSWORD="admin"
+SBL_PLAYWRIGHT_TEST_KC_ADMIN_CLIENT_ID="regtech-client"
+SBL_PLAYWRIGHT_TEST_KC_ADMIN_GRANT_TYPE="password"

.github/workflows/test.yml

@@ -19,6 +19,17 @@ env:
   SBL_LONGPOLLING_DELAY_SECONDS: "backoff"
   SBL_UPLOAD_FILE_SIZE_LIMIT_BYTES: "50000000"
   SBL_ENABLE_PLAYWRIGHT_TEST_SETTINGS: "false"
+  SBL_PLAYWRIGHT_TEST_TARGET: "http://localhost:8899"
+  SBL_PLAYWRIGHT_TEST_KC_TARGET: "http://localhost:8880/"
+  SBL_PLAYWRIGHT_TEST_KC_REALM: "regtech"
+  SBL_PLAYWRIGHT_TEST_KC_CLI_USERNAME: "admin"
+  SBL_PLAYWRIGHT_TEST_KC_CLI_CLIENT_ID: "admin-cli"
+  SBL_PLAYWRIGHT_TEST_KC_CLI_CLIENT_SECRET: "local_test_only"
+  SBL_PLAYWRIGHT_TEST_KC_CLI_GRANT_TYPE: "client_credentials"
+  SBL_PLAYWRIGHT_TEST_KC_ADMIN_USERNAME: "admin1"
+  SBL_PLAYWRIGHT_TEST_KC_ADMIN_PASSWORD: "admin"
+  SBL_PLAYWRIGHT_TEST_KC_ADMIN_CLIENT_ID: "regtech-client"
+  SBL_PLAYWRIGHT_TEST_KC_ADMIN_GRANT_TYPE: "password"
 
 jobs:
   React:

ENV-GUIDE.md

@@ -17,6 +17,17 @@ SBL_VALIDATION_TIMEOUT_SECONDS="1200"
 SBL_LONGPOLLING_DELAY_SECONDS="backoff"
 SBL_UPLOAD_FILE_SIZE_LIMIT_BYTES="50000000"
 SBL_ENABLE_PLAYWRIGHT_TEST_SETTINGS="false"
+SBL_PLAYWRIGHT_TEST_TARGET="http://localhost:8899"
+SBL_PLAYWRIGHT_TEST_KC_TARGET="http://localhost:8880/"
+SBL_PLAYWRIGHT_TEST_KC_REALM="regtech"
+SBL_PLAYWRIGHT_TEST_KC_CLI_USERNAME="admin"
+SBL_PLAYWRIGHT_TEST_KC_CLI_CLIENT_ID="admin-cli"
+SBL_PLAYWRIGHT_TEST_KC_CLI_CLIENT_SECRET="local_test_only"
+SBL_PLAYWRIGHT_TEST_KC_CLI_GRANT_TYPE="client_credentials"
+SBL_PLAYWRIGHT_TEST_KC_ADMIN_USERNAME="admin1"
+SBL_PLAYWRIGHT_TEST_KC_ADMIN_PASSWORD="admin"
+SBL_PLAYWRIGHT_TEST_KC_ADMIN_CLIENT_ID="regtech-client"
+SBL_PLAYWRIGHT_TEST_KC_ADMIN_GRANT_TYPE="password"
 ```
 
 ### To add a new environment variable

e2e/example.spec.demo.ts

@@ -68,14 +68,14 @@ test('proof of concept', async ({ page }) => {
     await expect(page.locator('h1')).toContainText('Review warnings');
   });
 
-  await test.step('Review warnings: navigate to Provide point of contact', async () => {
+  await test.step('Review warnings: navigate to Provide filing details', async () => {
     await page.getByText('I verify the accuracy of').click();
     await page.getByRole('button', { name: 'Continue to next step' }).click();
-    await expect(page.locator('h1')).toContainText('Provide point of contact');
+    await expect(page.locator('h1')).toContainText('Provide filing details');
   });
 
-  await test.step('Provide point of contact: navigate to Sign and submit', async () => {
-    await test.step('Provide point of contact: fill out form', async () => {
+  await test.step('Provide filing details: navigate to Sign and submit', async () => {
+    await test.step('Provide filing details: fill out form', async () => {
       await page.getByLabel('First name').fill(pointOfContactJson.first_name);
       await page.getByLabel('Last name').fill(pointOfContactJson.last_name);
       await page
@@ -107,7 +107,7 @@ test('proof of concept', async ({ page }) => {
         .getByLabel('ZIP codeZIP code must be in')
         .fill(pointOfContactJson.hq_address_zip);
     });
-    await test.step('Provide point of contact: continue to next step', async () => {
+    await test.step('Provide filing details: continue to next step', async () => {
       await page.getByRole('button', { name: 'Continue to next step' }).click();
       await expect(page.locator('h1')).toContainText('Sign and submit');
     });

e2e/fixtures/testFixture.ts

@@ -322,12 +322,10 @@ export const test = baseTest.extend<{
     use,
   ) => {
     navigateToReviewWarningsAfterOnlyWarningsUpload;
-    await test.step('Review warnings: navigate to Provide point of contact', async () => {
+    await test.step('Review warnings: navigate to Provide filing details', async () => {
       await page.getByText('I verify the accuracy of').click();
       await clickContinueNext(test, page);
-      await expect(page.locator('h1')).toContainText(
-        'Provide point of contact',
-      );
+      await expect(page.locator('h1')).toContainText('Provide filing details');
     });
     await use(page);
   },
@@ -337,8 +335,8 @@ export const test = baseTest.extend<{
     use,
   ) => {
     navigateToProvidePointOfContact;
-    await test.step('Provide point of contact: navigate to Sign and submit', async () => {
-      await test.step('Provide point of contact: fill out form', async () => {
+    await test.step('Provide filing details: navigate to Sign and submit', async () => {
+      await test.step('Provide filing details: fill out form', async () => {
         await page.getByLabel('First name').fill(pointOfContactJson.first_name);
         await page.getByLabel('Last name').fill(pointOfContactJson.last_name);
         await page
@@ -370,7 +368,7 @@ export const test = baseTest.extend<{
           .getByLabel('ZIP codeZIP code must be in')
           .fill(pointOfContactJson.hq_address_zip);
       });
-      await test.step('Provide point of contact: continue to next step', async () => {
+      await test.step('Provide filing details: continue to next step', async () => {
         await clickContinueNext(test, page);
         await expect(page.locator('h1')).toContainText('Sign and submit');
       });

e2e/pages/filing-app/filing-step-routing/pointOfContact.spec.ts

@@ -7,7 +7,7 @@ const currentStepPath = '/contact';
 
 const userShouldNotAccess = ['/submit'];
 
-const afterRedirectHeading = 'Provide point of contact';
+const afterRedirectHeading = 'Provide filing details';
 const afterRedirectURL = /.*\/contact$/;
 
 test(testLabel, async ({ page, navigateToProvidePointOfContact }) => {

e2e/pages/filing-app/formAlerts.spec.ts

@@ -189,7 +189,7 @@ test('Form Alerts', async ({
   // Point of contact page
   await test.step('Point of contact page', async () => {
     await expect(page.locator('h1'), 'h1 is correct').toContainText(
-      'Provide point of contact',
+      'Provide filing details',
     );
 
     // Submit Incomplete form
@@ -199,13 +199,14 @@ test('Form Alerts', async ({
         page.locator('.m-notification__error'),
         'Error alert is visible',
       ).toContainText(
-        'There was a problem updating your point of contact informationEnter the first name of the point of contactEnter the last name of the point of contactEnter the phone number of the point of contactEnter a valid phone extensionEnter the email address of the point of contactEnter the street address of the point of contactEnter the city of the point of contactSelect the state or territory of the point of contactEnter the ZIP code of the point of contact',
+        'There was a problem updating your filing detailsEnter the first name of the point of contactEnter the last name of the point of contactEnter the phone number of the point of contactEnter the email address of the point of contactEnter the street address of the point of contactEnter the city of the point of contactSelect the state or territory of the point of contactEnter the ZIP code of the point of contact',
       );
     });
 
     // Submit Completed form
     await test.step('Submit Completed form', async () => {
       await test.step('Complete form', async () => {
+        await page.getByText('Voluntary reporter', { exact: true }).click();
         await page.getByLabel('First name').fill('Playwright');
         await page.getByLabel('Last name').fill('Test');
         await page.getByLabel('Phone number').fill('555-555-5555');

e2e/pages/filing-app/point-of-contact/checkPocFormErrors.spec.ts

@@ -22,7 +22,7 @@ test('Point of Contact: Checking for form errors based on user input', async ({
   await test.step('Point of Contact: Check that the error header render when no input is filled', async () => {
     await clickContinueNext(test, page);
     await expect(
-      page.locator('#PointOfContactFormErrors div').first(),
+      page.locator('#FilingDetailsFormErrors div').first(),
     ).toBeVisible();
   });
 
@@ -39,10 +39,10 @@ test('Point of Contact: Checking for form errors based on user input', async ({
     await expect(page.locator('form')).toContainText(
       'The last name must not contain invalid characters',
     );
-    await expect(page.locator('#PointOfContactFormErrors')).toContainText(
+    await expect(page.locator('#FilingDetailsFormErrors')).toContainText(
       'The first name must not contain invalid characters',
     );
-    await expect(page.locator('#PointOfContactFormErrors')).toContainText(
+    await expect(page.locator('#FilingDetailsFormErrors')).toContainText(
       'The last name must not contain invalid characters',
     );
   });
@@ -57,7 +57,7 @@ test('Point of Contact: Checking for unicode tolerance based on user input', asy
   await test.step('Point of Contact: Check that the error header render when no input is filled', async () => {
     await clickContinueNext(test, page);
     await expect(
-      page.locator('#PointOfContactFormErrors div').first(),
+      page.locator('#FilingDetailsFormErrors div').first(),
     ).toBeVisible();
   });
 
@@ -154,13 +154,13 @@ test('Point of Contact: Checking for unicode tolerance based on user input', asy
 
     await clickContinueNext(test, page);
 
-    await expect(page.locator('#PointOfContactFormErrors')).toContainText(
+    await expect(page.locator('#FilingDetailsFormErrors')).toContainText(
       'Enter a valid phone number',
     );
-    await expect(page.locator('#PointOfContactFormErrors')).toContainText(
+    await expect(page.locator('#FilingDetailsFormErrors')).toContainText(
       'Enter a valid email address',
     );
-    await expect(page.locator('#PointOfContactFormErrors')).toContainText(
+    await expect(page.locator('#FilingDetailsFormErrors')).toContainText(
       'Enter a valid ZIP code',
     );
 

e2e/pages/filing-app/unavailableApis.spec.ts

@@ -108,10 +108,10 @@ test('Blocking API Calls - Error Boundaries', async ({
     });
   });
 
-  // Provide point of contact page
-  await test.step('Provide point of contact page', async () => {
+  // Provide filing details page
+  await test.step('Provide filing details page', async () => {
     await verifyApiBlockThenUnblock({
-      expectedHeading: 'Provide point of contact',
+      expectedHeading: 'Provide filing details',
       endpointPath: '**/v1/admin/me/',
       endpointLabel: '/v1/admin/me',
       page,

e2e/utils/authConstants.ts

@@ -0,0 +1,43 @@
+import type { GrantTypes } from '@keycloak/keycloak-admin-client/lib/utils/auth';
+
+export interface KeycloakCLIConfig {
+  username: string;
+  clientId: string;
+  clientSecret: string;
+  grantType: GrantTypes;
+}
+
+export interface KeycloakAdminConfig {
+  username: string;
+  password: string;
+  clientId: string;
+  grantType: GrantTypes;
+}
+
+export interface KeycloakConfig {
+  target: string;
+  realm: string;
+  admin: KeycloakAdminConfig;
+  cli: KeycloakCLIConfig;
+}
+
+export const config: KeycloakConfig = {
+  target: process.env.SBL_PLAYWRIGHT_TEST_KC_TARGET ?? 'http://localhost:8880/',
+  realm: process.env.SBL_PLAYWRIGHT_TEST_KC_REALM ?? 'regtech',
+  admin: {
+    username: process.env.SBL_PLAYWRIGHT_TEST_KC_ADMIN_USERNAME ?? 'admin1',
+    password: process.env.SBL_PLAYWRIGHT_TEST_KC_ADMIN_PASSWORD ?? 'admin',
+    clientId:
+      process.env.SBL_PLAYWRIGHT_TEST_KC_ADMIN_CLIENT_ID ?? 'regtech-client',
+    grantType: (process.env.SBL_PLAYWRIGHT_TEST_KC_ADMIN_GRANT_TYPE ??
+      'password') as GrantTypes,
+  },
+  cli: {
+    username: process.env.SBL_PLAYWRIGHT_TEST_KC_CLI_USERNAME ?? 'admin',
+    clientSecret:
+      process.env.SBL_PLAYWRIGHT_TEST_KC_CLI_CLIENT_SECRET ?? 'local_test_only',
+    clientId: process.env.SBL_PLAYWRIGHT_TEST_KC_CLI_CLIENT_ID ?? 'admin-cli',
+    grantType: (process.env.SBL_PLAYWRIGHT_TEST_KC_CLI_GRANT_TYPE ??
+      'client_credentials') as GrantTypes,
+  },
+};

e2e/utils/createKeycloakUser.ts

@@ -1,19 +1,20 @@
 import { KeycloakAdminClient } from '@s3pweb/keycloak-admin-client-cjs';
+import { config } from './authConstants';
 
 export class KeycloakService {
   private readonly kcAdminClient: KeycloakAdminClient;
 
   constructor() {
     this.kcAdminClient = new KeycloakAdminClient({
-      baseUrl: 'http://localhost:8880/',
-      realmName: 'regtech',
+      baseUrl: config.target,
+      realmName: config.realm,
     });
   }
 }
 
 const kcAdminClient = new KeycloakAdminClient({
-  baseUrl: 'http://localhost:8880/',
-  realmName: 'regtech',
+  baseUrl: config.target,
+  realmName: config.realm,
 });
 
 interface CreateKeycloakUserProperties {
@@ -35,10 +36,10 @@ export default async function createKeycloakUser({
   // Authorize with username / password
   try {
     await kcAdminClient.auth({
-      username: 'admin',
-      clientId: 'admin-cli',
-      clientSecret: 'local_test_only',
-      grantType: 'client_credentials',
+      username: config.cli.username,
+      clientId: config.cli.clientId,
+      clientSecret: config.cli.clientSecret,
+      grantType: config.cli.grantType,
     });
   } catch (error) {
     // eslint-disable-next-line no-console

e2e/utils/getKeycloakToken.ts

@@ -1,23 +1,27 @@
 import axios from 'axios';
+import { config } from './authConstants';
 
 export default async function getAdminKeycloakToken(): Promise<string> {
   const encodedParameters = new URLSearchParams();
-  encodedParameters.set('username', 'admin1');
-  encodedParameters.set('password', 'admin');
-  encodedParameters.set('grant_type', 'password');
-  encodedParameters.set('client_id', 'regtech-client');
+  encodedParameters.set('username', config.admin.username);
+  encodedParameters.set('password', config.admin.password);
+  encodedParameters.set('grant_type', config.admin.grantType);
+  encodedParameters.set('client_id', config.admin.clientId);
 
   const optionsForGetAdminKeycloakToken = {
     method: 'POST',
-    url: 'http://localhost:8880/realms/regtech/protocol/openid-connect/token',
+    url: `${config.target}/realms/${config.realm}/protocol/openid-connect/token`,
     data: encodedParameters,
   };
   try {
     const { data } = await axios.request(optionsForGetAdminKeycloakToken);
     return data.access_token as string;
   } catch (error) {
     // eslint-disable-next-line no-console
-    console.log('error when trying to fetch an admin token from keycloak :>> ', error);
+    console.log(
+      'error when trying to fetch an admin token from keycloak :>> ',
+      error,
+    );
     throw error;
   }
 }

package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.2.0",
     "@playwright/test": "^1.45.0",
-    "@tanstack/react-query": "4.29.7",
+    "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-table": "^8.9.1",
     "axios": "^1.7.4",
     "byte-size": "^8.1.1",
@@ -52,7 +52,7 @@
     "react-keycloak-js": "^1.0.3",
     "react-markdown": "^9.0.1",
     "react-oidc-context": "^3.1.0",
-    "react-router-dom": "6.11.1",
+    "react-router-dom": "^6.11.1",
     "react-scroll": "^1.8.9",
     "react-select": "^5.7.4",
     "vite-plugin-svgr": "^3.2.0",

playwright.config.ts

@@ -36,7 +36,9 @@ const config: PlaywrightTestConfig = {
   },
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-    baseURL: 'http://localhost:8899/',
+    baseURL: `${
+      process.env.SBL_PLAYWRIGHT_TEST_TARGET ?? 'http://localhost:8899'
+    }/`,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',

src/App.tsx

@@ -149,7 +149,7 @@ function BasicLayout(): Promise<void> | ReactElement {
         <SkipNav />
         {/* TODO: Move this component to the DSR for other teams' use */}
         {/* See: https://github.com/cfpb/design-system-react/issues/352 */}
-        <div className='o-banner'>
+        <div className='o-banner pl-[0.9375rem] pr-[0.9375rem]'>
           <div className='wrapper wrapper__match-content'>
             <Alert
               message='This is a beta for the Small Business Lending Data Filing Platform'
@@ -290,6 +290,7 @@ export default function App(): ReactElement {
                       </InstitutionProtectedRoute>
                     </ProtectedRoute>
                   }
+                  // eslint-disable-next-line react/no-array-index-key
                   key={index}
                 />
               ))}