Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat(site/src/pages/TemplateBuilder): deselect modules using button in main content area instead of sidebar #27113

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
aqandrew merged 3 commits into from
Jul 9, 2026
Merged

feat(site/src/pages/TemplateBuilder): deselect modules using button in main content area instead of sidebar #27113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03e90f9
fix: show delete icons in ModuleConfiguration
aqandrew Jul 9, 2026
d151ac4
feat: remove delete button from ModuleSelection
aqandrew Jul 9, 2026
ee63784
test: remove onDeselectModule from SelectionSummary args
aqandrew Jul 9, 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
3 changes: 3 additions & 0 deletions site/src/pages/TemplateBuilder/ModuleSettingsStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ interface ModuleSettingsStepProps {
moduleId: string,
variables: Record<string, string>,
) => void;
onRemoveModule: (moduleId: string) => void;
}

function variableToField(
Expand Down Expand Up @@ -107,6 +108,7 @@ export const ModuleSettingsStep: FC<ModuleSettingsStepProps> = ({
selectedModuleIds,
moduleVariables,
onChangeModuleVariables,
onRemoveModule,
}) => {
const { data } = useQuery(templateBuilderModules(baseId));
const modules = data?.modules ?? [];
Expand Down Expand Up @@ -157,6 +159,7 @@ export const ModuleSettingsStep: FC<ModuleSettingsStepProps> = ({
detailsUrl={moduleDetailsUrl(mod.id)}
fields={requiredFields}
optionalFields={optionalFields}
onRemove={() => onRemoveModule(mod.id)}
/>

{sensitiveVars.length > 0 && (
Expand Down
5 changes: 1 addition & 4 deletions site/src/pages/TemplateBuilder/SelectionSummary.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { expect, fn, within } from "storybook/test";
import { expect, within } from "storybook/test";
import { SelectionSummary } from "./SelectionSummary";

const meta: Meta<typeof SelectionSummary> = {
title: "pages/TemplateBuilder/SelectionSummary",
component: SelectionSummary,
args: {
onDeselectModule: fn(),
},
};

export default meta;
Expand Down
28 changes: 3 additions & 25 deletions site/src/pages/TemplateBuilder/SelectionSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { cva } from "class-variance-authority";
import { XIcon } from "lucide-react";
import { createContext, type PropsWithChildren, useContext } from "react";
import { Avatar } from "#/components/Avatar/Avatar";
import { Button } from "#/components/Button/Button";
import { cn } from "#/utils/cn";

type Variant = "complete" | "current" | "upcoming" | null | undefined;
Expand All @@ -24,14 +22,12 @@ type SelectionSummaryProps = {
currentStep: number;
selectedTemplate?: SelectedTemplate;
selectedModules?: SelectedModule[];
onDeselectModule: (moduleId: string) => void;
};

export const SelectionSummary: React.FC<SelectionSummaryProps> = ({
currentStep,
selectedTemplate,
selectedModules,
onDeselectModule,
}) => {
const variant = (step: number) => {
if (currentStep === step) return "current";
Expand All @@ -53,10 +49,7 @@ export const SelectionSummary: React.FC<SelectionSummaryProps> = ({
<VariantContext.Provider value={variant(2)}>
<StepIndicator step={2}>Modules</StepIndicator>
{selectedModules ? (
<ModuleSelection
modules={selectedModules}
onDeselectModule={onDeselectModule}
/>
<ModuleSelection modules={selectedModules} />
) : (
<StepDivider />
)}
Expand Down Expand Up @@ -161,37 +154,22 @@ const BaseTemplateSelection: React.FC<BaseTemplateSelectionProps> = ({

type ModuleSelectionProps = {
modules: SelectedModule[];
onDeselectModule: (moduleId: string) => void;
};

const ModuleSelection: React.FC<ModuleSelectionProps> = ({
modules,
onDeselectModule,
}) => {
const ModuleSelection: React.FC<ModuleSelectionProps> = ({ modules }) => {
return (
<StepDivider className="max-h-72 overflow-y-auto">
{modules.map((module) => (
<div
key={module.id}
className="group flex items-start justify-between p-1 mb-1 rounded-sm hover:bg-surface-secondary"
className="group flex items-start justify-between p-1 mb-1 rounded-sm"
>
<div className="h-[1lh] content-center">
<Avatar src={module.iconUrl} size="sm" variant="icon" />
</div>
<span className="flex-1 ml-2 text-content-secondary">
{module.name}
</span>
<div className="h-[1lh] content-center">
<Button
size="xs"
variant="subtle"
className="flex opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
onClick={() => onDeselectModule(module.id)}
aria-label="Deselect module"
>
<XIcon className="size-4" />
</Button>
</div>
</div>
))}
</StepDivider>
Expand Down
4 changes: 3 additions & 1 deletion site/src/pages/TemplateBuilder/TemplateBuilderPageView.tsx
View file
Open in desktop

@aqandrew aqandrew Jul 9, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

It feels less than ideal that ModuleConfiguration has bg-surface-secondary, and <Button variant="outline"> has hover:bg-surface-secondary. So there's no visible hover state besides the cursor:

Screen.Recording.2026-07-08.at.6.22.20.PM.mov

Should we give these buttons bg-surface-primary?

Screen.Recording.2026-07-08.at.6.22.57.PM.mov

^There are a few places in the codebase that do this, like GitPanel and SessionTimeline. Wonder if adjusting outline buttons like this sitewide should be part of a larger design system convo

Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ export const TemplateBuilderPageView: FC<TemplateBuilderPageViewProps> = ({
moduleVarMap,
createError,
handleProvisionerStatusChange,
handleDeselectModule,
)}
</div>

Expand Down Expand Up @@ -199,7 +200,6 @@ export const TemplateBuilderPageView: FC<TemplateBuilderPageViewProps> = ({
? state.selectedModules
: undefined
}
onDeselectModule={handleDeselectModule}
/>
</div>
</div>
Expand All @@ -214,6 +214,7 @@ function renderStepContent(
moduleVarMap: Record<string, Record<string, string>>,
createError: Error | null,
onProvisionerStatusChange: (value: boolean | undefined) => void,
onRemoveModule: (moduleId: string) => void,
): ReactNode {
switch (stepId) {
case "base-infra":
Expand Down Expand Up @@ -259,6 +260,7 @@ function renderStepContent(
variables,
})
}
onRemoveModule={onRemoveModule}
/>
);
case "customizations":
Expand Down
Loading