@corva/ui 3.1.0-rc.4 → 3.1.0-rc.5

package/components/FeedItem/components/FeedComments.js

@@ -1 +1,289 @@
-import o from"@babel/runtime/helpers/slicedToArray";import{useState as s,useRef as t,useMemo as e,useEffect as n}from"react";import i from"prop-types";import{sortBy as r,noop as p}from"lodash";import c from"moment";import{makeStyles as m,Typography as a}from"@material-ui/core";import d from"../../Comment/index.js";import l from"../../CommentLoader.js";import u from"../../CommentInput/index.js";import{postFeedItemComment as j}from"../../../clients/jsonApi/index.js";import"../../DevCenter/DevCenterAppContainer/components/AppActions/AppActions.css.js";import{jsxs as C,jsx as A}from"react/jsx-runtime";import"../../DevCenter/DevCenterAppContainer/components/AppSettingsDialog/AppSettingsDialog.js";import"../../DevCenter/DevCenterAppContainer/components/AppSettingsDialog/components/RemoveAppButton.js";import"../../DevCenter/DevCenterAppContainer/components/AppSettingsDialog/components/SettingsAccordion.js";import"../../DevCenter/DevCenterAppContainer/components/AnnotationsButton/AnnotationsButton.js";import"../../../componentsV2/Text/Text.js";import"../../../componentsV2/Grid/Grid.js";import"classnames";import"../../../componentsV2/Grid/Grid.scss.js";import"../../../componentsV2/Header/Header.scss.js";import"../../../componentsV2/Button/Button.js";import"../../../componentsV2/ButtonIcon/ButtonIcon.js";import{useIsInsideIsolatedDcApp as v}from"../../DevCenter/DevCenterAppContainer/components/IsInsideIsolatedDcAppProvider/IsInsideIsolatedDcAppProvider.js";import"../../DevCenter/DevCenterAppContainer/components/DcFullscreenElemsCoordinatorProvider/IsInsideDcFullscreenElemProvider.js";import"../../DevCenter/DevCenterAppContainer/components/DcFullscreenElemsCoordinatorProvider/DcFullscreenElemsCoordinatorProvider.js";import"uuid";import"../../../componentsV2/Tooltip/Tooltip.scss.js";import"../../../componentsV2/Paper/Paper.js";import"../../../componentsV2/Popover/Popover.scss.js";import"../../../componentsV2/Radio/Radio.js";import"../../../componentsV2/RadioAndCheckboxGroup/RadioAndCheckboxGroup.scss.js";import"../../../componentsV2/Checkbox/Checkbox.js";import"../../../componentsV2/TextInput/TextInput.js";import"../../../componentsV2/TextEndTruncated/TextEndTruncated.scss.js";import"../../../componentsV2/TextMiddleTruncated/TextMiddleTruncated.constants.js";import"../../../componentsV2/TextMiddleTruncated/TextMiddleTruncated.scss.js";import"../../../componentsV2/TextLink/TextLink.js";import"../../../componentsV2/Chip/Chip.js";import"../../../componentsV2/ChipAlert/ChipAlert.js";import"../../../componentsV2/ChipIndicator/ChipIndicator.js";import"../../../componentsV2/Avatar/Avatar.js";import"../../../componentsV2/Avatar/constants.js";import"../../../componentsV2/AvatarGroup/AvatarGroup.scss.js";import"@material-ui/lab";import"../../../componentsV2/ToggleButtons/ToggleButtons.scss.js";import"../../../componentsV2/Modal/Modal.scss.js";import"@icon-park/react/es/all";import"../../../icons/IconParkProvider.js";import"../../../icons/customIcons/icons/AddMessage.js";import"../../../icons/customIcons/icons/Attention.js";import"../../../icons/customIcons/icons/Collapse.js";import"../../../icons/customIcons/icons/Dashboard.js";import"../../../icons/customIcons/icons/Expand.js";import"../../../icons/customIcons/icons/FolderClosed.js";import"../../../icons/customIcons/icons/FolderClosedFilled.js";import"../../../icons/customIcons/icons/FolderOpened.js";import"../../../icons/customIcons/icons/GreaterOrEqual.js";import"../../../icons/customIcons/icons/LessOrEqual.js";import"../../../icons/customIcons/icons/Search.js";import"../../../icons/customIcons/icons/Wellhub.js";import"../../../icons/customIcons/icons/MultiRuler.js";import"../../../icons/customIcons/icons/Checkbox.js";import"../../../icons/customIcons/icons/CheckboxChecked.js";import"../../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../../icons/customIcons/icons/Radio.js";import"../../../icons/customIcons/icons/RadioChecked.js";import"../../../icons/customIcons/icons/SimulFrac.js";import"../../../icons/customIcons/icons/ZipperFrac.js";import"../../../icons/customIcons/icons/CautionFilled.js";import"../../../icons/customIcons/icons/MoreApp.js";import"../../../icons/customIcons/icons/Pad.js";import"../../../icons/customIcons/icons/Gap.js";import"../../../componentsV2/Menu/Menu.js";import"../../../componentsV2/Counter/Counter.js";import"../../../componentsV2/BadgeBase/BadgeBase.scss.js";import"../../../componentsV2/BadgeDot/BadgeDot.scss.js";import"../../../componentsV2/LoaderLinear/LoaderLinear.scss.js";import"../../../componentsV2/LoaderLogo/LoaderLogo.scss.js";import"../../../componentsV2/Switch/Switch.js";import"../../../componentsV2/Tabs/Tabs.js";import"../../../componentsV2/EmptyState/EmptyState.scss.js";import"../../../componentsV2/FileIcon/FileIcon.js";import"react-dropzone";import"../../../utils/index.js";import"../../../componentsV2/FilesDropzone/FilesDropzone.scss.js";import"../../../componentsV2/FilesLoader/FilesLoader.scss.js";import"../../../componentsV2/FilesProcessor/FilesProcessor.scss.js";import"../../../componentsV2/Skeleton/Skeleton.scss.js";import"../../../utils/main.js";import"../../../componentsV2/CopyToClipboard/CopyToClipboard.scss.js";import"../../../componentsV2/Stepper/Step/Step.scss.js";import"../../../componentsV2/Stepper/Stepper.scss.js";import"../../../componentsV2/ButtonLive/ButtonLive.js";import"../../../componentsV2/LiveDotIndicator/LiveDotIndicator.scss.js";import"../../../componentsV2/IndicatorLive/IndicatorLive.scss.js";import"../../../componentsV2/Accordion/Accordion.scss.js";import"../../../componentsV2/Breadcrumbs/Breadcrumbs.scss.js";import"../../../componentsV2/BadgeComment/BadgeComment.js";import"../../../componentsV2/AppContainer/AppContainer.js";import"../../../componentsV2/AppContainer/AppContainer.constants.js";import"../../../componentsV2/AppFooter/AppFooter.js";import"../../../constants/goals.js";import"../../../constants/segment.js";import"../../../constants/alerts.js";import"../../../constants/apps.js";import"../../../constants/drillstring.js";import"../../../constants/completion.js";import"../../../constants/appPackages.js";import"../../../constants/notifications.js";import"../../../constants/feed.js";import"../../../constants/bha.js";import"../../../utils/env.js";import"../../GradientManager/configuration/constants.js";import"../../DevCenter/DevCenterAppContainer/components/AppCommons/AppCommonsContext.js";import"../../../componentsV2/AppHeader/AppHeader.constants.js";import"../../../componentsV2/AppHeader/AppBadge/AppBadge.scss.js";import"../../../componentsV2/AppHeader/AppAssets/AppAssets.js";import"../../PadModeSelect/PadModeSelect.js";import"../../../componentsV2/AppHeader/PadMode/PadMode.scss.js";import"../../../constants/streamSourceType.js";import"../../../componentsV2/AppHeader/AppHeader.scss.js";import"../../DevCenter/DevCenterAppContainer/components/FullscreenButton/FullscreenButton.js";import"../../DevCenter/DevCenterAppContainer/components/AppInfoMessage/AppInfoMessage.js";import"../../DevCenter/DevCenterAppContainer/components/DevCenterAppView/DevCenterAppView.js";import{isNativeDetected as I}from"../../../utils/mobileDetect.js";var V=m({showMore:{cursor:"pointer"},feedCommentsContainer:{padding:"0 16px 0 24px"},feedCommentsList:{marginTop:24},feedCommentsListContent:{height:function(o){var s=o.commentsListHeight;return s&&s-8},overflow:function(o){return o.commentsListHeight&&"scroll"}},feedCommentsListContentWrapper:{position:"relative"},gradient:{position:"absolute",bottom:0,left:0,width:"100%",height:16,background:function(o){var s=o.isInsideDcApp;return"linear-gradient(180deg, rgba(61, 61, 61, 0) 0%, ".concat(s?"#414141":"3b3b3b"," 100%)")}}});function g(i){var m,g=i.openCommentInput,D=i.openCommentList,h=i.feedItem,f=i.currentUser,b=h.comments,x=b.length,L=x>3,T=s(!1),B=o(T,2),F=B[0],P=B[1],S=s(!1),M=o(S,2),k=M[0],y=M[1],H=s(!1),R=o(H,2),E=R[0],G=R[1],w=s(null),N=o(w,2),q=N[0],z=N[1],U=t(),_=t(),O=e((function(){var o=r(h.comments,(function(o){return-c(o.created_at).unix()}));return E?E&&!k?o.slice(0,5):E&&k?o:[]:o.slice(0,3)}),[b,k,E]);n((function(){if(5===O.length&&!q){var o=_.current.clientHeight;z(o),y(!0)}q&&!E&&(z(null),y(!1))}),[O.length,q,E]);var W=v(),K=V({commentsListHeight:q,isAllCommentsVisibleKeyPressed:E,isInsideDcApp:W});return C("div",{className:(g||!!x)&&K.feedCommentsContainer,children:[g&&!I&&A(u,{inputRef:U,postComment:function(o){j(h.id,o)},setIsPosting:P,companyId:h.company_id,autoFocus:!1,currentUser:f,parentId:"".concat(h.id,"-").concat(null===(m=h.comments)||void 0===m?void 0:m.size)}),D&&C("div",{className:K.feedCommentsList,children:[A("div",{className:K.feedCommentsListContentWrapper,children:C("div",{className:K.feedCommentsListContent,ref:_,children:[O.map((function(o){return A(d,{comment:o,handleDeleteCallback:p,patchCommentCallback:p,companyId:h.company_id,currentUser:f},o.id)})),q&&A("div",{className:K.gradient})]})}),L&&A(a,{variant:"caption",color:"primary","data-testid":"".concat("FeedComments","_viewMoreComments"),className:K.showMore,onClick:function(){G(!E)},children:E?"Hide older comments":"See all comments"})]}),F&&A(l,{})]})}g.propTypes={openCommentInput:i.bool.isRequired,feedItem:i.shape().isRequired,currentUser:i.shape().isRequired};export{g as default};
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { sortBy, noop } from 'lodash';
+import moment from 'moment';
+import { makeStyles, Typography } from '@material-ui/core';
+import Comment from '../../Comment/index.js';
+import CommentLoader from '../../CommentLoader.js';
+import CommentInput from '../../CommentInput/index.js';
+import { postFeedItemComment } from '../../../clients/jsonApi/index.js';
+import '../../DevCenter/DevCenterAppContainer/components/AppActions/AppActions.css.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../../DevCenter/DevCenterAppContainer/components/AppSettingsDialog/AppSettingsDialog.js';
+import '../../DevCenter/DevCenterAppContainer/components/AppSettingsDialog/components/RemoveAppButton.js';
+import '../../DevCenter/DevCenterAppContainer/components/AppSettingsDialog/components/SettingsAccordion.js';
+import '../../DevCenter/DevCenterAppContainer/components/AnnotationsButton/AnnotationsButton.js';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '../../../componentsV2/Text/Text.js';
+import '../../../componentsV2/Grid/Grid.js';
+import 'classnames';
+import '../../../componentsV2/Grid/Grid.scss.js';
+import '@babel/runtime/helpers/defineProperty';
+import '../../../componentsV2/Header/Header.scss.js';
+import '../../../componentsV2/Button/Button.js';
+import '../../../componentsV2/ButtonIcon/ButtonIcon.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import { useIsInsideIsolatedDcApp } from '../../DevCenter/DevCenterAppContainer/components/IsInsideIsolatedDcAppProvider/IsInsideIsolatedDcAppProvider.js';
+import '../../DevCenter/DevCenterAppContainer/components/DcFullscreenElemsCoordinatorProvider/IsInsideDcFullscreenElemProvider.js';
+import '../../DevCenter/DevCenterAppContainer/components/DcFullscreenElemsCoordinatorProvider/DcFullscreenElemsCoordinatorProvider.js';
+import 'uuid';
+import '../../../componentsV2/Tooltip/Tooltip.scss.js';
+import '../../../componentsV2/Paper/Paper.js';
+import '../../../componentsV2/Popover/Popover.scss.js';
+import '../../../componentsV2/Radio/Radio.js';
+import '../../../componentsV2/RadioAndCheckboxGroup/RadioAndCheckboxGroup.scss.js';
+import '../../../componentsV2/Checkbox/Checkbox.js';
+import '@babel/runtime/helpers/toConsumableArray';
+import '../../../componentsV2/TextInput/TextInput.js';
+import '../../../componentsV2/TextEndTruncated/TextEndTruncated.scss.js';
+import '../../../componentsV2/TextMiddleTruncated/TextMiddleTruncated.constants.js';
+import '../../../componentsV2/TextMiddleTruncated/TextMiddleTruncated.scss.js';
+import '../../../componentsV2/TextLink/TextLink.js';
+import '../../../componentsV2/Chip/Chip.js';
+import '../../../componentsV2/ChipAlert/ChipAlert.js';
+import '../../../componentsV2/ChipIndicator/ChipIndicator.js';
+import '../../../componentsV2/Avatar/Avatar.js';
+import '../../../componentsV2/Avatar/constants.js';
+import '../../../componentsV2/AvatarGroup/AvatarGroup.scss.js';
+import '@material-ui/lab';
+import '../../../componentsV2/ToggleButtons/ToggleButtons.scss.js';
+import '../../../componentsV2/Modal/Modal.scss.js';
+import '@icon-park/react/es/all';
+import '../../../icons/IconParkProvider.js';
+import '../../../icons/customIcons/icons/AddMessage.js';
+import '../../../icons/customIcons/icons/Attention.js';
+import '../../../icons/customIcons/icons/Collapse.js';
+import '../../../icons/customIcons/icons/Dashboard.js';
+import '../../../icons/customIcons/icons/Expand.js';
+import '../../../icons/customIcons/icons/FolderClosed.js';
+import '../../../icons/customIcons/icons/FolderClosedFilled.js';
+import '../../../icons/customIcons/icons/FolderOpened.js';
+import '../../../icons/customIcons/icons/GreaterOrEqual.js';
+import '../../../icons/customIcons/icons/LessOrEqual.js';
+import '../../../icons/customIcons/icons/Search.js';
+import '../../../icons/customIcons/icons/Wellhub.js';
+import '../../../icons/customIcons/icons/MultiRuler.js';
+import '../../../icons/customIcons/icons/Checkbox.js';
+import '../../../icons/customIcons/icons/CheckboxChecked.js';
+import '../../../icons/customIcons/icons/CheckboxIndeterminate.js';
+import '../../../icons/customIcons/icons/Radio.js';
+import '../../../icons/customIcons/icons/RadioChecked.js';
+import '../../../icons/customIcons/icons/SimulFrac.js';
+import '../../../icons/customIcons/icons/ZipperFrac.js';
+import '../../../icons/customIcons/icons/CautionFilled.js';
+import '../../../icons/customIcons/icons/MoreApp.js';
+import '../../../icons/customIcons/icons/Pad.js';
+import '../../../icons/customIcons/icons/Gap.js';
+import '../../../componentsV2/Menu/Menu.js';
+import '../../../componentsV2/Counter/Counter.js';
+import '../../../componentsV2/BadgeBase/BadgeBase.scss.js';
+import '../../../componentsV2/BadgeDot/BadgeDot.scss.js';
+import '../../../componentsV2/LoaderLinear/LoaderLinear.scss.js';
+import '../../../componentsV2/LoaderLogo/LoaderLogo.scss.js';
+import '../../../componentsV2/Switch/Switch.js';
+import '../../../componentsV2/Tabs/Tabs.js';
+import '../../../componentsV2/EmptyState/EmptyState.scss.js';
+import '../../../componentsV2/FileIcon/FileIcon.js';
+import 'react-dropzone';
+import '../../../utils/index.js';
+import '../../../componentsV2/FilesDropzone/FilesDropzone.scss.js';
+import '../../../componentsV2/FilesLoader/FilesLoader.scss.js';
+import '../../../componentsV2/FilesProcessor/FilesProcessor.scss.js';
+import '../../../componentsV2/Skeleton/Skeleton.scss.js';
+import '../../../utils/main.js';
+import '../../../componentsV2/CopyToClipboard/CopyToClipboard.scss.js';
+import '../../../componentsV2/Stepper/Step/Step.scss.js';
+import '../../../componentsV2/Stepper/Stepper.scss.js';
+import '../../../componentsV2/ButtonLive/ButtonLive.js';
+import '../../../componentsV2/LiveDotIndicator/LiveDotIndicator.scss.js';
+import '../../../componentsV2/IndicatorLive/IndicatorLive.scss.js';
+import '../../../componentsV2/Accordion/Accordion.scss.js';
+import '../../../componentsV2/Breadcrumbs/Breadcrumbs.scss.js';
+import '../../../componentsV2/BadgeComment/BadgeComment.js';
+import '../../../componentsV2/AppContainer/AppContainer.js';
+import '../../../componentsV2/AppContainer/AppContainer.constants.js';
+import '../../../componentsV2/AppFooter/AppFooter.js';
+import '../../../constants/goals.js';
+import '../../../constants/segment.js';
+import '../../../constants/alerts.js';
+import '../../../constants/apps.js';
+import '../../../constants/drillstring.js';
+import '../../../constants/completion.js';
+import '../../../constants/appPackages.js';
+import '../../../constants/notifications.js';
+import '../../../constants/feed.js';
+import '../../../constants/bha.js';
+import '../../../utils/env.js';
+import '../../GradientManager/configuration/constants.js';
+import '../../DevCenter/DevCenterAppContainer/components/AppCommons/AppCommonsContext.js';
+import '../../../componentsV2/AppHeader/AppHeader.constants.js';
+import '../../../componentsV2/AppHeader/AppBadge/AppBadge.scss.js';
+import '../../../componentsV2/AppHeader/AppAssets/AppAssets.js';
+import '../../PadModeSelect/PadModeSelect.js';
+import '../../../componentsV2/AppHeader/PadMode/PadMode.scss.js';
+import '../../../constants/streamSourceType.js';
+import '../../../componentsV2/AppHeader/AppHeader.scss.js';
+import '../../DevCenter/DevCenterAppContainer/components/FullscreenButton/FullscreenButton.js';
+import '../../DevCenter/DevCenterAppContainer/components/AppInfoMessage/AppInfoMessage.js';
+import '../../DevCenter/DevCenterAppContainer/components/DevCenterAppView/DevCenterAppView.js';
+import { isNativeDetected } from '../../../utils/mobileDetect.js';
+
+var PAGE_NAME = 'FeedComments';
+var useStyles = makeStyles({
+  showMore: {
+    cursor: 'pointer'
+  },
+  feedCommentsContainer: {
+    padding: '0 16px 0 24px'
+  },
+  feedCommentsList: {
+    marginTop: 24
+  },
+  feedCommentsListContent: {
+    height: function height(_ref) {
+      var commentsListHeight = _ref.commentsListHeight;
+      return commentsListHeight && commentsListHeight - 8;
+    },
+    overflow: function overflow(_ref2) {
+      var commentsListHeight = _ref2.commentsListHeight;
+      return commentsListHeight && 'scroll';
+    }
+  },
+  feedCommentsListContentWrapper: {
+    position: 'relative'
+  },
+  gradient: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    height: 16,
+    background: function background(_ref3) {
+      var isInsideDcApp = _ref3.isInsideDcApp;
+      return "linear-gradient(180deg, rgba(61, 61, 61, 0) 0%, ".concat(isInsideDcApp ? '#414141' : '3b3b3b', " 100%)");
+    }
+  }
+});
+
+// If there are  more than 3 comments, we show only last 3, other comments are hidden.
+// To see all comments, user clicks ‘SEE ALL COMMENTS’.
+// To hide all comments back, user clicks ‘HIDE OLDER COMMENTS’
+// After clicking on a ‘SEE ALL COMMENTS’:
+// Height of the comments pop-over changes to show 5 comments instead of 3.
+// If all comments to initial comment can’t fit into comment pop-over, than User needs to scroll down to see them.
+// If there are more than 5 comments (so 6th+ comments in not seen at the moment, we cover bottom comment with gradient, to show that there is more to see.
+// The height of the Comments pop-over remains the same (to show first 5 comments), we don’t change it to show all possible 1000 comments. Only 5.
+
+var INITIAL_VISIBLE_COMMENTS_COUNT = 3;
+var COUNT_OF_COMMENTS_IN_SCROLLABLE_CONTAINER = 5;
+function FeedComments(_ref4) {
+  var _feedItem$comments;
+  var openCommentInput = _ref4.openCommentInput,
+    openCommentList = _ref4.openCommentList,
+    feedItem = _ref4.feedItem,
+    currentUser = _ref4.currentUser;
+  var comments = feedItem.comments;
+  var commentsCount = comments.length;
+  var moreCommentsExist = commentsCount > INITIAL_VISIBLE_COMMENTS_COUNT;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPosting = _useState2[0],
+    setIsPosting = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isVisibleCommentsAppeared = _useState4[0],
+    setIsVisibleCommentsAppeared = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isAllCommentsVisibleKeyPressed = _useState6[0],
+    setIsAllCommentsVisibleKeyPressed = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    commentsListHeight = _useState8[0],
+    setCommentsListHeight = _useState8[1];
+  var inputEl = useRef();
+  var commentsListRef = useRef();
+  var toggleShowAllComments = function toggleShowAllComments() {
+    setIsAllCommentsVisibleKeyPressed(!isAllCommentsVisibleKeyPressed);
+  };
+  var postComment = function postComment(comment) {
+    postFeedItemComment(feedItem.id, comment);
+  };
+  var visibleComments = useMemo(function () {
+    var sortedComments = sortBy(feedItem.comments, function (item) {
+      return -moment(item.created_at).unix();
+    });
+    if (!isAllCommentsVisibleKeyPressed) return sortedComments.slice(0, INITIAL_VISIBLE_COMMENTS_COUNT);
+    if (isAllCommentsVisibleKeyPressed && !isVisibleCommentsAppeared) {
+      return sortedComments.slice(0, COUNT_OF_COMMENTS_IN_SCROLLABLE_CONTAINER);
+    }
+    if (isAllCommentsVisibleKeyPressed && isVisibleCommentsAppeared) return sortedComments;
+    return [];
+  }, [comments, isVisibleCommentsAppeared, isAllCommentsVisibleKeyPressed]);
+  useEffect(function () {
+    if (visibleComments.length === COUNT_OF_COMMENTS_IN_SCROLLABLE_CONTAINER && !commentsListHeight) {
+      var divHeight = commentsListRef.current.clientHeight;
+      setCommentsListHeight(divHeight);
+      setIsVisibleCommentsAppeared(true);
+    }
+    if (commentsListHeight && !isAllCommentsVisibleKeyPressed) {
+      setCommentsListHeight(null);
+      setIsVisibleCommentsAppeared(false);
+    }
+  }, [visibleComments.length, commentsListHeight, isAllCommentsVisibleKeyPressed]);
+  var isInsideDcApp = useIsInsideIsolatedDcApp();
+  var classes = useStyles({
+    commentsListHeight: commentsListHeight,
+    isAllCommentsVisibleKeyPressed: isAllCommentsVisibleKeyPressed,
+    isInsideDcApp: isInsideDcApp
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: (openCommentInput || !!commentsCount) && classes.feedCommentsContainer,
+    children: [openCommentInput && !isNativeDetected && /*#__PURE__*/jsx(CommentInput, {
+      inputRef: inputEl,
+      postComment: postComment,
+      setIsPosting: setIsPosting,
+      companyId: feedItem.company_id,
+      autoFocus: false,
+      currentUser: currentUser,
+      parentId: "".concat(feedItem.id, "-").concat((_feedItem$comments = feedItem.comments) === null || _feedItem$comments === void 0 ? void 0 : _feedItem$comments.size)
+    }), openCommentList && /*#__PURE__*/jsxs("div", {
+      className: classes.feedCommentsList,
+      children: [/*#__PURE__*/jsx("div", {
+        className: classes.feedCommentsListContentWrapper,
+        children: /*#__PURE__*/jsxs("div", {
+          className: classes.feedCommentsListContent,
+          ref: commentsListRef,
+          children: [visibleComments.map(function (comment) {
+            return /*#__PURE__*/jsx(Comment, {
+              comment: comment,
+              handleDeleteCallback: noop /* NOTE: Received through subscription */,
+              patchCommentCallback: noop,
+              companyId: feedItem.company_id,
+              currentUser: currentUser
+            }, comment.id);
+          }), commentsListHeight && /*#__PURE__*/jsx("div", {
+            className: classes.gradient
+          })]
+        })
+      }), moreCommentsExist && /*#__PURE__*/jsx(Typography, {
+        variant: "caption",
+        color: "primary",
+        "data-testid": "".concat(PAGE_NAME, "_viewMoreComments"),
+        className: classes.showMore,
+        onClick: toggleShowAllComments,
+        children: isAllCommentsVisibleKeyPressed ? 'Hide older comments' : 'See all comments'
+      })]
+    }), isPosting && /*#__PURE__*/jsx(CommentLoader, {})]
+  });
+}
+FeedComments.propTypes = {
+  openCommentInput: PropTypes.bool.isRequired,
+  feedItem: PropTypes.shape().isRequired,
+  currentUser: PropTypes.shape().isRequired
+};
+
+export { FeedComments as default };
+//# sourceMappingURL=FeedComments.js.map

package/components/FeedItem/components/Icon.js

@@ -1 +1,95 @@
-import e from"@babel/runtime/helpers/defineProperty";import o from"classnames";import{makeStyles as r}from"@material-ui/core";import t from"./AvatarIcon.js";import i from"./LessonsLearnedLeafIcon.js";import{isNativeDetected as n}from"../../../utils/mobileDetect.js";import{getIconForFeedItemType as a,AVATAR_ICON as m}from"../../../utils/feed.js";import{FEED_ITEM_TYPES as s,FEED_ITEM_TYPES_BY_KEY as c}from"../../../constants/feed.js";import{ALERT_LEVEL_COLOR as l}from"../../../constants/alerts.js";import{jsxs as d,Fragment as f,jsx as p}from"react/jsx-runtime";var u=r({icon:{width:32,height:32,backgroundColor:"grey",borderRadius:23,position:"absolute",top:18,left:-16,padding:6},iconWrapper:{display:"inline-block",height:20,width:20,overflow:"hidden"},iconImg:{height:20,width:20},iconNative:{left:"auto"}}),h=function(r){var t,i=r.feedItem,a=r.feedItemType,m=r.icon,s=u(),d=c[a]?c[a].label:"Other";if(a===c.alert.type){var f,h,v=null===(f=i.context)||void 0===f||null===(h=f.alert)||void 0===h?void 0:h.level;t={backgroundColor:l[v]}}return p("div",{className:o(s.icon,e({},s.iconNative,n)),style:t,children:p("div",{className:s.iconWrapper,children:p("img",{src:m,alt:"".concat(d," icon"),className:s.iconImg})})})},v=function(e){var o=e.feedItem,r=e.displayName,n=e.isRecommended,c=e.currentUser,l=o.type,u=a(l),v=l===s.LESSONS_LEARNED;return u===m||v?d(f,{children:[p(t,{displayName:r,feedItem:o,isRecommended:n,currentUser:c}),v&&p(i,{offsetX:-22,offsetY:32})]}):p(h,{icon:u,feedItem:o,feedItemType:l})};export{v as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import classNames from 'classnames';
+import { makeStyles } from '@material-ui/core';
+import AvatarIcon from './AvatarIcon.js';
+import LessonsLearnedLeafIcon from './LessonsLearnedLeafIcon.js';
+import { isNativeDetected } from '../../../utils/mobileDetect.js';
+import { getIconForFeedItemType, AVATAR_ICON } from '../../../utils/feed.js';
+import { FEED_ITEM_TYPES, FEED_ITEM_TYPES_BY_KEY } from '../../../constants/feed.js';
+import { ALERT_LEVEL_COLOR } from '../../../constants/alerts.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var useStyles = makeStyles({
+  icon: {
+    width: 32,
+    height: 32,
+    backgroundColor: 'grey',
+    borderRadius: 23,
+    position: 'absolute',
+    top: 18,
+    left: -16,
+    padding: 6
+  },
+  iconWrapper: {
+    display: 'inline-block',
+    height: 20,
+    width: 20,
+    overflow: 'hidden'
+  },
+  iconImg: {
+    height: 20,
+    width: 20
+  },
+  iconNative: {
+    left: 'auto'
+  }
+});
+var TypeIcon = function TypeIcon(_ref) {
+  var feedItem = _ref.feedItem,
+    feedItemType = _ref.feedItemType,
+    icon = _ref.icon;
+  var classes = useStyles();
+  var label = FEED_ITEM_TYPES_BY_KEY[feedItemType] ? FEED_ITEM_TYPES_BY_KEY[feedItemType].label : 'Other';
+  var backgroundColorContainer;
+  if (feedItemType === FEED_ITEM_TYPES_BY_KEY.alert.type) {
+    var _feedItem$context, _feedItem$context$ale;
+    var level = (_feedItem$context = feedItem.context) === null || _feedItem$context === void 0 ? void 0 : (_feedItem$context$ale = _feedItem$context.alert) === null || _feedItem$context$ale === void 0 ? void 0 : _feedItem$context$ale.level;
+    backgroundColorContainer = {
+      backgroundColor: ALERT_LEVEL_COLOR[level]
+    };
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: classNames(classes.icon, _defineProperty({}, classes.iconNative, isNativeDetected)),
+    style: backgroundColorContainer,
+    children: /*#__PURE__*/jsx("div", {
+      className: classes.iconWrapper,
+      children: /*#__PURE__*/jsx("img", {
+        src: icon,
+        alt: "".concat(label, " icon"),
+        className: classes.iconImg
+      })
+    })
+  });
+};
+var Icon = function Icon(_ref2) {
+  var feedItem = _ref2.feedItem,
+    displayName = _ref2.displayName,
+    isRecommended = _ref2.isRecommended,
+    currentUser = _ref2.currentUser;
+  var feedItemType = feedItem.type;
+  var icon = getIconForFeedItemType(feedItemType);
+  var isLessonsLearned = feedItemType === FEED_ITEM_TYPES.LESSONS_LEARNED;
+
+  // LessonsLearned has a custom icon. However, inside feedItem, we would like to display the avatar icon with a mark
+  if (icon === AVATAR_ICON || isLessonsLearned) {
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(AvatarIcon, {
+        displayName: displayName,
+        feedItem: feedItem,
+        isRecommended: isRecommended,
+        currentUser: currentUser
+      }), isLessonsLearned && /*#__PURE__*/jsx(LessonsLearnedLeafIcon, {
+        offsetX: -22,
+        offsetY: 32
+      })]
+    });
+  }
+  return /*#__PURE__*/jsx(TypeIcon, {
+    icon: icon,
+    feedItem: feedItem,
+    feedItemType: feedItemType
+  });
+};
+
+export { Icon as default };
+//# sourceMappingURL=Icon.js.map

package/components/FeedItem/components/Reactions.js

@@ -1 +1,109 @@
-import e from"@babel/runtime/helpers/defineProperty";import t from"classnames";import i from"moment";import{uniq as n,uniqBy as o}from"lodash";import{makeStyles as r,useTheme as m,IconButton as a}from"@material-ui/core";import s from"@material-ui/icons/ThumbUp";import l from"@material-ui/icons/Comment";import{notifyOpenFeedCommentInput as c}from"../../../utils/nativeMessages.js";import{isNativeDetected as u}from"../../../utils/mobileDetect.js";import p from"../../CommentsInfo/index.js";import d from"../../../utils/main.js";import{jsx as f,jsxs as g}from"react/jsx-runtime";var C=r({reactionButton:{padding:8},reactions:{minHeight:48,marginTop:5,display:"flex",alignItems:"center",padding:"8px 16px 8px 24px",flexWrap:"wrap"},reactionsNative:{padding:"0 16px"},actions:{display:"flex",marginRight:30,alignItems:"center"}}),h=u?2:3,k=function(r){var k=r.feedItem,x=r.currentUser,v=r.setOpenCommentInput,N=r.setOpenCommentList,b=r.openCommentInput,y=r.openCommentList,I=r.handleToggleLike,L=m(),j=C(),B=k.likes_count,U=k.comments.length,F=(k.likes||[]).find((function(e){var t;return(null===(t=e.user)||void 0===t?void 0:t.id)===x.id})),_=(k.likes||[]).map((function(e){return d.getUserFullName(e.user)})),P=n((k.comments||[]).map((function(e){return d.getUserFullName(e.user)}))),T=o((k.comments||[]).concat(k.likes||[]).map((function(e){return e.user})).sort((function(e){return i(e.created_at).unix()})),"id").slice(0,h),W=!b||!y;return f("div",{className:t(j.reactions,e({},j.reactionsNative,u)),children:g("div",{className:j.actions,children:[f(a,{"data-testid":"".concat("FeedPo","_likeButton"),"aria-label":"Like",onClick:I,className:j.reactionButton,children:f(s,{htmlColor:F?L.palette.primary.main:L.palette.grey[400]})}),f(a,{"data-testid":"".concat("FeedPo","_commentButton"),"aria-label":"Comment",onClick:function(){u?c(k.id):(v(W),N(W))},className:j.reactionButton,children:f(l,{htmlColor:L.palette.grey[400]})}),f(p,{likesCount:B,usersWhoLike:_,commentsCount:U,usersWhoCommented:P,activeUsersList:T,onCommentsClick:function(){return N(!y)},small:!0})]})})};export{k as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import classNames from 'classnames';
+import moment from 'moment';
+import { uniq, uniqBy } from 'lodash';
+import { makeStyles, useTheme, IconButton } from '@material-ui/core';
+import ThumbUpIcon from '@material-ui/icons/ThumbUp';
+import CommentIcon from '@material-ui/icons/Comment';
+import { notifyOpenFeedCommentInput } from '../../../utils/nativeMessages.js';
+import { isNativeDetected } from '../../../utils/mobileDetect.js';
+import CommentsInfo from '../../CommentsInfo/index.js';
+import utils from '../../../utils/main.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var PAGE_NAME = 'FeedPo';
+var useStyles = makeStyles({
+  reactionButton: {
+    padding: 8
+  },
+  reactions: {
+    minHeight: 48,
+    marginTop: 5,
+    display: 'flex',
+    alignItems: 'center',
+    padding: '8px 16px 8px 24px',
+    flexWrap: 'wrap'
+  },
+  reactionsNative: {
+    padding: '0 16px'
+  },
+  actions: {
+    display: 'flex',
+    marginRight: 30,
+    alignItems: 'center'
+  }
+});
+var AVATARS_VISIBLE_AMOUNT = isNativeDetected ? 2 : 3;
+var Reactions = function Reactions(_ref) {
+  var feedItem = _ref.feedItem,
+    currentUser = _ref.currentUser,
+    setOpenCommentInput = _ref.setOpenCommentInput,
+    setOpenCommentList = _ref.setOpenCommentList,
+    openCommentInput = _ref.openCommentInput,
+    openCommentList = _ref.openCommentList,
+    handleToggleLike = _ref.handleToggleLike;
+  var theme = useTheme();
+  var classes = useStyles();
+  var likesCount = feedItem.likes_count;
+  var commentsCount = feedItem.comments.length;
+  var isLikedByCurrentUser = (feedItem.likes || []).find(function (like) {
+    var _like$user;
+    return ((_like$user = like.user) === null || _like$user === void 0 ? void 0 : _like$user.id) === currentUser.id;
+  });
+  var usersWhoLike = (feedItem.likes || []).map(function (like) {
+    return utils.getUserFullName(like.user);
+  });
+  var usersWhoCommented = uniq((feedItem.comments || []).map(function (comment) {
+    return utils.getUserFullName(comment.user);
+  }));
+  var activeUsersList = uniqBy((feedItem.comments || []).concat(feedItem.likes || []).map(function (item) {
+    return item.user;
+  }).sort(function (item) {
+    return moment(item.created_at).unix();
+  }), 'id').slice(0, AVATARS_VISIBLE_AMOUNT);
+  var isListOrInputClosed = !openCommentInput || !openCommentList;
+  var handleCommentIconClick = function handleCommentIconClick() {
+    if (isNativeDetected) {
+      notifyOpenFeedCommentInput(feedItem.id);
+    } else {
+      setOpenCommentInput(isListOrInputClosed);
+      setOpenCommentList(isListOrInputClosed);
+    }
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: classNames(classes.reactions, _defineProperty({}, classes.reactionsNative, isNativeDetected)),
+    children: /*#__PURE__*/jsxs("div", {
+      className: classes.actions,
+      children: [/*#__PURE__*/jsx(IconButton, {
+        "data-testid": "".concat(PAGE_NAME, "_likeButton"),
+        "aria-label": "Like",
+        onClick: handleToggleLike,
+        className: classes.reactionButton,
+        children: /*#__PURE__*/jsx(ThumbUpIcon, {
+          htmlColor: isLikedByCurrentUser ? theme.palette.primary.main : theme.palette.grey[400]
+        })
+      }), /*#__PURE__*/jsx(IconButton, {
+        "data-testid": "".concat(PAGE_NAME, "_commentButton"),
+        "aria-label": "Comment",
+        onClick: handleCommentIconClick,
+        className: classes.reactionButton,
+        children: /*#__PURE__*/jsx(CommentIcon, {
+          htmlColor: theme.palette.grey[400]
+        })
+      }), /*#__PURE__*/jsx(CommentsInfo, {
+        likesCount: likesCount,
+        usersWhoLike: usersWhoLike,
+        commentsCount: commentsCount,
+        usersWhoCommented: usersWhoCommented,
+        activeUsersList: activeUsersList,
+        onCommentsClick: function onCommentsClick() {
+          return setOpenCommentList(!openCommentList);
+        },
+        small: true
+      })]
+    })
+  });
+};
+
+export { Reactions as default };
+//# sourceMappingURL=Reactions.js.map

package/components/FeedItem/components/RigAndWell.js

@@ -1 +1,77 @@
-import{get as e}from"lodash";import{makeStyles as n,Typography as t}from"@material-ui/core";import{SEGMENTS as i}from"../../../constants/segment.js";import{jsxs as a,jsx as o}from"react/jsx-runtime";var r=n((function(e){return{rigAndWellContainer:{display:"flex",gap:"8px",alignItems:"flex-end"},contentAssetInfo:{color:e.palette.primary.main,width:"100%",fontSize:12},assetLink:{cursor:"pointer",display:"block",marginTop:e.spacing(.5),fontSize:"12px",pointerEvents:"auto",zIndex:1},stageNumber:{color:e.palette.primary.text6,fontSize:12}}})),l=function(n){var l,s,d,c,m,v,u=n.feedItem,p=r(),f=!!u.rig,g=function(e){var n,t,i;return e.rig?null===(n=e.rig)||void 0===n?void 0:n.name:null===(t=e.well)||void 0===t||null===(i=t.parent_asset)||void 0===i?void 0:i.name}(u),x=f?null===(l=u.rig)||void 0===l||null===(s=l.active_well)||void 0===s?void 0:s.name:null===(d=u.well)||void 0===d?void 0:d.name,N=f?null===(c=u.rig)||void 0===c||null===(m=c.active_well)||void 0===m?void 0:m.id:null===(v=u.well)||void 0===v?void 0:v.id,b=e(u,["segment",0])===i.COMPLETION&&e(u,["context","alert","stage_numbers",0]);return a("div",{className:p.rigAndWellContainer,children:[N?o("a",{"data-testid":"".concat("FeedPo","_wellLink"),className:p.assetLink,onClick:function(e){return e.stopPropagation()},href:"/assets/".concat(N,"/"),target:"_blank",rel:"noreferrer",children:a(t,{variant:"body2",className:p.contentAssetInfo,children:[g," - ",x]})}):a(t,{variant:"body2",className:p.contentAssetInfo,children:[g," - No Active Well"]}),b&&a(t,{variant:"body2",className:p.stageNumber,children:["Stage ",b]})]})};export{l as default};
+import { get } from 'lodash';
+import { makeStyles, Typography } from '@material-ui/core';
+import { SEGMENTS } from '../../../constants/segment.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/* eslint-disable react/prop-types */
+var PAGE_NAME = 'FeedPo';
+var useStyles = makeStyles(function (theme) {
+  return {
+    rigAndWellContainer: {
+      display: 'flex',
+      gap: '8px',
+      alignItems: 'flex-end'
+    },
+    contentAssetInfo: {
+      color: theme.palette.primary.main,
+      width: '100%',
+      fontSize: 12
+    },
+    assetLink: {
+      cursor: 'pointer',
+      display: 'block',
+      marginTop: theme.spacing(0.5),
+      fontSize: '12px',
+      pointerEvents: 'auto',
+      zIndex: 1
+    },
+    stageNumber: {
+      color: theme.palette.primary.text6,
+      fontSize: 12
+    }
+  };
+});
+var getRigName = function getRigName(feedItem) {
+  var _feedItem$rig, _feedItem$well, _feedItem$well$parent;
+  var isRigBasedItem = !!feedItem.rig;
+  return isRigBasedItem ? (_feedItem$rig = feedItem.rig) === null || _feedItem$rig === void 0 ? void 0 : _feedItem$rig.name : (_feedItem$well = feedItem.well) === null || _feedItem$well === void 0 ? void 0 : (_feedItem$well$parent = _feedItem$well.parent_asset) === null || _feedItem$well$parent === void 0 ? void 0 : _feedItem$well$parent.name;
+};
+var RigAndWell = function RigAndWell(_ref) {
+  var _feedItem$rig2, _feedItem$rig2$active, _feedItem$well2, _feedItem$rig3, _feedItem$rig3$active, _feedItem$well3;
+  var feedItem = _ref.feedItem;
+  var classes = useStyles();
+  var isRigBasedItem = !!feedItem.rig;
+  var rigName = getRigName(feedItem);
+  var wellName = isRigBasedItem ? (_feedItem$rig2 = feedItem.rig) === null || _feedItem$rig2 === void 0 ? void 0 : (_feedItem$rig2$active = _feedItem$rig2.active_well) === null || _feedItem$rig2$active === void 0 ? void 0 : _feedItem$rig2$active.name : (_feedItem$well2 = feedItem.well) === null || _feedItem$well2 === void 0 ? void 0 : _feedItem$well2.name;
+  var wellId = isRigBasedItem ? (_feedItem$rig3 = feedItem.rig) === null || _feedItem$rig3 === void 0 ? void 0 : (_feedItem$rig3$active = _feedItem$rig3.active_well) === null || _feedItem$rig3$active === void 0 ? void 0 : _feedItem$rig3$active.id : (_feedItem$well3 = feedItem.well) === null || _feedItem$well3 === void 0 ? void 0 : _feedItem$well3.id;
+  var stageNumber = get(feedItem, ['segment', 0]) === SEGMENTS.COMPLETION && get(feedItem, ['context', 'alert', 'stage_numbers', 0]);
+  return /*#__PURE__*/jsxs("div", {
+    className: classes.rigAndWellContainer,
+    children: [wellId ? /*#__PURE__*/jsx("a", {
+      "data-testid": "".concat(PAGE_NAME, "_wellLink"),
+      className: classes.assetLink,
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      href: "/assets/".concat(wellId, "/"),
+      target: "_blank",
+      rel: "noreferrer",
+      children: /*#__PURE__*/jsxs(Typography, {
+        variant: "body2",
+        className: classes.contentAssetInfo,
+        children: [rigName, " - ", wellName]
+      })
+    }) : /*#__PURE__*/jsxs(Typography, {
+      variant: "body2",
+      className: classes.contentAssetInfo,
+      children: [rigName, " - No Active Well"]
+    }), stageNumber && /*#__PURE__*/jsxs(Typography, {
+      variant: "body2",
+      className: classes.stageNumber,
+      children: ["Stage ", stageNumber]
+    })]
+  });
+};
+
+export { RigAndWell as default };
+//# sourceMappingURL=RigAndWell.js.map

package/components/FeedItem/components/TypeAndAssetTitle.js

@@ -1 +1,42 @@
-import{makeStyles as e,Typography as t}from"@material-ui/core";import{FEED_ITEM_TYPES_BY_KEY as o,FEED_ITEM_TYPES as a}from"../../../constants/feed.js";import{jsx as r}from"react/jsx-runtime";var i=[o.post.type,o.app_annotation.type,o.geosteering_comments.type,a.TRACES_MEMO,a.DEPTH_COMMENTS],n=e((function(e){return{assetRoot:{color:e.palette.grey[400],whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",marginRight:4,fontWeight:700,letterSpacing:.25},postTitle:{color:"#fff"}}})),s=function(e){var o=e.feedItem,a=e.userFullName,s=e.typeLabel,l=n(),p=i.includes(o.type)?a:s;return r(t,{variant:"body2",className:l.assetRoot,children:r("span",{"data-testid":"".concat("FeedPo","_postTitle"),className:l.postTitle,children:p})})};export{s as default};
+import { makeStyles, Typography } from '@material-ui/core';
+import { FEED_ITEM_TYPES_BY_KEY, FEED_ITEM_TYPES } from '../../../constants/feed.js';
+import { jsx } from 'react/jsx-runtime';
+
+/* eslint-disable react/prop-types */
+var PAGE_NAME = 'FeedPo';
+var USER_NAME_TITLE_ITEMS = [FEED_ITEM_TYPES_BY_KEY.post.type, FEED_ITEM_TYPES_BY_KEY.app_annotation.type, FEED_ITEM_TYPES_BY_KEY.geosteering_comments.type, FEED_ITEM_TYPES.TRACES_MEMO, FEED_ITEM_TYPES.DEPTH_COMMENTS];
+var useStyles = makeStyles(function (theme) {
+  return {
+    assetRoot: {
+      color: theme.palette.grey[400],
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      marginRight: 4,
+      fontWeight: 700,
+      letterSpacing: 0.25
+    },
+    postTitle: {
+      color: '#fff'
+    }
+  };
+});
+var TypeAndAssetTitle = function TypeAndAssetTitle(_ref) {
+  var feedItem = _ref.feedItem,
+    userFullName = _ref.userFullName,
+    typeLabel = _ref.typeLabel;
+  var classes = useStyles();
+  var typeOrName = USER_NAME_TITLE_ITEMS.includes(feedItem.type) ? userFullName : typeLabel;
+  return /*#__PURE__*/jsx(Typography, {
+    variant: "body2",
+    className: classes.assetRoot,
+    children: /*#__PURE__*/jsx("span", {
+      "data-testid": "".concat(PAGE_NAME, "_postTitle"),
+      className: classes.postTitle,
+      children: typeOrName
+    })
+  });
+};
+
+export { TypeAndAssetTitle as default };
+//# sourceMappingURL=TypeAndAssetTitle.js.map