coder · BrunoQuaresma · May 30, 2023 · May 19, 2023 · May 23, 2023 · May 23, 2023
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/codersdk/deployment.go b/codersdk/deployment.go
@@ -1682,6 +1682,9 @@ const (
 	// https://github.com/coder/coder/milestone/19
 	ExperimentWorkspaceActions Experiment = "workspace_actions"
 
+	// New workspace filter
+	ExperimentWorkspaceFilter Experiment = "workspace_filter"
+
 	// Add new experiments here!
 	// ExperimentExample Experiment = "example"
 )

diff --git a/docs/api/schemas.md b/docs/api/schemas.md
@@ -2559,6 +2559,7 @@ CreateParameterRequest is a structure used to create a new parameter value for a
 | ------------------- |
 | `moons`             |
 | `workspace_actions` |
+| `workspace_filter`  |
 
 ## codersdk.Feature
 

diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
@@ -136,6 +136,7 @@ rules:
   "object-curly-spacing": "off"
   react-hooks/exhaustive-deps: warn
   react-hooks/rules-of-hooks: error
+  react/display-name: "off"
   react/jsx-no-script-url:
     - error
     - - name: Link

diff --git a/site/package.json b/site/package.json
@@ -111,8 +111,8 @@
     "@testing-library/user-event": "14.4.3",
     "@types/jest": "29.4.0",
     "@types/node": "14.18.22",
-    "@types/react": "18.0.15",
-    "@types/react-dom": "18.0.6",
+    "@types/react": "18.2.6",
+    "@types/react-dom": "18.2.4",
     "@types/react-helmet": "6.1.5",
     "@types/react-syntax-highlighter": "15.5.5",
     "@types/react-virtualized-auto-sizer": "1.0.1",

diff --git a/site/emoji-mart.d.ts → site/src/@types/emoji-mart.d.ts b/site/emoji-mart.d.ts → site/src/@types/emoji-mart.d.ts
diff --git a/site/src/@types/i18n.d.ts b/site/src/@types/i18n.d.ts
@@ -0,0 +1,10 @@
+import "i18next"
+
+// https://github.com/i18next/react-i18next/issues/1543#issuecomment-1528679591
+declare module "i18next" {
+  interface TypeOptions {
+    returnNull: false
+    allowObjectInHTMLChildren: false
+  }
+  export function t<T>(s: string): T
+}
diff --git a/site/mui.d.ts → site/src/@types/mui.d.ts b/site/mui.d.ts → site/src/@types/mui.d.ts
diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
@@ -34,6 +34,9 @@ export const isApiValidationError = (error: unknown): error is ApiError => {
   return isApiError(error) && hasApiFieldErrors(error)
 }
 
+export const hasError = (error: unknown) =>
+  error !== undefined && error !== null
+
 export const mapApiErrorToFieldErrors = (
   apiErrorResponse: ApiErrorResponse,
 ): FieldErrors => {

diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
@@ -1385,8 +1385,12 @@ export const Entitlements: Entitlement[] = [
 ]
 
 // From codersdk/deployment.go
-export type Experiment = "moons" | "workspace_actions"
-export const Experiments: Experiment[] = ["moons", "workspace_actions"]
+export type Experiment = "moons" | "workspace_actions" | "workspace_filter"
+export const Experiments: Experiment[] = [
+  "moons",
+  "workspace_actions",
+  "workspace_filter",
+]
 
 // From codersdk/deployment.go
 export type FeatureName =

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/UserAvatar/UserAvatar.tsx b/site/src/components/UserAvatar/UserAvatar.tsx
@@ -1,21 +1,19 @@
-import { Avatar } from "components/Avatar/Avatar"
+import { Avatar, AvatarProps } from "components/Avatar/Avatar"
 import { FC } from "react"
 
-export interface UserAvatarProps {
+export type UserAvatarProps = {
   username: string
   avatarURL?: string
-  // It is needed to work with the AvatarGroup so it can pass the
-  // MuiAvatarGroup-avatar className
-  className?: string
-}
+} & AvatarProps
 
 export const UserAvatar: FC<UserAvatarProps> = ({
   username,
   avatarURL,
-  className,
+
+  ...avatarProps
 }) => {
   return (
-    <Avatar title={username} src={avatarURL} className={className}>
+    <Avatar title={username} src={avatarURL} {...avatarProps}>
       {username}
     </Avatar>
   )

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/hooks/index.ts b/site/src/hooks/index.ts
@@ -2,7 +2,6 @@ export * from "./useClickable"
 export * from "./useClickableTableRow"
 export * from "./useClipboard"
 export * from "./useFeatureVisibility"
-export * from "./useFilter"
 export * from "./useLocalStorage"
 export * from "./useMe"
 export * from "./useOrganizationId"

diff --git a/site/src/hooks/useFilter.ts b/site/src/hooks/useFilter.ts
diff --git a/site/src/hooks/usePagination.ts b/site/src/hooks/usePagination.ts
@@ -1,15 +1,13 @@
 import { DEFAULT_RECORDS_PER_PAGE } from "components/PaginationWidget/utils"
 import { useSearchParams } from "react-router-dom"
 
-type UsePaginationResult = {
-  page: number
-  limit: number
-  goToPage: (page: number) => void
-}
-
-export const usePagination = (): UsePaginationResult => {
-  const [searchParams, setSearchParams] = useSearchParams()
-  const page = searchParams.get("page") ? Number(searchParams.get("page")) : 0
+export const usePagination = ({
+  searchParamsResult,
+}: {
+  searchParamsResult: ReturnType<typeof useSearchParams>
+}) => {
+  const [searchParams, setSearchParams] = searchParamsResult
+  const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1
   const limit = DEFAULT_RECORDS_PER_PAGE
 
   const goToPage = (page: number) => {

diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
@@ -2,7 +2,7 @@ import { FC, PropsWithChildren, useState } from "react"
 import { Section } from "components/SettingsLayout/Section"
 import { TokensPageView } from "./TokensPageView"
 import makeStyles from "@mui/styles/makeStyles"
-import { useTranslation, Trans } from "react-i18next"
+import { useTranslation } from "react-i18next"
 import { useTokensData } from "./hooks"
 import { ConfirmDeleteDialog } from "./components"
 import { Stack } from "components/Stack/Stack"
@@ -16,12 +16,6 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
   const { t } = useTranslation("tokensPage")
 
   const cliCreateCommand = "coder tokens create"
-  const description = (
-    <Trans t={t} i18nKey="description" values={{ cliCreateCommand }}>
-      Tokens are used to authenticate with the Coder API. You can create a token
-      with the Coder CLI using the <code>{{ cliCreateCommand }}</code> command.
-    </Trans>
-  )
 
   const TokenActions = () => (
     <Stack direction="row" justifyContent="end" className={styles.tokenActions}>
@@ -52,7 +46,13 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
       <Section
         title={t("title")}
         className={styles.section}
-        description={description}
+        description={
+          <>
+            Tokens are used to authenticate with the Coder API. You can create a
+            token with the Coder CLI using the <code>{cliCreateCommand}</code>{" "}
+            command.
+          </>
+        }
         layout="fluid"
       >
         <TokenActions />