Minor comments feature fixes (#6245)

app/client/src/comments/CommentCard/CommentCard.tsx

@@ -43,6 +43,7 @@ import {
   deleteCommentThreadRequest,
   addCommentReaction,
   removeCommentReaction,
+  setVisibleThread,
 } from "actions/commentActions";
 import { useDispatch, useSelector } from "react-redux";
 import { commentThreadsSelector } from "selectors/commentsSelectors";
@@ -376,6 +377,11 @@ function CommentCard({
     history.push(
       `${commentThreadURL.pathname}${commentThreadURL.search}${commentThreadURL.hash}`,
     );
+
+    // update visible thread to make it visible
+    // even if the query param is not updated
+    dispatch(setVisibleThread(commentThreadId));
+
     if (!commentThread.isViewed) {
       dispatch(markThreadAsReadRequest(commentThreadId));
     }

app/client/src/comments/CommentsShowcaseCarousel/CommentsCarouselModal.tsx

@@ -1,8 +1,12 @@
 import React from "react";
 import ModalComponent from "components/designSystems/blueprint/ModalComponent";
 import { Layers } from "constants/Layers";
+import { useDispatch } from "react-redux";
+import { hideCommentsIntroCarousel } from "actions/commentActions";
 
 function ShowcaseCarouselModal({ children }: { children: React.ReactNode }) {
+  const dispatch = useDispatch();
+
   return (
     <ModalComponent
       bottom={25}
@@ -13,7 +17,7 @@ function ShowcaseCarouselModal({ children }: { children: React.ReactNode }) {
       isOpen
       left={25}
       onClose={() => {
-        // TODO (rishabh) handle close
+        dispatch(hideCommentsIntroCarousel());
       }}
       overlayClassName="comments-onboarding-carousel"
       portalClassName="comments-onboarding-carousel-portal"

app/client/src/comments/CommentsShowcaseCarousel/index.tsx

@@ -4,6 +4,9 @@ import Text, { TextType } from "components/ads/Text";
 import ShowcaseCarousel, { Steps } from "components/ads/ShowcaseCarousel";
 import ProfileForm, { PROFILE_FORM } from "./ProfileForm";
 import CommentsCarouselModal from "./CommentsCarouselModal";
+import ProgressiveImage, {
+  Container as ProgressiveImageContainer,
+} from "components/ads/ProgressiveImage";
 
 import styled, { withTheme } from "styled-components";
 import { Theme } from "constants/DefaultTheme";
@@ -27,6 +30,9 @@ import { getCurrentAppOrg } from "selectors/organizationSelectors";
 import useOrg from "utils/hooks/useOrg";
 import { getCanManage } from "utils/helpers";
 
+import stepOneThumbnail from "assets/images/comments-onboarding/thumbnails/step-1.jpg";
+import stepTwoThumbnail from "assets/images/comments-onboarding/thumbnails/step-2.jpg";
+
 const getBanner = (step: number) =>
   `${S3_BUCKET_URL}/comments/step-${step}.png`;
 
@@ -36,15 +42,15 @@ const introStepsEditor = [
     content:
       "You can now collaborate with your users to build apps faster. Invite your team to comment on your apps, exchange thoughts & ship your ideas.",
     banner: getBanner(1),
+    bannerThumbnail: stepOneThumbnail,
     hideBackBtn: true,
-    bannerProps: { style: { height: 284 } },
   },
   {
     title: "Give Contextual Feedback",
     content:
       "Drop a comment on a widget to suggest an improvement. Comments are tagged to the widget and move along with it. Update the widget and iterate your way to shipping your ideas!",
     banner: getBanner(2),
-    bannerProps: { style: { height: 284 } },
+    bannerThumbnail: stepTwoThumbnail,
   },
 ];
 
@@ -54,15 +60,15 @@ const introStepsViewer = [
     content:
       "You can now collaborate with your developers to build apps faster. Exchange thoughts, leave feedback & ship your ideas.",
     banner: getBanner(1),
+    bannerThumbnail: stepOneThumbnail,
     hideBackBtn: true,
-    bannerProps: { style: { height: 284 } },
   },
   {
     title: "Give Contextual Feedback",
     content:
       "Drop a comment on a widget to suggest an improvement or report an issue. Comments are tagged to the widget, resolve them once the updates are live!",
     banner: getBanner(2),
-    bannerProps: { style: { height: 284 } },
+    bannerThumbnail: stepTwoThumbnail,
   },
 ];
 
@@ -70,21 +76,33 @@ const IntroContentContainer = styled.div`
   padding: ${(props) => props.theme.spaces[5]}px;
 `;
 
-const StyledImg = styled.img`
-  width: 100%;
-  object-fit: contain;
+const BannerContainer = styled.div`
+  & ${ProgressiveImageContainer} {
+    width: 100%;
+    height: 284px;
+  }
+  .progressive-image--thumb,
+  progressive-image--full {
+    object-fit: contain;
+  }
 `;
 
 function IntroStep(props: {
   title: string;
   content: string;
   banner: string;
+  bannerThumbnail: any;
   theme: Theme;
   bannerProps: any;
 }) {
   return (
     <>
-      <StyledImg alt="" src={props.banner} {...props.bannerProps} />
+      <BannerContainer>
+        <ProgressiveImage
+          imageSource={props.banner}
+          thumbnailSource={props.bannerThumbnail}
+        />
+      </BannerContainer>
       <IntroContentContainer>
         <div style={{ marginBottom: props.theme.spaces[4] }}>
           <Text

app/client/src/comments/inlineComments/InlineCommentPin.tsx

@@ -205,7 +205,6 @@ function InlineCommentPin({
           />
         }
         enforceFocus={false}
-        hasBackdrop
         // isOpen is controlled so that newly created threads are set to be visible
         isOpen={!!isCommentThreadVisible}
         minimal

app/client/src/comments/tour/commentsTourSteps.ts

@@ -19,7 +19,7 @@ export const commentsTourStepsEditMode = [
   {
     id: commentsTourStepsEditModeTypes.SAY_HELLO,
     data: {
-      message: "Say hello to team appsmith",
+      message: "type Hello",
       tooltipProps: { position: Position.TOP },
     },
   },

app/client/src/components/ads/DisplayImageUpload.tsx

@@ -155,7 +155,6 @@ export default function DisplayImageUpload({
         canOutsideClickClose
         className="file-picker-dialog"
         isOpen={isModalOpen}
-        maxHeight={"80vh"}
         trigger={
           <div className="view">
             <div className="image-view">

app/client/src/components/ads/EmojiReactions.tsx

@@ -28,9 +28,11 @@ const Bubble = styled.div<{ active?: boolean }>`
         : "transparent"};
 
   border-radius: ${(props) => `${props.theme.radii[4]}px`};
-  margin-left: ${(props) => `${props.theme.radii[1]}px`};
-  &:first-child {
-    margin-left: 0;
+  margin-right: ${(props) => `${props.theme.radii[1]}px`};
+
+  /* At times the rendered emoji has width as 16px */
+  & span.emoji {
+    min-width: 20px;
   }
 `;
 
@@ -156,7 +158,7 @@ function EmojiReactions({
               active={reaction.active}
               onClick={(e) => handleSelectReaction(e, reaction.reactionEmoji)}
             >
-              <span>{reaction.reactionEmoji}</span>
+              <span className="emoji">{reaction.reactionEmoji}</span>
               {reaction.count > 1 && (
                 <Count active={reaction.active}>{reaction.count}</Count>
               )}

app/client/src/components/ads/ProgressiveImage.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { useEffect } from "react";
+import styled from "styled-components";
+
+export const Container = styled.div`
+  position: relative;
+  .progressive-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .progressive-image--full {
+    transition: opacity 300ms ease 0ms;
+  }
+  .progressive-image--thumb {
+    filter: blur(2px);
+    transition: visibility 0ms ease 300ms;
+  }
+`;
+
+/**
+ * Use a tiny blurred image (thumbnail) until the actual image is fetched
+ */
+function ProgressiveImage(props: {
+  thumbnailSource?: string;
+  imageSource?: string;
+  alt?: string;
+}) {
+  const [isLoaded, setIsLoaded] = React.useState(false);
+
+  useEffect(() => {
+    setIsLoaded(false);
+  }, [props.imageSource]);
+
+  return (
+    <Container className="container-progressive-image">
+      <img
+        alt={props.alt}
+        className="progressive-image progressive-image--thumb"
+        src={props.thumbnailSource}
+        style={{ visibility: isLoaded ? "hidden" : "visible" }}
+      />
+      <img
+        alt={props.alt}
+        className="progressive-image progressive-image--full"
+        onLoad={() => {
+          setIsLoaded(true);
+        }}
+        src={props.imageSource}
+        style={{ opacity: isLoaded ? 1 : 0 }}
+      />
+    </Container>
+  );
+}
+export default ProgressiveImage;

app/client/src/globalStyles/uppy.ts

@@ -8,4 +8,20 @@ export const UppyStyles = createGlobalStyle`
   a.uppy-Dashboard-poweredBy {
     display: none;
   }
+
+  .bp3-dialog.file-picker-dialog {
+    margin: 48px 0;
+  }
+
+  .cropper-view-box {
+    box-shadow: 0 0 0 1px #39f;
+    border-radius: 50%;
+    outline: 0;
+  }
+  .cropper-face {
+    background-color:inherit !important;
+  }
+  .cropper-view-box {
+    outline:inherit !important;
+  }
 `;

app/client/src/pages/Editor/ToggleModeButton.tsx

@@ -150,6 +150,7 @@ const useUpdateCommentMode = async (currentUser?: User) => {
 
     if (updatedIsCommentMode && !isCommentsIntroSeen) {
       dispatch(showCommentsIntroCarousel());
+      setCommentModeInUrl(false);
     } else {
       setCommentModeInStore(updatedIsCommentMode);
     }

app/client/src/reducers/uiReducers/commentsReducer/commentsReducer.ts

@@ -74,7 +74,6 @@ const commentsReducer = createReducer(initialState, {
   ) => ({
     ...state,
     isCommentMode: action.payload && state.areCommentsEnabled,
-    isIntroCarouselVisible: false,
   }),
   [ReduxActionTypes.CREATE_COMMENT_THREAD_REQUEST]: (
     state: CommentsReduxState,