Merge branch 'main' into dean/app-urls-use-slug

coder · deansheather · Oct 28, 2022 · Oct 16, 2022 · Oct 16, 2022 · Oct 17, 2022
commit b06dcad7613a593ac3eb8ae80fee0486bddbf978
diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/site/src/components/AppLink/AppLink.stories.tsx
@@ -15,49 +15,59 @@ const Template: Story<AppLinkProps> = (args) => <AppLink {...args} />
 
 export const WithIcon = Template.bind({})
 WithIcon.args = {
-  username: "developer",
-  workspaceName: MockWorkspace.name,
-  appSlug: "code-server",
-  appDisplayName: "code-server",
-  appIcon: "/icon/code.svg",
-  appSharingLevel: "owner",
-  health: "healthy",
+  workspace: MockWorkspace,
+  app: {
+    ...MockWorkspaceApp,
+    name: "code-server",
+    icon: "/icon/code.svg",
+    sharing_level: "owner",
+    health: "healthy",
+  },
+  agent: MockWorkspaceAgent,
 }
 
 export const WithoutIcon = Template.bind({})
 WithoutIcon.args = {
-  username: "developer",
-  workspaceName: MockWorkspace.name,
-  appSlug: "code-server",
-  appDisplayName: "code-server",
-  appSharingLevel: "owner",
-  health: "healthy",
+  workspace: MockWorkspace,
+  app: {
+    ...MockWorkspaceApp,
+    name: "code-server",
+    sharing_level: "owner",
+    health: "healthy",
+  },
+  agent: MockWorkspaceAgent,
 }
 
 export const HealthDisabled = Template.bind({})
 HealthDisabled.args = {
-  username: "developer",
-  workspaceName: MockWorkspace.name,
-  appSlug: "code-server",
-  appDisplayName: "code-server",
-  appSharingLevel: "owner",
-  health: "disabled",
+  workspace: MockWorkspace,
+  app: {
+    ...MockWorkspaceApp,
+    name: "code-server",
+    sharing_level: "owner",
+    health: "disabled",
+  },
+  agent: MockWorkspaceAgent,
 }
 
 export const HealthInitializing = Template.bind({})
 HealthInitializing.args = {
-  username: "developer",
-  workspaceName: MockWorkspace.name,
-  appSlug: "code-server",
-  appDisplayName: "code-server",
-  health: "initializing",
+  workspace: MockWorkspace,
+  app: {
+    ...MockWorkspaceApp,
+    name: "code-server",
+    health: "initializing",
+  },
+  agent: MockWorkspaceAgent,
 }
 
 export const HealthUnhealthy = Template.bind({})
 HealthUnhealthy.args = {
-  username: "developer",
-  workspaceName: MockWorkspace.name,
-  appSlug: "code-server",
-  appDisplayName: "code-server",
-  health: "unhealthy",
+  workspace: MockWorkspace,
+  app: {
+    ...MockWorkspaceApp,
+    name: "code-server",
+    health: "unhealthy",
+  },
+  agent: MockWorkspaceAgent,
 }
@@ -17,71 +17,46 @@ export const Language = {
 
 export interface AppLinkProps {
   appsHost?: string
-  username: TypesGen.User["username"]
-  workspaceName: TypesGen.Workspace["name"]
-  agentName: TypesGen.WorkspaceAgent["name"]
-  appSlug: TypesGen.WorkspaceApp["slug"]
-  appDisplayName: TypesGen.WorkspaceApp["display_name"]
-  appIcon?: TypesGen.WorkspaceApp["icon"]
-  appCommand?: TypesGen.WorkspaceApp["command"]
-  appSubdomain: TypesGen.WorkspaceApp["subdomain"]
-  appSharingLevel: TypesGen.WorkspaceApp["sharing_level"]
-  health: TypesGen.WorkspaceApp["health"]
+  workspace: TypesGen.Workspace
+  app: TypesGen.WorkspaceApp
+  agent: TypesGen.WorkspaceAgent
 }
 
 export const AppLink: FC<AppLinkProps> = ({
   appsHost,
-  username,
-  workspaceName,
-  agentName,
-  appSlug,
-  appDisplayName,
-  appIcon,
-  appCommand,
-  appSubdomain,
-  appSharingLevel,
-  health,
+  app,
+  workspace,
+  agent,
 }) => {
   const styles = useStyles()
-  if (appSlug === "") {
+  const username = workspace.owner_name
+
+  let appSlug = app.slug
+  let appDisplayName = app.display_name
+  if (!appSlug) {
     appSlug = appDisplayName
   }
-  if (appDisplayName === "") {
+  if (!appDisplayName) {
     appDisplayName = appSlug
   }
 
   // The backend redirects if the trailing slash isn't included, so we add it
   // here to avoid extra roundtrips.
-  let href = `/@${username}/${workspaceName}.${agentName}/apps/${encodeURIComponent(
-    appSlug,
-  )}/`
-  if (appCommand) {
-    href = `/@${username}/${workspaceName}.${agentName}/terminal?command=${encodeURIComponent(
-      appCommand,
-    )}`
+  let href = `/@${username}/${workspace.name}.${
+    agent.name
+  }/apps/${encodeURIComponent(appSlug)}/`
+  if (app.command) {
+    href = `/@${username}/${workspace.name}.${
+      agent.name
+    }/terminal?command=${encodeURIComponent(app.command)}`
   }
-  if (appsHost && appSubdomain) {
-    const subdomain = `${appSlug}--${agentName}--${workspaceName}--${username}`
+  if (appsHost && app.subdomain) {
+    const subdomain = `${appSlug}--${agent.name}--${workspace.name}--${username}`
     href = `${window.location.protocol}//${appsHost}/`.replace("*", subdomain)
   }
 
   let canClick = true
-  let icon = appIcon ? (
-    <img alt={`${appDisplayName} Icon`} src={appIcon} />
-  ) : (
-    <ComputerIcon />
-  )
-
-  let shareIcon = <LockOutlinedIcon />
-  let shareTooltip = "Private, only accessible by you"
-  if (appSharingLevel === "authenticated") {
-    shareIcon = <GroupOutlinedIcon />
-    shareTooltip = "Shared with all authenticated users"
-  }
-  if (appSharingLevel === "public") {
-    shareIcon = <PublicOutlinedIcon />
-    shareTooltip = "Shared publicly"
-  }
+  let icon = <BaseIcon app={app} />
 
   let primaryTooltip = ""
   if (app.health === "initializing") {

diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
@@ -94,100 +94,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
       </Stack>
 
       {resource.agents && resource.agents.length > 0 && (
-        <div>
-          {resource.agents.map((agent) => {
-            return (
-              <Stack
-                key={agent.id}
-                direction="row"
-                alignItems="center"
-                justifyContent="space-between"
-                className={styles.agentRow}
-              >
-                <Stack direction="row" alignItems="baseline">
-                  <AgentStatus agent={agent} />
-                  <div>
-                    <div className={styles.agentName}>{agent.name}</div>
-                    <Stack
-                      direction="row"
-                      alignItems="baseline"
-                      className={styles.agentData}
-                      spacing={1}
-                    >
-                      <span className={styles.agentOS}>
-                        {agent.operating_system}
-                      </span>
-
-                      <Maybe condition={agent.status === "connected"}>
-                        <AgentVersion
-                          agent={agent}
-                          serverVersion={serverVersion}
-                        />
-                      </Maybe>
-
-                      <AgentLatency agent={agent} />
-                    </Stack>
-                  </div>
-                </Stack>
-
-                <Stack
-                  direction="row"
-                  alignItems="center"
-                  spacing={0.5}
-                  wrap="wrap"
-                  maxWidth="750px"
-                >
-                  {showApps && agent.status === "connected" && (
-                    <>
-                      {applicationsHost !== undefined && (
-                        <PortForwardButton
-                          host={applicationsHost}
-                          workspaceName={workspace.name}
-                          agentId={agent.id}
-                          agentName={agent.name}
-                          username={workspace.owner_name}
-                        />
-                      )}
-                      {!hideSSHButton && (
-                        <SSHButton
-                          workspaceName={workspace.name}
-                          agentName={agent.name}
-                        />
-                      )}
-                      <TerminalLink
-                        workspaceName={workspace.name}
-                        agentName={agent.name}
-                        userName={workspace.owner_name}
-                      />
-                      {agent.apps.map((app) => (
-                        <AppLink
-                          key={app.slug}
-                          appsHost={applicationsHost}
-                          appIcon={app.icon}
-                          appSlug={app.slug}
-                          appDisplayName={app.display_name}
-                          appCommand={app.command}
-                          appSubdomain={app.subdomain}
-                          username={workspace.owner_name}
-                          workspaceName={workspace.name}
-                          agentName={agent.name}
-                          health={app.health}
-                          appSharingLevel={app.sharing_level}
-                        />
-                      ))}
-                    </>
-                  )}
-                  {showApps && agent.status === "connecting" && (
-                    <>
-                      <Skeleton width={80} height={36} variant="rect" />
-                      <Skeleton width={120} height={36} variant="rect" />
-                    </>
-                  )}
-                </Stack>
-              </Stack>
-            )
-          })}
-        </div>
+        <div>{resource.agents.map(agentRow)}</div>
       )}
     </div>
   )