Merge branch 'release' into feature/4149-button-widget-style

Author: wmdev0808

app/client/src/comments/CommentThread/CommentThread.tsx

@@ -42,7 +42,7 @@ const ThreadContainer = styled(animated.div)<{
   max-height: ${(props) =>
     props.inline ? `calc(100vh - ${props.theme.smallHeaderHeight})` : "unset"};
   /* overflow: auto collapses the comment threads in the sidebar */
-  overflow: ${(props) => (props.inline ? "visible" : "unset")};
+  overflow: ${(props) => (props.inline ? "auto" : "unset")};
 `;
 
 const CommentsContainer = styled.div<{ inline?: boolean }>`

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

@@ -52,9 +52,10 @@ function ProfileForm(props: any) {
       </div>
       <FormGroup label={createMessage(DISPLAY_NAME)}>
         <FormTextField
+          autoFocus
           hideErrorMessage
           name={fieldNames.displayName}
-          placeholder={createMessage(DISPLAY_NAME)}
+          placeholder=""
         />
       </FormGroup>
       <FormGroup label={createMessage(EMAIL_ADDRESS)}>

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

@@ -4,6 +4,7 @@ import Button, { Category, Size } from "components/ads/Button";
 import styled from "styled-components";
 import { createMessage, NEXT, BACK } from "constants/messages";
 import { useTransition, animated } from "react-spring";
+import { useCallback } from "react";
 
 const Container = styled.div`
   box-shadow: 1px 0px 10px 5px rgba(0, 0, 0, 0.15);
@@ -77,8 +78,33 @@ export default function ShowcaseCarousel(props: Props) {
     config: { duration: 300 },
   });
 
+  const handleSubmit = useCallback(() => {
+    if (!componentProps.isSubmitDisabled) {
+      setCurrentIdx(Math.min(length - 1, activeIndex + 1));
+      if (typeof componentProps.onSubmit === "function") {
+        componentProps.onSubmit();
+      }
+    }
+  }, [
+    componentProps.isSubmitDisabled,
+    componentProps.onSubmit,
+    activeIndex,
+    setCurrentIdx,
+    length,
+  ]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      const isEnterKey = e.key === "Enter" || e.keyCode === 13;
+      if (isEnterKey) {
+        handleSubmit();
+      }
+    },
+    [handleSubmit],
+  );
+
   return (
-    <Container>
+    <Container onKeyDown={handleKeyDown} tabIndex={0}>
       {transition.map(
         ({ item, props: springProps }: { item: string; props: any }) => (
           <animated.div key={item} style={springProps}>
@@ -100,15 +126,11 @@ export default function ShowcaseCarousel(props: Props) {
           )}
           <Button
             disabled={componentProps.isSubmitDisabled}
-            onClick={() => {
-              setCurrentIdx(Math.min(length - 1, activeIndex + 1));
-              if (typeof componentProps.onSubmit === "function") {
-                componentProps.onSubmit();
-              }
-            }}
+            onClick={handleSubmit}
             size={Size.large}
             tag="button"
             text={componentProps.nextBtnText || createMessage(NEXT)}
+            type="submit"
           />
         </Buttons>
       </Footer>

app/client/src/components/editorComponents/GlobalSearch/parseDocumentationContent.ts

@@ -20,19 +20,25 @@ export const htmlToElement = (html: string) => {
  */
 const strip = (text: string) => text.replace(/{% .*?%}/gm, "");
 
-export const YT_EMBEDDING_SELECTION_REGEX = /{% embed url="<a href="https:\/\/www.youtube.com\/watch\?v=(.*?)\&.*? %}/m;
+export const YT_EMBEDDING_SELECTION_REGEX = [
+  /{% embed url="<a href="https:\/\/www.youtube.com\/watch\?v=(.*?)\&.*? %}/m,
+  /{% embed url="<a href="https:\/\/youtu.be.*?>https:\/\/youtu.be\/(.*?)".*? %}/m,
+];
 
-const updateYoutubeEmbedingsWithIframe = (text: string) => {
+const getYtIframe = (videoId: string) => {
+  return `<iframe width="100%" height="280" src="https://www.youtube.com/embed/${videoId}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
+};
+const updateYoutubeEmbeddingsWithIframe = (text: string) => {
   let docString = text;
   let match;
-  while ((match = YT_EMBEDDING_SELECTION_REGEX.exec(docString)) !== null) {
-    // gitbook adds \\ in front of a _ char in an id. TO remove that we have to do this.
-    const videoId = match[1].replaceAll("%5C", "");
-    docString = docString.replace(
-      YT_EMBEDDING_SELECTION_REGEX,
-      `<iframe width="100%" height="280" src="https://www.youtube.com/embed/${videoId}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`,
-    );
-  }
+  YT_EMBEDDING_SELECTION_REGEX.forEach((ytRegex) => {
+    while ((match = ytRegex.exec(docString)) !== null) {
+      // gitbook adds \\ in front of a _ char in an id. TO remove that we have to do this.
+      let videoId = match[1].replaceAll("%5C", "");
+      videoId = videoId.replaceAll("\\", "");
+      docString = docString.replace(ytRegex, getYtIframe(videoId));
+    }
+  });
   return docString;
 };
 
@@ -223,7 +229,7 @@ const parseDocumentationContent = (item: any): string | undefined => {
 
     // Remove highlight for nodes that don't match well
     removeBadHighlights(documentObj, query);
-    let content = updateYoutubeEmbedingsWithIframe(documentObj.body.innerHTML);
+    let content = updateYoutubeEmbeddingsWithIframe(documentObj.body.innerHTML);
     content = strip(content).trim();
     return content;
   } catch (e) {

app/client/src/components/editorComponents/Onboarding/Helper.tsx

@@ -9,6 +9,7 @@ import useClipboard from "utils/hooks/useClipboard";
 import TickIcon from "assets/images/tick.svg";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { OnboardingStep } from "constants/OnboardingConstants";
+import { getIsOnboardingHelperVisible } from "selectors/onboardingSelectors";
 
 const StyledContainer = styled.div`
   position: fixed;
@@ -182,9 +183,7 @@ const SubStepContainer = styled.div`
 `;
 
 function Helper() {
-  const showHelper = useSelector(
-    (state: AppState) => state.ui.onBoarding.showHelper,
-  );
+  const showHelper = useSelector(getIsOnboardingHelperVisible);
   const helperConfig = useSelector(
     (state: AppState) => state.ui.onBoarding.helperStepConfig,
   );

app/client/src/constants/WidgetValidation.ts

@@ -13,6 +13,7 @@ export enum ValidationTypes {
   DATE_ISO_STRING = "DATE_ISO_STRING",
   IMAGE_URL = "IMAGE_URL",
   FUNCTION = "FUNCTION",
+  SAFE_URL = "SAFE_URL",
 }
 
 export type ValidationResponse = {

app/client/src/entities/Comments/CommentsInterfaces.ts

@@ -74,6 +74,7 @@ export type CommentThread = Omit<CreateCommentThreadRequest, "comments"> & {
   sequenceId?: string;
   updationTime?: string;
   creationTime?: string;
+  viewedByUsers?: Array<string>;
 };
 
 export type CommentEventPayload = {

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

@@ -269,7 +269,7 @@ const commentsReducer = createReducer(initialState, {
     action: ReduxAction<number>,
   ) => ({
     ...state,
-    unreadCommentThreadsCount: action.payload || 0,
+    unreadCommentThreadsCount: Math.max(action.payload, 0),
   }),
 });
 

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

@@ -26,7 +26,6 @@ const handleUpdateCommentThreadEvent = (
   state.commentThreadsMap[id] = {
     ...(commentThreadInStore || {}),
     ...action.payload,
-    isViewed: commentThreadInStore?.isViewed || action.payload.isViewed, // TODO refactor this
     comments: uniqBy([...existingComments, ...newComments], "id"),
   };
 

app/client/src/sagas/WebsocketSagas/constants.ts

@@ -4,6 +4,7 @@ export const SOCKET_EVENTS = {
   INSERT_COMMENT_THREAD: "insert:commentThread",
   INSERT_COMMENT: "insert:comment",
   UPDATE_COMMENT_THREAD: "update:commentThread",
+  REPLACE_COMMENT_THREAD: "replace:commentThread",
   UPDATE_COMMENT: "update:comment",
 
   // notification events