Skip to content

Commit b9eb4d3

Browse files
samejrsamejr
committed
improves the filter bar buttons for custom dashboards
1 parent 5d4776d commit b9eb4d3

1 file changed

Lines changed: 106 additions & 91 deletions

File tree

  • apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.custom.$dashboardId

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.custom.$dashboardId/route.tsx‎

Lines changed: 106 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -205,19 +205,22 @@ export default function Page() {
205205

206206
const toast = useToast();
207207

208-
const handleSyncError = useCallback((error: Error, action: string) => {
209-
const actionMessages: Record<string, string> = {
210-
add: "Failed to add widget",
211-
update: "Failed to update widget",
212-
delete: "Failed to delete widget",
213-
duplicate: "Failed to duplicate widget",
214-
layout: "Failed to save layout",
215-
};
216-
217-
const message = actionMessages[action] || "Failed to save changes";
218-
219-
toast.error(`${message}. Your changes may not be saved.`, { title: "Sync Error" });
220-
}, [toast]);
208+
const handleSyncError = useCallback(
209+
(error: Error, action: string) => {
210+
const actionMessages: Record<string, string> = {
211+
add: "Failed to add widget",
212+
update: "Failed to update widget",
213+
delete: "Failed to delete widget",
214+
duplicate: "Failed to duplicate widget",
215+
layout: "Failed to save layout",
216+
};
217+
218+
const message = actionMessages[action] || "Failed to save changes";
219+
220+
toast.error(`${message}. Your changes may not be saved.`, { title: "Sync Error" });
221+
},
222+
[toast]
223+
);
221224

222225
// Add title dialog state
223226
const [showAddTitleDialog, setShowAddTitleDialog] = useState(false);
@@ -349,88 +352,99 @@ export default function Page() {
349352
})()
350353
: null;
351354

355+
const dashboardMenu = (
356+
<Popover>
357+
<PopoverVerticalEllipseTrigger variant="secondary" />
358+
<PopoverContent className="w-fit min-w-[10rem] p-1" align="end">
359+
<div className="flex flex-col gap-1">
360+
<RenameDashboardDialog title={title} />
361+
<DeleteDashboardDialog title={title} />
362+
</div>
363+
</PopoverContent>
364+
</Popover>
365+
);
366+
367+
const filterAccessories = (
368+
<div className="flex items-center gap-x-1.5">
369+
{widgetIsAtLimit ? (
370+
<>
371+
<Dialog>
372+
<DialogTrigger asChild>
373+
<Button variant="primary/small" LeadingIcon={PlusIcon} shortcut={{ key: "c" }}>
374+
Add chart
375+
</Button>
376+
</DialogTrigger>
377+
<DialogContent>
378+
<DialogHeader>You've exceeded your widget limit</DialogHeader>
379+
<DialogDescription>
380+
You've used {widgetLimits.used}/{widgetLimits.limit} widgets on this dashboard.
381+
</DialogDescription>
382+
<DialogFooter>
383+
{widgetCanUpgrade ? (
384+
<LinkButton variant="primary/small" to={v3BillingPath(organization)}>
385+
Upgrade
386+
</LinkButton>
387+
) : (
388+
<Feedback
389+
button={<Button variant="primary/small">Request more</Button>}
390+
defaultValue="help"
391+
/>
392+
)}
393+
</DialogFooter>
394+
</DialogContent>
395+
</Dialog>
396+
<Button
397+
variant="secondary/small"
398+
LeadingIcon={Type}
399+
className="pl-1.5"
400+
iconSpacing="gap-x-1"
401+
tooltip="Add section title"
402+
shortcut={{ key: "h" }}
403+
onClick={() => {
404+
setNewTitleValue("");
405+
setShowAddTitleDialog(true);
406+
}}
407+
>
408+
Add title
409+
</Button>
410+
</>
411+
) : (
412+
<>
413+
<Button
414+
variant="primary/small"
415+
LeadingIcon={IconChartHistogram}
416+
className="pl-1.5"
417+
iconSpacing="gap-x-1.5"
418+
shortcut={{ key: "c" }}
419+
onClick={actions.openAddEditor}
420+
>
421+
Add chart
422+
</Button>
423+
<Button
424+
variant="secondary/small"
425+
LeadingIcon={Type}
426+
className="pl-1.5"
427+
iconSpacing="gap-x-1"
428+
tooltip="Add section title"
429+
shortcut={{ key: "h" }}
430+
onClick={() => {
431+
setNewTitleValue("");
432+
setShowAddTitleDialog(true);
433+
}}
434+
>
435+
Add title
436+
</Button>
437+
</>
438+
)}
439+
{dashboardMenu}
440+
</div>
441+
);
442+
352443
return (
353444
<PageContainer>
354445
<NavBar>
355446
<PageTitle title={title} />
356-
<PageAccessories>
357-
{totalWidgetCount > 0 &&
358-
(widgetIsAtLimit ? (
359-
<>
360-
<Dialog>
361-
<DialogTrigger asChild>
362-
<Button variant="primary/small" LeadingIcon={PlusIcon}>
363-
Add chart
364-
</Button>
365-
</DialogTrigger>
366-
<DialogContent>
367-
<DialogHeader>You've exceeded your widget limit</DialogHeader>
368-
<DialogDescription>
369-
You've used {widgetLimits.used}/{widgetLimits.limit} widgets on this
370-
dashboard.
371-
</DialogDescription>
372-
<DialogFooter>
373-
{widgetCanUpgrade ? (
374-
<LinkButton variant="primary/small" to={v3BillingPath(organization)}>
375-
Upgrade
376-
</LinkButton>
377-
) : (
378-
<Feedback
379-
button={<Button variant="primary/small">Request more</Button>}
380-
defaultValue="help"
381-
/>
382-
)}
383-
</DialogFooter>
384-
</DialogContent>
385-
</Dialog>
386-
<Button
387-
variant="secondary/small"
388-
LeadingIcon={Type}
389-
className="pl-1.5"
390-
iconSpacing="gap-x-1"
391-
onClick={() => {
392-
setNewTitleValue("");
393-
setShowAddTitleDialog(true);
394-
}}
395-
>
396-
Add title
397-
</Button>
398-
</>
399-
) : (
400-
<>
401-
<Button
402-
variant="primary/small"
403-
LeadingIcon={IconChartHistogram}
404-
className="pl-1.5"
405-
iconSpacing="gap-x-1.5"
406-
onClick={actions.openAddEditor}
407-
>
408-
Add chart
409-
</Button>
410-
<Button
411-
variant="secondary/small"
412-
LeadingIcon={Type}
413-
className="pl-1.5"
414-
iconSpacing="gap-x-1"
415-
onClick={() => {
416-
setNewTitleValue("");
417-
setShowAddTitleDialog(true);
418-
}}
419-
>
420-
Add title
421-
</Button>
422-
</>
423-
))}
424-
<Popover>
425-
<PopoverVerticalEllipseTrigger variant="secondary" />
426-
<PopoverContent className="w-fit min-w-[10rem] p-1" align="end">
427-
<div className="flex flex-col gap-1">
428-
<RenameDashboardDialog title={title} />
429-
<DeleteDashboardDialog title={title} />
430-
</div>
431-
</PopoverContent>
432-
</Popover>
433-
</PageAccessories>
447+
<PageAccessories>{totalWidgetCount === 0 && dashboardMenu}</PageAccessories>
434448
</NavBar>
435449
<PageBody scrollable={false}>
436450
<div className="flex h-full flex-col">
@@ -471,6 +485,7 @@ export default function Page() {
471485
onRenameWidget={actions.renameWidget}
472486
onDeleteWidget={actions.deleteWidget}
473487
onDuplicateWidget={actions.duplicateWidget}
488+
filterAccessories={filterAccessories}
474489
/>
475490
)}
476491
</div>

0 commit comments

Comments
 (0)