Add base filter

coder · BrunoQuaresma · May 30, 2023 · May 19, 2023 · May 23, 2023 · May 23, 2023
commit 8a95c559f88613b29feac942563e71a17c85eb75
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
@@ -30,16 +30,16 @@
   "dependencies": {
     "@emoji-mart/data": "1.0.5",
     "@emoji-mart/react": "1.0.1",
-    "@fastly/performance-observer-polyfill": "^2.0.0",
-    "@emotion/react": "^11.10.8",
-    "@emotion/styled": "^11.10.8",
+    "@emotion/react": "11.10.8",
+    "@emotion/styled": "11.10.8",
+    "@fastly/performance-observer-polyfill": "2.0.0",
     "@fontsource/ibm-plex-mono": "4.5.10",
     "@fontsource/inter": "4.5.11",
     "@monaco-editor/react": "4.5.0",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.129",
-    "@mui/material": "^5.12.3",
-    "@mui/styles": "^5.12.3",
+    "@mui/icons-material": "5.11.16",
+    "@mui/lab": "5.0.0-alpha.129",
+    "@mui/material": "5.12.3",
+    "@mui/styles": "5.12.3",
     "@tanstack/react-query": "4.22.4",
     "@testing-library/react-hooks": "8.0.1",
     "@types/color-convert": "2.0.0",
@@ -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/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 { getDisplayWorkspaceBuildStatus } from "utils/workspace"
+import { getDisplayJobStatus } 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 = getDisplayWorkspaceBuildStatus(theme, build)
+  const displayBuildStatus = getDisplayJobStatus(theme, build.job.status)
 
   return (
     <StyledBadge

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/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 />

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -33,8 +33,8 @@ const WorkspacesPage: FC = () => {
       <WorkspacesPageView
         workspaces={data?.workspaces}
         error={error}
-        filter={filter.query}
-        onFilter={filter.setFilter}
+        filterQuery={filter.query}
+        onFilterQueryChange={filter.setFilter}
         count={data?.count}
         page={pagination.page}
         limit={pagination.limit}

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
@@ -76,13 +76,13 @@ AllStates.args = {
 export const OwnerHasNoWorkspaces = Template.bind({})
 OwnerHasNoWorkspaces.args = {
   workspaces: [],
-  filter: workspaceFilterQuery.me,
+  filterQuery: workspaceFilterQuery.me,
   count: 0,
 }
 
 export const NoSearchResults = Template.bind({})
 NoSearchResults.args = {
   workspaces: [],
-  filter: "searchtearmwithnoresults",
+  filterQuery: "searchtearmwithnoresults",
   count: 0,
 }