Replacing Google Analytics with Tealium (#4029)

.circleci/config.yml

@@ -86,14 +86,26 @@ workflows:
           filters:
             branches:
               ignore:
-                - main
+                - gh-pages
             tags:
               ignore: ignore-e2e
           requires:
             - frontend lint
             - backend lint
             - frontend dependency vulnerability scan
             - backend dependency vulnerability scan
+      # - chromatic deployment:
+      #     filters:
+      #       branches:
+      #         ignore:
+      #           - gh-pages
+      #       tags:
+      #         ignore: ignore-e2e
+      #     requires:
+      #       - frontend lint
+      #       - backend lint
+      #       - frontend dependency vulnerability scan
+      #       - backend dependency vulnerability scan
 
       # backend jobs
       - backend api endpoint test:
@@ -224,6 +236,7 @@ workflows:
             - frontend test
             - yaml test
             - e2e test
+            # - chromatic deployment
 
       - frontend deploy:
           name: frontend deploy production
@@ -240,13 +253,15 @@ workflows:
             - frontend test
             - yaml test
             - e2e test
+            # - chromatic deployment
 
       # joint jobs
       - preview deploy:
           filters:
             branches:
               ignore:
                 - main
+                - gh-pages
             tags:
               ignore: /^noinfra.*/
           requires:
@@ -551,6 +566,27 @@ jobs:
             if [[ $CIRCLE_NODE_INDEX == "4" ]]; then export CYPRESS_RECORD_KEY="$CYPRESS_RECORD_KEY"; fi
             if [[ $CIRCLE_NODE_INDEX == "4" ]]; then yarn run cy:run:ci -- --record --key $CYPRESS_RECORD_KEY --ci-build-id "$CIRCLE_BUILD_NUM-$CIRCLE_BRANCH" --group "e2e tests admin" --spec "cypress/integration/03-admin/*.spec.js"; fi
 
+  # chromatic deployment:
+  #   yaml test:
+  #   docker:
+  #     - image: cimg/node:16.15.0
+  #       auth:
+  #         username: $DOCKER_EAPD_UN
+  #         password: $DOCKER_EAPD_PW
+  #   steps:
+  #     - checkout
+  #     - attach_workspace:
+  #         at: ~/project/web
+  #     - run:
+  #         name: Install Web Dependencies
+  #         working_directory: ~/project/web
+  #         command: yarn install --frozen-lockfile
+  #     - run:
+  #         name: Deploy to Chromatic
+  #         working_directory: ~/project/web
+  #         no_output_timeout: 60m
+  #         command: yarn deploy-chromatic --project-token=${CHROMATIC_PROJECT_TOKEN} -b build:storybook --ci --exit-once-uploaded --exit-zero-on-changes
+
   # ===== Backend jobs =====
   # These all depend on "install dependencies" running first.
 
@@ -674,7 +710,7 @@ jobs:
       - run:
           name: build the web app
           working_directory: ~/project/web
-          command: API_URL="${<< parameters.env >>_WEB_API_URL}" OKTA_DOMAIN="${<< parameters.env >>_OKTA_DOMAIN}" OKTA_SERVER_ID="${<< parameters.env >>_OKTA_SERVER_ID}" OKTA_CLIENT_ID="${<< parameters.env >>_OKTA_CLIENT_ID}" JWT_SECRET="${<< parameters.env >>_JWT_SECRET}" MONGO_INITDB_DATABASE="${<< parameters.env >>_MONGO_INITDB_DATABASE}" MONGO_URL="${<< parameters.env >>_MONGO_URL}" yarn build
+          command: ENV="${<< parameters.env >>}" API_URL="${<< parameters.env >>_WEB_API_URL}" TEALIUM_TAG="${<< parameters.env >>_TEALIUM_TAG}" OKTA_DOMAIN="${<< parameters.env >>_OKTA_DOMAIN}" OKTA_SERVER_ID="${<< parameters.env >>_OKTA_SERVER_ID}" OKTA_CLIENT_ID="${<< parameters.env >>_OKTA_CLIENT_ID}" JWT_SECRET="${<< parameters.env >>_JWT_SECRET}" MONGO_INITDB_DATABASE="${<< parameters.env >>_MONGO_INITDB_DATABASE}" MONGO_URL="${<< parameters.env >>_MONGO_URL}" yarn build
       - persist_to_workspace:
           root: ~/project
           paths:

.github/workflows/storybook.yml

@@ -1,8 +1,8 @@
 name: Deploy Storybook
 on:
   pull_request:
-    branches:
-      - main
+    types:
+      - closed
     paths:
       [
         'web/.storybook/**',
@@ -12,6 +12,7 @@ on:
         'web/src/components/**',
         'web/src/containers/**'
       ]
+
 jobs:
   storybook-deploy:
     runs-on: ubuntu-18.04
@@ -22,15 +23,25 @@ jobs:
         uses: actions/[email protected]
         with:
           persist-credentials: false
+          fetch-depth: 0
       - name: Node Version
         uses: actions/setup-node@v2
         with:
           node-version: '16.15.0'
-      - name: Install and Build
+      - name: Install Dependencies and Build Storybook
+        working-directory: ./web
         run: |
-          cd web
-          yarn install
+          yarn install --frozen-lockfile
           yarn build:storybook
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GH_TOKEN }}
+          storybookBuildDir: docs-build
+          allowConsoleErrors: true
       - name: Deploy 🚀
         uses: JamesIves/[email protected]
         with:

api/.eslintrc.json

@@ -11,6 +11,10 @@
     "node": true,
     "es6": true
   },
+  "globals": {
+    "window": true,
+    "utag": true
+  },
   "overrides": [
     {
       "files": ["**/*.test.js", "**/*.endpoint.js", "endpoint-tests/utils.js"],

bin/preview-deploy/aws.user-data.sh

@@ -103,7 +103,7 @@ git clone --single-branch -b __GIT_BRANCH__ https://github.com/CMSgov/eAPD.git
 cd eAPD/web
 yarn add [email protected] [email protected]
 yarn install --frozen-lockfile
-API_URL=/api OKTA_DOMAIN="__OKTA_DOMAIN__" OKTA_SERVER_ID="__OKTA_SERVER_ID__" OKTA_CLIENT_ID="__OKTA_CLIENT_ID__" yarn build
+API_URL=/api TEALIUM_TAG="__TEALIUM_TAG__" OKTA_DOMAIN="__OKTA_DOMAIN__" OKTA_SERVER_ID="__OKTA_SERVER_ID__" OKTA_CLIENT_ID="__OKTA_CLIENT_ID__" yarn build
 mv dist/* /app/web
 cd ~
 # Move the API code into place, then go set it up

docker-compose.yml

@@ -37,6 +37,7 @@ services:
     image: cms-eapd/web
     environment:
       - API_URL=http://localhost:8081
+      - TEALIUM_TAG=${TEALIUM_TAG}
       - OKTA_DOMAIN=${OKTA_DOMAIN}
       - OKTA_SERVER_ID=${OKTA_SERVER_ID}
       - OKTA_CLIENT_ID=${OKTA_CLIENT_ID}

integrationTests/.eslintrc.json

@@ -48,13 +48,6 @@
       "env": {
         "jest": true
       },
-      "settings": {
-        "import/resolver": {
-          "jest": {
-            "jestConfigFile": "./jest.config.js"
-          }
-        }
-      },
       "rules": {
         "import/named": "off",
         "import/order": "off"

integrationTests/cypress-setup.sh

@@ -7,4 +7,4 @@ docker-compose exec api yarn run seed
 
 cp ../api/seeds/test/tokens.json ./tokens.json
 
-TZ=utc npx cypress $1 $2 $3
+TZ=utc npx cypress $1 $2 $3 --browser chrome

integrationTests/package.json

@@ -16,7 +16,7 @@
     "url": "git+https://github.com/CMSgov/eAPD.git"
   },
   "author": "",
-  "license": "ISC",
+  "license": "CC0-1.0",
   "engines": {
     "node": "16.15.0"
   },
@@ -47,5 +47,14 @@
     "knex": "1.0.2",
     "mocha": "9.2.2",
     "pg": "8.7.3"
+  },
+  "jest": {
+    "setupFiles": [
+      "./polyfills.test.js"
+    ],
+    "globals": {
+      "window": true,
+      "utag": true
+    }
   }
 }

integrationTests/polyfills.test.js

@@ -0,0 +1,3 @@
+global.utag = {
+  view: () => {}
+};

web/.eslintrc.json

@@ -58,6 +58,10 @@
     "node": true,
     "commonjs": true
   },
+  "globals": {
+    "window": true,
+    "utag": true
+  },
   "overrides": [
     {
       "files": ["**/*.test.js", "**/*.story.js"],

web/package.json

@@ -19,6 +19,7 @@
     "build:storybook": "build-storybook -o ../docs-build",
     "deploy-storybook": "storybook-to-ghpages --out=../docs-build",
     "storybook": "start-storybook -p 6006",
+    "deploy-chromatic": "chromatic",
     "npm-check": "npx npm-check-updates",
     "stryker": "TZ=utc stryker run",
     "prepare": "yarn run snyk-protect",
@@ -122,7 +123,7 @@
     "react": "17.0.2",
     "react-countdown": "2.3.2",
     "react-dom": "17.0.2",
-    "react-gtm-module": "2.0.11",
+    "react-gtm-module": "^2.0.11",
     "react-hook-form": "^7.27.1",
     "react-redux": "7.2.6",
     "react-router": "5.2.0",
@@ -168,6 +169,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.6",
     "axe-core": "4.4.1",
     "axios-mock-adapter": "1.20.0",
+    "chromatic": "6.5.4",
     "crypto-browserify": "3.12.0",
     "enzyme": "3.11.0",
     "enzyme-to-json": "3.6.2",

web/polyfills.test.js

@@ -10,3 +10,7 @@ global.requestAnimationFrame = callback => {
 global.cancelAnimationFrame = callback => {
   setTimeout(callback, 0);
 };
+
+global.utag = {
+  view: () => {}
+};

web/src/components/DateField.js

@@ -128,7 +128,7 @@ const DateField = ({
       return '';
     }
     return errorMessage;
-  }, [errorMessage, state.invalidObject]);
+  }, [errorMessage, state]);
 
   return (
     <DSDateField

web/src/components/DollarField.story.js

@@ -6,9 +6,6 @@ export default {
   component: DollarField,
   parameters: {
     jest: ['DollarField.test.js']
-  },
-  argTypes: {
-    value: { control: 'text' }
   }
 };
 

web/src/components/Dollars.story.js

@@ -8,8 +8,12 @@ export default {
     jest: ['Dollars.test.js']
   },
   argTypes: {
-    amt: { control: 'text' }
+    children: {
+      control: { type: 'text' }
+    }
   }
 };
 
-export const Basic = (amt, ...args) => <Dollars {...args}>{amt}</Dollars>;
+const Template = args => <Dollars {...args} />;
+
+export const Basic = Template.bind({});

web/src/components/PrivateRoute.js

@@ -1,14 +1,14 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Route, Redirect } from 'react-router-dom';
 import { connect } from 'react-redux';
 
-const PrivateRoute = ({ authenticated, component: Component, ...rest }) => (
+const PrivateRoute = ({ authenticated, children, ...rest }) => (
   <Route
     {...rest}
     render={props =>
       authenticated ? (
-        <Component {...props} />
+        <Fragment>{children}</Fragment>
       ) : (
         <Redirect
           to={{
@@ -23,7 +23,7 @@ const PrivateRoute = ({ authenticated, component: Component, ...rest }) => (
 
 PrivateRoute.propTypes = {
   authenticated: PropTypes.bool.isRequired,
-  component: PropTypes.elementType.isRequired,
+  children: PropTypes.elementType.isRequired,
   location: PropTypes.object.isRequired
 };
 

web/src/components/Wrapper.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { withRouter } from 'react-router';
 import Header from '../layout/header/Header';
 import Footer from '../layout/footer/Footer';
-import routes from '../pages/routes';
+import routes from '../pages/mainRoutesList';
 import SessionEndingAlert from './SessionEndingAlert';
 
 const cardRoutes = routes.filter(r => r.isCard).map(r => r.path);

web/src/containers/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Routes from '../pages/Route';
+import Routes from '../pages/MainRoutes';
 import Wrapper from '../components/Wrapper';
 import Broadcast from '../components/Broadcast';
 import AriaAnnounce from '../components/AriaAnnounce';