Merge pull request #2806 from objectcomputing/feature-2801/pulse-page-adjustments

Feature 2801/pulse page adjustments

Author: mkimberlin

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/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 () => {
@@ -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/__snapshots__/PulsePage.test.jsx.snap

@@ -8,11 +8,20 @@ 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>
+        <h6
+          class="MuiTypography-root MuiTypography-h6 css-1i2vuon-MuiTypography-root"
+        >
+          *
+        </h6>
+      </div>
       <div
         class="icon-row"
       >
@@ -205,7 +214,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;"
           />
           <textarea
@@ -233,11 +241,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 life outside of work?
-      </h6>
+        <h6
+          class="MuiTypography-root MuiTypography-h6 css-2ulfj5-MuiTypography-root"
+        >
+          How are you feeling about life outside of work?
+        </h6>
+      </div>
       <div
         class="icon-row"
       >
@@ -430,7 +442,6 @@ exports[`renders correctly 1`] = `
             class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline css-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input"
             id=":rb:"
             placeholder="Comment"
-            rows="4"
             style="height: 0px; overflow: hidden;"
           />
           <textarea