Skip to content

Commit 858ee93

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor filter
1 parent cc7d01d commit 858ee93

File tree

5 files changed

+130
-163
lines changed

5 files changed

+130
-163
lines changed

‎site/src/components/BuildsTable/BuildAvatar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined"
55
import PauseOutlined from "@mui/icons-material/PauseOutlined"
66
import DeleteOutlined from "@mui/icons-material/DeleteOutlined"
77
import { WorkspaceBuild, WorkspaceTransition } from "api/typesGenerated"
8-
import { getDisplayJobStatus } from "utils/workspace"
8+
import { getDisplayWorkspaceBuildStatus } from "utils/workspace"
99
import { Avatar, AvatarProps } from "components/Avatar/Avatar"
1010
import { PaletteIndex } from "theme/theme"
1111
import { Theme } from "@mui/material/styles"
@@ -39,7 +39,7 @@ const iconByTransition: Record<WorkspaceTransition, JSX.Element> = {
3939

4040
export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
4141
const theme = useTheme<Theme>()
42-
const displayBuildStatus = getDisplayJobStatus(theme, build.job.status)
42+
const displayBuildStatus = getDisplayWorkspaceBuildStatus(theme, build)
4343

4444
return (
4545
<StyledBadge

‎site/src/components/DeploymentBanner/DeploymentBannerView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { DeploymentStats, WorkspaceStatus } from "api/typesGenerated"
22
import { FC, useMemo, useEffect, useState } from "react"
33
import prettyBytes from "pretty-bytes"
4-
import { getStatus } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
54
import BuildingIcon from "@mui/icons-material/Build"
65
import { makeStyles } from "@mui/styles"
76
import { RocketIcon } from "components/Icons/RocketIcon"
@@ -19,6 +18,7 @@ import dayjs from "dayjs"
1918
import CollectedIcon from "@mui/icons-material/Compare"
2019
import RefreshIcon from "@mui/icons-material/Refresh"
2120
import Button from "@mui/material/Button"
21+
import { getDisplayWorkspaceStatus } from "utils/workspace"
2222

2323
export const bannerHeight = 36
2424

@@ -218,7 +218,7 @@ const WorkspaceBuildValue: FC<{
218218
count?: number
219219
}> = ({ status, count }) => {
220220
const styles = useStyles()
221-
const displayStatus = getStatus(status)
221+
const displayStatus = getDisplayWorkspaceStatus(status)
222222
let statusText = displayStatus.text
223223
let icon = displayStatus.icon
224224
if (status === "starting") {

‎site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

Lines changed: 8 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
import CircularProgress from "@mui/material/CircularProgress"
2-
import ErrorIcon from "@mui/icons-material/ErrorOutline"
3-
import StopIcon from "@mui/icons-material/StopOutlined"
4-
import PlayIcon from "@mui/icons-material/PlayArrowOutlined"
5-
import QueuedIcon from "@mui/icons-material/HourglassEmpty"
6-
import { Workspace, WorkspaceBuild } from "api/typesGenerated"
1+
import { Workspace } from "api/typesGenerated"
72
import { Pill } from "components/Pill/Pill"
8-
import i18next from "i18next"
93
import { FC, PropsWithChildren } from "react"
104
import { makeStyles } from "@mui/styles"
115
import { combineClasses } from "utils/combineClasses"
@@ -14,82 +8,7 @@ import {
148
ImpendingDeletionBadge,
159
ImpendingDeletionText,
1610
} from "components/WorkspaceDeletion"
17-
18-
const LoadingIcon: FC = () => {
19-
return <CircularProgress size={10} style={{ color: "#FFF" }} />
20-
}
21-
22-
export const getStatus = (buildStatus: WorkspaceBuild["status"]) => {
23-
const { t } = i18next
24-
25-
switch (buildStatus) {
26-
case undefined:
27-
return {
28-
text: t("workspaceStatus.loading", { ns: "common" }),
29-
icon: <LoadingIcon />,
30-
} as const
31-
case "running":
32-
return {
33-
type: "success",
34-
text: t("workspaceStatus.running", { ns: "common" }),
35-
icon: <PlayIcon />,
36-
} as const
37-
case "starting":
38-
return {
39-
type: "success",
40-
text: t("workspaceStatus.starting", { ns: "common" }),
41-
icon: <LoadingIcon />,
42-
} as const
43-
case "stopping":
44-
return {
45-
type: "warning",
46-
text: t("workspaceStatus.stopping", { ns: "common" }),
47-
icon: <LoadingIcon />,
48-
} as const
49-
case "stopped":
50-
return {
51-
type: "warning",
52-
text: t("workspaceStatus.stopped", { ns: "common" }),
53-
icon: <StopIcon />,
54-
} as const
55-
case "deleting":
56-
return {
57-
type: "warning",
58-
text: t("workspaceStatus.deleting", { ns: "common" }),
59-
icon: <LoadingIcon />,
60-
} as const
61-
case "deleted":
62-
return {
63-
type: "error",
64-
text: t("workspaceStatus.deleted", { ns: "common" }),
65-
icon: <ErrorIcon />,
66-
} as const
67-
case "canceling":
68-
return {
69-
type: "warning",
70-
text: t("workspaceStatus.canceling", { ns: "common" }),
71-
icon: <LoadingIcon />,
72-
} as const
73-
case "canceled":
74-
return {
75-
type: "warning",
76-
text: t("workspaceStatus.canceled", { ns: "common" }),
77-
icon: <ErrorIcon />,
78-
} as const
79-
case "failed":
80-
return {
81-
type: "error",
82-
text: t("workspaceStatus.failed", { ns: "common" }),
83-
icon: <ErrorIcon />,
84-
} as const
85-
case "pending":
86-
return {
87-
type: "info",
88-
text: t("workspaceStatus.pending", { ns: "common" }),
89-
icon: <QueuedIcon />,
90-
} as const
91-
}
92-
}
11+
import { getDisplayWorkspaceStatus } from "utils/workspace"
9312

9413
export type WorkspaceStatusBadgeProps = {
9514
workspace: Workspace
@@ -99,7 +18,9 @@ export type WorkspaceStatusBadgeProps = {
9918
export const WorkspaceStatusBadge: FC<
10019
PropsWithChildren<WorkspaceStatusBadgeProps>
10120
> = ({ workspace, className }) => {
102-
const { text, icon, type } = getStatus(workspace.latest_build.status)
21+
const { text, icon, type } = getDisplayWorkspaceStatus(
22+
workspace.latest_build.status,
23+
)
10324
return (
10425
<ChooseOne>
10526
{/* <ImpendingDeletionBadge/> determines its own visibility */}
@@ -117,7 +38,9 @@ export const WorkspaceStatusText: FC<
11738
PropsWithChildren<WorkspaceStatusBadgeProps>
11839
> = ({ workspace, className }) => {
11940
const styles = useStyles()
120-
const { text, type } = getStatus(workspace.latest_build.status)
41+
const { text, type } = getDisplayWorkspaceStatus(
42+
workspace.latest_build.status,
43+
)
12144

12245
return (
12346
<ChooseOne>

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

Lines changed: 18 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Link from "@mui/material/Link"
2-
import { ProvisionerJobStatus, Workspace } from "api/typesGenerated"
2+
import { Workspace, WorkspaceStatuses } from "api/typesGenerated"
33
import { Maybe } from "components/Conditionals/Maybe"
44
import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidgetBase"
55
import { FC, forwardRef, useRef, useState } from "react"
@@ -22,8 +22,6 @@ import TextField from "@mui/material/TextField"
2222
import { MockTemplate, MockUser, MockUser2 } from "testHelpers/entities"
2323
import { UserAvatar } from "components/UserAvatar/UserAvatar"
2424
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown"
25-
import { getDisplayJobStatus, jobStatuses } from "utils/workspace"
26-
import { useTheme } from "@mui/styles"
2725
import Button, { ButtonProps } from "@mui/material/Button"
2826
import Menu from "@mui/material/Menu"
2927
import MenuItem from "@mui/material/MenuItem"
@@ -35,6 +33,7 @@ import { Palette, PaletteColor } from "@mui/material/styles"
3533
import IconButton from "@mui/material/IconButton"
3634
import Tooltip from "@mui/material/Tooltip"
3735
import CloseOutlined from "@mui/icons-material/CloseOutlined"
36+
import { getDisplayWorkspaceStatus } from "utils/workspace"
3837

3938
export const Language = {
4039
pageTitle: "Workspaces",
@@ -274,21 +273,8 @@ const OwnerFilter: FC<{
274273

275274
return (
276275
<div>
277-
<MenuButton
278-
ref={buttonRef}
279-
startIcon={
280-
selectedOption ? (
281-
<UserAvatar
282-
username={selectedOption.label}
283-
avatarURL={selectedOption.avatarUrl}
284-
sx={{ width: 16, height: 16, fontSize: "8px !important" }}
285-
/>
286-
) : undefined
287-
}
288-
onClick={() => setIsMenuOpen(true)}
289-
sx={{ width: 220 }}
290-
>
291-
{selectedOption ? selectedOption.label : "All users"}
276+
<MenuButton ref={buttonRef} onClick={() => setIsMenuOpen(true)}>
277+
User
292278
</MenuButton>
293279
<Menu
294280
id="user-filter-menu"
@@ -392,21 +378,8 @@ const TemplateFilter: FC<{
392378

393379
return (
394380
<div>
395-
<MenuButton
396-
ref={buttonRef}
397-
startIcon={
398-
selectedOption ? (
399-
<TemplateAvatar
400-
sx={{ width: 14, height: 14, fontSize: 8 }}
401-
templateName={selectedOption.label}
402-
icon={selectedOption.icon}
403-
/>
404-
) : undefined
405-
}
406-
onClick={() => setIsMenuOpen(true)}
407-
sx={{ width: 220 }}
408-
>
409-
{selectedOption ? selectedOption.label : "All templates"}
381+
<MenuButton ref={buttonRef} onClick={() => setIsMenuOpen(true)}>
382+
Template
410383
</MenuButton>
411384
<Menu
412385
id="template-filter-menu"
@@ -500,19 +473,18 @@ const StatusFilter: FC<{
500473
value: FilterValue["status"]
501474
onChange: (value: FilterValue["status"]) => void
502475
}> = ({ value, onChange }) => {
503-
const theme = useTheme()
504476
const buttonRef = useRef<HTMLButtonElement>(null)
505477
const [isMenuOpen, setIsMenuOpen] = useState(false)
506-
const workspaceStatusOptions: WorkspaceStatusOption[] = Object.keys(
507-
jobStatuses,
508-
).map((status) => {
509-
const display = getDisplayJobStatus(theme, status as ProvisionerJobStatus)
510-
return {
511-
label: display.status,
512-
value: status,
513-
color: display.type,
514-
}
515-
})
478+
const workspaceStatusOptions: WorkspaceStatusOption[] = WorkspaceStatuses.map(
479+
(status) => {
480+
const display = getDisplayWorkspaceStatus(status)
481+
return {
482+
label: display.text,
483+
value: status,
484+
color: display.type ?? "warning",
485+
}
486+
},
487+
)
516488
const selectedOption = workspaceStatusOptions.find(
517489
(option) => option.value === value,
518490
)
@@ -523,24 +495,14 @@ const StatusFilter: FC<{
523495

524496
return (
525497
<div>
526-
<MenuButton
527-
ref={buttonRef}
528-
startIcon={
529-
selectedOption ? (
530-
<StatusIndicator option={selectedOption} />
531-
) : undefined
532-
}
533-
onClick={() => setIsMenuOpen(true)}
534-
sx={{ width: 140 }}
535-
>
536-
{selectedOption ? selectedOption.label : "All statuses"}
498+
<MenuButton ref={buttonRef} onClick={() => setIsMenuOpen(true)}>
499+
Status
537500
</MenuButton>
538501
<Menu
539502
id="status-filter-menu"
540503
anchorEl={buttonRef.current}
541504
open={isMenuOpen}
542505
onClose={handleClose}
543-
sx={{ "& .MuiPaper-root": { width: 140 } }}
544506
>
545507
{workspaceStatusOptions.map((option) => (
546508
<MenuItem
@@ -594,8 +556,6 @@ const MenuButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
594556
{...props}
595557
sx={{
596558
borderRadius: "6px",
597-
lineHeight: 0,
598-
"& .MuiButton-endIcon": { marginLeft: "auto" },
599559
...props.sx,
600560
}}
601561
/>

0 commit comments

Comments
 (0)