From 41785f429ba3e374389bce6275fa33ba1acbaf29 Mon Sep 17 00:00:00 2001
From: Nikhil Shahi <nshahi1998@gmail.com>
Date: Sat, 3 Sep 2022 03:48:08 -0500
Subject: [PATCH] (fix) style fix on alerts tab, remove unresolve, fix
 placeholder logic, fix pagination counting logic

---
 .../src/components/Alert/AlertComponent.tsx   | 15 +-----------
 frontend/src/components/Alert/AlertDetail.tsx |  5 ++--
 frontend/src/components/Alert/AlertList.tsx   |  5 ++--
 frontend/src/components/Endpoint/AlertTab.tsx |  2 +-
 frontend/src/hooks/use-debounce.ts            | 23 ++++++++-----------
 5 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/Alert/AlertComponent.tsx b/frontend/src/components/Alert/AlertComponent.tsx
index d1d78e5b..8f21733d 100644
--- a/frontend/src/components/Alert/AlertComponent.tsx
+++ b/frontend/src/components/Alert/AlertComponent.tsx
@@ -150,7 +150,7 @@ export const AlertComponent: React.FC<AlertComponentProps> = ({
           </ModalBody>
           {alert.status !== Status.IGNORED && (
             <ModalFooter>
-              {alert.status !== Status.RESOLVED ? (
+              {alert.status !== Status.RESOLVED && (
                 <Button
                   isLoading={updating}
                   leftIcon={<FiCheckCircle />}
@@ -164,19 +164,6 @@ export const AlertComponent: React.FC<AlertComponentProps> = ({
                 >
                   Resolve
                 </Button>
-              ) : (
-                <Button
-                  isLoading={updating}
-                  leftIcon={<AiOutlineExclamationCircle fontSize="20px" />}
-                  colorScheme="red"
-                  onClick={() =>
-                    handleUpdateAlert(alert.uuid, {
-                      updateType: UpdateAlertType.UNRESOLVE,
-                    })
-                  }
-                >
-                  Unresolve
-                </Button>
               )}
             </ModalFooter>
           )}
diff --git a/frontend/src/components/Alert/AlertDetail.tsx b/frontend/src/components/Alert/AlertDetail.tsx
index a24df4a8..0eda571d 100644
--- a/frontend/src/components/Alert/AlertDetail.tsx
+++ b/frontend/src/components/Alert/AlertDetail.tsx
@@ -298,8 +298,9 @@ export const AlertDetail: React.FC<AlertDetailProps> = ({
                 }}
                 value={resolutionMessage || ""}
                 placeholder={
-                  alert.status !== Status.RESOLVED &&
-                  "Provide reason for resolving..."
+                  alert.status !== Status.RESOLVED
+                    ? "Provide reason for resolving..."
+                    : ""
                 }
                 onChange={e => setResolutionMessage(e.target.value)}
               />
diff --git a/frontend/src/components/Alert/AlertList.tsx b/frontend/src/components/Alert/AlertList.tsx
index ac5221a5..4f8fe931 100644
--- a/frontend/src/components/Alert/AlertList.tsx
+++ b/frontend/src/components/Alert/AlertList.tsx
@@ -265,8 +265,9 @@ export const AlertList: React.FC<AlertListProps> = ({
       {totalCount && (
         <HStack alignSelf="flex-end" p="3" pr="70px">
           <Text>
-            {(page - 1) * params.offset + 1}-
-            {(page - 1) * params.offset + alerts.length} of {totalCount} alerts
+            {(page - 1) * ALERT_PAGE_LIMIT + 1}-
+            {(page - 1) * ALERT_PAGE_LIMIT + alerts.length} of {totalCount}{" "}
+            alerts
           </Text>
           <PaginationComponent
             pageSize={ALERT_PAGE_LIMIT}
diff --git a/frontend/src/components/Endpoint/AlertTab.tsx b/frontend/src/components/Endpoint/AlertTab.tsx
index 234c4f78..8f283091 100644
--- a/frontend/src/components/Endpoint/AlertTab.tsx
+++ b/frontend/src/components/Endpoint/AlertTab.tsx
@@ -61,7 +61,7 @@ export const AlertTab: React.FC<AlertTabProps> = ({ apiEndpointUuid }) => {
   }
 
   return (
-    <Box pt="4" px="8" h="full">
+    <Box py="4" px="8" h="full">
       <AlertList
         alerts={alerts}
         handleUpdateAlert={handleUpdateAlert}
diff --git a/frontend/src/hooks/use-debounce.ts b/frontend/src/hooks/use-debounce.ts
index ff41da7f..74f64d09 100644
--- a/frontend/src/hooks/use-debounce.ts
+++ b/frontend/src/hooks/use-debounce.ts
@@ -1,17 +1,14 @@
 import { useState, useEffect } from "react"
 
 export const useDebounce = (value: string, delay: number) => {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  useEffect(
-    () => {
-      const handler = setTimeout(() => {
-        setDebouncedValue(value);
-      }, delay);
-      return () => {
-        clearTimeout(handler);
-      };
-    },
-    [value, delay]
-  );
-  return debouncedValue;
+  const [debouncedValue, setDebouncedValue] = useState(value)
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, delay])
+  return debouncedValue
 }