feat: support links with custom icons (#11629)

coderd/apidoc/docs.go

@@ -9530,7 +9530,12 @@ const docTemplate = `{
             "type": "object",
             "properties": {
                 "icon": {
-                    "type": "string"
+                    "type": "string",
+                    "enum": [
+                        "bug",
+                        "chat",
+                        "docs"
+                    ]
                 },
                 "name": {
                     "type": "string"

coderd/apidoc/swagger.json

@@ -8556,7 +8556,8 @@
       "type": "object",
       "properties": {
         "icon": {
-          "type": "string"
+          "type": "string",
+          "enum": ["bug", "chat", "docs"]
         },
         "name": {
           "type": "string"

codersdk/deployment.go

@@ -1890,7 +1890,7 @@ type SupportConfig struct {
 type LinkConfig struct {
 	Name   string `json:"name" yaml:"name"`
 	Target string `json:"target" yaml:"target"`
-	Icon   string `json:"icon" yaml:"icon"`
+	Icon   string `json:"icon" yaml:"icon" enums:"bug,chat,docs"`
 }
 
 // DeploymentOptionsWithoutSecrets returns a copy of the OptionSet with secret values omitted.

docs/api/enterprise.md

@@ -28,7 +28,7 @@ curl -X GET http://coder-server:8080/api/v2/appearance \
   },
   "support_links": [
     {
-      "icon": "string",
+      "icon": "bug",
       "name": "string",
       "target": "string"
     }

docs/api/general.md

@@ -343,7 +343,7 @@ curl -X GET http://coder-server:8080/api/v2/deployment/config \
       "links": {
         "value": [
           {
-            "icon": "string",
+            "icon": "bug",
             "name": "string",
             "target": "string"
           }

docs/api/schemas.md

@@ -717,7 +717,7 @@ _None_
 {
   "value": [
     {
-      "icon": "string",
+      "icon": "bug",
       "name": "string",
       "target": "string"
     }
@@ -1024,7 +1024,7 @@ _None_
   },
   "support_links": [
     {
-      "icon": "string",
+      "icon": "bug",
       "name": "string",
       "target": "string"
     }
@@ -2277,7 +2277,7 @@ AuthorizationObject can represent a "set" of objects, such as: all workspaces in
       "links": {
         "value": [
           {
-            "icon": "string",
+            "icon": "bug",
             "name": "string",
             "target": "string"
           }
@@ -2655,7 +2655,7 @@ AuthorizationObject can represent a "set" of objects, such as: all workspaces in
     "links": {
       "value": [
         {
-          "icon": "string",
+          "icon": "bug",
           "name": "string",
           "target": "string"
         }
@@ -3359,7 +3359,7 @@ AuthorizationObject can represent a "set" of objects, such as: all workspaces in
 
 ```json
 {
-  "icon": "string",
+  "icon": "bug",
   "name": "string",
   "target": "string"
 }
@@ -3373,6 +3373,14 @@ AuthorizationObject can represent a "set" of objects, such as: all workspaces in
 | `name`   | string | false    |              |             |
 | `target` | string | false    |              |             |
 
+#### Enumerated Values
+
+| Property | Value  |
+| -------- | ------ |
+| `icon`   | `bug`  |
+| `icon`   | `chat` |
+| `icon`   | `docs` |
+
 ## codersdk.LogLevel
 
 ```json
@@ -4455,7 +4463,7 @@ AuthorizationObject can represent a "set" of objects, such as: all workspaces in
   "links": {
     "value": [
       {
-        "icon": "string",
+        "icon": "bug",
         "name": "string",
         "target": "string"
       }

site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.stories.tsx

@@ -13,6 +13,7 @@ const meta: Meta<typeof UserDropdown> = {
       { icon: "docs", name: "Documentation", target: "" },
       { icon: "bug", name: "Report a bug", target: "" },
       { icon: "chat", name: "Join the Coder Discord", target: "" },
+      { icon: "/icon/aws.svg", name: "Amazon Web Services", target: "" },
     ],
   },
 };

site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx

@@ -17,6 +17,7 @@ import {
   type Theme,
 } from "@emotion/react";
 import { usePopover } from "components/Popover/Popover";
+import { ExternalImage } from "components/ExternalImage/ExternalImage";
 
 export const Language = {
   accountLabel: "Account",
@@ -98,6 +99,24 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
     popover.setIsOpen(false);
   };
 
+  const renderMenuIcon = (icon: string): JSX.Element => {
+    switch (icon) {
+      case "bug":
+        return <BugIcon css={styles.menuItemIcon} />;
+      case "chat":
+        return <ChatIcon css={styles.menuItemIcon} />;
+      case "docs":
+        return <DocsIcon css={styles.menuItemIcon} />;
+      default:
+        return (
+          <ExternalImage
+            src={icon}
+            css={{ maxWidth: "20px", maxHeight: "20px" }}
+          />
+        );
+    }
+  };
+
   return (
     <div>
       <Stack css={styles.info} spacing={0}>
@@ -131,9 +150,7 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
               css={styles.link}
             >
               <MenuItem css={styles.menuItem} onClick={onPopoverClose}>
-                {link.icon === "bug" && <BugIcon css={styles.menuItemIcon} />}
+                {renderMenuIcon(link.icon)}
-                {link.icon === "chat" && <ChatIcon css={styles.menuItemIcon} />}
-                {link.icon === "docs" && <DocsIcon css={styles.menuItemIcon} />}
                 <span css={styles.menuItemText}>{link.name}</span>
               </MenuItem>
             </a>