CSSTUDIO-2727: improve keyboard navigation, rework replies UI

Olog · Nov 7, 2024 · d96675b · d96675b
1 parent 768ff76
commit d96675b
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 289 deletions.
diff --git a/src/beta/components/log/LogDetails/LogDetails.js b/src/beta/components/log/LogDetails/LogDetails.js
@@ -12,7 +12,7 @@ const LogDetails = ({ log, className }) => {
     <Stack
       className={`LogDetails ${className}`}
       gap={1}
-      p={2}
+      p={5}
       sx={{
         overflow: "scroll"
       }}

diff --git a/src/beta/components/log/LogDetails/LogDetailsWithReplies.js b/src/beta/components/log/LogDetails/LogDetailsWithReplies.js
@@ -42,12 +42,13 @@ const LogDetailsAccordion = styled(({ log, defaultExpanded = false, className })
                 aria-controls={`${log.id}-content`}
                 id={`${log.id}-header`}
                 sx={{
-                    bgcolor: "grey.100"
+                    bgcolor: "grey.100",
+                    padding: "0 40px"
                 }}
             >
                 <StyledLogHeader log={log} />
             </AccordionSummary>
-            <AccordionDetails>
+            <AccordionDetails sx={{ padding: 0 }}>
                 <LogDetails log={log} />
             </AccordionDetails>
         </Accordion>
@@ -105,7 +106,7 @@ const LogDetailsWithReplies = ({ log }) => {
 
     return (
         <Stack sx={{ height: "100%", overflow: "auto" }}>
-            <Box padding={2} bgcolor={"grey.100"}>
+            <Box padding={2} px={5} bgcolor={"grey.100"}>
                 <LogHeader log={log} />
             </Box>
             <LogDetails log={log} />

diff --git a/src/beta/components/log/TagChip.jsx b/src/beta/components/log/TagChip.jsx
@@ -2,16 +2,16 @@ import React from "react";
 import LocalOfferIcon from '@mui/icons-material/LocalOffer';
 import { Chip } from "@mui/material";
 
-export const TagChip = ({value, ...props}) => {
+export const TagChip = ({ value, ...props }) => {
   return (
-    <Chip 
-      label={value} 
-      aria-label={`has tag ${value}`} 
-      icon={<LocalOfferIcon />} 
+    <Chip
+      label={value}
+      aria-label={`has tag ${value}`}
+      icon={<LocalOfferIcon sx={{ padding: "1px 0 1px 1px" }} />}
       size="small"
       variant="outlined"
-      color="ologOrange" 
-      {...props} 
+      color="ologOrange"
+      {...props}
     />
   );
 };
diff --git a/src/beta/components/search/SearchResultList/SearchResultGroupItem/GroupChild.jsx b/src/beta/components/search/SearchResultList/SearchResultGroupItem/GroupChild.jsx
diff --git a/src/beta/components/search/SearchResultList/SearchResultGroupItem/GroupParent.jsx b/src/beta/components/search/SearchResultList/SearchResultGroupItem/GroupParent.jsx
diff --git a/src/beta/components/search/SearchResultList/SearchResultGroupItem/SearchResultGroupItem.jsx b/src/beta/components/search/SearchResultList/SearchResultGroupItem/SearchResultGroupItem.jsx
@@ -1,107 +1,44 @@
 import React, { useState } from "react";
-import { Box, CircularProgress, IconButton, Stack, Tooltip, styled } from "@mui/material";
-import { ologApi } from "api/ologApi";
-import { getLogEntryGroupId } from "components/Properties";
-import { GroupParent } from "./GroupParent";
-import { GroupChild } from "./GroupChild";
-import { sortByCreatedDate } from "components/log/sort";
+import { IconButton, Stack, Typography, styled } from "@mui/material";
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import { SearchResultSingleItem } from "..";
+import { useCurrentLogEntry } from "features/currentLogEntryReducer";
 
-export const SearchResultGroupItem = styled(({log, onClick=() => {}, selectedId, dateDescending=true}) => {
+export const SearchResultGroupItem = styled(({ log, onClick = () => { }, handleKeyDown }) => {
 
-  const [expanded, setExpanded] = useState(true);
-  const { data: replies, isLoading: repliesLoading, error: repliesError } = ologApi.endpoints.getLogGroup.useQuery(
-    {groupId: getLogEntryGroupId(log?.properties ?? [])}
-  );
+  const currentLogEntry = useCurrentLogEntry();
+  const currentLogEntryId = Number(currentLogEntry?.id);
 
-  const onExpandClick = () => {
+  const [expanded, setExpanded] = useState(true);
+  const onExpandClick = (e) => {
+    e.stopPropagation();
     setExpanded(!expanded);
   }
 
-  let renderedIcon = (
-    <IconButton
-      onClick={onExpandClick}
-      size="small"
-      aria-expanded={expanded ? "true": "false"}
-    >
-      {expanded
-        ? <RemoveCircleOutlineIcon fontSize="inherit" /> 
-        : <AddCircleOutlineIcon fontSize="inherit" />
-      }
-    </IconButton>
+  const ExpandIcon = () => (
+    <Stack mt={1.5} flexDirection="row" alignItems="center" onClick={onExpandClick} sx={{ cursor: "pointer", width: "fit-content" }}>
+      <IconButton
+        sx={{ color: "#0099db", padding: "0 5px 0 0" }}
+        size="small"
+        aria-expanded={expanded ? "true" : "false"}
+      >
+        {expanded
+          ? <RemoveCircleOutlineIcon fontSize="inherit" />
+          : <AddCircleOutlineIcon fontSize="inherit" />
+        }
+      </IconButton>
+      <Typography color="#0099db" variant="body2">{expanded ? "Hide" : "Show"} replies</Typography>
+    </Stack>
   );
 
-  if(repliesLoading) {
-    renderedIcon = (
-      <CircularProgress size={15} />
-    );
-  }
-  if(repliesError) {
-    renderedIcon = (
-      <Tooltip title="unable to load replies">
-        <ErrorOutlineIcon color="error" fontSize="inherit" />
-      </Tooltip>
-    );
-  }
-
   return (
-    <Stack sx={{
-      display: "grid",
-      gridTemplateColumns: "repeat(2, 14px) 10px auto",
-      paddingBottom: 0.5,
-      "& .group-parent-icon": {
-        gridColumn: "span 2"
-      },
-      "& .group-parent": {
-        gridColumn: "span 2"
-      },
-      "& .group-child-connector": {
-        borderWidth: 0,
-        borderStyle: "solid",
-        borderColor: "grey.500"
-      },
-      "& .group-child-connector-line": {
-        position: "relative",
-        borderRightWidth: 1
-      },
-      "& .group-child-connector-line.last": {
-        borderRightWidth: "0px !important"
-      },
-      "& .group-child-elbow": {
-        height: "50%",
-        position: "relative",
-        right: 1,
-        borderBottomWidth: 1,
-        borderLeftWidth: 1,
-        borderBottomLeftRadius: "75%",
-      },
-      "& .reply-is-parent-icon": {
-        position: "relative",
-        right: 6
-      }
-    }}>
-      <Stack justifyContent="center" alignItems="center" className="group-parent-icon">
-        {renderedIcon}
-      </Stack>
-      <GroupParent log={log} replyCount={replies?.length ?? null} onClick={onClick} selected={`${selectedId}` === `${log.id}`} />
-      {replies && expanded ? replies
-        .toSorted(sortByCreatedDate(dateDescending))
-        .map((reply, index) => {
-          const replyIsParent = reply.id === log.id;
-          return (
-            <React.Fragment key={reply.id}>
-              <Box className={`group-child-connector group-child-connector-line ${index === replies.length -1 ? "last": "" }`} />
-              <Box className="group-child-connector group-child-elbow" />
-              {replyIsParent ? <ArrowRightIcon fontSize="small" className="reply-is-parent-icon" /> : null }
-              <Box gridColumn={replyIsParent ? "span 1" : "span 2"}>
-                <GroupChild log={reply} onClick={onClick} selected={`${selectedId}` === `${reply.id}`} />
-              </Box>
-            </React.Fragment>
-          )
-        }) : null}
-    </Stack>
+    <>
+      <SearchResultSingleItem log={log} selected={currentLogEntryId === log.id} onClick={onClick} expandIcon={<ExpandIcon />} handleKeyDown={handleKeyDown} />
+
+      {expanded && log?.replies.map(reply => (
+        <SearchResultSingleItem log={reply} selected={currentLogEntryId === reply.id} onClick={onClick} isReply={true} handleKeyDown={handleKeyDown} />
+      ))}
+    </>
   );
 })({});