Some minor changes to the documentation to update the frontend projec…

…t structure. Moved the reset tokens button to a menu in the globus transfer button. Globus transfer and wget download are separated into their own buttons using download type to select which is displayed. Updated tests as needed and added new ones for the reset token feature. Updated react joyride tour to mention changes on the summary table.

docs/docs/contributors/frontend_development.md

@@ -39,19 +39,18 @@ Adapted from sources:
 
 ```scaffold
 frontend
-├── Dockerfile
 ├── public
+│ ├── changelog
+│ │ ├── ...previous changelogs
+│ │ └── v1.3.4.md
+│ ├── messages
+│ │ └── metagrid_messages.md
 │ ├── favicon.ico
 │ ├── index.html
-│ └── manifest.json
+│ ├── manifest.json
+│ └── robots.txt
 ├── src
 │ ├── api
-│ │ ├── mock
-│ │ │ ├── fixtures.ts
-│ │ │ ├── server-handlers.test.ts
-│ │ │ ├── server-handlers.ts
-│ │ │ ├── server.ts
-│ │ │ └── setup-env.ts
 │ │ ├── index.test.ts
 │ │ ├── index.ts
 │ │ └── routes.ts
@@ -69,9 +68,11 @@ frontend
 │ │ └── utils.ts
 │ ├── components
 │ │ ├── App
+│ │ │ ├── recoil
+│ │ │ │ └── atoms.ts
 │ │ │ ├── App.css
-│ │ │ ├── App.tsx
-│ │ │ └── App.test.tsx
+│ │ │ ├── App.test.tsx
+│ │ │ └── App.tsx
 │ │ ├── Cart
 │ │ └── ...
 │ ├── contexts
@@ -87,8 +88,22 @@ frontend
 │ │ ├── keycloak
 │ │ │ └── index.ts
 │ ├── test
-│ │ └── custom-render.tsx
-│ ├── env.ts
+│ │ ├── __mocks__
+│ │ │ ├── assetFileMock.js
+│ │ │ ├── js-pkce.ts
+│ │ │ ├── keycloak-js.tsx
+│ │ │ └── ReactMarkdownMock.tsx
+│ │ ├── mock
+│ │ │ ├── fixtures.ts
+│ │ │ ├── mockStorage.ts
+│ │ │ ├── server-handlers.test.ts
+│ │ │ ├── server-handlers.ts
+│ │ │ ├── server.ts
+│ │ │ └── setup-env.ts
+│ │ ├── custom-render.tsx
+│ │ └── jestTestFunction.tsx
+│ ├── types
+│ │ └── globals.ts
 │ ├── index.css
 │ ├── index.tsx
 │ └── setupTests.ts
@@ -97,23 +112,22 @@ frontend
 ├── .gitignore
 ├── .prettierignore
 ├── .prettierrc
-├── docker-compose.prod.yml
-├── docker-compose.yml
+├── Dockerfile
+├── index.html
+├── Makefile
+├── messageData.json
+├── nginx.conf
 ├── package.json
 ├── README.md
 ├── tsconfig.json
+├── vite.config.js
 └── yarn.lock
 ```
 
 - `Dockerfile` - The Dockerfile used by docker compose for the frontend
-- `public/` - stores static files used before app is compiled [https://create-react-app.dev/docs/using-the-public-folder/#when-to-use-the-public-folder](https://create-react-app.dev/docs/using-the-public-folder/#when-to-use-the-public-folder)
+- `public/` - stores static files used before app is compiled
 - `src/` - where dynamic files reside, the **bulk of your work is done here**
   - `api/` - contains API related files
-    - `mock/` - API mocking using [_mock-service-worker_](https://mswjs.io/docs/) package to avoid making real requests in test suites. More info [here](https://kentcdodds.com/blog/stop-mocking-fetch)
-      - `fixtures.ts` - stores objects that resemble API response data
-      - `server-handlers.ts` - handles requests to routes by mapping fixtures as responses to each route endpoint
-      - `server.ts` - sets up mock service worker server with server-handlers for tests. Essentially, it creates a mock server that intercepts all requests and handle it as if it were a real server
-      - `setup-envs.ts` - imports the mock service worker server to all tests before initialization
     - `index.ts` - contains promise-based HTTP client request functions to APIs, references `routes.ts` for API URL endpoints
     - `routes.ts` - contains routes to APIs and error-handling
   - `assets/` - stores assets used when the app is compiled
@@ -123,14 +137,21 @@ frontend
   - `contexts/` - stores React [Context](https://reactjs.org/docs/context.html) components, such as for authentication state
   - `lib/` - stores initialized instances of third party library that are exported for use in the codebase (e.g. Axios, Keycloak)
   - `test/` - contains related files and functions shared among tests
+    - `__mocks__/` - Directory containing mock versions of required dependencies to ensure they work with tests
+      - `js-pkce.ts` - A mock of the js-pkce.ts library used for Globus transfer steps
+      - `keycloak-js.tsx` - A mock of the keycloak-js library used for Keycloak authentication
+    - `mock/` - API mocking using [_mock-service-worker_](https://mswjs.io/docs/) package to avoid making real requests in test suites. More info [here](https://kentcdodds.com/blog/stop-mocking-fetch)
+      - `fixtures.ts` - stores objects that resemble API response data
+      - `mockStorage.ts` - functions and code that handles persistent storage requests for the test suite
+      - `server-handlers.ts` - handles requests to routes by mapping fixtures as responses to each route endpoint
+      - `server.ts` - sets up mock service worker server with server-handlers for tests. Essentially, it creates a mock server that intercepts all requests and handle it as if it were a real server
     - `custom-render.tsx` - wraps the react-testing-library render method with contexts from `/context`
+    - `jestTestFunctions.tsx` - contains a set of helper functions that are used by various tests
   - `setupTests.ts` - configuration for additional test environment settings for jest
 - `.dockerignore` - files and folders to ignore when building docker containers
-- `eslintrc.js` - configuration file for ESLint
+- `.eslintrc.js` - configuration file for ESLint
 - `.prettierignore` - files and folders to ignore when running prettier
 - `.prettierrc` - configuration file for prettier
-- `docker-compose.prod.yml` - the production overlay for docker-compose
-- `docker-compose.yml` - the local development config for docker-compose
 - `tsconfig.json` - configuration file for TypeScript
 - `yarn.lock` - the purpose of a lock file is to lock down the versions of the dependencies specified in a package.json file. This means that in a yarn.lock file, there is an identifier for every dependency and sub dependency that is used for a project
 

frontend/src/common/reactJoyrideSteps.ts

@@ -133,7 +133,8 @@ export const cartTourTargets = {
   datasetBtn: new TargetObject(),
   libraryBtn: new TargetObject(),
   downloadAllType: new TargetObject(),
-  downloadAllBtn: new TargetObject(),
+  downloadWgetBtn: new TargetObject(),
+  downloadTransferBtn: new TargetObject(),
   globusCollectionDropdown: new TargetObject(),
   removeItemsBtn: new TargetObject(),
 };
@@ -666,7 +667,7 @@ export const createCartItemsTour = (setCurrentPage: (page: number) => void): Joy
   tour
     .addNextStep(
       cartTourTargets.cartSummary.selector(),
-      'This shows a summary of all the datasets in the cart. From here you can see the total datasets, files and total file size at a glance. Note: The summary is visible to both the data cart and search library.'
+      "This shows a summary of all the datasets you've added and selected in the cart. From here you can see the number of datasets, files and file size of both the cart and your selected datasets at a glance. Note: The summary is visible to both the data cart and search library."
     )
     .addNextStep(
       '.ant-table-container',
@@ -713,7 +714,7 @@ export const createCartItemsTour = (setCurrentPage: (page: number) => void): Joy
       'top-start'
     )
     .addNextStep(
-      cartTourTargets.downloadAllBtn.selector(),
+      cartTourTargets.downloadTransferBtn.selector(),
       'After selecting your collection, click this button to start the download for your selected cart items.',
       'top-start',
       /* istanbul ignore next */
@@ -872,7 +873,7 @@ export const createSearchCardTour = (setCurrentPage: (page: number) => void): Jo
   tour
     .addNextStep(
       cartTourTargets.cartSummary.selector(),
-      'This shows a summary of all the datasets in the data cart. The summary is visible to both the data cart and search library.'
+      "This shows a summary of all the datasets you've added and selected in the data cart. The summary is visible to both the data cart and search library."
     )
     .addNextStep(
       savedSearchTourTargets.savedSearches.selector(),