feat: add support badge Username component

[Robert-LC]

PR Checklist

• [x] - Commit messages are descriptive, it will be used in our Release Notes

PR Type

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)
• [ ] Developer experience (improves developer workflows for contributing to the project)

Description

Adds a support badge to the username component, with some conditions. If the user is verified and a supporter, it shows a verified badge. If they are only a supporter, it shows a supporter badge.

Git Issues

Closes #3263

Screenshots/Videos

Supporter

Verified Supporter

[Robert-LC]

I went through and fixed some errors that popped because I didn't reference the new IsSupporter prop on existing Username component calls. Still working on the Cypress tests.

[davehakkens]

How are the Cypress tests going @Robert-LC? Would be a nice one to merge before we start here in Project Kamp :)

[Robert-LC]

@davehakkens, I'll have to get with @benfurber and pair program this one out, as I've never really done anything like this before, and I need help connecting the dots.

I dove into the Patreon and OAuth connection flow, and not sure what the best way to conduct these tests are.

My understanding of the flow is:

• We send them to the oauth2 page with a redirect to our /patreon page once they connect their account
• With that we get back access_token
• use that token to query Patreon API to get back a user
• Build data into a PatreonUser object
• If their a supporter, set them as a supporter
• Save the user and all its updated properties into the db

I'm having trouble on where to put the test, how in-depth I should go, and where/what I should intercept.

Right now, I've added the beginnings of a test to settings.spec.ts, where I do the following

• Login
• Navigate to Settings
• Click the Connect to Patreon button

Here is where I get confused.

Should I cy.intercept() the initial GET request that sends them to the oauth2 page?

Or should I actually login with an account we have for testing(not sure if we do), get back a real response, and then from there redirect to /patreon, let it call the POST to /oauth2/token, get back the access_token, and finally intercept the /api/ouath2/v2/identity call?

Then another part of me thought, "Should this even be a test in settings.spec.ts?"

Maybe, its better to find a user in the db that is a supporter (or create one), and simply make a e2e test of them logging in, making a comment, making a post, etc, and checking if their badge is visible.

[benfurber]

@Robert-LC Let's sync and give the testing one more go in a follow-up PR. As the feature seems to work, I'll tidy-up in the branch to get CI passing so we can merge now this in as is.

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 9775166):

https://onearmy-next--pr3370-feat-profile-add-sup-nmti3cht.web.app

_{(expires Fri, 10 May 2024 15:11:20 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 6d65e4f8fee2f6ab2da0c1c3b85b8797d66afa59}

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 94.62366% with 5 lines in your changes are missing coverage. Please review.

Project coverage is 66.01%. Comparing base (7aa36b4) to head (9775166).

Files	Patch %	Lines
...ts/src/ArticleCallToAction/ArticleCallToAction.tsx	90.00%	1 Missing :warning:
...s/components/src/UserStatistics/UserStatistics.tsx	92.85%	1 Missing :warning:
...kages/components/src/Username/Username.stories.tsx	96.15%	1 Missing :warning:
src/pages/Howto/Content/HowtoList/HowToCard.tsx	0.00%	1 Missing :warning:
src/pages/Research/Content/ResearchListItem.tsx	0.00%	1 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3370      +/-   ##
==========================================
- Coverage   66.05%   66.01%   -0.04%     
==========================================
  Files         418      418              
  Lines       13522    13548      +26     
  Branches     2492     2493       +1     
==========================================
+ Hits         8932     8944      +12     
- Misses       4538     4552      +14     
  Partials       52       52              

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[cypress[bot]]

Passing run #5392 ↗︎

0

98

0

0

0

Details:

fix: type import for call to action
Project: onearmy-community-platform	Commit: 9775166b77
Status: Passed	Duration: 05:37 💡
Started: Apr 10, 2024 1:28 PM	Ended: Apr 10, 2024 1:34 PM

Review all test suite changes for PR #3370 ↗︎

[onearmy-bot]

:tada: This PR is included in version 1.170.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: