feat: allow summary header to be collapse (#57)

Author: sudharsan-selvaraj

web/src/components/UI/atoms/icon.tsx

@@ -5,6 +5,8 @@ import {
   FaAngleUp,
   FaCheckCircle,
   FaFilter,
+  FaChevronDown,
+  FaChevronUp,
 } from "react-icons/fa";
 import { FcAndroidOs } from "react-icons/fc";
 import {
@@ -182,6 +184,12 @@ export default function Icon(props: IconProps) {
     case "minimize":
       icon = <FiMinimize />;
       break;
+    case "chevron-up":
+      icon = <FaChevronUp />;
+      break;
+    case "chevron-down":
+      icon = <FaChevronDown />;
+      break;
     default:
       icon = null;
   }

web/src/components/UI/organisms/session-details.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useState, useMemo, useEffect } from "react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
 import {
@@ -19,8 +19,47 @@ import Session from "../../../interfaces/session";
 import SessionMenuItems from "./session-details-menu-items";
 import { Tooltip } from "@mui/material";
 import SessionScriptExecutor from "./session-script-executor";
+import Icon, { Sizes } from "../atoms/icon";
 
-const Container = styled.div``;
+const Container = styled.div`
+  @-webkit-keyframes progress {
+    0% {
+      background-position: 0 0;
+    }
+
+    to {
+      background-position: 200px 0;
+    }
+  }
+
+  @keyframes progress {
+    0% {
+      background-position: 0 0;
+    }
+
+    to {
+      background-position: 200px 0;
+    }
+  }
+
+  @keyframes session-summary-expand {
+    0% {
+      bottom: -5px;
+    }
+    50% {
+      bottom: 0px;
+    }
+    100% {
+      bottom: -5px;
+    }
+  }
+
+  & > * {
+    .collapsible-row {
+      transition: height 0.75s ease-out;
+    }
+  }
+`;
 
 const HEADER = styled.div`
   ${(props) => getHeaderStyle(props.theme)};
@@ -66,8 +105,29 @@ const PausedProgressIndicator = styled(ProgressIndicator)`
     #fff2cc 20px
   );
 `;
+const SummaryContainer = styled.div`
+  position: relative;
+  display: flex;
+  justify-contents: center;
+  align-items: center;
+  flex-direction: column;
+  transition: all 1s;
+  height: auto;
+`;
+
+const SummaryCollapseIcon = styled.div`
+  position: absolute;
+  animation: session-summary-expand 1s linear infinite;
+  cursor: pointer;
 
-export const SUMMARY_HEIGHT = 120;
+  & > {
+    .icon {
+      color: #12bbef;
+    }
+  }
+`;
+
+export const SUMMARY_HEIGHT = 110;
 export const FAIL_MESSAGE_CONTAINER_HEIGHT = 80;
 export const PADDING = 10;
 export const VIDEO_PLAYER_HEIGHT = 400;
@@ -82,9 +142,12 @@ function hasSessionFailureMessage(session: Session | null) {
   );
 }
 
-function getSessiobDetailsMainContainerHeight(session: Session | null) {
+function getSessiobDetailsMainContainerHeight(
+  session: Session | null,
+  hideSummary: boolean,
+) {
   return (
-    SUMMARY_HEIGHT +
+    (hideSummary ? 0 : SUMMARY_HEIGHT) +
     APP_HEADER_HEIGHT +
     SUB_APP_HEADER_HEIGHT +
     PADDING +
@@ -115,9 +178,16 @@ export default function SessionDetails() {
   const [paused, setPaused] = useState(session?.is_paused);
   const [isDebugging, setIsDebugging] = useState(false);
   const [isVideoFullscreen, setIsVideFullScreen] = useState(false);
+  const [hideSummary, setHideSummary] = useState(false);
+
+  const onToggleSummary = useCallback((state) => {
+    setHideSummary(state);
+  }, []);
 
-  const MAIN_CONTENT_CONTAINER_HEIGHT =
-    getSessiobDetailsMainContainerHeight(session);
+  const MAIN_CONTENT_CONTAINER_HEIGHT = getSessiobDetailsMainContainerHeight(
+    session,
+    hideSummary,
+  );
 
   const videoHeight = useMemo(() => {
     return isVideoFullscreen && !session?.is_completed
@@ -168,8 +238,22 @@ export default function SessionDetails() {
             </ParallelLayout>
           </HEADER>
         </Row>
-        <Row height={`${SUMMARY_HEIGHT}px`}>
-          <SessionSummary session={session} />
+        <Row
+          height={`${hideSummary ? 0 : SUMMARY_HEIGHT}px`}
+          className="collapsible-row"
+        >
+          <SummaryContainer>
+            {!hideSummary && <SessionSummary session={session} />}
+            <SummaryCollapseIcon className={hideSummary ? "down" : "up"}>
+              <Icon
+                name={hideSummary ? "chevron-down" : "chevron-up"}
+                size={Sizes.XL}
+                color="#ff4433"
+                tooltip={hideSummary ? "View Summary" : "Hide Summary"}
+                onClick={() => onToggleSummary(!hideSummary)}
+              />
+            </SummaryCollapseIcon>
+          </SummaryContainer>
         </Row>
         {/* Animated indicator of the session status */}
         {(!session.is_completed || session.is_paused) && (

web/src/index.css

@@ -56,24 +56,4 @@ body {
 
 .custom-tooltip-arrow {
 	color: #000!important;
-}
-
-@-webkit-keyframes progress {
-    0% {
-        background-position: 0 0
-    }
-
-    to {
-        background-position: 200px 0
-    }
-}
-
-@keyframes progress {
-    0% {
-        background-position: 0 0
-    }
-
-    to {
-        background-position: 200px 0
-    }
-}
+}