Table bug fixes (#2479)

Improve the behavior of tables with links using Charka's `<LinkBox>` and `<LinkOverlay>`.
Doenet · Aug 26, 2024 · 6ab52c6 · 6ab52c6
1 parent ac206ae
commit 6ab52c6
Show file tree

Hide file tree

Showing 6 changed files with 306 additions and 297 deletions.
diff --git a/client/src/Tools/_framework/Paths/Activities.tsx b/client/src/Tools/_framework/Paths/Activities.tsx
@@ -522,6 +522,7 @@ export function Activities() {
           noOfLines={1}
           maxHeight="1.5em"
           lineHeight="normal"
+          data-test="Folder Heading"
         >
           <Tooltip label={headingText}>{headingText}</Tooltip>
         </Heading>

diff --git a/client/src/Tools/_framework/Paths/AssignmentData.tsx b/client/src/Tools/_framework/Paths/AssignmentData.tsx
@@ -17,6 +17,8 @@ import {
   SimpleGrid,
   VStack,
   Box,
+  LinkBox,
+  LinkOverlay,
   Link as ChakraLink,
 } from "@chakra-ui/react";
 import axios from "axios";
@@ -188,26 +190,18 @@ export function AssignmentData() {
                       "/" +
                       assignmentScore.user.userId;
                     return (
-                      <Tr key={`user${assignmentScore.user.userId}`}>
+                      <LinkBox
+                        as={Tr}
+                        key={`user${assignmentScore.user.userId}`}
+                        _hover={{ backgroundColor: "#eeeeee" }}
+                      >
                         <Td>
-                          <ChakraLink
-                            as={ReactRouterLink}
-                            to={linkURL}
-                            style={linkStyle}
-                          >
+                          <LinkOverlay as={ReactRouterLink} to={linkURL}>
                             {createFullName(assignmentScore.user)}
-                          </ChakraLink>
-                        </Td>
-                        <Td>
-                          <ChakraLink
-                            as={ReactRouterLink}
-                            to={linkURL}
-                            style={linkStyle}
-                          >
-                            {Math.round(assignmentScore.score * 100) / 100}
-                          </ChakraLink>
+                          </LinkOverlay>
                         </Td>
-                      </Tr>
+                        <Td>{Math.round(assignmentScore.score * 100) / 100}</Td>
+                      </LinkBox>
                     );
                   })}
                 </Tbody>
@@ -262,37 +256,21 @@ export function AssignmentData() {
                           answerObj.docVersionNum
                         }?answerId=${encodeURIComponent(answerObj.answerId)}`;
                         return (
-                          <Tr key={key}>
+                          <LinkBox
+                            as={Tr}
+                            key={key}
+                            _hover={{ backgroundColor: "#eeeeee" }}
+                          >
                             <Td>
-                              <ChakraLink
-                                as={ReactRouterLink}
-                                to={linkURL}
-                                style={linkStyle}
-                              >
+                              <LinkOverlay as={ReactRouterLink} to={linkURL}>
                                 {answerObj.answerId}
-                              </ChakraLink>
-                            </Td>
-                            <Td>
-                              <ChakraLink
-                                as={ReactRouterLink}
-                                to={linkURL}
-                                style={linkStyle}
-                              >
-                                {answerObj.count}
-                              </ChakraLink>
+                              </LinkOverlay>
                             </Td>
+                            <Td>{answerObj.count}</Td>
                             <Td>
-                              <ChakraLink
-                                as={ReactRouterLink}
-                                to={linkURL}
-                                style={linkStyle}
-                              >
-                                {Math.round(answerObj.averageCredit * 1000) /
-                                  10}
-                                %
-                              </ChakraLink>
+                              {Math.round(answerObj.averageCredit * 1000) / 10}%
                             </Td>
-                          </Tr>
+                          </LinkBox>
                         );
                       })}
                     </Tbody>

diff --git a/client/src/Tools/_framework/Paths/Home.tsx b/client/src/Tools/_framework/Paths/Home.tsx
@@ -178,6 +178,7 @@ export function Home() {
         justifyContent="center"
         bg={blackColor}
         py="30px"
+        overflow="hidden"
       >
         <Show above="sm">
           <Grid

diff --git a/client/src/Tools/_framework/Paths/StudentData.tsx b/client/src/Tools/_framework/Paths/StudentData.tsx
@@ -12,6 +12,8 @@ import {
   Link,
   Text,
   Box,
+  LinkBox,
+  LinkOverlay,
   Link as ChakraLink,
 } from "@chakra-ui/react";
 import axios from "axios";
@@ -118,36 +120,31 @@ export function StudentData() {
           <Tbody>
             {scores.map((score) => {
               return (
-                <Tr key={`assignment${score.activityId}`}>
+                <LinkBox
+                  as={Tr}
+                  key={`assignment${score.activityId}`}
+                  _hover={{ backgroundColor: "#eeeeee" }}
+                >
                   <Td key={`assignment_title${score.activityId}`}>
-                    {isAssignedData ? (
-                      score.activityName
-                    ) : (
-                      <Link
-                        href={`/assignmentData/${score.activityId}`}
-                        style={linkStyle}
-                      >
-                        {score.activityName}
-                      </Link>
-                    )}
+                    {score.activityName}
                   </Td>
                   <Td key={`score${score.activityId}`}>
                     {score.score !== null ? (
-                      <Link
-                        href={
+                      <LinkOverlay
+                        as={ReactRouterLink}
+                        to={
                           isAssignedData
-                            ? `assignedData/${score.activityId}`
+                            ? `/assignedData/${score.activityId}`
                             : `/assignmentData/${score.activityId}/${userData.userId}`
                         }
-                        style={linkStyle}
                       >
                         {score.score}
-                      </Link>
+                      </LinkOverlay>
                     ) : (
                       <Text>&#8212;</Text>
                     )}
                   </Td>
-                </Tr>
+                </LinkBox>
               );
             })}
           </Tbody>