chore(j-s): ActiveCases table refactoring (#15474)

* Fix sideStepper for cases in WAITING_FOR_CANCELLATION state * Remove unused code * Remove unused css * Use Table component for ActiveCases * Refactoring * Remove unused code * Styling * Add nicer animations * Add better animations * Refactoring * Remove debug code * Add ability to remove cases * Fix tests --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Jul 15, 2024 · 7cb58ad · 7cb58ad
1 parent 3883852
commit 7cb58ad
Show file tree

Hide file tree

Showing 14 changed files with 225 additions and 720 deletions.
diff --git a/...ts/AccordionItems/IndictmentsCaseFilesAccordionItem/IndictmentsCaseFilesAccordionItem.tsx b/...ts/AccordionItems/IndictmentsCaseFilesAccordionItem/IndictmentsCaseFilesAccordionItem.tsx
@@ -274,7 +274,7 @@ const CaseFile: FC<CaseFileProps> = (props) => {
             <Icon icon="menu" color="blue400" />
           </Box>
           <Box width="full">
-            <AnimatePresence initial={false} exitBeforeEnter>
+            <AnimatePresence initial={false} mode="wait">
               {isEditing ? (
                 <motion.div
                   initial={{ y: 10, opacity: 0 }}

diff --git a/apps/judicial-system/web/src/components/Table/PastCasesTable/PastCasesTable.tsx b/apps/judicial-system/web/src/components/Table/PastCasesTable/PastCasesTable.tsx
@@ -145,7 +145,7 @@ const PastCasesTable: FC<Props> = ({ cases, loading = false, testid }) => {
                   appealCaseNumber={column.appealCaseNumber}
                 />
               </td>
-              <td className={cn(styles.td, styles.largeColumn)}>
+              <td className={styles.largeColumn}>
                 <DefendantInfo defendants={column.defendants} />
               </td>
               <td>

diff --git a/apps/judicial-system/web/src/components/Table/Table.css.ts b/apps/judicial-system/web/src/components/Table/Table.css.ts
@@ -2,14 +2,9 @@ import { globalStyle, style } from '@vanilla-extract/css'
 
 import { theme } from '@island.is/island-ui/theme'
 
-export const header = style({
-  background: theme.color.blue100,
-})
-
 export const table = style({
   borderSpacing: 0,
   borderCollapse: 'collapse',
-  overflow: 'hidden',
 
   // Needed for Safari.
   width: '100%',
@@ -46,30 +41,14 @@ export const largeColumn = style({
     },
   },
 })
-export const blockColumn = style({
-  display: 'block',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-})
 
-export const deleteButtonContainer = style({
-  maxWidth: '0',
-  height: '100%',
-  padding: 0,
-  transform: 'translate3d(2px, 0px, 0px)',
-})
-
-export const td = style({
-  selectors: {
-    [`&:not(${deleteButtonContainer})`]: {
-      padding: `${theme.spacing[2]}px ${theme.spacing[3]}px`,
-    },
-    '&.secondLast': {
-      marginLeft: 'auto',
-      height: '100%',
-      padding: 0,
-    },
-  },
+export const smallContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '34px',
+  height: '34px',
+  marginLeft: 'auto',
 })
 
 globalStyle(`${table} td, th`, {
@@ -83,11 +62,6 @@ globalStyle(`${table} td, th`, {
   textAlign: 'left',
 })
 
-export const expandLabel = style({
-  color: theme.color.blue400,
-  cursor: 'pointer',
-})
-
 export const row = style({
   cursor: 'pointer',
 })

diff --git a/apps/judicial-system/web/src/components/Table/Table.tsx b/apps/judicial-system/web/src/components/Table/Table.tsx
@@ -8,7 +8,7 @@ import React, {
 import { useIntl } from 'react-intl'
 import { useLocalStorage } from 'react-use'
 import parseISO from 'date-fns/parseISO'
-import { AnimatePresence } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 
 import { Box, Text } from '@island.is/island-ui/core'
 import { theme } from '@island.is/island-ui/theme'
@@ -126,7 +126,7 @@ const Table: FC<TableProps> = (props) => {
     }
   }, [data, sortConfig])
 
-  return width < theme.breakpoints.md ? (
+  return width < theme.breakpoints.lg ? (
     <>
       {data.map((theCase: CaseListEntry) => (
         <Box marginTop={2} key={theCase.id}>
@@ -205,30 +205,46 @@ const Table: FC<TableProps> = (props) => {
             data-testid="tableRow"
           >
             {columns.map((td) => (
-              <td key={`${td}-${columns.indexOf(td)}`} className={styles.td}>
-                {td.cell(row)}
-              </td>
+              <td key={`${td}-${columns.indexOf(td)}`}>{td.cell(row)}</td>
             ))}
             {generateContextMenuItems && (
-              <td className={styles.td}>
+              <td width="4%">
                 {generateContextMenuItems(row).length > 0 && (
-                  <AnimatePresence exitBeforeEnter initial={false}>
+                  <AnimatePresence initial={false} mode="popLayout">
                     {isOpeningCaseId === row.id && showLoading ? (
-                      <Box padding={1}>
+                      <motion.div
+                        className={styles.smallContainer}
+                        key={row.id}
+                        initial={{ opacity: 0, y: 5 }}
+                        animate={{ opacity: 1, y: 1 }}
+                        exit={{
+                          opacity: 0,
+                          y: 5,
+                        }}
+                        transition={{ type: 'spring' }}
+                      >
                         <LoadingIndicator />
-                      </Box>
+                      </motion.div>
                     ) : (
                       <ContextMenu
                         menuLabel={`Valmynd fyrir mál ${row.courtCaseNumber}`}
                         items={generateContextMenuItems(row)}
                         disclosure={
-                          <IconButton
-                            icon="ellipsisVertical"
-                            colorScheme="transparent"
+                          <motion.div
+                            className={styles.smallContainer}
+                            key={row.id}
+                            initial={{ opacity: 1 }}
+                            animate={{ opacity: 1, y: 1 }}
+                            exit={{ opacity: 0, y: 5 }}
                             onClick={(evt) => {
                               evt.stopPropagation()
                             }}
-                          />
+                          >
+                            <IconButton
+                              icon="ellipsisVertical"
+                              colorScheme="transparent"
+                            />
+                          </motion.div>
                         }
                       />
                     )}

diff --git a/apps/judicial-system/web/src/components/Table/TableSkeleton/TableSkeleton.tsx b/apps/judicial-system/web/src/components/Table/TableSkeleton/TableSkeleton.tsx
@@ -52,122 +52,122 @@ const TableSkeleton = () => {
       </thead>
       <tbody>
         <tr className={styles.tableRowContainer}>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
         </tr>
         <tr className={styles.tableRowContainer}>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
         </tr>
         <tr className={styles.tableRowContainer}>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
         </tr>
         <tr className={styles.tableRowContainer}>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
         </tr>
         <tr className={styles.tableRowContainer}>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
         </tr>
         <tr className={styles.tableRowContainer}>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
-          <td className={styles.td}>
+          <td>
             <SkeletonLoader width={104} height={32} borderRadius="standard" />
           </td>
         </tr>

diff --git a/apps/judicial-system/web/src/routes/Shared/Cases/ActiveCases.strings.ts b/apps/judicial-system/web/src/routes/Shared/Cases/ActiveCases.strings.ts