feat: add new required slug property to coder_app, use in URLs (#4573)

site/src/api/typesGenerated.ts

@@ -823,7 +823,8 @@ export interface WorkspaceAgentResourceMetadata {
 // From codersdk/workspaceapps.go
 export interface WorkspaceApp {
   readonly id: string
-  readonly name: string
+  readonly slug: string
+  readonly display_name: string
   readonly command?: string
   readonly icon?: string
   readonly subdomain: boolean

site/src/components/AppLink/AppLink.tsx

@@ -31,18 +31,27 @@ export const AppLink: FC<AppLinkProps> = ({
   const styles = useStyles()
   const username = workspace.owner_name
 
+  let appSlug = app.slug
+  let appDisplayName = app.display_name
+  if (!appSlug) {
+    appSlug = 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}/${workspace.name}.${
     agent.name
-  }/apps/${encodeURIComponent(app.name)}/`
+  }/apps/${encodeURIComponent(appSlug)}/`
   if (app.command) {
     href = `/@${username}/${workspace.name}.${
       agent.name
     }/terminal?command=${encodeURIComponent(app.command)}`
   }
   if (appsHost && app.subdomain) {
-    const subdomain = `${app.name}--${agent.name}--${workspace.name}--${username}`
+    const subdomain = `${appSlug}--${agent.name}--${workspace.name}--${username}`
     href = `${window.location.protocol}//${appsHost}/`.replace("*", subdomain)
   }
 
@@ -75,7 +84,7 @@ export const AppLink: FC<AppLinkProps> = ({
       className={styles.button}
       disabled={!canClick}
     >
-      <span className={styles.appName}>{app.name}</span>
+      <span className={styles.appName}>{appDisplayName}</span>
     </Button>
   )
 
@@ -92,7 +101,7 @@ export const AppLink: FC<AppLinkProps> = ({
                   event.preventDefault()
                   window.open(
                     href,
-                    Language.appTitle(app.name, generateRandomString(12)),
+                    Language.appTitle(appDisplayName, generateRandomString(12)),
                     "width=900,height=600",
                   )
                 }

site/src/components/AppLink/AppPreviewLink.tsx

@@ -20,7 +20,7 @@ export const AppPreviewLink: FC<AppPreviewProps> = ({ app }) => {
       spacing={1}
     >
       <BaseIcon app={app} />
-      {app.name}
+      {app.display_name}
       <ShareIcon app={app} />
     </Stack>
   )

site/src/components/AppLink/BaseIcon.tsx

@@ -4,7 +4,7 @@ import ComputerIcon from "@material-ui/icons/Computer"
 
 export const BaseIcon: FC<{ app: WorkspaceApp }> = ({ app }) => {
   return app.icon ? (
-    <img alt={`${app.name} Icon`} src={app.icon} />
+    <img alt={`${app.display_name} Icon`} src={app.icon} />
   ) : (
     <ComputerIcon />
   )

site/src/components/Resources/AgentRow.tsx

@@ -74,7 +74,7 @@ export const AgentRow: FC<AgentRowProps> = ({
           <>
             {agent.apps.map((app) => (
               <AppLink
-                key={app.name}
+                key={app.slug}
                 appsHost={applicationsHost}
                 app={app}
                 agent={agent}

site/src/components/Resources/AgentRowPreview.tsx

@@ -73,7 +73,7 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
               wrap="wrap"
             >
               {agent.apps.map((app) => (
-                <AppPreviewLink key={app.name} app={app} />
+                <AppPreviewLink key={app.slug} app={app} />
               ))}
             </Stack>
           </Stack>

site/src/testHelpers/entities.ts

@@ -200,7 +200,8 @@ export const MockTemplate: TypesGen.Template = {
 
 export const MockWorkspaceApp: TypesGen.WorkspaceApp = {
   id: "test-app",
-  name: "test-app",
+  slug: "test-app",
+  display_name: "Test App",
   icon: "",
   subdomain: false,
   health: "disabled",