@@ -163,6 +163,12 @@ export default {
},
editIncident(incident) {
+ const [el] = this.$refs.incidentFormRef;
+
+ if (el) {
+ el.scrollIntoView({ behavior: "smooth" });
+ }
+
this.incident = incident;
},
diff --git a/react-frontend/src/components/IncidentsBlock.jsx b/react-frontend/src/components/IncidentsBlock.jsx
index edcde6ef..be276505 100644
--- a/react-frontend/src/components/IncidentsBlock.jsx
+++ b/react-frontend/src/components/IncidentsBlock.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, Fragment } from "react";
import API from "../config/API";
import DateUtils from "../utils/DateUtils";
import IncidentUpdate from "./IncidentUpdate";
@@ -33,47 +33,59 @@ const IncidentsBlock = ({ service, group }) => {
{incidents?.length > 0 ? (
incidents?.map((incident) => {
- const { id, title, description, updated_at } = incident;
+ const { id, title, description, updates, updated_at } = incident;
+ const latestUpdate =
+ updates?.length > 0 && updates[updates.length - 1];
+ const updatedAt = latestUpdate
+ ? latestUpdate.updated_at
+ : updated_at;
return (
- <>
+
+
- {incidentsShow[id] ? (
-
- ) : (
-
+ {updates?.length > 0 && (
+ <>
+ {incidentsShow[id] ? (
+
+ ) : (
+
+ )}
+ >
)}
+
- {title}
+ {title}
{description}
- Updated {DateUtils.ago(updated_at)} ago.{" "}
+ Updated {DateUtils.ago(updatedAt)} ago.{" "}
{DateUtils.format(
- DateUtils.parseISO(updated_at),
+ DateUtils.parseISO(updatedAt),
"MMM d, yyyy - HH:mm"
)}
+
{incidentsShow[id] && (
- {incident?.updates.map((update) => {
+ {updates?.map((update) => {
return (
{
})}
)}
- >
+
);
})
) : (
- No recent incidents
+ No recent incidents
)}