mirror of
https://github.com/docmost/docmost.git
synced 2026-05-22 01:32:55 +08:00
Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Philipinho
|
834b6f68f7 | ||
|
Philipinho
|
214daa1ec3 | ||
|
Philipinho
|
6af74eb3d4 | ||
|
Philipinho
|
e7fff3c9b5 | ||
|
Philipinho
|
63c1241125 | ||
|
Philipinho
|
0ae407839f | ||
|
Philipinho
|
d524073d86 | ||
|
Philipinho
|
5c5fff517c | ||
|
Philipinho
|
3115c5e097 |
@@ -48,13 +48,6 @@ GOTENBERG_URL=
|
||||
|
||||
DISABLE_TELEMETRY=false
|
||||
|
||||
# Allow other sites to embed Docmost in an iframe.
|
||||
IFRAME_EMBED_ALLOWED=false
|
||||
|
||||
# Only used when IFRAME_EMBED_ALLOWED=true. When empty, any origin is allowed.
|
||||
# Example: https://intranet.example.com,https://portal.example.com
|
||||
IFRAME_ALLOWED_ORIGINS=
|
||||
|
||||
# Enable debug logging in production (default: false)
|
||||
DEBUG_MODE=false
|
||||
|
||||
|
||||
@@ -408,10 +408,6 @@
|
||||
"Write...": "Write...",
|
||||
"Column count": "Column count",
|
||||
"{{count}} Columns": "{{count}} Columns",
|
||||
"{{count}} command available_one": "1 command available",
|
||||
"{{count}} command available_other": "{{count}} commands available",
|
||||
"{{count}} result available_one": "1 result available",
|
||||
"{{count}} result available_other": "{{count}} results available",
|
||||
"Equal columns": "Equal columns",
|
||||
"Left sidebar": "Left sidebar",
|
||||
"Right sidebar": "Right sidebar",
|
||||
@@ -877,12 +873,9 @@
|
||||
"AI Chat": "AI Chat",
|
||||
"Analyze for insights": "Analyze for insights",
|
||||
"Ask anything...": "Ask anything...",
|
||||
"Assistant said:": "Assistant said:",
|
||||
"Chat history": "Chat history",
|
||||
"Chat name": "Chat name",
|
||||
"Chat transcript": "Chat transcript",
|
||||
"Close": "Close",
|
||||
"Copy assistant response": "Copy assistant response",
|
||||
"Docmost AI": "Docmost AI",
|
||||
"Failed to load chat. An error occurred.": "Failed to load chat. An error occurred.",
|
||||
"Failed to render this message.": "Failed to render this message.",
|
||||
@@ -892,8 +885,6 @@
|
||||
"No chats found": "No chats found",
|
||||
"No conversations yet": "No conversations yet",
|
||||
"Open full page": "Open full page",
|
||||
"Scroll to bottom": "Scroll to bottom",
|
||||
"You said:": "You said:",
|
||||
"Previous 7 days": "Previous 7 days",
|
||||
"Previous 30 days": "Previous 30 days",
|
||||
"Search chats...": "Search chats...",
|
||||
@@ -945,35 +936,6 @@
|
||||
"Page actions": "Page actions",
|
||||
"Pick emoji": "Pick emoji",
|
||||
"Template menu": "Template menu",
|
||||
"Use": "Use",
|
||||
"Use template": "Use template",
|
||||
"Preview template: {{title}}": "Preview template: {{title}}",
|
||||
"Use a template": "Use a template",
|
||||
"Search templates...": "Search templates...",
|
||||
"Search spaces...": "Search spaces...",
|
||||
"No templates found": "No templates found",
|
||||
"No spaces found": "No spaces found",
|
||||
"Browse all templates": "Browse all templates",
|
||||
"This space": "This space",
|
||||
"All templates": "All templates",
|
||||
"Global": "Global",
|
||||
"New template": "New template",
|
||||
"Edit template": "Edit template",
|
||||
"Are you sure you want to delete this template?": "Are you sure you want to delete this template?",
|
||||
"Template scope updated": "Template scope updated",
|
||||
"Choose which space this template belongs to": "Choose which space this template belongs to",
|
||||
"Scope": "Scope",
|
||||
"Select scope": "Select scope",
|
||||
"Title": "Title",
|
||||
"Saving...": "Saving...",
|
||||
"Saved": "Saved",
|
||||
"Save failed. Retry": "Save failed. Retry",
|
||||
"By {{name}}": "By {{name}}",
|
||||
"Updated {{time}}": "Updated {{time}}",
|
||||
"Choose destination": "Choose destination",
|
||||
"Search pages and spaces...": "Search pages and spaces...",
|
||||
"No results found": "No results found",
|
||||
"You don't have permission to create pages here": "You don't have permission to create pages here",
|
||||
"Chat menu": "Chat menu",
|
||||
"API key menu": "API key menu",
|
||||
"Jump to comment selection": "Jump to comment selection",
|
||||
@@ -1056,30 +1018,5 @@
|
||||
"Updated {{date}}": "Updated {{date}}",
|
||||
"Cell actions": "Cell actions",
|
||||
"Column actions": "Column actions",
|
||||
"Row actions": "Row actions",
|
||||
"Filter": "Filter",
|
||||
"Page title": "Page title",
|
||||
"Page content": "Page content",
|
||||
"Member actions": "Member actions",
|
||||
"Toggle password visibility": "Toggle password visibility",
|
||||
"Send comment": "Send comment",
|
||||
"Token actions": "Token actions",
|
||||
"Template settings": "Template settings",
|
||||
"Edit diagram": "Edit diagram",
|
||||
"Edit embed": "Edit embed",
|
||||
"Edit drawing": "Edit drawing",
|
||||
"Delete equation": "Delete equation",
|
||||
"Invite actions": "Invite actions",
|
||||
"Get started": "Get started",
|
||||
"* indicates required fields": "* indicates required fields",
|
||||
"List of spaces in this workspace": "List of spaces in this workspace",
|
||||
"Active sessions": "Active sessions",
|
||||
"Add {{name}} to favorites": "Add {{name}} to favorites",
|
||||
"Remove {{name}} from favorites": "Remove {{name}} from favorites",
|
||||
"Added to favorites": "Added to favorites",
|
||||
"Removed from favorites": "Removed from favorites",
|
||||
"Added {{name}} to favorites": "Added {{name}} to favorites",
|
||||
"Removed {{name}} from favorites": "Removed {{name}} from favorites",
|
||||
"Page menu for {{name}}": "Page menu for {{name}}",
|
||||
"Create subpage of {{name}}": "Create subpage of {{name}}"
|
||||
"Row actions": "Row actions"
|
||||
}
|
||||
|
||||
@@ -39,6 +39,7 @@ import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
|
||||
import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
|
||||
import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
|
||||
import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
|
||||
import Webhooks from "@/ee/webhook/pages/webhooks.tsx";
|
||||
import VerifiedPages from "@/ee/page-verification/pages/verified-pages.tsx";
|
||||
import TemplateList from "@/ee/template/pages/template-list";
|
||||
import TemplateEditor from "@/ee/template/pages/template-editor";
|
||||
@@ -124,6 +125,7 @@ export default function App() {
|
||||
<Route path={"ai"} element={<AiSettings />} />
|
||||
<Route path={"ai/mcp"} element={<AiSettings />} />
|
||||
<Route path={"audit"} element={<AuditLogs />} />
|
||||
<Route path={"webhooks"} element={<Webhooks />} />
|
||||
<Route path={"verifications"} element={<VerifiedPages />} />
|
||||
{!isCloud() && <Route path={"license"} element={<License />} />}
|
||||
{isCloud() && <Route path={"billing"} element={<Billing />} />}
|
||||
|
||||
@@ -80,20 +80,12 @@ export default function AvatarUploader({
|
||||
}
|
||||
};
|
||||
|
||||
const actionLabel = {
|
||||
const ariaLabel = {
|
||||
[AvatarIconType.AVATAR]: t("Change avatar"),
|
||||
[AvatarIconType.SPACE_ICON]: t("Change space icon"),
|
||||
[AvatarIconType.WORKSPACE_ICON]: t("Change workspace icon"),
|
||||
}[type];
|
||||
|
||||
// Per WCAG 2.5.3 (Label in Name), the accessible name must include the
|
||||
// visible text. When no image is set, the avatar renders the name's
|
||||
// initials, so prepend the name to the action label.
|
||||
const ariaLabel =
|
||||
!currentImageUrl && fallbackName
|
||||
? `${fallbackName} – ${actionLabel}`
|
||||
: actionLabel;
|
||||
|
||||
const handleRemove = async () => {
|
||||
if (disabled) return;
|
||||
|
||||
|
||||
@@ -8,19 +8,15 @@ interface CopyProps {
|
||||
text: string;
|
||||
size?: MantineSize;
|
||||
color?: MantineColor;
|
||||
/** Override the accessible name (and tooltip) when not yet copied. Lets callers disambiguate adjacent copy buttons for screen readers. */
|
||||
label?: string;
|
||||
}
|
||||
export default function CopyTextButton({ text, size, label }: CopyProps) {
|
||||
export default function CopyTextButton({ text, size }: CopyProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const copyLabel = label ?? t("Copy");
|
||||
|
||||
return (
|
||||
<CopyButton value={text} timeout={2000}>
|
||||
{({ copied, copy }) => (
|
||||
<Tooltip
|
||||
label={copied ? t("Copied") : copyLabel}
|
||||
label={copied ? t("Copied") : t("Copy")}
|
||||
withArrow
|
||||
position="right"
|
||||
>
|
||||
@@ -29,7 +25,7 @@ export default function CopyTextButton({ text, size, label }: CopyProps) {
|
||||
variant="subtle"
|
||||
onClick={copy}
|
||||
size={size}
|
||||
aria-label={copied ? t("Copied") : copyLabel}
|
||||
aria-label={copied ? t("Copied") : t("Copy")}
|
||||
>
|
||||
{copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
|
||||
</ActionIcon>
|
||||
|
||||
@@ -81,7 +81,7 @@ export default function ExportModal({
|
||||
<Modal.Content style={{ overflow: "hidden" }}>
|
||||
<Modal.Header py={0}>
|
||||
<Modal.Title fw={500}>{t(`Export ${type}`)}</Modal.Title>
|
||||
<Modal.CloseButton aria-label={t("Close")} />
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
|
||||
@@ -17,7 +17,6 @@ import { EmptyState } from "@/components/ui/empty-state.tsx";
|
||||
import { getSpaceUrl } from "@/lib/config.ts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { getInitialsColor } from "@/lib/get-initials-color.ts";
|
||||
import rowClasses from "@/components/ui/clickable-table-row.module.css";
|
||||
|
||||
interface Props {
|
||||
spaceId?: string;
|
||||
@@ -42,10 +41,9 @@ export default function RecentChanges({ spaceId }: Props) {
|
||||
<Table highlightOnHover verticalSpacing="sm">
|
||||
<Table.Tbody>
|
||||
{pages.map((page) => (
|
||||
<Table.Tr key={page.id} className={rowClasses.row}>
|
||||
<Table.Tr key={page.id}>
|
||||
<Table.Td>
|
||||
<UnstyledButton
|
||||
className={rowClasses.link}
|
||||
component={Link}
|
||||
to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
|
||||
>
|
||||
|
||||
@@ -1,28 +1,22 @@
|
||||
import { ActionIcon, Box, Group, ScrollArea, Title, Tooltip } from "@mantine/core";
|
||||
import { ActionIcon, Box, Group, ScrollArea, Text, Tooltip } from "@mantine/core";
|
||||
import { IconX } from "@tabler/icons-react";
|
||||
import CommentListWithTabs from "@/features/comment/components/comment-list-with-tabs.tsx";
|
||||
import { useAtom } from "jotai";
|
||||
import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
|
||||
import React, { ReactNode, useEffect } from "react";
|
||||
import React, { ReactNode } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { TableOfContents } from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
|
||||
import AsideChatPanel from "@/ee/ai-chat/components/aside-chat-panel";
|
||||
import { PageDetailsAside } from "@/features/page-details/components/page-details-aside.tsx";
|
||||
import { ASIDE_PANEL_ID } from "@/hooks/use-toggle-aside.tsx";
|
||||
|
||||
export default function Aside() {
|
||||
const [{ tab, isAsideOpen }, setAsideState] = useAtom(asideStateAtom);
|
||||
const [{ tab }, setAsideState] = useAtom(asideStateAtom);
|
||||
const { t } = useTranslation();
|
||||
const pageEditor = useAtomValue(pageEditorAtom);
|
||||
const closeAside = () => setAsideState((s) => ({ ...s, isAsideOpen: false }));
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAsideOpen) return;
|
||||
document.getElementById(ASIDE_PANEL_ID)?.focus();
|
||||
}, [isAsideOpen, tab]);
|
||||
|
||||
let title: string;
|
||||
let component: ReactNode;
|
||||
|
||||
@@ -54,7 +48,7 @@ export default function Aside() {
|
||||
<>
|
||||
{tab !== "chat" && (
|
||||
<Group justify="space-between" wrap="nowrap" mb="md">
|
||||
<Title order={2} size="h6" fw={500}>{t(title)}</Title>
|
||||
<Text fw={500}>{t(title)}</Text>
|
||||
<Tooltip label={t("Close")} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
|
||||
@@ -18,8 +18,6 @@ import classes from "./app-shell.module.css";
|
||||
import { useTrialEndAction } from "@/ee/hooks/use-trial-end-action.tsx";
|
||||
import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
|
||||
import GlobalSidebar from "@/components/layouts/global/global-sidebar.tsx";
|
||||
import { ASIDE_PANEL_ID } from "@/hooks/use-toggle-aside.tsx";
|
||||
import { MAIN_CONTENT_ID, SkipToMain } from "@/components/ui/skip-to-main.tsx";
|
||||
|
||||
export default function GlobalAppShell({
|
||||
children,
|
||||
@@ -83,9 +81,7 @@ export default function GlobalAppShell({
|
||||
const showGlobalSidebar = !isSpaceRoute && !isSettingsRoute && !isAiRoute;
|
||||
|
||||
return (
|
||||
<>
|
||||
<SkipToMain />
|
||||
<AppShell
|
||||
<AppShell
|
||||
header={{ height: 45 }}
|
||||
navbar={{
|
||||
width: isSpaceRoute ? sidebarWidth : 300,
|
||||
@@ -129,7 +125,7 @@ export default function GlobalAppShell({
|
||||
{isAiRoute && <AiChatSidebar />}
|
||||
{showGlobalSidebar && <GlobalSidebar />}
|
||||
</AppShell.Navbar>
|
||||
<AppShell.Main id={MAIN_CONTENT_ID} tabIndex={-1}>
|
||||
<AppShell.Main id="main-content">
|
||||
{isSettingsRoute ? (
|
||||
<Container size={900} pb={80}>
|
||||
{children}
|
||||
@@ -141,8 +137,6 @@ export default function GlobalAppShell({
|
||||
|
||||
{isPageRoute && (
|
||||
<AppShell.Aside
|
||||
id={ASIDE_PANEL_ID}
|
||||
tabIndex={-1}
|
||||
className={classes.aside}
|
||||
p="md"
|
||||
withBorder={false}
|
||||
@@ -162,6 +156,5 @@ export default function GlobalAppShell({
|
||||
</AppShell.Aside>
|
||||
)}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -31,11 +31,6 @@
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--mantine-primary-color-filled);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&[data-active] {
|
||||
&,
|
||||
& :hover {
|
||||
@@ -43,16 +38,6 @@
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
}
|
||||
}
|
||||
|
||||
&[data-disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
@mixin hover {
|
||||
background-color: transparent;
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.linkIcon {
|
||||
@@ -101,9 +86,4 @@
|
||||
);
|
||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--mantine-primary-color-filled);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { ScrollArea, Text, Divider, Modal, UnstyledButton, Tooltip } from "@mantine/core";
|
||||
import { ScrollArea, Text, Divider, Modal, UnstyledButton } from "@mantine/core";
|
||||
import {
|
||||
IconHome,
|
||||
IconClock,
|
||||
@@ -7,7 +7,6 @@ import {
|
||||
IconLayoutGrid,
|
||||
IconSettings,
|
||||
IconUserPlus,
|
||||
IconTemplate,
|
||||
} from "@tabler/icons-react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import classes from "./global-sidebar.module.css";
|
||||
@@ -21,9 +20,12 @@ import { useDisclosure } from "@mantine/hooks";
|
||||
import { WorkspaceInviteForm } from "@/features/workspace/components/members/components/workspace-invite-form";
|
||||
import { CustomAvatar } from "@/components/ui/custom-avatar";
|
||||
import { AvatarIconType } from "@/features/attachments/types/attachment.types";
|
||||
import { useHasFeature } from "@/ee/hooks/use-feature";
|
||||
import { Feature } from "@/ee/features";
|
||||
import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
|
||||
|
||||
const mainNavItems = [
|
||||
{ label: "Home", icon: IconHome, path: "/home" },
|
||||
{ label: "Favorites", icon: IconStar, path: "/favorites" },
|
||||
{ label: "Spaces", icon: IconLayoutGrid, path: "/spaces" },
|
||||
];
|
||||
|
||||
export default function GlobalSidebar() {
|
||||
const { t } = useTranslation();
|
||||
@@ -31,19 +33,6 @@ export default function GlobalSidebar() {
|
||||
const [active, setActive] = useState(location.pathname);
|
||||
const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
|
||||
const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
|
||||
const hasTemplates = useHasFeature(Feature.TEMPLATES);
|
||||
const upgradeLabel = useUpgradeLabel();
|
||||
const mainNavItems = [
|
||||
{ label: "Home", icon: IconHome, path: "/home" },
|
||||
{ label: "Favorites", icon: IconStar, path: "/favorites" },
|
||||
{ label: "Spaces", icon: IconLayoutGrid, path: "/spaces" },
|
||||
{
|
||||
label: "Templates",
|
||||
icon: IconTemplate,
|
||||
path: "/templates",
|
||||
disabled: !hasTemplates,
|
||||
},
|
||||
];
|
||||
const { data: favoriteSpacesData, isPending: isFavoritesPending } = useFavoritesQuery("space");
|
||||
const favoriteSpaces = favoriteSpacesData?.pages.flatMap((p) => p.items) ?? [];
|
||||
const sortedFavoriteSpaces = [...favoriteSpaces]
|
||||
@@ -69,38 +58,18 @@ export default function GlobalSidebar() {
|
||||
<div className={classes.navbar}>
|
||||
<ScrollArea w="100%" style={{ flex: 1 }}>
|
||||
<div className={classes.section}>
|
||||
{mainNavItems.map((item) =>
|
||||
item.disabled ? (
|
||||
<Tooltip
|
||||
key={item.label}
|
||||
label={upgradeLabel}
|
||||
position="right"
|
||||
withArrow
|
||||
>
|
||||
<UnstyledButton
|
||||
className={classes.link}
|
||||
data-disabled
|
||||
aria-disabled="true"
|
||||
tabIndex={-1}
|
||||
>
|
||||
<item.icon className={classes.linkIcon} stroke={2} />
|
||||
<span>{t(item.label)}</span>
|
||||
</UnstyledButton>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Link
|
||||
key={item.label}
|
||||
className={classes.link}
|
||||
data-active={active === item.path || undefined}
|
||||
aria-current={active === item.path ? "page" : undefined}
|
||||
to={item.path}
|
||||
onClick={handleNavClick}
|
||||
>
|
||||
<item.icon className={classes.linkIcon} stroke={2} />
|
||||
<span>{t(item.label)}</span>
|
||||
</Link>
|
||||
),
|
||||
)}
|
||||
{mainNavItems.map((item) => (
|
||||
<Link
|
||||
key={item.label}
|
||||
className={classes.link}
|
||||
data-active={active === item.path || undefined}
|
||||
to={item.path}
|
||||
onClick={handleNavClick}
|
||||
>
|
||||
<item.icon className={classes.linkIcon} stroke={2} />
|
||||
<span>{t(item.label)}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Divider my="xs" />
|
||||
@@ -160,7 +129,6 @@ export default function GlobalSidebar() {
|
||||
<Link
|
||||
className={classes.link}
|
||||
data-active={active.startsWith("/settings") || undefined}
|
||||
aria-current={active.startsWith("/settings") ? "page" : undefined}
|
||||
to="/settings/account/profile"
|
||||
onClick={handleNavClick}
|
||||
>
|
||||
|
||||
@@ -14,6 +14,7 @@ import { getApiKeys } from "@/ee/api-key";
|
||||
import { getAuditLogs } from "@/ee/audit/services/audit-service";
|
||||
import { getVerificationList } from "@/ee/page-verification/services/page-verification-service";
|
||||
import { getScimTokens } from "@/ee/scim/services/scim-token-service";
|
||||
import { getWebhooks } from "@/ee/webhook/services/webhook-service";
|
||||
|
||||
export const prefetchWorkspaceMembers = () => {
|
||||
const params: QueryParams = { limit: 100, query: "" };
|
||||
@@ -106,3 +107,11 @@ export const prefetchScimTokens = () => {
|
||||
queryFn: () => getScimTokens({}),
|
||||
});
|
||||
};
|
||||
|
||||
export const prefetchWebhooks = () => {
|
||||
const params = { limit: 50 };
|
||||
queryClient.prefetchQuery({
|
||||
queryKey: ["webhook-list", params],
|
||||
queryFn: () => getWebhooks(params),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
IconSparkles,
|
||||
IconHistory,
|
||||
IconShieldCheck,
|
||||
IconWebhook,
|
||||
} from "@tabler/icons-react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import classes from "./settings.module.css";
|
||||
@@ -38,6 +39,7 @@ import {
|
||||
prefetchWorkspaceMembers,
|
||||
prefetchAuditLogs,
|
||||
prefetchVerifiedPages,
|
||||
prefetchWebhooks,
|
||||
} from "@/components/settings/settings-queries.tsx";
|
||||
import AppVersion from "@/components/settings/app-version.tsx";
|
||||
import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
|
||||
@@ -125,6 +127,13 @@ const groupedData: DataGroup[] = [
|
||||
role: "owner",
|
||||
env: "selfhosted",
|
||||
},
|
||||
{
|
||||
label: "Webhooks",
|
||||
icon: IconWebhook,
|
||||
path: "/settings/webhooks",
|
||||
feature: Feature.WEBHOOKS,
|
||||
role: "admin",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -222,6 +231,9 @@ export default function SettingsSidebar() {
|
||||
case "Audit log":
|
||||
prefetchHandler = prefetchAuditLogs;
|
||||
break;
|
||||
case "Webhooks":
|
||||
prefetchHandler = prefetchWebhooks;
|
||||
break;
|
||||
case "Verified pages":
|
||||
prefetchHandler = prefetchVerifiedPages;
|
||||
break;
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Divider, Title } from '@mantine/core';
|
||||
export default function SettingsTitle({ title }: { title: string }) {
|
||||
return (
|
||||
<>
|
||||
<Title order={1} size="h3">
|
||||
<Title order={3}>
|
||||
{title}
|
||||
</Title>
|
||||
<Divider my="md" />
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
/*
|
||||
* Focus styling for list-style tables (recent changes, favorites, all
|
||||
* spaces, groups, verified pages, shares).
|
||||
*
|
||||
* Per WAI-ARIA Authoring Practices and Adrian Roselli's guidance on table
|
||||
* accessibility (https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html),
|
||||
* data tables should not be made fully clickable. Only the title cell is the
|
||||
* link, and that link is what receives Tab focus.
|
||||
*
|
||||
* - `.row` adds a subtle background tint when the row contains the focused
|
||||
* element, so keyboard users can see which row they're inspecting.
|
||||
* - `.link` adds a visible :focus-visible outline on the title link itself.
|
||||
*
|
||||
* No stretched-link pseudo here on purpose: absolutely-positioned pseudos
|
||||
* inside table cells cause column reflow on focus in Chromium.
|
||||
*/
|
||||
|
||||
.row:focus-within {
|
||||
background-color: light-dark(
|
||||
var(--mantine-color-gray-1),
|
||||
var(--mantine-color-dark-6)
|
||||
);
|
||||
}
|
||||
|
||||
.link:focus-visible {
|
||||
outline: 2px solid var(--mantine-primary-color-filled);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
}
|
||||
@@ -16,18 +16,14 @@ interface CustomAvatarProps {
|
||||
mt?: string | number;
|
||||
}
|
||||
|
||||
// `color.shade` pairs whose contrast meets WCAG AA (4.5:1) in BOTH variants:
|
||||
// - filled: white text on the shade as bg
|
||||
// - light: shade as text on the color's light-bg (10% color.6 over white)
|
||||
// Avoids lime/yellow/green/orange — even their dark shades have weak
|
||||
// contrast. grape and indigo were bumped from .7 to darker shades because
|
||||
// the original picks failed: grape.7 was 4.02/3.61 (both fail) and
|
||||
// indigo.7 was 4.98/4.39 (light fails by a hair).
|
||||
// `color.shade` pairs whose filled background meets WCAG AA (4.5:1) against
|
||||
// white text. Avoids lime/yellow/green/orange — even their dark shades have
|
||||
// weak white-text contrast.
|
||||
const SAFE_INITIALS_COLORS: MantineColor[] = [
|
||||
"blue.8",
|
||||
"cyan.9",
|
||||
"grape.9",
|
||||
"indigo.8",
|
||||
"grape.7",
|
||||
"indigo.7",
|
||||
"pink.8",
|
||||
"red.8",
|
||||
"violet.7",
|
||||
|
||||
@@ -16,8 +16,6 @@ export function DestinationPickerModal({
|
||||
loading,
|
||||
excludePageId,
|
||||
pageLimit,
|
||||
initialSpaceId,
|
||||
searchSpacesOnly,
|
||||
}: DestinationPickerModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const [selection, setSelection] = useState<DestinationSelection | null>(null);
|
||||
@@ -41,15 +39,13 @@ export function DestinationPickerModal({
|
||||
<Modal.Content>
|
||||
<Modal.Header py={0}>
|
||||
<Modal.Title fw={500}>{title}</Modal.Title>
|
||||
<Modal.CloseButton aria-label={t("Close")} />
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<DestinationPicker
|
||||
onSelectionChange={setSelection}
|
||||
excludePageId={excludePageId}
|
||||
pageLimit={pageLimit}
|
||||
initialSpaceId={initialSpaceId}
|
||||
searchSpacesOnly={searchSpacesOnly}
|
||||
/>
|
||||
|
||||
<Group justify="flex-end" mt="md">
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
||||
transition: background-color 150ms ease;
|
||||
user-select: none;
|
||||
|
||||
@@ -23,11 +22,6 @@
|
||||
var(--mantine-color-dark-6)
|
||||
);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--mantine-primary-color-filled);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
@@ -63,7 +57,7 @@
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
flex-shrink: 0;
|
||||
transition: transform 150ms ease;
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
||||
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
||||
|
||||
@mixin hover {
|
||||
background-color: light-dark(
|
||||
@@ -117,7 +111,7 @@
|
||||
}
|
||||
|
||||
.spaceName {
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
||||
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState, useCallback, useEffect, useMemo, useRef } from "react";
|
||||
import { ActionIcon, TextInput, ScrollArea, Loader } from "@mantine/core";
|
||||
import { useState, useCallback } from "react";
|
||||
import { TextInput, ScrollArea, Loader } from "@mantine/core";
|
||||
import { useDebouncedValue } from "@mantine/hooks";
|
||||
import { IconSearch, IconFileDescription } from "@tabler/icons-react";
|
||||
import { IconSearch, IconFile } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useGetSpacesQuery } from "@/features/space/queries/space-query";
|
||||
import { useSearchSuggestionsQuery } from "@/features/search/queries/search-query";
|
||||
@@ -15,29 +15,23 @@ type DestinationPickerProps = {
|
||||
onSelectionChange: (selection: DestinationSelection | null) => void;
|
||||
excludePageId?: string;
|
||||
pageLimit?: number;
|
||||
initialSpaceId?: string;
|
||||
searchSpacesOnly?: boolean;
|
||||
};
|
||||
|
||||
export function DestinationPicker({
|
||||
onSelectionChange,
|
||||
excludePageId,
|
||||
pageLimit = 15,
|
||||
initialSpaceId,
|
||||
searchSpacesOnly,
|
||||
}: DestinationPickerProps) {
|
||||
const { t } = useTranslation();
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [selection, setSelection] = useState<DestinationSelection | null>(null);
|
||||
const [debouncedQuery] = useDebouncedValue(searchQuery, 300);
|
||||
const viewportRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const { data: spacesData, isLoading: spacesLoading } = useGetSpacesQuery({
|
||||
limit: 100,
|
||||
});
|
||||
|
||||
const searchEnabled =
|
||||
!searchSpacesOnly && debouncedQuery && debouncedQuery.length >= 2;
|
||||
const searchEnabled = debouncedQuery && debouncedQuery.length >= 2;
|
||||
|
||||
const { data: searchData, isLoading: searchLoading } =
|
||||
useSearchSuggestionsQuery({
|
||||
@@ -48,18 +42,6 @@ export function DestinationPicker({
|
||||
|
||||
const isSearching = !!searchEnabled;
|
||||
|
||||
const filteredSpaces = useMemo(() => {
|
||||
const items = spacesData?.items ?? [];
|
||||
if (!searchSpacesOnly || !debouncedQuery) return items;
|
||||
const fold = (s: string) =>
|
||||
s
|
||||
.normalize("NFD")
|
||||
.replace(/[̀-ͯ]/g, "")
|
||||
.toLocaleLowerCase();
|
||||
const term = fold(debouncedQuery);
|
||||
return items.filter((s) => fold(s.name).includes(term));
|
||||
}, [spacesData, searchSpacesOnly, debouncedQuery]);
|
||||
|
||||
const selectedId =
|
||||
selection?.type === "space" ? selection.spaceId : selection?.pageId ?? null;
|
||||
|
||||
@@ -105,48 +87,18 @@ export function DestinationPicker({
|
||||
[updateSelection],
|
||||
);
|
||||
|
||||
// Pre-select space when initialSpaceId is set and spaces have loaded.
|
||||
// Only runs once: skip if user has already made a selection.
|
||||
useEffect(() => {
|
||||
if (!initialSpaceId || selection) return;
|
||||
const match = spacesData?.items?.find((s) => s.id === initialSpaceId);
|
||||
if (match) {
|
||||
updateSelection({ type: "space", spaceId: match.id, space: match });
|
||||
requestAnimationFrame(() => {
|
||||
const el = viewportRef.current?.querySelector<HTMLElement>(
|
||||
`[data-space-id="${match.id}"]`,
|
||||
);
|
||||
el?.scrollIntoView({ block: "nearest" });
|
||||
});
|
||||
}
|
||||
}, [initialSpaceId, selection, spacesData, updateSelection]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<TextInput
|
||||
leftSection={<IconSearch size={16} />}
|
||||
placeholder={
|
||||
searchSpacesOnly
|
||||
? t("Search spaces...")
|
||||
: t("Search pages and spaces...")
|
||||
}
|
||||
aria-label={
|
||||
searchSpacesOnly
|
||||
? t("Search spaces...")
|
||||
: t("Search pages and spaces...")
|
||||
}
|
||||
placeholder={t("Search pages and spaces...")}
|
||||
variant="filled"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.currentTarget.value)}
|
||||
className={classes.searchInput}
|
||||
/>
|
||||
|
||||
<ScrollArea
|
||||
h="50vh"
|
||||
offsetScrollbars
|
||||
className={classes.scrollArea}
|
||||
viewportRef={viewportRef}
|
||||
>
|
||||
<ScrollArea h="50vh" offsetScrollbars className={classes.scrollArea}>
|
||||
{isSearching ? (
|
||||
searchLoading ? (
|
||||
<div className={classes.emptyState}>
|
||||
@@ -159,28 +111,16 @@ export function DestinationPicker({
|
||||
<div
|
||||
key={page.id}
|
||||
className={classes.searchResult}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => handleSearchResultClick(page)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
handleSearchResultClick(page);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className={classes.iconWrapper}>
|
||||
{page.icon ? (
|
||||
page.icon
|
||||
) : (
|
||||
<ActionIcon
|
||||
component="div"
|
||||
variant="transparent"
|
||||
c="gray"
|
||||
size={22}
|
||||
>
|
||||
<IconFileDescription size={18} />
|
||||
</ActionIcon>
|
||||
<IconFile
|
||||
size={16}
|
||||
color="var(--mantine-color-gray-5)"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className={classes.pageTitle}>
|
||||
@@ -201,14 +141,8 @@ export function DestinationPicker({
|
||||
<div className={classes.emptyState}>
|
||||
<Loader size="xs" />
|
||||
</div>
|
||||
) : filteredSpaces.length === 0 ? (
|
||||
<div className={classes.emptyState}>
|
||||
{searchSpacesOnly && debouncedQuery
|
||||
? t("No spaces found")
|
||||
: t("No results found")}
|
||||
</div>
|
||||
) : (
|
||||
filteredSpaces.map((space) => (
|
||||
spacesData?.items?.map((space) => (
|
||||
<SpaceRow
|
||||
key={space.id}
|
||||
space={space}
|
||||
|
||||
@@ -20,6 +20,4 @@ export type DestinationPickerModalProps = {
|
||||
loading?: boolean;
|
||||
excludePageId?: string;
|
||||
pageLimit?: number;
|
||||
initialSpaceId?: string;
|
||||
searchSpacesOnly?: boolean;
|
||||
};
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { KeyboardEvent, useState } from "react";
|
||||
import { ActionIcon } from "@mantine/core";
|
||||
import { IconChevronRight, IconFileDescription } from "@tabler/icons-react";
|
||||
import { useState } from "react";
|
||||
import { IconChevronRight, IconFile } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IPage } from "@/features/page/types/page.types";
|
||||
import { PageChildren } from "./page-children";
|
||||
@@ -37,44 +36,23 @@ export function PageRow({
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
const handleSelect = () => {
|
||||
if (!isExcluded) onSelect(page);
|
||||
};
|
||||
|
||||
const handleRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.target !== e.currentTarget) return;
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
handleSelect();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={rowClasses}
|
||||
style={{ paddingLeft: depth * 20 + 12 }}
|
||||
role="button"
|
||||
tabIndex={isExcluded ? -1 : 0}
|
||||
aria-disabled={isExcluded || undefined}
|
||||
onClick={handleSelect}
|
||||
onKeyDown={handleRowKeyDown}
|
||||
onClick={() => !isExcluded && onSelect(page)}
|
||||
>
|
||||
{page.hasChildren ? (
|
||||
<ActionIcon
|
||||
<div
|
||||
className={`${classes.chevron} ${expanded ? classes.chevronExpanded : ""}`}
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="sm"
|
||||
aria-label={expanded ? t("Collapse") : t("Expand")}
|
||||
aria-expanded={expanded}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setExpanded(!expanded);
|
||||
}}
|
||||
>
|
||||
<IconChevronRight size={14} />
|
||||
</ActionIcon>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ width: 20, flexShrink: 0 }} />
|
||||
)}
|
||||
@@ -83,14 +61,10 @@ export function PageRow({
|
||||
{page.icon ? (
|
||||
page.icon
|
||||
) : (
|
||||
<ActionIcon
|
||||
component="div"
|
||||
variant="transparent"
|
||||
c="gray"
|
||||
size={22}
|
||||
>
|
||||
<IconFileDescription size={18} />
|
||||
</ActionIcon>
|
||||
<IconFile
|
||||
size={16}
|
||||
color="var(--mantine-color-gray-5)"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { KeyboardEvent, useState } from "react";
|
||||
import { ActionIcon, Tooltip } from "@mantine/core";
|
||||
import { useState } from "react";
|
||||
import { Tooltip } from "@mantine/core";
|
||||
import { IconChevronRight, IconLock } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ISpace } from "@/features/space/types/space.types";
|
||||
@@ -42,43 +42,21 @@ export function SpaceRow({
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
const handleSelect = () => {
|
||||
if (writable) onSelectSpace(space);
|
||||
};
|
||||
|
||||
const handleRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.target !== e.currentTarget) return;
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
handleSelect();
|
||||
}
|
||||
};
|
||||
|
||||
const rowContent = (
|
||||
<div
|
||||
className={rowClasses}
|
||||
data-space-id={space.id}
|
||||
role="button"
|
||||
tabIndex={writable ? 0 : -1}
|
||||
aria-disabled={!writable || undefined}
|
||||
onClick={handleSelect}
|
||||
onKeyDown={handleRowKeyDown}
|
||||
onClick={() => writable && onSelectSpace(space)}
|
||||
>
|
||||
{writable ? (
|
||||
<ActionIcon
|
||||
<div
|
||||
className={`${classes.chevron} ${expanded ? classes.chevronExpanded : ""}`}
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="sm"
|
||||
aria-label={expanded ? t("Collapse") : t("Expand")}
|
||||
aria-expanded={expanded}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setExpanded(!expanded);
|
||||
}}
|
||||
>
|
||||
<IconChevronRight size={14} />
|
||||
</ActionIcon>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ width: 20, flexShrink: 0 }} />
|
||||
)}
|
||||
|
||||
@@ -14,14 +14,7 @@ export interface SidebarToggleProps extends BoxProps, ElementProps<"button"> {
|
||||
const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
|
||||
({ opened, size = "sm", ...others }, ref) => {
|
||||
return (
|
||||
<ActionIcon
|
||||
size={size}
|
||||
aria-expanded={opened}
|
||||
{...others}
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
ref={ref}
|
||||
>
|
||||
<ActionIcon size={size} {...others} variant="subtle" color="gray" ref={ref}>
|
||||
{opened ? (
|
||||
<IconLayoutSidebarRightExpand />
|
||||
) : (
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
.skipLink {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
z-index: 9999;
|
||||
padding: 8px 16px;
|
||||
background: var(--mantine-color-body);
|
||||
color: var(--mantine-color-text);
|
||||
border: 2px solid var(--mantine-color-blue-6);
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
transform: translateY(-200%);
|
||||
transition: transform 0.15s ease-out;
|
||||
}
|
||||
|
||||
.skipLink:focus {
|
||||
transform: translateY(0);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.skipLink {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import classes from "./skip-to-main.module.css";
|
||||
|
||||
export const MAIN_CONTENT_ID = "main-content";
|
||||
|
||||
export function SkipToMain() {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<a href={`#${MAIN_CONTENT_ID}`} className={classes.skipLink}>
|
||||
{t("Skip to main content")}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -120,7 +120,7 @@ export default function AiChatSidebar() {
|
||||
return (
|
||||
<div className={classes.sidebar}>
|
||||
<div className={classes.header}>
|
||||
<h2 className={classes.title}>{t("AI Chat")}</h2>
|
||||
<span className={classes.title}>{t("AI Chat")}</span>
|
||||
<Tooltip label={t("New chat")} openDelay={250} withArrow>
|
||||
<ActionIcon
|
||||
component={Link}
|
||||
@@ -176,7 +176,7 @@ export default function AiChatSidebar() {
|
||||
))
|
||||
: groupedChats.map((group) => (
|
||||
<div key={group.key} className={classes.chatGroup}>
|
||||
<h3 className={classes.chatGroupLabel}>{group.label}</h3>
|
||||
<div className={classes.chatGroupLabel}>{group.label}</div>
|
||||
{group.chats.map((chat) => (
|
||||
<AiChatSidebarItem
|
||||
key={chat.id}
|
||||
|
||||
@@ -56,9 +56,9 @@ export default function ChatEmptyState({ isStreaming, onSend, onStop }: Props) {
|
||||
<div className={classes.emptyState}>
|
||||
<IconSparkles size={48} stroke={1.5} className={classes.emptyStateIcon} />
|
||||
<div className={classes.emptyStateBrand}>{t("Docmost AI")}</div>
|
||||
<h1 className={classes.emptyStateTitle}>
|
||||
<div className={classes.emptyStateTitle}>
|
||||
{t("What can I help you with?")}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className={classes.emptyStateInput}>
|
||||
<ChatInput
|
||||
@@ -71,7 +71,7 @@ export default function ChatEmptyState({ isStreaming, onSend, onStop }: Props) {
|
||||
</div>
|
||||
|
||||
<div className={classes.suggestionsSection}>
|
||||
<h2 className={classes.suggestionsLabel}>{t("Get started")}</h2>
|
||||
<div className={classes.suggestionsLabel}>Get started</div>
|
||||
<div className={classes.suggestionsGrid}>
|
||||
{SUGGESTIONS.map((s) => (
|
||||
<button
|
||||
|
||||
@@ -226,7 +226,6 @@ export default function ChatInput({
|
||||
],
|
||||
editorProps: {
|
||||
attributes: {
|
||||
role: "textbox",
|
||||
"aria-label": placeholder || t("Ask anything... Use @ to mention pages"),
|
||||
"aria-multiline": "true",
|
||||
},
|
||||
@@ -336,15 +335,7 @@ export default function ChatInput({
|
||||
|
||||
<EditorContent editor={editor} className={classes.editorContent} />
|
||||
<div className={classes.actions}>
|
||||
<Popover
|
||||
opened={plusMenuOpen}
|
||||
onChange={setPlusMenuOpen}
|
||||
position="top-start"
|
||||
width={220}
|
||||
shadow="md"
|
||||
trapFocus
|
||||
returnFocus
|
||||
>
|
||||
<Popover opened={plusMenuOpen} onChange={setPlusMenuOpen} position="top-start" width={220} shadow="md">
|
||||
<Popover.Target>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -2,7 +2,6 @@ import { useEffect, useRef, useCallback, useState } from "react";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
import { IconArrowDown, IconAlertTriangle } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { VisuallyHidden } from "@mantine/core";
|
||||
import type { AiChatMessage, AiChatToolCall } from "../types/ai-chat.types";
|
||||
import ChatMessage from "./chat-message";
|
||||
import classes from "../styles/ai-chat.module.css";
|
||||
@@ -34,7 +33,6 @@ export default function ChatMessageList({
|
||||
streamingContent,
|
||||
streamingToolCalls,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
const isAtBottomRef = useRef(true);
|
||||
@@ -42,38 +40,6 @@ export default function ChatMessageList({
|
||||
const prevScrollTopRef = useRef(0);
|
||||
const [showScrollButton, setShowScrollButton] = useState(false);
|
||||
|
||||
// Dedicated status-region announcement for screen readers. Rather than
|
||||
// putting aria-live on the whole transcript (which re-fires for every
|
||||
// streamed token), announce "AI is thinking…" when streaming starts and
|
||||
// the full assistant reply once streaming completes — a single, clean read.
|
||||
const [statusAnnouncement, setStatusAnnouncement] = useState("");
|
||||
const wasStreamingRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
const justStartedStreaming = isStreaming && !wasStreamingRef.current;
|
||||
const justFinishedStreaming = !isStreaming && wasStreamingRef.current;
|
||||
|
||||
if (justStartedStreaming) {
|
||||
setStatusAnnouncement(t("AI is thinking..."));
|
||||
} else if (justFinishedStreaming) {
|
||||
const lastMessage = messages[messages.length - 1];
|
||||
if (lastMessage?.role === "assistant" && lastMessage.content) {
|
||||
// Strip markdown punctuation so screen readers don't read symbols
|
||||
// like # * _ ` ~ aloud. A plain-text version is fine — the styled
|
||||
// version stays in the DOM for visual users.
|
||||
const plainText = lastMessage.content
|
||||
.replace(/[#*_`~]/g, "")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim();
|
||||
setStatusAnnouncement(plainText);
|
||||
} else {
|
||||
setStatusAnnouncement("");
|
||||
}
|
||||
}
|
||||
|
||||
wasStreamingRef.current = isStreaming;
|
||||
}, [isStreaming, messages, t]);
|
||||
|
||||
const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
@@ -161,18 +127,7 @@ export default function ChatMessageList({
|
||||
|
||||
return (
|
||||
<div className={classes.messageListWrapper}>
|
||||
{/* Single status region for chat announcements. Kept outside the
|
||||
scrolling transcript so changes here trigger one polite read per
|
||||
state change instead of re-announcing every streamed token. */}
|
||||
<VisuallyHidden role="status" aria-live="polite">
|
||||
{statusAnnouncement}
|
||||
</VisuallyHidden>
|
||||
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={classes.messageList}
|
||||
aria-label={t("Chat transcript")}
|
||||
>
|
||||
<div ref={containerRef} className={classes.messageList}>
|
||||
{messages.map((msg) => (
|
||||
<ErrorBoundary
|
||||
key={msg.id}
|
||||
@@ -207,7 +162,7 @@ export default function ChatMessageList({
|
||||
{showScrollButton && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={t("Scroll to bottom")}
|
||||
aria-label="Scroll to bottom"
|
||||
className={classes.scrollToBottomButton}
|
||||
onClick={() => scrollToBottom("smooth")}
|
||||
>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useCallback } from "react";
|
||||
import { useNavigate } from "react-router";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import DOMPurify from "dompurify";
|
||||
import { ActionIcon, Tooltip } from "@mantine/core";
|
||||
import {
|
||||
@@ -44,7 +43,6 @@ export default function ChatMessage({
|
||||
streamingToolCalls,
|
||||
}: Props) {
|
||||
const navigate = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleContentClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
@@ -80,11 +78,7 @@ export default function ChatMessage({
|
||||
}[]) || [];
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classes.userMessage}
|
||||
role="article"
|
||||
aria-label={t("You said:")}
|
||||
>
|
||||
<div className={classes.userMessage}>
|
||||
<div className={classes.userBubble}>
|
||||
{attachments.length > 0 && (
|
||||
<div className={classes.messageAttachments}>
|
||||
@@ -106,16 +100,8 @@ export default function ChatMessage({
|
||||
);
|
||||
}
|
||||
|
||||
// Only label the article when there's something meaningful to announce.
|
||||
// Tool-only assistant turns (no text) shouldn't announce "Assistant said:" with empty content.
|
||||
const hasAnnouncableContent = Boolean(content);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classes.assistantMessage}
|
||||
role="article"
|
||||
aria-label={hasAnnouncableContent ? t("Assistant said:") : undefined}
|
||||
>
|
||||
<div className={classes.assistantMessage}>
|
||||
<div className={classes.messageContent}>
|
||||
{toolCalls && toolCalls.length > 0 && (
|
||||
<ChatToolGroup toolCalls={toolCalls} isStreaming={isStreaming} />
|
||||
@@ -145,10 +131,7 @@ export default function ChatMessage({
|
||||
</div>
|
||||
{!isStreaming && message.content && (
|
||||
<div className={classes.messageActions}>
|
||||
<CopyTextButton
|
||||
text={message?.content}
|
||||
label={t("Copy assistant response")}
|
||||
/>
|
||||
<CopyTextButton text={message?.content} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -106,7 +106,6 @@
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--mantine-spacing-xl);
|
||||
text-align: center;
|
||||
}
|
||||
@@ -129,7 +128,6 @@
|
||||
color: var(--mantine-color-dimmed);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--mantine-spacing-sm);
|
||||
}
|
||||
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
}
|
||||
|
||||
:global(.ProseMirror p.is-editor-empty:first-child::before) {
|
||||
color: var(--mantine-color-placeholder);
|
||||
color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
height: 0;
|
||||
@@ -183,7 +183,7 @@
|
||||
border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
|
||||
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
||||
transition: color 150ms, background-color 150ms;
|
||||
|
||||
@mixin hover {
|
||||
|
||||
@@ -15,7 +15,6 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
}
|
||||
@@ -34,7 +33,6 @@
|
||||
}
|
||||
|
||||
.chatGroupLabel {
|
||||
margin: 0;
|
||||
padding: 4px var(--mantine-spacing-xs);
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
font-weight: 600;
|
||||
@@ -120,8 +118,7 @@
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.chatItem:hover .chatItemDate,
|
||||
.chatItem:focus-within .chatItemDate {
|
||||
.chatItem:hover .chatItemDate {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -136,12 +133,6 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chatItem:hover .chatItemActions,
|
||||
.chatItem:focus-within .chatItemActions {
|
||||
.chatItem:hover .chatItemActions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.chatItemActions :global(.mantine-ActionIcon-root):focus-visible {
|
||||
outline: 2px solid var(--mantine-primary-color-filled);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@@ -33,7 +33,6 @@ export function ApiKeyCreatedModal({
|
||||
onClose={onClose}
|
||||
title={t("{{credential}} created", { credential: t("API key") })}
|
||||
size="lg"
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Alert
|
||||
|
||||
@@ -107,7 +107,6 @@ export function CreateApiKeyModal({
|
||||
onClose={handleClose}
|
||||
title={t("Create {{credential}}", { credential: t("API key") })}
|
||||
size="md"
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
<form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
|
||||
<Stack gap="md">
|
||||
|
||||
@@ -32,7 +32,6 @@ export function RevokeApiKeyModal({
|
||||
onClose={onClose}
|
||||
title={t("Revoke {{credential}}", { credential: t("API key") })}
|
||||
size="md"
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text>
|
||||
|
||||
@@ -55,7 +55,6 @@ export function UpdateApiKeyModal({
|
||||
onClose={onClose}
|
||||
title={t("Update {{credential}}", { credential: t("API key") })}
|
||||
size="md"
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
<form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
|
||||
<Stack gap="md">
|
||||
|
||||
@@ -111,11 +111,6 @@ export function LdapLoginModal({
|
||||
placeholder={t("Enter your LDAP password")}
|
||||
variant="filled"
|
||||
disabled={isLoading}
|
||||
visibilityToggleButtonProps={{
|
||||
"aria-label": t("Toggle password visibility"),
|
||||
"aria-hidden": false,
|
||||
tabIndex: 0,
|
||||
}}
|
||||
{...form.getInputProps("password")}
|
||||
/>
|
||||
|
||||
|
||||
@@ -19,4 +19,5 @@ export const Feature = {
|
||||
SHARING_CONTROLS: 'sharing:controls',
|
||||
TEMPLATES: 'templates',
|
||||
VIEWER_COMMENTS: 'comment:viewer',
|
||||
WEBHOOKS: 'webhooks',
|
||||
} as const;
|
||||
|
||||
@@ -130,11 +130,6 @@ export function MfaBackupCodesModal({
|
||||
label={t("Confirm password")}
|
||||
placeholder={t("Enter your password")}
|
||||
variant="filled"
|
||||
visibilityToggleButtonProps={{
|
||||
"aria-label": t("Toggle password visibility"),
|
||||
"aria-hidden": false,
|
||||
tabIndex: 0,
|
||||
}}
|
||||
{...form.getInputProps("confirmPassword")}
|
||||
autoFocus
|
||||
data-autofocus
|
||||
|
||||
@@ -107,11 +107,6 @@ export function MfaDisableModal({
|
||||
<PasswordInput
|
||||
label={t("Password")}
|
||||
placeholder={t("Enter your password")}
|
||||
visibilityToggleButtonProps={{
|
||||
"aria-label": t("Toggle password visibility"),
|
||||
"aria-hidden": false,
|
||||
tabIndex: 0,
|
||||
}}
|
||||
{...form.getInputProps("confirmPassword")}
|
||||
autoFocus
|
||||
data-autofocus
|
||||
|
||||
@@ -79,13 +79,7 @@ export function PageShareModal({ readOnly }: PageShareModalProps) {
|
||||
{t("Share")}
|
||||
</Button>
|
||||
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
title={t("Share")}
|
||||
size={600}
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
<Modal opened={opened} onClose={close} title={t("Share")} size={600}>
|
||||
<Tabs value={activeTab} color="dark" onChange={setActiveTab}>
|
||||
<Tabs.List mb="md">
|
||||
<Tabs.Tab value="access">{t("Access")}</Tabs.Tab>
|
||||
|
||||
@@ -4,8 +4,8 @@ import {
|
||||
Menu,
|
||||
Modal,
|
||||
Text,
|
||||
ThemeIcon,
|
||||
Tooltip,
|
||||
UnstyledButton,
|
||||
} from "@mantine/core";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import {
|
||||
@@ -100,20 +100,15 @@ export function PageVerificationBadge({
|
||||
if (!pageId) return null;
|
||||
if (!hasVerificationFeature) {
|
||||
if (readOnly) return null;
|
||||
const lockedLabel = `${t("Add verification")} — ${upgradeLabel}`;
|
||||
// Use ActionIcon (a real <button>) instead of a ThemeIcon so the tooltip
|
||||
// is reachable on keyboard focus, and screen readers announce the upgrade
|
||||
// hint via the accessible name. Click is a no-op since the feature is
|
||||
// gated; the tooltip explains why.
|
||||
return (
|
||||
<Tooltip label={lockedLabel} withArrow openDelay={250}>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
aria-label={lockedLabel}
|
||||
>
|
||||
<Tooltip
|
||||
label={`${t("Add verification")} — ${upgradeLabel}`}
|
||||
withArrow
|
||||
openDelay={250}
|
||||
>
|
||||
<ThemeIcon variant="subtle" color="gray">
|
||||
<IconShieldCheck size={20} stroke={1.5} />
|
||||
</ActionIcon>
|
||||
</ThemeIcon>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
@@ -137,25 +132,20 @@ export function PageVerificationBadge({
|
||||
<>
|
||||
{status !== "none" ? (
|
||||
<Tooltip label={tooltipLabel} withArrow openDelay={250}>
|
||||
<UnstyledButton
|
||||
<Group
|
||||
gap={4}
|
||||
onClick={open}
|
||||
aria-label={tooltipLabel}
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
style={{ cursor: "pointer" }}
|
||||
wrap="nowrap"
|
||||
>
|
||||
<IconRosetteDiscountCheckFilled
|
||||
size={18}
|
||||
color={`var(--mantine-color-${getStatusColor(status).replace(".", "-")})`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Text size="sm" c={getStatusColor(status)}>
|
||||
{getStatusLabel(status, t)}
|
||||
</Text>
|
||||
</UnstyledButton>
|
||||
</Group>
|
||||
</Tooltip>
|
||||
) : !readOnly ? (
|
||||
<Tooltip label={t("Set up verification")} withArrow openDelay={250}>
|
||||
|
||||
@@ -18,7 +18,6 @@ import { CustomAvatar } from "@/components/ui/custom-avatar";
|
||||
import { buildPageUrl } from "@/features/page/page.utils";
|
||||
import { format } from "date-fns";
|
||||
import NoTableResults from "@/components/common/no-table-results";
|
||||
import rowClasses from "@/components/ui/clickable-table-row.module.css";
|
||||
|
||||
const MAX_VISIBLE_VERIFIERS = 5;
|
||||
|
||||
@@ -125,13 +124,12 @@ export default function VerificationListTable({
|
||||
);
|
||||
|
||||
return (
|
||||
<Table.Tr key={item.id} className={rowClasses.row}>
|
||||
<Table.Tr key={item.id}>
|
||||
<Table.Td>
|
||||
<Anchor
|
||||
size="sm"
|
||||
underline="never"
|
||||
style={{ color: "var(--mantine-color-text)" }}
|
||||
className={rowClasses.link}
|
||||
component={Link}
|
||||
to={pageUrl}
|
||||
>
|
||||
|
||||
@@ -52,7 +52,6 @@ export function CreateScimTokenModal({
|
||||
onClose={handleClose}
|
||||
title={t("Create {{credential}}", { credential: t("SCIM token") })}
|
||||
size="md"
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
<form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
|
||||
<Stack gap="md">
|
||||
|
||||
@@ -29,7 +29,6 @@ export function RevokeScimTokenModal({
|
||||
onClose={onClose}
|
||||
title={t("Revoke {{credential}}", { credential: t("SCIM token") })}
|
||||
size="md"
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text>
|
||||
|
||||
@@ -32,7 +32,6 @@ export function ScimTokenCreatedModal({
|
||||
onClose={onClose}
|
||||
title={t("{{credential}} created", { credential: t("SCIM token") })}
|
||||
size="lg"
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Alert
|
||||
|
||||
@@ -93,11 +93,7 @@ export function ScimTokenTable({
|
||||
<Table.Td>
|
||||
<Menu position="bottom-end" withinPortal>
|
||||
<Menu.Target>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
aria-label={t("Token actions")}
|
||||
>
|
||||
<ActionIcon variant="subtle" color="gray">
|
||||
<IconDots size={16} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
|
||||
@@ -52,7 +52,6 @@ export function UpdateScimTokenModal({
|
||||
onClose={onClose}
|
||||
title={t("Update {{credential}}", { credential: t("SCIM token") })}
|
||||
size="md"
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
<form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
|
||||
<Stack gap="md">
|
||||
|
||||
@@ -34,7 +34,7 @@ function AllowMemberTemplatesToggle() {
|
||||
const [checked, setChecked] = useState(
|
||||
workspace?.settings?.templates?.allowMemberTemplates === true,
|
||||
);
|
||||
const hasTemplates = useHasFeature(Feature.TEMPLATES);
|
||||
const hasSecuritySettings = useHasFeature(Feature.SECURITY_SETTINGS);
|
||||
const upgradeLabel = useUpgradeLabel();
|
||||
|
||||
const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -54,11 +54,15 @@ function AllowMemberTemplatesToggle() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Tooltip label={upgradeLabel} disabled={hasTemplates} refProp="rootRef">
|
||||
<Tooltip
|
||||
label={upgradeLabel}
|
||||
disabled={hasSecuritySettings}
|
||||
refProp="rootRef"
|
||||
>
|
||||
<Switch
|
||||
checked={checked}
|
||||
onChange={handleChange}
|
||||
disabled={!hasTemplates}
|
||||
disabled={!hasSecuritySettings}
|
||||
aria-label={t("Toggle allow members to create templates")}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
@@ -32,7 +32,6 @@ export default function SsoProviderModal({
|
||||
ssoProviderType: provider.type.toUpperCase(),
|
||||
})}
|
||||
onClose={onClose}
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
{provider.type === SSO_PROVIDER.SAML && (
|
||||
<SsoSamlForm provider={provider} onClose={onClose} />
|
||||
|
||||
@@ -137,6 +137,7 @@ export default function Security() {
|
||||
{ max: SCIM_TOKEN_LIMIT },
|
||||
)}
|
||||
disabled={(scimData?.items.length ?? 0) < SCIM_TOKEN_LIMIT}
|
||||
refProp="rootRef"
|
||||
>
|
||||
<Button
|
||||
onClick={() => setCreateOpen(true)}
|
||||
|
||||
@@ -8,11 +8,6 @@
|
||||
@mixin hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--mantine-primary-color-filled);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.cardBody {
|
||||
@@ -55,27 +50,18 @@
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
justify-content: space-between;
|
||||
gap: var(--mantine-spacing-xs);
|
||||
padding-top: var(--mantine-spacing-sm);
|
||||
margin-top: var(--mantine-spacing-lg);
|
||||
border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
|
||||
}
|
||||
|
||||
.scopeDot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background-color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
||||
}
|
||||
|
||||
.menuTarget {
|
||||
opacity: 0;
|
||||
transition: opacity 100ms ease;
|
||||
|
||||
.card:hover &,
|
||||
.card:focus-within & {
|
||||
.card:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Button, Card, Text, ActionIcon, Menu, Group } from "@mantine/core";
|
||||
import { Card, Text, ActionIcon, Menu, Group } from "@mantine/core";
|
||||
import {
|
||||
IconDots,
|
||||
IconEdit,
|
||||
@@ -12,7 +12,6 @@ import classes from "./template-card.module.css";
|
||||
type TemplateCardProps = {
|
||||
template: ITemplate;
|
||||
spaceName?: string;
|
||||
onPreview: (template: ITemplate) => void;
|
||||
onUse: (template: ITemplate) => void;
|
||||
onEdit?: (template: ITemplate) => void;
|
||||
onDelete?: (template: ITemplate) => void;
|
||||
@@ -22,7 +21,6 @@ type TemplateCardProps = {
|
||||
export default function TemplateCard({
|
||||
template,
|
||||
spaceName,
|
||||
onPreview,
|
||||
onUse,
|
||||
onEdit,
|
||||
onDelete,
|
||||
@@ -36,17 +34,7 @@ export default function TemplateCard({
|
||||
padding="lg"
|
||||
className={classes.card}
|
||||
style={{ cursor: "pointer" }}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={t("Preview template: {{title}}", { title: template.title })}
|
||||
onClick={() => onPreview(template)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.target !== e.currentTarget) return;
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onPreview(template);
|
||||
}
|
||||
}}
|
||||
onClick={() => onUse(template)}
|
||||
>
|
||||
<div className={classes.cardBody}>
|
||||
<Group justify="space-between" align="flex-start" wrap="nowrap" mb="md">
|
||||
@@ -59,17 +47,6 @@ export default function TemplateCard({
|
||||
)}
|
||||
|
||||
<Group gap={6} wrap="nowrap">
|
||||
<Button
|
||||
size="compact-xs"
|
||||
variant="filled"
|
||||
className={classes.menuTarget}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onUse(template);
|
||||
}}
|
||||
>
|
||||
{t("Use")}
|
||||
</Button>
|
||||
{canManage && (
|
||||
<Menu width={150} shadow="md" withArrow>
|
||||
<Menu.Target>
|
||||
@@ -114,7 +91,6 @@ export default function TemplateCard({
|
||||
<div className={classes.title}>{template.title}</div>
|
||||
|
||||
<div className={classes.footer}>
|
||||
<span className={classes.scopeDot} aria-hidden="true" />
|
||||
<Text size="sm" fw={500} c="dimmed">
|
||||
{template.spaceId ? (spaceName || t("Space")) : t("Global")}
|
||||
</Text>
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
.row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--mantine-spacing-sm);
|
||||
padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
width: 100%;
|
||||
|
||||
@mixin hover {
|
||||
background-color: light-dark(
|
||||
var(--mantine-color-gray-1),
|
||||
var(--mantine-color-dark-6)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: var(--mantine-font-size-sm);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.scope {
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
flex-shrink: 0;
|
||||
transition: opacity 100ms ease;
|
||||
|
||||
.row:hover &,
|
||||
.row:focus-within & {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.useButton {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: var(--mantine-spacing-sm);
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
transition: opacity 100ms ease;
|
||||
|
||||
.row:hover &,
|
||||
.row:focus-within &,
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--mantine-spacing-xl);
|
||||
}
|
||||
@@ -1,259 +0,0 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
TextInput,
|
||||
ScrollArea,
|
||||
Loader,
|
||||
Text,
|
||||
UnstyledButton,
|
||||
Group,
|
||||
SegmentedControl,
|
||||
} from "@mantine/core";
|
||||
import { useDebouncedValue } from "@mantine/hooks";
|
||||
import {
|
||||
IconArrowRight,
|
||||
IconSearch,
|
||||
IconFileText,
|
||||
} from "@tabler/icons-react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
useGetTemplatesQuery,
|
||||
useUseTemplateMutation,
|
||||
} from "@/ee/template/queries/template-query";
|
||||
import { useGetSpacesQuery } from "@/features/space/queries/space-query";
|
||||
import { ITemplate } from "@/ee/template/types/template.types";
|
||||
import UseTemplateModal from "@/ee/template/components/use-template-modal";
|
||||
import TemplatePreviewModal from "@/ee/template/components/template-preview-modal";
|
||||
import { buildPageUrl } from "@/features/page/page.utils";
|
||||
import classes from "./template-picker-modal.module.css";
|
||||
|
||||
type TemplatePickerModalProps = {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
/** Pre-select this space in the destination picker after a template is chosen. */
|
||||
initialSpaceId?: string;
|
||||
};
|
||||
|
||||
type ScopeFilter = "current" | "all";
|
||||
|
||||
export default function TemplatePickerModal({
|
||||
opened,
|
||||
onClose,
|
||||
initialSpaceId,
|
||||
}: TemplatePickerModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const useTemplateMutation = useUseTemplateMutation();
|
||||
const [query, setQuery] = useState("");
|
||||
const [debouncedQuery] = useDebouncedValue(query, 200);
|
||||
const [scope, setScope] = useState<ScopeFilter>(
|
||||
initialSpaceId ? "current" : "all",
|
||||
);
|
||||
// Two-stage selection: previewing first, then destination-picker.
|
||||
// `previewTemplate` is set when the user clicks a row in the picker.
|
||||
// `destinationTemplate` is set when they click "Use template" in the preview.
|
||||
const [previewTemplate, setPreviewTemplate] = useState<ITemplate | null>(
|
||||
null,
|
||||
);
|
||||
const [destinationTemplate, setDestinationTemplate] =
|
||||
useState<ITemplate | null>(null);
|
||||
|
||||
const { data, isPending } = useGetTemplatesQuery({
|
||||
spaceId: scope === "current" ? initialSpaceId : undefined,
|
||||
});
|
||||
const { data: spacesData } = useGetSpacesQuery({ limit: 100 });
|
||||
|
||||
const spaceNamesById = useMemo(() => {
|
||||
const map = new Map<string, string>();
|
||||
spacesData?.items?.forEach((s) => map.set(s.id, s.name));
|
||||
return map;
|
||||
}, [spacesData]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const all = data?.pages.flatMap((p) => p.items) ?? [];
|
||||
const term = debouncedQuery.trim().toLowerCase();
|
||||
if (!term) return all;
|
||||
return all.filter((tpl) => tpl.title.toLowerCase().includes(term));
|
||||
}, [data, debouncedQuery]);
|
||||
|
||||
const createInInitialSpace = async (tpl: ITemplate) => {
|
||||
if (!initialSpaceId) return;
|
||||
try {
|
||||
const page = await useTemplateMutation.mutateAsync({
|
||||
templateId: tpl.id,
|
||||
spaceId: initialSpaceId,
|
||||
});
|
||||
setPreviewTemplate(null);
|
||||
onClose();
|
||||
const space = spacesData?.items?.find((s) => s.id === initialSpaceId);
|
||||
if (page?.slugId && space?.slug) {
|
||||
navigate(buildPageUrl(space.slug, page.slugId, page.title));
|
||||
}
|
||||
} catch {
|
||||
// error notification handled by mutation's onError
|
||||
}
|
||||
};
|
||||
|
||||
const handlePick = (tpl: ITemplate) => {
|
||||
setPreviewTemplate(tpl);
|
||||
};
|
||||
|
||||
const handleQuickUse = (tpl: ITemplate) => {
|
||||
if (initialSpaceId) {
|
||||
createInInitialSpace(tpl);
|
||||
return;
|
||||
}
|
||||
setDestinationTemplate(tpl);
|
||||
};
|
||||
|
||||
const handlePreviewClose = () => {
|
||||
// Closing preview returns to the picker list (no full unmount).
|
||||
setPreviewTemplate(null);
|
||||
};
|
||||
|
||||
const handlePreviewUse = () => {
|
||||
if (initialSpaceId && previewTemplate) {
|
||||
createInInitialSpace(previewTemplate);
|
||||
return;
|
||||
}
|
||||
// Move from preview into destination-picker stage.
|
||||
setDestinationTemplate(previewTemplate);
|
||||
setPreviewTemplate(null);
|
||||
};
|
||||
|
||||
const handleDestinationClose = () => {
|
||||
setDestinationTemplate(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setQuery("");
|
||||
setScope(initialSpaceId ? "current" : "all");
|
||||
setPreviewTemplate(null);
|
||||
setDestinationTemplate(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
opened={opened && !previewTemplate && !destinationTemplate}
|
||||
onClose={handleClose}
|
||||
size={550}
|
||||
padding="lg"
|
||||
yOffset="10vh"
|
||||
title={<Text fw={500}>{t("Use a template")}</Text>}
|
||||
>
|
||||
<TextInput
|
||||
leftSection={<IconSearch size={16} />}
|
||||
placeholder={t("Search templates...")}
|
||||
variant="filled"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.currentTarget.value)}
|
||||
mb="xs"
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
{initialSpaceId && (
|
||||
<SegmentedControl
|
||||
fullWidth
|
||||
size="xs"
|
||||
mb="sm"
|
||||
value={scope}
|
||||
onChange={(v) => setScope(v as ScopeFilter)}
|
||||
data={[
|
||||
{ label: t("This space"), value: "current" },
|
||||
{ label: t("All templates"), value: "all" },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
|
||||
<ScrollArea h="50vh" offsetScrollbars>
|
||||
{isPending ? (
|
||||
<div className={classes.empty}>
|
||||
<Loader size="xs" />
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className={classes.empty}>
|
||||
<Text size="sm" c="dimmed">
|
||||
{t("No templates found")}
|
||||
</Text>
|
||||
</div>
|
||||
) : (
|
||||
filtered.map((tpl) => (
|
||||
<UnstyledButton
|
||||
key={tpl.id}
|
||||
className={classes.row}
|
||||
onClick={() => handlePick(tpl)}
|
||||
>
|
||||
<div className={classes.icon}>
|
||||
{tpl.icon ? (
|
||||
<span>{tpl.icon}</span>
|
||||
) : (
|
||||
<IconFileText
|
||||
size={16}
|
||||
color="var(--mantine-color-gray-6)"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className={classes.title}>{tpl.title}</div>
|
||||
<div className={classes.scope}>
|
||||
{tpl.spaceId
|
||||
? spaceNamesById.get(tpl.spaceId) ?? t("Space")
|
||||
: t("Global")}
|
||||
</div>
|
||||
<Button
|
||||
size="compact-xs"
|
||||
variant="filled"
|
||||
className={classes.useButton}
|
||||
loading={useTemplateMutation.isPending}
|
||||
disabled={useTemplateMutation.isPending}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleQuickUse(tpl);
|
||||
}}
|
||||
>
|
||||
{t("Use")}
|
||||
</Button>
|
||||
</UnstyledButton>
|
||||
))
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button
|
||||
component={Link}
|
||||
to="/templates"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
rightSection={<IconArrowRight size={16} />}
|
||||
onClick={handleClose}
|
||||
>
|
||||
{t("Browse all templates")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Modal>
|
||||
|
||||
{previewTemplate && (
|
||||
<TemplatePreviewModal
|
||||
templateId={previewTemplate.id}
|
||||
opened={true}
|
||||
onClose={handlePreviewClose}
|
||||
onUse={handlePreviewUse}
|
||||
useLoading={useTemplateMutation.isPending}
|
||||
/>
|
||||
)}
|
||||
|
||||
{destinationTemplate && (
|
||||
<UseTemplateModal
|
||||
template={destinationTemplate}
|
||||
opened={true}
|
||||
onClose={handleDestinationClose}
|
||||
initialSpaceId={initialSpaceId}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -9,7 +9,6 @@ type TemplatePreviewModalProps = {
|
||||
onClose: () => void;
|
||||
onUse: () => void;
|
||||
onEdit?: () => void;
|
||||
useLoading?: boolean;
|
||||
};
|
||||
|
||||
export default function TemplatePreviewModal({
|
||||
@@ -18,7 +17,6 @@ export default function TemplatePreviewModal({
|
||||
onClose,
|
||||
onUse,
|
||||
onEdit,
|
||||
useLoading,
|
||||
}: TemplatePreviewModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const { data: template, isLoading } = useGetTemplateByIdQuery(templateId);
|
||||
@@ -39,20 +37,15 @@ export default function TemplatePreviewModal({
|
||||
</Group>
|
||||
</Modal.Title>
|
||||
<Group gap="sm">
|
||||
<Button
|
||||
size="xs"
|
||||
onClick={onUse}
|
||||
loading={useLoading}
|
||||
disabled={useLoading}
|
||||
>
|
||||
{t("Use template")}
|
||||
</Button>
|
||||
{onEdit && (
|
||||
<Button size="xs" variant="default" onClick={onEdit}>
|
||||
{t("Edit")}
|
||||
</Button>
|
||||
)}
|
||||
<Modal.CloseButton aria-label={t("Close")} />
|
||||
<Button size="xs" onClick={onUse}>
|
||||
{t("Use template")}
|
||||
</Button>
|
||||
<Modal.CloseButton />
|
||||
</Group>
|
||||
</Modal.Header>
|
||||
<Modal.Body p={0}>
|
||||
|
||||
@@ -10,14 +10,12 @@ type UseTemplateModalProps = {
|
||||
template: ITemplate;
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
initialSpaceId?: string;
|
||||
};
|
||||
|
||||
export default function UseTemplateModal({
|
||||
template,
|
||||
opened,
|
||||
onClose,
|
||||
initialSpaceId,
|
||||
}: UseTemplateModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
@@ -56,8 +54,6 @@ export default function UseTemplateModal({
|
||||
actionLabel={t("Create page")}
|
||||
onSelect={handleSelect}
|
||||
loading={useTemplateMutation.isPending}
|
||||
initialSpaceId={initialSpaceId ?? template.spaceId}
|
||||
searchSpacesOnly
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -75,18 +75,6 @@ export default function TemplateEditor() {
|
||||
const editor = useEditor({
|
||||
extensions: templateExtensions,
|
||||
content: "",
|
||||
editorProps: {
|
||||
handleDOMEvents: {
|
||||
keydown: (_view, event) => {
|
||||
if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
|
||||
const slashCommand = document.querySelector("#slash-command");
|
||||
if (slashCommand) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
onUpdate() {
|
||||
if (loadedRef.current) {
|
||||
markDirty();
|
||||
@@ -283,7 +271,6 @@ export default function TemplateEditor() {
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="md"
|
||||
aria-label={t("Template settings")}
|
||||
onClick={() => {
|
||||
setDraftSpaceId(spaceId);
|
||||
openSettings();
|
||||
|
||||
@@ -160,8 +160,7 @@ export default function TemplateList() {
|
||||
? spaceNameMap.get(template.spaceId)
|
||||
: undefined
|
||||
}
|
||||
onPreview={handlePreview}
|
||||
onUse={handleUse}
|
||||
onUse={handlePreview}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
canManage={isWorkspaceAdmin}
|
||||
|
||||
@@ -6,7 +6,6 @@ import {
|
||||
UseQueryResult,
|
||||
InfiniteData,
|
||||
} from "@tanstack/react-query";
|
||||
import { useAtom, useStore } from "jotai";
|
||||
import {
|
||||
getTemplates,
|
||||
getTemplateById,
|
||||
@@ -19,12 +18,6 @@ import { ITemplate } from "@/ee/template/types/template.types";
|
||||
import { IPagination } from "@/lib/types.ts";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { invalidateOnCreatePage } from "@/features/page/queries/page-query.ts";
|
||||
import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
|
||||
import { treeModel } from "@/features/page/tree/model/tree-model";
|
||||
import { SpaceTreeNode } from "@/features/page/tree/types.ts";
|
||||
import { IPage } from "@/features/page/types/page.types.ts";
|
||||
import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
|
||||
|
||||
export function useGetTemplatesQuery(params?: { spaceId?: string }) {
|
||||
const { spaceId } = params ?? {};
|
||||
@@ -156,64 +149,13 @@ export function useDeleteTemplateMutation() {
|
||||
|
||||
export function useUseTemplateMutation() {
|
||||
const { t } = useTranslation();
|
||||
const [, setTreeData] = useAtom(treeDataAtom);
|
||||
const store = useStore();
|
||||
const emit = useQueryEmit();
|
||||
|
||||
return useMutation<
|
||||
IPage,
|
||||
Error,
|
||||
{ templateId: string; spaceId: string; parentPageId?: string }
|
||||
>({
|
||||
mutationFn: (data) => useTemplate(data),
|
||||
onSuccess: (page) => {
|
||||
// React Query sidebar-pages cache update (same path useCreatePageMutation takes).
|
||||
invalidateOnCreatePage(page);
|
||||
|
||||
const parentId = page.parentPageId ?? null;
|
||||
const newNode: SpaceTreeNode = {
|
||||
id: page.id,
|
||||
slugId: page.slugId,
|
||||
name: page.title,
|
||||
icon: page.icon,
|
||||
position: page.position,
|
||||
spaceId: page.spaceId,
|
||||
parentPageId: page.parentPageId,
|
||||
hasChildren: false,
|
||||
children: [],
|
||||
};
|
||||
|
||||
// Only mutate the tree atom and broadcast if it currently represents
|
||||
// this space. Cross-space template-use (e.g., from the gallery picking
|
||||
// a different space) lets the target space's clients pick up the new
|
||||
// page on their next React Query refetch (focus, navigation, etc.).
|
||||
// Without this guard we'd both pollute the local tree and send a wrong
|
||||
// `index` to remote clients in the target space.
|
||||
const current = store.get(treeDataAtom);
|
||||
const treeIsForThisSpace = current[0]?.spaceId === page.spaceId;
|
||||
if (!treeIsForThisSpace) return;
|
||||
|
||||
const lastIndex =
|
||||
parentId === null
|
||||
? current.length
|
||||
: (treeModel.find(current, parentId)?.children?.length ?? 0);
|
||||
|
||||
setTreeData((prev) =>
|
||||
treeModel.insert(prev, parentId, newNode, lastIndex),
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
emit({
|
||||
operation: "addTreeNode",
|
||||
spaceId: page.spaceId,
|
||||
payload: {
|
||||
parentId,
|
||||
index: lastIndex,
|
||||
data: newNode,
|
||||
},
|
||||
});
|
||||
}, 50);
|
||||
},
|
||||
return useMutation({
|
||||
mutationFn: (data: {
|
||||
templateId: string;
|
||||
spaceId: string;
|
||||
parentPageId?: string;
|
||||
}) => useTemplate(data),
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import api from "@/lib/api-client";
|
||||
import { ITemplate } from "@/ee/template/types/template.types";
|
||||
import { IPage } from "@/features/page/types/page.types";
|
||||
import { IPagination } from "@/lib/types.ts";
|
||||
|
||||
export async function getTemplates(params?: {
|
||||
@@ -41,7 +40,7 @@ export async function useTemplate(data: {
|
||||
templateId: string;
|
||||
spaceId: string;
|
||||
parentPageId?: string;
|
||||
}): Promise<IPage> {
|
||||
const req = await api.post<IPage>("/templates/use", data);
|
||||
}): Promise<any> {
|
||||
const req = await api.post("/templates/use", data);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
import {
|
||||
Button,
|
||||
Group,
|
||||
Modal,
|
||||
MultiSelect,
|
||||
Stack,
|
||||
Switch,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { useForm } from "@mantine/form";
|
||||
import { zod4Resolver } from "mantine-form-zod-resolver";
|
||||
import { z } from "zod/v4";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useCreateWebhookMutation } from "@/ee/webhook/queries/webhook-query";
|
||||
import {
|
||||
EVENT_GROUPS,
|
||||
multiSelectData,
|
||||
} from "@/ee/webhook/lib/webhook-event-labels";
|
||||
import type { WebhookEvent } from "@/ee/webhook/types/webhook.types";
|
||||
|
||||
interface CreateWebhookModalProps {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess: (signingSecret: string) => void;
|
||||
}
|
||||
|
||||
const allowedEvents: WebhookEvent[] = EVENT_GROUPS.flatMap((g) => g.events);
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().min(1, "Name is required").max(100, "Name is too long"),
|
||||
url: z
|
||||
.string()
|
||||
.min(1, "URL is required")
|
||||
.refine(
|
||||
(value) => /^https?:\/\//i.test(value),
|
||||
"URL must start with http:// or https://",
|
||||
),
|
||||
subscribedEvents: z
|
||||
.array(z.enum(allowedEvents as [WebhookEvent, ...WebhookEvent[]]))
|
||||
.min(1, "Select at least one event"),
|
||||
isActive: z.boolean(),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export function CreateWebhookModal({
|
||||
opened,
|
||||
onClose,
|
||||
onSuccess,
|
||||
}: CreateWebhookModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const createWebhookMutation = useCreateWebhookMutation();
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
validate: zod4Resolver(formSchema),
|
||||
initialValues: {
|
||||
name: "",
|
||||
url: "",
|
||||
subscribedEvents: [],
|
||||
isActive: true,
|
||||
},
|
||||
});
|
||||
|
||||
const handleClose = () => {
|
||||
form.reset();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleSubmit = async (values: FormValues) => {
|
||||
try {
|
||||
const result = await createWebhookMutation.mutateAsync({
|
||||
name: values.name,
|
||||
url: values.url,
|
||||
subscribedEvents: values.subscribedEvents,
|
||||
isActive: values.isActive,
|
||||
});
|
||||
form.reset();
|
||||
onClose();
|
||||
onSuccess(result.signingSecret);
|
||||
} catch (_err) {
|
||||
// notification handled inside mutation
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={handleClose}
|
||||
title={t("Create webhook")}
|
||||
size="lg"
|
||||
>
|
||||
<form onSubmit={form.onSubmit(handleSubmit)}>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label={t("Name")}
|
||||
placeholder={t("e.g. Production alerts")}
|
||||
required
|
||||
data-autofocus
|
||||
{...form.getInputProps("name")}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label={t("URL")}
|
||||
placeholder="https://example.com/webhook"
|
||||
required
|
||||
{...form.getInputProps("url")}
|
||||
/>
|
||||
|
||||
<MultiSelect
|
||||
label={t("Events")}
|
||||
placeholder={t("Select events to subscribe to")}
|
||||
data={multiSelectData()}
|
||||
searchable
|
||||
clearable
|
||||
required
|
||||
{...form.getInputProps("subscribedEvents")}
|
||||
/>
|
||||
|
||||
<Switch
|
||||
label={t("Active")}
|
||||
description={t("Deliveries fire only when the webhook is active")}
|
||||
checked={form.values.isActive}
|
||||
onChange={(event) =>
|
||||
form.setFieldValue("isActive", event.currentTarget.checked)
|
||||
}
|
||||
/>
|
||||
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button variant="default" onClick={handleClose}>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button type="submit" loading={createWebhookMutation.isPending}>
|
||||
{t("Create")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,310 @@
|
||||
import { Fragment, useState } from "react";
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Button,
|
||||
Collapse,
|
||||
Drawer,
|
||||
Group,
|
||||
ScrollArea,
|
||||
Skeleton,
|
||||
Table,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconChevronDown,
|
||||
IconChevronRight,
|
||||
IconRefresh,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
useRedeliverMutation,
|
||||
useWebhookDeliveries,
|
||||
} from "@/ee/webhook/queries/webhook-query";
|
||||
import { formattedDate } from "@/lib/time";
|
||||
import NoTableResults from "@/components/common/no-table-results";
|
||||
import type {
|
||||
IWebhookDelivery,
|
||||
WebhookDeliveryStatus,
|
||||
} from "@/ee/webhook/types/webhook.types";
|
||||
|
||||
interface DeliveryDrawerProps {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
webhookId: string | null;
|
||||
}
|
||||
|
||||
function statusColor(status: WebhookDeliveryStatus): string {
|
||||
switch (status) {
|
||||
case "success":
|
||||
return "green";
|
||||
case "failed":
|
||||
return "red";
|
||||
case "pending":
|
||||
return "yellow";
|
||||
case "skipped_cooldown":
|
||||
case "skipped_inflight":
|
||||
case "skipped_disabled":
|
||||
default:
|
||||
return "gray";
|
||||
}
|
||||
}
|
||||
|
||||
function statusLabel(status: WebhookDeliveryStatus): string {
|
||||
switch (status) {
|
||||
case "skipped_cooldown":
|
||||
return "skipped (cooldown)";
|
||||
case "skipped_inflight":
|
||||
return "skipped (in-flight)";
|
||||
case "skipped_disabled":
|
||||
return "skipped (disabled)";
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
}
|
||||
|
||||
function canRedeliver(status: WebhookDeliveryStatus): boolean {
|
||||
return (
|
||||
status === "failed" ||
|
||||
status === "skipped_cooldown" ||
|
||||
status === "skipped_inflight" ||
|
||||
status === "skipped_disabled"
|
||||
);
|
||||
}
|
||||
|
||||
function DeliveryRow({
|
||||
delivery,
|
||||
expanded,
|
||||
onToggle,
|
||||
onRedeliver,
|
||||
isRedelivering,
|
||||
}: {
|
||||
delivery: IWebhookDelivery;
|
||||
expanded: boolean;
|
||||
onToggle: () => void;
|
||||
onRedeliver: () => void;
|
||||
isRedelivering: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Table.Tr style={{ cursor: "pointer" }} onClick={onToggle}>
|
||||
<Table.Td>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
{expanded ? (
|
||||
<IconChevronDown
|
||||
size={16}
|
||||
color="var(--mantine-color-dimmed)"
|
||||
/>
|
||||
) : (
|
||||
<IconChevronRight
|
||||
size={16}
|
||||
color="var(--mantine-color-dimmed)"
|
||||
/>
|
||||
)}
|
||||
<Text fz="sm" fw={500}>
|
||||
{delivery.event}
|
||||
</Text>
|
||||
</Group>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge color={statusColor(delivery.status)} variant="light">
|
||||
{statusLabel(delivery.status)}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text fz="sm">
|
||||
{delivery.httpStatus ?? "—"}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text fz="sm">
|
||||
{delivery.durationMs != null ? `${delivery.durationMs} ms` : "—"}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text fz="sm" style={{ whiteSpace: "nowrap" }}>
|
||||
{formattedDate(new Date(delivery.createdAt))}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
<Table.Td onClick={(e) => e.stopPropagation()}>
|
||||
{canRedeliver(delivery.status) ? (
|
||||
<Button
|
||||
size="compact-xs"
|
||||
variant="default"
|
||||
leftSection={<IconRefresh size={12} />}
|
||||
onClick={onRedeliver}
|
||||
loading={isRedelivering}
|
||||
>
|
||||
{t("Redeliver")}
|
||||
</Button>
|
||||
) : null}
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={6} p={0} style={{ border: "none" }}>
|
||||
<Collapse in={expanded}>
|
||||
<Box
|
||||
px="md"
|
||||
py="sm"
|
||||
style={{ background: "var(--mantine-color-gray-light)" }}
|
||||
>
|
||||
<Text fz="xs" fw={600} mb={4}>
|
||||
{t("Payload")}
|
||||
</Text>
|
||||
<Box
|
||||
component="pre"
|
||||
style={{
|
||||
fontSize: 11,
|
||||
margin: 0,
|
||||
padding: 8,
|
||||
background: "var(--mantine-color-body)",
|
||||
borderRadius: 4,
|
||||
overflowX: "auto",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
{JSON.stringify(delivery.payload, null, 2)}
|
||||
</Box>
|
||||
|
||||
{delivery.responseBody && (
|
||||
<>
|
||||
<Text fz="xs" fw={600} mt="sm" mb={4}>
|
||||
{t("Response body")}
|
||||
</Text>
|
||||
<Box
|
||||
component="pre"
|
||||
style={{
|
||||
fontSize: 11,
|
||||
margin: 0,
|
||||
padding: 8,
|
||||
background: "var(--mantine-color-body)",
|
||||
borderRadius: 4,
|
||||
overflowX: "auto",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
{delivery.responseBody}
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
|
||||
{delivery.errorMessage && (
|
||||
<>
|
||||
<Text fz="xs" fw={600} mt="sm" mb={4} c="red">
|
||||
{t("Error")}
|
||||
</Text>
|
||||
<Text fz="xs" c="red">
|
||||
{delivery.errorMessage}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Collapse>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export function DeliveryDrawer({
|
||||
opened,
|
||||
onClose,
|
||||
webhookId,
|
||||
}: DeliveryDrawerProps) {
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading } = useWebhookDeliveries(opened ? webhookId : null);
|
||||
const redeliverMutation = useRedeliverMutation(webhookId ?? undefined);
|
||||
const [expanded, setExpanded] = useState<Set<string>>(new Set());
|
||||
const [pendingId, setPendingId] = useState<string | null>(null);
|
||||
|
||||
const toggle = (id: string) => {
|
||||
setExpanded((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleRedeliver = async (deliveryId: string) => {
|
||||
setPendingId(deliveryId);
|
||||
try {
|
||||
await redeliverMutation.mutateAsync({ deliveryId });
|
||||
} catch (_err) {
|
||||
// notification handled inside mutation
|
||||
} finally {
|
||||
setPendingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
opened={opened}
|
||||
onClose={onClose}
|
||||
title={t("Recent deliveries")}
|
||||
position="right"
|
||||
size="xl"
|
||||
>
|
||||
<ScrollArea h="calc(100vh - 80px)">
|
||||
<Table verticalSpacing="xs" striped={false}>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>{t("Event")}</Table.Th>
|
||||
<Table.Th>{t("Status")}</Table.Th>
|
||||
<Table.Th>{t("HTTP")}</Table.Th>
|
||||
<Table.Th>{t("Duration")}</Table.Th>
|
||||
<Table.Th>{t("Timestamp")}</Table.Th>
|
||||
<Table.Th aria-label={t("Action")} />
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{isLoading ? (
|
||||
Array.from({ length: 6 }).map((_, i) => (
|
||||
<Table.Tr key={i}>
|
||||
<Table.Td>
|
||||
<Skeleton height={14} width={120} />
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Skeleton height={14} width={70} />
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Skeleton height={14} width={40} />
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Skeleton height={14} width={60} />
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Skeleton height={14} width={140} />
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Skeleton height={14} width={70} />
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))
|
||||
) : data && data.length > 0 ? (
|
||||
data.map((delivery) => (
|
||||
<DeliveryRow
|
||||
key={delivery.id}
|
||||
delivery={delivery}
|
||||
expanded={expanded.has(delivery.id)}
|
||||
onToggle={() => toggle(delivery.id)}
|
||||
onRedeliver={() => handleRedeliver(delivery.id)}
|
||||
isRedelivering={
|
||||
pendingId === delivery.id && redeliverMutation.isPending
|
||||
}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<NoTableResults colSpan={6} text={t("No deliveries yet")} />
|
||||
)}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Group,
|
||||
Modal,
|
||||
MultiSelect,
|
||||
PasswordInput,
|
||||
Stack,
|
||||
Switch,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import { useForm } from "@mantine/form";
|
||||
import { zod4Resolver } from "mantine-form-zod-resolver";
|
||||
import { z } from "zod/v4";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
useRotateSecretMutation,
|
||||
useSendTestMutation,
|
||||
useUpdateWebhookMutation,
|
||||
useWebhook,
|
||||
} from "@/ee/webhook/queries/webhook-query";
|
||||
import {
|
||||
EVENT_GROUPS,
|
||||
multiSelectData,
|
||||
} from "@/ee/webhook/lib/webhook-event-labels";
|
||||
import type { WebhookEvent } from "@/ee/webhook/types/webhook.types";
|
||||
import { WebhookSecretModal } from "@/ee/webhook/components/webhook-secret-modal";
|
||||
|
||||
interface EditWebhookModalProps {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
webhookId: string | null;
|
||||
}
|
||||
|
||||
const allowedEvents: WebhookEvent[] = EVENT_GROUPS.flatMap((g) => g.events);
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().min(1, "Name is required").max(100, "Name is too long"),
|
||||
url: z
|
||||
.string()
|
||||
.min(1, "URL is required")
|
||||
.refine(
|
||||
(value) => /^https?:\/\//i.test(value),
|
||||
"URL must start with http:// or https://",
|
||||
),
|
||||
subscribedEvents: z
|
||||
.array(z.enum(allowedEvents as [WebhookEvent, ...WebhookEvent[]]))
|
||||
.min(1, "Select at least one event"),
|
||||
isActive: z.boolean(),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export function EditWebhookModal({
|
||||
opened,
|
||||
onClose,
|
||||
webhookId,
|
||||
}: EditWebhookModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const { data: webhook, isLoading } = useWebhook(opened ? webhookId : null);
|
||||
const updateMutation = useUpdateWebhookMutation();
|
||||
const rotateMutation = useRotateSecretMutation();
|
||||
const sendTestMutation = useSendTestMutation();
|
||||
|
||||
const [revealedSecret, setRevealedSecret] = useState<string | null>(null);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
validate: zod4Resolver(formSchema),
|
||||
initialValues: {
|
||||
name: "",
|
||||
url: "",
|
||||
subscribedEvents: [],
|
||||
isActive: true,
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (opened && webhook) {
|
||||
form.setValues({
|
||||
name: webhook.name,
|
||||
url: webhook.url,
|
||||
subscribedEvents: webhook.subscribedEvents,
|
||||
isActive: webhook.isActive,
|
||||
});
|
||||
form.resetDirty();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [opened, webhook?.id]);
|
||||
|
||||
const handleClose = () => {
|
||||
form.reset();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleSubmit = async (values: FormValues) => {
|
||||
if (!webhookId) return;
|
||||
try {
|
||||
await updateMutation.mutateAsync({
|
||||
webhookId,
|
||||
name: values.name,
|
||||
url: values.url,
|
||||
subscribedEvents: values.subscribedEvents,
|
||||
isActive: values.isActive,
|
||||
});
|
||||
onClose();
|
||||
} catch (_err) {
|
||||
// notification handled inside mutation
|
||||
}
|
||||
};
|
||||
|
||||
const handleRotate = async () => {
|
||||
if (!webhookId) return;
|
||||
try {
|
||||
const result = await rotateMutation.mutateAsync({ webhookId });
|
||||
setRevealedSecret(result.signingSecret);
|
||||
} catch (_err) {
|
||||
// notification handled inside mutation
|
||||
}
|
||||
};
|
||||
|
||||
const handleSendTest = async () => {
|
||||
if (!webhookId) return;
|
||||
try {
|
||||
await sendTestMutation.mutateAsync({ webhookId });
|
||||
} catch (_err) {
|
||||
// notification handled inside mutation
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={handleClose}
|
||||
title={t("Edit webhook")}
|
||||
size="lg"
|
||||
>
|
||||
<form onSubmit={form.onSubmit(handleSubmit)}>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label={t("Name")}
|
||||
placeholder={t("e.g. Production alerts")}
|
||||
required
|
||||
disabled={isLoading}
|
||||
{...form.getInputProps("name")}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label={t("URL")}
|
||||
placeholder="https://example.com/webhook"
|
||||
required
|
||||
disabled={isLoading}
|
||||
{...form.getInputProps("url")}
|
||||
/>
|
||||
|
||||
<MultiSelect
|
||||
label={t("Events")}
|
||||
placeholder={t("Select events to subscribe to")}
|
||||
data={multiSelectData()}
|
||||
searchable
|
||||
clearable
|
||||
required
|
||||
disabled={isLoading}
|
||||
{...form.getInputProps("subscribedEvents")}
|
||||
/>
|
||||
|
||||
<Switch
|
||||
label={t("Active")}
|
||||
description={t(
|
||||
"Deliveries fire only when the webhook is active",
|
||||
)}
|
||||
checked={form.values.isActive}
|
||||
disabled={isLoading}
|
||||
onChange={(event) =>
|
||||
form.setFieldValue("isActive", event.currentTarget.checked)
|
||||
}
|
||||
/>
|
||||
|
||||
<Divider my="xs" />
|
||||
|
||||
<div>
|
||||
<Text size="sm" fw={500} mb="xs">
|
||||
{t("Signing secret")}
|
||||
</Text>
|
||||
<Group gap="xs" wrap="nowrap" align="flex-start">
|
||||
<PasswordInput
|
||||
value="dm_wh_••••••••••••••••••••••••••••••••"
|
||||
readOnly
|
||||
visible={false}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={handleRotate}
|
||||
loading={rotateMutation.isPending}
|
||||
>
|
||||
{t("Rotate")}
|
||||
</Button>
|
||||
</Group>
|
||||
<Text size="xs" c="dimmed" mt={4}>
|
||||
{t(
|
||||
"Rotating generates a new signing secret. The previous secret stops working immediately.",
|
||||
)}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Divider my="xs" />
|
||||
|
||||
<Group justify="space-between" mt="md">
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={handleSendTest}
|
||||
loading={sendTestMutation.isPending}
|
||||
>
|
||||
{t("Send test event")}
|
||||
</Button>
|
||||
|
||||
<Group>
|
||||
<Button variant="default" onClick={handleClose}>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button type="submit" loading={updateMutation.isPending}>
|
||||
{t("Save")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<WebhookSecretModal
|
||||
opened={!!revealedSecret}
|
||||
onClose={() => setRevealedSecret(null)}
|
||||
secret={revealedSecret}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Code,
|
||||
Group,
|
||||
Modal,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { IconAlertTriangle } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import CopyTextButton from "@/components/common/copy";
|
||||
|
||||
interface WebhookSecretModalProps {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
secret: string | null;
|
||||
}
|
||||
|
||||
export function WebhookSecretModal({
|
||||
opened,
|
||||
onClose,
|
||||
secret,
|
||||
}: WebhookSecretModalProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!secret) return null;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={onClose}
|
||||
title={t("Save this signing secret")}
|
||||
size="lg"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Alert
|
||||
icon={<IconAlertTriangle size={16} />}
|
||||
title={t("Important")}
|
||||
color="red"
|
||||
>
|
||||
{t(
|
||||
"We won't show it again. Copy it now and store it somewhere safe. You can rotate it later if needed.",
|
||||
)}
|
||||
</Alert>
|
||||
|
||||
<div>
|
||||
<Text size="sm" fw={500} mb="xs">
|
||||
{t("Signing secret")}
|
||||
</Text>
|
||||
<Group gap="xs" wrap="nowrap" align="center">
|
||||
<Code
|
||||
block
|
||||
style={{
|
||||
flex: 1,
|
||||
wordBreak: "break-all",
|
||||
whiteSpace: "pre-wrap",
|
||||
}}
|
||||
>
|
||||
{secret}
|
||||
</Code>
|
||||
<CopyTextButton text={secret} />
|
||||
</Group>
|
||||
</div>
|
||||
|
||||
<Text size="sm" c="dimmed">
|
||||
{t(
|
||||
"Use this secret to verify the X-Docmost-Signature header on incoming webhook deliveries.",
|
||||
)}
|
||||
</Text>
|
||||
|
||||
<Button fullWidth onClick={onClose} mt="md">
|
||||
{t("I've saved my signing secret")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Anchor,
|
||||
Badge,
|
||||
Group,
|
||||
Menu,
|
||||
Skeleton,
|
||||
Table,
|
||||
Text,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { modals } from "@mantine/modals";
|
||||
import {
|
||||
IconDots,
|
||||
IconEdit,
|
||||
IconList,
|
||||
IconSend,
|
||||
IconTrash,
|
||||
} from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
useDeleteWebhookMutation,
|
||||
useSendTestMutation,
|
||||
} from "@/ee/webhook/queries/webhook-query";
|
||||
import { formattedDate } from "@/lib/time";
|
||||
import NoTableResults from "@/components/common/no-table-results";
|
||||
import type { IWebhook } from "@/ee/webhook/types/webhook.types";
|
||||
|
||||
interface WebhookTableProps {
|
||||
webhooks: IWebhook[] | undefined;
|
||||
isLoading: boolean;
|
||||
onEdit: (webhook: IWebhook) => void;
|
||||
onViewDeliveries: (webhook: IWebhook) => void;
|
||||
}
|
||||
|
||||
function truncate(value: string, max: number): string {
|
||||
if (value.length <= max) return value;
|
||||
return value.slice(0, max) + "…";
|
||||
}
|
||||
|
||||
function TableSkeleton() {
|
||||
return (
|
||||
<>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Table.Tr key={i}>
|
||||
<Table.Td>
|
||||
<Skeleton height={14} width={140} />
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Skeleton height={14} width={220} />
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Skeleton height={14} width={70} />
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Skeleton height={14} width={70} />
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Skeleton height={14} width={120} />
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Skeleton height={14} width={24} />
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function WebhookTable({
|
||||
webhooks,
|
||||
isLoading,
|
||||
onEdit,
|
||||
onViewDeliveries,
|
||||
}: WebhookTableProps) {
|
||||
const { t } = useTranslation();
|
||||
const deleteMutation = useDeleteWebhookMutation();
|
||||
const sendTestMutation = useSendTestMutation();
|
||||
|
||||
const handleDelete = (webhook: IWebhook) => {
|
||||
modals.openConfirmModal({
|
||||
title: t("Delete webhook"),
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t(
|
||||
"Are you sure you want to delete the webhook {{name}}? This action cannot be undone.",
|
||||
{ name: webhook.name },
|
||||
)}
|
||||
</Text>
|
||||
),
|
||||
labels: { confirm: t("Delete"), cancel: t("Cancel") },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () => {
|
||||
deleteMutation.mutate({ webhookId: webhook.id });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Table.ScrollContainer minWidth={760}>
|
||||
<Table highlightOnHover verticalSpacing="sm">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>{t("Name")}</Table.Th>
|
||||
<Table.Th>{t("URL")}</Table.Th>
|
||||
<Table.Th>{t("Events")}</Table.Th>
|
||||
<Table.Th>{t("Status")}</Table.Th>
|
||||
<Table.Th>{t("Created")}</Table.Th>
|
||||
<Table.Th aria-label={t("Action")} />
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
|
||||
<Table.Tbody>
|
||||
{isLoading ? (
|
||||
<TableSkeleton />
|
||||
) : webhooks && webhooks.length > 0 ? (
|
||||
webhooks.map((webhook) => (
|
||||
<Table.Tr key={webhook.id}>
|
||||
<Table.Td>
|
||||
<Anchor
|
||||
component="button"
|
||||
type="button"
|
||||
onClick={() => onEdit(webhook)}
|
||||
underline="never"
|
||||
style={{ color: "var(--mantine-color-text)" }}
|
||||
>
|
||||
<Text fz="sm" fw={500} lineClamp={1}>
|
||||
{webhook.name}
|
||||
</Text>
|
||||
</Anchor>
|
||||
</Table.Td>
|
||||
|
||||
<Table.Td>
|
||||
<Tooltip label={webhook.url} withArrow position="top-start">
|
||||
<Text fz="sm" c="dimmed" style={{ fontFamily: "monospace" }}>
|
||||
{truncate(webhook.url, 60)}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
</Table.Td>
|
||||
|
||||
<Table.Td>
|
||||
<Tooltip
|
||||
label={webhook.subscribedEvents.join(", ")}
|
||||
withArrow
|
||||
multiline
|
||||
w={280}
|
||||
>
|
||||
<Badge variant="light" color="blue">
|
||||
{t("{{count}} events", {
|
||||
count: webhook.subscribedEvents.length,
|
||||
})}
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
</Table.Td>
|
||||
|
||||
<Table.Td>
|
||||
<Badge
|
||||
color={webhook.isActive ? "green" : "gray"}
|
||||
variant="light"
|
||||
>
|
||||
{webhook.isActive ? t("Active") : t("Inactive")}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
|
||||
<Table.Td>
|
||||
<Text fz="sm" style={{ whiteSpace: "nowrap" }}>
|
||||
{formattedDate(new Date(webhook.createdAt))}
|
||||
</Text>
|
||||
</Table.Td>
|
||||
|
||||
<Table.Td>
|
||||
<Menu position="bottom-end" withinPortal>
|
||||
<Menu.Target>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
aria-label={t("Webhook menu")}
|
||||
>
|
||||
<IconDots size={16} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item
|
||||
leftSection={<IconEdit size={16} />}
|
||||
onClick={() => onEdit(webhook)}
|
||||
>
|
||||
{t("Edit")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconSend size={16} />}
|
||||
onClick={() =>
|
||||
sendTestMutation.mutate({ webhookId: webhook.id })
|
||||
}
|
||||
>
|
||||
{t("Send test event")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
leftSection={<IconList size={16} />}
|
||||
onClick={() => onViewDeliveries(webhook)}
|
||||
>
|
||||
{t("View deliveries")}
|
||||
</Menu.Item>
|
||||
<Menu.Divider />
|
||||
<Menu.Item
|
||||
leftSection={<IconTrash size={16} />}
|
||||
color="red"
|
||||
onClick={() => handleDelete(webhook)}
|
||||
>
|
||||
{t("Delete")}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))
|
||||
) : (
|
||||
<NoTableResults
|
||||
colSpan={6}
|
||||
text={t("No webhooks yet. Add one to start receiving events.")}
|
||||
/>
|
||||
)}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Table.ScrollContainer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import type { WebhookEvent } from "@/ee/webhook/types/webhook.types";
|
||||
|
||||
export const EVENT_GROUPS: { group: string; events: WebhookEvent[] }[] = [
|
||||
{
|
||||
group: "Pages",
|
||||
events: [
|
||||
"page.created",
|
||||
"page.updated",
|
||||
"page.moved",
|
||||
"page.deleted",
|
||||
"page.restored",
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "Comments",
|
||||
events: [
|
||||
"comment.created",
|
||||
"comment.updated",
|
||||
"comment.deleted",
|
||||
"comment.resolved",
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "Spaces",
|
||||
events: ["space.created", "space.updated", "space.deleted"],
|
||||
},
|
||||
{
|
||||
group: "Attachments",
|
||||
events: ["attachment.uploaded"],
|
||||
},
|
||||
{
|
||||
group: "Members",
|
||||
events: ["user.created", "user.deactivated"],
|
||||
},
|
||||
];
|
||||
|
||||
export const eventLabel = (event: string): string => event;
|
||||
|
||||
export const multiSelectData = () =>
|
||||
EVENT_GROUPS.map(({ group, events }) => ({
|
||||
group,
|
||||
items: events.map((e) => ({ value: e, label: e })),
|
||||
}));
|
||||
@@ -0,0 +1,108 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { Button, Group, Space } from "@mantine/core";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import SettingsTitle from "@/components/settings/settings-title";
|
||||
import { getAppName } from "@/lib/config";
|
||||
import Paginate from "@/components/common/paginate";
|
||||
import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
|
||||
import useUserRole from "@/hooks/use-user-role";
|
||||
import { useWebhooks } from "@/ee/webhook/queries/webhook-query";
|
||||
import { WebhookTable } from "@/ee/webhook/components/webhook-table";
|
||||
import { CreateWebhookModal } from "@/ee/webhook/components/create-webhook-modal";
|
||||
import { EditWebhookModal } from "@/ee/webhook/components/edit-webhook-modal";
|
||||
import { WebhookSecretModal } from "@/ee/webhook/components/webhook-secret-modal";
|
||||
import { DeliveryDrawer } from "@/ee/webhook/components/delivery-drawer";
|
||||
import type { IWebhook, IListWebhooksParams } from "@/ee/webhook/types/webhook.types";
|
||||
|
||||
export default function Webhooks() {
|
||||
const { t } = useTranslation();
|
||||
const { isAdmin } = useUserRole();
|
||||
const { cursor, goNext, goPrev } = useCursorPaginate();
|
||||
|
||||
const [createOpened, setCreateOpened] = useState(false);
|
||||
const [revealedSecret, setRevealedSecret] = useState<string | null>(null);
|
||||
const [editingWebhookId, setEditingWebhookId] = useState<string | null>(null);
|
||||
const [deliveryWebhookId, setDeliveryWebhookId] = useState<string | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const params: IListWebhooksParams = useMemo(
|
||||
() => ({ cursor, limit: 50 }),
|
||||
[cursor],
|
||||
);
|
||||
|
||||
const { data, isLoading } = useWebhooks(params);
|
||||
|
||||
if (!isAdmin) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleEdit = (webhook: IWebhook) => {
|
||||
setEditingWebhookId(webhook.id);
|
||||
};
|
||||
|
||||
const handleViewDeliveries = (webhook: IWebhook) => {
|
||||
setDeliveryWebhookId(webhook.id);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{t("Webhooks")} - {getAppName()}
|
||||
</title>
|
||||
</Helmet>
|
||||
|
||||
<SettingsTitle title={t("Webhooks")} />
|
||||
|
||||
<Group justify="flex-end" mb="md">
|
||||
<Button onClick={() => setCreateOpened(true)}>
|
||||
{t("Add webhook")}
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<WebhookTable
|
||||
webhooks={data?.items}
|
||||
isLoading={isLoading}
|
||||
onEdit={handleEdit}
|
||||
onViewDeliveries={handleViewDeliveries}
|
||||
/>
|
||||
|
||||
<Space h="md" />
|
||||
|
||||
{data?.items && data.items.length > 0 && (
|
||||
<Paginate
|
||||
hasPrevPage={data?.meta?.hasPrevPage}
|
||||
hasNextPage={data?.meta?.hasNextPage}
|
||||
onNext={() => goNext(data?.meta?.nextCursor)}
|
||||
onPrev={goPrev}
|
||||
/>
|
||||
)}
|
||||
|
||||
<CreateWebhookModal
|
||||
opened={createOpened}
|
||||
onClose={() => setCreateOpened(false)}
|
||||
onSuccess={(signingSecret) => setRevealedSecret(signingSecret)}
|
||||
/>
|
||||
|
||||
<WebhookSecretModal
|
||||
opened={!!revealedSecret}
|
||||
onClose={() => setRevealedSecret(null)}
|
||||
secret={revealedSecret}
|
||||
/>
|
||||
|
||||
<EditWebhookModal
|
||||
opened={!!editingWebhookId}
|
||||
onClose={() => setEditingWebhookId(null)}
|
||||
webhookId={editingWebhookId}
|
||||
/>
|
||||
|
||||
<DeliveryDrawer
|
||||
opened={!!deliveryWebhookId}
|
||||
onClose={() => setDeliveryWebhookId(null)}
|
||||
webhookId={deliveryWebhookId}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
import {
|
||||
keepPreviousData,
|
||||
useMutation,
|
||||
useQuery,
|
||||
useQueryClient,
|
||||
UseQueryResult,
|
||||
} from "@tanstack/react-query";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
createWebhook,
|
||||
deleteWebhook,
|
||||
getWebhook,
|
||||
getWebhookDeliveries,
|
||||
getWebhooks,
|
||||
redeliverWebhook,
|
||||
rotateWebhookSecret,
|
||||
sendWebhookTest,
|
||||
updateWebhook,
|
||||
} from "@/ee/webhook/services/webhook-service";
|
||||
import {
|
||||
ICreateWebhook,
|
||||
IListWebhooksParams,
|
||||
IUpdateWebhook,
|
||||
IWebhook,
|
||||
IWebhookCreated,
|
||||
IWebhookDelivery,
|
||||
} from "@/ee/webhook/types/webhook.types";
|
||||
import { IPagination } from "@/lib/types";
|
||||
|
||||
const WEBHOOK_LIST_KEY = "webhook-list";
|
||||
const WEBHOOK_INFO_KEY = "webhook-info";
|
||||
const WEBHOOK_DELIVERIES_KEY = "webhook-deliveries";
|
||||
|
||||
export function useWebhooks(
|
||||
params?: IListWebhooksParams,
|
||||
): UseQueryResult<IPagination<IWebhook>, Error> {
|
||||
return useQuery({
|
||||
queryKey: [WEBHOOK_LIST_KEY, params],
|
||||
queryFn: () => getWebhooks(params),
|
||||
placeholderData: keepPreviousData,
|
||||
});
|
||||
}
|
||||
|
||||
export function useWebhook(
|
||||
webhookId: string | null | undefined,
|
||||
): UseQueryResult<IWebhook, Error> {
|
||||
return useQuery({
|
||||
queryKey: [WEBHOOK_INFO_KEY, webhookId],
|
||||
queryFn: () => getWebhook(webhookId as string),
|
||||
enabled: !!webhookId,
|
||||
});
|
||||
}
|
||||
|
||||
export function useWebhookDeliveries(
|
||||
webhookId: string | null | undefined,
|
||||
): UseQueryResult<IWebhookDelivery[], Error> {
|
||||
return useQuery({
|
||||
queryKey: [WEBHOOK_DELIVERIES_KEY, webhookId],
|
||||
queryFn: () => getWebhookDeliveries(webhookId as string),
|
||||
enabled: !!webhookId,
|
||||
});
|
||||
}
|
||||
|
||||
function invalidateLists(queryClient: ReturnType<typeof useQueryClient>) {
|
||||
queryClient.invalidateQueries({
|
||||
predicate: (item) => item.queryKey[0] === WEBHOOK_LIST_KEY,
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateWebhookMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<IWebhookCreated, Error, ICreateWebhook>({
|
||||
mutationFn: (data) => createWebhook(data),
|
||||
onSuccess: () => {
|
||||
notifications.show({ message: t("Webhook created") });
|
||||
invalidateLists(queryClient);
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({ message: errorMessage, color: "red" });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateWebhookMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<IWebhook, Error, IUpdateWebhook>({
|
||||
mutationFn: (data) => updateWebhook(data),
|
||||
onSuccess: (data) => {
|
||||
notifications.show({ message: t("Webhook updated") });
|
||||
invalidateLists(queryClient);
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [WEBHOOK_INFO_KEY, data.id],
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({ message: errorMessage, color: "red" });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteWebhookMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<{ success: boolean }, Error, { webhookId: string }>({
|
||||
mutationFn: ({ webhookId }) => deleteWebhook(webhookId),
|
||||
onSuccess: () => {
|
||||
notifications.show({ message: t("Webhook deleted") });
|
||||
invalidateLists(queryClient);
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({ message: errorMessage, color: "red" });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useRotateSecretMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<
|
||||
{ signingSecret: string },
|
||||
Error,
|
||||
{ webhookId: string }
|
||||
>({
|
||||
mutationFn: ({ webhookId }) => rotateWebhookSecret(webhookId),
|
||||
onSuccess: (_data, variables) => {
|
||||
notifications.show({ message: t("Signing secret rotated") });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [WEBHOOK_INFO_KEY, variables.webhookId],
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({ message: errorMessage, color: "red" });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useSendTestMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<{ deliveryId: string }, Error, { webhookId: string }>({
|
||||
mutationFn: ({ webhookId }) => sendWebhookTest(webhookId),
|
||||
onSuccess: (_data, variables) => {
|
||||
notifications.show({ message: t("Test event sent") });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [WEBHOOK_DELIVERIES_KEY, variables.webhookId],
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({ message: errorMessage, color: "red" });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useRedeliverMutation(webhookId?: string) {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return useMutation<{ deliveryId: string }, Error, { deliveryId: string }>({
|
||||
mutationFn: ({ deliveryId }) => redeliverWebhook(deliveryId),
|
||||
onSuccess: () => {
|
||||
notifications.show({ message: t("Redelivery queued") });
|
||||
if (webhookId) {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [WEBHOOK_DELIVERIES_KEY, webhookId],
|
||||
});
|
||||
} else {
|
||||
queryClient.invalidateQueries({
|
||||
predicate: (item) => item.queryKey[0] === WEBHOOK_DELIVERIES_KEY,
|
||||
});
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
const errorMessage = error["response"]?.data?.message;
|
||||
notifications.show({ message: errorMessage, color: "red" });
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import api from "@/lib/api-client";
|
||||
import { IPagination } from "@/lib/types";
|
||||
import {
|
||||
ICreateWebhook,
|
||||
IListWebhooksParams,
|
||||
IUpdateWebhook,
|
||||
IWebhook,
|
||||
IWebhookCreated,
|
||||
IWebhookDelivery,
|
||||
} from "@/ee/webhook/types/webhook.types";
|
||||
|
||||
export async function getWebhooks(
|
||||
params?: IListWebhooksParams,
|
||||
): Promise<IPagination<IWebhook>> {
|
||||
const req = await api.post("/webhooks", { ...params });
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getWebhook(webhookId: string): Promise<IWebhook> {
|
||||
const req = await api.post<IWebhook>("/webhooks/info", { webhookId });
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function createWebhook(
|
||||
data: ICreateWebhook,
|
||||
): Promise<IWebhookCreated> {
|
||||
const req = await api.post<IWebhookCreated>("/webhooks/create", data);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function updateWebhook(data: IUpdateWebhook): Promise<IWebhook> {
|
||||
const req = await api.post<IWebhook>("/webhooks/update", data);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function deleteWebhook(
|
||||
webhookId: string,
|
||||
): Promise<{ success: boolean }> {
|
||||
const req = await api.post("/webhooks/delete", { webhookId });
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function rotateWebhookSecret(
|
||||
webhookId: string,
|
||||
): Promise<{ signingSecret: string }> {
|
||||
const req = await api.post<{ signingSecret: string }>(
|
||||
"/webhooks/rotate-secret",
|
||||
{ webhookId },
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function sendWebhookTest(
|
||||
webhookId: string,
|
||||
): Promise<{ deliveryId: string }> {
|
||||
const req = await api.post<{ deliveryId: string }>("/webhooks/test", {
|
||||
webhookId,
|
||||
});
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function getWebhookDeliveries(
|
||||
webhookId: string,
|
||||
limit?: number,
|
||||
): Promise<IWebhookDelivery[]> {
|
||||
const req = await api.post<IWebhookDelivery[]>("/webhooks/deliveries", {
|
||||
webhookId,
|
||||
limit,
|
||||
});
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function redeliverWebhook(
|
||||
deliveryId: string,
|
||||
): Promise<{ deliveryId: string }> {
|
||||
const req = await api.post<{ deliveryId: string }>(
|
||||
"/webhooks/deliveries/redeliver",
|
||||
{ deliveryId },
|
||||
);
|
||||
return req.data;
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
export type WebhookEvent =
|
||||
| "page.created"
|
||||
| "page.updated"
|
||||
| "page.moved"
|
||||
| "page.deleted"
|
||||
| "page.restored"
|
||||
| "comment.created"
|
||||
| "comment.updated"
|
||||
| "comment.deleted"
|
||||
| "comment.resolved"
|
||||
| "space.created"
|
||||
| "space.updated"
|
||||
| "space.deleted"
|
||||
| "attachment.uploaded"
|
||||
| "user.created"
|
||||
| "user.deactivated";
|
||||
|
||||
export type WebhookDeliveryStatus =
|
||||
| "pending"
|
||||
| "success"
|
||||
| "failed"
|
||||
| "skipped_cooldown"
|
||||
| "skipped_disabled"
|
||||
| "skipped_inflight";
|
||||
|
||||
export interface IWebhook {
|
||||
id: string;
|
||||
workspaceId: string;
|
||||
name: string;
|
||||
url: string;
|
||||
subscribedEvents: WebhookEvent[];
|
||||
isActive: boolean;
|
||||
consecutiveFailureCount: number;
|
||||
disabledAt: string | null;
|
||||
creatorId: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface IWebhookCreated extends IWebhook {
|
||||
signingSecret: string;
|
||||
}
|
||||
|
||||
export interface IWebhookDelivery {
|
||||
id: string;
|
||||
webhookId: string;
|
||||
event: string;
|
||||
payload: Record<string, unknown>;
|
||||
status: WebhookDeliveryStatus;
|
||||
httpStatus: number | null;
|
||||
responseBody: string | null;
|
||||
errorMessage: string | null;
|
||||
attemptCount: number;
|
||||
durationMs: number | null;
|
||||
deliveredAt: string | null;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface ICreateWebhook {
|
||||
name: string;
|
||||
url: string;
|
||||
subscribedEvents: WebhookEvent[];
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
export interface IUpdateWebhook {
|
||||
webhookId: string;
|
||||
name?: string;
|
||||
url?: string;
|
||||
subscribedEvents?: WebhookEvent[];
|
||||
isActive?: boolean;
|
||||
}
|
||||
|
||||
export interface IListWebhooksParams {
|
||||
cursor?: string;
|
||||
limit?: number;
|
||||
}
|
||||
@@ -20,7 +20,7 @@ export function AuthLayout({ children }: AuthLayoutProps) {
|
||||
Docmost
|
||||
</Text>
|
||||
</Group>
|
||||
<main>{children}</main>
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -103,11 +103,6 @@ export function InviteSignUpForm() {
|
||||
placeholder={t("Your password")}
|
||||
variant="filled"
|
||||
mt="md"
|
||||
visibilityToggleButtonProps={{
|
||||
"aria-label": t("Toggle password visibility"),
|
||||
"aria-hidden": false,
|
||||
tabIndex: 0,
|
||||
}}
|
||||
{...form.getInputProps("password")}
|
||||
/>
|
||||
<Button type="submit" fullWidth mt="xl" loading={isLoading}>
|
||||
|
||||
@@ -54,13 +54,6 @@ export function LoginForm() {
|
||||
await signIn(data);
|
||||
}
|
||||
|
||||
function handleValidationFailure(errors: Record<string, unknown>) {
|
||||
const firstInvalidId = Object.keys(errors)[0];
|
||||
if (firstInvalidId) {
|
||||
document.getElementById(firstInvalidId)?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
if (isDataLoading) {
|
||||
return null;
|
||||
}
|
||||
@@ -73,7 +66,7 @@ export function LoginForm() {
|
||||
<AuthLayout>
|
||||
<Container size={420} className={classes.container}>
|
||||
<Box p="xl" className={classes.containerBox}>
|
||||
<Title order={1} size="h2" ta="center" fw={500} mb="md">
|
||||
<Title order={2} ta="center" fw={500} mb="md">
|
||||
{t("Login")}
|
||||
</Title>
|
||||
|
||||
@@ -81,31 +74,21 @@ export function LoginForm() {
|
||||
|
||||
{!data?.enforceSso && (
|
||||
<>
|
||||
<form onSubmit={form.onSubmit(onSubmit, handleValidationFailure)}>
|
||||
<form onSubmit={form.onSubmit(onSubmit)}>
|
||||
<TextInput
|
||||
id="email"
|
||||
type="email"
|
||||
label={t("Email")}
|
||||
placeholder="email@example.com"
|
||||
variant="filled"
|
||||
autoComplete="email"
|
||||
errorProps={{ role: "alert" }}
|
||||
{...form.getInputProps("email")}
|
||||
/>
|
||||
|
||||
<PasswordInput
|
||||
id="password"
|
||||
label={t("Password")}
|
||||
placeholder={t("Your password")}
|
||||
variant="filled"
|
||||
mt="md"
|
||||
autoComplete="current-password"
|
||||
errorProps={{ role: "alert" }}
|
||||
visibilityToggleButtonProps={{
|
||||
"aria-label": t("Toggle password visibility"),
|
||||
"aria-hidden": false,
|
||||
tabIndex: 0,
|
||||
}}
|
||||
{...form.getInputProps("password")}
|
||||
/>
|
||||
|
||||
|
||||
@@ -52,11 +52,6 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
|
||||
placeholder={t("Your new password")}
|
||||
variant="filled"
|
||||
mt="md"
|
||||
visibilityToggleButtonProps={{
|
||||
"aria-label": t("Toggle password visibility"),
|
||||
"aria-hidden": false,
|
||||
tabIndex: 0,
|
||||
}}
|
||||
{...form.getInputProps("newPassword")}
|
||||
/>
|
||||
|
||||
|
||||
@@ -98,11 +98,6 @@ export function SetupWorkspaceForm() {
|
||||
placeholder={t("Enter a strong password")}
|
||||
variant="filled"
|
||||
mt="md"
|
||||
visibilityToggleButtonProps={{
|
||||
"aria-label": t("Toggle password visibility"),
|
||||
"aria-hidden": false,
|
||||
tabIndex: 0,
|
||||
}}
|
||||
{...form.getInputProps("password")}
|
||||
/>
|
||||
<Button type="submit" fullWidth mt="xl" loading={isLoading}>
|
||||
|
||||
@@ -19,7 +19,6 @@ interface CommentEditorProps {
|
||||
editable: boolean;
|
||||
placeholder?: string;
|
||||
autofocus?: boolean;
|
||||
surface?: "default" | "muted";
|
||||
}
|
||||
|
||||
const CommentEditor = forwardRef(
|
||||
@@ -31,7 +30,6 @@ const CommentEditor = forwardRef(
|
||||
editable,
|
||||
placeholder,
|
||||
autofocus,
|
||||
surface,
|
||||
}: CommentEditorProps,
|
||||
ref,
|
||||
) => {
|
||||
@@ -68,9 +66,6 @@ const CommentEditor = forwardRef(
|
||||
}),
|
||||
],
|
||||
editorProps: {
|
||||
attributes: {
|
||||
"aria-label": placeholder || t("Comment"),
|
||||
},
|
||||
handleDOMEvents: {
|
||||
keydown: (_view, event) => {
|
||||
if (
|
||||
@@ -136,7 +131,6 @@ const CommentEditor = forwardRef(
|
||||
ref={focusRef}
|
||||
className={classes.commentEditor}
|
||||
data-editable={editable || undefined}
|
||||
data-surface={surface}
|
||||
>
|
||||
<EditorContent
|
||||
editor={commentEditor}
|
||||
|
||||
@@ -383,7 +383,6 @@ const PageCommentInput = ({ onSave, isLoading }) => {
|
||||
onSave={handleSave}
|
||||
editable={true}
|
||||
placeholder={t("Add a comment...")}
|
||||
surface="muted"
|
||||
/>
|
||||
</div>
|
||||
</Group>
|
||||
@@ -392,7 +391,6 @@ const PageCommentInput = ({ onSave, isLoading }) => {
|
||||
variant="filled"
|
||||
radius="xl"
|
||||
size="sm"
|
||||
aria-label={t("Send comment")}
|
||||
onClick={handleSave}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
loading={isLoading}
|
||||
|
||||
@@ -22,11 +22,6 @@
|
||||
|
||||
.commentEditor {
|
||||
|
||||
&[data-editable][data-surface="muted"] .ProseMirror:not(.focused) {
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
box-shadow: 0 0 0 1px light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-4));
|
||||
}
|
||||
|
||||
.focused {
|
||||
border-radius: var(--mantine-radius-sm);
|
||||
box-shadow: 0 0 0 2px var(--mantine-color-blue-3);
|
||||
|
||||
@@ -198,11 +198,7 @@ export default function DrawioView(props: NodeViewProps) {
|
||||
className={clsx(selected ? "ProseMirror-selectednode" : "")}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
color="gray"
|
||||
aria-label={t("Edit diagram")}
|
||||
>
|
||||
<ActionIcon variant="transparent" color="gray">
|
||||
<IconEdit size={18} />
|
||||
</ActionIcon>
|
||||
|
||||
|
||||
@@ -131,11 +131,7 @@ export default function EmbedView(props: NodeViewProps) {
|
||||
className={clsx(selected ? "ProseMirror-selectednode" : "")}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
color="gray"
|
||||
aria-label={t("Edit embed")}
|
||||
>
|
||||
<ActionIcon variant="transparent" color="gray">
|
||||
<IconEdit size={18} />
|
||||
</ActionIcon>
|
||||
|
||||
|
||||
@@ -44,11 +44,9 @@ function EmojiList({
|
||||
const [cats, setCats] = useState<EmojiCategory[]>([]);
|
||||
const [activeCat, setActiveCat] = useState("");
|
||||
const [focusZone, setFocusZone] = useState<"grid" | "tabs">("grid");
|
||||
const [announce, setAnnounce] = useState("");
|
||||
const listViewport = useRef<HTMLDivElement>(null);
|
||||
const gridViewport = useRef<HTMLDivElement>(null);
|
||||
const catBar = useRef<HTMLDivElement>(null);
|
||||
const userInteractedRef = useRef(false);
|
||||
|
||||
const searching = query.length > 0;
|
||||
const browseLoading = !searching && cats.length === 0;
|
||||
@@ -76,53 +74,6 @@ function EmojiList({
|
||||
vp?.querySelector<HTMLElement>(`[data-i="${idx}"]`)?.scrollIntoView({ block: "nearest" });
|
||||
}, [idx, searching, focusZone]);
|
||||
|
||||
// Announce picker open and selection changes via a live region. Focus
|
||||
// stays in the editor, so without this the screen reader has no way to
|
||||
// know the picker exists or that arrow keys are changing the selection.
|
||||
// The setTimeout defers the open message past the initial render so the
|
||||
// live region is in the DOM before its content changes (screen readers
|
||||
// ignore content that's present at mount time).
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setAnnounce(
|
||||
t("Emoji picker open. Use arrow keys to navigate, Enter to select."),
|
||||
);
|
||||
}, 100);
|
||||
return () => clearTimeout(timer);
|
||||
}, [t]);
|
||||
|
||||
useEffect(() => {
|
||||
// Skip data-driven updates (idx reset, async cat load); only announce
|
||||
// selection changes that come from real user navigation.
|
||||
if (!userInteractedRef.current) return;
|
||||
|
||||
if (focusZone === "tabs") {
|
||||
if (activeCat) setAnnounce(t("{{name}} category", { name: activeCat }));
|
||||
return;
|
||||
}
|
||||
if (searching) {
|
||||
const item = items[idx];
|
||||
if (item)
|
||||
setAnnounce(
|
||||
t("{{name}}, {{n}} of {{total}}", {
|
||||
name: item.id,
|
||||
n: idx + 1,
|
||||
total: items.length,
|
||||
}),
|
||||
);
|
||||
return;
|
||||
}
|
||||
const entry = gridItems[idx];
|
||||
if (entry)
|
||||
setAnnounce(
|
||||
t("{{name}}, {{n}} of {{total}}", {
|
||||
name: entry.id,
|
||||
n: idx + 1,
|
||||
total: gridItems.length,
|
||||
}),
|
||||
);
|
||||
}, [idx, activeCat, focusZone, searching, items, gridItems, t]);
|
||||
|
||||
const pickSearchItem = useCallback(
|
||||
(i: number) => {
|
||||
const item = items[i];
|
||||
@@ -143,13 +94,6 @@ function EmojiList({
|
||||
|
||||
useEffect(() => {
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (
|
||||
["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"].includes(
|
||||
e.key,
|
||||
)
|
||||
) {
|
||||
userInteractedRef.current = true;
|
||||
}
|
||||
if (searching) {
|
||||
if (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + 1, items.length - 1)); }
|
||||
else if (e.key === "ArrowUp") { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
|
||||
@@ -187,24 +131,6 @@ function EmojiList({
|
||||
role="listbox"
|
||||
aria-label={t("Emoji picker")}
|
||||
>
|
||||
<div
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: 1,
|
||||
height: 1,
|
||||
padding: 0,
|
||||
margin: -1,
|
||||
overflow: "hidden",
|
||||
clip: "rect(0,0,0,0)",
|
||||
whiteSpace: "nowrap",
|
||||
border: 0,
|
||||
}}
|
||||
>
|
||||
{announce}
|
||||
</div>
|
||||
{searching ? (
|
||||
<>
|
||||
{isLoading && <Loader m="xs" size="xs" color="blue" type="dots" />}
|
||||
@@ -245,7 +171,6 @@ function EmojiList({
|
||||
title={c.id}
|
||||
role="tab"
|
||||
aria-selected={isActive}
|
||||
aria-label={t("{{name}} category", { name: c.id })}
|
||||
className={clsx(classes.catTab, {
|
||||
[classes.catTabActive]: isActive,
|
||||
[classes.catTabFocused]: isFocused,
|
||||
@@ -265,9 +190,6 @@ function EmojiList({
|
||||
key={entry.id}
|
||||
data-i={i}
|
||||
title={`:${entry.id}:`}
|
||||
role="option"
|
||||
aria-selected={i === idx}
|
||||
aria-label={entry.id}
|
||||
className={clsx(classes.emojiBtn, { [classes.active]: i === idx })}
|
||||
onClick={() => pickGridItem(entry)}
|
||||
onMouseEnter={() => setIdx(i)}
|
||||
|
||||
@@ -240,11 +240,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
|
||||
className={clsx(selected ? "ProseMirror-selectednode" : "")}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
color="gray"
|
||||
aria-label={t("Edit drawing")}
|
||||
>
|
||||
<ActionIcon variant="transparent" color="gray">
|
||||
<IconEdit size={18} />
|
||||
</ActionIcon>
|
||||
|
||||
|
||||
@@ -149,13 +149,8 @@ export default function MathBlockView(props: NodeViewProps) {
|
||||
></Textarea>
|
||||
|
||||
<Flex justify="flex-end" align="flex-end">
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
color="red"
|
||||
aria-label={t("Delete equation")}
|
||||
onClick={() => props.deleteNode()}
|
||||
>
|
||||
<IconTrashX size={18} />
|
||||
<ActionIcon variant="light" color="red">
|
||||
<IconTrashX size={18} onClick={() => props.deleteNode()} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Stack>
|
||||
|
||||
@@ -3,7 +3,6 @@ import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
@@ -16,7 +15,6 @@ import {
|
||||
ScrollArea,
|
||||
Text,
|
||||
UnstyledButton,
|
||||
VisuallyHidden,
|
||||
} from "@mantine/core";
|
||||
import clsx from "clsx";
|
||||
import classes from "./mention.module.css";
|
||||
@@ -47,8 +45,6 @@ import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
|
||||
const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
||||
const [selectedIndex, setSelectedIndex] = useState(1);
|
||||
const viewportRef = useRef<HTMLDivElement>(null);
|
||||
const [countAnnouncement, setCountAnnouncement] = useState("");
|
||||
const [selectionAnnouncement, setSelectionAnnouncement] = useState("");
|
||||
const { pageSlug, spaceSlug } = useParams();
|
||||
const { data: page } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
|
||||
const { data: space } = useSpaceQuery(spaceSlug);
|
||||
@@ -186,45 +182,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
||||
setSelectedIndex(1);
|
||||
}, [suggestion]);
|
||||
|
||||
const selectableCount = useMemo(
|
||||
() => renderItems.filter((item) => item.entityType !== "header").length,
|
||||
[renderItems],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (renderItems.length === 0) {
|
||||
setCountAnnouncement(t("No results"));
|
||||
return;
|
||||
}
|
||||
setCountAnnouncement(
|
||||
t("{{count}} result available", { count: selectableCount }),
|
||||
);
|
||||
}, [renderItems.length, selectableCount, t]);
|
||||
|
||||
useEffect(() => {
|
||||
const item = renderItems[selectedIndex];
|
||||
if (!item || item.entityType === "header") {
|
||||
setSelectionAnnouncement("");
|
||||
return;
|
||||
}
|
||||
if (item.entityType === "user") {
|
||||
setSelectionAnnouncement(`${t("People")}: ${item.label}`);
|
||||
return;
|
||||
}
|
||||
if (item.entityType === "page") {
|
||||
if (item.id === null) {
|
||||
setSelectionAnnouncement(`${t("Create page")}: ${item.label}`);
|
||||
return;
|
||||
}
|
||||
const pageLabel = item.label || t("Untitled");
|
||||
setSelectionAnnouncement(
|
||||
item.spaceName
|
||||
? `${t("Pages")}: ${pageLabel}, ${item.spaceName}`
|
||||
: `${t("Pages")}: ${pageLabel}`,
|
||||
);
|
||||
}
|
||||
}, [selectedIndex, renderItems, t]);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
onKeyDown: ({ event }) => {
|
||||
if (event.key === "ArrowUp") {
|
||||
@@ -312,9 +269,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
||||
if (renderItems.length === 0) {
|
||||
return (
|
||||
<Paper id="mention" shadow="md" py="xs" withBorder radius="md">
|
||||
<VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
|
||||
{countAnnouncement}
|
||||
</VisuallyHidden>
|
||||
<Text c="dimmed" size="sm" px="sm">
|
||||
{t("No results")}
|
||||
</Text>
|
||||
@@ -341,12 +295,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
|
||||
aria-label={t("Mention suggestions")}
|
||||
aria-activedescendant={`mention-option-${selectedIndex}`}
|
||||
>
|
||||
<VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
|
||||
{countAnnouncement}
|
||||
</VisuallyHidden>
|
||||
<VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
|
||||
{selectionAnnouncement}
|
||||
</VisuallyHidden>
|
||||
<ScrollArea.Autosize
|
||||
viewportRef={viewportRef}
|
||||
mah={350}
|
||||
|
||||
@@ -10,7 +10,6 @@ import {
|
||||
ScrollArea,
|
||||
Text,
|
||||
UnstyledButton,
|
||||
VisuallyHidden,
|
||||
} from "@mantine/core";
|
||||
import classes from "./slash-menu.module.css";
|
||||
import clsx from "clsx";
|
||||
@@ -30,8 +29,6 @@ const CommandList = ({
|
||||
const { t } = useTranslation();
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const viewportRef = useRef<HTMLDivElement>(null);
|
||||
const [countAnnouncement, setCountAnnouncement] = useState("");
|
||||
const [selectionAnnouncement, setSelectionAnnouncement] = useState("");
|
||||
|
||||
const flatItems = useMemo(() => {
|
||||
return Object.values(items).flat();
|
||||
@@ -82,25 +79,6 @@ const CommandList = ({
|
||||
setSelectedIndex(0);
|
||||
}, [flatItems]);
|
||||
|
||||
useEffect(() => {
|
||||
if (flatItems.length === 0) {
|
||||
setCountAnnouncement("");
|
||||
return;
|
||||
}
|
||||
setCountAnnouncement(
|
||||
t("{{count}} command available", { count: flatItems.length }),
|
||||
);
|
||||
}, [flatItems.length, t]);
|
||||
|
||||
useEffect(() => {
|
||||
const item = flatItems[selectedIndex];
|
||||
if (!item) {
|
||||
setSelectionAnnouncement("");
|
||||
return;
|
||||
}
|
||||
setSelectionAnnouncement(`${t(item.title)}, ${t(item.description)}`);
|
||||
}, [selectedIndex, flatItems, t]);
|
||||
|
||||
useEffect(() => {
|
||||
viewportRef.current
|
||||
?.querySelector(`[data-item-index="${selectedIndex}"]`)
|
||||
@@ -117,12 +95,6 @@ const CommandList = ({
|
||||
aria-label={t("Slash commands")}
|
||||
aria-activedescendant={`slash-command-option-${selectedIndex}`}
|
||||
>
|
||||
<VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
|
||||
{countAnnouncement}
|
||||
</VisuallyHidden>
|
||||
<VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
|
||||
{selectionAnnouncement}
|
||||
</VisuallyHidden>
|
||||
<ScrollArea
|
||||
viewportRef={viewportRef}
|
||||
h={350}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { TextSelection } from "@tiptap/pm/state";
|
||||
import React, { FC, useEffect, useRef, useState } from "react";
|
||||
import classes from "./table-of-contents.module.css";
|
||||
import clsx from "clsx";
|
||||
import { Box, Text, Title } from "@mantine/core";
|
||||
import { Box, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
type TableOfContentsProps = {
|
||||
@@ -156,9 +156,9 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
|
||||
return (
|
||||
<>
|
||||
{props.isShare && (
|
||||
<Title order={2} size="h6" mb="md" fw={500}>
|
||||
<Text mb="md" fw={500}>
|
||||
{t("Table of contents")}
|
||||
</Title>
|
||||
</Text>
|
||||
)}
|
||||
<div className={props.isShare ? classes.leftBorder : ""}>
|
||||
{links.map((item, idx) => (
|
||||
|
||||
@@ -416,9 +416,7 @@ const TEMPLATE_EXCLUDED_SLASH_ITEMS = new Set([
|
||||
"Video",
|
||||
"File attachment",
|
||||
"Draw.io (diagrams.net)",
|
||||
"Excalidraw (Whiteboard)",
|
||||
"Audio",
|
||||
"Synced block"
|
||||
"Excalidraw diagram",
|
||||
]);
|
||||
|
||||
const TemplateSlashCommand = Command.configure({
|
||||
|
||||
@@ -22,7 +22,7 @@ import { useTranslation } from "react-i18next";
|
||||
import { IContributor } from "@/features/page/types/page.types.ts";
|
||||
import { FixedToolbar } from "@/features/editor/components/fixed-toolbar/fixed-toolbar";
|
||||
import { PageEditMode } from "@/features/user/types/user.types.ts";
|
||||
import { useAsideTriggerProps } from "@/hooks/use-toggle-aside.tsx";
|
||||
import useToggleAside from "@/hooks/use-toggle-aside.tsx";
|
||||
import { DeletedPageBanner } from "@/features/page/trash/components/deleted-page-banner.tsx";
|
||||
import clsx from "clsx";
|
||||
import { currentPageEditModeAtom } from "@/features/editor/atoms/editor-atoms.ts";
|
||||
@@ -125,7 +125,7 @@ type PageBylineProps = {
|
||||
|
||||
function PageByline({ creator, contributors, readOnly }: PageBylineProps) {
|
||||
const { t } = useTranslation();
|
||||
const detailsTriggerProps = useAsideTriggerProps("details");
|
||||
const toggleAside = useToggleAside();
|
||||
|
||||
const otherContributors = (contributors ?? []).filter(
|
||||
(c) => c.id !== creator?.id,
|
||||
@@ -141,9 +141,7 @@ function PageByline({ creator, contributors, readOnly }: PageBylineProps) {
|
||||
{creator && (
|
||||
<Popover position="bottom-start" shadow="md" width={280} withArrow>
|
||||
<Popover.Target>
|
||||
<UnstyledButton
|
||||
aria-label={t("Created by {{name}}", { name: creator.name })}
|
||||
>
|
||||
<UnstyledButton>
|
||||
<Group gap={6}>
|
||||
<CustomAvatar
|
||||
avatarUrl={creator.avatarUrl}
|
||||
@@ -205,7 +203,7 @@ function PageByline({ creator, contributors, readOnly }: PageBylineProps) {
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
aria-label={t("Details")}
|
||||
{...detailsTriggerProps}
|
||||
onClick={() => toggleAside("details")}
|
||||
>
|
||||
<IconInfoCircle size={20} stroke={1.5} />
|
||||
</ActionIcon>
|
||||
|
||||
@@ -43,6 +43,7 @@ import {
|
||||
import CommentDialog from "@/features/comment/components/comment-dialog";
|
||||
import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
|
||||
import { ReadonlyBubbleMenu } from "@/features/editor/components/bubble-menu/readonly-bubble-menu";
|
||||
import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
|
||||
import TableMenu from "@/features/editor/components/table/table-menu.tsx";
|
||||
import { TableHandlesLayer } from "@/features/editor/components/table/handle/table-handles-layer";
|
||||
import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
|
||||
@@ -73,7 +74,6 @@ import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";
|
||||
import { EditorLinkMenu } from "@/features/editor/components/link/link-menu";
|
||||
import ColumnsMenu from "@/features/editor/components/columns/columns-menu.tsx";
|
||||
import { TransclusionLookupProvider } from "@/features/editor/components/transclusion/transclusion-lookup-context";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface PageEditorProps {
|
||||
pageId: string;
|
||||
@@ -88,7 +88,6 @@ export default function PageEditor({
|
||||
content,
|
||||
canComment,
|
||||
}: PageEditorProps) {
|
||||
const { t } = useTranslation();
|
||||
const collaborationURL = useCollaborationUrl();
|
||||
const isComponentMounted = useRef(false);
|
||||
const editorRef = useRef<Editor | null>(null);
|
||||
@@ -233,15 +232,20 @@ export default function PageEditor({
|
||||
editorProps: {
|
||||
scrollThreshold: 80,
|
||||
scrollMargin: 80,
|
||||
attributes: {
|
||||
"aria-label": t("Page content"),
|
||||
},
|
||||
handleDOMEvents: {
|
||||
keydown: (_view, event) => {
|
||||
if (platformModifierKey(event) && event.code === "KeyS") {
|
||||
event.preventDefault();
|
||||
return true;
|
||||
}
|
||||
if (event.key === "Tab") {
|
||||
const editor = editorRef.current;
|
||||
if (!editor) return false;
|
||||
event.preventDefault();
|
||||
return editor.view.someProp("handleKeyDown", (f) =>
|
||||
f(editor.view, event)
|
||||
);
|
||||
}
|
||||
if (platformModifierKey(event) && event.code === "KeyK") {
|
||||
searchSpotlight.open();
|
||||
return true;
|
||||
@@ -395,11 +399,6 @@ export default function PageEditor({
|
||||
immediatelyRender={true}
|
||||
extensions={mainExtensions}
|
||||
content={content}
|
||||
editorProps={{
|
||||
attributes: {
|
||||
"aria-label": t("Page content"),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="editor-container" style={{ position: "relative" }}>
|
||||
@@ -430,7 +429,9 @@ export default function PageEditor({
|
||||
{editor &&
|
||||
!editorIsEditable &&
|
||||
(editable || canComment) &&
|
||||
providersRef.current && <ReadonlyBubbleMenu editor={editor} />}
|
||||
providersRef.current && (
|
||||
<ReadonlyBubbleMenu editor={editor} />
|
||||
)}
|
||||
{showCommentPopup && (
|
||||
<CommentDialog editor={editor} pageId={pageId} />
|
||||
)}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.ProseMirror .is-editor-empty:first-child::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: var(--mantine-color-placeholder);
|
||||
color: #adb5bd;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
.ProseMirror .is-empty::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: var(--mantine-color-placeholder);
|
||||
color: #adb5bd;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
|
||||
|
||||
@@ -87,9 +87,6 @@ export function TitleEditor({
|
||||
immediatelyRender: true,
|
||||
shouldRerenderOnTransaction: false,
|
||||
editorProps: {
|
||||
attributes: {
|
||||
"aria-label": t("Page title"),
|
||||
},
|
||||
handleDOMEvents: {
|
||||
keydown: (_view, event) => {
|
||||
if (platformModifierKey(event) && event.code === "KeyS") {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { ActionIcon, Tooltip } from "@mantine/core";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { IconStar, IconStarFilled } from "@tabler/icons-react";
|
||||
import {
|
||||
useFavoriteIds,
|
||||
@@ -15,8 +14,6 @@ type StarButtonProps = {
|
||||
pageId?: string;
|
||||
spaceId?: string;
|
||||
templateId?: string;
|
||||
/** Name of the item being favorited, used to make the button's accessible name descriptive. */
|
||||
name?: string;
|
||||
size?: number;
|
||||
};
|
||||
|
||||
@@ -28,7 +25,7 @@ function getEntityId(props: StarButtonProps): string | undefined {
|
||||
}
|
||||
|
||||
export default function StarButton(props: StarButtonProps) {
|
||||
const { type, name, size = 18 } = props;
|
||||
const { type, size = 18 } = props;
|
||||
const { t } = useTranslation();
|
||||
const favoriteIds = useFavoriteIds(type);
|
||||
const addMutation = useAddFavoriteMutation();
|
||||
@@ -50,46 +47,22 @@ export default function StarButton(props: StarButtonProps) {
|
||||
};
|
||||
|
||||
if (isFavorited) {
|
||||
removeMutation.mutate(params, {
|
||||
onSuccess: () => {
|
||||
notifications.show({
|
||||
message: name
|
||||
? t("Removed {{name}} from favorites", { name })
|
||||
: t("Removed from favorites"),
|
||||
});
|
||||
},
|
||||
});
|
||||
removeMutation.mutate(params);
|
||||
} else {
|
||||
addMutation.mutate(params, {
|
||||
onSuccess: () => {
|
||||
notifications.show({
|
||||
message: name
|
||||
? t("Added {{name}} to favorites", { name })
|
||||
: t("Added to favorites"),
|
||||
});
|
||||
},
|
||||
});
|
||||
addMutation.mutate(params);
|
||||
}
|
||||
};
|
||||
|
||||
// Tooltip label stays short. Accessible name expands to include the item
|
||||
// so screen reader users can distinguish stars on different rows.
|
||||
const tooltipLabel = isFavorited
|
||||
const label = isFavorited
|
||||
? t("Remove from favorites")
|
||||
: t("Add to favorites");
|
||||
|
||||
const ariaLabel = name
|
||||
? isFavorited
|
||||
? t("Remove {{name}} from favorites", { name })
|
||||
: t("Add {{name}} to favorites", { name })
|
||||
: tooltipLabel;
|
||||
|
||||
return (
|
||||
<Tooltip label={tooltipLabel} openDelay={250} withArrow>
|
||||
<Tooltip label={label} openDelay={250} withArrow>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color={isFavorited ? "yellow" : "gray"}
|
||||
aria-label={ariaLabel}
|
||||
aria-label={label}
|
||||
aria-pressed={isFavorited}
|
||||
onClick={handleToggle}
|
||||
loading={isPending}
|
||||
|
||||
@@ -31,12 +31,7 @@ export default function AddGroupMemberModal() {
|
||||
<>
|
||||
<Button onClick={open}>{t("Add group members")}</Button>
|
||||
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
title={t("Add group members")}
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
<Modal opened={opened} onClose={close} title={t("Add group members")}>
|
||||
<Divider size="xs" mb="xs" />
|
||||
|
||||
<MultiUserSelect
|
||||
|
||||
@@ -58,7 +58,6 @@ export function CreateGroupForm() {
|
||||
label={t("Group name")}
|
||||
placeholder={t("e.g Developers")}
|
||||
variant="filled"
|
||||
data-autofocus
|
||||
{...form.getInputProps("name")}
|
||||
/>
|
||||
|
||||
|
||||
@@ -11,12 +11,7 @@ export default function CreateGroupModal() {
|
||||
<>
|
||||
<Button onClick={open}>{t("Create group")}</Button>
|
||||
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={close}
|
||||
title={t("Create group")}
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
<Modal opened={opened} onClose={close} title={t("Create group")}>
|
||||
<Divider size="xs" mb="xs" />
|
||||
<CreateGroupForm />
|
||||
</Modal>
|
||||
|
||||
@@ -9,7 +9,6 @@ import { z } from "zod/v4";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { zod4Resolver } from "mantine-form-zod-resolver";
|
||||
import { IGroup } from "@/features/group/types/group.types.ts";
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().min(2).max(100),
|
||||
@@ -19,16 +18,13 @@ const formSchema = z.object({
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
interface EditGroupFormProps {
|
||||
onClose?: () => void;
|
||||
group?: IGroup;
|
||||
}
|
||||
export function EditGroupForm({ onClose, group: groupProp }: EditGroupFormProps) {
|
||||
export function EditGroupForm({ onClose }: EditGroupFormProps) {
|
||||
const { t } = useTranslation();
|
||||
const updateGroupMutation = useUpdateGroupMutation();
|
||||
const { isSuccess } = updateGroupMutation;
|
||||
const { groupId: routeGroupId } = useParams();
|
||||
const groupId = groupProp?.id ?? routeGroupId;
|
||||
const { data: queriedGroup } = useGroupQuery(groupProp ? undefined : groupId);
|
||||
const group = groupProp ?? queriedGroup;
|
||||
const { groupId } = useParams();
|
||||
const { data: group } = useGroupQuery(groupId);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSuccess) {
|
||||
@@ -70,7 +66,6 @@ export function EditGroupForm({ onClose, group: groupProp }: EditGroupFormProps)
|
||||
label={t("Group name")}
|
||||
placeholder={t("e.g Developers")}
|
||||
variant="filled"
|
||||
data-autofocus
|
||||
{...form.getInputProps("name")}
|
||||
/>
|
||||
|
||||
|
||||
@@ -1,31 +1,23 @@
|
||||
import { Divider, Modal } from "@mantine/core";
|
||||
import { EditGroupForm } from "@/features/group/components/edit-group-form.tsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IGroup } from "@/features/group/types/group.types.ts";
|
||||
|
||||
interface EditGroupModalProps {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
group?: IGroup;
|
||||
}
|
||||
|
||||
export default function EditGroupModal({
|
||||
opened,
|
||||
onClose,
|
||||
group,
|
||||
}: EditGroupModalProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={onClose}
|
||||
title={t("Edit group")}
|
||||
closeButtonProps={{ "aria-label": t("Close") }}
|
||||
>
|
||||
<Modal opened={opened} onClose={onClose} title={t("Edit group")}>
|
||||
<Divider size="xs" mb="xs" />
|
||||
<EditGroupForm onClose={onClose} group={group} />
|
||||
<EditGroupForm onClose={onClose} />
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -10,28 +10,18 @@ import { useDisclosure } from "@mantine/hooks";
|
||||
import EditGroupModal from "@/features/group/components/edit-group-modal.tsx";
|
||||
import { modals } from "@mantine/modals";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IGroup } from "@/features/group/types/group.types.ts";
|
||||
|
||||
interface GroupActionMenuProps {
|
||||
group?: IGroup;
|
||||
}
|
||||
|
||||
export default function GroupActionMenu(props: GroupActionMenuProps = {}) {
|
||||
export default function GroupActionMenu() {
|
||||
const { t } = useTranslation();
|
||||
const { groupId: routeGroupId } = useParams();
|
||||
const groupId = props.group?.id ?? routeGroupId;
|
||||
const { data: queriedGroup } = useGroupQuery(props.group ? undefined : groupId);
|
||||
const group = props.group ?? queriedGroup;
|
||||
const { groupId } = useParams();
|
||||
const { data: group, isLoading } = useGroupQuery(groupId);
|
||||
const deleteGroupMutation = useDeleteGroupMutation();
|
||||
const navigate = useNavigate();
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
|
||||
const onDelete = async () => {
|
||||
await deleteGroupMutation.mutateAsync(groupId);
|
||||
// Only navigate away if we're currently viewing this group's detail page.
|
||||
if (routeGroupId === groupId) {
|
||||
navigate("/settings/groups");
|
||||
}
|
||||
navigate("/settings/groups");
|
||||
};
|
||||
|
||||
const openDeleteModal = () =>
|
||||
@@ -63,11 +53,7 @@ export default function GroupActionMenu(props: GroupActionMenuProps = {}) {
|
||||
arrowPosition="center"
|
||||
>
|
||||
<Menu.Target>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
aria-label={t("Group actions for {{name}}", { name: group.name })}
|
||||
>
|
||||
<ActionIcon variant="light" aria-label={t("Group menu")}>
|
||||
<IconDots size={20} stroke={2} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
@@ -90,7 +76,7 @@ export default function GroupActionMenu(props: GroupActionMenuProps = {}) {
|
||||
</>
|
||||
)}
|
||||
|
||||
<EditGroupModal opened={opened} onClose={close} group={group} />
|
||||
<EditGroupModal opened={opened} onClose={close} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user