WIP mock eventsource

ammario · ammario · commit cee332b83dbc · 2023-03-23T19:49:47.000Z
diff --git a/site/package.json b/site/package.json
@@ -133,6 +133,9 @@
     "prettier": "2.8.1",
     "resize-observer": "1.0.4",
     "semver": "7.3.7",
+    "storybook-addon-fetch-mock": "^1.0.1",
+    "storybook-addon-mock": "^3.2.0",
+    "storybook-react-context": "^0.6.0",
     "typescript": "4.8.2"
   },
   "browserslist": [
diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
@@ -3,7 +3,9 @@ import makeStyles from "@material-ui/core/styles/makeStyles"
 import { watchAgentMetadata } from "api/api"
 import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated"
 import { Stack } from "components/Stack/Stack"
-import { FC, useEffect, useState } from "react"
+import { createContext, FC, useContext, useEffect, useState } from "react"
+
+export const WatchAgentMetadataContext = createContext(watchAgentMetadata)
 
 const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
   const styles = useStyles()
@@ -50,11 +52,15 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
   )
 }
 
-export const AgentMetadata: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
+export const AgentMetadata: FC<{
+  agent: WorkspaceAgent
+}> = ({ agent }) => {
   const [metadata, setMetadata] = useState<
     WorkspaceAgentMetadata[] | undefined
   >(undefined)
 
+  const watchAgentMetadata = useContext(WatchAgentMetadataContext)
+
   useEffect(() => {
     const source = watchAgentMetadata(agent.id)
 
@@ -68,7 +74,7 @@ export const AgentMetadata: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
     return () => {
       source.close()
     }
-  }, [agent.id])
+  }, [agent.id, watchAgentMetadata])
 
   const styles = useStyles()
   if (metadata === undefined) {
diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
@@ -1,12 +1,23 @@
 import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
+import { WatchAgentMetadataContext } from "components/Resources/AgentMetadata"
 import * as Mocks from "../../testHelpers/entities"
 import { Workspace, WorkspaceErrors, WorkspaceProps } from "./Workspace"
+import { withReactContext } from "storybook-react-context"
 
 export default {
   title: "components/Workspace",
   component: Workspace,
   argTypes: {},
+  decorators: [
+    withReactContext({
+      Context: WatchAgentMetadataContext,
+      initialState: (_: string): EventSource => {
+        const s = new EventSource()
+        return s
+      },
+    }),
+  ],
 }
 
 const Template: Story<WorkspaceProps> = (args) => <Workspace {...args} />
diff --git a/site/src/testHelpers/handlers.ts b/site/src/testHelpers/handlers.ts
@@ -318,4 +318,16 @@ export const handlers = [
       return res(ctx.status(200), ctx.json([M.MockWorkspaceBuildParameter1]))
     },
   ),
+
+  rest.get(
+    "/api/v2/workspaceagents/:workspaceAgentId/watch-metadata",
+    (_, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.set("Connection", "keep-alive"),
+        ctx.set("Content-Type", "text/event-stream"),
+        ctx.body(`data: []\n\n`),
+      )
+    },
+  ),
 ]
diff --git a/site/yarn.lock b/site/yarn.lock
