mirror of
https://github.com/SigNoz/signoz.git
synced 2026-07-06 22:50:38 +01:00
Compare commits
6 Commits
fix/panel-
...
hotfix/iss
| Author | SHA1 | Date | |
|---|---|---|---|
|
b65a3fcd3a | ||
|
|
64d0ada495 | ||
|
|
60886fd906 | ||
|
|
d8954da307 | ||
|
|
7476a2cacb | ||
|
|
e1dd7d52eb |
@@ -25,6 +25,7 @@ You are operating within a constrained context window and strict system prompts.
|
||||
- Never create barrel files.
|
||||
- When writing new css, prefer CSS Modules
|
||||
- Use ./docs/css-modules-guide.md as reference on how to write good CSS Modules.
|
||||
- When writing code that could need authorization checks, read ./src/lib/authz/README.md
|
||||
|
||||
3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:
|
||||
- Run `pnpm tsgo --noEmit`
|
||||
|
||||
1
frontend/src/assets/Logos/cassandra.svg
Normal file
1
frontend/src/assets/Logos/cassandra.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#1287b1" viewBox="0 0 24 24"><title>Apache Cassandra</title><path d="M10.374 10.53a3 3 0 0 1-.428-.222l.555.143c0 .02-.01.036-.01.055l-.117.025zm-.283 1.506-.315.253.852-1.079-1.078.391c.002.017.009.033.009.05a.57.57 0 0 1-.184.42q.154.327.375.616a3.2 3.2 0 0 1 .34-.651zm.717-2.347-.652-.82a.43.43 0 0 1-.506.162c-.054.073-.083.162-.13.24l1.258.463zm-1.666.444c-.07.314-.087.637-.05.956a.57.57 0 0 1 .451.475l.946-.606c-.067-.022-.126-.06-.191-.088l-1.119-.08.64-.14a3.2 3.2 0 0 1-.668-.554zM20.1 11.648c-.164.202.833 1.022.833 1.022s-1.654-1.022-2.234-.72c-.278.144.574.811 1.175 1.242-.428-.274-.982-.571-1.175-.408-.328.277 1.565 2.549 1.565 2.549s-2.145-2.322-2.36-2.209c-.214.114.593 1.224.593 1.224s-1.06-1.16-1.35-.959c-.29.202 1.514 3.218 1.514 3.218s-1.956-3.091-2.763-2.574c1.268 2.782.795 3.18.795 3.18s-.162-2.839-1.742-2.764c-.795.038.379 2.12.379 2.12s-1.08-1.902-1.8-1.864c1.326 2.51.854 3.53.854 3.53s.219-2.143-1.58-3.336c.682.606-.427 3.336-.427 3.336s.976-4.023-.719-3.256c-.268.121-.019 2.007-.019 2.007s-.34-2.158-.851-2.045c-.298.066-1.893 2.99-1.893 2.99s1.306-3.16.908-3.027c-.29.096-.833 1.4-.833 1.4s.265-1.287 0-1.363c-.264-.075-1.74 1.363-1.74 1.363s1.097-1.287.908-1.552c-.287-.402-.623-.42-1.022-.265-.581.226-1.363 1.287-1.363 1.287s.78-1.074.643-1.476c-.219-.647-2.46 1.249-2.46 1.249s1.325-1.25 1.022-1.514c-.303-.265-1.947-.183-2.46-.185-1.515-.004-2.039-.36-2.498-.724 1.987.997 3.803-.151 6.094.494l.21.06c-1.3-.558-2.144-1.378-2.226-2.354-.036-.416.074-.827.297-1.222.619-.4 1.29-.773 2.06-1.095a4 4 0 0 0-.064.698c0 2.44 2.203 4.417 4.92 4.417s4.92-1.977 4.92-4.417c0-.45-.083-.881-.223-1.29 1.431.404 2.45.968 3.132 1.335.022.092.045.184.053.279.024.274-.018.547-.11.814.095-.147.198-.288.28-.445.367-.997 1.855.227 1.855.227s-1.085-.454-1.06-.24c.026.215 1.628.96 1.628.96s-1.45-.455-1.362-.114c.088.34 1.817 1.703 1.817 1.703s-1.956-1.489-2.12-1.287zm-7.268 2.65.042-.008-.06.01zM9.256 9.753c.12.13.26.234.396.343l.927-.029-1.064-.788c-.093.154-.195.303-.26.474Zm10.62 3.44c.3.215.54.373.54.373s-.24-.181-.54-.374zM7.507 8.617c-.14.229-.214.492-.215.76a3.99 3.99 0 0 0 2.358 3.64q0-.008.003-.014a3.2 3.2 0 0 1-.58-.788c-.648.099-.926-.794-.336-1.08a3.2 3.2 0 0 1 .138-1.388 3.16 3.16 0 0 1-.52-1.36q-.444.105-.848.23m1.488.82q.163-.36.402-.661a.435.435 0 0 1 .568-.557c.077-.059.166-.099.248-.15a16 16 0 0 0-1.727.284c.114.388.272.76.509 1.084m2.285 3.928c1.4 0 2.633-.723 3.344-1.816a3.4 3.4 0 0 0-1.265-.539l-.297-.023.916.9-1.197-.467.704 1.078-1.074-.832-.012.006.347 1.278-.596-1.134-.098 1.33-.401-1.326-.472 1.261.114-1.359-.015-.008-.814 1.154.286-1.067c-.34.322-.605.713-.781 1.146q.143.153.303.29.484.126 1.008.128m10.145-4.434c.971-.567 1.716-1.955 1.716-1.955s-1.893 1.955-3.205 1.665c1.186-.934 1.766-2.549 1.766-2.549s-1.506 2.325-2.448 2.423c1.086-.959 1.54-2.322 1.54-2.322s-1.237 1.817-2.196 1.944c1.287-1.161 1.338-1.893 1.338-1.893s-1.781 2.302-2.499 1.943c.858-.934 1.439-2.12 1.439-2.12s-1.489 2.019-1.893 1.69c-.277-.05.454-.958.454-.958s-.908.807-1.16.606c.454-.278 1.236-1.64 1.236-1.64S16 7.505 15.621 7.304l.731-1.483s-.73 1.483-1.715 1.23c.454-.58.63-1.112.63-1.112s-.756 1.213-1.69.885c-.22-.077.273-.635.273-.635s-.626.61-1.055.534c-.43-.076.025-.858.025-.858s-.757 1.186-.908 1.136.075-.833.075-.833-.555.908-.858.858 0-.934 0-.934-.328.984-.58.909c-.252-.076-.303-.656-.303-.656s-.068.788-.429.858c-2.725.53-5.728 1.69-9.489 5.45C3.887 10.738 5.3 7.91 11.962 7.659c5.044-.191 7.399 2.137 8.177 2.17C22.51 9.93 24 7.633 24 7.633s-1.489 1.716-2.574 1.3zm-7.74.872-.608.464v.001l.054.003a3.4 3.4 0 0 0 .554-.468m1.583-.426c0-.536-.237-.929-.594-1.217a3.2 3.2 0 0 1-.165.825.393.393 0 0 1-.328.681c-.154.233-.34.445-.549.63l.661.034-.995.237c-.025.018-.045.041-.07.058a3.2 3.2 0 0 1 1.536.691c.32-.574.504-1.235.504-1.94zM10.99 7.996a3.5 3.5 0 0 0-.785.46.43.43 0 0 1-.013.357l.885.643.023-.016-.36-1.262.627 1.12c.018-.006.04-.006.058-.011l-.02-1.251.398 1.163.477-1.15.016 1.268.012.007.713-1.005-.363 1.218.009.01 1.04-.69-.759 1.05.002.005.95-.34.041-.045a.395.395 0 0 1 .394-.632 3.4 3.4 0 0 0 .27-.784 14 14 0 0 0-2.798-.168c-.286.011-.55.033-.817.053"/></svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
1
frontend/src/assets/Logos/fluxcd.svg
Normal file
1
frontend/src/assets/Logos/fluxcd.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="48 -2.25 262.5 364"><defs><style>.cls-1{fill:#326ce5}.cls-3{fill:none}</style></defs><path d="M59.724 97.778a10.183 10.183 0 0 1 0-17.073l114.07-74.16a10.18 10.18 0 0 1 11.1 0l114.07 74.16a10.183 10.183 0 0 1 0 17.073l-114.07 74.16a10.18 10.18 0 0 1-11.1 0z" class="cls-1"/><path fill="#c1d2f7" d="M197.356 110.866h7.912a6.003 6.003 0 0 0 5.2-9.005l-25.924-44.902a6.004 6.004 0 0 0-10.399 0l-25.924 44.902a6.003 6.003 0 0 0 5.2 9.005h7.912a6.003 6.003 0 0 1 6.004 6.003v51.257l5.31 3.452a12.29 12.29 0 0 0 13.395 0l5.31-3.452v-51.257a6.003 6.003 0 0 1 6.004-6.003"/><path d="M173.793 353.271a10.1 10.1 0 0 0 3.457 1.402 119 119 0 0 0-6.623-3.46zm-6.456-161.195-11.316 7.356a111 111 0 0 0 11.316 6.6zm24.015 23.716c9.739 3.115 19.813 5.648 30.11 8.186 10.92 2.692 21.973 5.427 32.818 9.009l-35.416-23.025a216 216 0 0 1-27.512-9.41zm0 62.191v.586c0 2.57-2.688 4.652-6.003 4.652H173.34c-3.315 0-6.003-2.083-6.003-4.652v-6.605c-24.906-6.402-49.873-14.485-70.86-33.82l-14.529 9.445c22.468 22.05 50.28 28.933 79.715 36.189 27.178 6.698 55.18 13.651 78.685 33.442l14.68-9.544c-18.532-16.504-40.41-23.687-63.676-29.693M93.315 300.95l38.908 25.295c20.064 5.113 40.2 11.248 58.31 23.36l14.901-9.687c-19.752-13.672-42.55-19.313-66.419-25.197-15.287-3.767-30.835-7.616-45.7-13.771m74.022-82.254a124.3 124.3 0 0 1-21.534-12.62l-14.805 9.625a124.5 124.5 0 0 0 36.339 18.708zm51.41 16.294c-9.106-2.245-18.304-4.524-27.395-7.299v13.682q5.051 1.286 10.177 2.538c29.934 7.379 60.888 15.01 85.708 39.829.61.61 1.162 1.24 1.752 1.857l9.974-6.484a10.1 10.1 0 0 0 3.475-3.8 101 101 0 0 0-3.289-3.486c-22.585-22.585-50.669-29.508-80.402-36.837m-19.933 19.933q-3.722-.918-7.462-1.855v13.21c25.817 6.561 51.803 14.688 73.455 35.04l14.521-9.44-.11-.118c-22.586-22.585-50.67-29.509-80.404-36.837m-31.477-8.587c-16.28-5.278-32.118-12.397-46.344-24.131l-14.682 9.545c17.87 15.557 38.784 22.673 61.026 28.5z" class="cls-3"/><path d="M73.24 254.96c-.348-.348-.658-.71-1-1.06l-12.514 8.136a10 10 0 0 0-1.644 1.397c1.053 1.157 2.115 2.31 3.245 3.44 22.585 22.585 50.67 29.509 80.403 36.837 25.343 6.247 51.401 12.717 73.865 29.603l14.806-9.626c-20.865-16.42-45.53-22.509-71.453-28.898-29.934-7.379-60.888-15.01-85.708-39.83" class="cls-3"/><path d="m218.864 209.962-27.512-17.886v8.476a216 216 0 0 0 27.512 9.41m-27.512 5.83v11.9c9.091 2.774 18.289 5.053 27.395 7.298 29.733 7.329 57.817 14.252 80.402 36.837a101 101 0 0 1 3.29 3.486 10.193 10.193 0 0 0-3.476-13.277l-44.683-29.05c-10.845-3.58-21.898-6.316-32.818-9.008-10.297-2.538-20.371-5.071-30.11-8.186m-24.015-9.76a111 111 0 0 1-11.316-6.6l-10.218 6.644a124.3 124.3 0 0 0 21.534 12.62zm34.192 37.88q-5.125-1.264-10.177-2.539v11.695q3.737.938 7.462 1.855c29.733 7.328 57.818 14.252 80.403 36.837.039.039.073.079.111.118l9.66-6.28c-.589-.618-1.142-1.248-1.751-1.858-24.82-24.82-55.774-32.45-85.708-39.829m-34.192-9.503a124.5 124.5 0 0 1-36.34-18.708l-10.004 6.504c14.226 11.734 30.064 18.853 46.344 24.13zm0 25.842c-22.242-5.828-43.156-12.944-61.026-28.5l-9.834 6.392c20.987 19.336 45.954 27.42 70.86 33.821zm24.015 17.732c23.266 6.006 45.144 13.19 63.675 29.693l9.78-6.358c-21.652-20.352-47.638-28.479-73.455-35.04zM81.948 247.59l-9.707 6.311c.341.35.652.712 1 1.06 24.82 24.82 55.773 32.45 85.707 39.829 25.922 6.39 50.588 12.478 71.452 28.898l9.948-6.467c-23.505-19.791-51.507-26.744-78.685-33.442-29.436-7.256-57.247-14.138-79.715-36.189m-20.621 19.284c-1.13-1.13-2.192-2.283-3.245-3.44a10.154 10.154 0 0 0 1.644 15.68l33.589 21.837c14.865 6.155 30.413 10.004 45.7 13.771 23.869 5.884 46.667 11.525 66.419 25.197l10.16-6.605c-22.463-16.886-48.521-23.356-73.864-29.603-29.733-7.328-57.818-14.252-80.403-36.837m109.3 84.34a119 119 0 0 1 6.623 3.46 10.16 10.16 0 0 0 7.645-1.402l5.639-3.666c-18.11-12.112-38.247-18.247-58.311-23.36z" class="cls-1"/></svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
1
frontend/src/assets/Logos/planetscale.svg
Normal file
1
frontend/src/assets/Logos/planetscale.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><title>PlanetScale</title><path d="M0 12C0 5.373 5.373 0 12 0c4.873 0 9.067 2.904 10.947 7.077l-15.87 15.87a12 12 0 0 1-1.935-1.099L14.99 12H12l-8.485 8.485A11.96 11.96 0 0 1 0 12m12.004 12L24 12.004C23.998 18.628 18.628 23.998 12.004 24"/></svg>
|
||||
|
After Width: | Height: | Size: 326 B |
@@ -1,10 +1,11 @@
|
||||
import { ComponentType } from 'react';
|
||||
import { TabsProps } from 'antd';
|
||||
import { History } from 'history';
|
||||
|
||||
export type TabRoutes = {
|
||||
name: React.ReactNode;
|
||||
route: string;
|
||||
Component: () => JSX.Element;
|
||||
Component: ComponentType;
|
||||
key: string;
|
||||
};
|
||||
|
||||
|
||||
@@ -177,7 +177,13 @@ export default function ConversationView({
|
||||
conversationId={conversationId}
|
||||
messages={messages}
|
||||
isStreaming={isStreamingHere}
|
||||
onSendSuggestedPrompt={(text): void => handleSend(text)}
|
||||
onSendSuggestedPrompt={(text): void => {
|
||||
handleSend(
|
||||
text,
|
||||
undefined,
|
||||
autoContexts.length > 0 ? autoContexts : undefined,
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{showDisclaimer && (
|
||||
<div className={disclaimerClass} role="note" aria-live="polite">
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
import { MessageContext } from 'api/ai-assistant/chat';
|
||||
import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
|
||||
import { VariantContext } from 'container/AIAssistant/VariantContext';
|
||||
|
||||
const CHIP_ID = 'recent-errors';
|
||||
const CHIP_TEXT = 'Show me recent errors';
|
||||
|
||||
// Auto-derived page context that a normal (typed) send would attach. The chip
|
||||
// send must forward the exact same array.
|
||||
const mockAutoContexts: MessageContext[] = [
|
||||
{
|
||||
source: 'auto',
|
||||
type: 'dashboard',
|
||||
resourceId: 'dashboard-123',
|
||||
resourceName: 'Checkout dashboard',
|
||||
},
|
||||
];
|
||||
|
||||
jest.mock('api/common/logEvent', () => ({
|
||||
__esModule: true,
|
||||
default: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('container/AIAssistant/getAutoContexts', () => ({
|
||||
getAutoContexts: jest.fn(() => mockAutoContexts),
|
||||
}));
|
||||
|
||||
jest.mock('container/AIAssistant/hooks/useAIAssistantAnalyticsContext', () => ({
|
||||
normalizePage: (page: string): string => page,
|
||||
useAIAssistantAnalyticsContext: (): unknown => ({ threadId: 'thread-1' }),
|
||||
}));
|
||||
|
||||
// ChatInput is heavy and irrelevant here — the chip path lives entirely in the
|
||||
// empty state. Provide a lightweight stub plus the `autoContextKey` named export
|
||||
// ConversationView imports for its dismissed-context filter.
|
||||
jest.mock('container/AIAssistant/components/ChatInput', () => ({
|
||||
__esModule: true,
|
||||
default: (): JSX.Element => <div data-testid="chat-input" />,
|
||||
autoContextKey: (): string => '',
|
||||
}));
|
||||
|
||||
jest.mock('container/AIAssistant/components/ConversationSkeleton', () => ({
|
||||
__esModule: true,
|
||||
default: (): JSX.Element => <div data-testid="skeleton" />,
|
||||
}));
|
||||
|
||||
// VirtualizedMessages renders the real empty-state chips; stub only its
|
||||
// never-rendered-in-empty-state children and the virtual list.
|
||||
jest.mock('components/Noz/Noz', () => ({
|
||||
__esModule: true,
|
||||
default: (): JSX.Element => <div data-testid="noz" />,
|
||||
}));
|
||||
|
||||
jest.mock('container/AIAssistant/components/MessageBubble', () => ({
|
||||
__esModule: true,
|
||||
default: (): null => null,
|
||||
}));
|
||||
|
||||
jest.mock('container/AIAssistant/components/StreamingMessage', () => ({
|
||||
__esModule: true,
|
||||
default: (): null => null,
|
||||
}));
|
||||
|
||||
jest.mock('react-virtuoso', () => ({
|
||||
__esModule: true,
|
||||
Virtuoso: (): null => null,
|
||||
}));
|
||||
|
||||
jest.mock(
|
||||
'container/AIAssistant/components/VirtualizedMessages/useEmptyStateChips',
|
||||
() => ({
|
||||
useEmptyStateChips: (): { chips: { id: string; text: string }[] } => ({
|
||||
chips: [{ id: CHIP_ID, text: CHIP_TEXT }],
|
||||
}),
|
||||
}),
|
||||
);
|
||||
|
||||
// eslint-disable-next-line import/first
|
||||
import ConversationView from '../ConversationView';
|
||||
|
||||
const CONVERSATION_ID = 'conv-1';
|
||||
|
||||
function renderView(variant: 'panel' | 'page' | 'modal'): {
|
||||
getByTestId: (id: string) => HTMLElement;
|
||||
} {
|
||||
return render(
|
||||
<MemoryRouter initialEntries={['/dashboard/dashboard-123']}>
|
||||
<VariantContext.Provider value={variant}>
|
||||
<ConversationView conversationId={CONVERSATION_ID} />
|
||||
</VariantContext.Provider>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
}
|
||||
|
||||
describe('ConversationView — empty-state chip context', () => {
|
||||
let sendMessage: jest.Mock;
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
sendMessage = jest.fn();
|
||||
useAIAssistantStore.setState({
|
||||
conversations: {
|
||||
[CONVERSATION_ID]: {
|
||||
id: CONVERSATION_ID,
|
||||
messages: [],
|
||||
createdAt: 1,
|
||||
updatedAt: 1,
|
||||
},
|
||||
},
|
||||
streams: {},
|
||||
activeConversationId: CONVERSATION_ID,
|
||||
isLoadingThread: false,
|
||||
sendMessage,
|
||||
} as unknown as Partial<ReturnType<typeof useAIAssistantStore.getState>>);
|
||||
});
|
||||
|
||||
it('forwards the page auto-contexts when a chip is clicked (embedded variant)', () => {
|
||||
const { getByTestId } = renderView('panel');
|
||||
|
||||
fireEvent.click(getByTestId(`empty-state-chip-${CHIP_ID}`));
|
||||
|
||||
// The chip send must carry the same auto-contexts a typed message would.
|
||||
expect(sendMessage).toHaveBeenCalledTimes(1);
|
||||
expect(sendMessage).toHaveBeenCalledWith(
|
||||
CHIP_TEXT,
|
||||
undefined,
|
||||
mockAutoContexts,
|
||||
);
|
||||
});
|
||||
|
||||
it('sends undefined contexts on the standalone page (no page context to attach)', () => {
|
||||
const { getByTestId } = renderView('page');
|
||||
|
||||
fireEvent.click(getByTestId(`empty-state-chip-${CHIP_ID}`));
|
||||
|
||||
expect(sendMessage).toHaveBeenCalledTimes(1);
|
||||
expect(sendMessage).toHaveBeenCalledWith(CHIP_TEXT, undefined, undefined);
|
||||
});
|
||||
});
|
||||
@@ -1625,6 +1625,9 @@ export const getHostQueryPayload = (
|
||||
const diskPendingKey = dotMetricsEnabled
|
||||
? 'system.disk.pending_operations'
|
||||
: 'system_disk_pending_operations';
|
||||
const fsUsageKey = dotMetricsEnabled
|
||||
? 'system.filesystem.usage'
|
||||
: 'system_filesystem_usage';
|
||||
|
||||
return [
|
||||
{
|
||||
@@ -2657,6 +2660,155 @@ export const getHostQueryPayload = (
|
||||
start,
|
||||
end,
|
||||
},
|
||||
{
|
||||
selectedTime: 'GLOBAL_TIME',
|
||||
graphType: PANEL_TYPES.TIME_SERIES,
|
||||
query: {
|
||||
builder: {
|
||||
queryData: [
|
||||
{
|
||||
aggregateAttribute: {
|
||||
dataType: DataTypes.Float64,
|
||||
id: 'system_filesystem_usage--float64--Gauge--true',
|
||||
|
||||
key: fsUsageKey,
|
||||
type: 'Gauge',
|
||||
},
|
||||
aggregateOperator: 'avg',
|
||||
dataSource: DataSource.METRICS,
|
||||
disabled: true,
|
||||
expression: 'A',
|
||||
filters: {
|
||||
items: [
|
||||
{
|
||||
id: 'fs_f1',
|
||||
key: {
|
||||
dataType: DataTypes.String,
|
||||
id: 'host_name--string--tag--false',
|
||||
|
||||
key: hostNameKey,
|
||||
type: 'tag',
|
||||
},
|
||||
op: '=',
|
||||
value: hostName,
|
||||
},
|
||||
{
|
||||
id: 'fs_f2',
|
||||
key: {
|
||||
dataType: DataTypes.String,
|
||||
id: 'state--string--tag--false',
|
||||
|
||||
key: 'state',
|
||||
type: 'tag',
|
||||
},
|
||||
op: '=',
|
||||
value: 'used',
|
||||
},
|
||||
],
|
||||
op: 'AND',
|
||||
},
|
||||
functions: [],
|
||||
groupBy: [
|
||||
{
|
||||
dataType: DataTypes.String,
|
||||
id: 'mountpoint--string--tag--false',
|
||||
|
||||
key: 'mountpoint',
|
||||
type: 'tag',
|
||||
},
|
||||
],
|
||||
having: [
|
||||
{
|
||||
columnName: `SUM(${fsUsageKey})`,
|
||||
op: '>',
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
legend: '{{mountpoint}}',
|
||||
limit: null,
|
||||
orderBy: [],
|
||||
queryName: 'A',
|
||||
reduceTo: ReduceOperators.AVG,
|
||||
spaceAggregation: 'sum',
|
||||
stepInterval: 60,
|
||||
timeAggregation: 'avg',
|
||||
},
|
||||
{
|
||||
aggregateAttribute: {
|
||||
dataType: DataTypes.Float64,
|
||||
id: 'system_filesystem_usage--float64--Gauge--true',
|
||||
|
||||
key: fsUsageKey,
|
||||
type: 'Gauge',
|
||||
},
|
||||
aggregateOperator: 'avg',
|
||||
dataSource: DataSource.METRICS,
|
||||
disabled: true,
|
||||
expression: 'B',
|
||||
filters: {
|
||||
items: [
|
||||
{
|
||||
id: 'fs_f3',
|
||||
key: {
|
||||
dataType: DataTypes.String,
|
||||
id: 'host_name--string--tag--false',
|
||||
|
||||
key: hostNameKey,
|
||||
type: 'tag',
|
||||
},
|
||||
op: '=',
|
||||
value: hostName,
|
||||
},
|
||||
],
|
||||
op: 'AND',
|
||||
},
|
||||
functions: [],
|
||||
groupBy: [
|
||||
{
|
||||
dataType: DataTypes.String,
|
||||
id: 'mountpoint--string--tag--false',
|
||||
|
||||
key: 'mountpoint',
|
||||
type: 'tag',
|
||||
},
|
||||
],
|
||||
having: [
|
||||
{
|
||||
columnName: `SUM(${fsUsageKey})`,
|
||||
op: '>',
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
legend: '{{mountpoint}}',
|
||||
limit: null,
|
||||
orderBy: [],
|
||||
queryName: 'B',
|
||||
reduceTo: ReduceOperators.AVG,
|
||||
spaceAggregation: 'sum',
|
||||
stepInterval: 60,
|
||||
timeAggregation: 'avg',
|
||||
},
|
||||
],
|
||||
queryFormulas: [
|
||||
{
|
||||
disabled: false,
|
||||
expression: 'A/B',
|
||||
legend: '{{mountpoint}}',
|
||||
queryName: 'F1',
|
||||
},
|
||||
],
|
||||
queryTraceOperator: [],
|
||||
},
|
||||
clickhouse_sql: [{ disabled: false, legend: '', name: 'A', query: '' }],
|
||||
id: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
|
||||
promql: [{ disabled: false, legend: '', name: 'A', query: '' }],
|
||||
queryType: EQueryType.QUERY_BUILDER,
|
||||
},
|
||||
variables: {},
|
||||
formatForWeb: false,
|
||||
start,
|
||||
end,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
@@ -2732,4 +2884,5 @@ export const hostWidgetInfo = [
|
||||
{ title: 'System disk operations/s', yAxisUnit: 'short' },
|
||||
{ title: 'Queue size', yAxisUnit: 'short' },
|
||||
{ title: 'System disk operation time/s', yAxisUnit: 's' },
|
||||
{ title: 'Disk Usage (%) by mountpoint', yAxisUnit: 'percentunit' },
|
||||
];
|
||||
|
||||
@@ -20,6 +20,7 @@ import azureOpenaiUrl from '@/assets/Logos/azure-openai.svg';
|
||||
import azureSqlDatabaseMetricsUrl from '@/assets/Logos/azure-sql-database-metrics.svg';
|
||||
import azureVmUrl from '@/assets/Logos/azure-vm.svg';
|
||||
import basetenUrl from '@/assets/Logos/baseten.svg';
|
||||
import cassandraUrl from '@/assets/Logos/cassandra.svg';
|
||||
import celeryUrl from '@/assets/Logos/celery.svg';
|
||||
import certManagerUrl from '@/assets/Logos/cert-manager.svg';
|
||||
import claudeCodeUrl from '@/assets/Logos/claude-code.svg';
|
||||
@@ -51,6 +52,7 @@ import externalApiMonitoringUrl from '@/assets/Logos/external-api-monitoring.svg
|
||||
import fluentbitUrl from '@/assets/Logos/fluentbit.svg';
|
||||
import fluentdUrl from '@/assets/Logos/fluentd.svg';
|
||||
import flutterMonitoringUrl from '@/assets/Logos/flutter-monitoring.svg';
|
||||
import fluxcdUrl from '@/assets/Logos/fluxcd.svg';
|
||||
import flyIoUrl from '@/assets/Logos/fly-io.svg';
|
||||
import fromLogFileUrl from '@/assets/Logos/from-log-file.svg';
|
||||
import gcpAppEngineUrl from '@/assets/Logos/gcp-app-engine.svg';
|
||||
@@ -94,6 +96,7 @@ import langtraceUrl from '@/assets/Logos/langtrace.svg';
|
||||
import litellmUrl from '@/assets/Logos/litellm.svg';
|
||||
import livekitUrl from '@/assets/Logos/livekit.svg';
|
||||
import llamaindexUrl from '@/assets/Logos/llamaindex.svg';
|
||||
import llmMonitoringUrl from '@/assets/Logos/llm-monitoring.svg';
|
||||
import logrusUrl from '@/assets/Logos/logrus.svg';
|
||||
import logsUrl from '@/assets/Logos/logs.svg';
|
||||
import logstashUrl from '@/assets/Logos/logstash.svg';
|
||||
@@ -120,6 +123,7 @@ import opentelemetryUrl from '@/assets/Logos/opentelemetry.svg';
|
||||
import phpUrl from '@/assets/Logos/php.svg';
|
||||
import pinoUrl from '@/assets/Logos/pino.svg';
|
||||
import pipecatUrl from '@/assets/Logos/pipecat.svg';
|
||||
import planetscaleUrl from '@/assets/Logos/planetscale.svg';
|
||||
import postgresqlUrl from '@/assets/Logos/postgresql.svg';
|
||||
import prometheusUrl from '@/assets/Logos/prometheus.svg';
|
||||
import pydanticAiUrl from '@/assets/Logos/pydantic-ai.svg';
|
||||
@@ -1526,6 +1530,28 @@ const onboardingConfigWithLinks = [
|
||||
id: 'nginx-tracing',
|
||||
link: '/docs/instrumentation/opentelemetry-nginx/',
|
||||
},
|
||||
{
|
||||
dataSource: 'nginx-ingress-controller',
|
||||
label: 'NGINX Ingress Controller',
|
||||
imgUrl: nginxUrl,
|
||||
tags: ['infrastructure monitoring'],
|
||||
module: 'metrics',
|
||||
relatedSearchKeywords: [
|
||||
'ingress',
|
||||
'ingress controller',
|
||||
'kubernetes ingress',
|
||||
'monitoring',
|
||||
'nginx ingress',
|
||||
'nginx ingress controller',
|
||||
'nginx ingress metrics',
|
||||
'nginx ingress monitoring',
|
||||
'nginx ingress observability',
|
||||
'observability',
|
||||
'opentelemetry nginx ingress',
|
||||
],
|
||||
id: 'nginx-ingress-controller',
|
||||
link: '/docs/metrics-management/nginx-ingress-controller/',
|
||||
},
|
||||
{
|
||||
dataSource: 'opentelemetry-cloudflare',
|
||||
label: 'Cloudflare Tracing',
|
||||
@@ -1586,6 +1612,119 @@ const onboardingConfigWithLinks = [
|
||||
id: 'opentelemetry-cloudflare-logs',
|
||||
link: '/docs/logs-management/send-logs/cloudflare-logs/',
|
||||
},
|
||||
{
|
||||
dataSource: 'cloudflare-workers',
|
||||
label: 'Cloudflare Workers',
|
||||
imgUrl: cloudflareUrl,
|
||||
tags: ['apm/traces'],
|
||||
module: 'apm',
|
||||
relatedSearchKeywords: [
|
||||
'cloudflare',
|
||||
'cloudflare workers',
|
||||
'cloudflare workers monitoring',
|
||||
'cloudflare workers observability',
|
||||
'cloudflare workers otlp',
|
||||
'edge computing monitoring',
|
||||
'monitor cloudflare workers',
|
||||
'monitoring',
|
||||
'observability',
|
||||
'opentelemetry cloudflare workers',
|
||||
'otlp',
|
||||
'serverless monitoring',
|
||||
],
|
||||
id: 'cloudflare-workers',
|
||||
link: '/docs/integrations/outposts/cloudflare-workers/',
|
||||
},
|
||||
{
|
||||
dataSource: 'opentelemetry-cassandra',
|
||||
label: 'Cassandra',
|
||||
imgUrl: cassandraUrl,
|
||||
tags: ['database'],
|
||||
module: 'apm',
|
||||
relatedSearchKeywords: [
|
||||
'apache cassandra',
|
||||
'cassandra',
|
||||
'cassandra database',
|
||||
'cassandra logs',
|
||||
'cassandra metrics',
|
||||
'cassandra monitoring',
|
||||
'cassandra observability',
|
||||
'database',
|
||||
'monitoring',
|
||||
'nosql',
|
||||
'observability',
|
||||
'opentelemetry cassandra',
|
||||
],
|
||||
id: 'opentelemetry-cassandra',
|
||||
link: '/docs/integrations/opentelemetry-cassandra/',
|
||||
},
|
||||
{
|
||||
dataSource: 'fluxcd',
|
||||
label: 'FluxCD',
|
||||
imgUrl: fluxcdUrl,
|
||||
tags: ['infrastructure monitoring'],
|
||||
module: 'metrics',
|
||||
relatedSearchKeywords: [
|
||||
'continuous delivery',
|
||||
'flux',
|
||||
'fluxcd',
|
||||
'fluxcd dashboard',
|
||||
'fluxcd metrics',
|
||||
'fluxcd monitoring',
|
||||
'fluxcd observability',
|
||||
'gitops',
|
||||
'kubernetes',
|
||||
'monitoring',
|
||||
'observability',
|
||||
'opentelemetry fluxcd',
|
||||
],
|
||||
id: 'fluxcd',
|
||||
link: '/docs/metrics-management/fluxcd-metrics/',
|
||||
},
|
||||
{
|
||||
dataSource: 'planetscale',
|
||||
label: 'PlanetScale',
|
||||
imgUrl: planetscaleUrl,
|
||||
tags: ['database'],
|
||||
module: 'apm',
|
||||
relatedSearchKeywords: [
|
||||
'database',
|
||||
'monitoring',
|
||||
'mysql',
|
||||
'observability',
|
||||
'opentelemetry planetscale',
|
||||
'planetscale',
|
||||
'planetscale database',
|
||||
'planetscale metrics',
|
||||
'planetscale monitoring',
|
||||
'planetscale observability',
|
||||
'serverless database',
|
||||
],
|
||||
id: 'planetscale',
|
||||
link: '/docs/metrics-management/opentelemetry-planetscale/',
|
||||
},
|
||||
{
|
||||
dataSource: 'hermes-agent',
|
||||
label: 'Hermes Agent',
|
||||
imgUrl: llmMonitoringUrl,
|
||||
tags: ['LLM Monitoring'],
|
||||
module: 'apm',
|
||||
relatedSearchKeywords: [
|
||||
'ai agent monitoring',
|
||||
'hermes',
|
||||
'hermes agent',
|
||||
'hermes agent monitoring',
|
||||
'hermes agent observability',
|
||||
'hermes monitoring',
|
||||
'llm monitoring',
|
||||
'monitoring',
|
||||
'nous research',
|
||||
'observability',
|
||||
'opentelemetry hermes',
|
||||
],
|
||||
id: 'hermes-agent',
|
||||
link: '/docs/hermes-monitoring/',
|
||||
},
|
||||
{
|
||||
dataSource: 'convex-logs',
|
||||
label: 'Convex Logs',
|
||||
|
||||
21
frontend/src/lib/authz/README.md
Normal file
21
frontend/src/lib/authz/README.md
Normal file
@@ -0,0 +1,21 @@
|
||||
# AuthZ
|
||||
|
||||
Permission-based authorization system for SigNoz frontend.
|
||||
|
||||
## Supported Resources
|
||||
|
||||
See [hooks/useAuthZ/permissions.type.ts](./hooks/useAuthZ/permissions.type.ts) for available resources and verbs.
|
||||
|
||||
If your page/content represents a resource not listed there, skip authz implementation — the backend doesn't enforce it yet.
|
||||
|
||||
## UI Gating
|
||||
|
||||
Need to gate UI based on permissions? See [components/README.md](./components/README.md).
|
||||
|
||||
Covers: AuthZButton, AuthZTooltip, withAuthZ*, AuthZGuard*, when to use each.
|
||||
|
||||
## Testing
|
||||
|
||||
Need to test authz behavior? See [utils/README.md](./utils/README.md).
|
||||
|
||||
Covers: MSW handlers, mock hooks, test patterns.
|
||||
@@ -0,0 +1,81 @@
|
||||
import { ReactElement } from 'react';
|
||||
import { render, screen } from 'tests/test-utils';
|
||||
import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
|
||||
import type { AuthZObject } from 'lib/authz/hooks/useAuthZ/types';
|
||||
import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
|
||||
|
||||
import AuthZButton from './AuthZButton';
|
||||
|
||||
// AuthZButton is a thin composition over AuthZTooltip + Button. The denial
|
||||
// tooltip / disabled-on-deny UX is owned and tested by AuthZTooltip; here we
|
||||
// assert AuthZButton forwards the right props and renders a Button child.
|
||||
jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip');
|
||||
const mockTooltip = AuthZTooltip as unknown as jest.Mock;
|
||||
|
||||
const createPerm = buildPermission(
|
||||
'create',
|
||||
'serviceaccount:*' as AuthZObject<'create'>,
|
||||
);
|
||||
|
||||
describe('AuthZButton', () => {
|
||||
beforeEach(() => {
|
||||
mockTooltip.mockImplementation(
|
||||
({ children }: { children: ReactElement }) => children,
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
mockTooltip.mockReset();
|
||||
});
|
||||
|
||||
it('renders a Button child with forwarded props', () => {
|
||||
render(
|
||||
<AuthZButton checks={[createPerm]} testId="create-btn">
|
||||
Create
|
||||
</AuthZButton>,
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('create-btn')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('create-btn').tagName).toBe('BUTTON');
|
||||
});
|
||||
|
||||
it('forwards checks and enables the check by default', () => {
|
||||
render(
|
||||
<AuthZButton checks={[createPerm]} testId="create-btn">
|
||||
Create
|
||||
</AuthZButton>,
|
||||
);
|
||||
|
||||
expect(mockTooltip).toHaveBeenCalledTimes(1);
|
||||
expect(mockTooltip.mock.calls[0][0]).toMatchObject({
|
||||
checks: [createPerm],
|
||||
enabled: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('forwards a custom tooltipMessage', () => {
|
||||
render(
|
||||
<AuthZButton
|
||||
checks={[createPerm]}
|
||||
tooltipMessage="Ask an admin"
|
||||
testId="create-btn"
|
||||
>
|
||||
Create
|
||||
</AuthZButton>,
|
||||
);
|
||||
|
||||
expect(mockTooltip.mock.calls[0][0]).toMatchObject({
|
||||
tooltipMessage: 'Ask an admin',
|
||||
});
|
||||
});
|
||||
|
||||
it('passes authZEnabled through as the tooltip enabled flag', () => {
|
||||
render(
|
||||
<AuthZButton checks={[createPerm]} authZEnabled={false} testId="create-btn">
|
||||
Create
|
||||
</AuthZButton>,
|
||||
);
|
||||
|
||||
expect(mockTooltip.mock.calls[0][0]).toMatchObject({ enabled: false });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
import { Button, ButtonProps } from '@signozhq/ui/button';
|
||||
import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
|
||||
import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
|
||||
|
||||
export type AuthZButtonProps = ButtonProps & {
|
||||
/**
|
||||
* Permissions required to enable the button (AND semantics).
|
||||
*/
|
||||
checks: BrandedPermission[];
|
||||
/**
|
||||
* Override the default denial tooltip message.
|
||||
*/
|
||||
tooltipMessage?: string;
|
||||
/**
|
||||
* Gate the permission check itself. When false, renders a plain button.
|
||||
*/
|
||||
authZEnabled?: boolean;
|
||||
};
|
||||
|
||||
function AuthZButton({
|
||||
checks,
|
||||
tooltipMessage,
|
||||
authZEnabled = true,
|
||||
...buttonProps
|
||||
}: AuthZButtonProps): JSX.Element {
|
||||
return (
|
||||
<AuthZTooltip
|
||||
checks={checks}
|
||||
enabled={authZEnabled}
|
||||
tooltipMessage={tooltipMessage}
|
||||
>
|
||||
<Button {...buttonProps} />
|
||||
</AuthZTooltip>
|
||||
);
|
||||
}
|
||||
|
||||
export default AuthZButton;
|
||||
@@ -0,0 +1,202 @@
|
||||
import { render, screen, waitFor } from 'tests/test-utils';
|
||||
import { server } from 'mocks-server/server';
|
||||
import { rest } from 'msw';
|
||||
import {
|
||||
AUTHZ_CHECK_URL,
|
||||
setupAuthzAllow,
|
||||
setupAuthzDeny,
|
||||
} from 'lib/authz/utils/authz-test-utils';
|
||||
import type { AuthZObject } from 'lib/authz/hooks/useAuthZ/types';
|
||||
import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
|
||||
|
||||
import { AuthZGuard } from './AuthZGuard';
|
||||
import { AuthZGuardContent } from './AuthZGuardContent';
|
||||
import { AuthZGuardPage } from './AuthZGuardPage';
|
||||
|
||||
const readPerm = buildPermission('read', 'role:*' as AuthZObject<'read'>);
|
||||
|
||||
const Protected = (): JSX.Element => <div>Protected content</div>;
|
||||
|
||||
describe('AuthZGuard', () => {
|
||||
it('renders children when allowed', async () => {
|
||||
server.use(setupAuthzAllow(readPerm));
|
||||
|
||||
render(
|
||||
<AuthZGuard checks={[readPerm]}>
|
||||
<Protected />
|
||||
</AuthZGuard>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Protected content')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders the fallback when denied', async () => {
|
||||
server.use(setupAuthzDeny(readPerm));
|
||||
|
||||
render(
|
||||
<AuthZGuard checks={[readPerm]} fallback={<div>No access</div>}>
|
||||
<Protected />
|
||||
</AuthZGuard>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('No access')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('passes denied permissions to a function fallback', async () => {
|
||||
server.use(setupAuthzDeny(readPerm));
|
||||
|
||||
render(
|
||||
<AuthZGuard
|
||||
checks={[readPerm]}
|
||||
fallback={({ deniedPermissions }): JSX.Element => (
|
||||
<div>denied: {deniedPermissions.length}</div>
|
||||
)}
|
||||
>
|
||||
<Protected />
|
||||
</AuthZGuard>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('denied: 1')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders nothing for a denied check with no fallback', async () => {
|
||||
server.use(setupAuthzDeny(readPerm));
|
||||
|
||||
const { container } = render(
|
||||
<AuthZGuard checks={[readPerm]}>
|
||||
<Protected />
|
||||
</AuthZGuard>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
|
||||
});
|
||||
expect(container).toBeEmptyDOMElement();
|
||||
});
|
||||
|
||||
it('renders the loading fallback while checking', () => {
|
||||
server.use(setupAuthzAllow(readPerm));
|
||||
|
||||
render(
|
||||
<AuthZGuard checks={[readPerm]} fallbackOnLoading={<div>Loading…</div>}>
|
||||
<Protected />
|
||||
</AuthZGuard>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('Loading…')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('fails open on error by default (renders children)', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) =>
|
||||
res(ctx.status(500), ctx.json({ error: 'boom' })),
|
||||
),
|
||||
);
|
||||
|
||||
render(
|
||||
<AuthZGuard checks={[readPerm]} fallback={<div>No access</div>}>
|
||||
<Protected />
|
||||
</AuthZGuard>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Protected content')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders the fallback on error when failOpenOnError is false', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) =>
|
||||
res(ctx.status(500), ctx.json({ error: 'boom' })),
|
||||
),
|
||||
);
|
||||
|
||||
render(
|
||||
<AuthZGuard
|
||||
checks={[readPerm]}
|
||||
onFailRenderContent={false}
|
||||
fallback={<div>No access</div>}
|
||||
>
|
||||
<Protected />
|
||||
</AuthZGuard>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('No access')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('AuthZGuardPage', () => {
|
||||
it('renders the full-page denied screen when denied', async () => {
|
||||
server.use(setupAuthzDeny(readPerm));
|
||||
|
||||
render(
|
||||
<AuthZGuardPage checks={[readPerm]}>
|
||||
<Protected />
|
||||
</AuthZGuardPage>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
screen.getByText('Uh-oh! You are not authorized'),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.getByText('read:role:*')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the app loader while checking', () => {
|
||||
server.use(setupAuthzDeny(readPerm));
|
||||
|
||||
render(
|
||||
<AuthZGuardPage checks={[readPerm]}>
|
||||
<Protected />
|
||||
</AuthZGuardPage>,
|
||||
);
|
||||
|
||||
expect(
|
||||
screen.getByText(
|
||||
'OpenTelemetry-Native Logs, Metrics and Traces in a single pane',
|
||||
),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('AuthZGuardContent', () => {
|
||||
it('renders the denied callout when denied', async () => {
|
||||
server.use(setupAuthzDeny(readPerm));
|
||||
|
||||
render(
|
||||
<AuthZGuardContent checks={[readPerm]}>
|
||||
<Protected />
|
||||
</AuthZGuardContent>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('read:role:*')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders children when allowed', async () => {
|
||||
server.use(setupAuthzAllow(readPerm));
|
||||
|
||||
render(
|
||||
<AuthZGuardContent checks={[readPerm]}>
|
||||
<Protected />
|
||||
</AuthZGuardContent>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Protected content')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
82
frontend/src/lib/authz/components/AuthZGuard/AuthZGuard.tsx
Normal file
82
frontend/src/lib/authz/components/AuthZGuard/AuthZGuard.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import { ReactElement, ReactNode, useMemo } from 'react';
|
||||
import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
|
||||
import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
|
||||
|
||||
export type AuthZGuardFallback =
|
||||
| ReactNode
|
||||
| ((info: { deniedPermissions: BrandedPermission[] }) => ReactNode);
|
||||
|
||||
export type AuthZGuardProps = {
|
||||
/**
|
||||
* Permissions required to render `children` (AND semantics).
|
||||
*/
|
||||
checks: BrandedPermission[];
|
||||
children: ReactElement;
|
||||
/**
|
||||
* Rendered when denied. A function receives the denied permissions.
|
||||
*/
|
||||
fallback?: AuthZGuardFallback;
|
||||
fallbackOnLoading?: ReactNode;
|
||||
/**
|
||||
* By default, we don't expect the check API request to fail, in those cases, we prefer to show the content and then let the API fail (during list/create).
|
||||
*
|
||||
* In case you want to have a different behavior when request fail, set to false.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
onFailRenderContent?: boolean;
|
||||
};
|
||||
|
||||
function resolveFallback(
|
||||
fallback: AuthZGuardFallback | undefined,
|
||||
deniedPermissions: BrandedPermission[],
|
||||
): ReactNode {
|
||||
if (typeof fallback === 'function') {
|
||||
return fallback({ deniedPermissions });
|
||||
}
|
||||
return fallback ?? null;
|
||||
}
|
||||
|
||||
export function AuthZGuard({
|
||||
checks,
|
||||
children,
|
||||
fallback,
|
||||
fallbackOnLoading,
|
||||
onFailRenderContent = true,
|
||||
}: AuthZGuardProps): JSX.Element | null {
|
||||
const { isLoading, error, permissions } = useAuthZ(checks);
|
||||
|
||||
// TODO(authz): Use allowed/deniedPermissions from useAuthZ after devtools PR merges
|
||||
const { allowed, deniedPermissions } = useMemo(() => {
|
||||
if (!permissions) {
|
||||
return { allowed: false, deniedPermissions: [] as BrandedPermission[] };
|
||||
}
|
||||
|
||||
const denied = Object.entries(permissions)
|
||||
.filter(([, { isGranted }]) => !isGranted)
|
||||
.map(([perm]) => perm as BrandedPermission);
|
||||
|
||||
return {
|
||||
allowed: denied.length === 0,
|
||||
deniedPermissions: denied,
|
||||
};
|
||||
}, [permissions]);
|
||||
|
||||
if (isLoading) {
|
||||
return <>{fallbackOnLoading ?? null}</>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return onFailRenderContent ? (
|
||||
children
|
||||
) : (
|
||||
<>{resolveFallback(fallback, deniedPermissions)}</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!allowed) {
|
||||
return <>{resolveFallback(fallback, deniedPermissions)}</>;
|
||||
}
|
||||
|
||||
return children;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { ReactElement } from 'react';
|
||||
import PermissionDeniedCallout from 'lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout';
|
||||
|
||||
import { AuthZGuard, AuthZGuardProps } from './AuthZGuard';
|
||||
|
||||
export function AuthZGuardContent({
|
||||
fallback,
|
||||
...rest
|
||||
}: AuthZGuardProps): JSX.Element | null {
|
||||
return (
|
||||
<AuthZGuard
|
||||
{...rest}
|
||||
fallback={
|
||||
fallback ??
|
||||
(({ deniedPermissions }): ReactElement => (
|
||||
<PermissionDeniedCallout deniedPermissions={deniedPermissions} />
|
||||
))
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { ReactElement } from 'react';
|
||||
import AppLoading from 'components/AppLoading/AppLoading';
|
||||
import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
|
||||
|
||||
import { AuthZGuard, AuthZGuardProps } from './AuthZGuard';
|
||||
|
||||
export function AuthZGuardPage({
|
||||
fallback,
|
||||
fallbackOnLoading,
|
||||
...rest
|
||||
}: AuthZGuardProps): JSX.Element | null {
|
||||
return (
|
||||
<AuthZGuard
|
||||
{...rest}
|
||||
fallbackOnLoading={fallbackOnLoading ?? <AppLoading />}
|
||||
fallback={
|
||||
fallback ??
|
||||
(({ deniedPermissions }): ReactElement => (
|
||||
<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />
|
||||
))
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -16,6 +16,8 @@ const noPermissions = {
|
||||
isFetching: false,
|
||||
error: null,
|
||||
permissions: null,
|
||||
allowed: false,
|
||||
deniedPermissions: [] as BrandedPermission[],
|
||||
refetchPermissions: jest.fn(),
|
||||
};
|
||||
|
||||
@@ -160,11 +162,11 @@ describe('AuthZTooltip — multi-check (checks array)', () => {
|
||||
</AuthZTooltip>,
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button', { name: 'Action' })).toBeDisabled();
|
||||
const button = screen.getByRole('button', { name: 'Action' });
|
||||
expect(button).toBeDisabled();
|
||||
|
||||
const wrapper = screen.getByRole('button', { name: 'Action' }).parentElement;
|
||||
expect(wrapper?.getAttribute('data-denied-permissions')).toContain(sa);
|
||||
expect(wrapper?.getAttribute('data-denied-permissions')).toContain(
|
||||
expect(button.getAttribute('data-denied-permissions')).toContain(sa);
|
||||
expect(button.getAttribute('data-denied-permissions')).toContain(
|
||||
attachRolePerm,
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
.wrapper {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.errorContent {
|
||||
background: var(--callout-error-background) !important;
|
||||
border-color: var(--callout-error-border) !important;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ReactElement, cloneElement, useMemo } from 'react';
|
||||
import { CSSProperties, ReactElement, cloneElement, useMemo } from 'react';
|
||||
import {
|
||||
TooltipRoot,
|
||||
TooltipContent,
|
||||
@@ -11,6 +11,13 @@ import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
|
||||
import { useAppContext } from 'providers/App/App';
|
||||
import styles from './AuthZTooltip.module.scss';
|
||||
|
||||
const DISABLED_STYLE: CSSProperties = {
|
||||
pointerEvents: 'all',
|
||||
cursor: 'not-allowed',
|
||||
};
|
||||
|
||||
const noOp = (): void => {};
|
||||
|
||||
interface AuthZTooltipProps {
|
||||
checks: BrandedPermission[];
|
||||
children: ReactElement;
|
||||
@@ -49,11 +56,13 @@ function AuthZTooltip({
|
||||
}, [checks, permissions]);
|
||||
|
||||
if (shouldCheck && isLoading) {
|
||||
return (
|
||||
<span className={styles.wrapper}>
|
||||
{cloneElement(children, { disabled: true })}
|
||||
</span>
|
||||
);
|
||||
return cloneElement(children, {
|
||||
disabled: true,
|
||||
style: DISABLED_STYLE,
|
||||
onClick: noOp,
|
||||
onMouseDown: noOp,
|
||||
onPointerDown: noOp,
|
||||
});
|
||||
}
|
||||
|
||||
if (!shouldCheck || deniedPermissions.length === 0) {
|
||||
@@ -64,12 +73,14 @@ function AuthZTooltip({
|
||||
<TooltipProvider>
|
||||
<TooltipRoot>
|
||||
<TooltipTrigger asChild>
|
||||
<span
|
||||
className={styles.wrapper}
|
||||
data-denied-permissions={deniedPermissions.join(',')}
|
||||
>
|
||||
{cloneElement(children, { disabled: true })}
|
||||
</span>
|
||||
{cloneElement(children, {
|
||||
disabled: true,
|
||||
style: DISABLED_STYLE,
|
||||
onClick: noOp,
|
||||
onMouseDown: noOp,
|
||||
onPointerDown: noOp,
|
||||
'data-denied-permissions': deniedPermissions.join(','),
|
||||
})}
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className={styles.errorContent}>
|
||||
{formatDeniedMessage(deniedPermissions, user.id, tooltipMessage)}
|
||||
|
||||
@@ -1,263 +0,0 @@
|
||||
import { ReactElement } from 'react';
|
||||
import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
|
||||
import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
|
||||
import { server } from 'mocks-server/server';
|
||||
import { rest } from 'msw';
|
||||
import { render, screen, waitFor } from 'tests/test-utils';
|
||||
import {
|
||||
AUTHZ_CHECK_URL,
|
||||
authzMockResponse,
|
||||
} from 'lib/authz/utils/authz-test-utils';
|
||||
|
||||
import { GuardAuthZ } from './GuardAuthZ';
|
||||
|
||||
describe('GuardAuthZ', () => {
|
||||
const TestChild = (): ReactElement => <div>Protected Content</div>;
|
||||
const LoadingFallback = (): ReactElement => <div>Loading...</div>;
|
||||
const NoPermissionFallback = (_response: {
|
||||
requiredPermissionName: BrandedPermission;
|
||||
}): ReactElement => <div>Access denied</div>;
|
||||
const NoPermissionFallbackWithSuggestions = (response: {
|
||||
requiredPermissionName: BrandedPermission;
|
||||
}): ReactElement => (
|
||||
<div>
|
||||
Access denied. Required permission: {response.requiredPermissionName}
|
||||
</div>
|
||||
);
|
||||
|
||||
it('should render children when permission is granted', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
|
||||
}),
|
||||
);
|
||||
|
||||
render(
|
||||
<GuardAuthZ relation="read" object="role:*">
|
||||
<TestChild />
|
||||
</GuardAuthZ>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Protected Content')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should render fallbackOnLoading when loading', () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
|
||||
return res(
|
||||
ctx.delay('infinite'),
|
||||
ctx.status(200),
|
||||
ctx.json({ data: [], status: 'success' }),
|
||||
);
|
||||
}),
|
||||
);
|
||||
|
||||
render(
|
||||
<GuardAuthZ
|
||||
relation="read"
|
||||
object="role:*"
|
||||
fallbackOnLoading={<LoadingFallback />}
|
||||
>
|
||||
<TestChild />
|
||||
</GuardAuthZ>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('Loading...')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render null when loading and no fallbackOnLoading provided', () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
|
||||
return res(
|
||||
ctx.delay('infinite'),
|
||||
ctx.status(200),
|
||||
ctx.json({ data: [], status: 'success' }),
|
||||
);
|
||||
}),
|
||||
);
|
||||
|
||||
const { container } = render(
|
||||
<GuardAuthZ relation="read" object="role:*">
|
||||
<TestChild />
|
||||
</GuardAuthZ>,
|
||||
);
|
||||
|
||||
expect(container.firstChild).toBeNull();
|
||||
expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render children when API error occurs and no fallbackOnError provided (fail open)', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
|
||||
return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
|
||||
}),
|
||||
);
|
||||
|
||||
render(
|
||||
<GuardAuthZ relation="read" object="role:*">
|
||||
<TestChild />
|
||||
</GuardAuthZ>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Protected Content')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should render fallbackOnError when API error occurs and fallbackOnError is provided', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
|
||||
return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
|
||||
}),
|
||||
);
|
||||
|
||||
render(
|
||||
<GuardAuthZ
|
||||
relation="read"
|
||||
object="role:*"
|
||||
fallbackOnError={<div>Custom error fallback</div>}
|
||||
>
|
||||
<TestChild />
|
||||
</GuardAuthZ>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Custom error fallback')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render fallbackOnNoPermissions when permission is denied', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
|
||||
}),
|
||||
);
|
||||
|
||||
render(
|
||||
<GuardAuthZ
|
||||
relation="update"
|
||||
object="role:123"
|
||||
fallbackOnNoPermissions={NoPermissionFallback}
|
||||
>
|
||||
<TestChild />
|
||||
</GuardAuthZ>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Access denied')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render null when permission is denied and no fallbackOnNoPermissions provided', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
|
||||
}),
|
||||
);
|
||||
|
||||
const { container } = render(
|
||||
<GuardAuthZ relation="update" object="role:123">
|
||||
<TestChild />
|
||||
</GuardAuthZ>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(container.firstChild).toBeNull();
|
||||
});
|
||||
|
||||
expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render null when permissions object is null', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
|
||||
return res(ctx.status(200), ctx.json({ data: [], status: 'success' }));
|
||||
}),
|
||||
);
|
||||
|
||||
const { container } = render(
|
||||
<GuardAuthZ relation="read" object="role:*">
|
||||
<TestChild />
|
||||
</GuardAuthZ>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(container.firstChild).toBeNull();
|
||||
});
|
||||
|
||||
expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should pass requiredPermissionName to fallbackOnNoPermissions', async () => {
|
||||
const permission = buildPermission('update', 'role:123');
|
||||
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
|
||||
}),
|
||||
);
|
||||
|
||||
render(
|
||||
<GuardAuthZ
|
||||
relation="update"
|
||||
object="role:123"
|
||||
fallbackOnNoPermissions={NoPermissionFallbackWithSuggestions}
|
||||
>
|
||||
<TestChild />
|
||||
</GuardAuthZ>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
screen.getByText(/Access denied. Required permission:/),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
expect(
|
||||
screen.getAllByText(
|
||||
new RegExp(permission.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')),
|
||||
).length,
|
||||
).toBeGreaterThan(0);
|
||||
expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle different relation and object combinations', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
|
||||
}),
|
||||
);
|
||||
|
||||
const { rerender } = render(
|
||||
<GuardAuthZ relation="read" object="role:*">
|
||||
<TestChild />
|
||||
</GuardAuthZ>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Protected Content')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
rerender(
|
||||
<GuardAuthZ relation="delete" object="role:456">
|
||||
<TestChild />
|
||||
</GuardAuthZ>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Protected Content')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,50 +0,0 @@
|
||||
import { ReactElement } from 'react';
|
||||
import {
|
||||
AuthZObject,
|
||||
AuthZRelation,
|
||||
BrandedPermission,
|
||||
} from 'lib/authz/hooks/useAuthZ/types';
|
||||
import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
|
||||
import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
|
||||
|
||||
export type GuardAuthZProps<R extends AuthZRelation> = {
|
||||
children: ReactElement;
|
||||
relation: R;
|
||||
object: AuthZObject<R>;
|
||||
fallbackOnLoading?: JSX.Element;
|
||||
fallbackOnError?: JSX.Element;
|
||||
fallbackOnNoPermissions?: (response: {
|
||||
requiredPermissionName: BrandedPermission;
|
||||
}) => JSX.Element;
|
||||
};
|
||||
|
||||
export function GuardAuthZ<R extends AuthZRelation>({
|
||||
children,
|
||||
relation,
|
||||
object,
|
||||
fallbackOnLoading,
|
||||
fallbackOnError,
|
||||
fallbackOnNoPermissions,
|
||||
}: GuardAuthZProps<R>): JSX.Element | null {
|
||||
const permission = buildPermission<R>(relation, object);
|
||||
|
||||
const { permissions, isLoading, error } = useAuthZ([permission]);
|
||||
|
||||
if (isLoading) {
|
||||
return fallbackOnLoading ?? null;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return fallbackOnError ?? children;
|
||||
}
|
||||
|
||||
if (!permissions?.[permission]?.isGranted) {
|
||||
return (
|
||||
fallbackOnNoPermissions?.({
|
||||
requiredPermissionName: permission,
|
||||
}) ?? null
|
||||
);
|
||||
}
|
||||
|
||||
return children;
|
||||
}
|
||||
@@ -1,18 +1,39 @@
|
||||
import { render, screen } from 'tests/test-utils';
|
||||
import PermissionDeniedCallout from './PermissionDeniedCallout';
|
||||
import {
|
||||
buildPermission,
|
||||
buildObjectString,
|
||||
} from 'lib/authz/hooks/useAuthZ/utils';
|
||||
|
||||
describe('PermissionDeniedCallout', () => {
|
||||
it('renders the permission name in the callout message', () => {
|
||||
render(<PermissionDeniedCallout permissionName="serviceaccount:attach" />);
|
||||
const deniedPermissions = [
|
||||
buildPermission('read', buildObjectString('serviceaccount', '*')),
|
||||
];
|
||||
render(<PermissionDeniedCallout deniedPermissions={deniedPermissions} />);
|
||||
|
||||
expect(screen.getByText(/is not authorized/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/serviceaccount:attach/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/read:serviceaccount:\*/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders multiple denied permissions', () => {
|
||||
const deniedPermissions = [
|
||||
buildPermission('read', buildObjectString('serviceaccount', '*')),
|
||||
buildPermission('update', buildObjectString('role', 'admin')),
|
||||
];
|
||||
render(<PermissionDeniedCallout deniedPermissions={deniedPermissions} />);
|
||||
|
||||
expect(screen.getByText(/read:serviceaccount:\*/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/update:role:admin/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('accepts an optional className', () => {
|
||||
const deniedPermissions = [
|
||||
buildPermission('read', buildObjectString('serviceaccount', '*')),
|
||||
];
|
||||
const { container } = render(
|
||||
<PermissionDeniedCallout
|
||||
permissionName="serviceaccount:read"
|
||||
deniedPermissions={deniedPermissions}
|
||||
className="custom-class"
|
||||
/>,
|
||||
);
|
||||
|
||||
@@ -3,18 +3,32 @@ import cx from 'classnames';
|
||||
import styles from './PermissionDeniedCallout.module.scss';
|
||||
import { useAppContext } from 'providers/App/App';
|
||||
import { Typography } from '@signozhq/ui/typography';
|
||||
import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
|
||||
import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
|
||||
|
||||
interface PermissionDeniedCalloutProps {
|
||||
permissionName: string;
|
||||
export interface PermissionDeniedCalloutProps {
|
||||
/**
|
||||
* @deprecated Use `deniedPermissions` instead. Will be removed after authz devtools PR merges.
|
||||
*/
|
||||
permissionName?: string;
|
||||
deniedPermissions?: BrandedPermission[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function PermissionDeniedCallout({
|
||||
permissionName,
|
||||
deniedPermissions,
|
||||
className,
|
||||
}: PermissionDeniedCalloutProps): JSX.Element {
|
||||
const { user } = useAppContext();
|
||||
|
||||
// TODO(authz): Remove permissionName support after devtools PR merges
|
||||
const formattedPermissions = deniedPermissions
|
||||
? deniedPermissions.map(formatPermission)
|
||||
: permissionName
|
||||
? [permissionName]
|
||||
: [];
|
||||
|
||||
return (
|
||||
<Callout
|
||||
type="error"
|
||||
@@ -25,7 +39,12 @@ function PermissionDeniedCallout({
|
||||
<Typography.Text className={styles.permission}>
|
||||
<code className={styles.permissionCode}>user/{user.id}</code> is not
|
||||
authorized to perform{' '}
|
||||
<code className={styles.permissionCode}>{permissionName}</code>
|
||||
{formattedPermissions.map((perm, idx) => (
|
||||
<span key={perm}>
|
||||
<code className={styles.permissionCode}>{perm}</code>
|
||||
{idx < formattedPermissions.length - 1 && ', '}
|
||||
</span>
|
||||
))}
|
||||
</Typography.Text>
|
||||
</Callout>
|
||||
);
|
||||
|
||||
@@ -1,17 +1,29 @@
|
||||
import { render, screen } from 'tests/test-utils';
|
||||
import PermissionDeniedFullPage from './PermissionDeniedFullPage';
|
||||
import {
|
||||
buildPermission,
|
||||
buildObjectString,
|
||||
} from 'lib/authz/hooks/useAuthZ/utils';
|
||||
|
||||
describe('PermissionDeniedFullPage', () => {
|
||||
it('renders the title and subtitle with the permissionName interpolated', () => {
|
||||
render(<PermissionDeniedFullPage permissionName="serviceaccount:list" />);
|
||||
const deniedPermissions = [
|
||||
buildPermission('read', buildObjectString('serviceaccount', '*')),
|
||||
];
|
||||
render(<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />);
|
||||
|
||||
expect(screen.getByText('Uh-oh! You are not authorized')).toBeInTheDocument();
|
||||
expect(screen.getByText(/serviceaccount:list/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/read:serviceaccount:\*/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/is not authorized to perform/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders with a different permissionName', () => {
|
||||
render(<PermissionDeniedFullPage permissionName="role:read" />);
|
||||
expect(screen.getByText(/role:read/)).toBeInTheDocument();
|
||||
it('renders with multiple denied permissions', () => {
|
||||
const deniedPermissions = [
|
||||
buildPermission('read', buildObjectString('role', 'admin')),
|
||||
buildPermission('update', buildObjectString('role', 'admin')),
|
||||
];
|
||||
render(<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />);
|
||||
expect(screen.getByText(/read:role:admin/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/update:role:admin/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -3,16 +3,30 @@ import { CircleSlash2 } from '@signozhq/icons';
|
||||
import styles from './PermissionDeniedFullPage.module.scss';
|
||||
import { Style } from '@signozhq/design-tokens';
|
||||
import { useAppContext } from 'providers/App/App';
|
||||
import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
|
||||
import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
|
||||
|
||||
interface PermissionDeniedFullPageProps {
|
||||
permissionName: string;
|
||||
export interface PermissionDeniedFullPageProps {
|
||||
/**
|
||||
* @deprecated Use `deniedPermissions` instead. Will be removed after authz devtools PR merges.
|
||||
*/
|
||||
permissionName?: string;
|
||||
deniedPermissions?: BrandedPermission[];
|
||||
}
|
||||
|
||||
function PermissionDeniedFullPage({
|
||||
permissionName,
|
||||
deniedPermissions,
|
||||
}: PermissionDeniedFullPageProps): JSX.Element {
|
||||
const { user } = useAppContext();
|
||||
|
||||
// TODO(authz): Remove permissionName support after devtools PR merges
|
||||
const formattedPermissions = deniedPermissions
|
||||
? deniedPermissions.map(formatPermission)
|
||||
: permissionName
|
||||
? [permissionName]
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.content}>
|
||||
@@ -22,7 +36,13 @@ function PermissionDeniedFullPage({
|
||||
<p className={styles.title}>Uh-oh! You are not authorized</p>
|
||||
<p className={styles.subtitle}>
|
||||
<code className={styles.permission}>user/{user.id}</code> is not authorized
|
||||
to perform <code className={styles.permission}>{permissionName}</code>
|
||||
to perform{' '}
|
||||
{formattedPermissions.map((perm, idx) => (
|
||||
<span key={perm}>
|
||||
<code className={styles.permission}>{perm}</code>
|
||||
{idx < formattedPermissions.length - 1 && ', '}
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
185
frontend/src/lib/authz/components/README.md
Normal file
185
frontend/src/lib/authz/components/README.md
Normal file
@@ -0,0 +1,185 @@
|
||||
# AuthZ Components
|
||||
|
||||
Quick reference for permission-gating UI. All components use AND semantics: user needs ALL permissions in `checks` array.
|
||||
|
||||
## Decision Tree
|
||||
|
||||
```
|
||||
Need to gate...
|
||||
├── A button? → AuthZButton
|
||||
├── Any element with tooltip on deny? → AuthZTooltip
|
||||
├── A section inside a page? → withAuthZContent (preferred)
|
||||
│ └── Need JSX wrapper? → AuthZGuardContent
|
||||
├── An entire page/route? → withAuthZPage (preferred)
|
||||
│ └── Need JSX wrapper? → AuthZGuardPage
|
||||
├── Need full control over fallback? → withAuthZ / AuthZGuard
|
||||
└── None of above fit?
|
||||
├── Can create wrapper component? → Create it (like AuthZButton)
|
||||
└── Last resort → useAuthZ hook directly
|
||||
```
|
||||
|
||||
## Building Permissions
|
||||
|
||||
Use `buildPermission`, `buildObjectString` or pre-built constants. Never cast with `as BrandedPermission`.
|
||||
|
||||
```tsx
|
||||
import { buildPermission, buildObjectString } from 'lib/authz/hooks/useAuthZ/utils';
|
||||
import {
|
||||
RoleCreatePermission,
|
||||
buildRoleReadPermission
|
||||
} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
|
||||
|
||||
// Static permission (pre-built)
|
||||
const checks = [RoleCreatePermission];
|
||||
|
||||
// Dynamic permission (builder fn)
|
||||
const checks = [buildRoleReadPermission(roleId)];
|
||||
|
||||
// Custom permission (buildPermission + buildObjectString)
|
||||
const checks = [buildPermission('read', buildObjectString('dashboard', dashboardId))];
|
||||
```
|
||||
|
||||
## Creating Permission Helpers
|
||||
|
||||
When adding authz to a new resource, create a permissions file under `lib/authz/hooks/useAuthZ/permissions/`.
|
||||
|
||||
```tsx
|
||||
// lib/authz/hooks/useAuthZ/permissions/dashboard.permissions.ts
|
||||
import { buildPermission } from '../utils';
|
||||
import type { BrandedPermission } from '../types';
|
||||
|
||||
// Collection-level — wildcard, no specific id needed
|
||||
export const DashboardCreatePermission = buildPermission('create', 'dashboard:*');
|
||||
export const DashboardListPermission = buildPermission('list', 'dashboard:*');
|
||||
|
||||
// Resource-level — require specific id
|
||||
export const buildDashboardReadPermission = (id: string): BrandedPermission =>
|
||||
buildPermission('read', `dashboard:${id}`);
|
||||
export const buildDashboardUpdatePermission = (id: string): BrandedPermission =>
|
||||
buildPermission('update', `dashboard:${id}`);
|
||||
export const buildDashboardDeletePermission = (id: string): BrandedPermission =>
|
||||
buildPermission('delete', `dashboard:${id}`);
|
||||
```
|
||||
|
||||
Pattern:
|
||||
- `<Resource><Action>Permission` → collection-level const (wildcard `*`)
|
||||
- `build<Resource><Action>Permission(id)` → resource-level fn (specific id)
|
||||
|
||||
## Components
|
||||
|
||||
### AuthZButton
|
||||
|
||||
Button that disables + shows tooltip when denied.
|
||||
|
||||
```tsx
|
||||
import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
|
||||
|
||||
<AuthZButton checks={[SACreatePermission]} onClick={handleCreate}>
|
||||
Create
|
||||
</AuthZButton>
|
||||
```
|
||||
|
||||
### AuthZTooltip
|
||||
|
||||
Wraps any element. Disables child + shows denial tooltip.
|
||||
|
||||
```tsx
|
||||
import { buildSADeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
|
||||
|
||||
<AuthZTooltip checks={[buildSADeletePermission(accountId)]}>
|
||||
<IconButton icon={<Trash />} onClick={handleDelete} />
|
||||
</AuthZTooltip>
|
||||
```
|
||||
|
||||
### withAuthZPage (preferred for pages)
|
||||
|
||||
HOC for route-level gating. Wrap at export. Shows `PermissionDeniedFullPage` + `AppLoading`.
|
||||
|
||||
```tsx
|
||||
import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
|
||||
|
||||
function RolesPage(): JSX.Element {
|
||||
return <div>...</div>;
|
||||
}
|
||||
|
||||
export default withAuthZPage(RolesPage, {
|
||||
checks: [RoleListPermission],
|
||||
});
|
||||
```
|
||||
|
||||
### withAuthZContent (preferred for sections)
|
||||
|
||||
HOC for inline sections. Shows `PermissionDeniedCallout` on deny.
|
||||
|
||||
```tsx
|
||||
import { buildRoleReadPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
|
||||
|
||||
function RoleEditor(): JSX.Element {
|
||||
return <div>...</div>;
|
||||
}
|
||||
|
||||
// Dynamic checks from route params
|
||||
export default withAuthZContent(RoleEditor, {
|
||||
checks: (_props, ctx) => [buildRoleReadPermission(ctx.params.roleId)],
|
||||
});
|
||||
```
|
||||
|
||||
### withAuthZ
|
||||
|
||||
HOC base. No default fallback. Use when you need custom fallback.
|
||||
|
||||
```tsx
|
||||
import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
|
||||
|
||||
export default withAuthZ(SecretPanel, {
|
||||
checks: [buildPermission('write', 'settings:org')],
|
||||
fallback: <p>No access</p>,
|
||||
});
|
||||
```
|
||||
|
||||
### AuthZGuardPage
|
||||
|
||||
JSX variant of `withAuthZPage`. Use when HOC not possible (conditional rendering).
|
||||
|
||||
```tsx
|
||||
import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
|
||||
|
||||
<AuthZGuardPage checks={[RoleListPermission]}>
|
||||
<RolesPage />
|
||||
</AuthZGuardPage>
|
||||
```
|
||||
|
||||
### AuthZGuardContent
|
||||
|
||||
JSX variant of `withAuthZContent`. Use when HOC not possible.
|
||||
|
||||
```tsx
|
||||
import { RoleCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
|
||||
|
||||
<AuthZGuardContent checks={[RoleCreatePermission]}>
|
||||
<RoleEditor />
|
||||
</AuthZGuardContent>
|
||||
```
|
||||
|
||||
### AuthZGuard
|
||||
|
||||
JSX base guard. No default fallback. Use when you need custom fallback in JSX.
|
||||
|
||||
```tsx
|
||||
import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
|
||||
|
||||
<AuthZGuard
|
||||
checks={[buildPermission('write', 'settings:org')]}
|
||||
fallback={<p>No access</p>}
|
||||
fallbackOnLoading={<Spinner />}
|
||||
>
|
||||
<SecretContent />
|
||||
</AuthZGuard>
|
||||
```
|
||||
|
||||
## Fallback Components
|
||||
|
||||
Don't use these components directly, always prefer using via `withAuthZ` and their variants.
|
||||
|
||||
- PermissionDeniedCallout: inline error callout. Shows `user/{id} is not authorized to perform {permissions}`.
|
||||
- PermissionDeniedFullPage: full-page centered error. Same message, bigger presentation.
|
||||
@@ -1,440 +0,0 @@
|
||||
import { ReactElement } from 'react';
|
||||
import type { RouteComponentProps } from 'react-router-dom';
|
||||
import type {
|
||||
AuthtypesGettableTransactionDTO,
|
||||
AuthtypesTransactionDTO,
|
||||
} from 'api/generated/services/sigNoz.schemas';
|
||||
import { server } from 'mocks-server/server';
|
||||
import { rest } from 'msw';
|
||||
import { render, screen, waitFor } from 'tests/test-utils';
|
||||
import {
|
||||
AUTHZ_CHECK_URL,
|
||||
authzMockResponse,
|
||||
} from 'lib/authz/utils/authz-test-utils';
|
||||
|
||||
import { createGuardedRoute } from './createGuardedRoute';
|
||||
|
||||
describe('createGuardedRoute', () => {
|
||||
const TestComponent = ({ testProp }: { testProp: string }): ReactElement => (
|
||||
<div>Test Component: {testProp}</div>
|
||||
);
|
||||
|
||||
it('should render component when permission is granted', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
|
||||
}),
|
||||
);
|
||||
|
||||
const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
|
||||
|
||||
const mockMatch = {
|
||||
params: {},
|
||||
isExact: true,
|
||||
path: '/dashboard',
|
||||
url: '/dashboard',
|
||||
};
|
||||
|
||||
const props = {
|
||||
testProp: 'test-value',
|
||||
match: mockMatch,
|
||||
location: {} as unknown as RouteComponentProps['location'],
|
||||
history: {} as unknown as RouteComponentProps['history'],
|
||||
};
|
||||
|
||||
render(<GuardedComponent {...props} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should substitute route parameters in object string', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
|
||||
}),
|
||||
);
|
||||
|
||||
const GuardedComponent = createGuardedRoute(
|
||||
TestComponent,
|
||||
'read',
|
||||
'role:{id}',
|
||||
);
|
||||
|
||||
const mockMatch = {
|
||||
params: { id: '123' },
|
||||
isExact: true,
|
||||
path: '/dashboard/:id',
|
||||
url: '/dashboard/123',
|
||||
};
|
||||
|
||||
const props = {
|
||||
testProp: 'test-value',
|
||||
match: mockMatch,
|
||||
location: {} as unknown as RouteComponentProps['location'],
|
||||
history: {} as unknown as RouteComponentProps['history'],
|
||||
};
|
||||
|
||||
render(<GuardedComponent {...props} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle multiple route parameters', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = (await req.json()) as AuthtypesTransactionDTO[];
|
||||
const txn = payload[0];
|
||||
const responseData: AuthtypesGettableTransactionDTO[] = [
|
||||
{
|
||||
relation: txn.relation,
|
||||
object: {
|
||||
resource: {
|
||||
kind: txn.object.resource.kind,
|
||||
type: txn.object.resource.type,
|
||||
},
|
||||
selector: '123:456',
|
||||
},
|
||||
authorized: true,
|
||||
},
|
||||
];
|
||||
return res(
|
||||
ctx.status(200),
|
||||
ctx.json({ data: responseData, status: 'success' }),
|
||||
);
|
||||
}),
|
||||
);
|
||||
|
||||
const GuardedComponent = createGuardedRoute(
|
||||
TestComponent,
|
||||
'update',
|
||||
'role:{id}:{version}',
|
||||
);
|
||||
|
||||
const mockMatch = {
|
||||
params: { id: '123', version: '456' },
|
||||
isExact: true,
|
||||
path: '/dashboard/:id/:version',
|
||||
url: '/dashboard/123/456',
|
||||
};
|
||||
|
||||
const props = {
|
||||
testProp: 'test-value',
|
||||
match: mockMatch,
|
||||
location: {} as unknown as RouteComponentProps['location'],
|
||||
history: {} as unknown as RouteComponentProps['history'],
|
||||
};
|
||||
|
||||
render(<GuardedComponent {...props} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should keep placeholder when route parameter is missing', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
|
||||
}),
|
||||
);
|
||||
|
||||
const GuardedComponent = createGuardedRoute(
|
||||
TestComponent,
|
||||
'read',
|
||||
'role:{id}',
|
||||
);
|
||||
|
||||
const mockMatch = {
|
||||
params: {},
|
||||
isExact: true,
|
||||
path: '/dashboard',
|
||||
url: '/dashboard',
|
||||
};
|
||||
|
||||
const props = {
|
||||
testProp: 'test-value',
|
||||
match: mockMatch,
|
||||
location: {} as unknown as RouteComponentProps['location'],
|
||||
history: {} as unknown as RouteComponentProps['history'],
|
||||
};
|
||||
|
||||
render(<GuardedComponent {...props} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should render loading fallback when loading', () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
|
||||
return res(
|
||||
ctx.delay('infinite'),
|
||||
ctx.status(200),
|
||||
ctx.json({ data: [], status: 'success' }),
|
||||
);
|
||||
}),
|
||||
);
|
||||
|
||||
const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
|
||||
|
||||
const mockMatch = {
|
||||
params: {},
|
||||
isExact: true,
|
||||
path: '/dashboard',
|
||||
url: '/dashboard',
|
||||
};
|
||||
|
||||
const props = {
|
||||
testProp: 'test-value',
|
||||
match: mockMatch,
|
||||
location: {} as unknown as RouteComponentProps['location'],
|
||||
history: {} as unknown as RouteComponentProps['history'],
|
||||
};
|
||||
|
||||
render(<GuardedComponent {...props} />);
|
||||
|
||||
expect(screen.getByText('SigNoz')).toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText('Test Component: test-value'),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render the component when API error occurs (fail open)', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
|
||||
return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
|
||||
}),
|
||||
);
|
||||
|
||||
const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
|
||||
|
||||
const mockMatch = {
|
||||
params: {},
|
||||
isExact: true,
|
||||
path: '/dashboard',
|
||||
url: '/dashboard',
|
||||
};
|
||||
|
||||
const props = {
|
||||
testProp: 'test-value',
|
||||
match: mockMatch,
|
||||
location: {} as unknown as RouteComponentProps['location'],
|
||||
history: {} as unknown as RouteComponentProps['history'],
|
||||
};
|
||||
|
||||
render(<GuardedComponent {...props} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should render no permissions fallback when permission is denied', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
|
||||
}),
|
||||
);
|
||||
|
||||
const GuardedComponent = createGuardedRoute(
|
||||
TestComponent,
|
||||
'update',
|
||||
'role:{id}',
|
||||
);
|
||||
|
||||
const mockMatch = {
|
||||
params: { id: '123' },
|
||||
isExact: true,
|
||||
path: '/dashboard/:id',
|
||||
url: '/dashboard/123',
|
||||
};
|
||||
|
||||
const props = {
|
||||
testProp: 'test-value',
|
||||
match: mockMatch,
|
||||
location: {} as unknown as RouteComponentProps['location'],
|
||||
history: {} as unknown as RouteComponentProps['history'],
|
||||
};
|
||||
|
||||
render(<GuardedComponent {...props} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const heading = document.querySelector('h3');
|
||||
expect(heading).toBeInTheDocument();
|
||||
expect(heading?.textContent).toMatch(/not authorized/i);
|
||||
});
|
||||
|
||||
expect(screen.getByText(/update:role:123/)).toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText('Test Component: test-value'),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should pass all props to wrapped component', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
|
||||
}),
|
||||
);
|
||||
|
||||
const ComponentWithMultipleProps = ({
|
||||
prop1,
|
||||
prop2,
|
||||
prop3,
|
||||
}: {
|
||||
prop1: string;
|
||||
prop2: number;
|
||||
prop3: boolean;
|
||||
}): ReactElement => (
|
||||
<div>
|
||||
{prop1} - {prop2} - {prop3.toString()}
|
||||
</div>
|
||||
);
|
||||
|
||||
const GuardedComponent = createGuardedRoute(
|
||||
ComponentWithMultipleProps,
|
||||
'read',
|
||||
'role:*',
|
||||
);
|
||||
|
||||
const mockMatch = {
|
||||
params: {},
|
||||
isExact: true,
|
||||
path: '/dashboard',
|
||||
url: '/dashboard',
|
||||
};
|
||||
|
||||
const props = {
|
||||
prop1: 'value1',
|
||||
prop2: 42,
|
||||
prop3: true,
|
||||
match: mockMatch,
|
||||
location: {} as unknown as RouteComponentProps['location'],
|
||||
history: {} as unknown as RouteComponentProps['history'],
|
||||
};
|
||||
|
||||
render(<GuardedComponent {...props} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('value1 - 42 - true')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should memoize resolved object based on route params', async () => {
|
||||
let requestCount = 0;
|
||||
const requestedObjects: string[] = [];
|
||||
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
requestCount++;
|
||||
const payload = (await req.json()) as AuthtypesTransactionDTO[];
|
||||
const obj = payload[0]?.object;
|
||||
const kind = obj?.resource?.kind;
|
||||
const selector = obj?.selector ?? '*';
|
||||
const objectStr = `${kind}:${selector}`;
|
||||
requestedObjects.push(objectStr ?? '');
|
||||
|
||||
return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
|
||||
}),
|
||||
);
|
||||
|
||||
const GuardedComponent = createGuardedRoute(
|
||||
TestComponent,
|
||||
'read',
|
||||
'role:{id}',
|
||||
);
|
||||
|
||||
const mockMatch1 = {
|
||||
params: { id: '123' },
|
||||
isExact: true,
|
||||
path: '/dashboard/:id',
|
||||
url: '/dashboard/123',
|
||||
};
|
||||
|
||||
const props1 = {
|
||||
testProp: 'test-value-1',
|
||||
match: mockMatch1,
|
||||
location: {} as unknown as RouteComponentProps['location'],
|
||||
history: {} as unknown as RouteComponentProps['history'],
|
||||
};
|
||||
|
||||
const { unmount } = render(<GuardedComponent {...props1} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Component: test-value-1')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
expect(requestCount).toBe(1);
|
||||
expect(requestedObjects).toContain('role:123');
|
||||
|
||||
unmount();
|
||||
|
||||
const mockMatch2 = {
|
||||
params: { id: '456' },
|
||||
isExact: true,
|
||||
path: '/dashboard/:id',
|
||||
url: '/dashboard/456',
|
||||
};
|
||||
|
||||
const props2 = {
|
||||
testProp: 'test-value-2',
|
||||
match: mockMatch2,
|
||||
location: {} as unknown as RouteComponentProps['location'],
|
||||
history: {} as unknown as RouteComponentProps['history'],
|
||||
};
|
||||
|
||||
render(<GuardedComponent {...props2} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Component: test-value-2')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
expect(requestCount).toBe(2);
|
||||
expect(requestedObjects).toContain('role:456');
|
||||
});
|
||||
|
||||
it('should handle different relation types', async () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
|
||||
}),
|
||||
);
|
||||
|
||||
const GuardedComponent = createGuardedRoute(
|
||||
TestComponent,
|
||||
'delete',
|
||||
'role:{id}',
|
||||
);
|
||||
|
||||
const mockMatch = {
|
||||
params: { id: '789' },
|
||||
isExact: true,
|
||||
path: '/dashboard/:id',
|
||||
url: '/dashboard/789',
|
||||
};
|
||||
|
||||
const props = {
|
||||
testProp: 'test-value',
|
||||
match: mockMatch,
|
||||
location: {} as unknown as RouteComponentProps['location'],
|
||||
history: {} as unknown as RouteComponentProps['history'],
|
||||
};
|
||||
|
||||
render(<GuardedComponent {...props} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,41 +0,0 @@
|
||||
.guard-authz-error-no-authz {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
padding: 24px;
|
||||
|
||||
.guard-authz-error-no-authz-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
color: var(--l1-foreground);
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: var(--l3-foreground);
|
||||
line-height: 18px;
|
||||
|
||||
span {
|
||||
background-color: var(--l3-background);
|
||||
white-space: nowrap;
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
import { ComponentType, ReactElement, useMemo } from 'react';
|
||||
import { RouteComponentProps } from 'react-router-dom';
|
||||
import {
|
||||
AuthZObject,
|
||||
AuthZRelation,
|
||||
BrandedPermission,
|
||||
} from 'lib/authz/hooks/useAuthZ/types';
|
||||
import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
|
||||
import { useAppContext } from 'providers/App/App';
|
||||
|
||||
import noDataUrl from 'assets/Icons/no-data.svg';
|
||||
|
||||
import AppLoading from '../../../../components/AppLoading/AppLoading';
|
||||
import { GuardAuthZ } from '../GuardAuthZ/GuardAuthZ';
|
||||
|
||||
import './createGuardedRoute.styles.scss';
|
||||
|
||||
function OnNoPermissionsFallback(response: {
|
||||
requiredPermissionName: BrandedPermission;
|
||||
}): ReactElement {
|
||||
const { user } = useAppContext();
|
||||
|
||||
return (
|
||||
<div className="guard-authz-error-no-authz">
|
||||
<div className="guard-authz-error-no-authz-content">
|
||||
<img src={noDataUrl} alt="No permission" />
|
||||
<h3>Uh-oh! You are not authorized</h3>
|
||||
<p>
|
||||
<code>user/{user.id}</code> is not authorized to perform{' '}
|
||||
<code>{formatPermission(response.requiredPermissionName)}</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
export function createGuardedRoute<P extends object, R extends AuthZRelation>(
|
||||
Component: ComponentType<P>,
|
||||
relation: R,
|
||||
object: AuthZObject<R>,
|
||||
): ComponentType<P & RouteComponentProps<Record<string, string>>> {
|
||||
return function GuardedRouteComponent(
|
||||
props: P & RouteComponentProps<Record<string, string>>,
|
||||
): ReactElement {
|
||||
const resolvedObject = useMemo(() => {
|
||||
const paramPattern = /\{([^}]+)\}/g;
|
||||
return object.replace(paramPattern, (match, paramName) => {
|
||||
const paramValue = props.match?.params?.[paramName];
|
||||
return paramValue !== undefined ? paramValue : match;
|
||||
}) as AuthZObject<R>;
|
||||
}, [props.match?.params]);
|
||||
|
||||
return (
|
||||
<GuardAuthZ
|
||||
relation={relation}
|
||||
object={resolvedObject}
|
||||
fallbackOnLoading={<AppLoading />}
|
||||
fallbackOnNoPermissions={(response): ReactElement => (
|
||||
<OnNoPermissionsFallback {...response} />
|
||||
)}
|
||||
>
|
||||
<Component {...props} />
|
||||
</GuardAuthZ>
|
||||
);
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,578 @@
|
||||
import React from 'react';
|
||||
import { render, screen, waitFor, act } from 'tests/test-utils';
|
||||
import { useQueryClient } from 'react-query';
|
||||
import { server } from 'mocks-server/server';
|
||||
import { rest } from 'msw';
|
||||
import {
|
||||
AUTHZ_CHECK_URL,
|
||||
authzMockResponse,
|
||||
setupAuthzAllow,
|
||||
setupAuthzDeny,
|
||||
setupAuthzGrantByPrefix,
|
||||
} from 'lib/authz/utils/authz-test-utils';
|
||||
import type { AuthZObject } from 'lib/authz/hooks/useAuthZ/types';
|
||||
import {
|
||||
buildObjectString,
|
||||
buildPermission,
|
||||
} from 'lib/authz/hooks/useAuthZ/utils';
|
||||
|
||||
import { withAuthZ, RouterContext } from './withAuthZ';
|
||||
import { withAuthZContent } from './withAuthZContent';
|
||||
import { withAuthZPage } from './withAuthZPage';
|
||||
|
||||
const mockUseParams = jest.fn();
|
||||
const mockUseLocation = jest.fn();
|
||||
|
||||
jest.mock('react-router-dom', () => ({
|
||||
...jest.requireActual('react-router-dom'),
|
||||
useParams: (): Record<string, string> => mockUseParams(),
|
||||
useLocation: (): { pathname: string; search: string } => mockUseLocation(),
|
||||
}));
|
||||
|
||||
const readPerm = buildPermission('read', 'role:*' as AuthZObject<'read'>);
|
||||
|
||||
function Base(): JSX.Element {
|
||||
return <div>Base component</div>;
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
mockUseParams.mockReturnValue({});
|
||||
mockUseLocation.mockReturnValue({ pathname: '/', search: '' });
|
||||
});
|
||||
|
||||
describe('withAuthZ', () => {
|
||||
it('renders the wrapped component when allowed', async () => {
|
||||
server.use(setupAuthzAllow(readPerm));
|
||||
const Guarded = withAuthZ(Base, { checks: [readPerm] });
|
||||
|
||||
render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Base component')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders nothing when denied without a fallback', async () => {
|
||||
server.use(setupAuthzDeny(readPerm));
|
||||
const Guarded = withAuthZ(Base, { checks: [readPerm] });
|
||||
|
||||
render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('Base component')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders the provided fallback when denied', async () => {
|
||||
server.use(setupAuthzDeny(readPerm));
|
||||
const Guarded = withAuthZ(Base, {
|
||||
checks: [readPerm],
|
||||
fallback: <div>No access</div>,
|
||||
});
|
||||
|
||||
render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('No access')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('resolves checks from props via the selector form', async () => {
|
||||
type Props = { roleId: string };
|
||||
const RoleView = ({ roleId }: Props): JSX.Element => <div>role {roleId}</div>;
|
||||
const deniedPerm = buildPermission(
|
||||
'read',
|
||||
buildObjectString<'read'>('role', 'r-1'),
|
||||
);
|
||||
server.use(setupAuthzDeny(deniedPerm));
|
||||
|
||||
const Guarded = withAuthZ<Props>(RoleView, {
|
||||
checks: ({ roleId }) => [
|
||||
buildPermission('read', buildObjectString<'read'>('role', roleId)),
|
||||
],
|
||||
fallback: <div>denied selector</div>,
|
||||
});
|
||||
|
||||
render(<Guarded roleId="r-1" />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('denied selector')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.queryByText('role r-1')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('sets a descriptive displayName', () => {
|
||||
const Guarded = withAuthZ(Base, { checks: [readPerm] });
|
||||
expect(Guarded.displayName).toBe('withAuthZ(Base)');
|
||||
});
|
||||
});
|
||||
|
||||
describe('withAuthZPage', () => {
|
||||
it('renders the full-page denied screen when denied', async () => {
|
||||
server.use(setupAuthzDeny(readPerm));
|
||||
const Guarded = withAuthZPage(Base, { checks: [readPerm] });
|
||||
|
||||
render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
screen.getByText('Uh-oh! You are not authorized'),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('withAuthZContent', () => {
|
||||
it('renders the denied callout when denied', async () => {
|
||||
server.use(setupAuthzDeny(readPerm));
|
||||
const Guarded = withAuthZContent(Base, { checks: [readPerm] });
|
||||
|
||||
render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('read:role:*')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.queryByText('Base component')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('withAuthZ router context', () => {
|
||||
it('extracts checks from route params via router.params', async () => {
|
||||
mockUseParams.mockReturnValue({ roleId: 'r-123' });
|
||||
|
||||
const rolePerm = buildPermission(
|
||||
'read',
|
||||
buildObjectString<'read'>('role', 'r-123'),
|
||||
);
|
||||
server.use(setupAuthzAllow(rolePerm));
|
||||
|
||||
const RoleView = (): JSX.Element => <div>role view</div>;
|
||||
const Guarded = withAuthZ(RoleView, {
|
||||
checks: (_props, router: RouterContext) => [
|
||||
buildPermission(
|
||||
'read',
|
||||
buildObjectString<'read'>('role', router.params.roleId ?? ''),
|
||||
),
|
||||
],
|
||||
});
|
||||
|
||||
render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('role view')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('extracts checks from query params via router.searchParams', async () => {
|
||||
mockUseLocation.mockReturnValue({
|
||||
pathname: '/roles',
|
||||
search: '?roleId=r-456',
|
||||
});
|
||||
|
||||
const rolePerm = buildPermission(
|
||||
'read',
|
||||
buildObjectString<'read'>('role', 'r-456'),
|
||||
);
|
||||
server.use(setupAuthzAllow(rolePerm));
|
||||
|
||||
const RoleListView = (): JSX.Element => <div>role list view</div>;
|
||||
const Guarded = withAuthZ(RoleListView, {
|
||||
checks: (_props, router: RouterContext) => [
|
||||
buildPermission(
|
||||
'read',
|
||||
buildObjectString<'read'>('role', router.searchParams.get('roleId') ?? ''),
|
||||
),
|
||||
],
|
||||
});
|
||||
|
||||
render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('role list view')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('extracts checks from pathname via router.matchPath', async () => {
|
||||
mockUseLocation.mockReturnValue({
|
||||
pathname: '/settings/roles/r-789/edit',
|
||||
search: '',
|
||||
});
|
||||
|
||||
const rolePerm = buildPermission(
|
||||
'update',
|
||||
buildObjectString<'update'>('role', 'r-789'),
|
||||
);
|
||||
server.use(setupAuthzAllow(rolePerm));
|
||||
|
||||
const EditRoleView = (): JSX.Element => <div>edit role</div>;
|
||||
const Guarded = withAuthZ(EditRoleView, {
|
||||
checks: (_props, router: RouterContext) => {
|
||||
const match = router.matchPath<{ roleId: string }>(
|
||||
'/settings/roles/:roleId/edit',
|
||||
);
|
||||
return match
|
||||
? [
|
||||
buildPermission(
|
||||
'update',
|
||||
buildObjectString<'update'>('role', match.roleId),
|
||||
),
|
||||
]
|
||||
: [];
|
||||
},
|
||||
});
|
||||
|
||||
render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('edit role')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('denies when router-derived permission is not allowed', async () => {
|
||||
mockUseParams.mockReturnValue({ roleId: 'r-denied' });
|
||||
|
||||
const deniedPerm = buildPermission(
|
||||
'read',
|
||||
buildObjectString<'read'>('role', 'r-denied'),
|
||||
);
|
||||
server.use(setupAuthzDeny(deniedPerm));
|
||||
|
||||
const RoleView = (): JSX.Element => <div>role view</div>;
|
||||
const Guarded = withAuthZ(RoleView, {
|
||||
checks: (_props, router: RouterContext) => [
|
||||
buildPermission(
|
||||
'read',
|
||||
buildObjectString<'read'>('role', router.params.roleId ?? ''),
|
||||
),
|
||||
],
|
||||
fallback: <div>access denied</div>,
|
||||
});
|
||||
|
||||
render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('access denied')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.queryByText('role view')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('withAuthZ router context stability', () => {
|
||||
let renderCount = 0;
|
||||
|
||||
function RenderCounter(): JSX.Element {
|
||||
renderCount += 1;
|
||||
return <div data-testid="render-count">{renderCount}</div>;
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
renderCount = 0;
|
||||
server.use(setupAuthzGrantByPrefix('read||__||role'));
|
||||
});
|
||||
|
||||
it('does not re-render when useParams returns new object with same values', async () => {
|
||||
mockUseParams.mockReturnValue({ roleId: 'r-1' });
|
||||
mockUseLocation.mockReturnValue({ pathname: '/', search: '' });
|
||||
|
||||
const Guarded = withAuthZ(RenderCounter, {
|
||||
checks: (_props, router: RouterContext) => [
|
||||
buildPermission(
|
||||
'read',
|
||||
buildObjectString<'read'>('role', router.params.roleId ?? '*'),
|
||||
),
|
||||
],
|
||||
});
|
||||
|
||||
const { rerender } = render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('render-count')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const initialCount = renderCount;
|
||||
|
||||
// Return NEW object with SAME values — should not cause re-render
|
||||
mockUseParams.mockReturnValue({ roleId: 'r-1' });
|
||||
rerender(<Guarded />);
|
||||
|
||||
// Allow any pending effects to flush
|
||||
await waitFor(() => {
|
||||
expect(renderCount).toBe(initialCount);
|
||||
});
|
||||
});
|
||||
|
||||
it('does not re-render when useLocation returns new object with same pathname', async () => {
|
||||
mockUseParams.mockReturnValue({});
|
||||
mockUseLocation.mockReturnValue({ pathname: '/roles', search: '' });
|
||||
|
||||
const Guarded = withAuthZ(RenderCounter, {
|
||||
checks: (_props, router: RouterContext) => {
|
||||
const match = router.matchPath<{ id: string }>('/roles/:id');
|
||||
return match
|
||||
? [buildPermission('read', buildObjectString<'read'>('role', match.id))]
|
||||
: [readPerm];
|
||||
},
|
||||
});
|
||||
|
||||
const { rerender } = render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('render-count')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const initialCount = renderCount;
|
||||
|
||||
// Return NEW object with SAME pathname — should not cause re-render
|
||||
mockUseLocation.mockReturnValue({ pathname: '/roles', search: '' });
|
||||
rerender(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(renderCount).toBe(initialCount);
|
||||
});
|
||||
});
|
||||
|
||||
it('does not re-render when useLocation returns new object with same search params', async () => {
|
||||
mockUseParams.mockReturnValue({});
|
||||
mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=keys' });
|
||||
|
||||
const Guarded = withAuthZ(RenderCounter, {
|
||||
checks: (_props, router: RouterContext) => {
|
||||
// Access searchParams to ensure it's part of the dependency chain
|
||||
void router.searchParams.get('tab');
|
||||
return [readPerm];
|
||||
},
|
||||
});
|
||||
|
||||
const { rerender } = render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('render-count')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const initialCount = renderCount;
|
||||
|
||||
// Return NEW object with SAME search — should not cause re-render
|
||||
mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=keys' });
|
||||
rerender(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(renderCount).toBe(initialCount);
|
||||
});
|
||||
});
|
||||
|
||||
it('re-renders when params values actually change', async () => {
|
||||
mockUseParams.mockReturnValue({ roleId: 'r-1' });
|
||||
mockUseLocation.mockReturnValue({ pathname: '/', search: '' });
|
||||
|
||||
const Guarded = withAuthZ(RenderCounter, {
|
||||
checks: (_props, router: RouterContext) => [
|
||||
buildPermission(
|
||||
'read',
|
||||
buildObjectString<'read'>('role', router.params.roleId ?? '*'),
|
||||
),
|
||||
],
|
||||
});
|
||||
|
||||
const { unmount } = render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('render-count')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const initialCount = renderCount;
|
||||
unmount();
|
||||
|
||||
// Return DIFFERENT values — re-mount with new mock values
|
||||
mockUseParams.mockReturnValue({ roleId: 'r-2' });
|
||||
render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(renderCount).toBeGreaterThan(initialCount);
|
||||
});
|
||||
});
|
||||
|
||||
it('re-renders when pathname actually changes', async () => {
|
||||
mockUseParams.mockReturnValue({});
|
||||
mockUseLocation.mockReturnValue({ pathname: '/roles', search: '' });
|
||||
|
||||
const Guarded = withAuthZ(RenderCounter, {
|
||||
checks: [readPerm],
|
||||
});
|
||||
|
||||
const { unmount } = render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('render-count')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const initialCount = renderCount;
|
||||
unmount();
|
||||
|
||||
// DIFFERENT pathname — re-mount with new mock values
|
||||
mockUseLocation.mockReturnValue({ pathname: '/users', search: '' });
|
||||
render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(renderCount).toBeGreaterThan(initialCount);
|
||||
});
|
||||
});
|
||||
|
||||
it('re-renders when search params actually change', async () => {
|
||||
mockUseParams.mockReturnValue({});
|
||||
mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=keys' });
|
||||
|
||||
const Guarded = withAuthZ(RenderCounter, {
|
||||
checks: [readPerm],
|
||||
});
|
||||
|
||||
const { unmount } = render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('render-count')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const initialCount = renderCount;
|
||||
unmount();
|
||||
|
||||
// DIFFERENT search — re-mount with new mock values
|
||||
mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=details' });
|
||||
render(<Guarded />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(renderCount).toBeGreaterThan(initialCount);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('withAuthZContent cache invalidation', () => {
|
||||
const testPerm = buildPermission(
|
||||
'read',
|
||||
'role:test-invalidation' as AuthZObject<'read'>,
|
||||
);
|
||||
// Callout displays permission as "relation:object" format
|
||||
const displayedPerm = 'read:role:test-invalidation';
|
||||
|
||||
function ContentComponent(): JSX.Element {
|
||||
return <div data-testid="protected-content">Protected Content</div>;
|
||||
}
|
||||
|
||||
function InvalidationTrigger({
|
||||
permission,
|
||||
onReady,
|
||||
}: {
|
||||
permission: string;
|
||||
onReady: (invalidate: () => Promise<void>) => void;
|
||||
}): null {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
React.useEffect(() => {
|
||||
onReady(async () => {
|
||||
// Reset query to initial state and trigger refetch (matches devtools behavior)
|
||||
await queryClient.resetQueries(['authz', permission]);
|
||||
});
|
||||
}, [queryClient, permission, onReady]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
it('re-renders from allowed to denied when cache is invalidated', async () => {
|
||||
let shouldGrant = true;
|
||||
let invalidateFn: (() => Promise<void>) | null = null;
|
||||
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
return res(
|
||||
ctx.status(200),
|
||||
ctx.json(authzMockResponse(payload, [shouldGrant])),
|
||||
);
|
||||
}),
|
||||
);
|
||||
|
||||
const Guarded = withAuthZContent(ContentComponent, { checks: [testPerm] });
|
||||
|
||||
render(
|
||||
<>
|
||||
<Guarded />
|
||||
<InvalidationTrigger
|
||||
permission={testPerm}
|
||||
onReady={(fn): void => {
|
||||
invalidateFn = fn;
|
||||
}}
|
||||
/>
|
||||
</>,
|
||||
);
|
||||
|
||||
// Initially allowed - should show content
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('protected-content')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Change server response to deny
|
||||
shouldGrant = false;
|
||||
|
||||
// Invalidate cache
|
||||
await act(async () => {
|
||||
await invalidateFn?.();
|
||||
});
|
||||
|
||||
// Should now show denied callout
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Callout should show the denied permission
|
||||
expect(screen.getByRole('alert')).toBeInTheDocument();
|
||||
expect(screen.getByText(displayedPerm)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('re-renders from denied to allowed when cache is invalidated', async () => {
|
||||
let shouldGrant = false;
|
||||
let invalidateFn: (() => Promise<void>) | null = null;
|
||||
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
return res(
|
||||
ctx.status(200),
|
||||
ctx.json(authzMockResponse(payload, [shouldGrant])),
|
||||
);
|
||||
}),
|
||||
);
|
||||
|
||||
const Guarded = withAuthZContent(ContentComponent, { checks: [testPerm] });
|
||||
|
||||
render(
|
||||
<>
|
||||
<Guarded />
|
||||
<InvalidationTrigger
|
||||
permission={testPerm}
|
||||
onReady={(fn): void => {
|
||||
invalidateFn = fn;
|
||||
}}
|
||||
/>
|
||||
</>,
|
||||
);
|
||||
|
||||
// Initially denied - should show callout
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('alert')).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
|
||||
|
||||
// Change server response to allow
|
||||
shouldGrant = true;
|
||||
|
||||
// Invalidate cache
|
||||
await act(async () => {
|
||||
await invalidateFn?.();
|
||||
});
|
||||
|
||||
// Should now show protected content
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('protected-content')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
expect(screen.queryByRole('alert')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
13
frontend/src/lib/authz/components/withAuthZ/withAuthZ.tsx
Normal file
13
frontend/src/lib/authz/components/withAuthZ/withAuthZ.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { ComponentType } from 'react';
|
||||
import { AuthZGuard } from 'lib/authz/components/AuthZGuard/AuthZGuard';
|
||||
|
||||
import { createAuthZHOC, WithAuthZOptions } from './withAuthZ.utils';
|
||||
|
||||
export type { RouterContext, WithAuthZOptions } from './withAuthZ.utils';
|
||||
|
||||
export function withAuthZ<P extends object>(
|
||||
Component: ComponentType<P>,
|
||||
opts: WithAuthZOptions<P>,
|
||||
): ComponentType<P> {
|
||||
return createAuthZHOC(AuthZGuard, 'withAuthZ', Component, opts);
|
||||
}
|
||||
108
frontend/src/lib/authz/components/withAuthZ/withAuthZ.utils.tsx
Normal file
108
frontend/src/lib/authz/components/withAuthZ/withAuthZ.utils.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { ComponentType, ReactElement, createElement, useMemo } from 'react';
|
||||
import {
|
||||
matchPath as reactRouterMatchPath,
|
||||
useLocation,
|
||||
useParams,
|
||||
} from 'react-router-dom';
|
||||
import type { AuthZGuardProps } from 'lib/authz/components/AuthZGuard/AuthZGuard';
|
||||
import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
|
||||
|
||||
export type RouterContext = {
|
||||
/**
|
||||
* Route params from useParams (e.g. `/roles/:roleId` → `{ roleId: "r-1" }`)
|
||||
*/
|
||||
params: Record<string, string | undefined>;
|
||||
pathname: string;
|
||||
/**
|
||||
* Query params as URLSearchParams (use `.get('key')` to read)
|
||||
*/
|
||||
searchParams: URLSearchParams;
|
||||
/**
|
||||
* Extract params from pathname using a route pattern.
|
||||
* Returns null if pattern doesn't match.
|
||||
* @example router.matchPath<{ id: string }>('/edit/:id')?.id
|
||||
*/
|
||||
matchPath: <Params extends Record<string, string>>(
|
||||
pattern: string,
|
||||
) => Params | null;
|
||||
};
|
||||
|
||||
export type WithAuthZOptions<P> = {
|
||||
/**
|
||||
* Static checks, or a selector deriving them from props and router context.
|
||||
* Use router context to extract dynamic values from route params, pathname, or query params.
|
||||
* @example
|
||||
* // From route params
|
||||
* checks: (props, router) => [buildPermission('read', `role:${router.params.roleId}`)]
|
||||
* // From query params
|
||||
* checks: (props, router) => [buildPermission('read', `dashboard:${router.searchParams.get('id')}`)]
|
||||
* // From pathname matching
|
||||
* checks: (props, router) => {
|
||||
* const match = router.matchPath<{ id: string }>('/edit/:id');
|
||||
* return match ? [buildPermission('update', `role:${match.id}`)] : [];
|
||||
* }
|
||||
*/
|
||||
checks:
|
||||
| BrandedPermission[]
|
||||
| ((props: P, router: RouterContext) => BrandedPermission[]);
|
||||
fallback?: AuthZGuardProps['fallback'];
|
||||
fallbackOnLoading?: AuthZGuardProps['fallbackOnLoading'];
|
||||
failOpenOnError?: AuthZGuardProps['onFailRenderContent'];
|
||||
};
|
||||
|
||||
function useStableParams(): Record<string, string | undefined> {
|
||||
const params = useParams();
|
||||
const paramsJson = JSON.stringify(params);
|
||||
return useMemo(() => JSON.parse(paramsJson), [paramsJson]);
|
||||
}
|
||||
|
||||
function useRouterContext(): RouterContext {
|
||||
const params = useStableParams();
|
||||
const { pathname, search } = useLocation();
|
||||
const searchParams = useMemo(() => new URLSearchParams(search), [search]);
|
||||
|
||||
return useMemo(
|
||||
(): RouterContext => ({
|
||||
params,
|
||||
pathname,
|
||||
searchParams,
|
||||
matchPath: <Params extends Record<string, string>>(
|
||||
pattern: string,
|
||||
): Params | null => {
|
||||
const match = reactRouterMatchPath<Params>(pathname, {
|
||||
path: pattern,
|
||||
exact: false,
|
||||
});
|
||||
return match?.params ?? null;
|
||||
},
|
||||
}),
|
||||
[params, pathname, searchParams],
|
||||
);
|
||||
}
|
||||
|
||||
export function createAuthZHOC<P extends object>(
|
||||
Guard: ComponentType<AuthZGuardProps>,
|
||||
hocName: string,
|
||||
Component: ComponentType<P>,
|
||||
opts: WithAuthZOptions<P>,
|
||||
): ComponentType<P> {
|
||||
const { checks, ...guardProps } = opts;
|
||||
|
||||
function Wrapped(props: P): ReactElement | null {
|
||||
const router = useRouterContext();
|
||||
const resolvedChecks =
|
||||
typeof checks === 'function' ? checks(props, router) : checks;
|
||||
|
||||
return (
|
||||
<Guard checks={resolvedChecks} {...guardProps}>
|
||||
{createElement(Component, props)}
|
||||
</Guard>
|
||||
);
|
||||
}
|
||||
|
||||
Wrapped.displayName = `${hocName}(${
|
||||
Component.displayName || Component.name || 'Component'
|
||||
})`;
|
||||
|
||||
return Wrapped;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { ComponentType } from 'react';
|
||||
import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
|
||||
|
||||
import { createAuthZHOC, WithAuthZOptions } from './withAuthZ.utils';
|
||||
|
||||
export function withAuthZContent<P extends object>(
|
||||
Component: ComponentType<P>,
|
||||
opts: WithAuthZOptions<P>,
|
||||
): ComponentType<P> {
|
||||
return createAuthZHOC(AuthZGuardContent, 'withAuthZContent', Component, opts);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { ComponentType } from 'react';
|
||||
import { AuthZGuardPage } from 'lib/authz/components/AuthZGuard/AuthZGuardPage';
|
||||
|
||||
import { createAuthZHOC, WithAuthZOptions } from './withAuthZ.utils';
|
||||
|
||||
export function withAuthZPage<P extends object>(
|
||||
Component: ComponentType<P>,
|
||||
opts: WithAuthZOptions<P>,
|
||||
): ComponentType<P> {
|
||||
return createAuthZHOC(AuthZGuardPage, 'withAuthZPage', Component, opts);
|
||||
}
|
||||
125
frontend/src/lib/authz/utils/README.md
Normal file
125
frontend/src/lib/authz/utils/README.md
Normal file
@@ -0,0 +1,125 @@
|
||||
# AuthZ Test Utilities
|
||||
|
||||
Helpers for testing permission-gated components.
|
||||
|
||||
## File Naming
|
||||
|
||||
AuthZ tests live in `*.authz.test.tsx` files alongside other test files:
|
||||
|
||||
```
|
||||
ComponentName/
|
||||
├── ComponentName.tsx
|
||||
├── __tests__/
|
||||
│ ├── ComponentName.test.tsx # functional tests
|
||||
│ └── ComponentName.authz.test.tsx # permission tests
|
||||
```
|
||||
|
||||
## Test Structure
|
||||
|
||||
```tsx
|
||||
import { server } from 'mocks-server/server';
|
||||
import { setupAuthzAdmin, setupAuthzDenyAll } from 'lib/authz/utils/authz-test-utils';
|
||||
import { render, screen, waitFor } from 'tests/test-utils';
|
||||
|
||||
describe('ComponentName - AuthZ', () => {
|
||||
afterEach(() => {
|
||||
jest.restoreAllMocks();
|
||||
server.resetHandlers(); // reset MSW handlers after each test
|
||||
});
|
||||
|
||||
describe('permission denied', () => {
|
||||
it('shows permission denied when read denied', async () => {
|
||||
server.use(setupAuthzDenyAll());
|
||||
|
||||
render(<ComponentName />);
|
||||
|
||||
await expect(
|
||||
screen.findByText(/not authorized/i),
|
||||
).resolves.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('permission granted', () => {
|
||||
it('renders content when permitted', async () => {
|
||||
server.use(setupAuthzAdmin());
|
||||
|
||||
render(<ComponentName />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('protected-content')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Key points:
|
||||
- Use `server.use()` at start of each test (not `beforeEach`) for explicit setup
|
||||
- Call `server.resetHandlers()` in `afterEach` to avoid test pollution
|
||||
- Use `waitFor` or `findBy*` queries since authz checks are async
|
||||
- Group tests by permission scenario: denied, granted, partial, loading
|
||||
|
||||
## MSW Handlers
|
||||
|
||||
Mock `/api/v1/authz/check` endpoint responses.
|
||||
|
||||
```tsx
|
||||
import { server } from 'mocks-server/server';
|
||||
import {
|
||||
setupAuthzAdmin,
|
||||
setupAuthzDenyAll,
|
||||
setupAuthzDeny,
|
||||
setupAuthzAllow,
|
||||
setupAuthzGrantByPrefix,
|
||||
} from 'lib/authz/utils/authz-test-utils';
|
||||
|
||||
// Grant all permissions
|
||||
server.use(setupAuthzAdmin());
|
||||
|
||||
// Deny all permissions
|
||||
server.use(setupAuthzDenyAll());
|
||||
|
||||
// Grant all except specific permissions
|
||||
server.use(setupAuthzDeny(RoleCreatePermission, RoleDeletePermission));
|
||||
|
||||
// Deny all except specific permissions
|
||||
server.use(setupAuthzAllow(RoleListPermission));
|
||||
|
||||
// Grant by relation prefix (e.g., grant read/delete, deny update)
|
||||
server.use(setupAuthzGrantByPrefix('read', 'delete'));
|
||||
```
|
||||
|
||||
## Custom Mock Response
|
||||
|
||||
For fine-grained control over responses.
|
||||
|
||||
```tsx
|
||||
import { rest } from 'msw';
|
||||
import { AUTHZ_CHECK_URL, authzMockResponse } from 'lib/authz/utils/authz-test-utils';
|
||||
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = await req.json();
|
||||
// [true, false] = first permission granted, second denied
|
||||
return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true, false])));
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
## Testing Loading State
|
||||
|
||||
Use `ctx.delay('infinite')` to hold response indefinitely:
|
||||
|
||||
```tsx
|
||||
it('shows skeleton while checking permissions', () => {
|
||||
server.use(
|
||||
rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) =>
|
||||
res(ctx.delay('infinite')),
|
||||
),
|
||||
);
|
||||
|
||||
render(<ComponentName />);
|
||||
|
||||
expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
|
||||
});
|
||||
```
|
||||
@@ -104,6 +104,25 @@ export function setupAuthzAllow(
|
||||
});
|
||||
}
|
||||
|
||||
/** Grants permissions that start with any of the given prefixes. */
|
||||
export function setupAuthzGrantByPrefix(...prefixes: string[]): RestHandler {
|
||||
return rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
|
||||
const payload = (await req.json()) as AuthtypesTransactionDTO[];
|
||||
return res(
|
||||
ctx.status(200),
|
||||
ctx.json(
|
||||
authzMockResponse(
|
||||
payload,
|
||||
payload.map((txn) => {
|
||||
const perm = gettableTransactionToPermission(txn);
|
||||
return prefixes.some((prefix) => perm.startsWith(prefix));
|
||||
}),
|
||||
),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function buildLicense(
|
||||
overrides?: Partial<LicenseResModel>,
|
||||
): LicenseResModel {
|
||||
|
||||
@@ -26,8 +26,8 @@ export default function AIAssistantPage(): JSX.Element {
|
||||
|
||||
// Skip the mount-time Opened fire when the user expanded an already-open
|
||||
// drawer/modal — that surface already emitted Opened with the right source.
|
||||
// Router state (vs a module flag) survives StrictMode double-mount and
|
||||
// aborted navigations.
|
||||
// Router state (vs a module flag) survives page remounts and aborted
|
||||
// navigations.
|
||||
const fromInApp = location.state?.fromInApp === true;
|
||||
useEffect(() => {
|
||||
if (fromInApp) {
|
||||
@@ -52,18 +52,34 @@ export default function AIAssistantPage(): JSX.Element {
|
||||
(s) => s.startNewConversation,
|
||||
);
|
||||
|
||||
// Keep a ref so the effect can read latest conversations without re-firing
|
||||
// when startNewConversation mutates the store mid-effect.
|
||||
// Keep refs so the effect can read the latest store state without re-firing
|
||||
// when it mutates the store mid-effect (it only depends on the URL param).
|
||||
const conversationsRef = useRef(conversations);
|
||||
conversationsRef.current = conversations;
|
||||
const activeConversationIdRef = useRef(activeConversationId);
|
||||
activeConversationIdRef.current = activeConversationId;
|
||||
|
||||
useEffect(() => {
|
||||
if (conversationsRef.current[conversationId]) {
|
||||
// URL points at a known conversation → just activate it.
|
||||
if (conversationId && conversationsRef.current[conversationId]) {
|
||||
setActiveConversation(conversationId);
|
||||
} else {
|
||||
const newId = startNewConversation();
|
||||
history.replace(ROUTES.AI_ASSISTANT.replace(':conversationId', newId));
|
||||
return;
|
||||
}
|
||||
|
||||
// The URL has no usable conversation id (bare `/ai-assistant`, or a stale
|
||||
// param). Prefer resuming the active conversation — including the
|
||||
// rehydrating placeholder for the persisted thread — over minting a new
|
||||
// one. This is what stops a throwaway blank chat from flashing as a
|
||||
// second thread during load, and stops a duplicate when the page
|
||||
// remounts during startup route churn (the active id is already set, so
|
||||
// we resume instead of create). Starting fresh is the last resort, only
|
||||
// when there is genuinely nothing to resume.
|
||||
const activeId = activeConversationIdRef.current;
|
||||
const resumeId =
|
||||
activeId && conversationsRef.current[activeId]
|
||||
? activeId
|
||||
: startNewConversation();
|
||||
history.replace(ROUTES.AI_ASSISTANT.replace(':conversationId', resumeId));
|
||||
// Only re-run when the URL param changes, not when conversations mutates.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [conversationId]);
|
||||
|
||||
@@ -0,0 +1,181 @@
|
||||
import { MemoryRouter, Route } from 'react-router-dom';
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { render } from '@testing-library/react';
|
||||
import ROUTES from 'constants/routes';
|
||||
import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
|
||||
|
||||
jest.mock('api/common/logEvent', () => ({
|
||||
__esModule: true,
|
||||
default: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('container/AIAssistant/ConversationView', () => ({
|
||||
__esModule: true,
|
||||
default: (): JSX.Element => <div data-testid="conversation-view" />,
|
||||
}));
|
||||
|
||||
jest.mock('container/AIAssistant/components/ConversationsList', () => ({
|
||||
__esModule: true,
|
||||
default: (): JSX.Element => <div data-testid="conversations-list" />,
|
||||
}));
|
||||
|
||||
jest.mock('components/Noz/Noz', () => ({
|
||||
__esModule: true,
|
||||
default: (): JSX.Element => <div data-testid="noz" />,
|
||||
}));
|
||||
|
||||
jest.mock('container/AIAssistant/hooks/useAIAssistantAnalyticsContext', () => ({
|
||||
normalizePage: (page: string): string => page,
|
||||
useAIAssistantAnalyticsContext: (): unknown => ({ mode: 'page' }),
|
||||
}));
|
||||
|
||||
// eslint-disable-next-line import/first
|
||||
import AIAssistantPage from '../AIAssistantPage';
|
||||
|
||||
function renderAt(entry: string): { unmount: () => void } {
|
||||
return render(
|
||||
<MemoryRouter initialEntries={[entry]}>
|
||||
<Route
|
||||
exact
|
||||
path={[ROUTES.AI_ASSISTANT_BASE, ROUTES.AI_ASSISTANT]}
|
||||
component={AIAssistantPage}
|
||||
/>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
}
|
||||
|
||||
function renderAtBase(): { unmount: () => void } {
|
||||
return renderAt(ROUTES.AI_ASSISTANT_BASE);
|
||||
}
|
||||
|
||||
function conversationCount(): number {
|
||||
return Object.keys(useAIAssistantStore.getState().conversations).length;
|
||||
}
|
||||
|
||||
function conversationIds(): string[] {
|
||||
return Object.keys(useAIAssistantStore.getState().conversations);
|
||||
}
|
||||
|
||||
function activeId(): string | null {
|
||||
return useAIAssistantStore.getState().activeConversationId;
|
||||
}
|
||||
|
||||
describe('AIAssistantPage', () => {
|
||||
beforeEach(() => {
|
||||
useAIAssistantStore.setState({
|
||||
conversations: {},
|
||||
streams: {},
|
||||
activeConversationId: null,
|
||||
});
|
||||
});
|
||||
|
||||
it('opens exactly one conversation when navigating to /ai-assistant', () => {
|
||||
const { unmount } = renderAtBase();
|
||||
|
||||
expect(conversationCount()).toBe(1);
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it('does not stack a second conversation when the page remounts at the bare URL (route churn)', () => {
|
||||
// First mount at `/ai-assistant` creates one blank conversation and
|
||||
// redirects to `/ai-assistant/:id`.
|
||||
const { unmount } = renderAtBase();
|
||||
expect(conversationCount()).toBe(1);
|
||||
const firstId = conversationIds()[0];
|
||||
|
||||
// Startup route-list churn unmounts and remounts the page while the URL
|
||||
// is momentarily back at the bare `/ai-assistant`. This previously
|
||||
// created a second blank conversation — now it reuses the first.
|
||||
unmount();
|
||||
const { unmount: unmount2 } = renderAtBase();
|
||||
|
||||
expect(conversationCount()).toBe(1);
|
||||
// The surviving conversation is the original one, resumed — not a fresh mint.
|
||||
expect(conversationIds()).toStrictEqual([firstId]);
|
||||
expect(activeId()).toBe(firstId);
|
||||
|
||||
unmount2();
|
||||
});
|
||||
|
||||
it('activates the conversation named in the URL without creating a new one', () => {
|
||||
useAIAssistantStore.setState({
|
||||
conversations: {
|
||||
existing: {
|
||||
id: 'existing',
|
||||
messages: [],
|
||||
createdAt: 1,
|
||||
updatedAt: 1,
|
||||
},
|
||||
},
|
||||
streams: {},
|
||||
activeConversationId: null,
|
||||
});
|
||||
|
||||
const { unmount } = renderAt(
|
||||
ROUTES.AI_ASSISTANT.replace(':conversationId', 'existing'),
|
||||
);
|
||||
|
||||
expect(conversationCount()).toBe(1);
|
||||
expect(activeId()).toBe('existing');
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it('resumes the active conversation on /ai-assistant/new instead of minting a new one', () => {
|
||||
// The sidenav only routes to `/ai-assistant/new` as a fallback, but if an
|
||||
// active conversation exists the page must resume it rather than spawn a
|
||||
// throwaway blank thread for the unknown "new" param.
|
||||
useAIAssistantStore.setState({
|
||||
conversations: {
|
||||
active: {
|
||||
id: 'active',
|
||||
messages: [],
|
||||
createdAt: 1,
|
||||
updatedAt: 1,
|
||||
},
|
||||
},
|
||||
streams: {},
|
||||
activeConversationId: 'active',
|
||||
});
|
||||
|
||||
const { unmount } = renderAt(
|
||||
ROUTES.AI_ASSISTANT.replace(':conversationId', 'new'),
|
||||
);
|
||||
|
||||
expect(conversationCount()).toBe(1);
|
||||
expect(conversationIds()).toStrictEqual(['active']);
|
||||
expect(activeId()).toBe('active');
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it('resumes the persisted (hydrating) conversation during load instead of creating a second', () => {
|
||||
// Simulates `onRehydrateStorage` priming the persisted active
|
||||
// conversation as a hydrating placeholder before `fetchThreads` resolves.
|
||||
useAIAssistantStore.setState({
|
||||
conversations: {
|
||||
persisted: {
|
||||
id: 'persisted',
|
||||
messages: [],
|
||||
createdAt: 1,
|
||||
updatedAt: 1,
|
||||
isHydrating: true,
|
||||
},
|
||||
},
|
||||
streams: {},
|
||||
activeConversationId: 'persisted',
|
||||
});
|
||||
|
||||
const { unmount } = renderAtBase();
|
||||
|
||||
// Opening the bare URL must resume the persisted conversation, not mint a
|
||||
// throwaway blank alongside it (which flashed as a 2nd thread during load).
|
||||
expect(conversationCount()).toBe(1);
|
||||
expect(
|
||||
Object.keys(useAIAssistantStore.getState().conversations),
|
||||
).toStrictEqual(['persisted']);
|
||||
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
@@ -29,7 +29,7 @@ type module struct {
|
||||
}
|
||||
|
||||
func NewModule(store llmpricingruletypes.Store, flagger flagger.Flagger, querier querier.Querier) llmpricingrule.Module {
|
||||
return &module{store: store, flagger: flagger}
|
||||
return &module{store: store, flagger: flagger, querier: querier}
|
||||
}
|
||||
|
||||
func (module *module) List(ctx context.Context, orgID valuer.UUID, offset, limit int, search string, isOverride *bool) ([]*llmpricingruletypes.LLMPricingRule, int, error) {
|
||||
|
||||
Reference in New Issue
Block a user