Merge pull request #9139 from Expensify/luke-update-report-action-item

Update Report_ActionItem

src/pages/home/report/ReportActionItem.js

@@ -173,6 +173,7 @@ class ReportActionItem extends Component {
                                     hovered
                                     || this.state.isContextMenuActive
                                     || this.props.draftMessage,
+                                    this.props.action.isPending || this.props.action.error,
                                 )}
                             >
                                 {!this.props.displayAsGroup

src/pages/home/report/reportActionPropTypes.js

@@ -3,24 +3,31 @@ import PropTypes from 'prop-types';
 import reportActionFragmentPropTypes from './reportActionFragmentPropTypes';
 
 export default {
-    // Name of the action e.g. ADDCOMMENT
+    /** Name of the action e.g. ADDCOMMENT */
     actionName: PropTypes.string,
 
-    // Person who created the action
+    /** Person who created the action */
     person: PropTypes.arrayOf(reportActionFragmentPropTypes),
 
-    // ID of the report action
+    /** ID of the report action */
     sequenceNumber: PropTypes.number,
 
-    // Unix timestamp
+    /** Unix timestamp */
     timestamp: PropTypes.number,
 
-    // report action message
+    /** report action message */
     message: PropTypes.arrayOf(reportActionFragmentPropTypes),
 
-    // Original message associated with this action
+    /** Original message associated with this action */
     originalMessage: PropTypes.shape({
         // The ID of the iou transaction
         IOUTransactionID: PropTypes.string,
     }),
+
+    /** If the reportAction is pending, that means we have not yet sent the Report_AddComment command to the server.
+    This should most often occur when the client is offline. */
+    isPending: PropTypes.bool,
+
+    /** Error message that's come back from the server. */
+    error: PropTypes.string,
 };

src/styles/StyleUtils.js

@@ -387,9 +387,10 @@ function getLoginPagePromoStyle() {
  * Generate the styles for the ReportActionItem wrapper view.
  *
  * @param {Boolean} [isHovered]
+ * @param {Boolean} [isPending]
  * @returns {Object}
  */
-function getReportActionItemStyle(isHovered = false) {
+function getReportActionItemStyle(isHovered = false, isPending = false) {
     return {
         display: 'flex',
         justifyContent: 'space-between',
@@ -398,6 +399,7 @@ function getReportActionItemStyle(isHovered = false) {
 
             // Warning: Setting this to a non-transparent color will cause unread indicator to break on Android
             : colors.transparent,
+        opacity: isPending ? 0.5 : 1,
         cursor: 'default',
     };
 }