Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add appless pre-PAT onboarding container #3629

Open
wants to merge 8 commits into
base: cy/non_pat_appless
Choose a base branch
from

Conversation

calvin-codecov
Copy link
Contributor

@calvin-codecov calvin-codecov commented Jan 3, 2025

Description

Closes codecov/engineering-team#2735 and codecov/engineering-team#2740

Add ?source=onboarding to the end of the org page url and reload. This will trigger the onboarding container to show up

Notable Changes

  • Adds the onboarding container at the top of the org page
  • Adds a new version of the AppInstallModal to be opened by the onboarding container. I ended up deciding to reuse the AppInstallModal we have currently (titled: "Shared Request") as it is quite similar and essentially serves the same purpose, just in different parts of the app. Consolidation in the future would probably make the most sense but I'll revisit with Adalene in the future.

Figma file: https://www.figma.com/design/SsoxtY2SB73l0wiLbJ8FhZ/GH-2092?node-id=2288-16704&t=Z9J60jqfEmR3QjIK-1

Screenshots

Screenshot 2025-01-08 at 1 03 14 PM Screenshot 2025-01-08 at 1 37 09 PM Screenshot 2025-01-08 at 1 37 12 PM

Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. In 2022 this entity acquired Codecov and as result Sentry is going to need some rights from me in order to utilize my contributions in this PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.

@codecov-staging
Copy link

codecov-staging bot commented Jan 3, 2025

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
4162 1 4161 0
View the top 1 failed tests by shortest run time
src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/TeamPlanController/BillingOptions/BillingOptions.test.tsx > BillingOptions > when rendered > planString is set to annual plan > renders annual button as "selected"
Stack Traces | 0.172s run time
Error: expect(element).toHaveClass("bg-ds-primary-base")

Expected the element to have class:
  bg-ds-primary-base
Received:
  flex-1 py-1 px-2 text-sm cursor-pointer whitespace-nowrap disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary rounded-l
 ❯ .../TeamPlanController/BillingOptions/BillingOptions.test.tsx:134:27

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

@codecov-qa
Copy link

codecov-qa bot commented Jan 3, 2025

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
4160 1 4159 2
View the top 1 failed tests by shortest run time
src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/TeamPlanController/BillingOptions/BillingOptions.test.tsx > BillingOptions > when rendered > planString is set to annual plan > renders annual button as "selected"
Stack Traces | 0.172s run time
Error: expect(element).toHaveClass("bg-ds-primary-base")

Expected the element to have class:
  bg-ds-primary-base
Received:
  flex-1 py-1 px-2 text-sm cursor-pointer whitespace-nowrap disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary rounded-l
 ❯ .../TeamPlanController/BillingOptions/BillingOptions.test.tsx:134:27

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

Copy link

codecov bot commented Jan 3, 2025

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
4162 1 4161 0
View the top 1 failed tests by shortest run time
src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/TeamPlanController/BillingOptions/BillingOptions.test.tsx > BillingOptions > when rendered > planString is set to annual plan > renders annual button as "selected"
Stack Traces | 0.172s run time
Error: expect(element).toHaveClass("bg-ds-primary-base")

Expected the element to have class:
  bg-ds-primary-base
Received:
  flex-1 py-1 px-2 text-sm cursor-pointer whitespace-nowrap disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary rounded-l
 ❯ .../TeamPlanController/BillingOptions/BillingOptions.test.tsx:134:27

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

Copy link

codecov-public-qa bot commented Jan 3, 2025

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
3701 1 3700 0
View the top 1 failed tests by shortest run time
src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/TeamPlanController/BillingOptions/BillingOptions.test.tsx > BillingOptions > when rendered > planString is set to annual plan > renders annual button as "selected"
Stack Traces | 0.172s run time
Error: expect(element).toHaveClass("bg-ds-primary-base")

Expected the element to have class:
  bg-ds-primary-base
Received:
  flex-1 py-1 px-2 text-sm cursor-pointer whitespace-nowrap disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary rounded-l
 ❯ .../TeamPlanController/BillingOptions/BillingOptions.test.tsx:134:27

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

@codecov-staging
Copy link

codecov-staging bot commented Jan 8, 2025

Bundle Report

Changes will decrease total bundle size by 6.0MB (-32.96%) ⬇️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
gazebo-staging-system 6.07MB 69.42kB (1.16%) ⬆️
gazebo-staging-system-esm 6.13MB 69.88kB (1.15%) ⬆️
gazebo-staging-array-push (removed) 6.14MB (-100.0%) ⬇️

Copy link

codecov bot commented Jan 8, 2025

Bundle Report

Changes will decrease total bundle size by 6.0MB (-32.96%) ⬇️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
gazebo-production-system 6.07MB 69.42kB (1.16%) ⬆️
gazebo-production-system-esm 6.13MB 69.88kB (1.15%) ⬆️
gazebo-production-array-push (removed) 6.14MB (-100.0%) ⬇️

@codecov-releaser
Copy link
Contributor

codecov-releaser commented Jan 8, 2025

✅ Deploy preview for gazebo ready!

Previews expire after 1 month automatically.

Storybook

Commit Created Cloud Enterprise
08f6fb6 Wed, 08 Jan 2025 00:56:43 GMT Expired Expired
3a50f0c Wed, 08 Jan 2025 18:12:54 GMT Expired Expired
9fca8dd Wed, 08 Jan 2025 19:28:08 GMT Expired Expired
9fca8dd Wed, 08 Jan 2025 19:28:55 GMT Expired Expired
7ee74f9 Wed, 08 Jan 2025 22:00:25 GMT Cloud Enterprise

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not really following why we need React context and localstorage. Could you explain how they work together?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I implemented with React context and localStorage to together solve for two situations.

  • Persistence over time: I'm using localStorage to keep track between sessions and refreshes. So if a user hid it previously, it will stay hidden
  • Toggling show vs hide in one session: using just the localStorage value to allow "showing" and "hiding" from the UserDropdown menu wasn't working because the react tree wasn't rerendering on just a localStorage value change. So I decided to use a setState variable. However, the onboarding container and the UserDropdown components are part of two different component trees so I added a context to share the state variable. The only shared parent they have is App.tsx and I decided against implementing a setState variable in App.tsx to be passed to each of them as I didn't want to clutter up App.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interestinggggg okay. That's annoying but makes sense. In that case, one improvement I think we can do is handle all the local storage stuff inside of the context provider through a useEffect on the state change. That way the only place we interact with local storage is in the provider and the consumers don't have to worry about it.

I was also wondering why the need for the query param? Can't we use local storage/context for that as well?

Copy link
Contributor Author

@calvin-codecov calvin-codecov Jan 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, you're right. I'll move the extra outside instance of localStorage into the context.

For the query param, I was piggybacking off of our current use of ?source=onboarding but not that I think about it more, we'll actually need to modify that construct too as we will no longer be showing DefaultOrgSelector anywhere in the flow. I will:

  • make a change for the onboarding container to rely on localStorage
  • make a change in useUserAccessGate to remove the showDefaultOrgSelector logic
  • make a change in the onboarding flow to set the source param to "onboarding" again as a replacement for ListRepo's use
    I considered using the same construct for both bullet 1 and 3, but the localStorage value is tied more closely to whether or not we render the onboarding container while the query param is tied to the idea we came from onboarding

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha makes sense. Could be useful to have that query param for metrics in the future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants