[Task] Get linter working in CI as a Github action (#1037)

[Short description explaining the high-level reason for the pull
request]

## Changes

- Refactored existing workflows to be callable from new main workflows
- Added an action for setting envars from a .env file
- Added new jobs for each type of lint: prettier, tsc, eslint, and
stylelint
- Added dependency caching so that the yarn cache doesn't have to be
rebuilt every time
- Added comments to disable lint errors in places to be reevaluated as a
part of a follow on ticket
- Applied prettier formatting to whole project

## How to test this PR

1. Verify that the linters are running against this PR as actions
2. Verify that the PR is green

## How to test this PR (Optional)

1. Make sure other repos are up to date
3. Pull this branch for the sbl-frontend project
4. Restart the stack as necessary
5. Run the e2e tests and verify that they pass

.eslintrc.json

@@ -6,6 +6,9 @@
     "es2021": true
   },
   "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": ["./tsconfig.json"]
+  },
   "plugins": ["react-prefer-function-component"],
   "extends": [
     "eslint:all",

.github/actions/setvars/action.yml

@@ -0,0 +1,13 @@
+name: 'Set environment variables'
+description: 'Configures environment variables for a workflow'
+inputs:
+  varFilePath:
+    description: 'File path to variable file or directory. Defaults to ./.github/variables/* if none specified and runs against each file in that directory.'
+    required: false
+    default: ./.github/variables/.env
+runs:
+  using: "composite"
+  steps:
+    - run: |
+        sed "" ${{ inputs.varFilePath }} >> $GITHUB_ENV
+      shell: bash

.github/variables/.env

@@ -0,0 +1,23 @@
+SBL_DEV_PORT="8899"
+SBL_OIDC_AUTHORITY="http://localhost:8880/realms/regtech"
+SBL_OIDC_CLIENT_ID="regtech-client"
+SBL_OIDC_REDIRECT_URI="http://localhost:${SBL_DEV_PORT}/filing"
+SBL_REGTECH_BASE_URL="http://localhost:8881"
+SBL_MAIL_BASE_URL="http://localhost:8765"
+SBL_FILING_BASE_URL="http://localhost:8882"
+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_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/.pre.yml

@@ -0,0 +1,45 @@
+name: .Pre
+
+on:
+  workflow_call:
+
+jobs:
+  check:
+    name: Check Cache
+    runs-on: ubuntu-latest
+    outputs:
+      should-pull: ${{ steps.check.outputs.should-pull }}
+    env:
+      GH_TOKEN: ${{ github.token }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: check cache
+        id: check
+        run: | 
+          CACHE_LIST=$(gh cache list)
+          if [[ ! -z "$CACHE_LIST" ]]; then
+            # echo "$CACHE_LIST" | awk 'NR==1{print $1}'
+            echo "Cache already exists. Skipping dependencies"
+            echo "should-pull=false" >> $GITHUB_OUTPUT
+          else 
+            echo "should-pull=true" >> $GITHUB_OUTPUT
+          fi
+        shell: bash
+
+  dependencies:
+    name: Pull Dependencies
+    runs-on: ubuntu-latest
+    needs: check
+    if: needs.check.outputs.should-pull == 'true'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+          cache-dependency-path: ./yarn.lock
+      - name: Clean Yarn cache
+        run: yarn cache clean
+      - name: Install dependencies
+        run: yarn
+

.github/workflows/codeql.yml

@@ -12,10 +12,13 @@
 name: "CodeQL"
 
 on:
+  workflow_call:
   push:
-    branches: [ "main", "preview" ]
+    # branches: [ "main", "preview" ]
+    branches: [ "preview" ]
   pull_request:
-    branches: [ "main", "preview" ]
+    # branches: [ "main", "preview" ]
+    branches: [ "preview" ]
   schedule:
     - cron: '45 9 * * 4'
 

.github/workflows/lint.yml

@@ -0,0 +1,89 @@
+name: Lint
+
+on:
+  workflow_call:
+  # push:
+  #   branches: [main]
+  # pull_request:
+  #   branches: [main]
+
+jobs:
+  prettier:
+    name: Prettier
+    runs-on: ubuntu-latest
+    steps:
+      # - uses: ./.github/actions/setvars
+
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+          cache-dependency-path: ./yarn.lock
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run Prettier
+        run: yarn run-prettier
+
+  tsc:
+    name: TSC
+    runs-on: ubuntu-latest
+    steps:
+      # - uses: ./.github/actions/setvars
+
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+          cache-dependency-path: ./yarn.lock
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run Linter
+        run: yarn run-tsc
+
+  eslint:
+    name: ESLint
+    runs-on: ubuntu-latest
+    steps:
+      # - uses: ./.github/actions/setvars
+
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+          cache-dependency-path: ./yarn.lock
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run Linter
+        run: yarn run-eslint
+
+  stylelint:
+    name: StyleLint
+    runs-on: ubuntu-latest
+    steps:
+      # - uses: ./.github/actions/setvars
+
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+          cache-dependency-path: ./yarn.lock
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run Linter
+        run: yarn run-stylelint

.github/workflows/pull_request.yml

@@ -0,0 +1,28 @@
+name: Pull Request
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  call-pre:
+    name: .Pre
+    uses: ./.github/workflows/.pre.yml
+
+  call-lint:
+    name: Lint
+    uses: ./.github/workflows/lint.yml
+    needs: call-pre
+
+  call-test:
+    name: Test
+    if: ${{ always() }}
+    uses: ./.github/workflows/test.yml
+    needs: call-lint
+
+  call-codeql:
+    name: CodeQL
+    if: ${{ always() }}
+    uses: ./.github/workflows/codeql.yml
+    needs: call-lint
+

.github/workflows/push.yml

@@ -0,0 +1,28 @@
+name: Push
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  call-pre:
+    name: .Pre
+    uses: ./.github/workflows/.pre.yml
+
+  call-lint:
+    name: Lint
+    uses: ./.github/workflows/lint.yml
+    needs: call-pre
+
+  call-test:
+    name: Test
+    if: ${{ always() }}
+    uses: ./.github/workflows/test.yml
+    needs: call-lint
+
+  call-codeql:
+    name: CodeQL
+    if: ${{ always() }}
+    uses: ./.github/workflows/codeql.yml
+    needs: call-lint
+

.github/workflows/test.yml

@@ -1,64 +1,38 @@
 name: Test
 
 on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-env:
-  SBL_DEV_PORT: "8899"
-  SBL_OIDC_AUTHORITY: "http://localhost:8880/realms/regtech"
-  SBL_OIDC_CLIENT_ID: "regtech-client"
-  SBL_OIDC_REDIRECT_URI: "http://localhost:${SBL_DEV_PORT}/filing"
-  SBL_REGTECH_BASE_URL: "http://localhost:8881"
-  SBL_MAIL_BASE_URL: "http://localhost:8765"
-  SBL_FILING_BASE_URL: "http://localhost:8882"
-  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_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"
+  workflow_call:
 
 jobs:
-  React:
+  react:
+    name: React
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v4
-
+      - uses: ./.github/actions/setvars
       - uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
+          cache: 'yarn'
+          cache-dependency-path: ./yarn.lock
 
-      - name: Clean Yarn cache
-        run: yarn cache clean
-
       - name: Install dependencies
         run: yarn
 
       - name: Run React tests
         run: yarn test:ci
-  Cypress:
-    runs-on: ubuntu-latest
 
+  cypress:
+    name: Cypress
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-
+      - uses: ./.github/actions/setvars
       - uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
+          cache: 'yarn'
+          cache-dependency-path: ./yarn.lock
 
       - name: Install dependencies
         run: yarn

buildspec.yml

@@ -7,14 +7,14 @@ env:
     IMAGE_SCANNER_SECRET: cfpb/team/regtech/image-scanner-creds
     SMTP_CREDS_SECRET: cfpb/team/regtech/smtp-ses-creds
   secrets-manager:
-    EMAIL_TO: "${CONTACTS_SECRET}:developers_all"
-    IMAGE_SCANNER_URL: "${IMAGE_SCANNER_SECRET}:url"
-    IMAGE_SCANNER_USERNAME: "${IMAGE_SCANNER_SECRET}:username"
-    IMAGE_SCANNER_PASSWORD: "${IMAGE_SCANNER_SECRET}:password"
-    SMTP_HOST: "${SMTP_CREDS_SECRET}:mail_server"
-    SMTP_PORT: "${SMTP_CREDS_SECRET}:smtp_port"
-    SMTP_USERNAME: "${SMTP_CREDS_SECRET}:username"
-    SMTP_PASSWORD: "${SMTP_CREDS_SECRET}:password"
+    EMAIL_TO: '${CONTACTS_SECRET}:developers_all'
+    IMAGE_SCANNER_URL: '${IMAGE_SCANNER_SECRET}:url'
+    IMAGE_SCANNER_USERNAME: '${IMAGE_SCANNER_SECRET}:username'
+    IMAGE_SCANNER_PASSWORD: '${IMAGE_SCANNER_SECRET}:password'
+    SMTP_HOST: '${SMTP_CREDS_SECRET}:mail_server'
+    SMTP_PORT: '${SMTP_CREDS_SECRET}:smtp_port'
+    SMTP_USERNAME: '${SMTP_CREDS_SECRET}:username'
+    SMTP_PASSWORD: '${SMTP_CREDS_SECRET}:password'
 
 phases:
   install:

e2e/test-data/point-of-contact/point-of-contact-data-1.json

@@ -11,4 +11,4 @@
   "phone_number": "555-555-5555",
   "phone_ext": "8942",
   "email": "[email protected]"
-}
+}

e2e/utils/createDomainAssociation.ts

@@ -21,7 +21,12 @@ export default async function createDomainAssociation({
   try {
     await axios.request(optionsForDomainAssociation);
   } catch (error) {
-    console.error('error when creating a domain/institution association :>> ', error);
+    // Part of evaluation for linter issues see: https://github.com/cfpb/sbl-frontend/issues/1039
+    // eslint-disable-next-line no-console
+    console.error(
+      'error when creating a domain/institution association :>>',
+      error,
+    );
     throw error;
   }
 }

e2e/utils/createInstitution.ts

@@ -40,7 +40,7 @@ export default async function createInstitution({
       parent_rssd_id: 12_745,
       top_holder_lei: '01274TOPHOLDERLEI123',
       top_holder_legal_name: 'TOP HOLDER LEI 123',
-      top_holder_rssd_id: 123456,
+      top_holder_rssd_id: 123_456,
     },
     // eslint-enable @typescript-eslint/no-magic-numbers unicorn/numeric-separators-style
   };