feat: support links with custom icons (#11629)

This commit is contained in:
Marcin Tojek
2024-01-15 16:56:01 +01:00
committed by GitHub
parent 5c310ec334
commit f915bdf26c
8 changed files with 46 additions and 14 deletions
+6 -1
View File
@@ -9530,7 +9530,12 @@ const docTemplate = `{
"type": "object",
"properties": {
"icon": {
"type": "string"
"type": "string",
"enum": [
"bug",
"chat",
"docs"
]
},
"name": {
"type": "string"
+2 -1
View File
@@ -8556,7 +8556,8 @@
"type": "object",
"properties": {
"icon": {
"type": "string"
"type": "string",
"enum": ["bug", "chat", "docs"]
},
"name": {
"type": "string"
+1 -1
View File
@@ -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.
+1 -1
View File
@@ -28,7 +28,7 @@ curl -X GET http://coder-server:8080/api/v2/appearance \
},
"support_links": [
{
"icon": "string",
"icon": "bug",
"name": "string",
"target": "string"
}
+1 -1
View File
@@ -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"
}
+14 -6
View File
@@ -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"
}
@@ -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: "" },
],
},
};
@@ -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} />}
{link.icon === "chat" && <ChatIcon css={styles.menuItemIcon} />}
{link.icon === "docs" && <DocsIcon css={styles.menuItemIcon} />}
{renderMenuIcon(link.icon)}
<span css={styles.menuItemText}>{link.name}</span>
</MenuItem>
</a>