Skip to content

Commit

Permalink
replace user id with user name in change dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@jessicamcinchak
jessicamcinchak committed Mar 3, 2024
1 parent e3cab8f commit 61bae3d
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 50 deletions.
1 change: 1 addition & 0 deletions api.planx.uk/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,7 @@ const dataMerged = async (
text: `${team.slug}/${slug}`,
// add extra metadata about latest published version when applicable
...(!draftDataOnly && {
flowId: id,
publishedFlowId: publishedFlows?.[0]?.id,
publishedAt: publishedFlows?.[0]?.created_at,
publishedBy: publishedFlows?.[0]?.publisher_id,
Expand Down
128 changes: 78 additions & 50 deletions editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ const Header = styled("header")(() => ({
flexDirection: "column",
}));

const formatLastPublish = (date: string, user: string) =>
`Last published ${formatDistanceToNow(new Date(date))} ago by ${user}`;

const DebugConsole = () => {
const [passport, breadcrumbs, flowId, cachedBreadcrumbs] = useStore(
(state) => [
Expand Down Expand Up @@ -75,7 +78,13 @@ const DebugConsole = () => {
);
};

function AlteredNodeItem(props: any) {
interface AlteredNode {
id: string;
type: TYPES;
data?: any;
}

const AlteredNodeListItem = (props: { node: AlteredNode }) => {
const { node } = props;
let text, data;

Expand All @@ -93,26 +102,78 @@ function AlteredNodeItem(props: any) {
}

return (
<>
<li key={node.id}>
<Typography variant="body2">{text}</Typography>
{data && <pre style={{ fontSize: ".8em" }}>{data}</pre>}
</>
</li>
);
};

interface Portal {
text: string;
flowId: string;
publishedFlowId: number;
summary: string;
publishedBy: number;
publishedAt: string;
}

const AlteredNestedFlowListItem = (props: Portal) => {
const { text, flowId, publishedFlowId, summary, publishedAt } = props;

const [nestedFlowLastPublishedTitle, setNestedFlowLastPublishedTitle] =
useState<string>();
const lastPublisher = useStore((state) => state.lastPublisher);

const _nestedFlowLastPublishedRequest = useAsync(async () => {
const user = await lastPublisher(flowId);
setNestedFlowLastPublishedTitle(formatLastPublish(publishedAt, user));
});

return (
<ListItem
key={publishedFlowId}
disablePadding
sx={{ display: "list-item" }}
>
<ListItemText
primary={
useStore.getState().canUserEditTeam(text.split("/")[0]) ? (
<Link href={`../${text}`} target="_blank">
<Typography variant="body2">{text}</Typography>
</Link>
) : (
<Typography variant="body2">{text}</Typography>
)
}
secondary={
<>
<Typography variant="body2" fontSize="small">
{nestedFlowLastPublishedTitle}
</Typography>
{summary && (
<Typography variant="body2" fontSize="small">
{summary}
</Typography>
)}
</>
}
/>
</ListItem>
);
};

interface AlteredNodesSummary {
title: string;
portals: {
text: string;
summary: string;
publishedBy: number;
publishedAt: string;
}[];
portals: Portal[];
updated: number;
deleted: number;
}

function AlteredNodesSummaryContent(props: any) {
const AlteredNodesSummaryContent = (props: {
alteredNodes: AlteredNode[];
url: string;
}) => {
const { alteredNodes, url } = props;
const [expandNodes, setExpandNodes] = useState<boolean>(false);

Expand All @@ -123,7 +184,7 @@ function AlteredNodesSummaryContent(props: any) {
deleted: 0,
};

alteredNodes.map((node: any) => {
alteredNodes.map((node) => {
if (node.id === "0") {
changeSummary["title"] =
"You are publishing the main service for the first time.";
Expand Down Expand Up @@ -189,10 +250,8 @@ function AlteredNodesSummaryContent(props: any) {
<Collapse in={expandNodes}>
<Box pb={1}>
<ul>
{alteredNodes.map((node: any) => (
<li key={node.id}>
<AlteredNodeItem node={node} />
</li>
{alteredNodes.map((node) => (
<AlteredNodeListItem node={node} />
))}
</ul>
</Box>
Expand All @@ -205,36 +264,8 @@ function AlteredNodesSummaryContent(props: any) {
<Box pt={2}>
<Typography variant="body2">{`This includes recently published changes in the following nested services:`}</Typography>
<List sx={{ listStyleType: "disc", marginLeft: 4 }}>
{changeSummary["portals"].map((portal, i) => (
<ListItem key={i} disablePadding sx={{ display: "list-item" }}>
<ListItemText
primary={
useStore
.getState()
.canUserEditTeam(portal.text.split("/")[0]) ? (
<Link href={`../${portal.text}`} target="_blank">
<Typography variant="body2">{portal.text}</Typography>
</Link>
) : (
<Typography variant="body2">{portal.text}</Typography>
)
}
secondary={
<>
<Typography variant="body2" fontSize="small">
{`Last published ${formatDistanceToNow(
new Date(portal.publishedAt),
)} ago by ${portal.publishedBy}`}
</Typography>
{portal.summary && (
<Typography variant="body2" fontSize="small">
{portal.summary}
</Typography>
)}
</>
}
/>
</ListItem>
{changeSummary["portals"].map((portal) => (
<AlteredNestedFlowListItem {...portal} />
))}
</List>
</Box>
Expand All @@ -254,7 +285,7 @@ function AlteredNodesSummaryContent(props: any) {
</Box>
</Box>
);
}
};

const PreviewBrowser: React.FC<{
url: string;
Expand Down Expand Up @@ -286,13 +317,10 @@ const PreviewBrowser: React.FC<{
"This flow is not published yet",
);
const [validationMessage, setValidationMessage] = useState<string>();
const [alteredNodes, setAlteredNodes] = useState<object[]>();
const [alteredNodes, setAlteredNodes] = useState<AlteredNode[]>();
const [dialogOpen, setDialogOpen] = useState<boolean>(false);
const [summary, setSummary] = useState<string>();

const formatLastPublish = (date: string, user: string) =>
`Last published ${formatDistanceToNow(new Date(date))} ago by ${user}`;

const _lastPublishedRequest = useAsync(async () => {
const date = await lastPublished(flowId);
const user = await lastPublisher(flowId);
Expand Down

0 comments on commit 61bae3d

Please sign in to comment.