Merge branch 'appsmithorg:release' into release

.github/workflows/client-build.yml

@@ -206,6 +206,7 @@ jobs:
           git config --global user.name "$gituser"
           git clone https://[email protected]/appsmithorg/cibuildcache.git
           git lfs install
+          git lfs migrate import --everything --yes
           if [ "$reponame" = "appsmith" ]; then export repodir="CE"; fi
           if [ "$reponame" = "appsmith-ee" ]; then export repodir="EE"; fi
           cd cibuildcache/$repodir/release/client

.github/workflows/server-build.yml

@@ -338,6 +338,7 @@ jobs:
           git config --global user.name "$gituser"
           git clone https://[email protected]/appsmithorg/cibuildcache.git
           git lfs install
+          git lfs migrate import --everything --yes
           if [ "$reponame" = "appsmith" ]; then export repodir="CE"; fi
           if [ "$reponame" = "appsmith-ee" ]; then export repodir="EE"; fi
           cd cibuildcache/$repodir/release/server

.github/workflows/test-vulnerabilities-data.yml

@@ -1,4 +1,7 @@
-name: Run Vulnerability Data Script with Parameters and Update PR
+name: Run Vulnerability 
+
+run-name: >
+  On Branch: ${{ github.ref_name }} with Image: ${{ inputs.image_name || 'appsmith/appsmith-ce:release' }}
 
 on:
   workflow_dispatch:

README.md

@@ -15,6 +15,12 @@
 <a href="https://docs.appsmith.com/getting-started/setup/installation-guides/docker?utm_source=github&utm_medium=organic&utm_campaign=readme&utm_content=badge">
 <img src="https://img.shields.io/docker/pulls/appsmith/appsmith-ce?color=4591df&style=for-the-badge">
 </a>
+<a href="https://www.youtube.com/@appsmith/?sub_confirmation=1" target="_blank">
+    <img alt="YouTube Channel Subscribers" src="https://img.shields.io/youtube/channel/subscribers/UCMYwzPG2txS8nR5ZbNY6T5g?color=00FF0&style=for-the-badge">
+</a>
+<a href="https://www.youtube.com/@appsmith/?sub_confirmation=1" target="_blank">
+    <img alt="YouTube Channel Views" src="https://img.shields.io/youtube/channel/views/UCMYwzPG2txS8nR5ZbNY6T5g?color=00FF0&style=for-the-badge">
+</a>
 </p>
 
 ---

app/client/cypress/e2e/Regression/ClientSide/BugTests/DatasourceSchema_spec.ts

@@ -79,7 +79,7 @@ describe(
           "public.users",
         );
         dataSources.SelectTableFromPreviewSchemaList("public.users");
-        dataSources.VerifyColumnSchemaOnQueryEditor("id", 1);
+        dataSources.VerifyColumnSchemaOnQueryEditor("id", 0);
       },
     );
 

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

@@ -265,7 +265,7 @@ export class DataSources {
     "')]/ancestor::div[@class='form-config-top']/following-sibling::div//div[contains(@class, 'rc-select-multiple')]";
   private _datasourceSchemaRefreshBtn = ".datasourceStructure-refresh";
   private _datasourceStructureHeader = ".datasourceStructure-header";
-  _datasourceSchemaColumn = ".t--datasource-column";
+  _datasourceSchemaColumn = ".t--datasource-column .t--field-name";
   _datasourceStructureSearchInput = ".datasourceStructure-search input";
   _jsModeSortingControl = ".t--actionConfiguration\\.formData\\.sortBy\\.data";
   public _queryEditorCollapsibleIcon = ".collapsible-icon";
@@ -296,7 +296,7 @@ export class DataSources {
   _imgFireStoreLogo = "//img[contains(@src, 'firestore.svg')]";
   _dsVirtuosoElement = `div .t--schema-virtuoso-container`;
   private _dsVirtuosoList = `[data-test-id="virtuoso-item-list"]`;
-  private _dsSchemaContainer = `[data-testid="datasource-schema-container"]`;
+  private _dsSchemaContainer = `[data-testid="t--datasource-schema-container"]`;
   private _dsVirtuosoElementTable = (targetTableName: string) =>
     `${this._dsSchemaEntityItem}[data-testid='t--entity-item-${targetTableName}']`;
   private _dsPageTabListItem = (buttonText: string) =>

app/client/packages/design-system/ads/src/Templates/EntityExplorer/ListWithHeader.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { ListHeaderContainer } from "./styles";
+import { Text } from "../../Text";
+import { Flex } from "../../Flex";
+
+interface Props {
+  headerText: string;
+  headerControls?: React.ReactNode;
+  maxHeight?: string;
+  headerClassName?: string;
+  children: React.ReactNode | React.ReactNode[];
+}
+
+export const ListWithHeader = (props: Props) => {
+  return (
+    <Flex
+      flexDirection="column"
+      justifyContent="center"
+      maxHeight={props.maxHeight}
+      overflow="hidden"
+    >
+      <ListHeaderContainer className={props.headerClassName}>
+        <Text kind="heading-xs">{props.headerText}</Text>
+        {props.headerControls}
+      </ListHeaderContainer>
+      <Flex
+        alignItems="center"
+        flex="1"
+        flexDirection="column"
+        overflow="auto"
+        px="spaces-2"
+        width="100%"
+      >
+        {props.children}
+      </Flex>
+    </Flex>
+  );
+};

app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts

@@ -0,0 +1,2 @@
+export { ListItemContainer, ListHeaderContainer } from "./styles";
+export { ListWithHeader } from "./ListWithHeader";

app/client/packages/design-system/ads/src/Templates/EntityExplorer/styles.ts

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+export const ListItemContainer = styled.div`
+  width: 100%;
+
+  & .t--entity-item {
+    grid-template-columns: 0 auto 1fr auto auto auto auto auto;
+    height: 32px;
+
+    & .t--entity-name {
+      padding-left: var(--ads-v2-spaces-3);
+    }
+  }
+`;
+
+export const ListHeaderContainer = styled.div`
+  padding: var(--ads-v2-spaces-3);
+  padding-right: var(--ads-v2-spaces-2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+
+  span {
+    line-height: 20px;
+  }
+`;

app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/HeaderSwitcher.styles.ts

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import { PopoverContent } from "../../../Popover";
+
+export const SwitchTrigger = styled.div<{ active: boolean }>`
+  display: flex;
+  border-radius: var(--ads-v2-border-radius);
+  background-color: ${(props) =>
+    props.active ? `var(--ads-v2-color-bg-subtle)` : "unset"};
+  cursor: pointer;
+  padding: var(--ads-v2-spaces-2);
+
+  :hover {
+    background-color: var(--ads-v2-color-bg-subtle);
+  }
+`;
+
+export const ContentContainer = styled(PopoverContent)`
+  padding: 0;
+  padding-bottom: 0.25em;
+`;

app/client/src/IDE/Components/HeaderEditorSwitcher.test.tsx → app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/HeaderSwitcher.test.tsx

@@ -1,77 +1,78 @@
 import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import HeaderEditorSwitcher from "./HeaderEditorSwitcher";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { IDEHeaderSwitcher } from "./IDEHeaderSwitcher";
 import "@testing-library/jest-dom";
 
-describe("HeaderEditorSwitcher", () => {
+describe("HeaderSwitcher", () => {
   const mockOnClick = jest.fn();
+  const mockSetActive = jest.fn();
   const defaultProps = {
     prefix: "Prefix",
     title: "Title",
     titleTestId: "titleTestId",
     active: false,
     onClick: mockOnClick,
+    setActive: mockSetActive,
+    children: <span>Test</span>,
   };
 
   it("renders with correct props", () => {
-    const { getByText } = render(<HeaderEditorSwitcher {...defaultProps} />);
+    render(<IDEHeaderSwitcher {...defaultProps} />);
 
+    // eslint-disable-next-line testing-library/no-node-access
     const testIdElement = document.getElementsByClassName(
       defaultProps.titleTestId,
     );
 
-    expect(getByText("Prefix /")).toBeInTheDocument();
-    expect(getByText(defaultProps.title)).toBeInTheDocument();
+    expect(screen.getByText("Prefix /")).toBeInTheDocument();
+    expect(screen.getByText(defaultProps.title)).toBeInTheDocument();
     expect(testIdElement).toBeDefined();
   });
 
   it("renders active state correctly", () => {
-    const { getByText } = render(
-      <HeaderEditorSwitcher {...defaultProps} active />,
-    );
+    render(<IDEHeaderSwitcher {...defaultProps} active />);
 
-    expect(getByText("Prefix /")).toHaveStyle(
+    expect(screen.getByText("Prefix /")).toHaveStyle(
       "background-color: var(--ads-v2-color-bg-subtle)",
     );
   });
 
   it("calls onClick handler when clicked", () => {
-    const { getByText } = render(<HeaderEditorSwitcher {...defaultProps} />);
+    render(<IDEHeaderSwitcher {...defaultProps} />);
 
-    fireEvent.click(getByText("Title"));
+    fireEvent.click(screen.getByText("Title"));
 
     expect(mockOnClick).toHaveBeenCalled();
   });
 
   it("forwards ref correctly", () => {
-    const ref = React.createRef();
+    const ref = React.createRef<HTMLDivElement>();
 
-    render(<HeaderEditorSwitcher {...defaultProps} ref={ref} />);
+    render(<IDEHeaderSwitcher {...defaultProps} ref={ref} />);
     expect(ref.current).toBeTruthy();
   });
 
   it("does not crash when onClick is not provided", () => {
-    const { getByText } = render(
-      <HeaderEditorSwitcher {...defaultProps} onClick={undefined} />,
-    );
+    render(<IDEHeaderSwitcher {...defaultProps} onClick={undefined} />);
 
-    fireEvent.click(getByText("Title")); // Should not throw error
+    fireEvent.click(screen.getByText("Title")); // Should not throw error
   });
 
   it("does not show separator and applies different inactive color to icon", () => {
-    const ref = React.createRef();
-    const { container, getByTestId } = render(
-      <HeaderEditorSwitcher
+    const ref = React.createRef<HTMLDivElement>();
+    const { container } = render(
+      <IDEHeaderSwitcher
         {...defaultProps}
         data-testid="root-div"
         ref={ref}
         title={undefined}
       />,
     );
 
+    // eslint-disable-next-line testing-library/no-container,testing-library/no-node-access
     const icon = container.querySelector(".remixicon-icon"); // Get chevron icon
 
-    expect(getByTestId("root-div")).toHaveTextContent("Prefix");
+    expect(screen.getByTestId("root-div")).toHaveTextContent("Prefix");
     expect(icon).toHaveAttribute(
       "fill",
       "var(--ads-v2-colors-content-label-inactive-fg)",
@@ -83,16 +84,20 @@ describe("HeaderEditorSwitcher", () => {
     const className = "custom-class";
 
     const { container } = render(
-      <HeaderEditorSwitcher
+      <IDEHeaderSwitcher
         active
         className={className}
         data-testid={testId} // Additional prop
         prefix="Prefix"
+        setActive={mockSetActive}
         title="Title"
         titleTestId="titleTestId"
-      />,
+      >
+        <span>Test</span>
+      </IDEHeaderSwitcher>,
     );
 
+    // eslint-disable-next-line testing-library/no-container,testing-library/no-node-access
     const firstDiv = container.querySelector("div"); // Get the first div element
     const classNames = firstDiv?.getAttribute("class")?.split(" ") || [];
 

app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/IDEHeaderSwitcher.tsx

@@ -0,0 +1,88 @@
+import React, { type ForwardedRef, useCallback } from "react";
+import { Flex } from "../../../Flex";
+import { Icon } from "../../../Icon";
+import { Popover, PopoverTrigger } from "../../../Popover";
+import { Text } from "../../../Text";
+import * as Styled from "./HeaderSwitcher.styles";
+
+interface Props {
+  prefix: string;
+  title?: string;
+  titleTestId: string;
+  active: boolean;
+  setActive: (active: boolean) => void;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const IDEHeaderSwitcher = React.forwardRef(
+  (props: Props, ref: ForwardedRef<HTMLDivElement>) => {
+    const {
+      active,
+      children,
+      className,
+      onClick,
+      prefix,
+      setActive,
+      title,
+      titleTestId,
+      ...rest
+    } = props;
+
+    const separator = title ? " /" : "";
+
+    const closeSwitcher = useCallback(() => {
+      return setActive(false);
+    }, [setActive]);
+
+    return (
+      <Popover onOpenChange={setActive} open={active}>
+        <PopoverTrigger>
+          <Styled.SwitchTrigger
+            active={active}
+            className={`flex align-center items-center justify-center ${className}`}
+            data-testid={titleTestId}
+            onClick={onClick}
+            ref={ref}
+            {...rest}
+          >
+            <Text
+              color="var(--ads-v2-colors-content-label-inactive-fg)"
+              kind="body-m"
+            >
+              {prefix + separator}
+            </Text>
+            <Flex
+              alignItems="center"
+              className={titleTestId}
+              data-active={active}
+              gap="spaces-1"
+              height="100%"
+              justifyContent="center"
+              paddingLeft="spaces-2"
+            >
+              <Text isBold kind="body-m">
+                {title}
+              </Text>
+              <Icon
+                color={
+                  title
+                    ? undefined
+                    : "var(--ads-v2-colors-content-label-inactive-fg)"
+                }
+                name={active ? "arrow-up-s-line" : "arrow-down-s-line"}
+                size="md"
+              />
+            </Flex>
+          </Styled.SwitchTrigger>
+        </PopoverTrigger>
+        <Styled.ContentContainer align="start" onEscapeKeyDown={closeSwitcher}>
+          {children}
+        </Styled.ContentContainer>
+      </Popover>
+    );
+  },
+);
+
+IDEHeaderSwitcher.displayName = "IDEHeaderSwitcher";

app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/index.ts

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

app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.constants.ts

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