Move status string to i18n

coder · BrunoQuaresma · Oct 18, 2022 · Oct 14, 2022 · Oct 17, 2022 · Oct 17, 2022
commit d437ea0b2d2c42be13ba40e1124a9ab9d78da8eb
diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx
@@ -3,16 +3,17 @@ import { makeStyles } from "@material-ui/core/styles"
 import { combineClasses } from "util/combineClasses"
 import { WorkspaceAgent } from "api/typesGenerated"
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
-import { DisplayAgentStatusLanguage } from "util/workspace"
+import { useTranslation } from "react-i18next"
 
 const ConnectedStatus: React.FC = () => {
   const styles = useStyles()
+  const { t } = useTranslation("workspacePage")
 
   return (
-    <Tooltip title={DisplayAgentStatusLanguage.connected}>
+    <Tooltip title={t("agentStatus.connected")}>
       <div
         role="status"
-        aria-label={DisplayAgentStatusLanguage.connected}
+        aria-label={t("agentStatus.connected")}
         className={combineClasses([styles.status, styles.connected])}
       />
     </Tooltip>
@@ -21,12 +22,13 @@ const ConnectedStatus: React.FC = () => {
 
 const DisconnectedStatus: React.FC = () => {
   const styles = useStyles()
+  const { t } = useTranslation("workspacePage")
 
   return (
-    <Tooltip title={DisplayAgentStatusLanguage.disconnected}>
+    <Tooltip title={t("agentStatus.disconnected")}>
       <div
         role="status"
-        aria-label={DisplayAgentStatusLanguage.disconnected}
+        aria-label={t("agentStatus.disconnected")}
         className={combineClasses([styles.status, styles.disconnected])}
       />
     </Tooltip>
@@ -35,12 +37,13 @@ const DisconnectedStatus: React.FC = () => {
 
 const ConnectingStatus: React.FC = () => {
   const styles = useStyles()
+  const { t } = useTranslation("workspacePage")
 
   return (
-    <Tooltip title={DisplayAgentStatusLanguage.connecting}>
+    <Tooltip title={t("agentStatus.connecting")}>
       <div
         role="status"
-        aria-label={DisplayAgentStatusLanguage.connecting}
+        aria-label={t("agentStatus.connecting")}
         className={combineClasses([styles.status, styles.connecting])}
       />
     </Tooltip>

diff --git a/site/src/i18n/en/workspacePage.json b/site/src/i18n/en/workspacePage.json
@@ -33,5 +33,10 @@
     "canceling": "Canceling",
     "deleted": "Deleted",
     "pending": "Pending"
+  },
+  "agentStatus": {
+    "connected": "Connected",
+    "connecting": "Connecting...",
+    "disconnected": "Disconnected"
   }
 }
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
@@ -27,7 +27,6 @@ import {
   renderWithAuth,
 } from "../../testHelpers/renderHelpers"
 import { server } from "../../testHelpers/server"
-import { DisplayAgentStatusLanguage } from "../../util/workspace"
 import { WorkspacePage } from "./WorkspacePage"
 
 const { t } = i18next
@@ -338,15 +337,21 @@ describe("WorkspacePage", () => {
       )
       expect(agent2Names.length).toEqual(2)
       const agent1Status = await screen.findAllByLabelText(
-        DisplayAgentStatusLanguage[MockWorkspaceAgent.status],
+        t<string>(`agentStatus.${MockWorkspaceAgent.status}`, {
+          ns: "workspacePage",
+        }),
       )
       expect(agent1Status.length).toEqual(1)
       const agentDisconnected = await screen.findAllByLabelText(
-        DisplayAgentStatusLanguage[MockWorkspaceAgentDisconnected.status],
+        t<string>(`agentStatus.${MockWorkspaceAgentDisconnected.status}`, {
+          ns: "workspacePage",
+        }),
       )
       expect(agentDisconnected.length).toEqual(1)
       const agentConnecting = await screen.findAllByLabelText(
-        DisplayAgentStatusLanguage[MockWorkspaceAgentConnecting.status],
+        t<string>(`agentStatus.${MockWorkspaceAgentConnecting.status}`, {
+          ns: "workspacePage",
+        }),
       )
       expect(agentConnecting.length).toEqual(1)
       expect(getTemplateMock).toBeCalled()

diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts
@@ -104,38 +104,6 @@ export const displayWorkspaceBuildDuration = (
   return duration ? `${duration} seconds` : inProgressLabel
 }
 
-export const DisplayAgentStatusLanguage = {
-  connected: "Connected",
-  connecting: "Connecting...",
-  disconnected: "Disconnected",
-}
-
-export const getDisplayAgentStatus = (
-  theme: Theme,
-  agent: TypesGen.WorkspaceAgent,
-): {
-  color: string
-  status: string
-} => {
-  switch (agent.status) {
-    case "connected":
-      return {
-        color: theme.palette.success.main,
-        status: DisplayAgentStatusLanguage["connected"],
-      }
-    case "connecting":
-      return {
-        color: theme.palette.primary.main,
-        status: DisplayAgentStatusLanguage["connecting"],
-      }
-    case "disconnected":
-      return {
-        color: theme.palette.text.secondary,
-        status: DisplayAgentStatusLanguage["disconnected"],
-      }
-  }
-}
-
 export const getDisplayVersionStatus = (
   agentVersion: string,
   serverVersion: string,