feat: restrict access links to workspace owner

AbhineetJain · AbhineetJain · commit 08c4fd4eae50 · 2022-06-07T05:30:45.000Z
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -6,7 +6,7 @@ import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import useTheme from "@material-ui/styles/useTheme"
 import { FC } from "react"
-import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
+import { User, Workspace, WorkspaceResource } from "../../api/typesGenerated"
 import { getDisplayAgentStatus } from "../../util/workspace"
 import { AppLink } from "../AppLink/AppLink"
 import { Stack } from "../Stack/Stack"
@@ -27,9 +27,10 @@ interface ResourcesProps {
   resources?: WorkspaceResource[]
   getResourcesError?: Error
   workspace: Workspace
+  user?: User
 }
 
-export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, workspace }) => {
+export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, workspace, user }) => {
   const styles = useStyles()
   const theme: Theme = useTheme()
 
@@ -43,7 +44,7 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
             <TableHeaderRow>
               <TableCell>{Language.resourceLabel}</TableCell>
               <TableCell className={styles.agentColumn}>{Language.agentLabel}</TableCell>
-              <TableCell>{Language.accessLabel}</TableCell>
+              {user?.username === workspace.owner_name && <TableCell>{Language.accessLabel}</TableCell>}
               <TableCell>{Language.statusLabel}</TableCell>
             </TableHeaderRow>
           </TableHead>
@@ -84,28 +85,30 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
                       {agent.name}
                       <span className={styles.operatingSystem}>{agent.operating_system}</span>
                     </TableCell>
-                    <TableCell>
-                      <Stack>
-                        {agent.status === "connected" && (
-                          <TerminalLink
-                            className={styles.accessLink}
-                            workspaceName={workspace.name}
-                            agentName={agent.name}
-                            userName={workspace.owner_name}
-                          />
-                        )}
-                        {agent.status === "connected" &&
-                          agent.apps.map((app) => (
-                            <AppLink
-                              key={app.name}
-                              appIcon={app.icon}
-                              appName={app.name}
-                              userName={workspace.owner_name}
+                    {user?.username === workspace.owner_name && (
+                      <TableCell>
+                        <Stack>
+                          {agent.status === "connected" && (
+                            <TerminalLink
+                              className={styles.accessLink}
                               workspaceName={workspace.name}
+                              agentName={agent.name}
+                              userName={workspace.owner_name}
                             />
-                          ))}
-                      </Stack>
-                    </TableCell>
+                          )}
+                          {agent.status === "connected" &&
+                            agent.apps.map((app) => (
+                              <AppLink
+                                key={app.name}
+                                appIcon={app.icon}
+                                appName={app.name}
+                                userName={workspace.owner_name}
+                                workspaceName={workspace.name}
+                              />
+                            ))}
+                        </Stack>
+                      </TableCell>
+                    )}
                     <TableCell>
                       <span style={{ color: getDisplayAgentStatus(theme, agent).color }}>
                         {getDisplayAgentStatus(theme, agent).status}
diff --git a/site/src/components/Workspace/Workspace.stories.tsx b/site/src/components/Workspace/Workspace.stories.tsx
@@ -22,6 +22,13 @@ Started.args = {
   handleStop: action("stop"),
   resources: [Mocks.MockWorkspaceResource, Mocks.MockWorkspaceResource2],
   builds: [Mocks.MockWorkspaceBuild],
+  user: Mocks.MockUser,
+}
+
+export const OtherUser = Template.bind({})
+OtherUser.args = {
+  ...Started.args,
+  user: Mocks.MockUser2,
 }
 
 export const Starting = Template.bind({})
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -26,6 +26,7 @@ export interface WorkspaceProps {
   resources?: TypesGen.WorkspaceResource[]
   getResourcesError?: Error
   builds?: TypesGen.WorkspaceBuild[]
+  user?: TypesGen.User
 }
 
 /**
@@ -42,6 +43,7 @@ export const Workspace: FC<WorkspaceProps> = ({
   resources,
   getResourcesError,
   builds,
+  user,
 }) => {
   const styles = useStyles()
 
@@ -84,7 +86,7 @@ export const Workspace: FC<WorkspaceProps> = ({
 
           <WorkspaceStats workspace={workspace} />
 
-          <Resources resources={resources} getResourcesError={getResourcesError} workspace={workspace} />
+          <Resources resources={resources} getResourcesError={getResourcesError} workspace={workspace} user={user} />
 
           <WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
             <BuildsTable builds={builds} className={styles.timelineTable} />
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -1,5 +1,5 @@
-import { useMachine } from "@xstate/react"
-import React, { useEffect } from "react"
+import { useActor, useMachine } from "@xstate/react"
+import React, { useContext, useEffect } from "react"
 import { Helmet } from "react-helmet"
 import { useNavigate, useParams } from "react-router-dom"
 import { DeleteWorkspaceDialog } from "../../components/DeleteWorkspaceDialog/DeleteWorkspaceDialog"
@@ -10,6 +10,7 @@ import { Stack } from "../../components/Stack/Stack"
 import { Workspace } from "../../components/Workspace/Workspace"
 import { firstOrItem } from "../../util/array"
 import { pageTitle } from "../../util/page"
+import { XServiceContext } from "../../xServices/StateContext"
 import { workspaceMachine } from "../../xServices/workspace/workspaceXService"
 import { workspaceScheduleBannerMachine } from "../../xServices/workspaceSchedule/workspaceScheduleBannerXService"
 
@@ -24,6 +25,10 @@ export const WorkspacePage: React.FC = () => {
 
   const [bannerState, bannerSend] = useMachine(workspaceScheduleBannerMachine)
 
+  const xServices = useContext(XServiceContext)
+  const [authState, _] = useActor(xServices.authXService)
+  const { me } = authState.context
+
   /**
    * Get workspace, template, and organization on mount and whenever workspaceId changes.
    * workspaceSend should not change.
@@ -60,6 +65,7 @@ export const WorkspacePage: React.FC = () => {
               resources={resources}
               getResourcesError={getResourcesError instanceof Error ? getResourcesError : undefined}
               builds={builds}
+              user={me}
             />
             <DeleteWorkspaceDialog
               isOpen={workspaceState.matches({ ready: { build: "askingDelete" } })}
