Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb27a9cf

Browse files
committed
feat: add support buttons
1 parent275602c commitb27a9cf

File tree

7 files changed

+174
-45
lines changed

7 files changed

+174
-45
lines changed

‎codersdk/deployment.go‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3325,7 +3325,9 @@ type SupportConfig struct {
33253325
typeLinkConfigstruct {
33263326
Namestring`json:"name" yaml:"name"`
33273327
Targetstring`json:"target" yaml:"target"`
3328-
Iconstring`json:"icon" yaml:"icon" enums:"bug,chat,docs"`
3328+
Iconstring`json:"icon" yaml:"icon" enums:"bug,chat,docs,star"`
3329+
3330+
Locationstring`json:"location,omitempty" yaml:"location,omitempty" enums:"navbar,dropdown"`
33293331
}
33303332

33313333
// Validate checks cross-field constraints for deployment values.

‎enterprise/coderd/appearance_test.go‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,17 @@ func TestCustomSupportLinks(t *testing.T) {
201201
Target:"http://second-link-2",
202202
Icon:"bug",
203203
},
204+
{
205+
Name:"First button",
206+
Target:"http://first-button-1",
207+
Icon:"bug",
208+
Location:"navbar",
209+
},
210+
{
211+
Name:"Third link",
212+
Target:"http://third-link-3",
213+
Icon:"star",
214+
},
204215
}
205216
cfg:=coderdtest.DeploymentValues(t)
206217
cfg.Support.Links= serpent.Struct[[]codersdk.LinkConfig]{

‎site/src/api/typesGenerated.ts‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎site/src/modules/dashboard/Navbar/NavbarView.stories.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,3 +129,64 @@ export const IdleTasks: Story = {
129129
],
130130
},
131131
};
132+
133+
exportconstSupportLinks:Story={
134+
args:{
135+
user:MockUserMember,
136+
canViewAuditLog:false,
137+
canViewDeployment:false,
138+
canViewHealth:false,
139+
canViewOrganizations:false,
140+
supportLinks:[
141+
{
142+
name:"This is a bug",
143+
icon:"bug",
144+
target:"http://bug",
145+
},
146+
{
147+
name:"This is a star",
148+
icon:"star",
149+
target:"http://star",
150+
location:"dropdown",
151+
},
152+
{
153+
name:"This is a chat",
154+
icon:"chat",
155+
target:"http://chat",
156+
location:"navbar",
157+
},
158+
{
159+
name:"No icon here",
160+
icon:"",
161+
target:"http://chat",
162+
location:"navbar",
163+
},
164+
{
165+
name:"No icon here too",
166+
icon:"",
167+
target:"http://no-icon",
168+
},
169+
],
170+
},
171+
};
172+
173+
exportconstDefaultSupportLinks:Story={
174+
args:{
175+
user:MockUserMember,
176+
canViewAuditLog:false,
177+
canViewDeployment:false,
178+
canViewHealth:false,
179+
canViewOrganizations:false,
180+
supportLinks:[
181+
{icon:"docs",name:"Documentation",target:""},
182+
{icon:"bug",name:"Report a bug",target:""},
183+
{
184+
icon:"chat",
185+
name:"Join the Coder Discord",
186+
target:"",
187+
location:"navbar",
188+
},
189+
{icon:"star",name:"Star the Repo",target:""},
190+
],
191+
},
192+
};

‎site/src/modules/dashboard/Navbar/NavbarView.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { cn } from "utils/cn";
2121
import{DeploymentDropdown}from"./DeploymentDropdown";
2222
import{MobileMenu}from"./MobileMenu";
2323
import{ProxyMenu}from"./ProxyMenu";
24+
import{SupportButtons}from"./SupportButtons";
2425
import{UserDropdown}from"./UserDropdown/UserDropdown";
2526

2627
interfaceNavbarViewProps{
@@ -77,6 +78,12 @@ export const NavbarView: FC<NavbarViewProps> = ({
7778
</div>
7879
)}
7980

81+
{supportLinks&&(
82+
<SupportButtons
83+
supportLinks={supportLinks.filter((l)=>isNavbarLink(l))}
84+
/>
85+
)}
86+
8087
<divclassName="hidden md:block">
8188
<DeploymentDropdown
8289
canViewAuditLog={canViewAuditLog}
@@ -121,7 +128,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
121128
<UserDropdown
122129
user={user}
123130
buildInfo={buildInfo}
124-
supportLinks={supportLinks}
131+
supportLinks={supportLinks?.filter((link)=>!isNavbarLink(link))}
125132
onSignOut={onSignOut}
126133
/>
127134
</div>
@@ -130,7 +137,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
130137
<MobileMenu
131138
proxyContextValue={proxyContextValue}
132139
user={user}
133-
supportLinks={supportLinks}
140+
supportLinks={supportLinks?.filter((link)=>!isNavbarLink(link))}
134141
onSignOut={onSignOut}
135142
canViewAuditLog={canViewAuditLog}
136143
canViewConnectionLog={canViewConnectionLog}
@@ -240,3 +247,7 @@ const TasksNavItem: FC<TasksNavItemProps> = ({ user }) => {
240247
functionidleTasksLabel(count:number){
241248
return`You have${count}${count===1 ?"task" :"tasks"} waiting for input`;
242249
}
250+
251+
functionisNavbarLink(link:TypesGen.LinkConfig):boolean{
252+
returnlink.location==="navbar";
253+
}
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
// components/Navbar/SupportButtons.tsx
2+
3+
importtype{Interpolation,Theme}from"@emotion/react";
4+
importtype{SvgIconProps}from"@mui/material/SvgIcon";
5+
importtype*asTypesGenfrom"api/typesGenerated";
6+
import{Button}from"components/Button/Button";
7+
import{ExternalImage}from"components/ExternalImage/ExternalImage";
8+
import{BookOpenTextIcon,BugIcon,MessageSquareIcon}from"lucide-react";
9+
importtype{FC,JSX}from"react";
10+
11+
interfaceSupportButtonsProps{
12+
supportLinks:TypesGen.LinkConfig[];
13+
}
14+
15+
exportconstSupportButtons:FC<SupportButtonsProps>=({ supportLinks})=>{
16+
return(
17+
<>
18+
{supportLinks.map((link)=>(
19+
<a
20+
key={link.name}
21+
href={link.target}
22+
target="_blank"
23+
rel="noreferrer"
24+
className="inline-block"
25+
>
26+
<Buttonvariant="outline">
27+
{link.icon!==""&&
28+
renderSupportIcon(link.icon,styles.buttonIcon)}
29+
{link.name}
30+
</Button>
31+
</a>
32+
))}
33+
</>
34+
);
35+
};
36+
37+
exportfunctionrenderSupportIcon(
38+
icon:string,
39+
iconCss?:Interpolation<Theme>,
40+
):JSX.Element{
41+
switch(icon){
42+
case"bug":
43+
return<BugIconcss={iconCss}/>;
44+
case"chat":
45+
return<MessageSquareIconcss={iconCss}/>;
46+
case"docs":
47+
return<BookOpenTextIconcss={iconCss}/>;
48+
case"star":
49+
return<GithubStarcss={iconCss}/>;
50+
default:
51+
return(
52+
<ExternalImage
53+
src={icon}
54+
css={{maxWidth:"20px",maxHeight:"20px"}}
55+
/>
56+
);
57+
}
58+
}
59+
60+
constGithubStar:FC<SvgIconProps>=(props)=>(
61+
<svg
62+
aria-hidden="true"
63+
height="16"
64+
viewBox="0 0 16 16"
65+
version="1.1"
66+
width="16"
67+
data-view-component="true"
68+
fill="currentColor"
69+
{...props}
70+
>
71+
<pathd="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"/>
72+
</svg>
73+
);
74+
75+
conststyles={
76+
buttonIcon:(theme)=>({
77+
color:theme.palette.text.secondary,
78+
width:20,
79+
height:20,
80+
}),
81+
}satisfiesRecord<string,Interpolation<Theme>>;

‎site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx‎

Lines changed: 4 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,20 @@ import {
66
}from"@emotion/react";
77
importDividerfrom"@mui/material/Divider";
88
importMenuItemfrom"@mui/material/MenuItem";
9-
importtype{SvgIconProps}from"@mui/material/SvgIcon";
109
importTooltipfrom"@mui/material/Tooltip";
1110
import{PopoverClose}from"@radix-ui/react-popover";
1211
importtype*asTypesGenfrom"api/typesGenerated";
1312
import{CopyButton}from"components/CopyButton/CopyButton";
14-
import{ExternalImage}from"components/ExternalImage/ExternalImage";
1513
import{Stack}from"components/Stack/Stack";
1614
import{
17-
BookOpenTextIcon,
18-
BugIcon,
1915
CircleUserIcon,
2016
LogOutIcon,
21-
MessageSquareIcon,
2217
MonitorDownIcon,
2318
SquareArrowOutUpRightIcon,
2419
}from"lucide-react";
25-
importtype{FC,JSX}from"react";
20+
importtype{FC}from"react";
2621
import{Link}from"react-router";
22+
import{renderSupportIcon}from"../SupportButtons";
2723

2824
exportconstLanguage={
2925
accountLabel:"Account",
@@ -44,26 +40,6 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
4440
supportLinks,
4541
onSignOut,
4642
})=>{
47-
constrenderMenuIcon=(icon:string):JSX.Element=>{
48-
switch(icon){
49-
case"bug":
50-
return<BugIconcss={styles.menuItemIcon}/>;
51-
case"chat":
52-
return<MessageSquareIconcss={styles.menuItemIcon}/>;
53-
case"docs":
54-
return<BookOpenTextIconcss={styles.menuItemIcon}/>;
55-
case"star":
56-
return<GithubStarcss={styles.menuItemIcon}/>;
57-
default:
58-
return(
59-
<ExternalImage
60-
src={icon}
61-
css={{maxWidth:"20px",maxHeight:"20px"}}
62-
/>
63-
);
64-
}
65-
};
66-
6743
return(
6844
<div>
6945
<Stackcss={styles.info}spacing={0}>
@@ -109,7 +85,8 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
10985
>
11086
<PopoverCloseasChild>
11187
<MenuItemcss={styles.menuItem}>
112-
{renderMenuIcon(link.icon)}
88+
{link.icon!==""&&
89+
renderSupportIcon(link.icon,styles.menuItemIcon)}
11390
<spancss={styles.menuItemText}>{link.name}</span>
11491
</MenuItem>
11592
</PopoverClose>
@@ -152,21 +129,6 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
152129
);
153130
};
154131

155-
constGithubStar:FC<SvgIconProps>=(props)=>(
156-
<svg
157-
aria-hidden="true"
158-
height="16"
159-
viewBox="0 0 16 16"
160-
version="1.1"
161-
width="16"
162-
data-view-component="true"
163-
fill="currentColor"
164-
{...props}
165-
>
166-
<pathd="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"/>
167-
</svg>
168-
);
169-
170132
conststyles={
171133
info:(theme)=>[
172134
theme.typography.body2asCSSObject,

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp