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

Commitf437556

Browse files
committed
Add stories
1 parenta880e67 commitf437556

File tree

2 files changed

+100
-28
lines changed

2 files changed

+100
-28
lines changed

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

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,35 @@
11
import{chromaticWithTablet}from"testHelpers/chromatic";
2-
import{MockUserMember,MockUserOwner}from"testHelpers/entities";
2+
import{
3+
MockUserMember,
4+
MockUserOwner,
5+
MockWorkspace,
6+
MockWorkspaceAppStatus,
7+
}from"testHelpers/entities";
38
import{withDashboardProvider}from"testHelpers/storybook";
49
importtype{Meta,StoryObj}from"@storybook/react-vite";
510
import{userEvent,within}from"storybook/test";
611
import{NavbarView}from"./NavbarView";
712

13+
constfilter={
14+
user:{
15+
label:MockUserOwner.username,
16+
value:MockUserOwner.username,
17+
avatarUrl:MockUserOwner.avatar_url,
18+
},
19+
};
20+
821
constmeta:Meta<typeofNavbarView>={
922
title:"modules/dashboard/NavbarView",
10-
parameters:{chromatic:chromaticWithTablet,layout:"fullscreen"},
23+
parameters:{
24+
chromatic:chromaticWithTablet,
25+
layout:"fullscreen",
26+
queries:[
27+
{
28+
key:["tasks",filter],
29+
data:[],
30+
},
31+
],
32+
},
1133
component:NavbarView,
1234
args:{
1335
user:MockUserOwner,
@@ -78,3 +100,25 @@ export const CustomLogo: Story = {
78100
logo_url:"/icon/github.svg",
79101
},
80102
};
103+
104+
exportconstIdleTasks:Story={
105+
parameters:{
106+
queries:[
107+
{
108+
key:["tasks",filter],
109+
data:[
110+
{
111+
prompt:"Task 1",
112+
workspace:{
113+
...MockWorkspace,
114+
latest_app_status:{
115+
...MockWorkspaceAppStatus,
116+
state:"idle",
117+
},
118+
},
119+
},
120+
],
121+
},
122+
],
123+
},
124+
};

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

Lines changed: 54 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,17 @@ import { Badge } from "components/Badge/Badge";
44
import{Button}from"components/Button/Button";
55
import{ExternalImage}from"components/ExternalImage/ExternalImage";
66
import{CoderIcon}from"components/Icons/CoderIcon";
7+
import{
8+
Tooltip,
9+
TooltipContent,
10+
TooltipProvider,
11+
TooltipTrigger,
12+
}from"components/Tooltip/Tooltip";
713
importtype{ProxyContextValue}from"contexts/ProxyContext";
814
import{useWebpushNotifications}from"contexts/useWebpushNotifications";
9-
import{useAuthenticated}from"hooks";
1015
import{useEmbeddedMetadata}from"hooks/useEmbeddedMetadata";
1116
import{NotificationsInbox}from"modules/notifications/NotificationsInbox/NotificationsInbox";
17+
importtype{Task}from"modules/tasks/tasks";
1218
import{data}from"pages/TasksPage/TasksPage";
1319
importtype{FC}from"react";
1420
import{useQuery}from"react-query";
@@ -21,7 +27,7 @@ import { UserDropdown } from "./UserDropdown/UserDropdown";
2127

2228
interfaceNavbarViewProps{
2329
logo_url?:string;
24-
user?:TypesGen.User;
30+
user:TypesGen.User;
2531
buildInfo?:TypesGen.BuildInfoResponse;
2632
supportLinks?:readonlyTypesGen.LinkConfig[];
2733
onSignOut:()=>void;
@@ -64,7 +70,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
6470
)}
6571
</NavLink>
6672

67-
<NavItemsclassName="ml-4"/>
73+
<NavItemsclassName="ml-4"user={user}/>
6874

6975
<divclassName="flex items-center gap-3 ml-auto">
7076
{proxyContextValue&&(
@@ -113,16 +119,14 @@ export const NavbarView: FC<NavbarViewProps> = ({
113119
}
114120
/>
115121

116-
{user&&(
117-
<divclassName="hidden md:block">
118-
<UserDropdown
119-
user={user}
120-
buildInfo={buildInfo}
121-
supportLinks={supportLinks}
122-
onSignOut={onSignOut}
123-
/>
124-
</div>
125-
)}
122+
<divclassName="hidden md:block">
123+
<UserDropdown
124+
user={user}
125+
buildInfo={buildInfo}
126+
supportLinks={supportLinks}
127+
onSignOut={onSignOut}
128+
/>
129+
</div>
126130

127131
<divclassName="md:hidden">
128132
<MobileMenu
@@ -144,9 +148,10 @@ export const NavbarView: FC<NavbarViewProps> = ({
144148

145149
interfaceNavItemsProps{
146150
className?:string;
151+
user:TypesGen.User;
147152
}
148153

149-
constNavItems:FC<NavItemsProps>=({ className})=>{
154+
constNavItems:FC<NavItemsProps>=({ className, user})=>{
150155
constlocation=useLocation();
151156

152157
return(
@@ -170,17 +175,20 @@ const NavItems: FC<NavItemsProps> = ({ className }) => {
170175
>
171176
Templates
172177
</NavLink>
173-
<TasksNavItem/>
178+
<TasksNavItemuser={user}/>
174179
</nav>
175180
);
176181
};
177182

178-
constTasksNavItem:FC=()=>{
183+
typeTasksNavItemProps={
184+
user:TypesGen.User;
185+
};
186+
187+
constTasksNavItem:FC<TasksNavItemProps>=({ user})=>{
179188
const{ metadata}=useEmbeddedMetadata();
180189
constcanSeeTasks=
181190
!!metadata["tasks-tab-visible"].value||
182191
process.env.NODE_ENV==="development";
183-
const{ user}=useAuthenticated();
184192
constfilter={
185193
user:{
186194
label:user.username,
@@ -202,24 +210,44 @@ const TasksNavItem: FC = () => {
202210
returnnull;
203211
}
204212

213+
constsearch=
214+
idleTasks&&idleTasks.length>0
215+
?newURLSearchParams({
216+
username:user.username,
217+
tab:"waiting-for-input",
218+
}).toString()
219+
:undefined;
220+
205221
return(
206222
<NavLink
223+
to={{pathname:"/tasks", search}}
207224
className={({ isActive})=>{
208225
returncn(linkStyles.default,isActive ?linkStyles.active :"");
209226
}}
210-
to="/tasks"
211227
>
212228
Tasks
213229
{idleTasks&&idleTasks.length>0&&(
214-
<Badge
215-
variant="info"
216-
size="xs"
217-
className="ml-2"
218-
aria-label={`You have${idleTasks.length} tasks waiting for input`}
219-
>
220-
{idleTasks.length}
221-
</Badge>
230+
<TooltipProvider>
231+
<Tooltip>
232+
<TooltipTriggerasChild>
233+
<Badge
234+
variant="info"
235+
size="xs"
236+
className="ml-2"
237+
aria-label={idleTasksLabel(idleTasks)}
238+
>
239+
{idleTasks.length}
240+
</Badge>
241+
</TooltipTrigger>
242+
<TooltipContent>{idleTasksLabel(idleTasks)}</TooltipContent>
243+
</Tooltip>
244+
</TooltipProvider>
222245
)}
223246
</NavLink>
224247
);
225248
};
249+
250+
functionidleTasksLabel(idleTasks:Task[]){
251+
constcount=idleTasks.length;
252+
return`You have${count}${count===1 ?"task" :"tasks"} waiting for input`;
253+
}

0 commit comments

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