Skip to content

Commit b8d92fa

Browse files
ParkreinerParkreiner
committed
fix: decouple component props from one another
1 parent 4833ae1 commit b8d92fa

File tree

4 files changed

+47
-30
lines changed

4 files changed

+47
-30
lines changed

‎site/src/pages/WorkspacesPage/WorkspacesPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ const WorkspacesPage: FC = () => {
185185
page={pagination.page}
186186
limit={pagination.limit}
187187
onPageChange={pagination.goToPage}
188-
filterProps={filterState}
188+
filterState={filterState}
189189
isRunningBatchAction={batchActions.isProcessing}
190190
onBatchDeleteTransition={() => setActiveBatchAction("delete")}
191191
onBatchStartTransition={() => batchActions.start(checkedWorkspaces)}

‎site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const allWorkspaces = [
134134
...Object.values(additionalWorkspaces),
135135
];
136136

137-
type FilterProps = ComponentProps<typeof WorkspacesPageView>["filterProps"];
137+
type FilterProps = ComponentProps<typeof WorkspacesPageView>["filterState"];
138138

139139
const defaultFilterProps = getDefaultFilterProps<FilterProps>({
140140
query: "owner:me",
@@ -169,7 +169,7 @@ const meta: Meta<typeof WorkspacesPageView> = {
169169
component: WorkspacesPageView,
170170
args: {
171171
limit: DEFAULT_RECORDS_PER_PAGE,
172-
filterProps: defaultFilterProps,
172+
filterState: defaultFilterProps,
173173
checkedWorkspaces: [],
174174
canCheckWorkspaces: true,
175175
templates: mockTemplates,
@@ -266,7 +266,7 @@ export const UserHasNoWorkspacesAndNoTemplates: Story = {
266266
export const NoSearchResults: Story = {
267267
args: {
268268
workspaces: [],
269-
filterProps: {
269+
filterState: {
270270
...defaultFilterProps,
271271
filter: {
272272
...defaultFilterProps.filter,

‎site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { mustUpdateWorkspace } from "utils/workspace";
2626
import { WorkspaceHelpTooltip } from "./WorkspaceHelpTooltip";
2727
import { WorkspacesButton } from "./WorkspacesButton";
2828
import {
29-
type WorkspaceFilterProps,
29+
type WorkspaceFilterState,
3030
WorkspacesFilter,
3131
} from "./filter/WorkspacesFilter";
3232

@@ -45,7 +45,7 @@ interface WorkspacesPageViewProps {
4545
workspaces?: readonly Workspace[];
4646
checkedWorkspaces: readonly Workspace[];
4747
count?: number;
48-
filterProps: WorkspaceFilterProps;
48+
filterState: WorkspaceFilterState;
4949
page: number;
5050
limit: number;
5151
onPageChange: (page: number) => void;
@@ -69,15 +69,15 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
6969
error,
7070
limit,
7171
count,
72-
filterProps,
72+
filterState,
7373
onPageChange,
7474
page,
7575
checkedWorkspaces,
7676
onCheckChange,
77-
onBatchDeleteTransition: onDeleteAll,
78-
onBatchUpdateTransition: onUpdateAll,
79-
onBatchStopTransition: onStopAll,
80-
onBatchStartTransition: onStartAll,
77+
onBatchDeleteTransition,
78+
onBatchUpdateTransition,
79+
onBatchStopTransition,
80+
onBatchStartTransition,
8181
isRunningBatchAction,
8282
canCheckWorkspaces,
8383
templates,
@@ -117,9 +117,12 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
117117
<ErrorAlert error={error} />
118118
)}
119119
<WorkspacesFilter
120-
filter={filterProps.filter}
121-
menus={filterProps.menus}
120+
filter={filterState.filter}
122121
error={error}
122+
statusMenu={filterState.menus.status}
123+
templateMenu={filterState.menus.template}
124+
userMenu={filterState.menus.user}
125+
organizationsMenu={filterState.menus.organizations}
123126
/>
124127
</Stack>
125128

@@ -155,7 +158,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
155158
!mustUpdateWorkspace(w, canChangeVersions),
156159
)
157160
}
158-
onClick={onStartAll}
161+
onClick={onBatchStartTransition}
159162
>
160163
<PlayIcon /> Start
161164
</DropdownMenuItem>
@@ -165,12 +168,12 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
165168
(w) => w.latest_build.status === "running",
166169
)
167170
}
168-
onClick={onStopAll}
171+
onClick={onBatchStopTransition}
169172
>
170173
<SquareIcon /> Stop
171174
</DropdownMenuItem>
172175
<DropdownMenuSeparator />
173-
<DropdownMenuItem onClick={onUpdateAll}>
176+
<DropdownMenuItem onClick={onBatchUpdateTransition}>
174177
<CloudIcon
175178
className="size-icon-sm"
176179
data-testid="bulk-action-update"
@@ -179,7 +182,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
179182
</DropdownMenuItem>
180183
<DropdownMenuItem
181184
className="text-content-destructive focus:text-content-destructive"
182-
onClick={onDeleteAll}
185+
onClick={onBatchDeleteTransition}
183186
>
184187
<TrashIcon /> Delete&hellip;
185188
</DropdownMenuItem>
@@ -221,7 +224,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
221224
<WorkspacesTable
222225
canCreateTemplate={canCreateTemplate}
223226
workspaces={workspaces}
224-
isUsingFilter={filterProps.filter.used}
227+
isUsingFilter={filterState.filter.used}
225228
checkedWorkspaces={checkedWorkspaces}
226229
onCheckChange={onCheckChange}
227230
canCheckWorkspaces={canCheckWorkspaces}

‎site/src/pages/WorkspacesPage/filter/WorkspacesFilter.tsx

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Filter, MenuSkeleton, type useFilter } from "components/Filter/Filter";
1+
import { Filter, MenuSkeleton, UseFilterResult, type useFilter } from "components/Filter/Filter";
22
import { type UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
33
import { useDashboard } from "modules/dashboard/useDashboard";
44
import {
@@ -62,8 +62,8 @@ const PRESETS_WITH_DORMANT: FilterPreset[] = [
6262
},
6363
];
6464

65-
export type WorkspaceFilterProps = {
66-
filter: ReturnType<typeof useFilter>;
65+
export type WorkspaceFilterState = {
66+
filter: UseFilterResult;
6767
error?: unknown;
6868
menus: {
6969
user?: UserFilterMenu;
@@ -73,42 +73,56 @@ export type WorkspaceFilterProps = {
7373
};
7474
};
7575

76+
type WorkspaceFilterProps = Readonly<{
77+
filter: UseFilterResult;
78+
error: unknown;
79+
templateMenu: TemplateFilterMenu;
80+
statusMenu: StatusFilterMenu;
81+
82+
userMenu?: UserFilterMenu;
83+
organizationsMenu?: OrganizationsFilterMenu
84+
}>
85+
7686
export const WorkspacesFilter: FC<WorkspaceFilterProps> = ({
7787
filter,
7888
error,
79-
menus,
89+
templateMenu,
90+
statusMenu,
91+
userMenu,
92+
organizationsMenu,
8093
}) => {
8194
const { entitlements, showOrganizations } = useDashboard();
8295
const width = showOrganizations ? 175 : undefined;
8396
const presets = entitlements.features.advanced_template_scheduling.enabled
8497
? PRESETS_WITH_DORMANT
8598
: PRESET_FILTERS;
99+
const organizationsActive = showOrganizations && organizationsMenu !== undefined
86100

87101
return (
88102
<Filter
89103
presets={presets}
90-
isLoading={menus.status.isInitializing}
104+
isLoading={statusMenu.isInitializing}
91105
filter={filter}
92106
error={error}
93107
learnMoreLink={docs(
94108
"/user-guides/workspace-management#workspace-filtering",
95109
)}
96110
options={
97111
<>
98-
{menus.user && <UserMenu width={width} menu={menus.user} />}
99-
<TemplateMenu width={width} menu={menus.template} />
100-
<StatusMenu width={width} menu={menus.status} />
101-
{showOrganizations && menus.organizations !== undefined && (
102-
<OrganizationsMenu width={width} menu={menus.organizations} />
112+
{userMenu && <UserMenu width={width} menu={userMenu} />}
113+
<TemplateMenu width={width} menu={templateMenu} />
114+
<StatusMenu width={width} menu={statusMenu} />
115+
{organizationsActive && (
116+
<OrganizationsMenu width={width} menu={organizationsMenu} />
103117
)}
104118
</>
105119
}
106120
optionsSkeleton={
107121
<>
108-
{menus.user && <MenuSkeleton />}
122+
{userMenu && <MenuSkeleton />}
109123
<MenuSkeleton />
110124
<MenuSkeleton />
111-
{showOrganizations && <MenuSkeleton />}
125+
{organizationsActive && <MenuSkeleton />}
112126
</>
113127
}
114128
/>

0 commit comments

Comments
 (0)