Skip to content

kickstart ui cleanup: shared dropdown, collapsible checks, base cost estimate, region prefs #2326

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

Draft
David Gamero (davidgamero) wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

kickstart ui cleanup: shared dropdown, collapsible checks, base cost estimate, region prefs #2326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
88c1c1f
docs: design spec for kickstart SearchableDropdown consolidation
davidgamero Jul 17, 2026
fc078ad
feat(webview): unify kickstart dropdowns onto SearchableDropdown
davidgamero Jul 20, 2026
c5b9723
feat(kickstart): use (private) suffix for private repos in dropdown
davidgamero Jul 20, 2026
1d29446
feat(kickstart): collapse preflight checks for consistent UI density
davidgamero Jul 20, 2026
c7b62df
chore: remove kickstart dropdown design spec from repo
davidgamero Jul 20, 2026
f7a822b
refactor(kickstart): extract shared DisclosureButton for collapse tog…
davidgamero Jul 20, 2026
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
31 changes: 15 additions & 16 deletions webview-ui/src/KickstartCluster/ClusterInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ import {
Subscription,
ToVsCodeMsgDef,
} from "../../../src/webview-contract/webviewDefinitions/kickstartCluster";
import { TextWithDropdown } from "../components/TextWithDropdown";
import { SearchableDropdown } from "../components/SearchableDropdown";
import { Maybe, isNothing, just, nothing } from "../utilities/maybe";
import { EventHandlers } from "../utilities/state";
import { Validatable, hasMessage, invalid, isValid, isValueSet, missing, unset, valid } from "../utilities/validation";
import styles from "./KickstartCluster.module.css";
import { ActivityStageList, statusClass, statusIcon } from "../components/ActivityStageList";
import { ActivityStageList, CollapsibleStageGroup, statusClass, statusIcon } from "../components/ActivityStageList";
import { CostEstimateResult, EventDef, FlowActivity, ScanResult } from "./helpers/state";

interface ClusterInputProps {
Expand Down Expand Up @@ -169,7 +169,9 @@ export function ClusterInput(props: ClusterInputProps) {
const providerScanStages = subscriptionScanStages.filter((s) => s.stage === "providers");
const regionScanStages = subscriptionScanStages.filter((s) => s.stage !== "providers");
const preflightStages = props.activity.preflight?.stages ?? [];
const visiblePreflightStages = preflightStages.filter((s) => s.stage !== "role");
// Hide `role` (surfaced via the permission warning banner) and `providers` (already shown under
// the Subscription field during the scan) so the preflight block stays a compact check list.
const visiblePreflightStages = preflightStages.filter((s) => s.stage !== "role" && s.stage !== "providers");
const preflightHasFailure = preflightStages.some((s) => s.status === "failed");
const preflightRunning = preflightStages.length > 0 && props.preflightCanProceed === null;
const preflightAttempted = preflightStages.length > 0 || props.preflightCanProceed !== null;
Expand Down Expand Up @@ -460,13 +462,12 @@ export function ClusterInput(props: ClusterInputProps) {
);
}
return (
<TextWithDropdown
<SearchableDropdown
id="location-dropdown"
className={styles.midControl}
items={props.locations}
selectedItem={currentLocation || null}
getAddItemText={() => ""}
allowAddItem={false}
selectedValue={currentLocation || null}
getValue={(s) => s}
onSelect={handleLocationSelect}
/>
);
Expand All @@ -490,13 +491,12 @@ export function ClusterInput(props: ClusterInputProps) {
);
}
return (
<TextWithDropdown
<SearchableDropdown
id="resource-group-dropdown"
className={styles.midControl}
items={props.resourceGroups.map((g) => g.name)}
selectedItem={existingResourceGroup || null}
getAddItemText={() => ""}
allowAddItem={false}
selectedValue={existingResourceGroup || null}
getValue={(s) => s}
onSelect={(value) => setExistingResourceGroup(value ?? "")}
/>
);
Expand Down Expand Up @@ -604,13 +604,12 @@ export function ClusterInput(props: ClusterInputProps) {
<label htmlFor="subscription-dropdown" className={styles.label}>
{l10n.t("Subscription*")}
</label>
<TextWithDropdown
<SearchableDropdown
id="subscription-dropdown"
className={styles.midControl}
items={subscriptionNames}
selectedItem={selectedSubscriptionName}
getAddItemText={() => ""}
allowAddItem={false}
selectedValue={selectedSubscriptionName}
getValue={(s) => s}
onSelect={handleSubscriptionSelect}
/>
{providerScanStages.length > 0 && (
Expand Down Expand Up @@ -730,7 +729,7 @@ export function ClusterInput(props: ClusterInputProps) {

{preflightAttempted && visiblePreflightStages.length > 0 && (
<div className={`${styles.activityContainer} ${styles.fullWidth}`}>
<ActivityStageList stages={visiblePreflightStages} />
<CollapsibleStageGroup title={l10n.t("Pre-flight checks")} stages={visiblePreflightStages} />
</div>
)}

Expand Down
23 changes: 10 additions & 13 deletions webview-ui/src/KickstartCluster/ExistingClusterInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
} from "../../../src/webview-contract/webviewDefinitions/kickstartCluster";
import { statusClass, statusIcon } from "../components/ActivityStageList";
import { ProgressRing } from "../components/ProgressRing";
import { TextWithDropdown } from "../components/TextWithDropdown";
import { SearchableDropdown } from "../components/SearchableDropdown";
import { EventHandlers } from "../utilities/state";
import { Validatable, isValid, isValueSet, unset } from "../utilities/validation";
import { deriveAcrName, getValidatedAcrName, randomSuffix, renderValidationMessage } from "./ClusterInput";
Expand Down Expand Up @@ -211,13 +211,12 @@ export function ExistingClusterInput(props: ExistingClusterInputProps) {
);
}
return (
<TextWithDropdown
<SearchableDropdown
id="existing-cluster-dropdown"
className={styles.midControl}
items={props.clusters.map(clusterLabel)}
selectedItem={props.selectedCluster ? clusterLabel(props.selectedCluster) : null}
getAddItemText={() => ""}
allowAddItem={false}
selectedValue={props.selectedCluster ? clusterLabel(props.selectedCluster) : null}
getValue={(s) => s}
onSelect={handleClusterSelect}
/>
);
Expand All @@ -243,13 +242,12 @@ export function ExistingClusterInput(props: ExistingClusterInputProps) {
<label htmlFor="connected-acr-dropdown" className={styles.label}>
{l10n.t("Connected registry*")}
</label>
<TextWithDropdown
<SearchableDropdown
id="connected-acr-dropdown"
className={styles.midControl}
items={acrNames}
selectedItem={effectiveAcrName}
getAddItemText={() => ""}
allowAddItem={false}
selectedValue={effectiveAcrName}
getValue={(s) => s}
onSelect={(value) => setSelectedAcrName(value)}
/>
{selectedAcr && <span className={styles.hint}>{selectedAcr.loginServer}</span>}
Expand Down Expand Up @@ -346,13 +344,12 @@ export function ExistingClusterInput(props: ExistingClusterInputProps) {
<label htmlFor="existing-subscription-dropdown" className={styles.label}>
{l10n.t("Subscription*")}
</label>
<TextWithDropdown
<SearchableDropdown
id="existing-subscription-dropdown"
className={styles.midControl}
items={subscriptionNames}
selectedItem={selectedSubscriptionName}
getAddItemText={() => ""}
allowAddItem={false}
selectedValue={selectedSubscriptionName}
getValue={(s) => s}
onSelect={handleSubscriptionSelect}
/>

Expand Down
2 changes: 1 addition & 1 deletion webview-ui/src/KickstartCluster/KickstartCluster.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
display: flex;
align-items: flex-start;
column-gap: 0.5rem;
margin-top: -0.25rem;
margin-top: -0.5rem;
font-size: 0.9em;
}

Expand Down
34 changes: 14 additions & 20 deletions webview-ui/src/KickstartGuidedSetup/GuidedSetupInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,7 @@ import {
ProjectType,
ToVsCodeMsgDef,
} from "../../../src/webview-contract/webviewDefinitions/kickstartGuidedSetup";
import { CustomDropdown } from "../components/CustomDropdown";
import { CustomDropdownOption } from "../components/CustomDropdownOption";
import { SearchableDropdown } from "../components/SearchableDropdown";
import { Maybe, isNothing, just, nothing } from "../utilities/maybe";
import { EventHandlers } from "../utilities/state";
import { Validatable, hasMessage, isValid, isValueSet, missing, unset, valid } from "../utilities/validation";
Expand Down Expand Up @@ -214,31 +213,26 @@ export function GuidedSetupInput(props: GuidedSetupInputProps) {
)}

{props.githubRepos && props.githubRepos.length > 0 && (
<CustomDropdown
<SearchableDropdown
id="github-repo-dropdown"
className={styles.ghDropdown}
value={
items={props.githubRepos}
selectedValue={
isValueSet(repoUrl) && props.githubRepos.some((r) => r.cloneUrl === repoUrl.value)
? repoUrl.value
: ""
: null
}
onChange={(value) => {
getValue={(repo) => repo.cloneUrl}
toLabel={(repo) => {
const name = repo.fullName.split("/").slice(1).join("/") || repo.fullName;
return `${name}${repo.private ? " (private)" : ""}${
repo.description ? ` — ${repo.description}` : ""
}`;
}}
onSelect={(value) => {
if (value) setRepoUrl(valid(value));
}}
>
{props.githubRepos.map((repo) => {
const name = repo.fullName.split("/").slice(1).join("/") || repo.fullName;
return (
<CustomDropdownOption
key={repo.cloneUrl}
value={repo.cloneUrl}
label={`${name}${repo.private ? " • private" : ""}${
repo.description ? ` — ${repo.description}` : ""
}`}
/>
);
})}
</CustomDropdown>
/>
)}

<div className={styles.ghDivider}>{l10n.t("or")}</div>
Expand Down
54 changes: 28 additions & 26 deletions webview-ui/src/components/ActivityStageList.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@
display: block;
color: var(--vscode-descriptionForeground);
font-size: 0.9em;
margin-top: 0.15rem;
}

.checkPending {
Expand Down Expand Up @@ -148,7 +147,7 @@
margin-top: 0.25rem;
}

.fullErrorToggle {
.disclosureToggle {
display: inline-flex;
align-items: center;
align-self: flex-start;
Expand All @@ -162,12 +161,12 @@
font-size: 0.9em;
}

.fullErrorToggle:hover {
.disclosureToggle:hover {
color: var(--vscode-textLink-activeForeground);
text-decoration: underline;
}

.fullErrorChevron {
.disclosureChevron {
font-size: 0.8em;
}

Expand All @@ -194,11 +193,12 @@
margin-top: 0.25rem;
}

.entriesToggle {
.stageRetry {
display: inline-flex;
align-items: center;
align-self: flex-start;
column-gap: 0.35rem;
margin-top: 0.35rem;
padding: 0;
border: none;
background: none;
Expand All @@ -208,35 +208,37 @@
font-size: 0.9em;
}

.entriesToggle:hover {
.stageRetry:hover {
color: var(--vscode-textLink-activeForeground);
text-decoration: underline;
}

.entriesChevron {
font-size: 0.8em;
.stageRetryIcon {
font-size: 0.85em;
}

.stageRetry {
display: inline-flex;
align-items: center;
align-self: flex-start;
column-gap: 0.35rem;
margin-top: 0.35rem;
padding: 0;
border: none;
background: none;
cursor: pointer;
color: var(--vscode-textLink-foreground);
font-family: inherit;
font-size: 0.9em;
.stageGroup {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}

.stageRetry:hover {
color: var(--vscode-textLink-activeForeground);
text-decoration: underline;
.stageGroupHeader {
column-gap: 0.5rem;
color: var(--vscode-foreground);
font-size: inherit;
text-align: left;
}

.stageRetryIcon {
font-size: 0.85em;
.stageGroupHeader:hover {
text-decoration: none;
}

.stageGroupTitle {
font-weight: 600;
}

.stageGroupSummary {
color: var(--vscode-descriptionForeground);
font-size: 0.9em;
}
Loading
Loading