chaynhq/bloom-frontend

Code for the for the frontend of the Bloom service.

bloom-frontend's Issues

Spanish Create User Test

Overview

All our testing is currently in english and we want to ensure our other site languages are working. This need came from an incident where a bug happened on all browser languages except for english and the cypress tests did not catch it.

Action Items

• Get Cypress tests up and running. See Cypress Readme
• Create your own branch
• Take a look at this german example of the test
• Duplicate this test in Spanish and name it create-user.es.cy.tsx. Note that you will have to update some of the test assertions to match the spanish version of the site. Take a look at bloom.chayn.co/es for the spanish version of the site to find the equivalent text.
• See notes below for helpers
• Commit and push your changes and create a PR.
• Tag @eleanorreem for a review

Resources/Instructions

• Cypress readme
• Ensure you create a custom visitSpanishPage that replicates the behaviour of visitGermanPage in this file
• You will also have to update the type file

Enable Cypress test coverage

Overview

We would like to know how much of our code is covered by Cypress tests. We don't need this to be part of the CI flow but to run with a command locally. Ideally we would run yarn cypress:cov and we would receive a stat for how much code our E2E tests cover.

Action Items

• Create a branch
• Research into how to set up Cypress test coverage.
• Its likely you will need to install cypress/code-coverage plugin
  
• Make changes to enable code coverage stats
• Commit changes to branch and make pull request

Resources/Instructions

Cypress test coverage docs

Docs: Git Flow Update

Overview

Recently, Bloom's frontend deployments were updated from from Heroku to Vercel.
Additionally, we determined new standards for keeping out git flow organized: (#720). Those standards being: 1) develop is staying our default branch 2) maintainers must only merge commits from develop to main, never squash or rebase, to keep the main's git history identical to develop.

These recent changes need updated in several areas of Bloom's docs:

Action Items

• Update README.
• Update internal maintainer docs.
• Update CONTRIBUTING.md file.

Resources/Instructions

NextJS: Upgrade From Pages to App

Overview

NextJS Apps is the upgraded version of NextJS Pages. We should leverage the additional features and benefits by upgrading Bloom's frontend to NextJS Apps.

Benefits of NextJS Apps include but not limited to: enhanced scalability from improved modular approaches, advanced routing capabilities, improved performance in server-side rendering and static site generation, built-in optimizations for high traffic.

Action Items

• Upgrade to Node 18: #703 to unblock
• Follow this guide on upgrading to new features, such as the improved Image and Link Components: NextJS Apps: New Feature Guide.
• Follow this guide on incrementally migrating from pages to app directory: NextJS Apps: Migrating from pages to app Guide.

Note: Please document the changes to be made with the upgrades. If there are many or highly complex changes, we will open new issues for them.

Resources/Instructions

• NextJS Docs: From Pages to App

Node: Upgrade to version 20

Overview

We should upgrade to Node 20. Node 17 is no longer supported, and Node 18 is required to fully leverage NextJS. There will likely be dependency issues as part of this change, so it will require a bit of time.

Action Items

• Upgrade Node to 18 in package.json
• Run tests and document any errors that must be fixed. If there are many or highly complex errors, we will open new issues for them.
• Fix any issues that may arise.
• Specify node version in GitHub Actions in /workflows directory.
• Specify node version in README documentation.

Resources/Instructions

• NodeJS Blog: Node.js 18 is now available!
• How to Upgrade Node and NVM Locally

Link the /docs folder in the README.md

Overview

We have recently created a /docs directory in this repo to store technical documentation separate from the README.md and we need to link contributors to this directory in the README.md, similar to how Soulmedicine is organized.

Action Items

• Write the following sentence under the "Bloom Frontend" section title in the README.md:
  "For a more detailed explanation of this project's key concepts and architecture, please visit the /docs directory."
• Make sure the above sentence contains a Markdown link to the /docs directory, which would be: https://github.com/chaynHQ/bloom-frontend/tree/develop/docs (This is where a README.md file will be located in the near future.)

Please disregard failing tests as we are currently upgrading their performance. Thank you!

Resources:

• How to make Markdown Links

Portuguese initial exploration Cypress test

Overview

All our testing is currently in english and we want to ensure our other site languages are working. This need came from an incident where a bug happened on all browser languages except for english and the cypress tests did not catch it.

Action Items

• Get Cypress tests up and running. See Cypress Readme
• Create your own branch
• Take a look at this english example of the test
• Duplicate this test in Portuguese and name it initial-exploration.pt.cy.tsx. Note that you will have to update some of the test assertions to match the Portuguese version of the site. Take a look at bloom.chayn.co/pt for the Portuguese version of the site to find the equivalent text.
• See notes below for helpers
• Commit and push your changes and create a PR.
• Tag @eleanorreem for a review

Resources/Instructions

• Cypress readme
• You may need to create a custom visitPortuguesePage that replicates the behaviour of visitGermanPage in this file
• If you create a new support function, you will also have to update the type file

NextJS: Upgrade to version 14

Overview

While NextJS 13 will be supported for the forseeable future, we should consider upgrading to NextJS 14 to leverage NextJS's newest features and 14's stronger support for bug fixes and security patches.

Action Items

• Upgrade to Node 18: #703 to unblock.
• Follow this guide to upgrade to 14: NextJS Docs: Upgrading to 14
• Run all tests and report any errors here. If there are many or highly complex errors, we will open new issues for them. Otherwise, please resolve these errors.

Resources/Instructions

• NextJS Blog: Introducing 14
• Medium blog post: Should I update my app to Next 14?

Add link to CONTRIBUTING.md file in README.md

Overview

We need to link to the CONTRIBUTING.md file in the README.md so contributors can more easily see the contributing guidelines.

Action Items

• Under the title in Local Development section in the README.md, add the following:
  "To make a contribution, please read our Contributing Guidelines in CONTRIBUTING.md"
• Make sure the sentence above contains a Markdown link to the repo's CONTRIBUTING.md file.

Resources/Instructions

• How to Create Markdown Links

Move README.md documentation to new /docs directory

Overview

We should simplify our README by separating the key concepts and architecture guides into their own separate /docs directory, similar to how Soulmedicine is organized, and turn the README into a brief overview of the project and quick start guide.

Action Items

• Create a /docs folder in the root directory.
• Move everything under the Key Concepts section of the README.md and before the Cypress section into the /docs folder in a file called key-concepts.md

Migrate Firebase away from compat version

Overview

We migrated Firebase up to version 9 but we are still using the /compat/ version which is compatible with Version 8. We would like to be using Version 9.

Action Items

• Create a branch for your work
• Read through suggested resources below
• Make changes to ensure we are no longer using the compat package
• Run Cypress Tests locally to ensure that all the changes have not broken the Hapi paths.
• Commit and Make a PR and tag @eleanorreem and @kyleecodes

Resources/Instructions

See firebase npm resources

Write cypress test for login flow

To get started, read through this document to get more information on how Cypress is used in Bloom.

Once you feel comfortable with Cypress and have created an example e2e test as outlined in the Cypress guides, please ping the team to get more information on how to write this ticket :)

Audit: Cypress tests for contributors

Overview

A duplicate of this issue - https://github.com/chaynHQ/ysm/issues/228 but with special attention to Cypress environment variables.
Currently these tests cannot be ran by contributors. We need to update the documentation to reflect this and note of potential new issues to increase e2e test coverage.

Action Items

• Gather test env vars
• Complete issue - #705
• Discuss solutions for inaccessible Cypress env vars
• Update docs and create new issues if needed.

Resources/Instructions

• Currently, integration tests are inaccessible to outside contributors. Bumble and badoo testing env vars are impossible for external contributors to source, and very few available for staff.
• Integration tests are being ran using GitHub Secrets in GitHub Actions.

Configure PR templates

Overview

We need to create PR templates to guide contributors through submitting pull requests on Bloom
Additionally this helps fulfill Community Standards for this repo.

Action Items

• Research project-specific requirements before opening a PR on Bloom.
• Create pull request templates.

Resources

• Official GitHub Docs - Creating a pull request template for your repository
• Example PR templates

Bump protobufjs from 6.11.3 to 6.11.4

Overview

Dependabot pull requests are automatically created. Our cypress tests don't currently run against code on the branch so we need to run them manually for now. An automated way of doing this is in the pipeline. However, for now we need to run the tests manually

Action Items

• Clone the branch raised by dependabot to your local computer
• Run up both bloom-backend and bloom-frontend to ensure that this change in dependency has not affected the site
• Run unit tests to ensure they're all passing
• Run cypress tests to ensure they're all passing
• Commit any changes to the branch and push up
• Comment on the ticket that this change has been verified and request reviews from the team (@kyleecodes)

GH Flow: new descriptive issue labels

Overview

We need more descriptive labels for issues and pull requests to help organize our progress.

Action Items

• Apply issue labels found in the organizational settings to this repo (Unfortunately, the organization's default repo labels only apply to new repos and do not sync with pre-existing repos when updated!)
• Labels should include priority levels, state, type, and complexity

Resources/Instructions

• Sane Issue Labeling Guide

Research and implement new git flow pattern

Overview

As internally discussed, we experienced anomalies with our current git flow, resulting in an out-of-sync main branch. We determined the cause to be squashing commits into main, resulting in main being out of sync with develop. Additionally, there are reported anomalies with having a default branch other than main, as well as contributors commonly mistaking main to be the default branch.

Action Items

• Research new git flow process.
• Collaborative determine and sign-off on a new process.
• Implement new git flow process (github actions if needed & @kyleecodes - docs)

Resources/Instructions

This issue was created retroactively.

Git Flow Highlights:

Ensure that the develop branch being "the source of truth" instead of main is thoroughly explained and re-iterated throughout our docs.

Contributor Flow: fork, clone, pull request feature-branch -> develop
Maintainer Flow:

• contributor pull request feature-branch -> develop: squash and merge, squash > rebase to enforce linear git history.
• develop into main: only merge commits, never squash or rebase to help keep both branches in sync.

Chayn Staff: forking not always necessary. Recommended to delete old feature branches to avoid re-using the same feature branch name.

Bump word-wrap from 1.2.3 to 1.2.4

Overview

Dependabot pull request are automatically created. Our cypress tests don't currently run against code on the branch so we need to run them manually for now. An automated way of doing this is in the pipeline. However, for now we need to run the tests manually

Action Items

• Clone the branch raised by dependabot to your local computer
• Run up both bloom-backend and bloom-frontend to ensure that this change in dependency has not affected the site
• Run unit tests to ensure they're all passing
• Run cypress tests to ensure they're all passing
• Commit any changes to the branch and push up
• Comment on the ticket that this change has been verified and request reviews from the team (@kyleecodes)

Remove PWA as it is not used

Background
We installed next-pwa a few months back so that our site could be a progressive web app. However, we haven't worked on it since then and are unlikely to in the near future. At the moment it is broken which means it is causing a lot of noise in our logs and is causing software bloat so we would like to remove it.

Task

• uninstall next-pwa
• remove any code to do with next-pwa
• Test happy paths

Redirect logged-in users away from login page

User story

As a logged-in user, when I navigate to the login page (e.g. through a bookmark or a link in an email), I am redirected to a different page e.g. the courses page.

This makes it clear to me that I am logged in.

Task

• if a user goes to /auth/login, check they are logged in
• if they are logged in redirect to the /courses page

Add Robot.txt

Overview

We need to give instructions to search engines and crawlers about where they can/ should go through a robot.txt file.
For now these are the Disallowed urls

• /admin/dashboard
• /partner-admin/create-access-code
• /account/apply-a-code

Action Items

• Create your own branch from develop branch
• Follow instructions in the resources listed below
• Ensure the URLs above are Disallowed
• Run cypress tests and unit tests locally to ensure nothing is broken
• Commit and push your PR
• Create a PR and tag @kyleecodes

Please disregard failing tests as we are updating their performance. Thank you!

Resources/Instructions

• See instructions about how to create a Robot.txt in nextjs

Custom 404 pages do not work on the dev server

Describe the bug
Our custom 404 pages are not working on the dev server but they do seem to work if you build the app. This only happened after the upgrade to nextjs 13.5.4

To Reproduce
Steps to reproduce the behavior:

1. Run the bloom-frontend with yarn dev.
2. go to localhost:3000/123
3. See default Next js 404 page.
4. Exit dev server
5. Run yarn build
6. Run yarn start
7. go to localhost:3000/123
8. See Custom 404 page which is src/pages/404.tsx

Expected behavior
On the dev server, we should be able to see the custom 404 page.

Screenshots
Nextjs Default

Custom 404

Desktop (please complete the following information):

• Macbook Pro 2021, Mac Os Monterey 12.2
• Browser Chrome
• Version 117.0.5938.132

Bump tough-cookie from 4.0.0 to 4.1.3

Overview

Dependabot pull requests are automatically created. Our cypress tests don't currently run against code on the branch so we need to run them manually for now. An automated way of doing this is in the pipeline. However, for now we need to run the tests manually

Action Items

• Clone the branch raised by dependabot to your local computer
• Run up both bloom-backend and bloom-frontend to ensure that this change in dependency has not affected the site
• Run unit tests to ensure they're all passing
• Run cypress tests to ensure they're all passing
• Commit any changes to the branch and push up
• Comment on the ticket that this change has been verified and request reviews from the team (@kyleecodes)

Bump terser from 5.12.0 to 5.14.2

Dependabot has already raised a PR for this.

Please also read through this part of the volunteer wiki to get more information on how to complete dependency upgrade issues.

Approach

• Clone the branch raised by dependabot to your local computer
• Run up both bloom-backend and bloom-frontend to ensure that this change in dependency has not affected the site
• Run unit tests to ensure they're all passing
• Run cypress tests to ensure they're all passing
• Commit any changes to the branch and push up
• Comment on the ticket that this change has been verified and request reviews from the team (@swetha-charles or @eleanorreem)

Helpful error message when applying a code that already exists

Overview

Please note that this ticket is blocked by this backend ticket

When a user is logged in they can apply a code on this form on /account/apply-a-code. However, if they accidentally apply the code twice, they get this unhelpful error message.

This is not the best and doesn't let the user know that they have already applied the code and don't need to do anything else.

The solution is:

• the backend will return a new error message ALREADY_APPLIED
• If the frontend receives this error, the message should read: 'This code has already been applied to your account'

Action Items

• Pull develop to ensure you have the most recent code
• Create your own branch
• Add ALREADY_APPIED to the enum PARTNER_ACCESS_CODE_STATUS in enums.ts
• Ensure that the frontend displays the right message 'This code has already been applied to your account' when the error code matched ALREADY_APPLIED. The file you will need to modify is /bloom-frontend/components/forms/ApplyCodeForm.tsx
• Create a PR and tag @eleanorreem .

Resources/Instructions

GitHub Action: implement automation for welcoming new contributors

Overview

Implement a GitHub Action that will automatically welcome new contributors in PRs.

Action Items

• Draft an informative message linking contributors to helpful information.
• Ensure that the action will not greet dependabot or any automated PRs.
• Write a new workflow and submit a PR.
• Document in internal docs.

Resources

https://github.com/marketplace/actions/auto-message-for-pr-s-and-issues
https://github.com/actions/first-interaction
https://github.com/marketplace/actions/first-interaction
https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#issue_comment

Remove unused workflows from .github folder

Overview

Remove .github/manual-deploy-staging and .github/manual-deploy-prod workflows. Both of these workflows do not work so there is no point them cluttering our repo.

Action Items

• Create a branch
• Remove .github/workflows/manual-deploy-staging.yml and .github/workflows/manual-deploy-prod.yml
• Create Pull request
• Await review

Resources/Instructions

Portuguese Create User Test

Overview

All our testing is currently in english and we want to ensure our other site languages are working. This need came from an incident where a bug happened on all browser languages except for english and the cypress tests did not catch it.

Action Items

• Get Cypress tests up and running. See Cypress Readme
• Create your own branch
• Take a look at this german example of the test
• Duplicate this test in Portuguese and name it create-user.pt.cy.tsx. Note that you will have to update some of the test assertions to match the Portuguese version of the site. Take a look at bloom.chayn.co/pt for the Portuguese version of the site to find the equivalent text.
• See notes below for helpers
• Commit and push your changes and create a PR.
• Tag @eleanorreem for a review

Resources/Instructions

• Cypress readme
• Ensure you create a custom visitPortuguesePage that replicates the behaviour of visitGermanPage in this file
• You will also have to update the type file

Upgrade Node to node 16+

Background
Github actions will no longer support node 12 soon. We are trying to upgrade all our applications to node 16 or higher.

Task

• upgrade node 16 to a higher a version as possible without affecting other packages. This might not be possible. There might be some packages that aren't compatible with node 16+ so you will need to upgrade them too.
• check all the happy paths work

Create CONTRIBUTING.MD file

Overview

We need to create a CONTRIBUTING.md file to guide developers contributing to Bloom.
Additionally this helps fulfill Community Standards for this repo.

Action Items

• Check out resources below as a guide.
• Contribute to Bloom to learn project-specific requirements.
• Draft CONTRIBUTING.md and open a PR.

Resources

• Official GitHub contributing guidelines guide
• Example CONTRIBUTING.md file by GitHub
• Example CONTRIBUTING.md file by Ruby for Good

Link to our Volunteer Info page in our README.md

Overview

Currently, our README links interested volunteers directly to the volunteer form, not to our volunteer info page (which contains the form). We need the README to link to the Getting Involved volunteer info page instead, similar to how our CONTRIBUTING.md file does.

Action Items

• Replace the text in the README.md under the Getting Involved section:
  If you would like to help Bloom and receive special access to our organization and volunteer opportunities, please get in touch with us to express your interest in volunteering via this form."
  with the following text:
  "If you would like to help Chayn and receive special access to our organization and volunteer opportunities, please visit our Getting Involved page."
• Make sure the above sentence contains a markdown link to our Getting Involved page: https://www.notion.so/chayn/Get-involved-423c067536f3426a88005de68f0cab19?pvs=4

Please disregard failing tests as we are updating their performance. Thank you!

Resources/Instructions

• How to make Markdown Links

Create maintenance page

User story

As a Bloom user, I want to know when Bloom is down for maintenance.

Background

Currently if we have a period of down time on Bloom backend we don’t have any mechanism to inform our users. They just have a poor user experience and see errors.

Proposal

• create a page that tells the user that the site is down for maintenance according to these designs below. We don’t need it to be beautifully accurate. We just need it functional.
• It should be turned off and on with a feature flag (see user research banner as an example)
• It should override all pages when turned on. i.e. if the feature flag is on. All pages should be redirected to the main
• The Nav bar should be just as if one is logged out (i.e. don’t worry too much about what appears)
• Under the hood there are a couple of design options. Please choose whichever you prefer:
  1. When the feature flag is on, redirect all users to a /maintenance page. When the feature flag is off, all users are redirected from /maintenance to home page.
  2. When feature flag is on, override the content of whatever the page the user has on. This is so when they refresh and the feature flag is turned off, they return to the same page they originally tried to access.## User story

As a Bloom user, I want to know when Bloom is currently not usable and when it will be back.

Designs

Assets

Update and organize README and concept docs.

Overview

Our README documentation is a little out of date and could be more simplified and organized. We could simplify our README by separating the key concepts and architecture guides into their own separate /docs directory, similar to how Soulmedicine is organized, and turn the README into a brief overview of the project and quick start guide.

Action Items

• Go through the README setup and apply updates to the README as necessary when coming across outdated information.
• Create a doc folder and move key concepts and architecture docs there.
• Write a brief summary of key concepts and link to the /docs in the README.
• Provide brief guides on sourcing the environment variables in the README, like a quickstart guide.

Resources/Instructions

Enable Super Admin users to update the status of Partner Admin users from active to inactive

Overview

Enable Super Admin users to update the status of Partner Admin users from active to inactive. This will happen on the /admin/dashboard page.

Action Items

• Ensure you have a few super admin and partner admin users created in Bloom-backend.

Initial State on page load

• Additional Card has been added with Title, Autocomplete Input and Button. The form field should require more than 3 letters before displaying options.
• Get Autocomplete Options from the backend. See the implementation of UpdateTherapyAdminForm. I would like the autocomplete form to work like that form with a debounced asynchronously populated options list. To populate the options field, you will need to send a request to GET /users like the UpdateTherapyAdminForm with the searchQuery that includes the "partner-admin" relation and with partnerAdmin.partnerAdminId field as "IS NOT NULL" (See UpdateTherapyAdminForm if this is not clear).

Once the user email is selected

• Render a checkbox, prefilled with the current state of the partner admin user. I.e. if they are active currently, the checkbox would be filled.
• Once the user checks or unchecks the box and presses the submit button. Send the relevant request to PATCH /partner-admin/:id
• Create some sensible error messages. We aren't too prescriptive about error states. If you loosely follow that pattern of UpdateTherapyAdminForm, that should be enough.

Once the request has been successful

• Display Success Text
• Ensure user can reset the form with the "Update another partner admin" form

Please note this ticket is dependent on this ticket in the backend to be completed.

Add security policy

Overview

Create a security policy to guide contributors through reporting a security vulnerability on Bloom.
Additionally this helps fulfill Community Standards for this repo.

Action Items

• Use GitHub's click-through process for maintainers to easily add universal security policies to their repos, found in this repos security tab.
• Then copy paste Chayn's security policy from YSM.

Resources/Instructions

• Official GitHub Docs - Adding a security policy to your repository

Upgrade Bloom Frontend to Node 17

Overview

We would like to upgrade Bloom-frontend to Node 17 as a step to the latest. There is likely to be dependency issues as part of this change so it will require a bit of time.

Action Items

• Create a branch from develop
• Have a look through the code and see all the places where the Node version is specified. I will list some but perhaps not all examples below.
• Update node version locally and try and install packages and run the application. You will probably encounter some errors which you will need to fix.
• Update ReadMe to specify Node version
• Update github actions to use newer version
• Commit and Push and tag @kyleecodes and @eleanorreem

Resources/Instructions

• https://medium.com/the-node-js-collection/node-js-17-is-here-8dba1e14e382
• https://blog.appsignal.com/2021/10/27/what-s-new-in-nodejs-17.html

Hindi Create User Test

Overview

All our testing is currently in english and we want to ensure our other site languages are working. This need came from an incident where a bug happened on all browser languages except for english and the cypress tests did not catch it.

Action Items

• Get Cypress tests up and running. See Cypress Readme
• Create your own branch
• Take a look at this german example of the test
• Duplicate this test in Hindi and name it create-user.hi.cy.tsx. Note that you will have to update some of the test assertions to match the hindi version of the site. Take a look at bloom.chayn.co/hi for the hindi version of the site to find the equivalent text.
• See notes below for helpers
• Commit and push your changes and create a PR.
• Tag @eleanorreem for a review

Resources/Instructions

• Cypress readme
• Ensure you create a custom visitHindiPage that replicates the behaviour of visitGermanPage in this file
• You will also have to update the type file

GitHub Actions: implement automation for unassigning abandoned issues

Overview

Implement a GitHub Action that automatically unassigns contributors from an issue after days of inactivity.
Starting out, we will do 3 months of inactivity, but will adjust as needed.

Action Items

• Draft a helpful message tagging the assignee.
• Design plan for the GitHub Action, document in internal docs.
• Write a new workflow and submit a PR.

Resources

https://docs.github.com/en/actions/using-workflows/creating-starter-workflows-for-your-organization
https://docs.github.com/en/actions/managing-issues-and-pull-requests/using-github-actions-for-project-management
https://github.com/marketplace/actions/unassign-contributor-after-days-of-inactivity
https://github.com/actions/stale
https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows

Testing: Outside Contributor Updates README.md

Overview

Testing outside contributor permissions by updating README.md

Action Items

Update the README.md by replacing broken CI workflow link with a working one.

Current:

New:

Resources/Instructions

test

Audit: Env Var Contributor Flow

Overview

We need to audit the contributor flow, specifically the process of how environment variables are obtained, to make certain that the process is seamless, secure, and free from setbacks. This ensures external contributors can have the confidence they need to make impactful contributions.

Action Items

• Add back the directions in the README for retrieving your own environment variables after they were removed in the latest Vercel upgrade PR.
• Retrieve testing variables for Cypress tests.
• Follow directions for running locally, gathering env vars, and running tests in the README from a Chayn insider perspective, while making note of any errors encountered in the process and documentation.
• Follow directions for running locally, gathering env vars, and running tests in the README from an outside contributors perspective, while making note of any errors encountered in the process and documentation.
• Check for the following:
  • that as many of the required env vars as possible are obtainable without Chayn's involvement.
  • any required env vars that cannot be obtained by an outside contributor are appropriately handled, such as being exclusively reserved for Chayn insiders, available upon request in GitHub issues, or linked in the README to a Notion doc where safe, secure env vars are provided (with limited privilege, are monitored and routinely changed, and with no connection to production).
• Handle the errors encountered by the audit by either fixing them in the documentation, or if many complex errors are encountered, opening new issues for them. Please document all the changes to be fixed here.
  • Create new issue for troubleshooting inaccessible integration testing Cypress environment variables: #742

Research

• Currently, integration tests are inaccessible to outside contributors. Bumble and badoo testing env vars are impossible for external contributors to source, and very few available for staff.
• Integration tests are being ran using GitHub Secrets in GitHub Actions.

French Create User Test

Overview

All our testing is currently in english and we want to ensure our other site languages are working. This need came from an incident where a bug happened on all browser languages except for english and the cypress tests did not catch it.

Action Items

• Get Cypress tests up and running. See Cypress Readme
• Create your own branch
• Take a look at this german example of the test
• Duplicate this test in French and name it create-user.fr.cy.tsx. Note that you will have to update some of the test assertions to match the spanish version of the site. Take a look at bloom.chayn.co/fr for the french version of the site to find the equivalent text.
• See notes below for helpers
• Commit and push your changes and create a PR.
• Tag @eleanorreem for a review

Resources/Instructions

• Cypress readme
• Ensure you create a custom visitFrenchPage that replicates the behaviour of visitGermanPage in this file
• You will also have to update the type file

Bloom CI pipeline badge not working

Describe the bug
The Bloom CI pipeline on the Readme is broken.

To Reproduce
Steps to reproduce the behavior:

1. Go to Readme.md
2. Look at the badge for the CI pipeline.
3. You will see that there is no badge in the screen shot below.

Expected behavior
We should see the "passing" badge as expected on github Repositories.

Screenshots

Additional context

• This bug is caused by the old pipeline being deleted. Instead we should be connecting to the deploy to staging pipeline.
• See resource about badges

Bump semver from 5.7.1 to 5.7.2

Overview

Check Dependabot pull request does not break the site.

Action Items

• Clone the branch raised by dependabot to your local computer
• Run up both bloom-backend and bloom-frontend to ensure that this change in dependency has not affected the site
• Run unit tests to ensure they're all passing
• Run cypress tests to ensure they're all passing
• Commit any changes to the branch and push up
• Comment on the ticket that this change has been verified and request reviews from the team (@kyleecodes)

Docs: Add Storyblok Token

Overview

Storyblok tokens cannot be created by outside contributors because they must contain Bloom content to be accurate. Given the Storyblok token is required, this blocks contributors. We have already created a Storyblok token for contributors here: #611. Now we must determine how we're going to share this with contributors.

Action Items

• Determine if we want to link the Notion page from the issue above so that we can change the Storyblok token without updating the docs... or if we want to plug it directly into the docs.
• Update the README docs with the Storyblok token.

Resources/Instructions

Dynamic route generation for /courses route in sitemap or other alternatives?

Overview

Currently the /courses routes are hidden behind a login page, which will prevent some web crawlers to access and index it. I am proposing some alternatives to allow some of this content to be accessed by web crawlers for better SEO and would love dev feedback on the best way forward

Action Items

While working on issue #610 , I noticed that /courses is protected behind a login page. I added some code to dynamically add /courses routes to the sitemap for the project which would help in better SEO for the website.

On @kyleecodes 's recommendation, I am opening this issue for gathering dev feedback on the best way forward. Here are some ideas/alternatives I proposed in my original comment while talking with Kylee.

So currently I have static routes manually entered in the sitemap and some code for representing the dynamic routes under /courses. As the /courses routes are being login access, web crawlers cannot access them UNLESS the web crawlers use some specialized package/code to use login credentials and view /courses. Here we have two options:

If you want the /courses routes to not be accessible to web crawlers, I can add them to the disallow list in robots.txt!

If you do want the /courses routes to be accessible to web crawlers, I can figure out how to get dynamic route paths from getStaticProps and replace my current code for adding these routes to the sitemap. From my understanding, if I implement this correctly, everytime a new course is added, the sitemap would automatically be updated with the route for that course withoute needing manual editing of the sitemap.

Alternatively, if you would like the /course route to be protected from web crawlers yet still have some data on courses available for SEO, I can create a new route for just displaying some course info on the frontend. That way you can choose what gets displayed and this route will be a static route that doesn't need to be updated, nor is it behind login access. This route would be like a sneak peek or a welcome brochure to the courses without showing everything in them if that makes sense? Just something for the web crawlers to look at and know what the website's about and what it's offering.

I would love to get some feedback on whether or not to disallow /courses from robots.txt, add it to the sitemap or to create a small courses page which will display info on the courses so web crawlers can index it. I am not privy to the contents of these courses so I can not make the call whether they should be hidden from web crawlers or not.

Resources/Instructions

• Creating dynamic sitemaps in Next 12
  https://nextjs.org/learn/seo/crawling-and-indexing/xml-sitemaps\
  https://claritydev.net/blog/nextjs-dynamic-sitemap-pages-app-directory

Bump @grpc/grpc-js from 1.4.4 to 1.8.20

Overview

Check Dependabot pull request does not break the site.

Action Items

• Clone the branch raised by dependabot to your local computer
• Run up both bloom-backend and bloom-frontend to ensure that this change in dependency has not affected the site
• Run unit tests to ensure they're all passing
• Run cypress tests to ensure they're all passing
• Commit any changes to the branch and push up
• Comment on the ticket that this change has been verified and request reviews from the team (@kyleecodes)

Tabs Error in the Console on Home page when logged in

Describe the bug
When you are logged in and on the home page, you get an error in the console.

next-dev.js:20 MUI: The `value` provided to the Tabs component is invalid.
None of the Tabs' children match with "-1".
You can provide one of the following values: 0, 1, 2, 3, 4.

This comes from the SecondaryNav component. When we are on the home page, we are not in any of the tabs and the value is set as -1. -1 is not an index in the tabs.

To Reproduce

1. Go to / in bloom
2. Click on Login in the header
3. Log in with credentials/ create an account
4. Once logged in return to the home page
5. Look at the console and you will see the error

Expected behavior
We have no error in the console. Ideally we would not set a value at all. If you look at these [docs](https://mui.com/material-ui/api/tabs/) - it looks like you can set the value to false and it will select nothing and we won’t get the error.

Desktop (please complete the following information):
All OS and Browsers

Error in MUI Tabs component

Describe the bug
Console Error for MUI tabs. Doesn't affect functionality but best to clean up the console.

To Reproduce
Steps to reproduce the behavior:

1. Go to localhost:3000/ in your dev environment
2. Click on Login in the header
3. Log in with credentials/ create an account
4. Once logged in return to the home page
5. Look at the console and you will see the error

The error in the console shows

next-dev.js:20 MUI: The value provided to the Tabs component is invalid.
None of the Tabs' children match with "-1".
You can provide one of the following values: 0, 1, 2, 3, 4.

Expected behavior
We have no error in the console. Ideally we would not set a value at all. If you look at these [docs](https://mui.com/material-ui/api/tabs/) - it looks like you can set the value to false and it will select nothing and we won’t get the error.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS monterey
• Browser Chrome
• Version 116.0.5845.179

Additional context
This comes from the SecondaryNav component. When we are on the home page, we are not in any of the tabs and the value is set as -1.

Expand Cypress test for creating an access code

Overview

We have a test that checks whether a user is sent to the partner admin dashboard on load if they have partner admin authentication - see partner-admin.cy.tsx. However, we don't check whether they successfully can make an access code.

Action Items

• Ensure you have cypress tests running.
• Create branch and get the cypress tests running
• Add the next steps to the test:
• Create partner access code by clicking on the generate code button
• Ensure the success message appears after the code has been generated
• Run cypress tests to ensure your test passes
• Create a PR and tag @kyleecodes or @eleanorreem

Resources/Instructions

• Cypress docs