Merge pull request #2681 from objectcomputing/bugfix-2680/tab-weirdness

Bugfix 2680/tab weirdness

Author: mkimberlin

web-ui/src/components/reviews/TeamMemberReview.jsx

@@ -20,9 +20,6 @@ import {
   Typography
 } from '@mui/material';
 import FeedbackSubmitForm from '../feedback_submit_form/FeedbackSubmitForm';
-import SelectUserModal from './SelectUserModal';
-import { cancelFeedbackRequest, updateFeedbackRequest } from '../../api/feedback';
-import { UPDATE_TOAST } from '../../context/actions';
 
 const propTypes = {
   selfReview: PropTypes.any,
@@ -97,27 +94,7 @@ const TeamMemberReview = ({
   const csrf = selectCsrfToken(state);
   const currentUser = selectCurrentUser(state);
   const theme = useTheme();
-  const [value, setValue] = useState(0);
-  const [init, setInit] = useState(true);
-  const [reassignOpen, setReassignOpen] = useState(false);
-  const [cancelOpen, setCancelOpen] = useState(false);
-
-  const handleOpenReassign = useCallback(
-    () => setReassignOpen(true),
-    [setReassignOpen]
-  );
-  const handleCloseReassign = useCallback(
-    () => setReassignOpen(false),
-    [setReassignOpen]
-  );
-  const handleOpenCancel = useCallback(
-    () => setCancelOpen(true),
-    [setCancelOpen]
-  );
-  const handleCloseCancel = useCallback(
-    () => setCancelOpen(false),
-    [setCancelOpen]
-  );
+  const [value, setValue] = useState(1);
 
   const review = reviews && reviews[value - 1];
   const recipient = selectProfile(state, review?.recipientId);
@@ -130,91 +107,9 @@ const TeamMemberReview = ({
     setValue(index);
   };
 
-  const handleCancelClick = useCallback(() => {
-    const cancelRequest = async () => {
-      const res = await cancelFeedbackRequest(review, csrf);
-      const cancellationResponse =
-        res && res.payload && res.payload.status === 200 && !res.error
-          ? res.payload.data
-          : null;
-      if (!cancellationResponse) {
-        window.snackDispatch({
-          type: UPDATE_TOAST,
-          payload: {
-            severity: 'error',
-            toast:
-              'There was an error cancelling the review. Please contact your administrator.'
-          }
-        });
-      }
-      return cancellationResponse;
-    };
-
-    handleCloseCancel();
-    if (csrf) {
-      cancelRequest().then(res => {
-        if (res) {
-          reloadReviews();
-          window.snackDispatch({
-            type: UPDATE_TOAST,
-            payload: {
-              severity: 'success',
-              toast: 'Review canceled'
-            }
-          });
-        }
-      });
-    }
-  }, [csrf, handleCloseCancel, review, reloadReviews]);
-
-  const handleReassign = useCallback(
-    assignee => {
-      const reassignRequest = async () => {
-        review.recipientId = assignee.id;
-        const res = await updateFeedbackRequest(review, csrf);
-        const updateResponse =
-          res && res.payload && res.payload.status === 200 && !res.error
-            ? res.payload.data
-            : null;
-        if (!updateResponse) {
-          window.snackDispatch({
-            type: UPDATE_TOAST,
-            payload: {
-              severity: 'error',
-              toast:
-                'There was an error reassigning the review. Please contact your administrator.'
-            }
-          });
-        }
-        return updateResponse;
-      };
-
-      handleCloseReassign();
-      if (csrf) {
-        reassignRequest().then(res => {
-          if (res) {
-            reloadReviews();
-            window.snackDispatch({
-              type: UPDATE_TOAST,
-              payload: {
-                severity: 'success',
-                toast: 'Review reassigned'
-              }
-            });
-          }
-        });
-      }
-    },
-    [csrf, handleCloseReassign, review, reloadReviews]
-  );
-
   let selfReviewIcon = <HourglassEmptyIcon />;
   if (selfReview && selfReview.status?.toUpperCase() === 'SUBMITTED') {
     selfReviewIcon = <CheckCircleIcon />;
-  } else if (init) {
-    // If there is no self-review, switch to the next tab.
-    setInit(false);
-    setValue(1);
   }
 
   return (
@@ -228,25 +123,21 @@ const TeamMemberReview = ({
             textColor="inherit"
             variant="fullWidth"
           >
-            {selfReview && selfReview.id && (<Tab
+            <Tab
               icon={selfReviewIcon}
               label={
                 memberProfile?.firstName
                   ? memberProfile?.firstName + "'s Self-Review"
                   : 'Self-Review'
               }
               {...a11yProps(0)}
-            />)}
+            />
             {reviews &&
-              reviews.map((review, index) => {
-                if (!review) {
-                  return (<></>);
-                }
+              reviews.filter(r => !!r).map((review, index) => {
                 const reviewer = review.recipientId == memberProfile?.id ?
                                  memberProfile :
                                  selectProfile(state, review.recipientId);
                 let label = reviewer?.firstName + "'s Review";
-
                 if (reviewer?.id === currentUser?.id) {
                   label = 'Your Review';
                 }
@@ -267,24 +158,20 @@ const TeamMemberReview = ({
           index={value}
           onChangeIndex={handleChangeIndex}
         >
-          {selfReview && selfReview.id && (
           <TabPanel value={value} index={0} dir={theme.direction}>
-            <FeedbackSubmitForm
-              requesteeName={
-                memberProfile?.firstName + ' ' + memberProfile?.lastName
-              }
-              requestId={selfReview?.id}
-              request={selfReview}
-              reviewOnly={true}
-            />
+            {selfReview?.id ? (
+              <FeedbackSubmitForm
+                requesteeName={
+                  memberProfile?.firstName + ' ' + memberProfile?.lastName
+                }
+                requestId={selfReview?.id}
+                request={selfReview}
+                reviewOnly={true}
+              />
+            ) : (<Typography variant="h4">Not Available</Typography>)}
           </TabPanel>
-          )}
           {reviews &&
-            reviews.map((review, index) => {
-              if (!review) {
-                return (<></>);
-              }
-
+            reviews.filter(r => !!r).map((review, index) => {
               const reviewer = selectProfile(state, review.recipientId);
               const requestee = selectProfile(state, review.requesteeId);
               const requesteeName = requestee?.name;
@@ -293,26 +180,6 @@ const TeamMemberReview = ({
 
               return (
                 <TabPanel value={value} index={index + 1} dir={theme.direction}>
-                  {review && review.status?.toUpperCase() !== 'SUBMITTED' && (
-                    <div className={classes.buttonRow}>
-                      <Button
-                        onClick={handleOpenCancel}
-                        className={classes.actionButtons}
-                        variant="outlined"
-                        color="secondary"
-                      >
-                        Cancel
-                      </Button>
-                      <Button
-                        onClick={handleOpenReassign}
-                        className={classes.actionButtons}
-                        variant="outlined"
-                        color="primary"
-                      >
-                        Reassign
-                      </Button>
-                    </div>
-                  )}
                   <FeedbackSubmitForm
                     requesteeName={requesteeName}
                     requestId={review.id}
@@ -323,39 +190,6 @@ const TeamMemberReview = ({
               );
             })}
         </SwipeableViews>
-        <SelectUserModal
-          userLabel="Reviewer"
-          open={reassignOpen}
-          onSelect={handleReassign}
-          onClose={handleCloseReassign}
-        />
-        <Modal open={cancelOpen} onClose={handleCloseCancel}>
-          <Card className="cancel-feedback-request-modal">
-            <CardHeader
-              title={
-                <Typography variant="h5" fontWeight="bold">
-                  Cancel Review
-                </Typography>
-              }
-            />
-            <CardContent>
-              <Typography variant="body1">
-                Are you sure you want to cancel the review sent to{' '}
-                <b>{recipient?.name}</b> on <b>{review?.sendDate}</b>? The
-                recipient will not be able to respond to this request once it is
-                canceled.
-              </Typography>
-            </CardContent>
-            <CardActions>
-              <Button color="secondary" onClick={handleCloseReassign}>
-                No, Keep Feedback Request
-              </Button>
-              <Button color="primary" onClick={handleCancelClick}>
-                Yes, Cancel Feedback Request
-              </Button>
-            </CardActions>
-          </Card>
-        </Modal>
       </Box>
     </Root>
   );

web-ui/src/components/reviews/TeamReviews.jsx

@@ -735,15 +735,12 @@ const TeamReviews = ({ onBack, periodId }) => {
                       recipientProfile?.supervisorid === currentUser?.id;
       const selfSubmitted = selfReviewRequest?.status == 'submitted';
       if (manages) {
-        let separator = '?';
-        url = "/feedback/submit";
+        url = "/feedback/submit?tabs=true";
         if (request) {
-          url += `${separator}request=${request.id}`;
-          separator = '&';
+          url += `&request=${request.id}`;
         }
         if (selfSubmitted) {
-          url += `${separator}selfrequest=${selfReviewRequest.id}`;
-          separator = '&';
+          url += `&selfrequest=${selfReviewRequest.id}`;
         }
       }
     }

web-ui/src/pages/FeedbackSubmitPage.jsx

@@ -40,6 +40,7 @@ const FeedbackSubmitPage = () => {
   const location = useLocation();
   const history = useHistory();
   const query = queryString.parse(location?.search);
+  const tabs = query.tabs?.toString();
   const requestQuery = query.request?.toString();
   const selfRequestQuery = query.selfrequest?.toString();
   const [showTips, setShowTips] = useState(true);
@@ -123,7 +124,6 @@ const FeedbackSubmitPage = () => {
     ) {
       getFeedbackRequest(selfRequestQuery, csrf).then(request => {
         if (request) {
-          // Permission to view this feedback request will be checked later.
           setSelfReviewRequest(request);
         }
       });
@@ -169,13 +169,6 @@ const FeedbackSubmitPage = () => {
         selfReviewRequest?.recipientId
       );
       setRecipient(recipientProfile);
-
-      if (!isManager(recipientProfile)) {
-        // The current user is not the recipient's manager, we need to clear
-        // out the self review request so that we do not display something that
-        // we shouldn't, on the next page.
-        setSelfReviewRequest(null);
-      }
     }
   }, [feedbackRequest, selfReviewRequest, state]);
 
@@ -185,7 +178,7 @@ const FeedbackSubmitPage = () => {
         <Typography className={classes.announcement} variant="h3">
           This feedback request has been canceled.
         </Typography>
-      ) : requestSubmitted || selfReviewRequest ? (
+      ) : tabs || requestSubmitted || selfReviewRequest ? (
         <TeamMemberReview
           reviews={[feedbackRequest]}
           selfReview={selfReviewRequest}