Frontend/feature flags (#1114)

### Requirements List
- **New .env variables:**
    - `VUE_APP_ENV=local`
- `VUE_APP_STATSIG_KEY=<get from Statsig account: Settings -> Keys &
Environments -> Client API Keys>`
- **New dependencies**
    - `yarn install --ignore-engines`

### Description List
- Added new env vars for app environment and Statsig key
- Updated the EnvConfig plugin to handle new env vars
- Updated README for new env vars + some general env var doc cleanup
- Added Statsig package dependencies
- Add a Statsig plugin to allow injecting the Statsig client into
components
- Initialize Statsig client in `main.ts`
- Handle Statsig user change in login & logout flows
- Don't allow Statsig init to block loading for more than 2 seconds
- Add a polling process to periodically refetch the Statsig gate config
from the server
- Add full examples of feature gate usage to the Styelguide example
components
- Inject feature checking Statsig client into some models
- Updated CSP Lambda with Statsig domains
- Fix some existing transient errors in the tests related to the
LicenseeList & Sorting components

### Testing List
- `yarn test:unit:all` should run without errors or warnings
- `yarn serve` should run without errors or warnings
- `yarn build` should run without errors or warnings
- For API configuration changes: CDK tests added/updated in
`backend/compact-connect/tests/unit/test_api.py`
- Code review
- Testing
- On launching the app in the browser, explore the dev tools Network tab
to ensure calls to Statsig domains are successful
- _Note that Statsig uses a variety of different root domains - seen in
the CSP Lambda updates_
- Navigate the app to make sure things are generally stable and there
are no indications of regressions or Statsig-related issues
- Navigate to the `/Styleguide` page and scroll to the bottom to see the
Example Feature Gates section
- All of the different flag evaluations should be in the expected
Enabled / Disabled state depending on the state of the flag(s) in
Statsig
- Go to the Statsig web console and update the toggle status of the
flag(s)
        - Back in the Styleguide page, either:
- Wait for the Statsig refresh timer in App.ts, then navigate away and
back to the Styleguide page, or
            - Refresh the Styleguide page
- Either case should result in the Styleguide flag evaluations being
updated to the new state (Enabled / Disabled)

Closes #1094 


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- New Features
- Integrated feature flags and analytics; added Example Feature Gates to
the Style Guide.
- App initializes analytics and updates user periodically; clears
analytics user on logout.
  - Added new translations for feature gate labels.

- Bug Fixes
  - Improved sorting to avoid errors when no callback is provided.

- Style
- Minor UI refinements adding rr-block styling across forms, cards, and
confirmation views.

- Documentation
  - Updated environment variable guidance and setup instructions.

- Tests
- Added tests for feature flags plugin and Example Feature Gates;
updated test helpers.

- Chores
- Updated CI/CD, deployment configs, CSP allowlist, and added analytics
dependencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: jsandoval81

.github/workflows/check-webroot.yml

@@ -17,6 +17,11 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+# Permission can be added at job level or workflow level
+permissions:
+  id-token: write   # This is required for requesting the JWT
+  contents: read    # This is required for actions/checkout
+
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
   CheckWebroot:
@@ -78,6 +83,7 @@ jobs:
         env:
           NODE_ENV: production
           BASE_URL: ${{ env.BASE_URL }}
+          VUE_APP_ENV: production
           VUE_APP_DOMAIN: ${{ env.VUE_APP_DOMAIN }}
           VUE_APP_ROBOTS_META: ${{ env.VUE_APP_ROBOTS_META }}
           VUE_APP_API_STATE_ROOT: ${{ env.VUE_APP_API_STATE_ROOT }}
@@ -88,5 +94,6 @@ jobs:
           VUE_APP_COGNITO_AUTH_DOMAIN_LICENSEE: ${{ env.VUE_APP_COGNITO_AUTH_DOMAIN_LICENSEE }}
           VUE_APP_COGNITO_CLIENT_ID_LICENSEE: ${{ env.VUE_APP_COGNITO_CLIENT_ID_LICENSEE }}
           VUE_APP_RECAPTCHA_KEY: ${{ env.VUE_APP_RECAPTCHA_KEY }}
+          VUE_APP_MOCK_API: true
         run: yarn build
         working-directory: ./webroot

backend/compact-connect-ui-app/cdk.context.beta-example.json

@@ -13,7 +13,9 @@
         "region": "us-east-1",
         "domain_name": "beta.compactconnect.org",
         "recaptcha_public_key": "123-KFEUsjehfuejILDVUKkRnAF9SSzb8o9uv5lY7Ih",
-        "robots_meta": "noindex,nofollow"
+        "robots_meta": "noindex,nofollow",
+        "statsig_key": "client-KFEUsjehfuejILDVUKkRnAF9SSzb8o9uv5lY7Ih",
+        "app_env": "beta"
       }
     }
   }

backend/compact-connect-ui-app/cdk.context.prod-example.json

@@ -13,7 +13,9 @@
         "region": "us-east-1",
         "domain_name": "compactconnect.org",
         "robots_meta": "index,follow",
-        "recaptcha_public_key": "123-KFEUsjehfuejILDVUKkRnAF9SSzb8o9uv5lY7Ih"
+        "recaptcha_public_key": "123-KFEUsjehfuejILDVUKkRnAF9SSzb8o9uv5lY7Ih",
+        "statsig_key": "client-KFEUsjehfuejILDVUKkRnAF9SSzb8o9uv5lY7Ih",
+        "app_env": "production"
       }
     }
   }

backend/compact-connect-ui-app/cdk.context.sandbox-example.json

@@ -10,7 +10,9 @@
         "region": "us-east-1",
         "domain_name": "justin.compactconnect.org",
         "recaptcha_public_key": "123-KFEUsjehfuejILDVUKkRnAF9SSzb8o9uv5lY7Ih",
-        "robots_meta": "noindex,nofollow"
+        "robots_meta": "noindex,nofollow",
+        "statsig_key": "client-KFEUsjehfuejILDVUKkRnAF9SSzb8o9uv5lY7Ih",
+        "app_env": "local"
       }
     }
   }

backend/compact-connect-ui-app/cdk.context.test-example.json

@@ -13,7 +13,9 @@
         "region": "us-east-1",
         "domain_name": "test.compactconnect.org",
         "recaptcha_public_key": "123-KFEUsjehfuejILDVUKkRnAF9SSzb8o9uv5lY7Ih",
-        "robots_meta": "noindex,nofollow"
+        "robots_meta": "noindex,nofollow",
+        "statsig_key": "client-KFEUsjehfuejILDVUKkRnAF9SSzb8o9uv5lY7Ih",
+        "app_env": "csg-test"
       }
     }
   }

backend/compact-connect-ui-app/lambdas/nodejs/README.md

@@ -22,7 +22,7 @@ _[back to top](#ingest-event-reporter-lambda)_
 ---
 ## Local development
 - **Linting**
-    - `yarn run lint`
+    - `yarn lint`
         - Lints all code in all the Lambda function
 - **Running an individual Lambda**
     - The easiest way to execute the Lambda is to run the tests ([see below](#tests))
@@ -33,7 +33,6 @@ _[back to top](#ingest-event-reporter-lambda)_
 ---
 ## Testing
 This project uses `jest` and `aws-sdk-client-mock` for approachable unit testing. The code in this folder can be tested by running:
-- `yarn install`
-- `yarn test`
+- `yarn test:csg`
 
 or by using the utility scripts located at `backend/bin`.

backend/compact-connect-ui-app/lambdas/nodejs/cloudfront-csp/index.js

@@ -243,6 +243,18 @@ const setCspHeader = (headers = {}) => {
                 domains.cognitoProvider,
                 cognitoIdpUrl,
                 'https://www.google.com/recaptcha/',
+                // Begin Statsig domains
+                'https://api.statsig.com/',
+                'https://featuregates.org/',
+                'https://statsigapi.net/',
+                'https://events.statsigapi.net/',
+                'https://api.statsigcdn.com/',
+                'https://featureassets.org/',
+                'https://assetsconfigcdn.org/',
+                'https://prodregistryv2.org/',
+                'https://cloudflare-dns.com/',
+                'https://beyondwickedmapping.org/',
+                // End Statsig domains
             ]),
         ].join(' ')}`,
     }];

backend/compact-connect-ui-app/lambdas/nodejs/cloudfront-csp/test/index.test.js

@@ -156,6 +156,18 @@ const buildCspHeaders = (environment) => {
         cognitoProviderUrl,
         cognitoIdpUrl,
         'https://www.google.com/recaptcha/',
+        // Begin Statsig domains
+        'https://api.statsig.com/',
+        'https://featuregates.org/',
+        'https://statsigapi.net/',
+        'https://events.statsigapi.net/',
+        'https://api.statsigcdn.com/',
+        'https://featureassets.org/',
+        'https://assetsconfigcdn.org/',
+        'https://prodregistryv2.org/',
+        'https://cloudflare-dns.com/',
+        'https://beyondwickedmapping.org/',
+        // End Statsig domains
     ].join(' ');
 
     return `${[

backend/compact-connect-ui-app/stacks/frontend_deployment_stack/deployment.py

@@ -31,6 +31,8 @@ def __init__(
         # Get environment-specific values from context
         recaptcha_public_key = environment_context['recaptcha_public_key']
         robots_meta = environment_context['robots_meta']
+        statsig_client_key = environment_context['statsig_key']
+        app_env = environment_context['app_env']
 
         super().__init__(
             scope,
@@ -56,6 +58,7 @@ def __init__(
                             image=DockerImage('public.ecr.aws/lts/ubuntu:22.04_stable'),
                             environment={
                                 'BASE_URL': '/',
+                                'VUE_APP_ENV': app_env,
                                 'VUE_APP_DOMAIN': f'{HTTPS_PREFIX}{persistent_stack_app_config_values.ui_domain_name}',
                                 'VUE_APP_ROBOTS_META': robots_meta,
                                 'VUE_APP_API_STATE_ROOT': f'{HTTPS_PREFIX}{persistent_stack_app_config_values.api_domain_name}',
@@ -67,6 +70,7 @@ def __init__(
                                 'VUE_APP_COGNITO_AUTH_DOMAIN_LICENSEE': f'{HTTPS_PREFIX}{provider_users_stack_app_config_values.provider_cognito_domain}{COGNITO_AUTH_DOMAIN_SUFFIX}',
                                 'VUE_APP_COGNITO_CLIENT_ID_LICENSEE': provider_users_stack_app_config_values.provider_cognito_client_id,
                                 'VUE_APP_RECAPTCHA_KEY': recaptcha_public_key,
+                                'VUE_APP_STATSIG_KEY': statsig_client_key,
                             },
                             entrypoint=['bash'],
                             command=['bin/build.sh'],

backend/compact-connect-ui-app/tests/resources/snapshots/BetaFrontend-FrontendDeploymentStack-UI_DISTRIBUTION.json

@@ -39,7 +39,7 @@
             {
               "EventType": "viewer-response",
               "LambdaFunctionARN": {
-                "Ref": "CSPFunctionCurrentVersionB61A66115988ea1180930366a7af32c8681342bd"
+                "Ref": "CSPFunctionCurrentVersionB61A6611c49f5a41519db73b59488deeb4e8a5bc"
               }
             }
           ],