feat(j-s): show error state for invalid items in SelectableList

apps/judicial-system/web/src/components/SelectableList/SelectableList.tsx

@@ -2,7 +2,13 @@ import { FC, PropsWithChildren, useEffect, useState } from 'react'
 import { useIntl } from 'react-intl'
 import { AnimatePresence, motion } from 'framer-motion'
 
-import { Box, Button, Checkbox, LoadingDots } from '@island.is/island-ui/core'
+import {
+  Box,
+  Button,
+  Checkbox,
+  Icon,
+  LoadingDots,
+} from '@island.is/island-ui/core'
 
 import { IconAndText } from '../../routes/Prosecutor/components'
 import { selectableList as strings } from './SelectableList.strings'
@@ -15,6 +21,8 @@ interface CTAButtonAttributes {
 export interface Item {
   id: string
   name: string
+  invalid?: boolean
+  tooltipText?: string
 }
 
 interface SelectableItem extends Item {
@@ -80,10 +88,11 @@ const SelectableList: FC<Props> = (props) => {
 
     setSelectableItems((selectableItems) =>
       items.map((item) => ({
-        id: item.id,
-        name: item.name,
+        ...item,
         checked:
-          selectableItems.find((i) => i.id === item.id)?.checked ?? false,
+          (selectableItems.find((i) => i.id === item.id)?.checked &&
+            !item.invalid) ??
+          false,
       })),
     )
   }, [items, isLoading])
@@ -110,13 +119,16 @@ const SelectableList: FC<Props> = (props) => {
             label={formatMessage(strings.selectAllLabel)}
             checked={
               selectableItems.length > 0 &&
-              selectableItems.every((item) => item.checked === true)
+              // check if all valid selectable items are checked
+              selectableItems
+                .filter((item) => !item.invalid)
+                .every((item) => item.checked)
             }
             onChange={(evt) =>
-              setSelectableItems((items) =>
-                items?.map((item) => ({
+              setSelectableItems((selectableItems) =>
+                selectableItems?.map((item) => ({
                   ...item,
-                  checked: evt.target.checked,
+                  checked: evt.target.checked && !item.invalid,
                 })),
               )
             }
@@ -174,8 +186,10 @@ const SelectableList: FC<Props> = (props) => {
                     marginBottom={index === selectableItems.length - 1 ? 0 : 2}
                     paddingX={3}
                     paddingY={2}
-                    background="blue100"
+                    background={item.invalid ? 'red100' : 'blue100'}
                     borderRadius="standard"
+                    display="flex"
+                    justifyContent="spaceBetween"
                   >
                     <Checkbox
                       label={
@@ -191,17 +205,28 @@ const SelectableList: FC<Props> = (props) => {
                       name={item.id}
                       value={item.name}
                       checked={item.checked}
+                      tooltip={item.tooltipText}
                       onChange={(evt) =>
-                        setSelectableItems((items) =>
-                          items.map((i) =>
+                        setSelectableItems((selectableItems) =>
+                          selectableItems.map((i) =>
                             i.id === item.id
                               ? { ...i, checked: evt.target.checked }
                               : i,
                           ),
                         )
                       }
-                      disabled={isHandlingCTA}
+                      disabled={item.invalid || isHandlingCTA}
                     />
+                    {item.invalid && (
+                      <Box display="flex" alignItems="center">
+                        <Icon
+                          size="small"
+                          type="outline"
+                          color={'red300'}
+                          icon={'warning'}
+                        />
+                      </Box>
+                    )}
                   </Box>
                 </motion.li>
               ))}

apps/judicial-system/web/src/routes/Prosecutor/components/PoliceCaseFiles/PoliceCaseFiles.strings.ts

@@ -38,4 +38,11 @@ export const strings = defineMessages({
     description:
       'Notaður sem texti í upplýsingaboxi fyrir ákæru/kröfu sem ekki er stofnuð í LÖKE í LÖKE gagnapakkanum.',
   },
+  invalidPoliceCaseFileFromLOKE: {
+    id: 'judicial.system.core:police_case_files.invalid_police_case_file_from_loke',
+    defaultMessage:
+      'Skráartegund ekki leyfð í Réttarvörslugátt. Eingöngu er tekið á móti gögnum á .PDF formi.',
+    description:
+      'Notaður sem texti í upplýsingasvæði fyrir skrár sem RVG styður ekki',
+  },
 })

apps/judicial-system/web/src/routes/Prosecutor/components/PoliceCaseFiles/PoliceCaseFiles.tsx

@@ -2,7 +2,7 @@ import { FC, useContext } from 'react'
 import { useIntl } from 'react-intl'
 
 import { AlertMessage, Box } from '@island.is/island-ui/core'
-import { isIndictmentCase } from '@island.is/judicial-system/types'
+import { CaseType, isIndictmentCase } from '@island.is/judicial-system/types'
 import {
   FormContext,
   Item,
@@ -12,6 +12,7 @@ import {
   CaseOrigin,
   PoliceCaseFile,
 } from '@island.is/judicial-system-web/src/graphql/schema'
+import { formatMessage } from '@island.is/judicial-system-web/src/utils/testHelpers'
 
 import { strings } from './PoliceCaseFiles.strings'
 
@@ -44,22 +45,36 @@ interface Props {
   policeCaseFiles?: PoliceCaseFilesData
 }
 
+const validateFileName = (filename: string) => {
+  const invalid = !filename.endsWith('.pdf')
+  if (!invalid) return {}
+
+  return {
+    invalid,
+    tooltipText: formatMessage(strings.invalidPoliceCaseFileFromLOKE),
+  }
+}
+
 const PoliceCaseFiles: FC<Props> = ({
   onUpload,
   policeCaseFileList,
   policeCaseFiles,
 }) => {
   const { formatMessage } = useIntl()
   const { workingCase } = useContext(FormContext)
+  const isIndictment = workingCase.type === CaseType.INDICTMENT
 
   return (
     <Box marginBottom={5}>
       {workingCase.origin === CaseOrigin.LOKE && (
         <SelectableList
-          items={policeCaseFileList?.map((p) => ({
-            id: p.id,
-            name: p.name,
-          }))}
+          items={policeCaseFileList?.map((p) => {
+            return {
+              id: p.id,
+              name: p.name,
+              ...(isIndictment ? validateFileName(p.name) : {}),
+            }
+          })}
           CTAButton={{
             onClick: onUpload,
             label: formatMessage(strings.uploadButtonLabel),