From a51d42b2e25a9a5b405364acbdb7f9c81d5939f6 Mon Sep 17 00:00:00 2001
From: Smit Patel <smit.patel@razorpay.com>
Date: Tue, 16 Aug 2022 12:50:22 +0530
Subject: [PATCH] PCORE-2213: cosmetic changes on incident updates (#38)

* feat: minor cosmetic change in showing dates

* feat: minor cosmetic change in showing dates

* feat: scroll to input when editing incident

* fix: class to classname

* fix: added array check for api data

* feat: used created_at instead of updated_at

* feat: added empty message when no incident updates are there
---
 .../src/components/IncidentsBlock.jsx         | 73 +++++++++++--------
 1 file changed, 42 insertions(+), 31 deletions(-)

diff --git a/react-frontend/src/components/IncidentsBlock.jsx b/react-frontend/src/components/IncidentsBlock.jsx
index c1e4199a..e9e1e16d 100644
--- a/react-frontend/src/components/IncidentsBlock.jsx
+++ b/react-frontend/src/components/IncidentsBlock.jsx
@@ -17,7 +17,7 @@ const IncidentsBlock = ({ service, group }) => {
         data = await API.incidents_service(service.id);
       }
 
-      if(Array.isArray(data)) {
+      if (Array.isArray(data)) {
         setIncidents(data);
       }
     }
@@ -36,8 +36,7 @@ const IncidentsBlock = ({ service, group }) => {
         {incidents?.length > 0 ? (
           incidents?.map((incident) => {
             const { id, title, description, updates, updated_at } = incident;
-            const latestUpdate =
-              updates?.length > 0 && updates[0];
+            const latestUpdate = updates?.length > 0 && updates[0];
             const updatedAt = latestUpdate
               ? latestUpdate.created_at
               : updated_at;
@@ -50,25 +49,23 @@ const IncidentsBlock = ({ service, group }) => {
                   className={`incident-title col-12 ${
                     incidentsShow[id] && "mb-3"
                   }`}>
-                  {updates?.length > 0 && (
-                    <>
-                      {incidentsShow[id] ? (
-                        <button
-                          className="square-minus"
-                          type="button"
-                          id={id}
-                          onClick={handleIncidentShow}
-                        />
-                      ) : (
-                        <button
-                          className="square-plus"
-                          type="button"
-                          id={id}
-                          onClick={handleIncidentShow}
-                        />
-                      )}
-                    </>
-                  )}
+                  <>
+                    {incidentsShow[id] ? (
+                      <button
+                        className="square-minus"
+                        type="button"
+                        id={id}
+                        onClick={handleIncidentShow}
+                      />
+                    ) : (
+                      <button
+                        className="square-plus"
+                        type="button"
+                        id={id}
+                        onClick={handleIncidentShow}
+                      />
+                    )}
+                  </>
 
                   <div className="title-wrapper">
                     <span className="subtitle no-decoration">{title}</span>
@@ -87,15 +84,29 @@ const IncidentsBlock = ({ service, group }) => {
 
                 {incidentsShow[id] && (
                   <div className="incident-updates-wrapper col-12">
-                    {updates?.map((update) => {
-                      return (
-                        <IncidentUpdate
-                          key={update.id}
-                          update={update}
-                          admin={false}
-                        />
-                      );
-                    })}
+                    {updates?.length > 0 ? (
+                      <>
+                        {updates?.map((update) => {
+                          return (
+                            <IncidentUpdate
+                              key={update.id}
+                              update={update}
+                              admin={false}
+                            />
+                          );
+                        })}
+                      </>
+                    ) : (
+                      <div className="d-flex">
+                        <div className="mr-2 d-flex align-items-center">
+                          <span className="dot"></span>
+                        </div>
+
+                        <div className="font-14 text-muted">
+                          No recent updates
+                        </div>
+                      </div>
+                    )}
                   </div>
                 )}
               </Fragment>