Merge pull request #302 from Ohtuilmo/fix/add_confirmation_to_tag_del…

…etion add confirmation to tag deletion
Ohtuilmo · May 2, 2024 · 91dc890 · 91dc890
2 parents 1e283b3 + 5ecabae
commit 91dc890
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/frontend/e2e/cypress/integration/tagManagement.spec.js b/frontend/e2e/cypress/integration/tagManagement.spec.js
@@ -48,17 +48,28 @@ describe('Tag management', () => {
     cy.get('.button').click()
     cy.contains('Title must be at least 3 characters.').should('exist')
   })
-  it('tag can be deleted', () => {
+  it('tag is not deleted when No is pressed in confirmation dialog', () => {
     cy.get('#hamburger-menu-button')
       .click()
       .then(() => {
         cy.contains('Tag management').click()
       })
     cy.get('#tagTitle').type('New tag')
     cy.get('.delete-tag-button').click()
+    cy.contains('No').click()
+    cy.contains('New tag').should('exist')
+  })
+  it('tag is deleted when Yes is pressed in confirmation dialog', () => {
+    cy.get('#hamburger-menu-button')
+      .click()
+      .then(() => {
+        cy.contains('Tag management').click()
+      })
+    cy.get('#tagTitle').type('New tag')
+    cy.get('.delete-tag-button').click()
+    cy.contains('Yes').click()
     cy.contains('New tag').should('not.exist')
   })
-
   // missing test: tag associated with existing time log cannot be deleted  
   // is not tested. This is because the test would require a time log to be created and associated with a tag.'
   // and cannot be done before adding tag to time logs front end is implemented.

diff --git a/frontend/src/components/TagManagementPage/TagsDashboard.jsx b/frontend/src/components/TagManagementPage/TagsDashboard.jsx
@@ -7,12 +7,14 @@ import './TagsDashboard.css'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import * as notificationActions from '../../reducers/actions/notificationActions'
-
+import ConfirmationDialog from '../common/ConfirmationDialog'
 
 const TagsPage = (props) => {
   const [allTags, setAllTags] = useState([])
   const [tagTitle, setTagTitle] = useState('')
   const isMounted = useRef(true)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [tagToDelete, setTagToDelete] = useState(null)
 
   useEffect(() => {
     const fetchTags = async () => {
@@ -22,7 +24,7 @@ const TagsPage = (props) => {
           setAllTags(fetchedData)
         }
       } catch (error) {
-        console.error('Error fetching tags:', error.message, ' / ' , error.response.data.error)
+        console.error('Error fetching tags:', error.message, ' / ', error.response.data.error)
         if (error.response && error.response.data && error.response.data.error) {
           props.setError(error.response.data.error)
         } else {
@@ -47,7 +49,7 @@ const TagsPage = (props) => {
       clearForm()
       props.setSuccess('Tag created successfully.')
     } catch (error) {
-      console.error('Error fetching tags:', error.message, ' / ' , error.response.data.error)
+      console.error('Error fetching tags:', error.message, ' / ', error.response.data.error)
       props.setError(error.response.data.error, 3000)
     }
   }
@@ -62,7 +64,7 @@ const TagsPage = (props) => {
       setAllTags(updatedTags)
       props.setSuccess('Tag deleted successfully.')
     } catch (error) {
-      console.error('Error fetching tags:', error.message, ' / ' , error.response.data.error)
+      console.error('Error fetching tags:', error.message, ' / ', error.response.data.error)
       props.setError(error.response.data.error)
     }
   }
@@ -113,8 +115,11 @@ const TagsPage = (props) => {
                 <td>{tag.title}</td>
                 <td>
                   <Button
-                    onClick={() => handleDeleteTag(tag.id)}
-                    className = 'delete-tag-button'
+                    onClick={() => {
+                      setTagToDelete(tag.id)
+                      setConfirmOpen(true)
+                    }}
+                    className='delete-tag-button'
                     variant="contained"
                     color="secondary"
                   >
@@ -125,6 +130,14 @@ const TagsPage = (props) => {
             ))}
           </tbody>
         </table>
+        <ConfirmationDialog
+          title="Delete Tag?"
+          open={confirmOpen}
+          setOpen={setConfirmOpen}
+          onConfirm={() => handleDeleteTag(tagToDelete)}
+        >
+          Delete this tag? It cannot be restored.
+        </ConfirmationDialog>
       </div>
     </div>
   )