From e75d6a332d8b5ed14a7efe2ab763cea99c746f9f Mon Sep 17 00:00:00 2001
From: miahro <mikko.ahro@gmail.com>
Date: Thu, 2 May 2024 12:56:31 +0300
Subject: [PATCH 1/2] add confirmation to tag deletion

---
 .../TagManagementPage/TagsDashboard.jsx       | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/TagManagementPage/TagsDashboard.jsx b/frontend/src/components/TagManagementPage/TagsDashboard.jsx
index 7e7a6a75..94787df6 100644
--- a/frontend/src/components/TagManagementPage/TagsDashboard.jsx
+++ b/frontend/src/components/TagManagementPage/TagsDashboard.jsx
@@ -2,17 +2,20 @@ import React, { useState, useEffect, useRef } from 'react'
 import Typography from '@material-ui/core/Typography'
 import TextField from '@material-ui/core/TextField'
 import Button from '@material-ui/core/Button'
+import { DeleteOutlineRounded } from '@material-ui/icons'
 import tagService from '../../services/tags'
 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 +25,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 +50,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 +65,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 +116,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 +131,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>
   )

From 5ecabae8ff4e8243e28d6111021d6da6099268d6 Mon Sep 17 00:00:00 2001
From: miahro <mikko.ahro@gmail.com>
Date: Thu, 2 May 2024 13:13:24 +0300
Subject: [PATCH 2/2] modify tests for tag deletion

---
 .../e2e/cypress/integration/tagManagement.spec.js | 15 +++++++++++++--
 .../TagManagementPage/TagsDashboard.jsx           |  1 -
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/e2e/cypress/integration/tagManagement.spec.js b/frontend/e2e/cypress/integration/tagManagement.spec.js
index 706aa9cc..e9e559e5 100644
--- a/frontend/e2e/cypress/integration/tagManagement.spec.js
+++ b/frontend/e2e/cypress/integration/tagManagement.spec.js
@@ -48,7 +48,7 @@ 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(() => {
@@ -56,9 +56,20 @@ describe('Tag management', () => {
       })
     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
index 94787df6..3f69add4 100644
--- a/frontend/src/components/TagManagementPage/TagsDashboard.jsx
+++ b/frontend/src/components/TagManagementPage/TagsDashboard.jsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef } from 'react'
 import Typography from '@material-ui/core/Typography'
 import TextField from '@material-ui/core/TextField'
 import Button from '@material-ui/core/Button'
-import { DeleteOutlineRounded } from '@material-ui/icons'
 import tagService from '../../services/tags'
 import './TagsDashboard.css'
 import { connect } from 'react-redux'