Merge pull request #179 from zimmerman-team/develop

Updating main with develop

.github/workflows/lint.yml

@@ -0,0 +1,24 @@
+name: Prettier Lint check
+
+on:
+  pull_request:
+  push:
+
+jobs:
+  prettier:
+    name: Prettier Check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '16.19.1'
+
+      - name: Install Dependencies
+        run: yarn install
+
+      - name: Prettier Lint
+        run: yarn prettier src/app --check

.github/workflows/main.yml

@@ -34,8 +34,8 @@ jobs:
               }
             ]
           extra_plugins: |
-            "@semantic-release/commit-analyzer"
-            "@semantic-release/release-notes-generator"
-            "@semantic-release/github"
+            "@semantic-release/commit-analyzer@9.0.2"
+            "@semantic-release/release-notes-generator@10.0.3"
+            "@semantic-release/github@8.1.0"
         env:
-          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/tests.yml

@@ -0,0 +1,101 @@
+name: Tests
+on:
+  push:
+    branches: ["main", "develop"]
+  pull_request:
+    branches: ["main", "develop"]
+
+
+env:
+    # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY
+    # in GitHub repo → Settings → Secrets → Actions
+    CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+    # Creating a token https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
+    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    # Custom environment variables
+
+
+    # AUTH0
+    AUTH0_USERNAME: ${{ secrets.AUTH0_USERNAME }}
+    AUTH0_PASSWORD: ${{ secrets.AUTH0_PASSWORD }}
+    AUTH0_CLIENT_SECRET: ${{ secrets.AUTH0_CLIENT_SECRET }}
+
+    REACT_APP_AUTH0_DOMAIN: ${{ secrets.REACT_APP_AUTH0_DOMAIN }}
+    REACT_APP_AUTH0_AUDIENCE: ${{ secrets.REACT_APP_AUTH0_AUDIENCE }}
+    REACT_APP_AUTH0_CLIENT: ${{ secrets.REACT_APP_AUTH0_CLIENT }}
+
+    # API
+    REACT_APP_API: ${{ secrets.REACT_APP_API }}
+    REACT_APP_BASE_URL: ${{ secrets.REACT_APP_BASE_URL }}
+    REACT_APP_MAPBOX_TOKEN: ${{ secrets.REACT_APP_MAPBOX_TOKEN }}
+    REACT_APP_GOOGLE_ANALYTICS_ID: ${{ secrets.REACT_APP_GOOGLE_ANALYTICS_ID }}
+    REACT_APP_CMS_API: ${{ secrets.REACT_APP_CMS_API }}
+    REACT_APP_CMS_TOKEN: ${{ secrets.REACT_APP_CMS_TOKEN }}
+    REACT_APP_GOOGLE_API_CLIENT_ID: ${{ secrets.REACT_APP_GOOGLE_API_CLIENT_ID }}
+    REACT_APP_GOOGLE_API_DEV_KEY: ${{ secrets.REACT_APP_GOOGLE_API_DEV_KEY }}
+    REACT_APP_CYPRESS_TEST: "true"
+    CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+    GENERATE_SOURCEMAP: false
+
+    # GOOGLE CYPRESS
+    GOOGLE_CLIENT_ID_TEST: ${{ secrets.GOOGLE_CLIENT_ID_TEST }}
+    GOOGLE_CLIENT_SECRET_TEST: ${{ secrets.GOOGLE_CLIENT_SECRET_TEST }}
+    GOOGLE_REFRESH_TOKEN_TEST: ${{ secrets.GOOGLE_REFRESH_TOKEN_TEST }}
+
+jobs:
+  jest-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install packages
+        run: yarn install && yarn add "https://github.com/zimmerman-team/rawgraphs-charts.git#3da650c" 
+
+      - name: Build rawgraphs package
+        run: |
+          if [ -d "node_modules/@rawgraphs/rawgraphs-charts" ]; then
+            cd node_modules/@rawgraphs/rawgraphs-charts
+            yarn 
+            yarn build
+          else
+            echo "Package directory not found"
+          fi
+
+      - name: Jest run
+        run: yarn test
+
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install packages
+        run: yarn install && yarn add "https://github.com/zimmerman-team/rawgraphs-charts.git#3da650c" 
+
+      - name: Build rawgraphs package
+        run: |
+          if [ -d "node_modules/@rawgraphs/rawgraphs-charts" ]; then
+            cd node_modules/@rawgraphs/rawgraphs-charts
+            yarn 
+            yarn build
+          else
+            echo "Package directory not found"
+          fi
+        
+      - name: Cypress run
+        # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
+        uses: cypress-io/github-action@v6
+        with:
+          # Starts web server for E2E tests - replace with your own server invocation
+          # https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server
+          start: npm start
+          wait-on: "http://127.0.0.1:3000" # Waits for above
+          wait-on-timeout: 180
+          # Records to Cypress Cloud
+          # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record
+          record: true
+          # parallel: true # Runs test in parallel using settings above
+
+

.gitignore

@@ -71,3 +71,9 @@ Icon
 # cypress recordings
 cypress/screenshots/
 cypress/videos/
+cypress.env.json
+cypress/fixtures/localStorage.json
+cypress/e2e/3-getting-started
+cypress/e2e/2-advanced-examples
+
+rawgraphs-charts

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn prettier src/app --check
+

.prettierignore

@@ -2,4 +2,7 @@
 build/**/*
 config/**/*
 scripts/**/*
-storybook-static/**/*
+storybook-static/**/*
+coverage/**/*
+node_modules/**/*
+rawgraphs-charts/**/*

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "window.autoDetectColorScheme": false,
+  "workbench.colorTheme": "GitHub Light"
+}

GruntFile.js

@@ -0,0 +1,32 @@
+module.exports = function(grunt) {
+
+    // Project configuration.
+    grunt.initConfig({
+      pkg: grunt.file.readJSON('package.json'),
+
+      svgstore: {
+        options: {
+          prefix : 'plyr-', // This will prefix each ID
+          svg: { // will add and overide the the default xmlns="http://www.w3.org/2000/svg" attribute to the resulting SVG
+            viewBox : '0 0 100 100',
+            xmlns: 'http://www.w3.org/2000/svg'
+          }
+        },
+        default : {
+            files: {
+              'dest/svg-defs.svg': ['plyr-svgs/*.svg'],
+            }
+          },
+
+        },
+    });
+
+    // Load the plugin that provides the "uglify" task.
+    // grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-svgstore');
+
+    // Default task(s).
+    grunt.registerTask('default', ['svgstore']);
+
+
+  };

README.md

@@ -24,6 +24,9 @@ In order to be able to successfully run or build the app you need to create an e
 REACT_APP_API=<data middleware api url>
 REACT_APP_MAPBOX_TOKEN=<mapbox account token>
 REACT_APP_GOOGLE_ANALYTICS_ID=<google analytics app id>
+REACT_APP_CMS_API=<cockpit cms api url>
+REACT_APP_CMS_TOKEN=<cockpit cms api token>
+REACT_APP_USE_DEFAULT_DATASETS=<boolean true or false>
 ```
 
 `REACT_APP_API`: is the url where the data middleware API runs on. If running [Data API Middleware](https://github.com/globalfund/data-explorer-server/) locally then you can use `http://localhost:4200`.
@@ -32,6 +35,14 @@ REACT_APP_GOOGLE_ANALYTICS_ID=<google analytics app id>
 
 `REACT_APP_GOOGLE_ANALYTICS_ID`(optional): Google Analytics ID in order to be able to make use of Google Analytics services.
 
+`REACT_APP_CMS_API`: is the url where the [Cockpit CMS API](https://github.com/zimmerman-team/the-data-explorer-cms/) runs on.
+
+`REACT_APP_CMS_TOKEN`: is the API token retrieved from the Cockpit CMS interface.
+
+`REACT_APP_USE_DEFAULT_DATASETS`: is the setting to determine whether or not we use the Global Fund default datasets, or external datasets.
+
+`PORT`: can be used to specify on which port to run the client.
+
 ---
 
 In the project directory, you can run:
@@ -58,6 +69,10 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
+### `yarn prepare`
+
+Sets up the husky executable script for git hooks
+
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

craco.config.js

@@ -1,40 +1,49 @@
-// const reactHotReloadPlugin = require('craco-plugin-react-hot-reload');
-// const BabelRcPlugin = require("@jackwilsdon/craco-use-babelrc");
-// const { WebpackPluginRamdisk } = require("webpack-plugin-ramdisk");
+module.exports = () => {
+  const babelPlugins = ["babel-plugin-styled-components"];
 
-// const { ESLINT_MODES } = require("@craco/craco");
+  if (process.env.NODE_ENV === "production") {
+    babelPlugins.push([
+      "transform-remove-console",
+      { exclude: ["error", "warn"] },
+    ]);
+  }
 
-module.exports = {
-  eslint: {
-    enable: false,
-    // mode: ESLINT_MODES.file,
-  },
+  return {
+    eslint: {
+      enable: false,
+    },
 
-  webpack: {
-    alias: {
-      // 'react-dom': '@hot-loader/react-dom',
+    webpack: {
+      alias: {
+        // 'react-dom': '@hot-loader/react-dom',
+        "react/jsx-dev-runtime": "react/jsx-dev-runtime.js",
+        "react/jsx-runtime": "react/jsx-runtime.js",
+      },
+      plugins: [
+        // new StyleLintPlugin({
+        //   configBasedir: __dirname,
+        //   context: path.resolve(__dirname, 'src'),
+        //   files: ['**/*.tsx', '**/*.ts'],
+        // }),
+        // new WebpackPluginRamdisk(),
+      ],
+      loaders: [
+        {
+          test: /plugin\.css$/,
+          loaders: ['style-loader', 'css'],
+        },
+      ],
     },
-    plugins: [
-      // new StyleLintPlugin({
-      //   configBasedir: __dirname,
-      //   context: path.resolve(__dirname, 'src'),
-      //   files: ['**/*.tsx', '**/*.ts'],
-      // }),
-      // new WebpackPluginRamdisk(),
-    ],
-  },
 
-  babel: {
-    plugins: ["babel-plugin-styled-components"],
-    loaderOptions: {
-      ignore: ["./node_modules/mapbox-gl/dist/mapbox-gl.js"],
+    babel: {
+      plugins: babelPlugins,
+      loaderOptions: {
+        ignore: ["./node_modules/mapbox-gl/dist/mapbox-gl.js"],
+      },
     },
-  },
 
-  // plugins: [
-  //   {
-  //     // plugin: reactHotReloadPlugin,
-  //     plugin: BabelRcPlugin,
-  //   },
-  // ],
+    webpackDevServer: {
+      port: process.env.PORT || 3000,
+    },
+  };
 };

cypress.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from "cypress";
+
+require("dotenv").config();
+
+export default defineConfig({
+  viewportHeight: 820,
+  viewportWidth: 1440,
+  projectId: process.env.CYPRESS_PROJECT_ID,
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    env: {
+      auth0_username: process.env.AUTH0_USERNAME,
+      auth0_password: process.env.AUTH0_PASSWORD,
+      auth0_domain: process.env.REACT_APP_AUTH0_DOMAIN,
+      auth0_audience: process.env.REACT_APP_AUTH0_AUDIENCE,
+      auth0_client_id: process.env.REACT_APP_AUTH0_CLIENT,
+      api_url: process.env.REACT_APP_API,
+      base_url: process.env.REACT_APP_BASE_URL,
+      google_client_id_test: process.env.GOOGLE_CLIENT_ID_TEST,
+      google_client_secret_test: process.env.GOOGLE_CLIENT_SECRET_TEST,
+      google_refresh_token_test: process.env.GOOGLE_REFRESH_TOKEN_TEST,
+    },
+    baseUrl: process.env.REACT_APP_BASE_URL,
+  },
+  experimentalMemoryManagement: true,
+});

cypress/e2e/1-dx/1-test-login.cy.ts

@@ -0,0 +1,18 @@
+/// <reference types="cypress" />
+
+describe("Login for a test user on DX", () => {
+  beforeEach(() => {
+    // cy.login();
+    cy.loginToAuth0(
+      Cypress.env("auth0_username"),
+      Cypress.env("auth0_password")
+    );
+    cy.saveLocalStorageCache();
+    cy.visit("/");
+    cy.get('[data-cy="cookie-btn"]').click();
+  });
+
+  it("Is Logged in", function () {
+    cy.contains("Welcome").should("be.visible");
+  });
+});