diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/EventsLog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/EventsLog.tsx index 25972d2755..4943bf092c 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/EventsLog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/EventsLog.tsx @@ -27,7 +27,7 @@ const ErrorSummary = styled(Box)(({ theme }) => ({ border: `5px solid ${theme.palette.error.main}`, })); -const Response = styled(Box)(({ theme }) => ({ +const Response = styled(Box)(() => ({ fontSize: "1em", margin: 1, maxWidth: "contentWrap", @@ -35,6 +35,15 @@ const Response = styled(Box)(({ theme }) => ({ whiteSpace: "pre-wrap", })); +// Style the table container like an event feed with bottom-anchored scroll +const Feed = styled(TableContainer)(() => ({ + maxHeight: "60vh", + overflow: "auto", + display: "flex", + flexDirection: "column-reverse", + readingOrder: "flex-visual", +})); + const EventsLog: React.FC = ({ submissions, loading, @@ -61,10 +70,10 @@ const EventsLog: React.FC = ({ ); return ( - - + +
- + *": { borderBottomColor: "black !important" } }}> Event @@ -86,7 +95,7 @@ const EventsLog: React.FC = ({ ))}
-
+ ); }; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx index 20e98c157a..b7b3b964d3 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx @@ -46,12 +46,13 @@ export interface GetSubmissionsResponse { const Submissions: React.FC = () => { const flowId = useStore((state) => state.id); + // submission_services_log view is already filtered for events >= Jan 1 2024 const { data, loading, error } = useQuery<{ submissions: Submission[] }>( gql` query GetSubmissions($flow_id: uuid!) { submissions: submission_services_log( where: { flow_id: { _eq: $flow_id } } - order_by: { created_at: desc } + order_by: { created_at: asc } ) { sessionId: session_id eventId: event_id @@ -79,7 +80,7 @@ const Submissions: React.FC = () => { Submissions - Events log of payments and submissions for this service + Feed of payment and submission events for this service