Skip to content

Commit 88cc0fd

Browse files
fellowsebfellowseb
committed
[frontend] Extract CustomView logic to CustomViewTabsWrapper and useCustomViewRoutes
1 parent 75d55db commit 88cc0fd

8 files changed

Lines changed: 401 additions & 292 deletions

File tree

‎opencti-platform/opencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectMain.test.tsx‎

Lines changed: 2 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
1-
import { describe, expect, it, vi } from 'vitest';
1+
import { describe, expect, it } from 'vitest';
22
import { screen } from '@testing-library/react';
33
import { Route } from 'react-router-dom';
4-
import testRender, { createMockUserContext } from '../../../../utils/tests/test-render';
4+
import testRender from '../../../../utils/tests/test-render';
55
import StixDomainObjectMain from './StixDomainObjectMain';
66
import { StixDomainObjectTabsBoxTab } from './StixDomainObjectTabsBox';
77

8-
const CUSTOM_VIEW_MOCK_CONTENT = 'A great custom view page';
9-
10-
vi.mock('@components/custom_views/Root', () => ({
11-
default: () => <span>{CUSTOM_VIEW_MOCK_CONTENT}</span>,
12-
__esModule: true,
13-
}));
14-
158
const TABS_TEST_DATA = [
169
['Overview', 'overview'],
1710
['Knowledge', 'knowledge'],
@@ -72,70 +65,4 @@ describe('StixDomainObjectMain', () => {
7265
);
7366
expect(screen.getByText(/This page is not found/i)).toBeInTheDocument();
7467
});
75-
76-
describe('when CUSTOM_VIEW feature flag is enabled', () => {
77-
it('renders custom view when on custom view route', () => {
78-
const customViewPath = 'my-custom-view-1504f07bee3f4c09ae66b9550eb3abe3';
79-
testRender(
80-
<StixDomainObjectMain
81-
entityType="Intrusion-Set"
82-
pages={{}}
83-
basePath=""
84-
/>,
85-
{
86-
route: customViewPath,
87-
userContext: createMockUserContext({
88-
settings: {
89-
platform_feature_flags: [{
90-
id: 'CUSTOM_VIEW',
91-
enable: true,
92-
}],
93-
},
94-
customViews: [{
95-
entity_type: 'Intrusion-Set',
96-
custom_views_info: [{
97-
id: '1504f07b-ee3f-4c09-ae66-b9550eb3abe3',
98-
name: 'My custom view',
99-
path: customViewPath,
100-
}],
101-
}],
102-
}),
103-
},
104-
);
105-
expect(screen.getByText(CUSTOM_VIEW_MOCK_CONTENT)).toBeInTheDocument();
106-
});
107-
});
108-
109-
describe('when CUSTOM_VIEW feature flag is disabled', () => {
110-
it('renders error 404 when on custom view route', () => {
111-
const customViewPath = 'my-custom-view-1504f07bee3f4c09ae66b9550eb3abe3';
112-
testRender(
113-
<StixDomainObjectMain
114-
entityType="Intrusion-Set"
115-
pages={{}}
116-
basePath=""
117-
/>,
118-
{
119-
route: customViewPath,
120-
userContext: createMockUserContext({
121-
settings: {
122-
platform_feature_flags: [{
123-
id: 'CUSTOM_VIEW',
124-
enable: false,
125-
}],
126-
},
127-
customViews: [{
128-
entity_type: 'Intrusion-Set',
129-
custom_views_info: [{
130-
id: '1504f07b-ee3f-4c09-ae66-b9550eb3abe3',
131-
name: 'My custom view',
132-
path: customViewPath,
133-
}],
134-
}],
135-
}),
136-
},
137-
);
138-
expect(screen.getByText(/This page is not found/i)).toBeInTheDocument();
139-
});
140-
});
14168
});

‎opencti-platform/opencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectMain.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { ReactElement, ReactNode } from 'react';
22
import { Route, Routes } from 'react-router-dom';
33
import StixDomainObjectTabsBox, { type StixDomainObjectTabsBoxTab } from './StixDomainObjectTabsBox';
4-
import RootCustomView from '@components/custom_views/Root';
5-
import { useCustomViews } from '@components/custom_views/useCustomViews';
64
import ErrorNotFound from '../../../../components/ErrorNotFound';
5+
import useCustomViewRoutes from '@components/custom_views/useCustomViewRoutes';
76

87
interface StixDomainObjectMainProps {
98
entityType: string;
@@ -21,7 +20,7 @@ const StixDomainObjectMain = ({
2120
extraRoutes,
2221
}: StixDomainObjectMainProps) => {
2322
const tabs = Object.keys(pages) as StixDomainObjectTabsBoxTab[];
24-
const { customViews } = useCustomViews(entityType);
23+
const customViewRoutes = useCustomViewRoutes({ entityType });
2524
return (
2625
<>
2726
<StixDomainObjectTabsBox
@@ -61,11 +60,7 @@ const StixDomainObjectMain = ({
6160
{tabs.includes('history') && (
6261
<Route path="/history" element={pages.history} />
6362
)}
64-
{
65-
customViews.map(({ path, id }) => (
66-
<Route key={path} path={path} element={<RootCustomView customViewId={id} />} />
67-
))
68-
}
63+
{...customViewRoutes}
6964
{extraRoutes}
7065
<Route path="*" element={<ErrorNotFound />} />
7166
</Routes>

‎opencti-platform/opencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectTabsBox.test.tsx‎

Lines changed: 1 addition & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { describe, expect, it } from 'vitest';
22
import { screen } from '@testing-library/react';
3-
import testRender, { createMockUserContext } from '../../../../utils/tests/test-render';
3+
import testRender from '../../../../utils/tests/test-render';
44
import StixDomainObjectTabsBox from './StixDomainObjectTabsBox';
55

66
const TABS_TEST_DATA = [
@@ -43,161 +43,4 @@ describe('StixDomainObjectTabsBox', () => {
4343
);
4444
expect(screen.getByText(/some extra action/i)).toBeInTheDocument();
4545
});
46-
47-
describe('when CUSTOM_VIEW feature flag is disabled', () => {
48-
it('does not render another tab when custom view available', () => {
49-
const customViewDisplayName = 'My custom view';
50-
const customViewPath = 'some-path';
51-
testRender(
52-
<StixDomainObjectTabsBox
53-
entityType="Intrusion-Set"
54-
tabs={[]}
55-
basePath=""
56-
/>,
57-
{
58-
userContext: createMockUserContext({
59-
settings: {
60-
platform_feature_flags: [{
61-
id: 'CUSTOM_VIEW',
62-
enable: false,
63-
}],
64-
},
65-
customViews: [{
66-
entity_type: 'Intrusion-Set',
67-
custom_views_info: [{
68-
id: '1504f07b-ee3f-4c09-ae66-b9550eb3abe3',
69-
name: customViewDisplayName,
70-
path: customViewPath,
71-
}],
72-
}],
73-
}),
74-
},
75-
);
76-
expect(screen.queryByRole('tab', {
77-
name: new RegExp(customViewDisplayName, 'i'),
78-
})).not.toBeInTheDocument();
79-
expect(screen.queryByRole('tab', {
80-
name: /Custom view/i,
81-
})).not.toBeInTheDocument();
82-
});
83-
});
84-
85-
describe('when CUSTOM_VIEW feature flag is enabled', () => {
86-
it('renders another tab when custom view available', () => {
87-
const customViewDisplayName = 'My custom view';
88-
const customViewPath = 'some-path';
89-
testRender(
90-
<StixDomainObjectTabsBox
91-
entityType="Intrusion-Set"
92-
tabs={[]}
93-
basePath=""
94-
/>,
95-
{
96-
userContext: createMockUserContext({
97-
settings: {
98-
platform_feature_flags: [{
99-
id: 'CUSTOM_VIEW',
100-
enable: true,
101-
}],
102-
},
103-
customViews: [{
104-
entity_type: 'Intrusion-Set',
105-
custom_views_info: [{
106-
id: '1504f07b-ee3f-4c09-ae66-b9550eb3abe3',
107-
name: customViewDisplayName,
108-
path: customViewPath,
109-
}],
110-
}],
111-
}),
112-
},
113-
);
114-
const tabElem = screen.getByRole('tab', { name: new RegExp(customViewDisplayName, 'i') });
115-
expect(tabElem).toBeInTheDocument();
116-
expect(tabElem).toHaveAttribute(
117-
'href',
118-
expect.stringMatching(new RegExp(`${customViewPath}$`)),
119-
);
120-
});
121-
122-
it('renders a "Custom view" tab when multiple custom views available', async () => {
123-
const { user } = testRender(
124-
<StixDomainObjectTabsBox
125-
entityType="Intrusion-Set"
126-
tabs={[]}
127-
basePath=""
128-
/>,
129-
{
130-
userContext: createMockUserContext({
131-
settings: {
132-
platform_feature_flags: [{
133-
id: 'CUSTOM_VIEW',
134-
enable: true,
135-
}],
136-
},
137-
customViews: [{
138-
entity_type: 'Intrusion-Set',
139-
custom_views_info: [{
140-
id: '1504f07b-ee3f-4c09-ae66-b9550eb3abe3',
141-
name: 'My first custom view',
142-
path: 'some-path',
143-
}, {
144-
id: '90ebf22f-2c36-4836-b21a-e114ed4ca2ab',
145-
name: 'My second custom view',
146-
path: 'some-other-path',
147-
}],
148-
}],
149-
}),
150-
},
151-
);
152-
const tabElem = screen.getByRole('tab', { name: /Custom view/i });
153-
expect(tabElem).toBeInTheDocument();
154-
await user.click(tabElem);
155-
const firstLinkElem = screen.getByRole('link', { name: /My first custom view/i });
156-
expect(firstLinkElem).toHaveAttribute(
157-
'href',
158-
expect.stringMatching(/some-path$/),
159-
);
160-
const secondLinkElem = screen.getByRole('link', { name: /My second custom view/i });
161-
expect(secondLinkElem).toHaveAttribute(
162-
'href',
163-
expect.stringMatching(/some-other-path$/),
164-
);
165-
});
166-
167-
it('does not renders another tab when custom view available but for other entity type', () => {
168-
const customViewDisplayName = 'My custom view';
169-
const customViewPath = 'some-path';
170-
testRender(
171-
<StixDomainObjectTabsBox
172-
entityType="Case-Rft"
173-
tabs={[]}
174-
basePath=""
175-
/>,
176-
{
177-
userContext: createMockUserContext({
178-
settings: {
179-
platform_feature_flags: [{
180-
id: 'CUSTOM_VIEW',
181-
enable: true,
182-
}],
183-
},
184-
customViews: [{
185-
entity_type: 'Intrusion-Set',
186-
custom_views_info: [{
187-
id: '1504f07b-ee3f-4c09-ae66-b9550eb3abe3',
188-
name: customViewDisplayName,
189-
path: customViewPath,
190-
}],
191-
}],
192-
}),
193-
},
194-
);
195-
expect(screen.queryByRole('tab', {
196-
name: new RegExp(customViewDisplayName, 'i'),
197-
})).not.toBeInTheDocument();
198-
expect(screen.queryByRole('tab', {
199-
name: /Custom view/i,
200-
})).not.toBeInTheDocument();
201-
});
202-
});
20346
});

0 commit comments

Comments
 (0)