chore: action events UI development

Unleash · Feb 27, 2024 · c891e01 · c891e01
1 parent 08c8051
commit c891e01
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 5 deletions.
diff --git a/...ProjectActionsEventsModal/ProjectActionsEventsDetails.tsx/ProjectActionsEventsDetails.tsx b/...ProjectActionsEventsModal/ProjectActionsEventsDetails.tsx/ProjectActionsEventsDetails.tsx
@@ -1,6 +1,7 @@
 import { Alert, styled } from '@mui/material';
 import { IActionSetEvent } from 'interfaces/action';
 import { ProjectActionsEventsDetailsAction } from './ProjectActionsEventsDetailsAction';
+import { ProjectActionsEventsDetailsSource } from './ProjectActionsEventsDetailsSource/ProjectActionsEventsDetailsSource';
 
 const StyledDetails = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -26,9 +27,9 @@ export const ProjectActionsEventsDetails = ({
             <Alert severity={state === 'failed' ? 'error' : 'success'}>
                 {stateText}
             </Alert>
-            {/* <ProjectActionsEventsDetailsSource
+            <ProjectActionsEventsDetailsSource
                 observableEvent={observableEvent}
-            /> */}
+            />
             {actions.map((action, i) => (
                 <ProjectActionsEventsDetailsAction
                     key={action.id}

diff --git a/...EventsDetails.tsx/ProjectActionsEventsDetailsSource/ProjectActionsEventsDetailsSource.tsx b/...EventsDetails.tsx/ProjectActionsEventsDetailsSource/ProjectActionsEventsDetailsSource.tsx
@@ -0,0 +1,22 @@
+import { IObservableEvent } from 'interfaces/action';
+import { ProjectActionsEventsDetailsSourceIncomingWebhook } from './ProjectActionsEventsDetailsSourceIncomingWebhook';
+
+interface IProjectActionsEventsDetailsSourceProps {
+    observableEvent: IObservableEvent;
+}
+
+export const ProjectActionsEventsDetailsSource = ({
+    observableEvent,
+}: IProjectActionsEventsDetailsSourceProps) => {
+    const { source } = observableEvent;
+
+    if (source === 'incoming-webhook') {
+        return (
+            <ProjectActionsEventsDetailsSourceIncomingWebhook
+                observableEvent={observableEvent}
+            />
+        );
+    }
+
+    return null;
+};
diff --git a/...sx/ProjectActionsEventsDetailsSource/ProjectActionsEventsDetailsSourceIncomingWebhook.tsx b/...sx/ProjectActionsEventsDetailsSource/ProjectActionsEventsDetailsSourceIncomingWebhook.tsx
@@ -0,0 +1,75 @@
+import { ExpandMore } from '@mui/icons-material';
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    IconButton,
+    styled,
+} from '@mui/material';
+import { useIncomingWebhooks } from 'hooks/api/getters/useIncomingWebhooks/useIncomingWebhooks';
+import { IObservableEvent } from 'interfaces/action';
+import { Suspense, lazy, useMemo } from 'react';
+import { Link } from 'react-router-dom';
+
+const LazyReactJSONEditor = lazy(
+    () => import('component/common/ReactJSONEditor/ReactJSONEditor'),
+);
+
+const StyledAccordion = styled(Accordion)(({ theme }) => ({
+    boxShadow: 'none',
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadiusMedium,
+    '&:before': {
+        display: 'none',
+    },
+}));
+
+const StyledLink = styled(Link)(({ theme }) => ({
+    marginLeft: theme.spacing(1),
+}));
+
+interface IProjectActionsEventsDetailsSourceIncomingWebhookProps {
+    observableEvent: IObservableEvent;
+}
+
+export const ProjectActionsEventsDetailsSourceIncomingWebhook = ({
+    observableEvent,
+}: IProjectActionsEventsDetailsSourceIncomingWebhookProps) => {
+    const { incomingWebhooks } = useIncomingWebhooks();
+
+    const incomingWebhookName = useMemo(() => {
+        const incomingWebhook = incomingWebhooks.find(
+            (incomingWebhook) =>
+                incomingWebhook.id === observableEvent.sourceId,
+        );
+
+        return incomingWebhook?.name;
+    }, [incomingWebhooks, observableEvent.sourceId]);
+
+    return (
+        <StyledAccordion>
+            <AccordionSummary
+                expandIcon={
+                    <IconButton>
+                        <ExpandMore titleAccess='Toggle' />
+                    </IconButton>
+                }
+            >
+                Incoming webhook:
+                <StyledLink to='/integrations/incoming-webhooks'>
+                    {incomingWebhookName}
+                </StyledLink>
+            </AccordionSummary>
+            <AccordionDetails>
+                <Suspense fallback={null}>
+                    <LazyReactJSONEditor
+                        content={{ json: observableEvent.payload }}
+                        readOnly
+                        statusBar={false}
+                        editorStyle='sidePanel'
+                    />
+                </Suspense>
+            </AccordionDetails>
+        </StyledAccordion>
+    );
+};
diff --git a/...rojectActions/ProjectActionsTable/ProjectActionsEventsModal/ProjectActionsEventsModal.tsx b/...rojectActions/ProjectActionsTable/ProjectActionsEventsModal/ProjectActionsEventsModal.tsx
@@ -122,10 +122,10 @@ export const ProjectActionsEventsModal = ({
                         ]}
                         sidePanelHeader='Details'
                         renderContent={ProjectActionsEventsDetails}
-                        renderItem={({ state }, children) => {
+                        renderItem={({ id, state }, children) => {
                             if (state === 'failed') {
                                 return (
-                                    <StyledFailedItemWrapper>
+                                    <StyledFailedItemWrapper key={id}>
                                         {children}
                                     </StyledFailedItemWrapper>
                                 );

diff --git a/frontend/src/interfaces/action.ts b/frontend/src/interfaces/action.ts
@@ -29,7 +29,7 @@ export interface IAction {
 
 export type ObservableEventSource = 'incoming-webhook';
 
-interface IObservableEvent {
+export interface IObservableEvent {
     id: number;
     source: ObservableEventSource;
     sourceId: number;