Merge branch 'develop' into bugfix-2807/partial-volunteer-hours

Author: mkimberlin

server/src/main/java/com/objectcomputing/checkins/services/pulseresponse/PulseResponse.java

@@ -77,7 +77,7 @@ public class PulseResponse {
     protected PulseResponse() {
     }
 
-    public PulseResponse(UUID id, Integer internalScore, Integer externalScore, LocalDate submissionDate, @Nullable UUID teamMemberId, String internalFeelings, String externalFeelings) {
+    public PulseResponse(UUID id, Integer internalScore, @Nullable Integer externalScore, LocalDate submissionDate, @Nullable UUID teamMemberId, String internalFeelings, String externalFeelings) {
         this.id = id;
         this.internalScore = internalScore;
         this.externalScore = externalScore;

web-ui/src/components/pulse/Pulse.css

@@ -20,6 +20,10 @@
     margin-bottom: 1rem;
     padding: 1rem;
   }
+
+  .title-row {
+    display: flex;
+  }
 }
 
 :root[data-mui-color-scheme='dark'] {

web-ui/src/components/pulse/Pulse.jsx

@@ -30,6 +30,7 @@ const tooltips = [
 const propTypes = {
   comment: PropTypes.string,
   commentRequired: PropTypes.bool,
+  iconRequired: PropTypes.bool,
   score: PropTypes.number,
   setComment: PropTypes.func,
   setScore: PropTypes.func,
@@ -38,21 +39,25 @@ const propTypes = {
 const Pulse = ({
   comment,
   commentRequired,
+  iconRequired,
   score,
   setComment,
   setScore,
   title
 }) => (
   <div className="pulse">
-    <Typography variant="h6">{title}</Typography>
+    <div className="title-row">
+      <Typography variant="h6">{title}</Typography>
+      {iconRequired && <Typography variant="h6" color="red">*</Typography>}
+    </div>
     <div className="icon-row">
       {icons.map((sentiment, index) => (
         <Tooltip key={`sentiment-${index}`} title={tooltips[index]} arrow>
           <IconButton
             aria-label="sentiment"
             className={index === score ? 'selected' : ''}
             data-testid={`score-button-${index}`}
-            onClick={() => setScore(index)}
+            onClick={() => setScore(score == index ? null : index)}
             sx={{ color: colors[index] }}
           >
             {sentiment}
@@ -70,7 +75,7 @@ const Pulse = ({
       }}
       placeholder="Comment"
       required={commentRequired}
-      rows={4}
+      maxRows={4}
       value={comment}
     />
   </div>

web-ui/src/components/pulse/__snapshots__/Pulse.test.jsx.snap

@@ -6,11 +6,15 @@ exports[`renders correctly 1`] = `
     <div
       class="pulse"
     >
-      <h6
-        class="MuiTypography-root MuiTypography-h6 css-2ulfj5-MuiTypography-root"
+      <div
+        class="title-row"
       >
-        How are you feeling about work today? (*)
-      </h6>
+        <h6
+          class="MuiTypography-root MuiTypography-h6 css-2ulfj5-MuiTypography-root"
+        >
+          How are you feeling about work today? (*)
+        </h6>
+      </div>
       <div
         class="icon-row"
       >
@@ -203,7 +207,6 @@ exports[`renders correctly 1`] = `
             class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input"
             id=":r5:"
             placeholder="Comment"
-            rows="4"
             style="height: 0px; overflow: hidden;"
           >
             Just testing

web-ui/src/components/volunteer/VolunteerEvents.jsx

@@ -258,7 +258,7 @@ const VolunteerEvents = ({ forceUpdate = () => {}, onlyMe = false }) => {
         <Autocomplete
           disableClearable
           getOptionLabel={(option) => 
-            option === 'new' ? 'Create a New Organization' : (relationshipMap[option]?.organizationId && organizationMap[relationshipMap[option].organizationId]?.name) || 'Unknown'
+            option === 'new' ? 'Create a New Organization' : (relationshipMap[option]?.organizationId && organizationMap[relationshipMap[option].organizationId]?.name) || ''
           }
           options={['new', ...relationships.filter((rel) => !rel.endDate).map((rel) => rel.id)]} // Use relationship IDs
           onChange={(event, value) => {

web-ui/src/pages/PulsePage.jsx

@@ -42,16 +42,9 @@ const PulsePage = () => {
     const [year, month, day] = pulse.submissionDate;
     setSubmittedToday(
       year === now.getFullYear() &&
-        month === now.getMonth() + 1 &&
-        day === now.getDate()
+      month === now.getMonth() + 1 &&
+      day === now.getDate()
     );
-
-    setInternalComment(pulse.internalFeelings ?? '');
-    setExternalComment(pulse.externalFeelings ?? '');
-    setInternalScore(pulse.internalScore == undefined ?
-                       center : pulse.internalScore - 1);
-    setExternalScore(pulse.externalScore == undefined ?
-                       center : pulse.externalScore - 1);
   }, [pulse]);
 
   const loadTodayPulse = async () => {
@@ -91,7 +84,7 @@ const PulsePage = () => {
     const myId = currentUser?.id;
     const data = {
       externalFeelings: externalComment,
-      externalScore: externalScore + 1, // converts to 1-based
+      externalScore: externalScore == null ? null : externalScore + 1, // converts to 1-based
       internalFeelings: internalComment,
       internalScore: internalScore + 1, // converts to 1-based
       submissionDate: today,
@@ -120,10 +113,11 @@ const PulsePage = () => {
           <Pulse
             key="pulse-internal"
             comment={internalComment}
+            iconRequired={true}
             score={internalScore}
             setComment={setInternalComment}
             setScore={setInternalScore}
-            title="How are you feeling about work today? (*)"
+            title="How are you feeling about work today?"
           />
           <Pulse
             key="pulse-external"
@@ -137,6 +131,7 @@ const PulsePage = () => {
             <Button
               style={{ marginTop: 0 }}
               onClick={submit}
+              disabled={internalScore == null}
               variant="contained">
               Submit
             </Button>

web-ui/src/pages/PulseReportPage.jsx

@@ -22,6 +22,8 @@ import {
   SentimentSatisfied,
   SentimentVerySatisfied,
 } from '@mui/icons-material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import {
   Avatar,
   Card,
@@ -33,7 +35,8 @@ import {
   MenuItem,
   Modal,
   TextField,
-  Typography
+  Typography,
+  Link,
 } from '@mui/material';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
@@ -79,6 +82,8 @@ const ScoreOptionLabel = {
   'Combined': 'Both',
 };
 
+const pulsesPerPage = 15;
+
 /*
 // Returns a random, integer score between 1 and 5.
 // We may want to uncomment this later for testing.
@@ -117,6 +122,7 @@ const PulseReportPage = () => {
   const [expanded, setExpanded] = useState(false);
   const [scoreChartData, setScoreChartData] = useState([]);
   const [pulses, setPulses] = useState([]);
+  const [pulsesPageNumber, setPulsesPageNumber] = useState(0);
   const [scope, setScope] = useState('Individual');
   const [scoreType, setScoreType] = useState(ScoreOption.COMBINED);
   const [selectedPulse, setSelectedPulse] = useState(null);
@@ -191,7 +197,9 @@ const PulseReportPage = () => {
       }
 
       frequencies[internalScore - 1].internal++;
-      frequencies[externalScore - 1].external++;
+      if (externalScore != null) {
+        frequencies[externalScore - 1].external++;
+      }
 
       let memberIdToUse;
       if (memberId) {
@@ -250,7 +258,9 @@ const PulseReportPage = () => {
     ];
     for(let day of scoreChartDataPoints) {
       day.datapoints.forEach(datapoint => {
-        externalPieCounts[datapoint.externalScore - 1].value++;
+        if (datapoint.externalScore != null) {
+          externalPieCounts[datapoint.externalScore - 1].value++;
+        }
       });
     }
     // Filter out data with a zero value so that the pie chart does not attempt
@@ -329,6 +339,7 @@ const PulseReportPage = () => {
       return compare;
     });
     setPulses(pulses);
+    setPulsesPageNumber(0);
   };
 
   useEffect(() => {
@@ -389,63 +400,6 @@ const PulseReportPage = () => {
     </Card>
   );
 
-  const scoreDistributionChart = () => (
-    <Card>
-      <CardHeader
-        title="Distribution of pulse scores for selected team members"
-        titleTypographyProps={{ variant: 'h5', component: 'h2' }}
-      />
-      <CardContent>
-        <BarChart
-          width={500}
-          height={300}
-          data={barChartData}
-          margin={{
-            top: 5,
-            right: 30,
-            left: 20,
-            bottom: 5
-          }}
-        >
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="score" />
-          <YAxis />
-          <Tooltip />
-          <Legend />
-          {(scoreType == ScoreOption.COMBINED || scoreType == ScoreOption.INTERNAL) &&
-            <Bar
-              dataKey="internal"
-              fill={ociDarkBlue}
-              name={ScoreOptionLabel[ScoreOption.INTERNAL]}
-            />
-            }
-          {(scoreType == ScoreOption.COMBINED || scoreType == ScoreOption.EXTERNAL) &&
-            <Bar
-              dataKey="external"
-              fill={ociOrange}
-              name={ScoreOptionLabel[ScoreOption.EXTERNAL]}
-            />
-          }
-        </BarChart>
-        <ExpandMore
-          expand={expanded}
-          onClick={() => setExpanded(!expanded)}
-          aria-expanded={expanded}
-          aria-label={expanded ? 'show less' : 'show more'}
-          size="large"
-        />
-        <Collapse
-          className="bottom-row"
-          in={expanded}
-          timeout="auto"
-          unmountOnExit
-        >
-          {responseSummary()}
-        </Collapse>
-      </CardContent>
-    </Card>
-  );
-
   const handleCommentClick = pulse => {
     setSelectedPulse(pulse);
     setShowComments(true);
@@ -725,16 +679,36 @@ const PulseReportPage = () => {
             </div>
           }
         </div>
+        <ExpandMore
+          expand={expanded}
+          onClick={() => setExpanded(!expanded)}
+          aria-expanded={expanded}
+          aria-label={expanded ? 'show less' : 'show more'}
+          size="large"
+        />
+        <Collapse
+          className="bottom-row"
+          in={expanded}
+          timeout="auto"
+          unmountOnExit
+        >
+          {responseSummary()}
+        </Collapse>
       </CardContent>
     </Card>
   </>
   );
 
   const responseSummary = () => {
-    let filteredPulses = pulses;
+    const leftDisabled = (pulsesPageNumber <= 0);
+    const rightDisabled = (((pulsesPageNumber + 1) * pulsesPerPage) >= pulses.length);
+    const start = pulsesPageNumber * pulsesPerPage;
+    const pulsesSlice = pulses.slice(start, start + pulsesPerPage);
+
+    let filteredPulses = pulsesSlice;
     const teamMemberIds = teamMembers.map(member => member.id);
     if (teamMemberIds.length) {
-      filteredPulses = pulses.filter(pulse =>
+      filteredPulses = pulsesSlice.filter(pulse =>
         teamMemberIds.includes(pulse.teamMemberId)
       );
     }
@@ -773,6 +747,26 @@ const PulseReportPage = () => {
             </div>
           );
         })}
+        <Link to="#"
+              style={leftDisabled ? { cursor: 'auto' } : { cursor: 'pointer' }}
+              onClick={(event) => {
+          event.preventDefault();
+          if (!leftDisabled) {
+            setPulsesPageNumber(pulsesPageNumber - 1);
+          }
+        }}>
+          <ArrowBackIcon/>
+        </Link>
+        <Link to="#"
+              style={rightDisabled ? { cursor: 'auto' } : { cursor: 'pointer' }}
+              onClick={(event) => {
+                event.preventDefault();
+                if (!rightDisabled) {
+                  setPulsesPageNumber(pulsesPageNumber + 1);
+                }
+              }}>
+          <ArrowForwardIcon/>
+        </Link>
       </>
     );
   };
@@ -840,7 +834,6 @@ const PulseReportPage = () => {
           />
           {pulseScoresChart()}
           {averageScores()}
-          {scoreDistributionChart()}
           <Modal open={showComments} onClose={() => setShowComments(false)}>
             <Card className="feedback-request-enable-edits-modal">
               <CardHeader