Maint 782 migrate from cra to vite (#840)

* pushing

* fix: converted from jest to vitest

* chore: changed env variables

* fix: workflow

* chore: update build script

* fix: add recording

* fix: set env to staging

* feat: add record with record key secret env

* fix: build steph

* fix: workflow yaml

* chore: remove unnecessary dependencie

Author: nicoalee

.github/workflows/workflow.yml

@@ -332,9 +332,9 @@ jobs:
         AUTH0_BASE_URL: ${{ secrets.AUTH0_BASE_URL }}
         AUTH0_ACCESS_TOKEN_URL: ${{ secrets.AUTH0_ACCESS_TOKEN_URL }}
         AUTH0_AUTH_URL: ${{ secrets.AUTH0_AUTH_URL }}
-        REACT_APP_AUTH0_CLIENT_ID: ${{ secrets.REACT_APP_AUTH0_CLIENT_ID }}
-        REACT_APP_AUTH0_DOMAIN: ${{ secrets.REACT_APP_AUTH0_DOMAIN }}
-        REACT_APP_AUTH0_CLIENT_SECRET: ${{ secrets.REACT_APP_AUTH0_CLIENT_SECRET }}
+        VITE_APP_AUTH0_CLIENT_ID: ${{ secrets.VITE_APP_AUTH0_CLIENT_ID }}
+        VITE_APP_AUTH0_DOMAIN: ${{ secrets.VITE_APP_AUTH0_DOMAIN }}
+        VITE_APP_AUTH0_CLIENT_SECRET: ${{ secrets.VITE_APP_AUTH0_CLIENT_SECRET }}
       run: |
         cp neurosynth-frontend/.env.example neurosynth-frontend/.env.dev && \
         docker compose run \
@@ -344,14 +344,14 @@ jobs:
           -e "AUTH0_BASE_URL=${AUTH0_BASE_URL}" \
           -e "AUTH0_ACCESS_TOKEN_URL=${AUTH0_ACCESS_TOKEN_URL}" \
           -e "AUTH0_AUTH_URL=${AUTH0_AUTH_URL}" \
-          -e "REACT_APP_AUTH0_DOMAIN=${REACT_APP_AUTH0_DOMAIN}" \
-          -e "REACT_APP_AUTH0_CLIENT_ID=${REACT_APP_AUTH0_CLIENT_ID}" \
-          -e "REACT_APP_AUTH0_AUDIENCE=localhost" \
-          -e "REACT_APP_AUTH0_CLIENT_SECRET=${REACT_APP_AUTH0_CLIENT_SECRET}" \
-          -e "REACT_APP_ENV=DEV" \
-          -e "REACT_APP_NEUROSTORE_API_DOMAIN=http://localhost/api" \
+          -e "VITE_APP_AUTH0_DOMAIN=${VITE_APP_AUTH0_DOMAIN}" \
+          -e "VITE_APP_AUTH0_CLIENT_ID=${VITE_APP_AUTH0_CLIENT_ID}" \
+          -e "VITE_APP_AUTH0_AUDIENCE=https://neurostore.xyz/api/" \
+          -e "VITE_APP_AUTH0_CLIENT_SECRET=${VITE_APP_AUTH0_CLIENT_SECRET}" \
+          -e "VITE_APP_ENV=STAGING" \
+          -e "VITE_APP_NEUROSTORE_API_DOMAIN=http://localhost/api" \
           -e "CI=true" \
-          -e "REACT_APP_NEUROSYNTH_API_DOMAIN=http://localhost:81/api" \
+          -e "VITE_APP_NEUROSYNTH_API_DOMAIN=http://localhost:81/api" \
           --rm -w /compose/neurosynth-frontend \
           compose \
           bash -c "cd /compose/neurosynth-frontend && \
@@ -475,20 +475,22 @@ jobs:
       name: Frontend Cypress E2E Tests
       uses: cypress-io/github-action@v6
       env:
-        CYPRESS_auth0ClientId: ${{ secrets.REACT_APP_AUTH0_CLIENT_ID }}
-        CYPRESS_auth0ClientSecret: ${{ secrets.REACT_APP_AUTH0_CLIENT_SECRET }}
-        CYPRESS_auth0Domain: ${{ secrets.REACT_APP_AUTH0_DOMAIN }}
-        CYPRESS_auth0Audience: localhost
-        REACT_APP_AUTH0_AUDIENCE: localhost
-        REACT_APP_AUTH0_CLIENT_ID: ${{ secrets.REACT_APP_AUTH0_CLIENT_ID }}
-        REACT_APP_AUTH0_DOMAIN: ${{ secrets.REACT_APP_AUTH0_DOMAIN }}
-        REACT_APP_AUTH0_CLIENT_SECRET: ${{ secrets.REACT_APP_AUTH0_CLIENT_SECRET }}
-        REACT_APP_ENV: DEV
-        REACT_APP_NEUROSTORE_API_DOMAIN: ${{ secrets.REACT_APP_NEUROSTORE_API_DOMAIN }}
-        REACT_APP_NEUROSYNTH_API_DOMAIN: ${{ secrets.REACT_APP_NEUROSYNTH_API_DOMAIN }}
+        CYPRESS_auth0ClientId: ${{ secrets.VITE_APP_AUTH0_CLIENT_ID }}
+        CYPRESS_auth0ClientSecret: ${{ secrets.VITE_APP_AUTH0_CLIENT_SECRET }}
+        CYPRESS_: ${{ secrets.VITE_APP_AUTH0_DOMAIN }}
+        CYPRESS_auth0Audience: https://neurostore.xyz/api/
+        CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+        VITE_APP_AUTH0_AUDIENCE: https://neurostore.xyz/api/
+        VITE_APP_AUTH0_CLIENT_ID: ${{ secrets.VITE_APP_AUTH0_CLIENT_ID }}
+        VITE_APP_AUTH0_DOMAIN: ${{ secrets.VITE_APP_AUTH0_DOMAIN }}
+        VITE_APP_AUTH0_CLIENT_SECRET: ${{ secrets.VITE_APP_AUTH0_CLIENT_SECRET }}
+        VITE_APP_ENV: STAGING
+        VITE_APP_NEUROSTORE_API_DOMAIN: ${{ secrets.VITE_APP_NEUROSTORE_API_DOMAIN }}
+        VITE_APP_NEUROSYNTH_API_DOMAIN: ${{ secrets.VITE_APP_NEUROSYNTH_API_DOMAIN }}
       with:
-        build: npm run build:dev
-        start: npm run start-ci:dev
+        build: npm run build:staging
+        record: true
+        start: npm run serve-build
         browser: chrome
         wait-on: http://localhost:3000
         working-directory: /home/runner/work/neurostore/neurostore/compose/neurosynth-frontend

compose/neurosynth-frontend/.env.example

@@ -1,8 +1,8 @@
-REACT_APP_AUTH0_DOMAIN=dev-mui7zm42.us.auth0.com
-REACT_APP_AUTH0_CLIENT_ID=YOUR_NEUROSTORE_API_AUTH0_CLIENT_ID
-REACT_APP_AUTH0_CLIENT_SECRET=YOUR_AUTH0_CLIENT_SECRET
-REACT_APP_AUTH0_AUDIENCE=localhost
-REACT_APP_NEUROSTORE_API_DOMAIN=http://localhost/api
-REACT_APP_NEUROSYNTH_API_DOMAIN=http://localhost:81/api
-REACT_APP_ENV=DEV
-REACT_APP_PUBMED_API_KEY=YOUR_PUBMED_KEY
+VITE_APP_AUTH0_DOMAIN=dev-mui7zm42.us.auth0.com
+VITE_APP_AUTH0_CLIENT_ID=YOUR_NEUROSTORE_API_AUTH0_CLIENT_ID
+VITE_APP_AUTH0_CLIENT_SECRET=YOUR_AUTH0_CLIENT_SECRET
+VITE_APP_AUTH0_AUDIENCE=localhost
+VITE_APP_NEUROSTORE_API_DOMAIN=http://localhost/api
+VITE_APP_NEUROSYNTH_API_DOMAIN=http://localhost:81/api
+VITE_APP_ENV=DEV
+VITE_APP_PUBMED_API_KEY=YOUR_PUBMED_KEY

compose/neurosynth-frontend/__mocks__/@auth0/auth0-react.ts

@@ -0,0 +1,16 @@
+import { vi } from 'vitest';
+
+const useAuth0 = vi.fn().mockReturnValue({
+    getAccessTokenSilently: vi.fn().mockImplementation(() => {
+        return Promise.resolve('test-token');
+    }),
+    loginWithPopup: vi.fn(),
+    logout: vi.fn(),
+    isAuthenticated: false,
+    isLoading: false,
+    user: {
+        sub: 'some-github-user',
+    },
+});
+
+export { useAuth0 };

compose/neurosynth-frontend/__mocks__/notistack.ts

@@ -0,0 +1,7 @@
+import { vi } from 'vitest';
+
+const useSnackbar = vi.fn().mockReturnValue({
+    enqueueSnackbar: vi.fn(),
+});
+
+export { useSnackbar };

compose/neurosynth-frontend/__mocks__/react-query.ts

@@ -0,0 +1,13 @@
+import { vi } from 'vitest';
+
+const useQueryClient = vi.fn().mockReturnValue({
+    invalidateQueries: vi.fn(),
+});
+
+const useQuery = vi.fn().mockReturnValue({
+    data: null,
+    isLoading: false,
+    isError: false,
+});
+
+export { useQueryClient, useQuery };

compose/neurosynth-frontend/src/__mocks__/react-router-dom.tsx renamed to compose/neurosynth-frontend/__mocks__/react-router-dom.tsx

@@ -1,12 +1,13 @@
+import { vi } from 'vitest';
 import { NavigateProps } from 'react-router-dom';
 
-const useParams = jest.fn().mockReturnValue({
+const useParams = vi.fn().mockReturnValue({
     projectId: 'test-project-id',
 });
 
-const useNavigate = jest.fn().mockReturnValue(jest.fn());
+const useNavigate = vi.fn().mockReturnValue(vi.fn());
 
-const useLocation = jest.fn().mockReturnValue({
+const useLocation = vi.fn().mockReturnValue({
     location: {
         search: '',
     },

compose/neurosynth-frontend/cypress.config.ts

@@ -24,11 +24,11 @@ export default defineConfig({
     env: {
         auth0Username: '[email protected]',
         auth0Password: 'password',
-        auth0ClientId: process.env.REACT_APP_AUTH0_CLIENT_ID,
-        auth0ClientSecret: process.env.REACT_APP_AUTH0_CLIENT_SECRET,
-        auth0Domain: process.env.REACT_APP_AUTH0_DOMAIN,
-        auth0Audience: process.env.REACT_APP_AUTH0_AUDIENCE,
-        neurostoreAPIBaseURL: process.env.REACT_APP_NEUROSTORE_API_DOMAIN,
-        neurosynthAPIBaseURL: process.env.REACT_APP_NEUROSYNTH_API_DOMAIN,
+        auth0ClientId: process.env.VITE_APP_AUTH0_CLIENT_ID,
+        auth0ClientSecret: process.env.VITE_APP_AUTH0_CLIENT_SECRET,
+        auth0Domain: process.env.VITE_APP_AUTH0_DOMAIN,
+        auth0Audience: process.env.VITE_APP_AUTH0_AUDIENCE,
+        neurostoreAPIBaseURL: process.env.VITE_APP_NEUROSTORE_API_DOMAIN,
+        neurosynthAPIBaseURL: process.env.VITE_APP_NEUROSYNTH_API_DOMAIN,
     },
 });

compose/neurosynth-frontend/public/index.html renamed to compose/neurosynth-frontend/index.html

@@ -2,21 +2,23 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
         <meta name="description" content="Neurosynth-Compose App" />
-        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+        <link rel="apple-touch-icon" href="/logo192.png" />
         <!--
             manifest.json provides metadata used when your web app is installed on a
             user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
         -->
-        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <link rel="manifest" href="/manifest.json" />
 
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
         <link rel="preload" as="image" href="/static/brain-analysis.png" type="image/png">
 
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />
+
         <link
             rel="stylesheet"
             media="print"
@@ -46,16 +48,6 @@
         <script async src="https://w.appzi.io/w.js"></script>
 
         <!-- End Appzi -->
-
-        <!--
-            Notice the use of %PUBLIC_URL% in the tags above.
-            It will be replaced with the URL of the `public` folder during the build.
-            Only files inside the `public` folder can be referenced from the HTML.
-
-            Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-            work correctly both with client-side routing and a non-root public URL.
-            Learn how to configure a non-root public URL by running `npm run build`.
-        -->
         <title>neurosynth compose</title>
     </head>
     <body>
@@ -71,6 +63,7 @@
             To begin the development, run `npm start` or `yarn start`.
             To create a production bundle, use `npm run build` or `yarn build`.
         -->
-        <div id="portal" style="position: fixed; left: 0; top: 0; z-index: 9999;" />
+        <div id="portal" style="position: fixed; left: 0; top: 0; z-index: 9999;"></div>
+        <script type="module" src="/src/index.tsx"></script>
     </body>
 </html>