Skip to content

Commit d21c7b3

Browse files
adhityamamallanadhityamamallan
committed
add changes
Signed-off-by: Adhitya Mamallan <[email protected]>
1 parent 441ca78 commit d21c7b3

12 files changed

+1013
-33
lines changed

‎src/views/workflow-history-v2/workflow-history-event-details/__tests__/workflow-history-event-details.test.tsx‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import { render, screen } from '@/test-utils/rtl';
2+
3+
import { type WorkflowPageParams } from '@/views/workflow-page/workflow-page.types';
4+
5+
import WorkflowHistoryEventDetails from '../workflow-history-event-details';
6+
import { type EventDetailsEntries } from '../workflow-history-event-details.types';
7+
8+
jest.mock(
9+
'../../workflow-history-group-details-json/workflow-history-group-details-json',
10+
() =>
11+
jest.fn(
12+
({
13+
entryPath,
14+
entryValue,
15+
isNegative,
16+
}: {
17+
entryPath: string;
18+
entryValue: any;
19+
isNegative?: boolean;
20+
}) => (
21+
<div data-testid="group-details-json">
22+
JSON: {entryPath} = {JSON.stringify(entryValue)}
23+
{isNegative && ' (negative)'}
24+
</div>
25+
)
26+
)
27+
);
28+
29+
jest.mock(
30+
'@/views/workflow-history/workflow-history-event-details-group/workflow-history-event-details-group',
31+
() =>
32+
jest.fn(({ entries }: { entries: EventDetailsEntries }) => (
33+
<div data-testid="event-details-group">
34+
Event Details Group ({entries.length} entries)
35+
</div>
36+
))
37+
);
38+
39+
describe(WorkflowHistoryEventDetails.name, () => {
40+
it('renders "No Details" when eventDetails is empty', () => {
41+
setup({ eventDetails: [] });
42+
43+
expect(screen.getByText('No Details')).toBeInTheDocument();
44+
expect(screen.queryByTestId('group-details-json')).not.toBeInTheDocument();
45+
expect(screen.queryByTestId('event-details-group')).not.toBeInTheDocument();
46+
});
47+
48+
it('renders only rest details when no entries have showInPanels', () => {
49+
const eventDetails: EventDetailsEntries = [
50+
{
51+
key: 'key1',
52+
path: 'path1',
53+
value: 'value1',
54+
isGroup: false,
55+
renderConfig: {
56+
name: 'Test Config',
57+
key: 'key1',
58+
},
59+
},
60+
{
61+
key: 'key2',
62+
path: 'path2',
63+
value: 'value2',
64+
isGroup: false,
65+
renderConfig: null,
66+
},
67+
];
68+
69+
setup({ eventDetails });
70+
71+
expect(screen.queryByTestId('group-details-json')).not.toBeInTheDocument();
72+
expect(screen.getByTestId('event-details-group')).toBeInTheDocument();
73+
expect(
74+
screen.getByText('Event Details Group (2 entries)')
75+
).toBeInTheDocument();
76+
});
77+
78+
it('renders panel details when entries have showInPanels flag', () => {
79+
const eventDetails: EventDetailsEntries = [
80+
{
81+
key: 'key1',
82+
path: 'path1',
83+
value: 'value1',
84+
isGroup: false,
85+
renderConfig: {
86+
name: 'Panel Config',
87+
key: 'key1',
88+
showInPanels: true,
89+
},
90+
},
91+
{
92+
key: 'key2',
93+
path: 'path2',
94+
value: 'value2',
95+
isGroup: false,
96+
renderConfig: {
97+
name: 'Rest Config',
98+
key: 'key2',
99+
},
100+
},
101+
];
102+
103+
setup({ eventDetails });
104+
105+
expect(screen.getByTestId('group-details-json')).toBeInTheDocument();
106+
expect(screen.getByText(/JSON: path1 = "value1"/)).toBeInTheDocument();
107+
expect(screen.getByTestId('event-details-group')).toBeInTheDocument();
108+
expect(
109+
screen.getByText('Event Details Group (1 entries)')
110+
).toBeInTheDocument();
111+
});
112+
113+
it('renders multiple panel details', () => {
114+
const eventDetails: EventDetailsEntries = [
115+
{
116+
key: 'key1',
117+
path: 'path1',
118+
value: 'value1',
119+
isGroup: false,
120+
renderConfig: {
121+
name: 'Panel Config 1',
122+
key: 'key1',
123+
showInPanels: true,
124+
},
125+
},
126+
{
127+
key: 'key2',
128+
path: 'path2',
129+
value: { nested: 'value2' },
130+
isGroup: false,
131+
renderConfig: {
132+
name: 'Panel Config 2',
133+
key: 'key2',
134+
showInPanels: true,
135+
},
136+
},
137+
{
138+
key: 'key3',
139+
path: 'path3',
140+
value: 'value3',
141+
isGroup: false,
142+
renderConfig: {
143+
name: 'Rest Config',
144+
key: 'key3',
145+
},
146+
},
147+
];
148+
149+
setup({ eventDetails });
150+
151+
const jsonComponents = screen.getAllByTestId('group-details-json');
152+
expect(jsonComponents).toHaveLength(2);
153+
expect(screen.getByText(/JSON: path1 = "value1"/)).toBeInTheDocument();
154+
expect(
155+
screen.getByText(/JSON: path2 = \{"nested":"value2"\}/)
156+
).toBeInTheDocument();
157+
expect(screen.getByTestId('event-details-group')).toBeInTheDocument();
158+
expect(
159+
screen.getByText('Event Details Group (1 entries)')
160+
).toBeInTheDocument();
161+
});
162+
163+
it('passes correct props to WorkflowHistoryGroupDetailsJson', () => {
164+
const eventDetails: EventDetailsEntries = [
165+
{
166+
key: 'key1',
167+
path: 'path1',
168+
value: 'value1',
169+
isGroup: false,
170+
isNegative: true,
171+
renderConfig: {
172+
name: 'Panel Config',
173+
key: 'key1',
174+
showInPanels: true,
175+
},
176+
},
177+
];
178+
179+
setup({ eventDetails });
180+
181+
expect(screen.getByText(/JSON: path1 = "value1"/)).toBeInTheDocument();
182+
expect(screen.getByText(/\(negative\)/)).toBeInTheDocument();
183+
});
184+
});
185+
186+
function setup({
187+
eventDetails,
188+
workflowPageParams = {
189+
domain: 'test-domain',
190+
cluster: 'test-cluster',
191+
workflowId: 'test-workflow-id',
192+
runId: 'test-run-id',
193+
},
194+
}: {
195+
eventDetails: EventDetailsEntries;
196+
workflowPageParams?: WorkflowPageParams;
197+
}) {
198+
render(
199+
<WorkflowHistoryEventDetails
200+
eventDetails={eventDetails}
201+
workflowPageParams={workflowPageParams}
202+
/>
203+
);
204+
}

‎src/views/workflow-history-v2/workflow-history-event-details/workflow-history-event-details.styles.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { styled as createStyled, type Theme } from 'baseui';
2+
3+
export const styled = {
4+
EmptyDetails: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
5+
...$theme.typography.LabelXSmall,
6+
color: $theme.colors.contentTertiary,
7+
textAlign: 'center',
8+
padding: `${$theme.sizing.scale700} 0`,
9+
})),
10+
EventDetailsContainer: createStyled('div', {
11+
display: 'flex',
12+
flexDirection: 'column',
13+
}),
14+
PanelDetails: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
15+
display: 'flex',
16+
flexDirection: 'column',
17+
[$theme.mediaQuery.medium]: {
18+
flexDirection: 'row',
19+
},
20+
gap: $theme.sizing.scale500,
21+
paddingBottom: $theme.sizing.scale500,
22+
alignItems: 'stretch',
23+
})),
24+
PanelContainer: createStyled('div', {
25+
flex: 1,
26+
}),
27+
RestDetails: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
28+
paddingLeft: $theme.sizing.scale100,
29+
paddingRight: $theme.sizing.scale100,
30+
})),
31+
};

‎src/views/workflow-history-v2/workflow-history-event-details/workflow-history-event-details.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { useMemo } from 'react';
2+
3+
import WorkflowHistoryEventDetailsGroup from '@/views/workflow-history/workflow-history-event-details-group/workflow-history-event-details-group';
4+
import { type WorkflowPageParams } from '@/views/workflow-page/workflow-page.types';
5+
6+
import WorkflowHistoryGroupDetailsJson from '../workflow-history-group-details-json/workflow-history-group-details-json';
7+
8+
import { styled } from './workflow-history-event-details.styles';
9+
import {
10+
type EventDetailsEntries,
11+
type EventDetailsSingleEntry,
12+
} from './workflow-history-event-details.types';
13+
14+
export default function WorkflowHistoryEventDetails({
15+
eventDetails,
16+
workflowPageParams,
17+
}: {
18+
eventDetails: EventDetailsEntries;
19+
workflowPageParams: WorkflowPageParams;
20+
}) {
21+
const [panelDetails, restDetails] = useMemo(
22+
() =>
23+
eventDetails.reduce<
24+
[Array<EventDetailsSingleEntry>, EventDetailsEntries]
25+
>(
26+
([panels, rest], entry) => {
27+
if (entry.renderConfig?.showInPanels && !entry.isGroup) {
28+
panels.push(entry);
29+
} else {
30+
rest.push(entry);
31+
}
32+
33+
return [panels, rest];
34+
},
35+
[[], []]
36+
),
37+
[eventDetails]
38+
);
39+
40+
if (eventDetails.length === 0) {
41+
return <styled.EmptyDetails>No Details</styled.EmptyDetails>;
42+
}
43+
44+
return (
45+
<styled.EventDetailsContainer>
46+
{panelDetails.length > 0 && (
47+
<styled.PanelDetails>
48+
{panelDetails.map((detail) => (
49+
<styled.PanelContainer key={detail.path}>
50+
<WorkflowHistoryGroupDetailsJson
51+
entryPath={detail.path}
52+
entryValue={detail.value}
53+
isNegative={detail.isNegative}
54+
{...workflowPageParams}
55+
/>
56+
</styled.PanelContainer>
57+
))}
58+
</styled.PanelDetails>
59+
)}
60+
<styled.RestDetails>
61+
<WorkflowHistoryEventDetailsGroup
62+
entries={restDetails}
63+
decodedPageUrlParams={{
64+
...workflowPageParams,
65+
workflowTab: 'history',
66+
}}
67+
/>
68+
</styled.RestDetails>
69+
</styled.EventDetailsContainer>
70+
);
71+
}

0 commit comments

Comments
 (0)