Update deployment trace ui (#5610)

- Change title from 'Deployment traces' to 'Traces'
- Add hover effect for trace-item in list
- Fix bugs overflow header on mobile view.
- Not hide btn commit message when open deployment list

Signed-off-by: kypham <[email protected]>

web/src/components/deployment-trace-page/deployment-trace-item/deployment-item.tsx

@@ -17,15 +17,25 @@ const useStyles = makeStyles((theme) => ({
     padding: theme.spacing(2),
     display: "flex",
     alignItems: "center",
-    // backgroundColor: theme.palette.background.paper,
+    overflow: "hidden",
+    columnGap: theme.spacing(2),
+    [theme.breakpoints.down("sm")]: {
+      flexDirection: "column",
+      alignItems: "flex-start",
+    },
   },
-  info: {
-    marginLeft: theme.spacing(1),
+  titleWrap: {
+    display: "flex",
+    alignItems: "baseline",
+    flexWrap: "wrap",
+    columnGap: theme.spacing(1),
+    [theme.breakpoints.down("sm")]: {
+      flexDirection: "column",
+    },
   },
   statusText: {
     marginLeft: theme.spacing(1),
     lineHeight: "1.5rem",
-    // Fix width to prevent misalignment of application name.
     width: "100px",
   },
   description: {
@@ -66,22 +76,12 @@ const DeploymentItem: FC<Props> = ({ deployment }) => {
           {DEPLOYMENT_STATE_TEXT[deployment.status]}
         </Typography>
       </Box>
-      <Box
-        display="flex"
-        flexDirection="column"
-        flex={1}
-        pl={2}
-        overflow="hidden"
-      >
-        <Box display="flex" alignItems="baseline">
+      <Box flex={1} overflow="hidden" maxWidth={"100%"}>
+        <Box className={classes.titleWrap}>
           <Typography variant="h6" component="span">
             {deployment.applicationName}
           </Typography>
-          <Typography
-            variant="body2"
-            color="textSecondary"
-            className={classes.info}
-          >
+          <Typography variant="body2" color="textSecondary">
             {pipedVersion === PipedVersion.V0 &&
               APPLICATION_KIND_TEXT[deployment.kind]}
             {pipedVersion === PipedVersion.V1 && "APPLICATION"}

web/src/components/deployment-trace-page/deployment-trace-item/index.test.tsx

@@ -26,12 +26,15 @@ describe("DeploymentTraceItem", () => {
     expect(
       screen.getByText(expectedValues.author + " authored")
     ).toBeInTheDocument();
-    expect(screen.getByText(expectedValues.commitMessage)).toBeInTheDocument();
     expect(screen.getByText(expectedValues.commitHash)).toBeInTheDocument();
     expect(screen.getByRole("link")).toHaveAttribute(
       "href",
       expectedValues.commitUrl
     );
+    fireEvent.click(
+      screen.getByRole("button", { name: /btn-commit-message/i })
+    );
+    expect(screen.getByText(expectedValues.commitMessage)).toBeInTheDocument();
   });
 
   it("should render deployment items", () => {

web/src/components/deployment-trace-page/deployment-trace-item/index.tsx

@@ -8,39 +8,58 @@ import {
   Typography,
 } from "@material-ui/core";
 import dayjs from "dayjs";
-import React, { FC, useEffect, useMemo, useState } from "react";
+import React, { FC, useMemo, useState } from "react";
 import { ListDeploymentTracesResponse } from "~~/api_client/service_pb";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import { ArrowDropDown } from "@material-ui/icons";
 import DeploymentItem from "./deployment-item";
 import { Link as RouterLink } from "react-router-dom";
 import { PAGE_PATH_DEPLOYMENTS } from "~/constants/path";
+import clsx from "clsx";
 
 const useStyles = makeStyles((theme) => ({
-  btnActive: {
+  title: {
+    display: "inline",
+  },
+  btnMore: {
+    display: "inline-flex",
+    padding: "0 1px",
+    borderRadius: 5,
+    marginLeft: 5,
+    marginBottom: 4,
+  },
+  btnMoreActive: {
     backgroundColor: theme.palette.grey[300],
   },
   btnRotate: {
     transform: "rotate(180deg)",
   },
-  list: {
-    listStyle: "none",
-    padding: theme.spacing(3),
-    paddingTop: 0,
-    margin: 0,
-    flex: 1,
-    overflowY: "scroll",
-  },
-  listItem: {
-    borderColor: theme.palette.grey[300],
+  traceItem: {
+    padding: theme.spacing(2),
+    paddingRight: theme.spacing(0),
+    borderBottom: `1px solid ${theme.palette.grey[300]}`,
+    backgroundColor: theme.palette.background.paper,
+    "&:hover": {
+      backgroundColor: theme.palette.grey[100],
+    },
   },
   traceStickyTop: {
     position: "sticky",
     top: 0,
     zIndex: 50,
-    backgroundColor: theme.palette.background.paper,
     paddingBottom: theme.spacing(1),
-    borderBottom: `1px solid ${theme.palette.grey[300]}`,
+  },
+  commitMessageWrap: {
+    maxHeight: "20svh",
+    overflow: "hidden auto",
+    borderLeft: `0.5px  solid ${theme.palette.grey[500]}`,
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+  },
+  commitMessage: {
+    whiteSpace: "pre-wrap",
   },
 }));
 
@@ -54,12 +73,6 @@ const DeploymentTraceItem: FC<Props> = ({ trace, deploymentList }) => {
   const [visibleMessage, setVisibleMessage] = useState(false);
   const [visibleDeployments, setVisibleDeployments] = useState(false);
 
-  useEffect(() => {
-    if (visibleDeployments) {
-      setVisibleMessage(false);
-    }
-  }, [visibleDeployments]);
-
   const onViewCommitMessage = (
     e: React.MouseEvent<HTMLButtonElement>
   ): void => {
@@ -84,73 +97,85 @@ const DeploymentTraceItem: FC<Props> = ({ trace, deploymentList }) => {
   }, [trace?.commitTimestamp]);
 
   return (
-    <Box flex={1} pl={2} py={2} width={"100%"}>
+    <Box flex={1} width={"100%"}>
       <Box
-        display="flex"
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-        className={visibleDeployments ? classes.traceStickyTop : ""}
+        className={clsx(classes.traceItem, {
+          [classes.traceStickyTop]: visibleDeployments,
+        })}
       >
-        <Box>
-          <Box display="flex" gridColumnGap={10} alignItems={"start"}>
-            <div>
-              <Typography variant="h6">{trace?.title}</Typography>
-              <RouterLink to={trace?.commitUrl || "#"} target="_blank">
-                <Typography variant="body2" color="textSecondary">
-                  {trace?.commitHash}
-                </Typography>
-              </RouterLink>
-            </div>
-
-            <Box display={visibleDeployments ? "none" : "flex"}>
+        <Box
+          display="flex"
+          gridColumnGap={10}
+          alignItems={"start"}
+          justifyContent={"space-between"}
+          pr={1}
+        >
+          <Box>
+            <Box>
+              <Typography variant="h6" className={classes.title}>
+                {trace?.title}
+              </Typography>
               <IconButton
                 size="small"
-                className={visibleMessage ? classes.btnActive : ""}
+                aria-label="btn-commit-message"
+                className={clsx(classes.btnMore, {
+                  [classes.btnMoreActive]: visibleMessage,
+                })}
                 onClick={onViewCommitMessage}
+                title={
+                  visibleMessage ? "Hide commit message" : "View commit message"
+                }
               >
                 <MoreHorizIcon />
               </IconButton>
             </Box>
+
+            <Box display="flex">
+              <RouterLink to={trace?.commitUrl || "#"} target="_blank">
+                <Typography variant="body2" color="textSecondary">
+                  {trace?.commitHash}
+                </Typography>
+              </RouterLink>
+            </Box>
           </Box>
-          <Box
-            sx={{ display: !visibleMessage ? "none" : "block" }}
-            borderLeft={0.5}
-            borderColor={"grey.300"}
-            pl={1}
-            py={1}
-            my={1}
-            ml={1}
+
+          <IconButton
+            aria-label="expand"
+            className={visibleDeployments ? classes.btnRotate : ""}
+            onClick={() => setVisibleDeployments(!visibleDeployments)}
           >
-            <Typography variant="body2" color="textSecondary">
-              {trace?.commitMessage}
-            </Typography>
-          </Box>
+            <ArrowDropDown />
+          </IconButton>
+        </Box>
 
-          <Box display={"flex"} gridColumnGap={3}>
-            <Typography variant="body2" color="textSecondary">
-              {trace?.author} authored
-            </Typography>
+        {visibleMessage && (
+          <Box className={classes.commitMessageWrap}>
             <Typography
               variant="body2"
               color="textSecondary"
-              title={dayjs(trace?.commitTimestamp).format("MMM D, YYYY h:mm A")}
+              className={classes.commitMessage}
             >
-              {timeStampCommit}
+              {trace?.commitMessage}
             </Typography>
           </Box>
+        )}
+
+        <Box display={"flex"} gridColumnGap={3}>
+          <Typography variant="body2" color="textSecondary">
+            {trace?.author} authored
+          </Typography>
+          <Typography
+            variant="body2"
+            color="textSecondary"
+            title={dayjs(trace?.commitTimestamp).format("MMM D, YYYY h:mm A")}
+          >
+            {timeStampCommit}
+          </Typography>
         </Box>
-        <IconButton
-          aria-label="expand"
-          className={visibleDeployments ? classes.btnRotate : ""}
-          onClick={() => setVisibleDeployments(!visibleDeployments)}
-        >
-          <ArrowDropDown />
-        </IconButton>
       </Box>
 
       <Collapse in={visibleDeployments} unmountOnExit key={trace?.id}>
-        <List className={classes.listItem}>
+        <List>
           {deploymentList.map((deployment) => (
             <ListItem
               key={deployment?.id}

web/src/components/deployment-trace-page/index.tsx

@@ -3,8 +3,6 @@ import {
   Button,
   CircularProgress,
   Divider,
-  List,
-  ListItem,
   makeStyles,
   Toolbar,
   Typography,
@@ -46,9 +44,6 @@ const useStyles = makeStyles((theme) => ({
     flex: 1,
     overflowY: "scroll",
   },
-  listItem: {
-    backgroundColor: theme.palette.background.paper,
-  },
   listDeployment: {
     backgroundColor: theme.palette.background.paper,
   },
@@ -145,27 +140,19 @@ const DeploymentTracePage: FC = () => {
             </Box>
           )}
           {dates.map((date) => (
-            <Box key={date}>
+            <Box key={date} mb={1}>
               <Typography variant="subtitle1" className={classes.date}>
                 {date}
               </Typography>
-              <List className={classes.listDeployment}>
+              <Box className={classes.listDeployment}>
                 {deploymentTracesMap[date].map(({ trace, deploymentsList }) => (
-                  <ListItem
+                  <DeploymentTraceItem
                     key={trace?.id}
-                    dense
-                    divider
-                    color="primary"
-                    className={classes.listItem}
-                  >
-                    <DeploymentTraceItem
-                      key={trace?.id}
-                      trace={trace}
-                      deploymentList={deploymentsList}
-                    />
-                  </ListItem>
+                    trace={trace}
+                    deploymentList={deploymentsList}
+                  />
                 ))}
-              </List>
+              </Box>
             </Box>
           ))}
           {status === "succeeded" && <div ref={ref} />}

web/src/components/header/index.tsx

@@ -62,6 +62,7 @@ const useStyles = makeStyles((theme) => ({
   },
   right: {
     height: "100%",
+    overflow: "hidden",
     "&:hover": {
       color: theme.palette.grey[400],
     },
@@ -183,7 +184,7 @@ export const Header: FC = memo(function Header() {
                 color="inherit"
                 to={PAGE_PATH_DEPLOYMENT_TRACE}
               >
-                Deployment Traces
+                Traces
               </Link>
               <Link
                 component={RouterLink}