Refactor EditingModal into its own file

frontend/src/components/DetailView/common/EditingForm.tsx

@@ -1,5 +1,5 @@
 import { Box, TextField } from '@mui/material'
-import { EditingModal } from './FormComponents'
+import { EditingModal } from './EditingModal'
 import { useForm } from 'react-hook-form'
 import { Editable } from '@/backendTypes'
 import { useDetailContext } from '../hooks'

frontend/src/components/DetailView/common/EditingModal.tsx

@@ -0,0 +1,59 @@
+import { Box, Button, Modal } from '@mui/material'
+import { ReactNode, useState } from 'react'
+
+/* 
+  buttonText = Text for the button that opens modal
+  children = Content of modal
+  onSave = If defined, the modal will have a separate saving button.
+           onSave is a function, that will return true or false, depending
+           on if we want to proceed with closing the form (return false to cancel closing)
+*/
+export const EditingModal = ({
+  buttonText,
+  children,
+  onSave,
+}: {
+  buttonText: string
+  children: ReactNode | ReactNode[]
+  onSave?: () => Promise<boolean>
+}) => {
+  const [open, setOpen] = useState(false)
+  const closeWithSave = async () => {
+    if (!onSave) return
+    const close = await onSave()
+    if (!close) return
+    setOpen(false)
+  }
+
+  const modalStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 1200,
+    maxHeight: '90%',
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    overflow: 'auto',
+    boxShadow: 24,
+    p: 4,
+  }
+
+  return (
+    <Box>
+      <Button onClick={() => setOpen(true)} variant="contained" sx={{ marginBottom: '1em' }}>
+        {buttonText}
+      </Button>
+      <Modal open={open} aria-labelledby={`modal-${buttonText}`} aria-describedby={`modal-${buttonText}`}>
+        <Box sx={{ ...modalStyle }}>
+          <Box marginBottom="2em" marginTop="1em">
+            {' '}
+            {children}
+          </Box>
+          {onSave && <Button onClick={() => void closeWithSave()}>Save</Button>}
+          <Button onClick={() => setOpen(false)}>{onSave ? 'Cancel' : 'Close'}</Button>
+        </Box>
+      </Modal>
+    </Box>
+  )
+}

frontend/src/components/DetailView/common/SelectingTable.tsx

@@ -1,5 +1,5 @@
 import { MRT_ColumnDef, MRT_RowData } from 'material-react-table'
-import { EditingModal } from './FormComponents'
+import { EditingModal } from './EditingModal'
 import { TableView } from '@/components/TableView/TableView'
 import { useDetailContext } from '../hooks'
 import { useMemo } from 'react'

frontend/src/components/Locality/Tabs/LocalityTab.tsx

@@ -1,10 +1,11 @@
 import { Editable, LocalityDetails, LocalitySynonym } from '@/backendTypes'
 import { useDetailContext } from '@/components/DetailView/hooks'
-import { EditingModal, Grouped, ArrayFrame, HalfFrames } from '@/components/DetailView/common/FormComponents'
+import { Grouped, ArrayFrame, HalfFrames } from '@/components/DetailView/common/FormComponents'
 import { Box, TextField } from '@mui/material'
 import { MRT_ColumnDef } from 'material-react-table'
 import { useForm } from 'react-hook-form'
 import { EditableTable } from '@/components/DetailView/common/EditableTable'
+import { EditingModal } from '@/components/DetailView/common/EditingModal'
 
 export const LocalityTab = () => {
   const { data, editData, textField, radioSelection, mode } = useDetailContext<LocalityDetails>()

frontend/src/components/Locality/Tabs/ProjectTab.tsx

@@ -1,6 +1,7 @@
 import { Editable, LocalityDetails, LocalityProject } from '@/backendTypes'
 import { EditableTable } from '@/components/DetailView/common/EditableTable'
-import { EditingModal, Grouped } from '@/components/DetailView/common/FormComponents'
+import { Grouped } from '@/components/DetailView/common/FormComponents'
+import { EditingModal } from '@/components/DetailView/common/EditingModal'
 import { useDetailContext } from '@/components/DetailView/hooks'
 import { Box, TextField } from '@mui/material'
 import { MRT_ColumnDef } from 'material-react-table'

frontend/src/components/Locality/Tabs/SpeciesTab.tsx

@@ -1,6 +1,7 @@
 import { Editable, LocalityDetails, LocalitySpecies } from '@/backendTypes'
 import { EditableTable } from '@/components/DetailView/common/EditableTable'
-import { EditingModal, Grouped } from '@/components/DetailView/common/FormComponents'
+import { EditingModal } from '@/components/DetailView/common/EditingModal'
+import { Grouped } from '@/components/DetailView/common/FormComponents'
 import { useDetailContext } from '@/components/DetailView/hooks'
 import { Box, TextField } from '@mui/material'
 import { MRT_ColumnDef } from 'material-react-table'

frontend/src/components/Locality/Tabs/TaphonomyTab.tsx

@@ -1,10 +1,11 @@
 import { Editable, LocalityDetails, CollectingMethod } from '@/backendTypes'
 import { useDetailContext } from '@/components/DetailView/hooks'
-import { EditingModal, Grouped, ArrayFrame, HalfFrames } from '@/components/DetailView/common/FormComponents'
+import { Grouped, ArrayFrame, HalfFrames } from '@/components/DetailView/common/FormComponents'
 import { Box, TextField } from '@mui/material'
 import { MRT_ColumnDef } from 'material-react-table'
 import { useForm } from 'react-hook-form'
 import { EditableTable } from '@/components/DetailView/common/EditableTable'
+import { EditingModal } from '@/components/DetailView/common/EditingModal'
 
 export const TaphonomyTab = () => {
   const { textField, dropdown } = useDetailContext<LocalityDetails>()

frontend/src/components/Species/Tabs/LocalitySpeciesTab.tsx

@@ -1,6 +1,7 @@
 import { Editable, SpeciesDetails, SpeciesLocality } from '@/backendTypes'
 import { EditableTable } from '@/components/DetailView/common/EditableTable'
-import { EditingModal, Grouped } from '@/components/DetailView/common/FormComponents'
+import { EditingModal } from '@/components/DetailView/common/EditingModal'
+import { Grouped } from '@/components/DetailView/common/FormComponents'
 import { useDetailContext } from '@/components/DetailView/hooks'
 import { Box, TextField } from '@mui/material'
 import { MRT_ColumnDef } from 'material-react-table'

frontend/src/components/Species/Tabs/SynonymTab.tsx

@@ -1,10 +1,11 @@
 import { Editable, SpeciesDetails, SpeciesSynonym } from '@/backendTypes'
 import { useDetailContext } from '@/components/DetailView/hooks'
-import { EditingModal, Grouped } from '@/components/DetailView/common/FormComponents'
+import { Grouped } from '@/components/DetailView/common/FormComponents'
 import { Box, TextField } from '@mui/material'
 import { MRT_ColumnDef } from 'material-react-table'
 import { useForm } from 'react-hook-form'
 import { EditableTable } from '@/components/DetailView/common/EditableTable'
+import { EditingModal } from '@/components/DetailView/common/EditingModal'
 
 export const SynonymTab = () => {
   const { editData, mode } = useDetailContext<SpeciesDetails>()