Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Submissions log styles update #3155

Merged
merged 4 commits into from
May 16, 2024
Merged

feat: Submissions log styles update #3155

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
86fac7f
feat: Submission log styling
ianjon3s May 16, 2024
816bb21
feat: Submission log styling
ianjon3s May 16, 2024
25e2099
feat: Submission log styling
ianjon3s May 16, 2024
846e01b
feat: Separate column for status
ianjon3s May 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 38 additions & 29 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/EventsLog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
import Payment from "@mui/icons-material/Payment";
import Send from "@mui/icons-material/Send";
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import Collapse from "@mui/material/Collapse";
import IconButton from "@mui/material/IconButton";
import { styled } from "@mui/material/styles";
Expand Down Expand Up @@ -54,19 +54,22 @@ const EventsLog: React.FC<GetSubmissionsResponse> = ({

return (
<TableContainer>
<Table>
<Table sx={{ tableLayout: "fixed" }}>
<TableHead>
<TableRow>
<TableCell sx={{ width: 300 }}>
<TableCell sx={{ width: 240 }}>
<strong>Event</strong>
</TableCell>
<TableCell sx={{ width: 200 }}>
<TableCell sx={{ width: 110 }}>
<strong>Status</strong>
</TableCell>
<TableCell sx={{ width: 120 }}>
<strong>Date</strong>
</TableCell>
<TableCell>
<TableCell sx={{ width: 380 }}>
<strong>Session ID</strong>
</TableCell>
<TableCell></TableCell>
<TableCell sx={{ width: 60 }}></TableCell>
</TableRow>
</TableHead>
<TableBody>
Expand All @@ -85,30 +88,26 @@ const CollapsibleRow: React.FC<Submission> = (submission) => {
return (
<React.Fragment key={submission.eventId}>
<TableRow sx={{ "& > *": { borderBottom: "unset" } }}>
<TableCell
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<Avatar
<TableCell>
<Box
sx={{
background: "none",
marginRight: (theme) => theme.spacing(1),
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
{submission.eventType === "Pay" ? (
<Payment
color={submission.status === "Success" ? "success" : "error"}
/>
) : (
<Send
color={submission.status === "Success" ? "success" : "error"}
/>
)}
</Avatar>
{submission.eventType}
{submission.eventType === "Pay" ? <Payment /> : <Send />}
<Typography variant="body2" ml={1}>
{submission.eventType}
</Typography>
</Box>
Copy link
Member

@jessicamcinchak jessicamcinchak May 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I'm not sure I'm sold on the double icon, it feels quite awkward to me.

If success/failure isn't actually clear enough by red/green color of eventType icon alone would it be better to just add a column to the table where we print the actual value of submission.status - eg "Success" or "Failed (XXX)"? Would have additional benefit of providing additional context of status code on fail? Could use red/green coloured chips to emphasize or just plain text?

Screenshot from 2024-05-16 13-54-59

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Eg columns: "Event", "Status", "Date", "Session ID" ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great ideas, I've updated

</TableCell>
<TableCell>
{submission.status === "Success" ? (
<Chip label="Success" size="small" color="success" />
) : (
<Chip label="Error" size="small" color="error" />
)}
</TableCell>
<TableCell>
{format(new Date(submission.createdAt), "dd/MM/yy hh:mm:ss")}
Expand All @@ -125,8 +124,17 @@ const CollapsibleRow: React.FC<Submission> = (submission) => {
</TableCell>
</TableRow>
<TableRow sx={{ background: (theme) => theme.palette.background.paper }}>
<TableCell sx={{ paddingBottom: 0, paddingTop: 0 }} colSpan={4}>
<Collapse in={open} timeout="auto" unmountOnExit>
<TableCell sx={{ padding: 0, border: "none" }} colSpan={5}>
<Collapse
in={open}
timeout="auto"
unmountOnExit
sx={{
borderBottom: (theme) =>
`1px solid ${theme.palette.border.light}`,
padding: (theme) => theme.spacing(0, 1.5),
}}
>
<FormattedResponse {...submission} />
</Collapse>
</TableCell>
Expand All @@ -153,6 +161,7 @@ const FormattedResponse: React.FC<Submission> = (submission) => {
margin: 1,
maxWidth: "contentWrap",
overflowWrap: "break-word",
whiteSpace: "pre-wrap",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👀 💡 thank you!!

}}
>
{submission.status === "Success"
Expand Down
Loading