Merge remote-tracking branch 'origin' into test/community-pr-33171

app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Page_Load_Spec.js

@@ -10,6 +10,11 @@ import {
 } from "../../../../support/Objects/ObjectsCore";
 import PageList from "../../../../support/Pages/PageList";
 import { EntityItems } from "../../../../support/Pages/AssertHelper";
+import {
+  createMessage,
+  STARTER_TEMPLATE_PAGE_LAYOUTS,
+  EMPTY_CANVAS_HINTS,
+} from "../../../../../src/ce/constants/messages";
 
 describe("Page Load tests", { tags: ["@tag.IDE"] }, () => {
   afterEach(() => {
@@ -23,7 +28,15 @@ describe("Page Load tests", { tags: ["@tag.IDE"] }, () => {
   before(() => {
     agHelper.AddDsl("PageLoadDsl");
     PageList.AddNewPage();
-    cy.get("h2").contains("Drag and drop a widget here");
+    if (Cypress.env("AIRGAPPED")) {
+      cy.get("h2").contains(
+        createMessage(EMPTY_CANVAS_HINTS.DRAG_DROP_WIDGET_HINT),
+      );
+    } else {
+      cy.get("span").contains(
+        createMessage(STARTER_TEMPLATE_PAGE_LAYOUTS.header),
+      );
+    }
   });
 
   it("1. Published page loads correctly", () => {

app/client/cypress/e2e/Regression/ClientSide/OneClickBinding/PropertyControl_spec.ts

@@ -82,12 +82,6 @@ describe(
 
       agHelper.GetNClick(oneClickBindingLocator.datasourceQuerySelector(), 0);
 
-      agHelper.AssertElementExist(
-        oneClickBindingLocator.dropdownOptionSelector("Query1"),
-      );
-
-      propPane.ToggleJSMode("Table data");
-
       propPane.ValidatePropertyFieldValue("Table data", "{{Query1.data}}");
 
       propPane.AssertJSToggleState("Table data", "enabled");

app/client/cypress/support/Objects/FeatureFlags.ts

@@ -4,6 +4,8 @@ import produce from "immer";
 
 const defaultFlags = {
   release_side_by_side_ide_enabled: true,
+  ab_learnability_discoverability_collapse_all_except_data_enabled: false, // remove this flag from here when it's removed from code
+  rollout_remove_feature_walkthrough_enabled: false, // remove this flag from here when it's removed from code
 };
 
 export const featureFlagIntercept = (

app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts

@@ -67,7 +67,7 @@ export class LightModeTheme implements ColorModeTheme {
       bgNegative: this.bgNegative.to("sRGB").toString(),
       bgNegativeHover: this.bgNegativeHover.to("sRGB").toString(),
       bgNegativeActive: this.bgNegativeActive.to("sRGB").toString(),
-      bgNegativeSubtle: this.bgNegativeActive.to("sRGB").toString(),
+      bgNegativeSubtle: this.bgNegativeSubtle.to("sRGB").toString(),
       bgNegativeSubtleHover: this.bgNegativeSubtleHover.to("sRGB").toString(),
       bgNegativeSubtleActive: this.bgNegativeSubtleActive.to("sRGB").toString(),
       bgWarning: this.bgWarning.to("sRGB").toString(),

app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts

@@ -476,7 +476,7 @@ describe("bgNegativeSubtle color", () => {
     const { bgNegativeSubtle } = new LightModeTheme(
       "oklch(0.55 0.22 27)",
     ).getColors();
-    expect(bgNegativeSubtle).toEqual("rgb(80.074% 0% 19.209%)");
+    expect(bgNegativeSubtle).toEqual("rgb(100% 89.936% 89.52%)");
   });
 });
 

app/client/packages/design-system/widgets/src/components/Link/index.ts

@@ -0,0 +1 @@
+export * from "./src";

app/client/packages/design-system/widgets/src/components/Link/src/Link.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import { Text } from "../../Text";
+import type { LinkProps } from "./types";
+import styles from "./styles.module.css";
+
+export function Link(props: LinkProps) {
+  const { children, href, rel, target, ...rest } = props;
+
+  return (
+    <Text {...rest}>
+      <a className={styles.link} href={href} rel={rel} target={target}>
+        {children}
+      </a>
+    </Text>
+  );
+}

app/client/packages/design-system/widgets/src/components/Link/src/index.ts

@@ -0,0 +1 @@
+export * from "./Link";

app/client/packages/design-system/widgets/src/components/Link/src/styles.module.css

@@ -0,0 +1,10 @@
+.link {
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: 2px;
+
+  &:hover {
+    color: currentColor;
+    text-decoration-color: currentColor;
+  }
+}

app/client/packages/design-system/widgets/src/components/Link/src/types.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+
+import type { TextProps } from "../../Text";
+
+export interface LinkProps extends TextProps {
+  href?: string;
+  target?: ComponentProps<"a">["target"];
+  rel?: string;
+}

app/client/packages/design-system/widgets/src/components/Text/src/Text.tsx

@@ -19,7 +19,7 @@ const _Text = (props: TextProps, ref: Ref<HTMLParagraphElement>) => {
     isItalic = false,
     lineClamp,
     style,
-    textAlign = "left",
+    textAlign = "start",
     title,
     variant = "body",
     ...rest

app/client/packages/design-system/widgets/src/components/Text/src/index.ts

@@ -1 +1,2 @@
 export { Text } from "./Text";
+export type { TextProps } from "./types";

app/client/packages/design-system/widgets/src/components/Text/src/types.ts

@@ -29,7 +29,7 @@ export interface TextProps {
   /** Sets the horizontal alignment of the inline-level content inside a block element or table-cell box. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
    * @default left
    */
-  textAlign?: "left" | "center" | "right";
+  textAlign?: "start" | "center" | "end" | "left" | "right";
   /** Allows limiting of the contents of a block to the specified number of lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp). */
   lineClamp?: number;
   /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use style props instead. */

app/client/packages/design-system/widgets/src/index.ts

@@ -21,6 +21,7 @@ export * from "./components/ActionGroup";
 export * from "./components/ButtonGroup";
 export * from "./components/Select";
 export * from "./components/ContextualHelp";
+export * from "./components/Link";
 
 export * from "./utils";
 export * from "./styles";

app/client/src/ce/constants/tenantConstants.ts

@@ -6,6 +6,7 @@ export const tenantConfigConnection: string[] = [
   "showRolesAndGroups",
   "hideWatermark",
   "userSessionTimeoutInMinutes",
+  "isAtomicPushAllowed",
 ];
 
 export const RESTART_POLL_TIMEOUT = 2 * 150 * 1000;

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

@@ -74,11 +74,11 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   release_global_add_pane_enabled: false,
   ab_appsmith_ai_query: false,
   release_actions_redesign_enabled: false,
-  rollout_remove_feature_walkthrough_enabled: false,
-  rollout_js_enabled_one_click_binding_enabled: false,
+  rollout_remove_feature_walkthrough_enabled: true,
+  rollout_js_enabled_one_click_binding_enabled: true,
   rollout_side_by_side_enabled: false,
-  ab_learnability_ease_of_initial_use_enabled: false,
-  ab_learnability_discoverability_collapse_all_except_data_enabled: false,
+  ab_learnability_ease_of_initial_use_enabled: true,
+  ab_learnability_discoverability_collapse_all_except_data_enabled: true,
   release_layout_conversion_enabled: false,
 };
 

app/client/src/ce/pages/AdminSettings/config/general.tsx

@@ -121,6 +121,15 @@ export const APPSMITH_USER_SESSION_TIMEOUT_SETTING: Setting = {
   isDisabled: () => true,
 };
 
+export const APPSMITH_IS_ATOMIC_PUSH_ALLOWED: Setting = {
+  id: "isAtomicPushAllowed",
+  name: "isAtomicPushAllowed",
+  category: SettingCategories.GENERAL,
+  controlType: SettingTypes.CHECKBOX,
+  label: "Allow atomic pushes",
+  text: "Git operations on this tenant should attempt to perform pushes atomically",
+};
+
 export const APPSMITH_ALLOWED_FRAME_ANCESTORS_SETTING: Setting = {
   id: "APPSMITH_ALLOWED_FRAME_ANCESTORS",
   name: "APPSMITH_ALLOWED_FRAME_ANCESTORS",
@@ -201,6 +210,7 @@ export const config: AdminConfigType = {
     APPSMITH_SHOW_ROLES_AND_GROUPS_SETTING,
     APPSMITH_SINGLE_USER_PER_SESSION_SETTING,
     APPSMITH_USER_SESSION_TIMEOUT_SETTING,
+    APPSMITH_IS_ATOMIC_PUSH_ALLOWED,
     APPSMITH_ALLOWED_FRAME_ANCESTORS_SETTING,
   ],
 } as AdminConfigType;

app/client/src/components/editorComponents/ApiResponseView.test.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import ApiResponseView from "./ApiResponseView";
+import configureStore from "redux-mock-store";
+import { Provider } from "react-redux";
+import { ThemeProvider } from "styled-components";
+import { unitTestBaseMockStore } from "layoutSystems/common/dropTarget/unitTestUtils";
+import { lightTheme } from "selectors/themeSelectors";
+import { BrowserRouter as Router } from "react-router-dom";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
+import "@testing-library/jest-dom/extend-expect";
+
+jest.mock("./EntityBottomTabs", () => ({
+  __esModule: true,
+  default: () => <div />,
+}));
+
+const mockStore = configureStore([]);
+
+const storeState = {
+  ...unitTestBaseMockStore,
+  evaluations: {
+    tree: {},
+  },
+  ui: {
+    ...unitTestBaseMockStore.ui,
+    gitSync: {
+      branches: [],
+      fetchingBranches: false,
+      isDeploying: false,
+      protectedBranchesLoading: false,
+      protectedBranches: [],
+    },
+    editor: {
+      isPreviewMode: false,
+    },
+    users: {
+      featureFlag: {
+        data: {},
+        overriddenFlags: {},
+      },
+    },
+    ide: {
+      view: EditorViewMode.FullScreen,
+    },
+    debugger: {
+      context: {
+        errorCount: 0,
+      },
+    },
+    apiPane: {
+      debugger: {
+        open: true,
+        responseTabHeight: 200,
+        selectedTab: "response",
+      },
+    },
+  },
+};
+
+describe("ApiResponseView", () => {
+  let store: any;
+
+  beforeEach(() => {
+    store = mockStore(storeState);
+  });
+
+  it("the container should have class select-text to enable the selection of text for user", () => {
+    const { container } = render(
+      <Provider store={store}>
+        <ThemeProvider theme={lightTheme}>
+          <Router>
+            <ApiResponseView
+              apiName="Api1"
+              isRunning={false}
+              onRunClick={() => {}}
+              responseDataTypes={[]}
+              responseDisplayFormat={{ title: "JSON", value: "JSON" }}
+            />
+          </Router>
+        </ThemeProvider>
+      </Provider>,
+    );
+
+    expect(
+      container
+        .querySelector(".t--api-bottom-pane-container")
+        ?.classList.contains("select-text"),
+    ).toBe(true);
+  });
+});

app/client/src/components/editorComponents/ApiResponseView.tsx

@@ -540,7 +540,10 @@ function ApiResponseView(props: Props) {
   if (!open) return null;
 
   return (
-    <ResponseContainer className="t--api-bottom-pane-container" ref={panelRef}>
+    <ResponseContainer
+      className="t--api-bottom-pane-container select-text"
+      ref={panelRef}
+    >
       <Resizer
         initialHeight={responseTabHeight}
         onResizeComplete={(height: number) => {

app/client/src/components/editorComponents/CodeEditor/PeekOverlayPopup/PeekOverlayPopup.tsx

@@ -96,6 +96,11 @@ export function PeekOverlayPopUpContent(
     PEEK_OVERLAY_DELAY,
   );
 
+  const getLeftPosition = (position: DOMRect) => {
+    let left = position.right - 300;
+    if (left < 0) left = 8;
+    return left;
+  };
   return (
     <div
       className={`absolute ${zIndexLayers.PEEK_OVERLAY}`}
@@ -110,7 +115,7 @@ export function PeekOverlayPopUpContent(
         backgroundColor: "var(--ads-v2-color-bg)",
         boxShadow: "0px 0px 10px #0000001A", // color used from designs
         borderRadius: "var(--ads-v2-border-radius)",
-        left: `${props.position.left + props.position.width - 300}px`,
+        left: `${getLeftPosition(props.position)}px`,
         ...(props.position.top >= CONTAINER_MAX_HEIGHT_PX
           ? {
               bottom: `calc(100vh - ${props.position.top}px)`,

app/client/src/components/editorComponents/CodeEditor/index.tsx

@@ -648,6 +648,10 @@ class CodeEditor extends Component<Props, State> {
         prevProps.customErrors !== this.props.customErrors
       ) {
         this.lintCode(this.editor);
+      } else {
+        if (!!this.updateLintingCallback) {
+          this.updateLintingCallback(this.editor, this.annotations);
+        }
       }
       if (this.props.datasourceTableKeys !== prevProps.datasourceTableKeys) {
         sqlHint.setDatasourceTableKeys(this.props.datasourceTableKeys);
@@ -1436,12 +1440,12 @@ class CodeEditor extends Component<Props, State> {
       lintErrors.push(...this.props.customErrors);
     }
 
-    const annotations = getLintAnnotations(editor.getValue(), lintErrors, {
+    this.annotations = getLintAnnotations(editor.getValue(), lintErrors, {
       isJSObject,
       contextData,
     });
 
-    this.updateLintingCallback(editor, annotations);
+    this.updateLintingCallback(editor, this.annotations);
   }
 
   static updateMarkings = (

app/client/src/components/editorComponents/JSResponseView.test.tsx

@@ -141,4 +141,36 @@ describe("JSResponseView", () => {
     // nothing should be rendered here since the implementation for component is in EE code
     expect(queryByText(document.body, EMPTY_RESPONSE_LAST_HALF())).toBeNull();
   });
+
+  it("the container should have class select-text to enable the selection of text for user", () => {
+    // mock the return value of isBrowserExecutionAllowed
+    (
+      actionExecutionUtils.isBrowserExecutionAllowed as jest.Mock
+    ).mockImplementation(() => false);
+
+    const { container } = render(
+      <Provider store={store}>
+        <ThemeProvider theme={lightTheme}>
+          <Router>
+            <JSResponseView
+              currentFunction={null}
+              disabled={false}
+              errors={[]}
+              isLoading={false}
+              jsCollectionData={collectionData}
+              onButtonClick={function (): void {
+                throw new Error("Function not implemented.");
+              }}
+            />
+          </Router>
+        </ThemeProvider>
+      </Provider>,
+    );
+
+    expect(
+      container
+        .querySelector(".t--js-editor-bottom-pane-container")
+        ?.classList.contains("select-text"),
+    ).toBe(true);
+  });
 });

app/client/src/components/editorComponents/JSResponseView.tsx

@@ -336,7 +336,7 @@ function JSResponseView(props: Props) {
   // Do not render if header tab is selected in the bottom bar.
   return open && selectedTab ? (
     <ResponseContainer
-      className="t--js-editor-bottom-pane-container"
+      className="t--js-editor-bottom-pane-container select-text"
       ref={panelRef}
     >
       <Resizer