Feature/app 13 allow users to add multiple authors to reports (#152)

Co-authored-by: Anna Pokorska <[email protected]>
Co-authored-by: Osneil Drakes <[email protected]>

package.json

@@ -43,6 +43,7 @@
     "@types/draftjs-to-html": "^0.8.3",
     "@types/html-to-draftjs": "^1.4.2",
     "@types/jwt-decode": "^3.1.0",
+    "@types/jwt-encode": "^1.0.3",
     "@types/node": "^22.5.5",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",

src/components/forms/DynamicMetadataFields.tsx

@@ -5,6 +5,7 @@ import { formatFieldLabel } from '@/utils/metadataUtils'
 import { SelectField } from './fields/SelectField'
 import { TextField } from './fields/TextField'
 import { ITaxonomyField, TSubTaxonomy } from '@/interfaces'
+import { MultiValueInput } from './fields/MultiValueInput'
 
 type TProps<T extends FieldValues> = {
   fieldKey: string
@@ -43,7 +44,7 @@ export const DynamicMetadataFields = <T extends FieldValues>({
   const isRequired = !allow_blanks
 
   const renderField = () => {
-    if (allow_any) {
+    if (allow_any && fieldType !== FieldType.MULTI_VALUE_INPUT) {
       return (
         <TextField<T>
           name={fieldKey as Path<T>}
@@ -78,6 +79,15 @@ export const DynamicMetadataFields = <T extends FieldValues>({
             label={formatFieldLabel(fieldKey)}
           />
         )
+      case FieldType.MULTI_VALUE_INPUT:
+        return (
+          <MultiValueInput
+            name={fieldKey as Path<T>}
+            control={control}
+            label={formatFieldLabel(fieldKey)}
+            isRequired={isRequired}
+          />
+        )
       case FieldType.TEXT:
       default:
         return (

src/components/forms/FamilyForm.tsx

@@ -181,8 +181,8 @@ export const FamilyForm = ({ family: loadedFamily }: TProps) => {
         label: 'Intergovernmental Organization',
       }
 
-      setValue('author', corpusAuthor)
-      setValue('author_type', corpusAuthorType)
+      setValue('author', [corpusAuthor])
+      setValue('author_type', [corpusAuthorType])
     }
   }, [watchCorpus, isMCFCorpus, loadedFamily, setValue])
 
@@ -312,6 +312,8 @@ export const FamilyForm = ({ family: loadedFamily }: TProps) => {
               value: v,
               label: v,
             }))
+          } else if (fieldConfig.type === FieldType.MULTI_VALUE_INPUT) {
+            loadedMetadata[key] = value
           } else {
             loadedMetadata[key] = value?.[0]
           }

src/components/forms/fields/MultiValueInput.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react'
+import {
+  Box,
+  Input,
+  Tag,
+  TagLabel,
+  TagCloseButton,
+  VStack,
+  HStack,
+  FormLabel,
+  FormControl,
+  FormHelperText,
+  FormErrorMessage,
+} from '@chakra-ui/react'
+import { Controller, Control, FieldValues, Path } from 'react-hook-form'
+
+type TProps<T extends FieldValues> = {
+  name: Path<T>
+  control: Control<T>
+  type?: 'text' | 'number'
+  label?: string
+  isRequired?: boolean
+  showHelperText?: boolean
+  isDisabled?: boolean
+}
+
+export const MultiValueInput = <T extends FieldValues>({
+  name,
+  control,
+  type = 'text',
+  label,
+  showHelperText,
+  isDisabled,
+}: TProps<T>) => {
+  const [inputValue, setInputValue] = useState('')
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => {
+        const handleAddValue = () => {
+          const currentValues = (field.value as string[]) || []
+          if (inputValue.trim() && !currentValues.includes(inputValue.trim())) {
+            const newValues = [...currentValues, inputValue.trim()]
+            field.onChange(newValues)
+            setInputValue('')
+          }
+        }
+
+        const handleRemoveValue = (valueToRemove: string) => {
+          const currentValues = field.value || []
+          const newValues = currentValues.filter(
+            (value) => value !== valueToRemove,
+          )
+          field.onChange(newValues)
+        }
+
+        const handleKeyDown = (e: React.KeyboardEvent) => {
+          if (e.key === 'Enter') {
+            e.preventDefault()
+            handleAddValue()
+          }
+        }
+
+        return (
+          <FormControl
+            isInvalid={!!error}
+            isReadOnly={isDisabled}
+            isDisabled={isDisabled}
+            isRequired={field.value?.length === 0}
+          >
+            {label && <FormLabel>{label}</FormLabel>}
+            <FormHelperText mb={2}>
+              You are able to add multiple values
+            </FormHelperText>
+            <Box>
+              <VStack spacing={4} align='stretch'>
+                <HStack>
+                  <Input
+                    {...field} // This destructured object contains the value
+                    name={name}
+                    type={type}
+                    bg='white'
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder='Type a value and press Enter'
+                    value={inputValue}
+                  />
+                </HStack>
+                <HStack wrap='wrap' spacing={2}>
+                  {(field.value || []).map((value: string, index: number) => (
+                    <Tag
+                      key={index}
+                      size='lg'
+                      colorScheme='gray'
+                      borderRadius='full'
+                    >
+                      <TagLabel>{value}</TagLabel>
+                      <TagCloseButton
+                        onClick={() => handleRemoveValue(value)}
+                      />
+                    </Tag>
+                  ))}
+                </HStack>
+              </VStack>
+            </Box>
+            {showHelperText && isDisabled && (
+              <FormHelperText>You cannot edit this</FormHelperText>
+            )}
+            {error && <FormErrorMessage>{error.message}</FormErrorMessage>}
+          </FormControl>
+        )
+      }}
+    />
+  )
+}

src/components/forms/metadata-handlers/familyForm.ts

@@ -74,8 +74,8 @@ interface IFamilyFormGefProjects extends IFamilyFormMcfProjects {
 }
 
 interface IFamilyFormReports extends IFamilyFormBase {
-  author?: string
-  author_type?: IChakraSelect
+  author?: string[]
+  author_type?: IChakraSelect[]
   external_id?: string
 }
 
@@ -89,6 +89,7 @@ export type TFamilyFormSubmit =
   | IFamilyFormLawsAndPolicies
   | IFamilyFormIntlAgreements
   | TFamilyFormMcfProjects
+  | IFamilyFormReports
 
 // Mapping of corpus types to their specific metadata handlers
 export const corpusMetadataHandlers: Record<
@@ -249,10 +250,8 @@ export const corpusMetadataHandlers: Record<
     extractMetadata: (formData: TFamilyFormSubmit) => {
       const reportsData = formData as IFamilyFormReports
       return {
-        author: reportsData.author ? [reportsData.author] : [],
-        author_type: reportsData.author_type
-          ? [reportsData.author_type?.value]
-          : [],
+        author: reportsData.author ? reportsData.author : [],
+        author_type: reportsData.author_type?.map((type) => type.value),
         external_id: reportsData.external_id ? [reportsData.external_id] : [],
       } as IReportsMetadata
     },

src/interfaces/Config.ts

@@ -17,6 +17,10 @@ export interface IDefaultDocSubTaxonomy extends ISubTaxonomy {
   type: ITaxonomyField
 }
 
+export interface IReportsDocSubTaxonomy extends ISubTaxonomy {
+  type: ITaxonomyField
+}
+
 export interface IGcfDocSubTaxonomy extends ISubTaxonomy {
   type: ITaxonomyField
 }
@@ -64,6 +68,14 @@ export interface IConfigTaxonomyUNFCCC extends ITaxonomy {
   _event: IEventSubTaxonomy
 }
 
+export interface IConfigReportsTaxonomy extends ITaxonomy {
+  author: ITaxonomyField
+  author_type: ITaxonomyField
+  event_type: ITaxonomyField
+  _document: IReportsDocSubTaxonomy
+  _event: IEventSubTaxonomy
+}
+
 interface IConfigMCFBaseTaxonomy extends ITaxonomy {
   event_type: ITaxonomyField
   implementing_agency: ITaxonomyField
@@ -108,6 +120,7 @@ export type TTaxonomy =
   | IConfigTaxonomyCCLW
   | IConfigTaxonomyUNFCCC
   | IConfigTaxonomyMCF
+  | IConfigReportsTaxonomy
 
 // Config endpoint types.
 export interface IConfigGeographyNode {

src/interfaces/Family.ts

@@ -61,6 +61,7 @@ export type TFamilyMetadata =
   | IInternationalAgreementsMetadata
   | ILawsAndPoliciesMetadata
   | TMcfProjectsMetadata
+  | IReportsMetadata
 
 // Read DTOs.
 interface IFamilyBase {
@@ -174,3 +175,4 @@ export type TFamilyFormPost =
   | ILawsAndPoliciesFamilyFormPost
   | IInternationalAgreementsFamilyFormPost
   | TMcfFamilyFormPost
+  | IReportsFamilyFormPost

src/interfaces/Metadata.ts

@@ -6,6 +6,7 @@ export enum FieldType {
   SINGLE_SELECT = 'single_select',
   NUMBER = 'number',
   DATE = 'date',
+  MULTI_VALUE_INPUT = 'multi_value_input',
 }
 
 export interface IMetadata {
@@ -170,8 +171,8 @@ export const CORPUS_METADATA_CONFIG: CorpusMetadataConfig = {
   },
   Reports: {
     renderFields: {
-      author: { type: FieldType.TEXT },
-      author_type: { type: FieldType.SINGLE_SELECT },
+      author: { type: FieldType.MULTI_VALUE_INPUT },
+      author_type: { type: FieldType.MULTI_SELECT },
       external_id: { type: FieldType.TEXT },
     },
     validationFields: ['author', 'author_type', 'external_id'],

src/schemas/dynamicValidationSchema.ts

@@ -24,6 +24,13 @@ const getFieldValidation = (
         }),
       )
       break
+    case FieldType.MULTI_VALUE_INPUT:
+      fieldValidation = yup
+        .array()
+        .of(yup.string())
+        .required()
+        .min(1, 'You must provide at least one author')
+      break
     case FieldType.SINGLE_SELECT:
       fieldValidation = yup.object({
         value: yup.string().required(),

src/tests/helpers.ts

@@ -0,0 +1,26 @@
+import sign from 'jwt-encode'
+
+export const setupUser = (
+  organisationName: string = 'CPR',
+  email: string = '[email protected]',
+  isSuperuser: boolean = true,
+  isAdmin: boolean = true,
+  orgId: number = 1,
+) => {
+  localStorage.setItem(
+    'token',
+    sign(
+      {
+        email: email,
+        is_superuser: isSuperuser,
+        authorisation: {
+          [organisationName]: {
+            is_admin: isAdmin,
+          },
+          org_id: orgId,
+        },
+      },
+      '',
+    ),
+  )
+}

src/tests/mocks/api/configHandlers.ts

@@ -0,0 +1,16 @@
+import { cclwConfigMock, mcfConfigMock } from '@/tests/utilsTest/mocks'
+import { http, HttpResponse } from 'msw'
+import { jwtDecode } from 'jwt-decode'
+
+export const configHandlers = [
+  http.get('*/v1/config', (req) => {
+    const authHeader = req.request.headers.get('authorization')
+    const parsedAuthToken: Record<string, object> = jwtDecode(authHeader || '')
+    const authorisation = parsedAuthToken?.authorisation || {}
+    const org = Object.keys(authorisation)[0]
+    if (org && ['GCF', 'GEF', 'AF', 'CIF'].includes(org)) {
+      return HttpResponse.json({ ...mcfConfigMock })
+    }
+    return HttpResponse.json({ ...cclwConfigMock })
+  }),
+]

src/tests/mocks/handlers.ts

@@ -1,14 +1,11 @@
-import { http, HttpResponse } from 'msw'
-import { cclwConfigMock } from '../utilsTest/mocks'
 import { familyHandlers } from './api/familyHandlers'
 import { collectionHandlers } from './api/collectionHandlers'
 import { eventHandlers } from './api/eventHandlers'
 import { documentHandlers } from './api/documentHandlers'
+import { configHandlers } from './api/configHandlers'
 
 export const handlers = [
-  http.get('*/v1/config', () => {
-    return HttpResponse.json({ ...cclwConfigMock })
-  }),
+  ...configHandlers,
   ...familyHandlers,
   ...collectionHandlers,
   ...eventHandlers,

src/tests/setup.js

@@ -2,8 +2,8 @@ import { cleanup } from '@testing-library/react'
 import { reset } from './mocks/repository.ts'
 import { server } from './mocks/server.ts'
 import * as matchers from '@testing-library/jest-dom/matchers'
-import sign from 'jwt-encode'
 import { vi } from 'vitest'
+import { setupUser } from './helpers.ts'
 
 expect.extend(matchers)
 
@@ -60,7 +60,7 @@ window.IntersectionObserver =
 // Establish API mocking before all tests.
 beforeAll(() => {
   server.listen()
-  localStorage.setItem('token', sign({ is_superuser: true }, ''))
+  setupUser()
 })
 
 // Reset any request handlers that we may add during the tests,

src/tests/utils/modifyConfig.test.ts

@@ -2,7 +2,7 @@ import { IConfig } from '@/interfaces'
 import { modifyConfig } from '@utils/modifyConfig'
 
 describe('modifyConfig', () => {
-  it(' adds a languagesSorted property to the config object with languages sorted alphabetically by label', () => {
+  it('adds a languagesSorted property to the config object with languages sorted alphabetically by label', () => {
     const mockConfig: IConfig = {
       document: {
         roles: ['role1', 'role2'],