Skip to content

feat(onboarding): improve checklist wording and target project visibi… #2806

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.

Sign up for GitHub

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

Merged
jul-dan merged 1 commit into from
Jul 7, 2026
Merged

feat(onboarding): improve checklist wording and target project visibi… #2806

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions apps/console/src/app/components/section-onboarding/section-onboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export function SectionOnboarding() {

const useCases = useMemo(() => (onboarding?.use_cases ?? '').split(',').filter(Boolean), [onboarding?.use_cases])
const hasEphemeralEnvironments = useCases.includes('ephemeral-environments')
const hasRde = useCases.includes('rde')
const hasRde = ['rde', 'ai-workflows', 'spec-to-prod'].some((useCase) => useCases.includes(useCase))

const { data: deploymentRule } = useDeploymentRule({
environmentId: firstEnvironment?.id ?? '',
Expand Down Expand Up @@ -313,7 +313,7 @@ export function SectionOnboarding() {
{
highlight: true,
tag: 'Recommended',
title: 'Qovery managed',
title: 'Create a new cluster (Qovery Managed)',
description:
'Qovery will install and manage the Kubernetes cluster and the underlying infrastructure on your cloud provider account.',
icon: <LogoIcon width="14" height="14" />,
Expand Down Expand Up @@ -347,10 +347,10 @@ export function SectionOnboarding() {
{
highlight: false,
tag: 'Demo',
title: 'Local machine',
title: 'Local Machine',
icon: 'laptop-code',
description:
'Deploy a local Kubernetes cluster on your laptop using Docker Desktop. No cloud account or credit card required!',
'The best choice for exploration and testing. Deploy a local Kubernetes cluster on your laptop using Docker Desktop, no cloud account or credit card required!',
compatibleWith: null,
action: 'installation-guide' as const,
isDemo: true,
Expand Down Expand Up @@ -467,7 +467,7 @@ export function SectionOnboarding() {
isClusterDeployed ? 'text-neutral-subtle line-through' : 'text-neutral'
)}
>
Create and deploy my first cluster
Install Qovery
</span>
{isClusterDeployed ? (
<Icon iconName="circle-check" className="text-sm text-positive" />
Expand Down Expand Up @@ -575,7 +575,7 @@ export function SectionOnboarding() {
: 'text-neutral-subtle'
)}
>
Create and deploy my first application
Go to my environment to create and deploy my first application
</span>
{isServiceDeployed ? (
<Icon iconName="circle-check" className="text-sm text-positive" />
Expand Down Expand Up @@ -639,15 +639,15 @@ export function SectionOnboarding() {
size="sm"
color="neutral"
variant="solid"
to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/new"
to="/organization/$organizationId/project/$projectId/environment/$environmentId/overview"
params={{
organizationId,
projectId: firstProject?.id ?? '',
environmentId: firstEnvironment?.id ?? '',
}}
>
<Icon iconName="circle-plus" />
New Service
Go to my environment
</Link>
) : null}
</div>
Expand Down
100 changes: 96 additions & 4 deletions ...create-clone-environment-modal/__snapshots__/create-clone-environment-modal.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,98 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
</div>
</div>
</div>
<div
class="mb-3"
>
<div
class="input input--select !pointer-events-none !border-neutral !bg-surface-neutral-subtle input--label-up"
data-testid="select"
>
<label
class="input__label translate-y-[7px] text-sm !text-neutral-subtle"
for="Target project"
>
Target project
</label>
<div
class="input-select--is-disabled css-3iigni-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-5-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="input-select__control input-select__control--is-disabled css-16xfy0z-control"
>
<div
class="input-select__value-container input-select__value-container--has-value css-1fdsijx-ValueContainer"
>
<span
class="mr-1 text-sm text-neutral-subtle"
>
Project 1
</span>
<input
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
aria-readonly="true"
class="css-mohuvp-dummyInput-DummyInput"
disabled=""
id="Target project"
inputmode="none"
role="combobox"
tabindex="0"
value=""
/>
</div>
<div
class="input-select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="input-select__indicator-separator css-894a34-indicatorSeparator"
/>
<div
aria-hidden="true"
class="input-select__indicator input-select__dropdown-indicator css-1xc3v61-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
<input
name="Target project"
type="hidden"
value="1"
/>
<div
class="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2"
>
<i
aria-hidden="true"
class="fa-solid fa-angle-down text-sm text-neutral-disabled"
/>
</div>
</div>
</div>
<div
class="mb-3"
>
Expand All @@ -84,7 +176,7 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-4-live-region"
id="react-select-6-live-region"
/>
<span
aria-atomic="false"
Expand All @@ -100,13 +192,13 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
>
<div
class="input-select__placeholder css-1jqq78o-placeholder"
id="react-select-4-placeholder"
id="react-select-6-placeholder"
>
Select...
</div>
<input
aria-autocomplete="list"
aria-describedby="react-select-4-placeholder"
aria-describedby="react-select-6-placeholder"
aria-expanded="false"
aria-haspopup="true"
aria-readonly="true"
Expand Down Expand Up @@ -193,7 +285,7 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-5-live-region"
id="react-select-7-live-region"
/>
<span
aria-atomic="false"
Expand Down
45 changes: 22 additions & 23 deletions ...onments/feature/src/lib/create-clone-environment-modal/create-clone-environment-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,29 +194,28 @@ export function CreateCloneEnvironmentModal({
/>
)}
/>
{environmentToClone && (
<Controller
name="project_id"
control={methods.control}
rules={{
required: 'Please select a target project.',
}}
render={({ field, fieldState: { error } }) => (
<InputSelect
className="mb-3"
onChange={field.onChange}
value={field.value}
label="Target project"
error={error?.message}
options={projects.map((p) => ({
value: p.id,
label: p.name,
}))}
portal
/>
)}
/>
)}
<Controller
name="project_id"
control={methods.control}
rules={{
required: 'Please select a target project.',
}}
render={({ field, fieldState: { error } }) => (
<InputSelect
className="mb-3"
onChange={field.onChange}
value={field.value}
label="Target project"
error={error?.message}
options={projects.map((p) => ({
value: p.id,
label: p.name,
}))}
disabled={!environmentToClone}
portal
/>
)}
/>
<Controller
name="cluster"
control={methods.control}
Expand Down
9 changes: 7 additions & 2 deletions libs/domains/onboarding/feature/src/lib/step-use-cases/step-use-cases.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ const USE_CASES: Array<{ value: string; label: string; iconName: IconName }> = [
label: 'Enable my non-tech team to ship apps',
iconName: 'users',
},
{
value: 'spec-to-prod',
label: 'Go from spec to production with AI coding agents',
iconName: 'diagram-project',
},
{
value: 'automate-deployments',
label: 'Automate deployments without manual steps',
Expand Down Expand Up @@ -84,13 +89,13 @@ export function StepUseCases({ onSubmit, onBack }: StepUseCasesProps) {
<h1 className="h3 mb-3 text-neutral">What are you looking to do?</h1>
<p className="mb-10 text-sm text-neutral">Select all that apply.</p>
<div className="grid grid-cols-6 gap-3">
{USE_CASES.map((useCase, index) => (
{USE_CASES.map((useCase) => (
<UseCaseCard
key={useCase.value}
value={useCase.value}
label={useCase.label}
iconName={useCase.iconName}
colSpan={index < 2 ? 'col-span-3' : 'col-span-2'}
colSpan="col-span-2"
selected={selected.includes(useCase.value)}
onToggle={toggle}
/>
Expand Down
Loading