Skip to content

supportLinks icons do not read /icon/ directory or any icon URLs #11611

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
ericpaulsen opened this issue Jan 14, 2024 · 3 comments · Fixed by #11629
Closed

supportLinks icons do not read /icon/ directory or any icon URLs #11611

ericpaulsen opened this issue Jan 14, 2024 · 3 comments · Fixed by #11629
Assignees
@mtojek

Comments

@ericpaulsen
Copy link
Member

here's my coder.yaml file:

supportLinks:
  - name: "Slack"
    target: "https://codercom.slack.com"
    icon: "/icon/slack.svg"
  - name: "GitHub"
    target: "https://github.com"
    icon: "/icon/github.svg"

the icons do not appear in the UI:

Screenshot 2024-01-14 at 5 54 54 PM
@ericpaulsen ericpaulsen added site Area: frontend dashboard bug labels Jan 14, 2024
@ericpaulsen ericpaulsen changed the title supportLinks icons do not read /icons/ directory supportLinks icons do not read /icon/ directory Jan 14, 2024
@matifali matifali added the s3 Bugs that confuse, annoy, or are purely cosmetic label Jan 15, 2024
@matifali matifali assigned aslilac and unassigned aslilac Jan 15, 2024
@matifali matifali changed the title supportLinks icons do not read /icon/ directory supportLinks icons do not read /icon/ directory or any icon URLs Jan 15, 2024
@matifali
Copy link
Member

Does not work with public URL links, either.

supportLinks:
  - name: "GitHub"
    target: "https://github.com/coder/coder"
    icon: "https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"
  - name: "Slack"
    target: "https://codercom.slack.com/archives/C014JH42DBJ"
    icon: "https://raw.githubusercontent.com/coder/coder/main/site/static/icon/slack.svg"
  - name: "Discord"
    target: "https://discord.gg/coder"
    icon: "https://raw.githubusercontent.com/coder/coder/main/site/static/icon/discord.svg"

image

@mtojek mtojek self-assigned this Jan 15, 2024
@mtojek
Copy link
Member

mtojek commented Jan 15, 2024

This might be a gap in the documentation, but currently Coder uses only predefined icons (bug/chat/docs). See this snippet:

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

Lines 133 to 137 in 244ca88

<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} />}
<span css={styles.menuItemText}>{link.name}</span>

I can adjust the source code to support custom URLs.

@matifali
Copy link
Member

@mtojek Yes, we should support any image icon from the URL or the built one. I am changing this to a feature.

@matifali matifali added feature and removed site Area: frontend dashboard s3 Bugs that confuse, annoy, or are purely cosmetic bug labels Jan 15, 2024
@mtojek mtojek mentioned this issue Jan 15, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mtojek mtojek

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: support links with custom icons coder/coder
4 participants
@aslilac @ericpaulsen @matifali @mtojek