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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy