Received Feedback Request: 'Deny' Option

web-ui/src/components/received_request_card/ReceivedRequestCard.jsx

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { selectProfile } from '../../context/selectors';
 import DateFnsUtils from '@date-io/date-fns';
 import { AppContext } from '../../context/AppContext';
-import { Edit as EditIcon } from '@mui/icons-material';
+import { Edit as EditIcon, Close as CloseIcon } from '@mui/icons-material';
 import './ReceivedRequestCard.css';
 
 const dateFns = new DateFnsUtils();
@@ -21,12 +21,16 @@ const classes = {
 };
 
 const propTypes = {
-  request: PropTypes.object.isRequired
+  request: PropTypes.object.isRequired,
+  handleDenyClick: PropTypes.func.isRequired  // handle deny function as a prop
 };
 
-const ReceivedRequestCard = ({ request }) => {
-  let { submitDate, dueDate, sendDate } = request;
+const ReceivedRequestCard = ({ request, handleDenyClick }) => {
+  console.log("Rendering ReceivedRequestCard for request:", request.id);
+
   const { state } = useContext(AppContext);
+
+  let { submitDate, dueDate, sendDate } = request;
   const requestCreator = selectProfile(state, request?.creatorId);
   const requestee = selectProfile(state, request?.requesteeId);
   submitDate = submitDate
@@ -67,20 +71,15 @@ const ReceivedRequestCard = ({ request }) => {
   };
 
   return (
-    <div
-      className="card-content-grid"
-      style={{ paddingLeft: '16px', paddingRight: '16px' }}
-    >
+    <div className="card-content-grid" style={{ paddingLeft: '16px', paddingRight: '16px' }}>
       <div className="request-members-container">
         <div className="member-chip">
           <Avatar
             style={{ width: '40px', height: '40px', marginRight: '0.5em' }}
             src={getAvatarURL(requestCreator?.workEmail)}
           />
           <div>
-            <Typography className="person-name">
-              {requestCreator?.name}
-            </Typography>
+            <Typography className="person-name">{requestCreator?.name}</Typography>
             <Typography className="position-text" style={{ fontSize: '14px' }}>
               {requestCreator?.title}
             </Typography>
@@ -119,22 +118,30 @@ const ReceivedRequestCard = ({ request }) => {
           !request.submitDate &&
           request.id &&
           request.status !== 'canceled' ? (
-            <Link
-              to={`/feedback/submit?request=${request.id}`}
-              style={{ textDecoration: 'none' }}
-            >
-              <Tooltip title="Give feedback" arrow>
-                <IconButton size="large">
-                  <EditIcon />
+            <>
+              <Link to={`/feedback/submit?request=${request.id}`} style={{ textDecoration: 'none' }}>
+                <Tooltip title="Give feedback" arrow>
+                  <IconButton size="large">
+                    <EditIcon />
+                  </IconButton>
+                </Tooltip>
+              </Link>
+              <Tooltip title="Deny feedback request" arrow>
+                <IconButton size="large" onClick={() => {
+                  console.log("X icon clicked for request ID:", request.id);
+                  handleDenyClick(request.id);  // Call handleDenyClick with request ID
+                }}>
+                  <CloseIcon />
                 </IconButton>
               </Tooltip>
-            </Link>
+            </>
           ) : null}
         </div>
       </div>
     </div>
   );
 };
+
 ReceivedRequestCard.propTypes = propTypes;
 
-export default ReceivedRequestCard;
+export default ReceivedRequestCard;

web-ui/src/components/view_feedback_responses/ViewFeedbackResponses.jsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Autocomplete, Avatar, Button, Checkbox, Chip, TextField, Typography, Box } from '@mui/material';
+import { Autocomplete, Avatar, Button, Checkbox, Chip, TextField, Typography, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
 import FeedbackResponseCard from './feedback_response_card/FeedbackResponseCard';
 import { getQuestionsAndAnswers } from '../../api/feedbackanswer';
 import { getFeedbackRequestById } from '../../api/feedback';
@@ -75,6 +75,28 @@ const ViewFeedbackResponses = () => {
   const [filteredQuestionsAndAnswers, setFilteredQuestionsAndAnswers] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
 
+  // Dialog state for denying feedback
+  const [denialPopupOpen, setDenialPopupOpen] = useState(false);
+  const [denialReason, setDenialReason] = useState('');
+  const [currentResponder, setCurrentResponder] = useState(null);  // Track the responder being denied
+
+  const handleDenyClick = (responderId) => {
+    console.log(`Denial process initiated for responder: ${responderId}`);
+    setCurrentResponder(responderId);  // Track the current responder
+    setDenialPopupOpen(true);
+  };
+
+  const handleDenialClose = () => {
+    setDenialPopupOpen(false);
+    console.log("Denial popup closed");
+  };
+
+  const handleDenialSubmit = () => {
+    console.log(`Denial reason for responder ${currentResponder}:`, denialReason);
+    setDenialPopupOpen(false);
+    // Here, you'd normally send the reason to the backend or handle it appropriately
+  };
+
   useEffect(() => {
     setQuery(queryString.parse(location?.search));
   }, [location.search]);
@@ -320,12 +342,34 @@ const ViewFeedbackResponses = () => {
                     answer={isEmptyOrWhitespace(answer.answer) ? ' ⚠️ No response submitted' : String(answer.answer)}
                     inputType={question.inputType}
                     sentiment={answer.sentiment}
+                    handleDenyClick={() => handleDenyClick(answer.responder)}  // Pass responderId
                   />
                 ))
               )}
             </div>
           );
         })}
+
+      {/* Dialog for denial reason */}
+      <Dialog open={denialPopupOpen} onClose={handleDenialClose}>
+        <DialogTitle>Feedback Request Denial Explanation</DialogTitle>
+        <DialogContent>
+          <TextField
+            autoFocus
+            margin="dense"
+            label="Denial Reason"
+            type="text"
+            fullWidth
+            variant="standard"
+            value={denialReason}
+            onChange={(e) => setDenialReason(e.target.value)}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleDenialClose}>Cancel</Button>
+          <Button onClick={handleDenialSubmit}>Send</Button>
+        </DialogActions>
+      </Dialog>
     </Root>
   ) : (
     <h3>{noPermission}</h3>

web-ui/src/components/view_feedback_responses/feedback_response_card/FeedbackResponseCard.jsx

@@ -1,8 +1,9 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import { Typography } from '@mui/material';
+import { Typography, IconButton } from '@mui/material';
+import { Close as CloseIcon } from '@mui/icons-material';
 import './FeedbackResponseCard.css';
 import { AppContext } from '../../../context/AppContext';
 import { selectProfile } from '../../../context/selectors';
@@ -56,6 +57,12 @@ const FeedbackResponseCard = props => {
   );
 };
 
-FeedbackResponseCard.propTypes = propTypes;
+FeedbackResponseCard.propTypes = {
+  responderId: PropTypes.string.isRequired,
+  answer: PropTypes.string.isRequired,
+  inputType: PropTypes.string.isRequired,
+  sentiment: PropTypes.number,
+  handleDenyClick: PropTypes.func.isRequired
+};
 
 export default FeedbackResponseCard;