Frontend/feature flags

.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"
               }
             }
           ],

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

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

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

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

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

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

webroot/.env.example

@@ -1,5 +1,6 @@
 NODE_ENV=development
 BASE_URL=/
+VUE_APP_ENV=local
 VUE_APP_DOMAIN=http://localhost:3018
 VUE_APP_ROBOTS_META=noindex,nofollow
 VUE_APP_API_STATE_ROOT=https://api.test.jcc.iaapi.io
@@ -11,6 +12,7 @@ VUE_APP_COGNITO_CLIENT_ID_STAFF=4s5iil9aut9lo0du76p37o8m7h
 VUE_APP_COGNITO_AUTH_DOMAIN_LICENSEE=https://ia-cc-provider-test.auth.us-east-1.amazoncognito.com
 VUE_APP_COGNITO_CLIENT_ID_LICENSEE=topd4vhftng5cfm3ccgkb6ejd
 VUE_APP_RECAPTCHA_KEY=6Le-3bgqAAAAAILDVUKkRnAF9SSzb8o9uv5lY7Ih
+VUE_APP_STATSIG_KEY=TODO
 VUE_APP_MOCK_API=false
 VUE_APP_MOCK_API_PAYMENT_LOGIN_ID=TODO
 VUE_APP_MOCK_API_PAYMENT_CLIENT_KEY=TODO

webroot/README.md

@@ -36,76 +36,102 @@
     - **`BASE_URL`**
         - `/` to serve under domain root
         - Otherwise, a relative path under the domain root; don't include trailing slash
+    - **`VUE_APP_ENV`**
+        - _Server_ :arrow_heading_up:
+            - IA Test: `ia-test`
+            - CSG Test: `csg-test`
+            - Beta: `beta`
+            - Prod: `production`
+        - _Local_ :arrow_heading_down:
+            - `local`
     - **`VUE_APP_ROBOTS_META`**
         - _Server_ :arrow_heading_up:
-            - Dev(JCC-Test): `noindex,nofollow`
-            - Test(CSG-Test): `noindex,nofollow`
+            - IA Test: `noindex,nofollow`
+            - CSG Test: `noindex,nofollow`
+            - Beta: `noindex,nofollow`
             - Prod: `nofollow`
         - _Local_ :arrow_heading_down:
             - `noindex,nofollow`
     - **`VUE_APP_DOMAIN`**
         - _Server_ :arrow_heading_up:
-            - Dev(JCC-Test): `https://app.test.jcc.iaapi.io`
-            - Test(CSG-Test): `https://app.test.compactconnect.org`
+            - IA Test: `https://app.test.jcc.iaapi.io`
+            - CSG Test: `https://app.test.compactconnect.org`
+            - Beta: `https://app.beta.compactconnect.org`
             - Prod: `https://app.compactconnect.org`
         - _Local_ :arrow_heading_down:
             - `http://localhost:3018`
     - **`VUE_APP_API_STATE_ROOT`**
         - _Server_ :arrow_heading_up:
-            - Dev(JCC-Test): `https://api.test.jcc.iaapi.io`
-            - Test(CSG-Test): `https://api.test.compactconnect.org`
+            - IA Test: `https://api.test.jcc.iaapi.io`
+            - CSG Test: `https://api.test.compactconnect.org`
+            - Beta: `https://api.beta.compactconnect.org`
             - Prod: `https://api.compactconnect.org`
         - _Local_ :arrow_heading_down:
             - `https://api.test.jcc.iaapi.io`
     - **`VUE_APP_API_LICENSE_ROOT`**
         - _Server_ :arrow_heading_up:
-            - Dev(JCC-Test): `https://api.test.jcc.iaapi.io`
-            - Test(CSG-Test): `https://api.test.compactconnect.org`
+            - IA Test: `https://api.test.jcc.iaapi.io`
+            - CSG Test: `https://api.test.compactconnect.org`
+            - Beta: `https://api.beta.compactconnect.org`
             - Prod: `https://api.compactconnect.org`
         - _Local_ :arrow_heading_down:
             - `https://api.test.jcc.iaapi.io`
     - **`VUE_APP_COGNITO_REGION`**
         - _Server_ :arrow_heading_up:
-            - Dev(JCC-Test): `us-east-1`
-            - Test(CSG-Test): `us-east-1`
+            - IA Test: `us-east-1`
+            - CSG Test: `us-east-1`
+            - Beta: `us-east-1`
             - Prod: `us-east-1`
         - _Local_ :arrow_heading_down:
             - `us-east-1`
     - **`VUE_APP_COGNITO_AUTH_DOMAIN_LICENSEE`**
         - _Server_ :arrow_heading_up:
-            - Dev(JCC-Test): `https://ia-cc-provider-test.auth.us-east-1.amazoncognito.com`
-            - Test(CSG-Test): `https://compact-connect-provider-test.auth.us-east-1.amazoncognito.com`
+            - IA Test: `https://ia-cc-provider-test.auth.us-east-1.amazoncognito.com`
+            - CSG Test: `https://compact-connect-provider-test.auth.us-east-1.amazoncognito.com`
+            - Beta: `https://compact-connect-provider-beta.auth.us-east-1.amazoncognito.com`
             - Prod: `https://compact-connect-provider.auth.us-east-1.amazoncognito.com`
         - _Local_ :arrow_heading_down:
             - `https://ia-cc-provider-test.auth.us-east-1.amazoncognito.com`
     - **`VUE_APP_COGNITO_CLIENT_ID_LICENSEE`**
         - _Server_ :arrow_heading_up:
-            - Dev(JCC-Test): `topd4vhftng5cfm3ccgkb6ejd`
-            - Test(CSG-Test): `6erj63mpa5tjqdtdi6vfi9q9hi`
+            - IA Test: `topd4vhftng5cfm3ccgkb6ejd`
+            - CSG Test: `6erj63mpa5tjqdtdi6vfi9q9hi`
+            - Beta: TODO
             - Prod: `3dp0nf7acvtavqlbec6p4t20to`
         - _Local_ :arrow_heading_down:
             - `topd4vhftng5cfm3ccgkb6ejd`
     - **`VUE_APP_COGNITO_AUTH_DOMAIN_STAFF`**
         - _Server_ :arrow_heading_up:
-            - Dev(JCC-Test): `https://ia-cc-staff-test.auth.us-east-1.amazoncognito.com`
-            - Test(CSG-Test): `https://compact-connect-staff-test.auth.us-east-1.amazoncognito.com`
+            - IA Test: `https://ia-cc-staff-test.auth.us-east-1.amazoncognito.com`
+            - CSG Test: `https://compact-connect-staff-test.auth.us-east-1.amazoncognito.com`
+            - Beta: `https://compact-connect-staff-beta.auth.us-east-1.amazoncognito.com`
             - Prod: `https://compact-connect-staff.auth.us-east-1.amazoncognito.com`
         - _Local_ :arrow_heading_down:
             - `https://ia-cc-staff-test.auth.us-east-1.amazoncognito.com`
     - **`VUE_APP_COGNITO_CLIENT_ID_STAFF`**
         - _Server_ :arrow_heading_up:
-            - Dev(JCC-Test): `15mh24ea4af3of8jcnv8h2ic10`
-            - Test(CSG-Test): `75uq274pv8ufhc1g1h4n86gp1l`
+            - IA Test: `15mh24ea4af3of8jcnv8h2ic10`
+            - CSG Test: `75uq274pv8ufhc1g1h4n86gp1l`
+            - Beta: TODO
             - Prod: `4mnd3u2rp30ssgnm7dk81jcqsc`
         - _Local_ :arrow_heading_down:
             - `15mh24ea4af3of8jcnv8h2ic10`
     - **`VUE_APP_RECAPTCHA_KEY`**
         - _Server_ :arrow_heading_up:
-            - Dev(JCC-Test): `6Le-3bgqAAAAAILDVUKkRnAF9SSzb8o9uv5lY7Ih`
-            - Test(CSG-Test): `6LcWQMkqAAAAAL_Wkh6Ik_HSqSqNqROzOyPCrvNC`
+            - IA Test: `6Le-3bgqAAAAAILDVUKkRnAF9SSzb8o9uv5lY7Ih`
+            - CSG Test: `6LcWQMkqAAAAAL_Wkh6Ik_HSqSqNqROzOyPCrvNC`
+            - Beta: `6LcWQMkqAAAAAL_Wkh6Ik_HSqSqNqROzOyPCrvNC`
             - Prod: `6LcEQckqAAAAAJUQDEO1KsoeH17-EH5h2UfrwdyK`
         - _Local_ :arrow_heading_down:
             - `6Le-3bgqAAAAAILDVUKkRnAF9SSzb8o9uv5lY7Ih`
+    - **`VUE_APP_STATSIG_KEY`**
+        - _Server_ :arrow_heading_up:
+            - IA Test: TODO
+            - CSG Test: TODO
+            - Beta: TODO
+            - Prod: TODO
+        - _Local_ :arrow_heading_down:
+            - TODO
     - **`VUE_APP_MOCK_API`** :arrow_heading_down:
         - Only used for local development
         - `true` if mock API should be used
@@ -118,6 +144,45 @@
     - **`LOCAL_DEV_PORT`** :arrow_heading_down:
         - `3018`
 
+### Adding environment variables
+In **`/backend/compact-connect-ui-app/`**:
+
+- **Update `cdk.context.*-example.json` files**
+    - Follow the existing file pattern to add any new environment variables
+    - For dynamic values, such as service keys, do not add the actual key but rather a representative fake value
+    - Follow these steps for _each_ environment file
+- **Update `/stacks/frontend_deployment_stack/deployment.py`**
+    - In the section `# Get environment-specific values from context` follow the pattern to create new Python variables from the environment context variables you added in the previous step
+        - e.g. `environment_context['context_variable_name']`
+    - In the BundlingOptions add new Vue environment variables referencing the Python variables
+- **Request that the new environment variable values get added to the AWS Parameter Store**
+    - Cloud devs on the project can help with this
+    - These must be in place before merging the PR
+
+### Updating the Content-Security-Policy (CSP) headers
+In **`/backend/compact-connect-ui-app/lambdas/nodejs`**:
+
+- _If you haven't already, make sure you have followed the README to ensure the correct Node version and installation of dependencies_
+- Make CSP updates to `/cloudfront-cspindex.js` as needed
+- Update the tests in `/cloudfront-csp/test/index.test.js` as needed
+- Run `yarn lint`
+- Run `yarn test:csp`
+- Everything should pass as expected
+
+In **`/backend/compact-connect-ui-app`**:
+
+- Make sure you have Python 3 installed
+- Make sure dependencies are installed:
+    - _Note that `pip3` may be needed in place of `pip` depending on your local Python setup_
+    - `pip install -r requirements.txt`
+    - `pip install -r requirements-dev.txt`
+- In `/tests/app/base.py`:
+    - Locate each instance of `overwrite_snapshot=False` and _**temporarily**_ replace with `overwrite_snapshot=True`
+- Run the tests: `bin/run_tests.sh -l all -no`
+- Everything should pass as expected
+- In `/tests/app/base.py`:
+    - Revert all temporary instances of `overwrite_snapshot=True` to `overwrite_snapshot=False`
+
 ### Server environment web server :arrow_heading_up:
 - **Create a 404 rule that serves the `index.html` page**
     - This is common to modern "single-page-app" (SPA) frontends. It allows the frontend to serve up sub-page routes without the web server throwing a 404 first.

webroot/package.json

@@ -13,6 +13,9 @@
     "audit:dependencies": "/bin/bash -c 'yarn audit --groups dependencies --level moderate; [[ $? -ge 4 ]] && exit 1 || exit 0'"
   },
   "dependencies": {
+    "@statsig/js-client": "^3.25.3",
+    "@statsig/session-replay": "^3.25.3",
+    "@statsig/web-analytics": "^3.25.3",
     "@vue/compat": "3.4.21",
     "@vuepic/vue-datepicker": "^8.7.0",
     "axios": "^1.12.2",

webroot/src/app.config.ts

@@ -285,6 +285,13 @@ export const compacts = {
     coun: {},
 };
 
+// =============================
+// =     Feature gate IDs      =
+// =============================
+export enum FeatureGates {
+    EXAMPLE_FEATURE_1 = 'test-feature-1', // Keep this ID in place for examples & tests
+}
+
 export default {
     authStorage,
     tokens,