mirror of
https://github.com/Unleash/unleash.git
synced 2025-10-22 11:18:20 +02:00
12ff4abe6a
https://linear.app/unleash/issue/2-1937/incoming-webhook-events-ui This PR implements the UI for incoming webhook events. We're also introducing a new `SidePanelList` component that we'll be able to reuse when we tackle action set events. This PR also promotes `ReactJSONEditor` to a common component and adapts it slightly for this use case.   We're refreshing the events view every 5s, so if you're monitoring events for a specific incoming webhook you can see the latest ones coming in. We load 20 (configurable through the hook) events by default. Everytime you reach the end of the list you can load 20 more events until you reach the end of the event list. 
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { styled } from '@mui/material';
|
|
import {
|
|
SidePanelListColumn,
|
|
StyledSidePanelListColumn,
|
|
} from './SidePanelList';
|
|
|
|
const StyledHeader = styled('div')(({ theme }) => ({
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
borderTopLeftRadius: theme.shape.borderRadiusMedium,
|
|
borderTopRightRadius: theme.shape.borderRadiusMedium,
|
|
backgroundColor: theme.palette.table.headerBackground,
|
|
}));
|
|
|
|
const StyledHeaderHalf = styled('div')({
|
|
display: 'flex',
|
|
flex: 1,
|
|
});
|
|
|
|
interface ISidePanelListHeaderProps<T> {
|
|
columns: SidePanelListColumn<T>[];
|
|
sidePanelHeader: string;
|
|
}
|
|
|
|
export const SidePanelListHeader = <T,>({
|
|
columns,
|
|
sidePanelHeader,
|
|
}: ISidePanelListHeaderProps<T>) => (
|
|
<StyledHeader>
|
|
<StyledHeaderHalf>
|
|
{columns.map(({ header, maxWidth, align }) => (
|
|
<StyledSidePanelListColumn
|
|
key={header}
|
|
maxWidth={maxWidth}
|
|
align={align}
|
|
>
|
|
{header}
|
|
</StyledSidePanelListColumn>
|
|
))}
|
|
</StyledHeaderHalf>
|
|
<StyledHeaderHalf>
|
|
<StyledSidePanelListColumn>
|
|
{sidePanelHeader}
|
|
</StyledSidePanelListColumn>
|
|
</StyledHeaderHalf>
|
|
</StyledHeader>
|
|
);
|