Added a property to show that the icon is required and changed to allow de-selecting a smiley face.

Author: ocielliottc

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,6 +39,7 @@ const propTypes = {
 const Pulse = ({
   comment,
   commentRequired,
+  iconRequired,
   score,
   setComment,
   setScore,
@@ -46,7 +48,7 @@ const Pulse = ({
   <div className="pulse">
     <div className="title-row">
       <Typography variant="h6">{title}</Typography>
-      {commentRequired && <Typography variant="h6" color="red">*</Typography>}
+      {iconRequired && <Typography variant="h6" color="red">*</Typography>}
     </div>
     <div className="icon-row">
       {icons.map((sentiment, index) => (
@@ -55,7 +57,7 @@ const Pulse = ({
             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}

web-ui/src/pages/PulsePage.jsx

@@ -120,7 +120,7 @@ const PulsePage = () => {
           <Pulse
             key="pulse-internal"
             comment={internalComment}
-            commentRequired={true}
+            iconRequired={true}
             score={internalScore}
             setComment={setInternalComment}
             setScore={setInternalScore}
@@ -138,6 +138,7 @@ const PulsePage = () => {
             <Button
               style={{ marginTop: 0 }}
               onClick={submit}
+              disabled={internalScore == null}
               variant="contained">
               Submit
             </Button>