Merge branch 'release' of https://github.com/appsmithorg/appsmith int…

…o action-redesign/mongodb-v2

app/client/cypress/e2e/Regression/ClientSide/Git/GitSync/GitBranchProtect_spec.ts

@@ -36,10 +36,7 @@ describe("Git Branch Protection", { tags: ["@tag.Git"] }, function () {
         cy.wait("@gitProtectApi").then((res1) => {
           _.agHelper.GetNClick(_.gitSync._closeGitSettingsModal);
           expect(res1.response).to.have.property("statusCode", 200);
-          _.agHelper.AssertElementVisibility(
-            AppSidebar.locators.sidebar,
-            false,
-          );
+          _.agHelper.AssertElementAbsence(AppSidebar.locators.sidebar);
           _.agHelper.AssertElementVisibility(
             PageLeftPane.locators.selector,
             false,

app/client/cypress/e2e/Regression/ClientSide/Templates/Fork_Template_To_App_spec.ts

@@ -15,17 +15,14 @@ describe(
     it("1. Fork a template to the current app + Bug 17477", () => {
       PageList.AddNewPage("Add page from template");
       agHelper.AssertElementVisibility(template.templateDialogBox);
-      agHelper.GetNClick("//h1[text()='Applicant Tracker-test']");
+      agHelper.GetNClick(template.templateCard, 0, true);
       agHelper.FailIfErrorToast("INTERNAL_SERVER_ERROR");
       agHelper.GetNClick(template.templateViewForkButton);
       agHelper.WaitUntilToastDisappear("template added successfully");
       assertHelper.AssertNetworkStatus("updateLayout");
-      // [Bug]: Getting 'Resource not found' error on deploying template #17477
+      PageList.AddNewPage("Generate page with data");
       deployMode.DeployApp();
-      agHelper.GetNClickByContains(
-        ".t--page-switch-tab",
-        "1 Track Applications",
-      );
+      agHelper.GetNClick(locators._deployedPage, 0, true);
       deployMode.NavigateBacktoEditor();
       homePage.NavigateToHome();
       agHelper.WaitUntilAllToastsDisappear();
@@ -35,14 +32,13 @@ describe(
       homePage.CreateNewApplication();
       PageList.AddNewPage("Add page from template");
       agHelper.AssertElementVisibility(template.templateDialogBox);
-      agHelper.GetNClick("//h1[text()='Applicant Tracker-test']");
+      agHelper.GetNClick(template.templateCard, 0, true);
       agHelper.FailIfErrorToast(
         "Internal server error while processing request",
       );
       assertHelper.AssertNetworkStatus("getTemplatePages");
       agHelper.CheckUncheck(template.selectAllPages, false);
       agHelper.GetNClick(template.selectCheckbox, 1);
-      // [Bug]: On forking selected pages from a template, resource not found error is shown #17270
       agHelper.GetNClick(template.templateViewForkButton);
       agHelper.AssertElementAbsence(
         locators._visibleTextSpan("Setting up the template"),

app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Mongo_Spec.ts

@@ -41,6 +41,10 @@ describe(
       assertHelper.AssertNetworkStatus("@getDatasourceStructure"); //Making sure table dropdown is populated
       agHelper.GetNClick(dataSources._selectTableDropdown, 0, true);
       agHelper.GetNClickByContains(dataSources._dropdownOption, "pokemon");
+
+      agHelper.GetNClick(dataSources._selectTableDropdown, 1, true);
+      agHelper.GetNClickByContains(dataSources._dropdownOption, "img");
+
       GenerateCRUDNValidateDeployPage(
         "http://www.serebii.net/pokemongo/pokemon/150.png",
         "150",
@@ -103,30 +107,68 @@ describe(
       assertHelper.AssertNetworkStatus("@postExecute", 200);
       agHelper.ClickButton("Got it");
       assertHelper.AssertNetworkStatus("@updateLayout", 200);
+
       deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.TABLE));
 
       //Validating loaded table
       agHelper.AssertElementExist(dataSources._selectedRow);
-      table.ReadTableRowColumnData(0, 0, "v2", 2000).then(($cellData) => {
-        expect($cellData).to.eq(col1Text);
-      });
-      table.ReadTableRowColumnData(0, 3, "v2", 200).then(($cellData) => {
-        expect($cellData).to.eq(col2Text);
-      });
-      table.ReadTableRowColumnData(0, 6, "v2", 200).then(($cellData) => {
-        expect($cellData).to.eq(col3Text);
-      });
 
-      //Validating loaded JSON form
-      cy.xpath(locators._buttonByText("Update")).then((selector) => {
-        cy.wrap(selector)
-          .invoke("attr", "class")
-          .then((classes) => {
-            //cy.log("classes are:" + classes);
-            expect(classes).not.contain("bp3-disabled");
+      findTheDataRow(col1Text).then((rowIndex: number) => {
+        cy.log(`This is the rowIndex of ${col1Text} : ${rowIndex}`);
+        table
+          .ReadTableRowColumnData(rowIndex, 0, "v2", 2000)
+          .then(($cellData) => {
+            expect($cellData).to.eq(col1Text);
           });
+        table
+          .ReadTableRowColumnData(rowIndex, 3, "v2", 200)
+          .then(($cellData) => {
+            expect($cellData).to.eq(col2Text);
+          });
+        table
+          .ReadTableRowColumnData(rowIndex, 6, "v2", 200)
+          .then(($cellData) => {
+            expect($cellData).to.eq(col3Text);
+          });
+
+        //Validating loaded JSON form
+        cy.xpath(locators._buttonByText("Update")).then((selector) => {
+          cy.wrap(selector)
+            .invoke("attr", "class")
+            .then((classes) => {
+              //cy.log("classes are:" + classes);
+              expect(classes).not.contain("bp3-disabled");
+            });
+        });
+        dataSources.AssertJSONFormHeader(0, idIndex, "Id", "", true);
       });
-      dataSources.AssertJSONFormHeader(0, idIndex, "Id", "", true);
+    }
+
+    function findTheDataRow(col1Text: string) {
+      if (col1Text.length === 0) {
+        return cy.wrap(0);
+      }
+
+      return agHelper
+        .GetElement(table._tableColumnDataWithText(0, col1Text, "v2"))
+        .closest(".tr")
+        .then(($p1) => {
+          return cy
+            .wrap($p1)
+            .parent()
+            .children()
+            .then(($children) => {
+              let index = 0;
+              $children.each((i, el) => {
+                // Iterate through the children
+                if (Cypress.$(el).is($p1)) {
+                  // Check if the current child is p1
+                  index = i; // Assign the index when found
+                }
+              });
+              return index;
+            });
+        });
     }
   },
 );

app/client/cypress/support/Pages/Table.ts

@@ -59,6 +59,15 @@ export class Table {
   _tableRow = (rowNum: number, colNum: number, version: "v1" | "v2") =>
     this._tableWidgetVersion(version) +
     ` .tbody .td[data-rowindex=${rowNum}][data-colindex=${colNum}]`;
+  _tableColumnDataWithText = (
+    colNum: number,
+    columnText: string,
+    version: "v1" | "v2",
+  ) =>
+    this._tableWidgetVersion(version) +
+    ` .tbody .td[data-colindex=${colNum}]` +
+    this._tableRowColumnDataVersion(version) +
+    ` div:contains("${columnText}")`;
   _editCellIconDiv = ".t--editable-cell-icon";
   _editCellEditor = ".t--inlined-cell-editor";
   _editCellEditorInput = this._editCellEditor + " input";

app/client/package.json

@@ -269,6 +269,7 @@
     "@types/codemirror": "^0.0.96",
     "@types/deep-diff": "^1.0.0",
     "@types/dom-mediacapture-record": "^1.0.11",
+    "@types/dom-view-transitions": "^1.0.5",
     "@types/downloadjs": "^1.4.2",
     "@types/jest": "^27.4.1",
     "@types/js-beautify": "^1.13.2",

app/client/src/IDE/Structure/Header.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Divider, Flex } from "@appsmith/ads";
 import { AppsmithLink } from "pages/Editor/AppsmithLink";
+import { IDE_HEADER_HEIGHT } from "./constants";
 
 interface ChildrenProps {
   children: React.ReactNode | React.ReactNode[];
@@ -59,7 +60,7 @@ const Header = (props: ChildrenProps) => {
       alignItems="center"
       border="1px solid var(--ads-v2-color-border)"
       className="t--editor-header"
-      height="40px"
+      height={IDE_HEADER_HEIGHT + "px"}
       overflow="hidden"
       width="100%"
     >

app/client/src/IDE/Structure/constants.ts

@@ -0,0 +1 @@
+export const IDE_HEADER_HEIGHT = 40;

app/client/src/IDE/index.ts

@@ -9,6 +9,7 @@
  * These are composable components that you can use to spread the content of the header
  * It is possible to use the IDE Header without using these subsections
  */
+export { IDE_HEADER_HEIGHT } from "./Structure/constants";
 export { default as IDEHeader } from "./Structure/Header";
 
 /* ====================================================

app/client/src/ce/entities/FeatureFlag.ts

@@ -45,6 +45,7 @@ export const FEATURE_FLAG = {
     "ab_learnability_discoverability_collapse_all_except_data_enabled",
   release_layout_conversion_enabled: "release_layout_conversion_enabled",
   release_anvil_toggle_enabled: "release_anvil_toggle_enabled",
+  release_ide_animations_enabled: "release_ide_animations_enabled",
 } as const;
 
 export type FeatureFlag = keyof typeof FEATURE_FLAG;
@@ -82,6 +83,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   ab_learnability_discoverability_collapse_all_except_data_enabled: true,
   release_layout_conversion_enabled: false,
   release_anvil_toggle_enabled: false,
+  release_ide_animations_enabled: false,
 };
 
 export const AB_TESTING_EVENT_KEYS = {

app/client/src/ce/pages/Editor/Explorer/helpers.tsx

@@ -7,7 +7,9 @@ import {
   DATA_SOURCES_EDITOR_ID_PATH,
   matchBuilderPath,
   matchViewerPath,
-  BUILDER_VIEWER_PATH_PREFIX,
+  VIEWER_PATH,
+  VIEWER_CUSTOM_PATH,
+  VIEWER_PATH_DEPRECATED,
 } from "constants/routes";
 
 import {
@@ -80,11 +82,7 @@ export const getActionIdFromURL = () => {
 };
 
 export function getAppViewerPageIdFromPath(path: string): string | null {
-  const regexes = [
-    `${BUILDER_VIEWER_PATH_PREFIX}:applicationSlug/:pageSlug(.*\\-):basePageId`, // VIEWER_PATH
-    `${BUILDER_VIEWER_PATH_PREFIX}:customSlug(.*\\-):basePageId`, // VIEWER_CUSTOM_PATH
-    `/applications/:baseApplicationId/pages/:basePageId`, // VIEWER_PATH_DEPRECATED
-  ];
+  const regexes = [VIEWER_PATH, VIEWER_CUSTOM_PATH, VIEWER_PATH_DEPRECATED];
   for (const regex of regexes) {
     const match = matchPath<{ basePageId: string }>(path, { path: regex });
     if (match?.params.basePageId) {

app/client/src/components/AnimatedGridLayout/components/LayoutArea/LayoutArea.tsx

@@ -41,7 +41,7 @@ export function LayoutArea(props: LayoutAreaProps) {
     >
       <div
         style={{
-          minWidth: dimensions?.width || "100%",
+          width: dimensions?.width || "100%",
           height: "100%",
           position: "absolute",
           overflow: "auto",

app/client/src/components/AnimatedGridLayout/constants.ts

@@ -1,9 +1,11 @@
-import { easings } from "@react-spring/web";
 import type { AnimatedGridUnit } from "./types";
 
 /** Default rows config. */
 export const DEFAULT_ROWS: AnimatedGridUnit[] = ["1fr"];
 
 export const SPRING_ANIMATION_CONFIG = {
-  easing: easings.easeInCirc,
+  duration: 375,
+  friction: 32,
+  mass: 1,
+  tension: 205,
 };

app/client/src/components/BottomBar/components.ts

@@ -1,9 +1,10 @@
 import styled from "styled-components";
 import { Layers } from "constants/Layers";
+import { BOTTOM_BAR_HEIGHT } from "./constants";
 
 export const Container = styled.div`
   width: 100%;
-  height: ${(props) => props.theme.bottomBarHeight};
+  height: ${BOTTOM_BAR_HEIGHT}px;
   display: flex;
   position: fixed;
   justify-content: space-between;

app/client/src/components/BottomBar/constants.ts

@@ -0,0 +1 @@
+export const BOTTOM_BAR_HEIGHT = 37;

app/client/src/components/BottomBar/index.tsx

@@ -7,14 +7,18 @@ import { Button } from "@appsmith/ads";
 import SwitchEnvironment from "ee/components/SwitchEnvironment";
 import { Container, Wrapper } from "./components";
 import { useSelector } from "react-redux";
-import { getCurrentApplicationId } from "selectors/editorSelectors";
+import {
+  getCurrentApplicationId,
+  previewModeSelector,
+} from "selectors/editorSelectors";
 import { useDispatch } from "react-redux";
 import { softRefreshActions } from "actions/pluginActionActions";
 import { START_SWITCH_ENVIRONMENT } from "ee/constants/messages";
 import { getIsAnvilEnabledInCurrentApplication } from "layoutSystems/anvil/integrations/selectors";
 
-export default function BottomBar({ viewMode }: { viewMode: boolean }) {
+export default function BottomBar() {
   const appId = useSelector(getCurrentApplicationId) || "";
+  const isPreviewMode = useSelector(previewModeSelector);
   const dispatch = useDispatch();
   // We check if the current application is an Anvil application.
   // If it is an Anvil application, we remove the Git features from the bottomBar
@@ -28,17 +32,17 @@ export default function BottomBar({ viewMode }: { viewMode: boolean }) {
   return (
     <Container>
       <Wrapper>
-        {!viewMode && (
+        {!isPreviewMode && (
           <SwitchEnvironment
             editorId={appId}
             onChangeEnv={onChangeEnv}
             startSwitchEnvMessage={START_SWITCH_ENVIRONMENT}
-            viewMode={viewMode}
+            viewMode={isPreviewMode}
           />
         )}
-        {!viewMode && !isAnvilEnabled && <QuickGitActions />}
+        {!isPreviewMode && !isAnvilEnabled && <QuickGitActions />}
       </Wrapper>
-      {!viewMode && (
+      {!isPreviewMode && (
         <Wrapper>
           <ManualUpgrades showTooltip>
             <Button