Refactor filter

coder · BrunoQuaresma · May 30, 2023 · May 19, 2023 · May 23, 2023 · May 23, 2023
commit 858ee93670467ba946e2263261bc0ace6f6896ed
diff --git a/site/src/components/BuildsTable/BuildAvatar.tsx b/site/src/components/BuildsTable/BuildAvatar.tsx
@@ -5,7 +5,7 @@ import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined"
 import PauseOutlined from "@mui/icons-material/PauseOutlined"
 import DeleteOutlined from "@mui/icons-material/DeleteOutlined"
 import { WorkspaceBuild, WorkspaceTransition } from "api/typesGenerated"
-import { getDisplayJobStatus } from "utils/workspace"
+import { getDisplayWorkspaceBuildStatus } from "utils/workspace"
 import { Avatar, AvatarProps } from "components/Avatar/Avatar"
 import { PaletteIndex } from "theme/theme"
 import { Theme } from "@mui/material/styles"
@@ -39,7 +39,7 @@ const iconByTransition: Record<WorkspaceTransition, JSX.Element> = {
 
 export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
   const theme = useTheme<Theme>()
-  const displayBuildStatus = getDisplayJobStatus(theme, build.job.status)
+  const displayBuildStatus = getDisplayWorkspaceBuildStatus(theme, build)
 
   return (
     <StyledBadge

diff --git a/site/src/components/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/DeploymentBanner/DeploymentBannerView.tsx
@@ -1,7 +1,6 @@
 import { DeploymentStats, WorkspaceStatus } from "api/typesGenerated"
 import { FC, useMemo, useEffect, useState } from "react"
 import prettyBytes from "pretty-bytes"
-import { getStatus } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
 import BuildingIcon from "@mui/icons-material/Build"
 import { makeStyles } from "@mui/styles"
 import { RocketIcon } from "components/Icons/RocketIcon"
@@ -19,6 +18,7 @@ import dayjs from "dayjs"
 import CollectedIcon from "@mui/icons-material/Compare"
 import RefreshIcon from "@mui/icons-material/Refresh"
 import Button from "@mui/material/Button"
+import { getDisplayWorkspaceStatus } from "utils/workspace"
 
 export const bannerHeight = 36
 
@@ -218,7 +218,7 @@ const WorkspaceBuildValue: FC<{
   count?: number
 }> = ({ status, count }) => {
   const styles = useStyles()
-  const displayStatus = getStatus(status)
+  const displayStatus = getDisplayWorkspaceStatus(status)
   let statusText = displayStatus.text
   let icon = displayStatus.icon
   if (status === "starting") {

diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -1,11 +1,5 @@
-import CircularProgress from "@mui/material/CircularProgress"
-import ErrorIcon from "@mui/icons-material/ErrorOutline"
-import StopIcon from "@mui/icons-material/StopOutlined"
-import PlayIcon from "@mui/icons-material/PlayArrowOutlined"
-import QueuedIcon from "@mui/icons-material/HourglassEmpty"
-import { Workspace, WorkspaceBuild } from "api/typesGenerated"
+import { Workspace } from "api/typesGenerated"
 import { Pill } from "components/Pill/Pill"
-import i18next from "i18next"
 import { FC, PropsWithChildren } from "react"
 import { makeStyles } from "@mui/styles"
 import { combineClasses } from "utils/combineClasses"
@@ -14,82 +8,7 @@ import {
   ImpendingDeletionBadge,
   ImpendingDeletionText,
 } from "components/WorkspaceDeletion"
-
-const LoadingIcon: FC = () => {
-  return <CircularProgress size={10} style={{ color: "#FFF" }} />
-}
-
-export const getStatus = (buildStatus: WorkspaceBuild["status"]) => {
-  const { t } = i18next
-
-  switch (buildStatus) {
-    case undefined:
-      return {
-        text: t("workspaceStatus.loading", { ns: "common" }),
-        icon: <LoadingIcon />,
-      } as const
-    case "running":
-      return {
-        type: "success",
-        text: t("workspaceStatus.running", { ns: "common" }),
-        icon: <PlayIcon />,
-      } as const
-    case "starting":
-      return {
-        type: "success",
-        text: t("workspaceStatus.starting", { ns: "common" }),
-        icon: <LoadingIcon />,
-      } as const
-    case "stopping":
-      return {
-        type: "warning",
-        text: t("workspaceStatus.stopping", { ns: "common" }),
-        icon: <LoadingIcon />,
-      } as const
-    case "stopped":
-      return {
-        type: "warning",
-        text: t("workspaceStatus.stopped", { ns: "common" }),
-        icon: <StopIcon />,
-      } as const
-    case "deleting":
-      return {
-        type: "warning",
-        text: t("workspaceStatus.deleting", { ns: "common" }),
-        icon: <LoadingIcon />,
-      } as const
-    case "deleted":
-      return {
-        type: "error",
-        text: t("workspaceStatus.deleted", { ns: "common" }),
-        icon: <ErrorIcon />,
-      } as const
-    case "canceling":
-      return {
-        type: "warning",
-        text: t("workspaceStatus.canceling", { ns: "common" }),
-        icon: <LoadingIcon />,
-      } as const
-    case "canceled":
-      return {
-        type: "warning",
-        text: t("workspaceStatus.canceled", { ns: "common" }),
-        icon: <ErrorIcon />,
-      } as const
-    case "failed":
-      return {
-        type: "error",
-        text: t("workspaceStatus.failed", { ns: "common" }),
-        icon: <ErrorIcon />,
-      } as const
-    case "pending":
-      return {
-        type: "info",
-        text: t("workspaceStatus.pending", { ns: "common" }),
-        icon: <QueuedIcon />,
-      } as const
-  }
-}
+import { getDisplayWorkspaceStatus } from "utils/workspace"
 
 export type WorkspaceStatusBadgeProps = {
   workspace: Workspace
@@ -99,7 +18,9 @@ export type WorkspaceStatusBadgeProps = {
 export const WorkspaceStatusBadge: FC<
   PropsWithChildren<WorkspaceStatusBadgeProps>
 > = ({ workspace, className }) => {
-  const { text, icon, type } = getStatus(workspace.latest_build.status)
+  const { text, icon, type } = getDisplayWorkspaceStatus(
+    workspace.latest_build.status,
+  )
   return (
     <ChooseOne>
       {/* <ImpendingDeletionBadge/> determines its own visibility */}
@@ -117,7 +38,9 @@ export const WorkspaceStatusText: FC<
   PropsWithChildren<WorkspaceStatusBadgeProps>
 > = ({ workspace, className }) => {
   const styles = useStyles()
-  const { text, type } = getStatus(workspace.latest_build.status)
+  const { text, type } = getDisplayWorkspaceStatus(
+    workspace.latest_build.status,
+  )
 
   return (
     <ChooseOne>

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -1,5 +1,5 @@
 import Link from "@mui/material/Link"
-import { ProvisionerJobStatus, Workspace } from "api/typesGenerated"
+import { Workspace, WorkspaceStatuses } from "api/typesGenerated"
 import { Maybe } from "components/Conditionals/Maybe"
 import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidgetBase"
 import { FC, forwardRef, useRef, useState } from "react"
@@ -22,8 +22,6 @@ import TextField from "@mui/material/TextField"
 import { MockTemplate, MockUser, MockUser2 } from "testHelpers/entities"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown"
-import { getDisplayJobStatus, jobStatuses } from "utils/workspace"
-import { useTheme } from "@mui/styles"
 import Button, { ButtonProps } from "@mui/material/Button"
 import Menu from "@mui/material/Menu"
 import MenuItem from "@mui/material/MenuItem"
@@ -35,6 +33,7 @@ import { Palette, PaletteColor } from "@mui/material/styles"
 import IconButton from "@mui/material/IconButton"
 import Tooltip from "@mui/material/Tooltip"
 import CloseOutlined from "@mui/icons-material/CloseOutlined"
+import { getDisplayWorkspaceStatus } from "utils/workspace"
 
 export const Language = {
   pageTitle: "Workspaces",
@@ -274,21 +273,8 @@ const OwnerFilter: FC<{
 
   return (
     <div>
-      <MenuButton
-        ref={buttonRef}
-        startIcon={
-          selectedOption ? (
-            <UserAvatar
-              username={selectedOption.label}
-              avatarURL={selectedOption.avatarUrl}
-              sx={{ width: 16, height: 16, fontSize: "8px !important" }}
-            />
-          ) : undefined
-        }
-        onClick={() => setIsMenuOpen(true)}
-        sx={{ width: 220 }}
-      >
-        {selectedOption ? selectedOption.label : "All users"}
+      <MenuButton ref={buttonRef} onClick={() => setIsMenuOpen(true)}>
+        User
       </MenuButton>
       <Menu
         id="user-filter-menu"
@@ -392,21 +378,8 @@ const TemplateFilter: FC<{
 
   return (
     <div>
-      <MenuButton
-        ref={buttonRef}
-        startIcon={
-          selectedOption ? (
-            <TemplateAvatar
-              sx={{ width: 14, height: 14, fontSize: 8 }}
-              templateName={selectedOption.label}
-              icon={selectedOption.icon}
-            />
-          ) : undefined
-        }
-        onClick={() => setIsMenuOpen(true)}
-        sx={{ width: 220 }}
-      >
-        {selectedOption ? selectedOption.label : "All templates"}
+      <MenuButton ref={buttonRef} onClick={() => setIsMenuOpen(true)}>
+        Template
       </MenuButton>
       <Menu
         id="template-filter-menu"
@@ -500,19 +473,18 @@ const StatusFilter: FC<{
   value: FilterValue["status"]
   onChange: (value: FilterValue["status"]) => void
 }> = ({ value, onChange }) => {
-  const theme = useTheme()
   const buttonRef = useRef<HTMLButtonElement>(null)
   const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const workspaceStatusOptions: WorkspaceStatusOption[] = Object.keys(
-    jobStatuses,
-  ).map((status) => {
-    const display = getDisplayJobStatus(theme, status as ProvisionerJobStatus)
-    return {
-      label: display.status,
-      value: status,
-      color: display.type,
-    }
-  })
+  const workspaceStatusOptions: WorkspaceStatusOption[] = WorkspaceStatuses.map(
+    (status) => {
+      const display = getDisplayWorkspaceStatus(status)
+      return {
+        label: display.text,
+        value: status,
+        color: display.type ?? "warning",
+      }
+    },
+  )
   const selectedOption = workspaceStatusOptions.find(
     (option) => option.value === value,
   )
@@ -523,24 +495,14 @@ const StatusFilter: FC<{
 
   return (
     <div>
-      <MenuButton
-        ref={buttonRef}
-        startIcon={
-          selectedOption ? (
-            <StatusIndicator option={selectedOption} />
-          ) : undefined
-        }
-        onClick={() => setIsMenuOpen(true)}
-        sx={{ width: 140 }}
-      >
-        {selectedOption ? selectedOption.label : "All statuses"}
+      <MenuButton ref={buttonRef} onClick={() => setIsMenuOpen(true)}>
+        Status
       </MenuButton>
       <Menu
         id="status-filter-menu"
         anchorEl={buttonRef.current}
         open={isMenuOpen}
         onClose={handleClose}
-        sx={{ "& .MuiPaper-root": { width: 140 } }}
       >
         {workspaceStatusOptions.map((option) => (
           <MenuItem
@@ -594,8 +556,6 @@ const MenuButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
       {...props}
       sx={{
         borderRadius: "6px",
-        lineHeight: 0,
-        "& .MuiButton-endIcon": { marginLeft: "auto" },
         ...props.sx,
       }}
     />