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

Commit489641d

Browse files
feat: set icons for each type of notification (#17115)
Each notification type will have an icon to represent the context:<img width="503" alt="Screenshot 2025-03-26 at 13 44 35"src="https://github.com/user-attachments/assets/1187c1c0-1043-4a32-b105-a7f91b52f8ca"/>This depends on#17013
1 parent9bc727e commit489641d

File tree

11 files changed

+154
-54
lines changed

11 files changed

+154
-54
lines changed

‎coderd/inboxnotifications.go

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -31,30 +31,30 @@ const (
3131

3232
varfallbackIcons=map[uuid.UUID]string{
3333
// workspace related notifications
34-
notifications.TemplateWorkspaceCreated:codersdk.FallbackIconWorkspace,
35-
notifications.TemplateWorkspaceManuallyUpdated:codersdk.FallbackIconWorkspace,
36-
notifications.TemplateWorkspaceDeleted:codersdk.FallbackIconWorkspace,
37-
notifications.TemplateWorkspaceAutobuildFailed:codersdk.FallbackIconWorkspace,
38-
notifications.TemplateWorkspaceDormant:codersdk.FallbackIconWorkspace,
39-
notifications.TemplateWorkspaceAutoUpdated:codersdk.FallbackIconWorkspace,
40-
notifications.TemplateWorkspaceMarkedForDeletion:codersdk.FallbackIconWorkspace,
41-
notifications.TemplateWorkspaceManualBuildFailed:codersdk.FallbackIconWorkspace,
42-
notifications.TemplateWorkspaceOutOfMemory:codersdk.FallbackIconWorkspace,
43-
notifications.TemplateWorkspaceOutOfDisk:codersdk.FallbackIconWorkspace,
34+
notifications.TemplateWorkspaceCreated:codersdk.InboxNotificationFallbackIconWorkspace,
35+
notifications.TemplateWorkspaceManuallyUpdated:codersdk.InboxNotificationFallbackIconWorkspace,
36+
notifications.TemplateWorkspaceDeleted:codersdk.InboxNotificationFallbackIconWorkspace,
37+
notifications.TemplateWorkspaceAutobuildFailed:codersdk.InboxNotificationFallbackIconWorkspace,
38+
notifications.TemplateWorkspaceDormant:codersdk.InboxNotificationFallbackIconWorkspace,
39+
notifications.TemplateWorkspaceAutoUpdated:codersdk.InboxNotificationFallbackIconWorkspace,
40+
notifications.TemplateWorkspaceMarkedForDeletion:codersdk.InboxNotificationFallbackIconWorkspace,
41+
notifications.TemplateWorkspaceManualBuildFailed:codersdk.InboxNotificationFallbackIconWorkspace,
42+
notifications.TemplateWorkspaceOutOfMemory:codersdk.InboxNotificationFallbackIconWorkspace,
43+
notifications.TemplateWorkspaceOutOfDisk:codersdk.InboxNotificationFallbackIconWorkspace,
4444

4545
// account related notifications
46-
notifications.TemplateUserAccountCreated:codersdk.FallbackIconAccount,
47-
notifications.TemplateUserAccountDeleted:codersdk.FallbackIconAccount,
48-
notifications.TemplateUserAccountSuspended:codersdk.FallbackIconAccount,
49-
notifications.TemplateUserAccountActivated:codersdk.FallbackIconAccount,
50-
notifications.TemplateYourAccountSuspended:codersdk.FallbackIconAccount,
51-
notifications.TemplateYourAccountActivated:codersdk.FallbackIconAccount,
52-
notifications.TemplateUserRequestedOneTimePasscode:codersdk.FallbackIconAccount,
46+
notifications.TemplateUserAccountCreated:codersdk.InboxNotificationFallbackIconAccount,
47+
notifications.TemplateUserAccountDeleted:codersdk.InboxNotificationFallbackIconAccount,
48+
notifications.TemplateUserAccountSuspended:codersdk.InboxNotificationFallbackIconAccount,
49+
notifications.TemplateUserAccountActivated:codersdk.InboxNotificationFallbackIconAccount,
50+
notifications.TemplateYourAccountSuspended:codersdk.InboxNotificationFallbackIconAccount,
51+
notifications.TemplateYourAccountActivated:codersdk.InboxNotificationFallbackIconAccount,
52+
notifications.TemplateUserRequestedOneTimePasscode:codersdk.InboxNotificationFallbackIconAccount,
5353

5454
// template related notifications
55-
notifications.TemplateTemplateDeleted:codersdk.FallbackIconTemplate,
56-
notifications.TemplateTemplateDeprecated:codersdk.FallbackIconTemplate,
57-
notifications.TemplateWorkspaceBuildsFailedReport:codersdk.FallbackIconTemplate,
55+
notifications.TemplateTemplateDeleted:codersdk.InboxNotificationFallbackIconTemplate,
56+
notifications.TemplateTemplateDeprecated:codersdk.InboxNotificationFallbackIconTemplate,
57+
notifications.TemplateWorkspaceBuildsFailedReport:codersdk.InboxNotificationFallbackIconTemplate,
5858
}
5959

6060
funcensureNotificationIcon(notif codersdk.InboxNotification) codersdk.InboxNotification {
@@ -64,7 +64,7 @@ func ensureNotificationIcon(notif codersdk.InboxNotification) codersdk.InboxNoti
6464

6565
fallbackIcon,ok:=fallbackIcons[notif.TemplateID]
6666
if!ok {
67-
fallbackIcon=codersdk.FallbackIconOther
67+
fallbackIcon=codersdk.InboxNotificationFallbackIconOther
6868
}
6969

7070
notif.Icon=fallbackIcon

‎coderd/inboxnotifications_internal_test.go

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ func TestInboxNotifications_ensureNotificationIcon(t *testing.T) {
2020
templateID uuid.UUID
2121
expectedIconstring
2222
}{
23-
{"WorkspaceCreated","",notifications.TemplateWorkspaceCreated,codersdk.FallbackIconWorkspace},
24-
{"UserAccountCreated","",notifications.TemplateUserAccountCreated,codersdk.FallbackIconAccount},
25-
{"TemplateDeleted","",notifications.TemplateTemplateDeleted,codersdk.FallbackIconTemplate},
26-
{"TestNotification","",notifications.TemplateTestNotification,codersdk.FallbackIconOther},
23+
{"WorkspaceCreated","",notifications.TemplateWorkspaceCreated,codersdk.InboxNotificationFallbackIconWorkspace},
24+
{"UserAccountCreated","",notifications.TemplateUserAccountCreated,codersdk.InboxNotificationFallbackIconAccount},
25+
{"TemplateDeleted","",notifications.TemplateTemplateDeleted,codersdk.InboxNotificationFallbackIconTemplate},
26+
{"TestNotification","",notifications.TemplateTestNotification,codersdk.InboxNotificationFallbackIconOther},
2727
{"TestExistingIcon","https://cdn.coder.com/icon_notif.png",notifications.TemplateTemplateDeleted,"https://cdn.coder.com/icon_notif.png"},
28-
{"UnknownTemplate","",uuid.New(),codersdk.FallbackIconOther},
28+
{"UnknownTemplate","",uuid.New(),codersdk.InboxNotificationFallbackIconOther},
2929
}
3030

3131
for_,tt:=rangetests {

‎coderd/inboxnotifications_test.go

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ func TestInboxNotification_Watch(t *testing.T) {
137137
require.Equal(t,memberClient.ID,notif.Notification.UserID)
138138

139139
// check for the fallback icon logic
140-
require.Equal(t,codersdk.FallbackIconWorkspace,notif.Notification.Icon)
140+
require.Equal(t,codersdk.InboxNotificationFallbackIconWorkspace,notif.Notification.Icon)
141141
})
142142

143143
t.Run("OK - change format",func(t*testing.T) {
@@ -557,11 +557,11 @@ func TestInboxNotifications_List(t *testing.T) {
557557
require.Len(t,notifs.Notifications,10)
558558

559559
require.Equal(t,"https://dev.coder.com/icon.png",notifs.Notifications[0].Icon)
560-
require.Equal(t,codersdk.FallbackIconWorkspace,notifs.Notifications[9].Icon)
561-
require.Equal(t,codersdk.FallbackIconWorkspace,notifs.Notifications[8].Icon)
562-
require.Equal(t,codersdk.FallbackIconAccount,notifs.Notifications[7].Icon)
563-
require.Equal(t,codersdk.FallbackIconTemplate,notifs.Notifications[6].Icon)
564-
require.Equal(t,codersdk.FallbackIconOther,notifs.Notifications[4].Icon)
560+
require.Equal(t,codersdk.InboxNotificationFallbackIconWorkspace,notifs.Notifications[9].Icon)
561+
require.Equal(t,codersdk.InboxNotificationFallbackIconWorkspace,notifs.Notifications[8].Icon)
562+
require.Equal(t,codersdk.InboxNotificationFallbackIconAccount,notifs.Notifications[7].Icon)
563+
require.Equal(t,codersdk.InboxNotificationFallbackIconTemplate,notifs.Notifications[6].Icon)
564+
require.Equal(t,codersdk.InboxNotificationFallbackIconOther,notifs.Notifications[4].Icon)
565565
})
566566

567567
t.Run("OK with template filter",func(t*testing.T) {
@@ -607,7 +607,7 @@ func TestInboxNotifications_List(t *testing.T) {
607607
require.Len(t,notifs.Notifications,5)
608608

609609
require.Equal(t,"Notification 8",notifs.Notifications[0].Title)
610-
require.Equal(t,codersdk.FallbackIconWorkspace,notifs.Notifications[0].Icon)
610+
require.Equal(t,codersdk.InboxNotificationFallbackIconWorkspace,notifs.Notifications[0].Icon)
611611
})
612612

613613
t.Run("OK with target filter",func(t*testing.T) {

‎codersdk/inboxnotification.go

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import (
1111
)
1212

1313
const (
14-
FallbackIconWorkspace="DEFAULT_ICON_WORKSPACE"
15-
FallbackIconAccount="DEFAULT_ICON_ACCOUNT"
16-
FallbackIconTemplate="DEFAULT_ICON_TEMPLATE"
17-
FallbackIconOther="DEFAULT_ICON_OTHER"
14+
InboxNotificationFallbackIconWorkspace="DEFAULT_ICON_WORKSPACE"
15+
InboxNotificationFallbackIconAccount="DEFAULT_ICON_ACCOUNT"
16+
InboxNotificationFallbackIconTemplate="DEFAULT_ICON_TEMPLATE"
17+
InboxNotificationFallbackIconOther="DEFAULT_ICON_OTHER"
1818
)
1919

2020
typeInboxNotificationstruct {

‎site/src/api/typesGenerated.ts

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

‎site/src/components/Avatar/Avatar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const avatarVariants = cva(
2828
},
2929
variant:{
3030
default:null,
31-
icon:null,
31+
icon:"[&_svg]:size-full",
3232
},
3333
},
3434
defaultVariants:{
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{InboxAvatar}from"./InboxAvatar";
3+
4+
constmeta:Meta<typeofInboxAvatar>={
5+
title:"modules/notifications/NotificationsInbox/InboxAvatar",
6+
component:InboxAvatar,
7+
};
8+
9+
exportdefaultmeta;
10+
typeStory=StoryObj<typeofInboxAvatar>;
11+
12+
exportconstCustom:Story={
13+
args:{
14+
icon:"/icon/git.svg",
15+
},
16+
};
17+
18+
exportconstEmptyIcon:Story={
19+
args:{
20+
icon:"",
21+
},
22+
};
23+
24+
exportconstFallbackWorkspace:Story={
25+
args:{
26+
icon:"DEFAULT_ICON_WORKSPACE",
27+
},
28+
};
29+
30+
exportconstFallbackAccount:Story={
31+
args:{
32+
icon:"DEFAULT_ICON_ACCOUNT",
33+
},
34+
};
35+
36+
exportconstFallbackTemplate:Story={
37+
args:{
38+
icon:"DEFAULT_ICON_TEMPLATE",
39+
},
40+
};
41+
42+
exportconstFallbackOther:Story={
43+
args:{
44+
icon:"DEFAULT_ICON_OTHER",
45+
},
46+
};
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import{
2+
InboxNotificationFallbackIconAccount,
3+
InboxNotificationFallbackIconOther,
4+
InboxNotificationFallbackIconTemplate,
5+
InboxNotificationFallbackIconWorkspace,
6+
}from"api/typesGenerated";
7+
import{Avatar}from"components/Avatar/Avatar";
8+
import{
9+
InfoIcon,
10+
LaptopIcon,
11+
LayoutTemplateIcon,
12+
UserIcon,
13+
}from"lucide-react";
14+
importtype{FC}from"react";
15+
importtypeReactfrom"react";
16+
17+
constInboxNotificationFallbackIcons=[
18+
InboxNotificationFallbackIconAccount,
19+
InboxNotificationFallbackIconWorkspace,
20+
InboxNotificationFallbackIconTemplate,
21+
InboxNotificationFallbackIconOther,
22+
]asconst;
23+
24+
typeInboxNotificationFallbackIcon=
25+
(typeofInboxNotificationFallbackIcons)[number];
26+
27+
constfallbackIcons:Record<InboxNotificationFallbackIcon,React.ReactNode>={
28+
DEFAULT_ICON_WORKSPACE:<LaptopIcon/>,
29+
DEFAULT_ICON_ACCOUNT:<UserIcon/>,
30+
DEFAULT_ICON_TEMPLATE:<LayoutTemplateIcon/>,
31+
DEFAULT_ICON_OTHER:<InfoIcon/>,
32+
};
33+
34+
typeInboxAvatarProps={
35+
icon:string;
36+
};
37+
38+
exportconstInboxAvatar:FC<InboxAvatarProps>=({ icon})=>{
39+
if(icon===""){
40+
return<Avatarvariant="icon">{fallbackIcons.DEFAULT_ICON_OTHER}</Avatar>;
41+
}
42+
43+
if(isInboxNotificationFallbackIcon(icon)){
44+
return<Avatarvariant="icon">{fallbackIcons[icon]}</Avatar>;
45+
}
46+
47+
return<Avatarvariant="icon"src={icon}/>;
48+
};
49+
50+
functionisInboxNotificationFallbackIcon(
51+
icon:string,
52+
):icon isInboxNotificationFallbackIcon{
53+
return(InboxNotificationFallbackIconsasreadonlystring[]).includes(icon);
54+
}

‎site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export const Markdown: Story = {
6161
url:"https://dev.coder.com/workspaces?filter=template%3Acoder-with-ai",
6262
},
6363
],
64+
icon:"DEFAULT_ICON_TEMPLATE",
6465
},
6566
},
6667
};

‎site/src/modules/notifications/NotificationsInbox/InboxItem.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
importtype{InboxNotification}from"api/typesGenerated";
2-
import{Avatar}from"components/Avatar/Avatar";
32
import{Button}from"components/Button/Button";
43
import{Link}from"components/Link/Link";
54
import{SquareCheckBig}from"lucide-react";
65
importtype{FC}from"react";
76
importMarkdownfrom"react-markdown";
87
import{LinkasRouterLink}from"react-router-dom";
9-
import{cn}from"utils/cn";
108
import{relativeTime}from"utils/time";
9+
import{InboxAvatar}from"./InboxAvatar";
1110

1211
typeInboxItemProps={
1312
notification:InboxNotification;
@@ -25,7 +24,7 @@ export const InboxItem: FC<InboxItemProps> = ({
2524
tabIndex={-1}
2625
>
2726
<divclassName="flex-shrink-0">
28-
<Avatarfallback="AR"/>
27+
<InboxAvataricon={notification.icon}/>
2928
</div>
3029

3130
<divclassName="flex flex-col gap-3 flex-1">

‎site/src/testHelpers/entities.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4261,7 +4261,7 @@ export const MockNotification: TypesGen.InboxNotification = {
42614261
template_id:MockTemplate.id,
42624262
targets:[],
42634263
title:"User account created",
4264-
icon:"user",
4264+
icon:"DEFAULT_ICON_ACCOUNT",
42654265
};
42664266

42674267
exportconstMockNotifications:TypesGen.InboxNotification[]=[

0 commit comments

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