From 08b36ee2bd2003f3f8dc6be2ba8fcc4113492adf Mon Sep 17 00:00:00 2001
From: Nikhil Shahi <nshahi1998@gmail.com>
Date: Sun, 28 Aug 2022 04:34:56 -0500
Subject: [PATCH] (chore) update full detail view

---
 .../src/components/Alert/AlertComponent.tsx   |  34 +-
 frontend/src/components/Alert/AlertDetail.tsx | 330 +++++++++---------
 2 files changed, 195 insertions(+), 169 deletions(-)

diff --git a/frontend/src/components/Alert/AlertComponent.tsx b/frontend/src/components/Alert/AlertComponent.tsx
index f7659732..feaaad49 100644
--- a/frontend/src/components/Alert/AlertComponent.tsx
+++ b/frontend/src/components/Alert/AlertComponent.tsx
@@ -45,6 +45,11 @@ export const AlertComponent: React.FC<AlertComponentProps> = ({
     alert.resolutionMessage,
   )
 
+  const closeModal = () => {
+    setResolutionMessage(alert.resolutionMessage)
+    onClose()
+  }
+
   return (
     <Box w="full">
       <Box
@@ -104,12 +109,31 @@ export const AlertComponent: React.FC<AlertComponentProps> = ({
           </Button>
         </HStack>
       </VStack>
-      <Modal size="6xl" isOpen={isOpen} onClose={onClose}>
+      <Modal isCentered isOpen={isOpen} onClose={closeModal}>
         <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>{alert.type}</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody maxH="700px" overflowY="auto">
+        <ModalContent maxW="70%" h="85%">
+          <ModalHeader mr="30px">
+            <HStack w="full" justifyContent="space-between">
+              <Heading size="lg">{alert.type}</Heading>
+              <Badge
+                fontSize="lg"
+                px="2"
+                py="1"
+                colorScheme={RISK_TO_COLOR[alert.riskScore]}
+              >
+                {alert.riskScore}
+              </Badge>
+            </HStack>
+          </ModalHeader>
+          <ModalCloseButton mt="10px" />
+          <ModalBody
+            h="full"
+            py="4"
+            bg="secondaryBG"
+            borderTopWidth={2}
+            borderBottomWidth={2}
+            overflow="auto"
+          >
             {alert && (
               <AlertDetail
                 alert={alert}
diff --git a/frontend/src/components/Alert/AlertDetail.tsx b/frontend/src/components/Alert/AlertDetail.tsx
index ecdc64ed..89f0f354 100644
--- a/frontend/src/components/Alert/AlertDetail.tsx
+++ b/frontend/src/components/Alert/AlertDetail.tsx
@@ -1,6 +1,5 @@
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef } from "react"
 import {
-  Modal,
   Box,
   Grid,
   GridItem,
@@ -12,6 +11,11 @@ import {
   useColorMode,
   useColorModeValue,
   Textarea,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionIcon,
+  AccordionPanel,
 } from "@chakra-ui/react"
 import jsonMap from "json-source-map"
 import yaml from "js-yaml"
@@ -22,7 +26,7 @@ import Highlight, { defaultProps } from "prism-react-renderer"
 import { AlertType, SpecExtension, Status } from "@common/enums"
 import { Alert } from "@common/types"
 import { getDateTimeString } from "utils"
-import { METHOD_TO_COLOR, RISK_TO_COLOR, STATUS_TO_COLOR } from "~/constants"
+import { METHOD_TO_COLOR, STATUS_TO_COLOR } from "~/constants"
 import { SpecDiffContext } from "./AlertPanel"
 import { TraceView } from "components/Endpoint/TraceDetail"
 
@@ -39,10 +43,10 @@ export const AlertDetail: React.FC<AlertDetailProps> = ({
 }) => {
   const colorMode = useColorMode().colorMode
   const theme = useColorModeValue(lightTheme, darkTheme)
-  const panelColor = useColorModeValue("#F6F8FA", "#2A2734")
   const scrollRef = useRef(null)
   const topDivRef = useRef(null)
-  let panel = null
+  let leftPanel = null
+  let rightPanel = null
 
   const executeScroll = () => {
     scrollRef.current?.scrollIntoView()
@@ -85,185 +89,183 @@ export const AlertDetail: React.FC<AlertDetailProps> = ({
             break
         }
       }
-      panel = (
-        <HStack w="full" justifyContent="space-between">
-          <Box w="50%">
-            <Text mb="2" fontWeight="semibold">
-              Spec
-            </Text>
-            <Box maxH="670px">
-              <Highlight
-                {...defaultProps}
-                theme={theme}
-                code={context.spec}
-                language={context.specExtension || "json"}
-              >
-                {({
-                  className,
-                  style,
-                  tokens,
-                  getLineProps,
-                  getTokenProps,
-                }) => {
-                  return (
-                    <pre
-                      className={className}
-                      style={{
-                        ...style,
-                        fontSize: "14px",
-                        padding: "8px",
-                        overflowX: "auto",
-                        minHeight: "500px",
-                        maxHeight: "670px",
-                        overflowY: "auto",
-                      }}
-                    >
-                      {tokens.map((line, i) => {
-                        const lineProps = getLineProps({ line, key: i })
-                        if (i + 1 === lineNumber) {
-                          lineProps.className = `${lineProps.className} highlight-line ${colorMode}`
-                        }
-                        return (
-                          <pre
+      leftPanel = (
+        <Box w="full">
+          <Accordion allowToggle={true}>
+            <AccordionItem border="0" w="full">
+              <AccordionButton _hover={{ bg: "transparent" }} p="0">
+                <Box mr="4" fontWeight="semibold" textAlign="left">
+                  Differing Trace
+                </Box>
+                <AccordionIcon />
+              </AccordionButton>
+              <AccordionPanel>
+                <VStack mb="4" h="full" w="full" alignItems="flex-start">
+                  <Text fontWeight="semibold">Request Path</Text>
+                  <Code rounded="md" p="2" fontSize="sm">
+                    {trace.path}
+                  </Code>
+                </VStack>
+                <TraceView trace={trace} colorMode={colorMode} />
+              </AccordionPanel>
+            </AccordionItem>
+          </Accordion>
+        </Box>
+      )
+      rightPanel = (
+        <Box w="55%" h="full">
+          <Box borderWidth={1} h="full">
+            <Highlight
+              {...defaultProps}
+              theme={theme}
+              code={context.spec}
+              language={context.specExtension || "json"}
+            >
+              {({ className, style, tokens, getLineProps, getTokenProps }) => {
+                return (
+                  <pre
+                    className={className}
+                    style={{
+                      ...style,
+                      fontSize: "14px",
+                      padding: "8px",
+                      overflowX: "auto",
+                      minHeight: "100%",
+                      maxHeight: "100%",
+                      overflowY: "auto",
+                    }}
+                  >
+                    {tokens.map((line, i) => {
+                      const lineProps = getLineProps({ line, key: i })
+                      if (i + 1 === lineNumber) {
+                        lineProps.className = `${lineProps.className} highlight-line ${colorMode}`
+                      }
+                      return (
+                        <pre
+                          style={{
+                            textAlign: "left",
+                            margin: "1em 0",
+                            padding: "0.5em",
+                            overflow: "scroll",
+                          }}
+                          key={i}
+                          ref={i + 1 === lineNumber ? scrollRef : null}
+                          {...lineProps}
+                        >
+                          <span
                             style={{
-                              textAlign: "left",
-                              margin: "1em 0",
-                              padding: "0.5em",
-                              overflow: "scroll",
+                              display: "table-cell",
+                              textAlign: "right",
+                              paddingRight: "1em",
+                              userSelect: "none",
+                              opacity: "0.5",
                             }}
-                            key={i}
-                            ref={i + 1 === lineNumber ? scrollRef : null}
-                            {...lineProps}
                           >
-                            <span
-                              style={{
-                                display: "table-cell",
-                                textAlign: "right",
-                                paddingRight: "1em",
-                                userSelect: "none",
-                                opacity: "0.5",
-                              }}
-                            >
-                              {i + 1}
-                            </span>
-                            <span style={{ display: "table-cell" }}>
-                              {line.map((token, key) => (
-                                <span
-                                  key={key}
-                                  {...getTokenProps({ token, key })}
-                                />
-                              ))}
-                            </span>
-                          </pre>
-                        )
-                      })}
-                    </pre>
-                  )
-                }}
-              </Highlight>
-            </Box>
-          </Box>
-          <Box w="50%">
-            <Text fontWeight="semibold" mb="2">
-              Differing Trace
-            </Text>
-            <Box maxH="670px" minH="500px" bg={panelColor} p="2" overflowY="auto">
-              <VStack mb="4" h="full" w="full" alignItems="flex-start">
-                <Text fontWeight="semibold">Request Path</Text>
-                <Code rounded="md" p="2" fontSize="sm">
-                  {trace.path}
-                </Code>
-              </VStack>
-              <TraceView trace={trace} colorMode={colorMode} />
-            </Box>
+                            {i + 1}
+                          </span>
+                          <span style={{ display: "table-cell" }}>
+                            {line.map((token, key) => (
+                              <span
+                                key={key}
+                                {...getTokenProps({ token, key })}
+                              />
+                            ))}
+                          </span>
+                        </pre>
+                      )
+                    })}
+                  </pre>
+                )
+              }}
+            </Highlight>
           </Box>
-        </HStack>
+        </Box>
       )
       break
     default:
-      panel = <Box></Box>
   }
 
   return (
-    <Box w="full" h="full" overflowY="auto" ref={topDivRef}>
-      <VStack w="full" spacing="4">
-        <Grid w="full" templateColumns="1fr 1fr" gap="4">
-          <GridItem>
-            <VStack alignItems="flex-start">
-              <Text fontWeight="semibold">Status</Text>
-              <Badge
-                fontSize="sm"
-                px="2"
-                py="1"
-                colorScheme={STATUS_TO_COLOR[alert.status]}
-              >
-                {alert.status}
-              </Badge>
-            </VStack>
-          </GridItem>
-          <GridItem>
-            <VStack alignItems="flex-start">
-              <Text fontWeight="semibold">Time</Text>
-              <Code p="1" rounded="md" fontSize="sm">
-                {getDateTimeString(alert.createdAt)}
-              </Code>
-            </VStack>
-          </GridItem>
-          <GridItem>
-            <VStack alignItems="flex-start">
-              <Text fontWeight="semibold">Endpoint</Text>
-              <HStack>
+    <Box w="full" h="full">
+      <HStack alignItems="flex-start" w="full" h="full" spacing="4">
+        <VStack
+          w={rightPanel ? "45%" : "full"}
+          h="full"
+          overflowY="auto"
+          spacing="4"
+          pr="2"
+        >
+          <Grid w="full" templateColumns="1fr 1fr" gap="4">
+            <GridItem>
+              <VStack alignItems="flex-start">
+                <Text fontWeight="semibold">Status</Text>
                 <Badge
                   fontSize="sm"
                   px="2"
                   py="1"
-                  colorScheme={
-                    METHOD_TO_COLOR[alert.apiEndpoint.method] || "gray"
-                  }
+                  colorScheme={STATUS_TO_COLOR[alert.status]}
                 >
-                  {alert.apiEndpoint.method.toUpperCase()}
+                  {alert.status}
                 </Badge>
+              </VStack>
+            </GridItem>
+            <GridItem>
+              <VStack alignItems="flex-start">
+                <Text fontWeight="semibold">Created At</Text>
                 <Code p="1" rounded="md" fontSize="sm">
-                  {alert.apiEndpoint.path}
+                  {getDateTimeString(alert.createdAt)}
                 </Code>
-              </HStack>
-            </VStack>
-          </GridItem>
-          <GridItem>
-            <VStack alignItems="flex-start">
-              <Text fontWeight="semibold">Risk Score</Text>
-              <Badge fontSize="sm" colorScheme={RISK_TO_COLOR[alert.riskScore]}>
-                {alert.riskScore}
-              </Badge>
-            </VStack>
-          </GridItem>
-        </Grid>
-        <VStack w="full" alignItems="flex-start">
-          <Text fontWeight="semibold">Description</Text>
-          <Code p="3" rounded="md" w="full" fontSize="sm">
-            {alert.description}
-          </Code>
-        </VStack>
-        {panel}
-        {alert.status !== Status.IGNORED && (
+              </VStack>
+            </GridItem>
+            <GridItem colSpan={2}>
+              <VStack alignItems="flex-start">
+                <Text fontWeight="semibold">Endpoint</Text>
+                <HStack>
+                  <Badge
+                    fontSize="sm"
+                    px="2"
+                    py="1"
+                    colorScheme={
+                      METHOD_TO_COLOR[alert.apiEndpoint.method] || "gray"
+                    }
+                  >
+                    {alert.apiEndpoint.method.toUpperCase()}
+                  </Badge>
+                  <Code p="1" rounded="md" fontSize="sm">
+                    {alert.apiEndpoint.path}
+                  </Code>
+                </HStack>
+              </VStack>
+            </GridItem>
+          </Grid>
           <VStack w="full" alignItems="flex-start">
-            <Text fontWeight="semibold">Resolution Reason</Text>
-            <Textarea
-              disabled={alert.status === Status.RESOLVED}
-              _disabled={{
-                opacity: 0.7,
-                cursor: "not-allowed",
-              }}
-              value={resolutionMessage || ""}
-              placeholder={
-                alert.status !== Status.RESOLVED &&
-                "Provide reason for resolving..."
-              }
-              onChange={e => setResolutionMessage(e.target.value)}
-            />
+            <Text fontWeight="semibold">Description</Text>
+            <Code p="3" rounded="md" w="full" fontSize="sm">
+              {alert.description}
+            </Code>
           </VStack>
-        )}
-      </VStack>
+          {leftPanel}
+          {alert.status !== Status.IGNORED && (
+            <VStack w="full" alignItems="flex-start">
+              <Text fontWeight="semibold">Resolution Reason</Text>
+              <Textarea
+                disabled={alert.status === Status.RESOLVED}
+                _disabled={{
+                  opacity: 0.7,
+                  cursor: "not-allowed",
+                }}
+                value={resolutionMessage || ""}
+                placeholder={
+                  alert.status !== Status.RESOLVED &&
+                  "Provide reason for resolving..."
+                }
+                onChange={e => setResolutionMessage(e.target.value)}
+              />
+            </VStack>
+          )}
+        </VStack>
+        {rightPanel}
+      </HStack>
     </Box>
   )
 }