chore: Side by Side exits beta phase

app/client/src/IDE/Components/Nudge/Nudge.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react";
+import { Flex, Popover, Text } from "@appsmith/ads";
+import * as Styled from "./styles";
+import type { Align, Side } from "@radix-ui/react-popper";
+
+interface Props {
+  trigger: React.ReactNode;
+  onDismissClick: () => void;
+  message: string;
+  align?: Align;
+  side?: Side;
+  delayOpen?: number;
+}
+
+export const Nudge = (props: Props) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(
+    function handleDelayOpenOnMount() {
+      const timer = setTimeout(() => {
+        setOpen(true);
+      }, props.delayOpen || 0);
+
+      return () => clearTimeout(timer);
+    },
+    [props.delayOpen],
+  );
+
+  return (
+    <Popover open={open}>
+      <Styled.PopoverTrigger data-active={open}>
+        {props.trigger}
+      </Styled.PopoverTrigger>
+      <Styled.PopoverContent align={props.align} side={props.side} size="sm">
+        <Flex
+          alignItems="flex-start"
+          backgroundColor="var(--ads-v2-color-bg-emphasis-max)"
+          gap="spaces-2"
+        >
+          <Text color="#fff" kind="heading-xs">
+            {props.message}
+          </Text>
+          <Styled.CloseIcon
+            name="close-line"
+            onClick={props.onDismissClick}
+            size="md"
+          />
+        </Flex>
+      </Styled.PopoverContent>
+    </Popover>
+  );
+};

app/client/src/IDE/Components/Nudge/index.ts

@@ -0,0 +1 @@
+export { Nudge } from "./Nudge";

app/client/src/IDE/Components/Nudge/styles.ts

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+import {
+  Icon,
+  PopoverContent as ADSPopoverContent,
+  PopoverTrigger as ADSPopoverTrigger,
+} from "@appsmith/ads";
+
+export const PopoverContent = styled(ADSPopoverContent)`
+  background: var(--ads-v2-color-bg-emphasis-max);
+  box-shadow: 0 1px 20px 0 #4c56641c;
+  border: none;
+`;
+
+export const PopoverTrigger = styled(ADSPopoverTrigger)`
+  border: 2px solid transparent !important;
+
+  &[data-active="true"] {
+    border: 2px solid var(--ads-v2-color-blue-300) !important;
+  }
+
+  transition: border 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
+`;
+
+export const CloseIcon = styled(Icon)`
+  svg {
+    path {
+      fill: #ffffff;
+    }
+  }
+
+  padding: var(--ads-v2-spaces-2);
+  cursor: pointer;
+  border-radius: var(--ads-v2-border-radius);
+
+  &:hover {
+    background-color: #ffffff33;
+  }
+`;

app/client/src/pages/Editor/IDE/EditorPane/components/Announcement.tsx

@@ -4,6 +4,8 @@ import localStorage, { LOCAL_STORAGE_KEYS } from "utils/localStorage";
 import { SPLITPANE_ANNOUNCEMENT, createMessage } from "ee/constants/messages";
 import { getAssetUrl } from "ee/utils/airgapHelpers";
 import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 
 const Announcement = () => {
   const localStorageFlag =
@@ -22,6 +24,10 @@ const Announcement = () => {
     );
   };
 
+  const featureIsOutOfBeta = useFeatureFlag(
+    FEATURE_FLAG.release_actions_redesign_enabled,
+  );
+
   const modalFooter = () => (
     <>
       <Button
@@ -38,6 +44,11 @@ const Announcement = () => {
     </>
   );
 
+  // If the feature is out of beta, don't show the announcement
+  if (featureIsOutOfBeta) {
+    return null;
+  }
+
   return (
     <AnnouncementModal
       banner={getAssetUrl(`${ASSETS_CDN_URL}/splitpane-banner.svg`)}

app/client/src/pages/Editor/IDE/EditorTabs/ScreenModeToggle.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Button, Tooltip } from "@appsmith/ads";
 
@@ -14,6 +14,8 @@ import { setIdeEditorViewMode } from "actions/ideActions";
 import type { AppState } from "ee/reducers";
 import { selectFeatureFlagCheck } from "ee/selectors/featureFlagsSelectors";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
+import { Nudge } from "IDE/Components/Nudge";
+import { useShowSideBySideNudge } from "../hooks";
 
 export const ScreenModeToggle = () => {
   const dispatch = useDispatch();
@@ -41,19 +43,38 @@ export const ScreenModeToggle = () => {
     }
   }, [dispatch, isAnimatedIDEEnabled]);
 
+  const [showNudge, dismissNudge] = useShowSideBySideNudge();
+
   const switchToSplitScreen = useCallback(() => {
     AnalyticsUtil.logEvent("EDITOR_MODE_CHANGE", {
       to: EditorViewMode.SplitScreen,
     });
 
+    dismissNudge();
+
     if ("startViewTransition" in document && isAnimatedIDEEnabled) {
       document.startViewTransition(() => {
         dispatch(setIdeEditorViewMode(EditorViewMode.SplitScreen));
       });
     } else {
       dispatch(setIdeEditorViewMode(EditorViewMode.SplitScreen));
     }
-  }, [dispatch, isAnimatedIDEEnabled]);
+  }, [dispatch, dismissNudge, isAnimatedIDEEnabled]);
+
+  const maximiseButton = useMemo(
+    () => (
+      <Button
+        className="ml-auto !min-w-[24px]"
+        data-testid={"t--ide-minimize"}
+        id={"editor-mode-minimize"}
+        isIconButton
+        kind="tertiary"
+        onClick={switchToSplitScreen}
+        startIcon={"minimize-v3"}
+      />
+    ),
+    [switchToSplitScreen],
+  );
 
   if (ideViewMode === EditorViewMode.SplitScreen) {
     return (
@@ -74,20 +95,26 @@ export const ScreenModeToggle = () => {
     );
   }
 
+  if (showNudge) {
+    return (
+      <Nudge
+        align="center"
+        delayOpen={500}
+        message="Write code and configure UI elements side by side"
+        onDismissClick={dismissNudge}
+        side="left"
+        trigger={maximiseButton}
+      />
+    );
+  }
+
   return (
     <Tooltip
       content={createMessage(MINIMIZE_BUTTON_TOOLTIP)}
       key={createMessage(MINIMIZE_BUTTON_TOOLTIP)}
+      placement="left"
     >
-      <Button
-        className="ml-auto !min-w-[24px]"
-        data-testid={"t--ide-minimize"}
-        id={"editor-mode-minimize"}
-        isIconButton
-        kind="tertiary"
-        onClick={switchToSplitScreen}
-        startIcon={"minimize-v3"}
-      />
+      {maximiseButton}
     </Tooltip>
   );
 };

app/client/src/pages/Editor/IDE/hooks.ts

@@ -29,6 +29,10 @@ import { getCurrentBasePageId } from "selectors/editorSelectors";
 import { getCurrentEntityInfo } from "../utils";
 import { useEditorType } from "ee/hooks";
 import { useParentEntityInfo } from "ee/hooks/datasourceEditorHooks";
+import { useBoolean } from "usehooks-ts";
+import { isWidgetActionConnectionPresent } from "selectors/onboardingSelectors";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 
 export const useCurrentEditorState = () => {
   const [selectedSegment, setSelectedSegment] = useState<EditorEntityTab>(
@@ -198,3 +202,16 @@ export const useIDETabClickHandlers = () => {
 
   return { addClickHandler, tabClickHandler, closeClickHandler };
 };
+
+export const useShowSideBySideNudge: () => [boolean, () => void] = () => {
+  const widgetBindingsExist = useSelector(isWidgetActionConnectionPresent);
+  const isActionRedesignEnabled = useFeatureFlag(
+    FEATURE_FLAG.release_actions_redesign_enabled,
+  );
+
+  const { setFalse, value } = useBoolean(
+    widgetBindingsExist && isActionRedesignEnabled,
+  );
+
+  return [value, setFalse];
+};