Skip to content
This repository has been archived by the owner on Oct 5, 2023. It is now read-only.

Commit

Permalink
feat: ADDON-65006 add group name to URL when redirecting with Menu (#429
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@vtsvetkov-splunk
vtsvetkov-splunk authored Sep 21, 2023
1 parent 5a3c94f commit 8fc7ea8
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 18 deletions.
16 changes: 9 additions & 7 deletions src/main/webapp/components/MenuInput.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,10 @@ const CustomSubTitle = styled.span`
font-weight: 500;
`;

export const ROOT_GROUP_NAME = 'main_panel';

function MenuInput({ handleRequestOpen }) {
const [activePanelId, setActivePanelId] = useState('main_panel');
const [activePanelId, setActivePanelId] = useState(ROOT_GROUP_NAME);
const [slidingPanelsTransition, setSlidingPanelsTransition] = useState('forward');
const [openDropDown, setOpenDropDown] = useState(false);
const [isSubMenu, setIsSubMenu] = useState(true);
Expand Down Expand Up @@ -85,7 +87,7 @@ function MenuInput({ handleRequestOpen }) {
<Menu.Item
icon={<ChevronLeft />}
onClick={() => {
setActivePanelId('main_panel');
setActivePanelId(ROOT_GROUP_NAME);
setSlidingPanelsTransition('backward');
}}
>
Expand All @@ -99,14 +101,14 @@ function MenuInput({ handleRequestOpen }) {
Object.keys(servicesGroup).map((groupsName) => (
<SlidingPanels.Panel key={groupsName} panelId={groupsName}>
<Menu>
{groupsName !== 'main_panel' && getBackButton()}
{groupsName !== ROOT_GROUP_NAME && getBackButton()}
{getMenuItems(servicesGroup[groupsName], groupsName)}
</Menu>
</SlidingPanels.Panel>
));

const getInputMenu = useMemo(() => {
const servicesGroup = { main_panel: [] };
const servicesGroup = { [ROOT_GROUP_NAME]: [] };
if (groupsMenu) {
groupsMenu.forEach((group) => {
if (group?.groupServices) {
Expand All @@ -120,13 +122,13 @@ function MenuInput({ handleRequestOpen }) {
?.subTitle,
});
});
servicesGroup.main_panel.push({
servicesGroup[ROOT_GROUP_NAME].push({
name: group.groupName,
title: group.groupTitle,
hasSubmenu: true,
});
} else {
servicesGroup.main_panel.push({
servicesGroup[ROOT_GROUP_NAME].push({
name: group.groupName,
title: group.groupTitle,
subTitle: services.find((service) => service.name === group.groupName)
Expand All @@ -136,7 +138,7 @@ function MenuInput({ handleRequestOpen }) {
}
});
} else {
servicesGroup.main_panel = services.map((service) => ({
servicesGroup[ROOT_GROUP_NAME] = services.map((service) => ({
name: service.name,
title: service.title,
subTitle: service.subTitle,
Expand Down
10 changes: 6 additions & 4 deletions src/main/webapp/pages/Input/InputPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { TableContextProvider } from '../../context/TableContext';
import { MODE_CREATE, MODE_CLONE, MODE_EDIT } from '../../constants/modes';
import { PAGE_INPUT } from '../../constants/pages';
import { STYLE_PAGE } from '../../constants/dialogStyles';
import MenuInput from '../../components/MenuInput';
import MenuInput, { ROOT_GROUP_NAME } from '../../components/MenuInput';
import TableWrapper from '../../components/table/TableWrapper';
import EntityModal from '../../components/EntityModal';
import ErrorBoundary from '../../components/ErrorBoundary';
Expand Down Expand Up @@ -118,8 +118,10 @@ function InputPage() {
// set query and push to navigate
query.set('service', serviceName);
query.set('action', MODE_CREATE);
if (input) {
query.set('input', input);
const selectedGroup = groupName && groupName !== ROOT_GROUP_NAME ? groupName : null;
const inputQueryValue = input || selectedGroup || serviceName;
if (inputQueryValue) {
query.set('input', inputQueryValue);
} else {
query.delete('input');
}
Expand Down Expand Up @@ -252,7 +254,7 @@ function InputPage() {
page={PAGE_INPUT}
serviceName={service.name}
handleRequestModalOpen={() =>
handleRequestOpen(service.name)
handleRequestOpen({ serviceName: service.name })
}
handleOpenPageStyleDialog={handleOpenPageStyleDialog}
/>
Expand Down
36 changes: 35 additions & 1 deletion src/main/webapp/pages/Input/InputPage.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import { render, screen, waitForElementToBeRemoved, act } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';

import userEvent from '@testing-library/user-event';
import InputPage from './InputPage';
import { mockCustomMenu, MockCustomRenderable } from '../../tests/helpers';

Expand All @@ -19,7 +20,7 @@ beforeEach(() => {
mockCustomMenuInstance = mockCustomMenu().mockCustomMenuInstance;
});

it('should redirect user on menu click', async () => {
it('custom menu should redirect user on menu click', async () => {
render(<InputPage />, { wrapper: BrowserRouter });

await waitForElementToBeRemoved(() => screen.queryByTestId('wait-spinner'));
Expand All @@ -43,3 +44,36 @@ it('should redirect user on menu click', async () => {
search: `service=${service}&action=${action}&input=${input}`,
});
});

it('click on menu item inside group should add input query to URL', async () => {
render(<InputPage />, { wrapper: BrowserRouter });

await waitForElementToBeRemoved(() => screen.queryByTestId('wait-spinner'));

await userEvent.click(screen.getByRole('button', { name: 'Create New Input' }));
expect(mockNavigateFn).not.toHaveBeenCalled();

await userEvent.click(screen.getByRole('menuitem', { name: 'Billing' }));
await userEvent.click(
screen.getByRole('menuitem', { name: 'Billing (Cost and Usage Report) (Recommended)' })
);

expect(mockNavigateFn).toHaveBeenCalledWith({
search: `service=aws_billing_cur&action=create&input=aws_billing_menu`,
});
});

it('click on root menu item should add input query to URL', async () => {
render(<InputPage />, { wrapper: BrowserRouter });

await waitForElementToBeRemoved(() => screen.queryByTestId('wait-spinner'));

await userEvent.click(screen.getByRole('button', { name: 'Create New Input' }));
expect(mockNavigateFn).not.toHaveBeenCalled();

await userEvent.click(screen.getByRole('menuitem', { name: 'CloudWatch' }));

expect(mockNavigateFn).toHaveBeenCalledWith({
search: `service=aws_cloudwatch&action=create&input=aws_cloudwatch`,
});
});
67 changes: 61 additions & 6 deletions src/main/webapp/util/__mocks__/mockUnifiedConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,17 @@ export const mockUnifiedConfig = {
},
actions: ['edit', 'delete', 'clone'],
},
groupsMenu: [
{
groupName: 'aws_billing_menu',
groupTitle: 'Billing',
groupServices: ['aws_billing_cur', 'aws_billing'],
},
{
groupName: 'aws_cloudwatch',
groupTitle: 'CloudWatch',
},
],
menu: {
src: 'CustomMenu',
type: 'external',
Expand All @@ -39,6 +50,7 @@ export const mockUnifiedConfig = {
{
name: 'aws_billing_cur',
title: 'Billing (Cost and Usage Report)',
subTitle: '(Recommended)',
style: 'page',
hook: {
src: 'Hook',
Expand Down Expand Up @@ -86,9 +98,6 @@ export const mockUnifiedConfig = {
label: 'Name',
type: 'text',
required: true,
options: {
placeholder: 'Required',
},
validators: [
{
type: 'regex',
Expand Down Expand Up @@ -157,9 +166,6 @@ export const mockUnifiedConfig = {
label: 'Name',
type: 'text',
required: true,
options: {
placeholder: 'Required',
},
validators: [
{
type: 'regex',
Expand All @@ -171,6 +177,55 @@ export const mockUnifiedConfig = {
},
],
},
{
name: 'aws_cloudwatch',
title: 'CloudWatch',
style: 'page',
hook: {
src: 'Hook',
type: 'external',
},
restHandlerName: 'aws_cloudwatch_inputs_rh',
groups: [
{
label: 'AWS Input Configuration',
options: {
isExpandable: false,
},
fields: [
'name',
'aws_account',
'aws_iam_role',
'aws_region',
'private_endpoint_enabled',
'sts_private_endpoint_url',
'monitoring_private_endpoint_url',
'elb_private_endpoint_url',
'ec2_private_endpoint_url',
'autoscaling_private_endpoint_url',
'lambda_private_endpoint_url',
's3_private_endpoint_url',
'metric_namespace',
],
},
{
label: 'Splunk-related Configuration',
options: {
isExpandable: false,
},
fields: ['sourcetype', 'index'],
},
{
label: 'Advanced Settings',
options: {
expand: false,
isExpandable: true,
},
fields: ['period'],
},
],
entity: [],
},
],
},
},
Expand Down

0 comments on commit 8fc7ea8

Please sign in to comment.