feat: add app sharing icon and tooltip (#4556)

deansheather · jsjoeio · web-flow · commit 1515d755e10f · 2022-10-14T21:49:24.000Z
Co-authored-by: Joe Previte &lt;jjprevite@gmail.com&gt;
diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/site/src/components/AppLink/AppLink.stories.tsx
@@ -15,6 +15,7 @@ WithIcon.args = {
   workspaceName: MockWorkspace.name,
   appName: "code-server",
   appIcon: "/icon/code.svg",
+  appSharingLevel: "owner",
   health: "healthy",
 }
 
@@ -23,6 +24,7 @@ WithoutIcon.args = {
   username: "developer",
   workspaceName: MockWorkspace.name,
   appName: "code-server",
+  appSharingLevel: "owner",
   health: "healthy",
 }
 
@@ -31,6 +33,7 @@ HealthDisabled.args = {
   username: "developer",
   workspaceName: MockWorkspace.name,
   appName: "code-server",
+  appSharingLevel: "owner",
   health: "disabled",
 }
 
diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
@@ -4,6 +4,9 @@ import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import ComputerIcon from "@material-ui/icons/Computer"
+import PublicOutlinedIcon from "@material-ui/icons/PublicOutlined"
+import LockOutlinedIcon from "@material-ui/icons/LockOutlined"
+import GroupOutlinedIcon from "@material-ui/icons/GroupOutlined"
 import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
 import { FC, PropsWithChildren } from "react"
 import * as TypesGen from "../../api/typesGenerated"
@@ -23,6 +26,7 @@ export interface AppLinkProps {
   appIcon?: TypesGen.WorkspaceApp["icon"]
   appCommand?: TypesGen.WorkspaceApp["command"]
   appSubdomain: TypesGen.WorkspaceApp["subdomain"]
+  appSharingLevel: TypesGen.WorkspaceApp["sharing_level"]
   health: TypesGen.WorkspaceApp["health"]
 }
 
@@ -35,6 +39,7 @@ export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
   appIcon,
   appCommand,
   appSubdomain,
+  appSharingLevel,
   health,
 }) => {
   const styles = useStyles()
@@ -60,36 +65,50 @@ export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
   ) : (
     <ComputerIcon />
   )
-  let tooltip = ""
+
+  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 primaryTooltip = ""
   if (health === "initializing") {
     canClick = false
     icon = <CircularProgress size={16} />
-    tooltip = "Initializing..."
+    primaryTooltip = "Initializing..."
   }
   if (health === "unhealthy") {
     canClick = false
     icon = <ErrorOutlineIcon className={styles.unhealthyIcon} />
-    tooltip = "Unhealthy"
+    primaryTooltip = "Unhealthy"
   }
   if (!appsHost && appSubdomain) {
     canClick = false
     icon = <ErrorOutlineIcon className={styles.notConfiguredIcon} />
-    tooltip = "Your admin has not configured subdomain application access"
+    primaryTooltip =
+      "Your admin has not configured subdomain application access"
   }
 
   const button = (
     <Button
       size="small"
       startIcon={icon}
+      endIcon={<Tooltip title={shareTooltip}>{shareIcon}</Tooltip>}
       className={styles.button}
       disabled={!canClick}
     >
-      {appName}
+      <span className={styles.appName}>{appName}</span>
     </Button>
   )
 
   return (
-    <Tooltip title={tooltip}>
+    <Tooltip title={primaryTooltip}>
       <span>
         <Link
           href={href}
@@ -136,4 +155,8 @@ const useStyles = makeStyles((theme) => ({
   notConfiguredIcon: {
     color: theme.palette.grey[300],
   },
+
+  appName: {
+    marginRight: theme.spacing(1),
+  },
 }))
diff --git a/site/src/components/PortForwardButton/PortForwardButton.tsx b/site/src/components/PortForwardButton/PortForwardButton.tsx
@@ -64,7 +64,8 @@ const EnabledView: React.FC<PortForwardButtonProps> = (props) => {
       <HelpTooltipText>
         Access ports running on the agent with the{" "}
         <strong>port, agent name, workspace name</strong> and{" "}
-        <strong>your username</strong> URL schema, as shown below.
+        <strong>your username</strong> URL schema, as shown below. Port URLs are
+        only accessible by you.
       </HelpTooltipText>
 
       <CodeExample code={urlExample} className={styles.code} />
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -203,6 +203,7 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
                                       appName={app.name}
                                       appCommand={app.command}
                                       appSubdomain={app.subdomain}
+                                      appSharingLevel={app.sharing_level}
                                       username={workspace.owner_name}
                                       workspaceName={workspace.name}
                                       agentName={agent.name}

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@ WithIcon.args = {`
`15`	`15`	`workspaceName: MockWorkspace.name,`
`16`	`16`	`appName: "code-server",`
`17`	`17`	`appIcon: "/icon/code.svg",`
	`18`	`+ appSharingLevel: "owner",`
`18`	`19`	`health: "healthy",`
`19`	`20`	`}`
`20`	`21`
`@@ -23,6 +24,7 @@ WithoutIcon.args = {`
`23`	`24`	`username: "developer",`
`24`	`25`	`workspaceName: MockWorkspace.name,`
`25`	`26`	`appName: "code-server",`
	`27`	`+ appSharingLevel: "owner",`
`26`	`28`	`health: "healthy",`
`27`	`29`	`}`
`28`	`30`
`@@ -31,6 +33,7 @@ HealthDisabled.args = {`
`31`	`33`	`username: "developer",`
`32`	`34`	`workspaceName: MockWorkspace.name,`
`33`	`35`	`appName: "code-server",`
	`36`	`+ appSharingLevel: "owner",`
`34`	`37`	`health: "disabled",`
`35`	`38`	`}`
`36`	`39`