style as feed with stickyheader

theopensystemslab · May 17, 2024 · d083489 · d083489
1 parent 10236d2
commit d083489
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
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
@@ -27,14 +27,23 @@ 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",
   overflowWrap: "break-word",
   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<GetSubmissionsResponse> = ({
   submissions,
   loading,
@@ -61,10 +70,10 @@ const EventsLog: React.FC<GetSubmissionsResponse> = ({
     );
 
   return (
-    <TableContainer>
-      <Table sx={{ tableLayout: "fixed" }}>
+    <Feed>
+      <Table stickyHeader sx={{ tableLayout: "fixed" }}>
         <TableHead>
-          <TableRow>
+          <TableRow sx={{ "& > *": { borderBottomColor: "black !important" } }}>
             <TableCell sx={{ width: 250 }}>
               <strong>Event</strong>
             </TableCell>
@@ -86,7 +95,7 @@ const EventsLog: React.FC<GetSubmissionsResponse> = ({
           ))}
         </TableBody>
       </Table>
-    </TableContainer>
+    </Feed>
   );
 };
 

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
@@ -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
           </Typography>
           <Typography variant="body1">
-            Events log of payments and submissions for this service
+            Feed of payment and submission events for this service
           </Typography>
         </EditorRow>
         <EditorRow>