Skip to content

Conversation

@wendybujalski
Copy link
Contributor

@wendybujalski wendybujalski commented Nov 13, 2025

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:

Screenshot 2025-11-14 at 4 01 35 PM Screenshot 2025-11-13 at 3 27 04 PM

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.

@github-actions github-actions bot added A-sdf Area: Primary backend API service [Rust] A-web labels Nov 13, 2025
@github-actions
Copy link

github-actions bot commented Nov 13, 2025

Dependency Review

✅ No vulnerabilities or OpenSSF Scorecard issues found.

Scanned Files

None

Comment on lines 16 to 21
<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>
Copy link
Contributor Author

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.

Comment on lines +3 to +8
// 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
Copy link
Contributor Author

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!

Comment on lines +26 to +28
// 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;
Copy link
Contributor Author

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">
Copy link
Contributor Author

@wendybujalski wendybujalski Nov 13, 2025

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 -->
Copy link
Contributor Author

@wendybujalski wendybujalski Nov 13, 2025

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'">
Copy link
Contributor Author

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'"
Copy link
Contributor Author

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 -->
Copy link
Contributor Author

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,
Copy link
Contributor Author

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!

Comment on lines +1238 to +1303
"Subscription ID": {
ref: "",
type: "password",
required: true,
},
Copy link
Contributor Author

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.

@wendybujalski wendybujalski force-pushed the wendy/eng-3283-onboarding-vnext branch from 35a750a to 9e39ad8 Compare November 13, 2025 20:43
@wendybujalski wendybujalski marked this pull request as ready for review November 13, 2025 20:44
@wendybujalski wendybujalski force-pushed the wendy/eng-3283-onboarding-vnext branch from 9e39ad8 to 93dbf8d Compare November 13, 2025 20:47
jobelenus
jobelenus previously approved these changes Nov 13, 2025
"AWS Credential",
"/secrets/AWS Credential",
"Region",
Some("Region"),
Copy link
Contributor

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"),
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice!!

stack72
stack72 previously approved these changes Nov 13, 2025
@wendybujalski wendybujalski added this pull request to the merge queue Nov 13, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Nov 13, 2025
@wendybujalski wendybujalski force-pushed the wendy/eng-3283-onboarding-vnext branch from 93dbf8d to b3b7bca Compare November 14, 2025 17:48
@wendybujalski wendybujalski marked this pull request as draft November 14, 2025 18:31
@wendybujalski wendybujalski changed the title Onboarding V4 - Hetzner Onboarding V4 - Hetzner & Digital Ocean Nov 14, 2025
@wendybujalski wendybujalski dismissed stale reviews from jobelenus and stack72 via 0076bc8 November 14, 2025 18:34
@wendybujalski wendybujalski force-pushed the wendy/eng-3283-onboarding-vnext branch 3 times, most recently from e925394 to c8d0dc4 Compare November 14, 2025 21:12
@wendybujalski wendybujalski changed the title Onboarding V4 - Hetzner & Digital Ocean Onboarding V4 - Hetzner & DigitalOcean Nov 14, 2025
@wendybujalski wendybujalski force-pushed the wendy/eng-3283-onboarding-vnext branch 2 times, most recently from 799c58c to 0526db4 Compare November 14, 2025 22:25
@wendybujalski wendybujalski marked this pull request as ready for review November 14, 2025 22:30
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.
@wendybujalski wendybujalski force-pushed the wendy/eng-3283-onboarding-vnext branch from 0526db4 to da26a1c Compare November 14, 2025 23:27
@wendybujalski wendybujalski added this pull request to the merge queue Nov 17, 2025
Merged via the queue into main with commit 3f1d8f8 Nov 17, 2025
11 checks passed
@wendybujalski wendybujalski deleted the wendy/eng-3283-onboarding-vnext branch November 17, 2025 16:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-sdf Area: Primary backend API service [Rust] A-web

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants