coder · f0ssel · Feb 20, 2024 · Jan 24, 2024 · Feb 8, 2024 · Feb 8, 2024
diff --git a/coderd/workspaceagentportshare.go b/coderd/workspaceagentportshare.go
@@ -156,7 +156,7 @@ func (api *API) deleteWorkspaceAgentPortShare(rw http.ResponseWriter, r *http.Re
 }
 
 func convertPortShares(shares []database.WorkspaceAgentPortShare) []codersdk.WorkspaceAgentPortShare {
-	var converted []codersdk.WorkspaceAgentPortShare
+	converted := []codersdk.WorkspaceAgentPortShare{}
 	for _, share := range shares {
 		converted = append(converted, convertPortShare(share))
 	}

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1163,6 +1163,39 @@ export const getAgentListeningPorts = async (
   return response.data;
 };
 
+export const getWorkspaceAgentSharedPorts = async (
+  workspaceID: string,
+): Promise<TypesGen.WorkspaceAgentPortShares> => {
+  const response = await axios.get(
+    `/api/v2/workspaces/${workspaceID}/port-share`,
+  );
+  return response.data;
+};
+
+export const upsertWorkspaceAgentSharedPort = async (
+  workspaceID: string,
+  req: TypesGen.UpsertWorkspaceAgentPortShareRequest,
+): Promise<TypesGen.WorkspaceAgentPortShares> => {
+  const response = await axios.post(
+    `/api/v2/workspaces/${workspaceID}/port-share`,
+    req,
+  );
+  return response.data;
+};
+
+export const deleteWorkspaceAgentSharedPort = async (
+  workspaceID: string,
+  req: TypesGen.DeleteWorkspaceAgentPortShareRequest,
+): Promise<TypesGen.WorkspaceAgentPortShares> => {
+  const response = await axios.delete(
+    `/api/v2/workspaces/${workspaceID}/port-share`,
+    {
+      data: req,
+    },
+  );
+  return response.data;
+};
+
 // getDeploymentSSHConfig is used by the VSCode-Extension.
 export const getDeploymentSSHConfig =
   async (): Promise<TypesGen.SSHConfigResponse> => {

diff --git a/site/src/api/queries/workspaceportsharing.ts b/site/src/api/queries/workspaceportsharing.ts
@@ -0,0 +1,32 @@
+import {
+  deleteWorkspaceAgentSharedPort,
+  getWorkspaceAgentSharedPorts,
+  upsertWorkspaceAgentSharedPort,
+} from "api/api";
+import {
+  DeleteWorkspaceAgentPortShareRequest,
+  UpsertWorkspaceAgentPortShareRequest,
+} from "api/typesGenerated";
+
+export const workspacePortShares = (workspaceId: string) => {
+  return {
+    queryKey: ["sharedPorts", workspaceId],
+    queryFn: () => getWorkspaceAgentSharedPorts(workspaceId),
+  };
+};
+
+export const upsertWorkspacePortShare = (workspaceId: string) => {
+  return {
+    mutationFn: async (options: UpsertWorkspaceAgentPortShareRequest) => {
+      await upsertWorkspaceAgentSharedPort(workspaceId, options);
+    },
+  };
+};
+
+export const deleteWorkspacePortShare = (workspaceId: string) => {
+  return {
+    mutationFn: async (options: DeleteWorkspaceAgentPortShareRequest) => {
+      await deleteWorkspaceAgentSharedPort(workspaceId, options);
+    },
+  };
+};
diff --git a/site/src/modules/resources/AgentRow.test.tsx b/site/src/modules/resources/AgentRow.test.tsx
@@ -1,4 +1,8 @@
-import { MockWorkspace, MockWorkspaceAgent } from "testHelpers/entities";
+import {
+  MockTemplate,
+  MockWorkspace,
+  MockWorkspaceAgent,
+} from "testHelpers/entities";
 import { AgentRow, AgentRowProps } from "./AgentRow";
 import { DisplayAppNameMap } from "./AppLink/AppLink";
 import { screen } from "@testing-library/react";
@@ -80,6 +84,7 @@ describe.each<{
   const props: AgentRowProps = {
     agent: MockWorkspaceAgent,
     workspace: MockWorkspace,
+    template: MockTemplate,
     showApps: false,
     serverVersion: "",
     serverAPIVersion: "",

diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
@@ -15,6 +15,7 @@ import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List, ListOnScrollProps } from "react-window";
 import * as API from "api/api";
 import type {
+  Template,
   Workspace,
   WorkspaceAgent,
   WorkspaceAgentLogSource,
@@ -59,13 +60,15 @@ export interface AgentRowProps {
   serverVersion: string;
   serverAPIVersion: string;
   onUpdateAgent: () => void;
+  template: Template;
   storybookLogs?: LineWithID[];
   storybookAgentMetadata?: WorkspaceAgentMetadata[];
 }
 
 export const AgentRow: FC<AgentRowProps> = ({
   agent,
   workspace,
+  template,
   showApps,
   showBuiltinApps = true,
   hideSSHButton,
@@ -220,6 +223,8 @@ export const AgentRow: FC<AgentRowProps> = ({
                   workspaceName={workspace.name}
                   agent={agent}
                   username={workspace.owner_name}
+                  workspaceID={workspace.id}
+                  template={template}
                 />
               )}
           </div>

diff --git a/site/src/modules/resources/PortForwardButton.stories.tsx b/site/src/modules/resources/PortForwardButton.stories.tsx
@@ -2,6 +2,8 @@ import { PortForwardButton } from "./PortForwardButton";
 import type { Meta, StoryObj } from "@storybook/react";
 import {
   MockListeningPortsResponse,
+  MockSharedPortsResponse,
+  MockWorkspace,
   MockWorkspaceAgent,
 } from "testHelpers/entities";
 
@@ -17,15 +19,18 @@ export default meta;
 type Story = StoryObj<typeof PortForwardButton>;
 
 export const Example: Story = {
-  args: {
-    storybook: {
-      portsQueryData: MockListeningPortsResponse,
-    },
+  parameters: {
+    queries: [
+      {
+        key: ["portForward", MockWorkspaceAgent.id],
+        data: MockListeningPortsResponse,
+      },
+      {
+        key: ["sharedPorts", MockWorkspace.id],
+        data: MockSharedPortsResponse,
+      },
+    ],
   },
 };
 
-export const Loading: Story = {
-  args: {
-    storybook: {},
-  },
-};
+export const Loading: Story = {};