-
Notifications
You must be signed in to change notification settings - Fork 254
Onboarding V4 - Hetzner & DigitalOcean #7763
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
Conversation
Dependency Review✅ No vulnerabilities or OpenSSF Scorecard issues found.Scanned FilesNone |
8e79d33 to
35a750a
Compare
| <div class="relative flex flex-col items-center translate-y-[26px]"> | ||
| <Icon :name="icon" size="none" :class="iconClasses" /> | ||
| <div | ||
| :class=" | ||
| clsx( | ||
| !beta && 'invisible', | ||
| 'border text-xs p-2xs rounded-sm', | ||
| themeClasses( | ||
| 'border-action-300 bg-action-100', | ||
| 'border-action-500 bg-action-900', | ||
| ), | ||
| ) | ||
| " | ||
| > | ||
| Beta | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To make the Beta tag appear nicely for any provider, it is positioned below the icon and then the div containing both is translated back to its centered position.
| // To add a new provider to this onboarding flow, search for this string - | ||
| // NEW_PROVIDER_STEPS | ||
| // And add the required information at each spot | ||
| // You will also need to edit the onboarding endpoint to support the new provider | ||
| // Find it here - | ||
| // lib/sdf-server/src/service/v2/change_set/create_initialize_apply.rs |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Helpful instructions for adding a new provider!
| // Toggle this to turn onboarding on but not in debug mode | ||
| // Allows full functional testing of the onboarding flow | ||
| export const FORCE_ONBOARDING_TO_SHOW = false; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This allows us to test the functionality of onboarding even while using an account which has finished it.
| class="flex flex-col items-center w-full h-full min-w-[900px] relative scrollable" | ||
| > | ||
| <!-- Header --> | ||
| <div class="w-full h-full scrollable scrollable-horizontal"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The onboarding now does not break when the screen size is too small.
The onboarding has a minimum width, which depends on the number of providers.
| <OnboardingStepBlock v-if="providerChoice === 'AWS'"> | ||
| <template v-else> | ||
| <div class="flex-1 flex flex-col basis-1/2 min-w-0"> | ||
| <!-- Step 2: Provider setup --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All providers now use this same OnboardingStepBlock with swapped around text/icons/data and some sections specific to a provider.
| class="flex flex-row items-center justify-between text-sm" | ||
| > | ||
| <div> | ||
| <div v-if="providerChoice === 'AWS'"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Currently we only support this bash env paste for AWS.
| </div> | ||
| <!-- Secret Values --> | ||
| <ErrorMessage | ||
| v-if="providerChoice !== 'Hetzner'" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hetzner only has one field so no reason to include this banner.
| <div class="flex flex-col"> | ||
| <span | ||
| >Install | ||
| <!-- Step 3: Agent Tutorial + token --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This part of the onboarding did not change.
| const decrementOnboardingStep = () => { | ||
| currentStep.value = Math.max( | ||
| OnboardingStep.INITIALIZE, | ||
| OnboardingStep.PICK_PROVIDER, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixes a bug where you could not go back to the provider selection page!
| "Subscription ID": { | ||
| ref: "", | ||
| type: "password", | ||
| required: true, | ||
| }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added this field to the Azure secret form instead of having it separate.
35a750a to
9e39ad8
Compare
9e39ad8 to
93dbf8d
Compare
| "AWS Credential", | ||
| "/secrets/AWS Credential", | ||
| "Region", | ||
| Some("Region"), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice!!
| "Microsoft Credential", | ||
| "/secrets/Microsoft Credential", | ||
| "Microsoft.Resources/locations", | ||
| Some("Microsoft.Resources/locations"), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice!!
93dbf8d to
b3b7bca
Compare
0076bc8
e925394 to
c8d0dc4
Compare
799c58c to
0526db4
Compare
How does this PR change the system? This PR updates the onboarding flow to support Hetzner and DigitalOcean It also revamps and refactors the onboarding flow code to make adding new providers even simpler The DigitalOcean option in onboarding is behind a feature flag so we can wait to roll it out until the DigitalOcean assets are ready for users Out of Scope: We will be adding additional providers to the onboarding as we support them. How was it tested? Ran through the onboarding for each provider successfully! Double checked all the copy and design.
0526db4 to
da26a1c
Compare
How does this PR change the system?
This PR updates the onboarding flow to support Hetzner and DigitalOcean
It also revamps and refactors the onboarding flow code to make adding new providers even simpler
The DigitalOcean option in onboarding is behind a feature flag so we can wait to roll it out until the DigitalOcean assets are ready for users
Completes ENG-3283
Screenshots:
Out of Scope:
We will be adding additional providers to the onboarding as we support them.
How was it tested?
Ran through the onboarding for each provider successfully!
Double checked all the copy and design.