Merge pull request #669 from nowcommunity/creating-new-regions

add functionality to create new regions, and to edit region name

cypress/e2e/region.cy.js

@@ -7,28 +7,19 @@ describe('Creating a region', () => {
     cy.login('testSu')
   })
 
-  it.skip('with valid data works', () => {
+  it('with valid data works', () => {
     cy.visit('/region/new')
-    cy.get('[id=order_name-textfield]').type('testOrder')
-    cy.get('[id=family_name-textfield]').type('testFamily')
-    cy.get('[id=genus_name-textfield]').type('testGenus')
-    cy.get('[id=species_name-textfield]').type('testSpecies')
+    cy.contains('Creating new region')
+    cy.contains('Region: This field is required')
+    cy.get('[id=write-button]').should('be.disabled')
+    cy.get('[id=region-textfield]').type('Test Region')
+    cy.contains('Region: This field is required').should('not.exist')
     cy.get('[id=write-button]').should('not.be.disabled')
     cy.get('[id=write-button]').click()
-    cy.get('[id=write-button]').should('be.disabled')
-    cy.contains('button', 'Add existing reference').click()
-    cy.get('button[data-cy^="detailview-button"]').first().click()
-    cy.contains('button', 'Close').click()
-    cy.get('[id=write-button]').should('not.be.disabled')
-    cy.get('[id=write-button]').click()
-    cy.contains('testOrder')
-  })
-
-  it.skip('with missing required fields does not work', () => {
-    cy.visit('/species/new')
-    cy.contains('This field is required')
-    cy.get('[id=write-button]').should('be.disabled')
-    cy.contains('4 Invalid fields')
+    cy.contains('Test Region')
+    cy.get('[id=delete-button]').should('exist')
+    cy.visit('/region/')
+    cy.contains('Test Region')
   })
 })
 
@@ -67,7 +58,7 @@ describe('Editing a region', () => {
     cy.contains('Spain')
     cy.get('[id=edit-button]').click()
     cy.get('[data-testid=RemoveCircleOutlineIcon]').first().click()
-    cy.get('[data-testid=RemoveCircleOutlineIcon]').first().click() // the two regional coordinators
+    cy.get('[data-testid=RemoveCircleOutlineIcon]').first().click() // removes the two regional coordinators
     cy.get('[id=write-button]').click()
     cy.contains('region 4452477e')
     cy.contains('prs').should('not.exist')
@@ -77,7 +68,7 @@ describe('Editing a region', () => {
     cy.get('[id=edit-button]').click()
     cy.get('[data-testid=RemoveCircleOutlineIcon]').first().click()
     cy.get('[data-testid=RemoveCircleOutlineIcon]').first().click()
-    cy.get('[data-testid=RemoveCircleOutlineIcon]').first().click() // the three countries
+    cy.get('[data-testid=RemoveCircleOutlineIcon]').first().click() // removes the three countries
     cy.get('[id=write-button]').click()
     cy.contains('prs').should('not.exist')
     cy.contains('ads').should('not.exist')
@@ -86,6 +77,29 @@ describe('Editing a region', () => {
     cy.contains('Spain').should('not.exist')
   })
 
+  it('with duplicate countries does not work', () => {
+    cy.visit(`/region/1?tab=0`)
+    cy.contains('region 4452477e')
+    cy.get('[id=edit-button]').click()
+    cy.get('[id=country-multiselect]').click()
+    cy.contains('Algeria').click()
+    cy.get('[id=country-add-button]').click()
+    cy.get('[id=country-multiselect]').click()
+    cy.contains('.MuiAutocomplete-option', 'Algeria').click() // this finds the Algeria inside the Autocomplete component
+    cy.get('[id=country-add-button]').click()
+    cy.contains('Countries: Duplicate country in country list')
+    cy.get('[id=write-button]').should('be.disabled')
+  })
+
+  it('with no region name does not work', () => {
+    cy.visit(`/region/1?tab=0`)
+    cy.contains('region 4452477e')
+    cy.get('[id=edit-button]').click()
+    cy.get('[id=region-textfield]').clear()
+    cy.contains('Region: This field is required')
+    cy.get('[id=write-button]').should('be.disabled')
+  })
+
   it('add country button is disabled for invalid or empty countries', () => {
     cy.visit(`/region/1?tab=0`)
     cy.contains('region 4452477e')

frontend/src/components/DetailView/common/defaultValues.ts

@@ -1,6 +1,7 @@
 import {
   LocalityDetailsType,
   ReferenceDetailsType,
+  RegionDetails,
   SpeciesDetailsType,
   TimeBoundDetailsType,
   TimeUnitDetailsType,
@@ -237,3 +238,9 @@ export const emptyReference = {
   ref_journal: null,
   visible_ref_authors: [],
 } as unknown as ReferenceDetailsType
+
+export const emptyRegion = {
+  region: '',
+  now_reg_coord_people: [],
+  now_reg_coord_country: [],
+} as unknown as RegionDetails

frontend/src/components/Region/RegionDetails.tsx

@@ -6,18 +6,20 @@ import { CoordinatorTab } from './Tabs/CoordinatorTab'
 import { EditDataType, RegionDetails as RegionDetailsType, ValidationErrors } from '@/shared/types'
 import { useNotify } from '@/hooks/notification'
 import { validateRegion } from '@/shared/validators/region'
+import { emptyRegion } from '../DetailView/common/defaultValues'
 
 export const RegionDetails = () => {
   const { id } = useParams()
-  const { isLoading, isError, data } = useGetRegionDetailsQuery(id!)
+  const isNew = id === 'new'
+  const { isLoading, isError, data } = useGetRegionDetailsQuery(id!, { skip: isNew })
   const [editRegionRequest, { isLoading: mutationLoading }] = useEditRegionMutation()
   const notify = useNotify()
   const navigate = useNavigate()
 
   if (isError) return <div>Error loading data</div>
-  if (isLoading || !data || mutationLoading) return <CircularProgress />
+  if (isLoading || (!data && !isNew) || mutationLoading) return <CircularProgress />
 
-  document.title = data.region
+  document.title = isNew ? 'New region' : data!.region
 
   const onWrite = async (editData: EditDataType<RegionDetailsType>) => {
     try {
@@ -37,5 +39,13 @@ export const RegionDetails = () => {
     },
   ]
 
-  return <DetailView tabs={tabs} data={data} onWrite={onWrite} validator={validateRegion} />
+  return (
+    <DetailView
+      tabs={tabs}
+      isNew={isNew}
+      data={isNew ? emptyRegion : data!}
+      onWrite={onWrite}
+      validator={validateRegion}
+    />
+  )
 }

frontend/src/components/Region/Tabs/CoordinatorTab.tsx

@@ -6,7 +6,7 @@ import {
   RegionDetailsWithComPeople,
 } from '@/shared/types'
 import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
-import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
+import { ArrayFrame, Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
 import { MRT_ColumnDef } from 'material-react-table'
 import { EditableTable } from '@/components/DetailView/common/EditableTable'
 import { SelectingTable } from '@/components/DetailView/common/SelectingTable'
@@ -18,7 +18,7 @@ import { CircularProgress, Box, FormControl, Autocomplete, Button, TextField, Fo
 import { validCountries } from '@/shared/validators/countryList'
 
 export const CoordinatorTab = () => {
-  const { mode, editData, setEditData, validator } = useDetailContext<RegionDetailsWithComPeople>()
+  const { mode, editData, setEditData, validator, textField } = useDetailContext<RegionDetailsWithComPeople>()
   const { data: personsData, isLoading, isError } = useGetAllPersonsQuery(mode.read ? skipToken : undefined)
   const [dropdownValue, setDropdownValue] = useState('')
 
@@ -149,10 +149,13 @@ export const CoordinatorTab = () => {
     },
   ]
 
+  const regionName = [['Name', textField('region')]]
+
   if (isLoading) return <CircularProgress />
 
   return (
     <>
+      <ArrayFrame half array={regionName} title="Region" />
       <Grouped title="Regional Coordinators">
         {!mode.read && (
           <SelectingTable<PersonDetailsType, RegionDetails>

frontend/src/shared/validators/region.ts

@@ -30,6 +30,10 @@ export const validateRegion = (editData: EditDataType<RegionDetails>, fieldName:
     region: {
       name: 'Region',
       required: true,
+      asString: value => {
+        if (value.trim().length === 0) return 'Region name must not be empty'
+        return null
+      },
     },
     now_reg_coord_country: {
       name: 'Countries',