diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/ListWithHeader.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/ListWithHeader.tsx
new file mode 100644
index 00000000000..2f7f3041c58
--- /dev/null
+++ b/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 (
+
+
+ {props.headerText}
+ {props.headerControls}
+
+
+ {props.children}
+
+
+ );
+};
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts
new file mode 100644
index 00000000000..cd175bbdf5e
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts
@@ -0,0 +1,2 @@
+export { ListItemContainer, ListHeaderContainer } from "./styles";
+export { ListWithHeader } from "./ListWithHeader";
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/styles.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/styles.ts
new file mode 100644
index 00000000000..df4b639c91e
--- /dev/null
+++ b/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;
+ }
+`;
diff --git a/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/HeaderSwitcher.styles.ts b/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/HeaderSwitcher.styles.ts
new file mode 100644
index 00000000000..06309d2d20c
--- /dev/null
+++ b/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;
+`;
diff --git a/app/client/src/IDE/Components/HeaderEditorSwitcher.test.tsx b/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/HeaderSwitcher.test.tsx
similarity index 59%
rename from app/client/src/IDE/Components/HeaderEditorSwitcher.test.tsx
rename to app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/HeaderSwitcher.test.tsx
index e9bb4973882..d248d3f518b 100644
--- a/app/client/src/IDE/Components/HeaderEditorSwitcher.test.tsx
+++ b/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/HeaderSwitcher.test.tsx
@@ -1,67 +1,67 @@
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: Test,
};
it("renders with correct props", () => {
- const { getByText } = render();
+ render();
+ // 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(
- ,
- );
+ render();
- 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();
+ render();
- fireEvent.click(getByText("Title"));
+ fireEvent.click(screen.getByText("Title"));
expect(mockOnClick).toHaveBeenCalled();
});
it("forwards ref correctly", () => {
- const ref = React.createRef();
+ const ref = React.createRef();
- render();
+ render();
expect(ref.current).toBeTruthy();
});
it("does not crash when onClick is not provided", () => {
- const { getByText } = render(
- ,
- );
+ render();
- 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(
- ();
+ const { container } = render(
+ {
/>,
);
+ // 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(
- ,
+ >
+ Test
+ ,
);
+ // 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(" ") || [];
diff --git a/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/IDEHeaderSwitcher.tsx b/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/IDEHeaderSwitcher.tsx
new file mode 100644
index 00000000000..22928a5f499
--- /dev/null
+++ b/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;
+ className?: string;
+ children: React.ReactNode;
+}
+
+export const IDEHeaderSwitcher = React.forwardRef(
+ (props: Props, ref: ForwardedRef) => {
+ const {
+ active,
+ children,
+ className,
+ onClick,
+ prefix,
+ setActive,
+ title,
+ titleTestId,
+ ...rest
+ } = props;
+
+ const separator = title ? " /" : "";
+
+ const closeSwitcher = useCallback(() => {
+ return setActive(false);
+ }, [setActive]);
+
+ return (
+
+
+
+
+ {prefix + separator}
+
+
+
+ {title}
+
+
+
+
+
+
+ {children}
+
+
+ );
+ },
+);
+
+IDEHeaderSwitcher.displayName = "IDEHeaderSwitcher";
diff --git a/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/index.ts b/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/index.ts
new file mode 100644
index 00000000000..1580b3834c6
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/index.ts
@@ -0,0 +1 @@
+export { IDEHeaderSwitcher } from "./IDEHeaderSwitcher";
diff --git a/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.constants.ts b/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.constants.ts
new file mode 100644
index 00000000000..6307b9c5b69
--- /dev/null
+++ b/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;
diff --git a/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.mdx b/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.mdx
new file mode 100644
index 00000000000..37c3900615a
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.mdx
@@ -0,0 +1,28 @@
+import { Canvas, Meta } from "@storybook/blocks";
+import * as IDEHeaderStories from "./IDEHeader.stories";
+
+
+
+# IDEHeader
+
+IDEHeader sets the stage for the IDE experience. It is the topmost section of the IDE that contains the Appsmith logo, the app name, and the user profile.
+
+
+
+## Anatomy
+
+### Left Section options
+
+The local title
+
+#### Header Title
+
+A title that is specific to the app state. It is displayed on the left side of the header.
+
+
+
+#### Header Dropdown
+
+A dropdown that allows the user to switch between different pages.
+
+
diff --git a/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx b/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx
new file mode 100644
index 00000000000..6c709080dd5
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx
@@ -0,0 +1,109 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import { IDEHeader } from "./IDEHeader";
+import { IDEHeaderTitle } from "./IDEHeaderTitle";
+import { IDEHeaderSwitcher } from "./HeaderSwitcher";
+import { noop } from "lodash";
+import { Icon } from "../../Icon";
+import { Button } from "../../Button";
+import { List } from "../../List";
+import { Flex } from "../../Flex";
+import { Text } from "../../Text";
+import { ListHeaderContainer } from "../EntityExplorer/styles";
+
+const meta: Meta = {
+ title: "ADS/Templates/IDEHeader",
+ component: IDEHeader,
+ parameters: {
+ layout: "fullscreen",
+ },
+ decorators: [
+ (Story: () => React.ReactNode) => (
+ {Story()}
+ ),
+ ],
+};
+
+export default meta;
+
+export const Default = () => (
+
+ }>
+ Left Content
+
+
+ Center Content
+
+
+ Right Content
+
+
+);
+
+export const WithHeaderTitle = () => {
+ return (
+
+ }>
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export const WithHeaderDropdown = () => {
+ const [open, setOpen] = React.useState(false);
+
+ return (
+
+ }>
+
+
+
+ Pages
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.tsx b/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.tsx
new file mode 100644
index 00000000000..1b99915945d
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.tsx
@@ -0,0 +1,80 @@
+import React, { type PropsWithChildren } from "react";
+import { Flex } from "../../Flex";
+import { IDE_HEADER_HEIGHT, LOGO_WIDTH } from "./IDEHeader.constants";
+
+interface ChildrenProps {
+ children: React.ReactNode | React.ReactNode[];
+}
+
+const Left = (props: PropsWithChildren<{ logo: React.ReactNode }>) => {
+ return (
+
+
+ {props.logo}
+
+ {props.children}
+
+ );
+};
+
+const Center = (props: ChildrenProps) => {
+ return (
+
+ {props.children}
+
+ );
+};
+
+const Right = (props: ChildrenProps) => {
+ return (
+
+ {props.children}
+
+ );
+};
+
+export const IDEHeader = (props: ChildrenProps) => {
+ return (
+
+ {props.children}
+
+ );
+};
+
+IDEHeader.Left = Left;
+IDEHeader.Center = Center;
+IDEHeader.Right = Right;
diff --git a/app/client/src/IDE/Components/HeaderTitle.tsx b/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeaderTitle.tsx
similarity index 68%
rename from app/client/src/IDE/Components/HeaderTitle.tsx
rename to app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeaderTitle.tsx
index 7423cb338ed..cfa626f9591 100644
--- a/app/client/src/IDE/Components/HeaderTitle.tsx
+++ b/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeaderTitle.tsx
@@ -1,10 +1,11 @@
import React from "react";
-import { Flex, Text } from "@appsmith/ads";
+import { Flex } from "../../Flex";
+import { Text } from "../../Text";
/**
* Handy little styled component that can be used to render the title in the IDEHeader component
* **/
-const HeaderTitle = ({ title }: { title: string }) => {
+export const IDEHeaderTitle = ({ title }: { title: string }) => {
return (
@@ -13,5 +14,3 @@ const HeaderTitle = ({ title }: { title: string }) => {
);
};
-
-export default HeaderTitle;
diff --git a/app/client/packages/design-system/ads/src/Templates/IDEHeader/index.ts b/app/client/packages/design-system/ads/src/Templates/IDEHeader/index.ts
new file mode 100644
index 00000000000..6ea1fd289a1
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/IDEHeader/index.ts
@@ -0,0 +1,19 @@
+/**
+ * The IDEHeader gets exported with 3 layout subsections.
+ * IDEHeader.Left, IDEHeader.Center, IDEHeader.Right
+ * 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 { IDEHeader } from "./IDEHeader";
+export { IDE_HEADER_HEIGHT, LOGO_WIDTH } from "./IDEHeader.constants";
+
+/**
+ * IDEHeaderSwitcher can be used for a trigger component to show a dropdown for pages, modules
+ * or any list of elements in the header E.g., Pages / Page 1
+ */
+export { IDEHeaderSwitcher } from "./HeaderSwitcher";
+
+/**
+ * IDEHeaderTitle is a small text styled wrapper that is suitable to be used inside IDEHeader
+ */
+export { IDEHeaderTitle } from "./IDEHeaderTitle";
diff --git a/app/client/packages/design-system/ads/src/Templates/index.ts b/app/client/packages/design-system/ads/src/Templates/index.ts
new file mode 100644
index 00000000000..28319281237
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/index.ts
@@ -0,0 +1,2 @@
+export * from "./IDEHeader";
+export * from "./EntityExplorer";
diff --git a/app/client/packages/design-system/ads/src/index.ts b/app/client/packages/design-system/ads/src/index.ts
index 173d119074e..4afae937fda 100644
--- a/app/client/packages/design-system/ads/src/index.ts
+++ b/app/client/packages/design-system/ads/src/index.ts
@@ -36,3 +36,4 @@ export * from "./Toast";
export * from "./ToggleButton";
export * from "./Tooltip";
export * from "./ToggleButtonGroup";
+export * from "./Templates";
diff --git a/app/client/src/IDE/Components/HeaderDropdown.test.tsx b/app/client/src/IDE/Components/HeaderDropdown.test.tsx
deleted file mode 100644
index 647e2e7be5d..00000000000
--- a/app/client/src/IDE/Components/HeaderDropdown.test.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import HeaderDropdown from "./HeaderDropdown";
-import "@testing-library/jest-dom";
-
-describe("HeaderDropdown", () => {
- it("renders children components correctly", () => {
- const { getByText } = render(
-
-
- Header
-
-
- Body
-
- ,
- );
-
- expect(getByText("Header")).toBeInTheDocument();
- expect(getByText("Body")).toBeInTheDocument();
- });
-
- it("applies custom className to the header", () => {
- const customClass = "my-custom-class";
- const { container } = render(
-
-
- Header
-
-
- Body
-
- ,
- );
-
- const headerElement = container.querySelector(`.${customClass}`);
-
- expect(headerElement).toBeInTheDocument();
- });
-});
diff --git a/app/client/src/IDE/Components/HeaderDropdown.tsx b/app/client/src/IDE/Components/HeaderDropdown.tsx
deleted file mode 100644
index 28777fc3f80..00000000000
--- a/app/client/src/IDE/Components/HeaderDropdown.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Flex } from "@appsmith/ads";
-import React from "react";
-import styled from "styled-components";
-
-const Container = styled(Flex)`
- & .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);
- }
- }
-`;
-
-const HeaderWrapper = 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;
- }
-`;
-
-interface EditorHeaderDropdown {
- children: React.ReactNode;
-}
-
-interface EditorHeaderDropdownHeader {
- children: React.ReactNode;
- className?: string;
-}
-
-interface EditorHeaderDropdownBody {
- children: React.ReactNode;
-}
-
-function EditorHeaderDropdown({ children }: EditorHeaderDropdown) {
- return (
-
- {children}
-
- );
-}
-
-function EditorHeaderDropdownHeader({
- children,
- className,
-}: EditorHeaderDropdownHeader) {
- return {children};
-}
-
-function EditorHeaderDropdownBody({ children }: EditorHeaderDropdownBody) {
- return (
-
- {children}
-
- );
-}
-
-EditorHeaderDropdown.Header = EditorHeaderDropdownHeader;
-EditorHeaderDropdown.Body = EditorHeaderDropdownBody;
-
-export default EditorHeaderDropdown;
diff --git a/app/client/src/IDE/Components/HeaderEditorSwitcher.tsx b/app/client/src/IDE/Components/HeaderEditorSwitcher.tsx
deleted file mode 100644
index a7baa074426..00000000000
--- a/app/client/src/IDE/Components/HeaderEditorSwitcher.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Flex, Icon, Text } from "@appsmith/ads";
-import React from "react";
-import styled from "styled-components";
-
-interface HeaderEditorSwitcherProps {
- prefix: string;
- title?: string;
- titleTestId: string;
- active: boolean;
- onClick?: React.MouseEventHandler;
- className?: string;
-}
-
-const SwitchTrigger = styled.div<{ active: boolean }>`
- 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);
- }
-`;
-
-const HeaderEditorSwitcher = React.forwardRef(
- // TODO: Fix this the next time the file is edited
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (props: HeaderEditorSwitcherProps, ref: any) => {
- const { active, className, prefix, title, titleTestId, ...rest } = props;
-
- const separator = title ? " /" : "";
-
- return (
-
-
- {prefix + separator}
-
-
-
- {title}
-
-
-
-
- );
- },
-);
-
-export default HeaderEditorSwitcher;
diff --git a/app/client/src/IDE/index.ts b/app/client/src/IDE/index.ts
index cc69383fab6..a151c77f1b7 100644
--- a/app/client/src/IDE/index.ts
+++ b/app/client/src/IDE/index.ts
@@ -3,15 +3,6 @@
Components that are part of the main structure of the IDE experience
====================================================**/
-/**
- * The IDEHeader gets exported with 3 layout subsections.
- * IDEHeader.Left, IDEHeader.Center, IDEHeader.Right
- * 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";
-
/**
* The IDEToolbar gets exported with 2 layout subsections.
* IDEToolbar.Left and IDEToolbar.Right
@@ -25,22 +16,6 @@ export { default as IDEToolbar } from "./Structure/Toolbar";
Components that are smaller UI abstractions for easy use and standardisation within the IDE
=======================================================**/
-/**
- * IDEHeaderTitle is a small text styled wrapper that is suitable to be used inside IDEHeader
- */
-export { default as IDEHeaderTitle } from "./Components/HeaderTitle";
-/**
- * IDEHeaderEditorSwitcher can be used for a trigger component to show a dropdown for pages, modules
- * or any list of elements in the header E.g., Pages / Page 1
- */
-export { default as IDEHeaderEditorSwitcher } from "./Components/HeaderEditorSwitcher";
-/**
- * The IDEHeaderDropdown gets exported with 2 layout subsections.
- * IDEHeaderDropdown.Header, IDEHeaderDropdown.Body
- * 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 { default as IDEHeaderDropdown } from "./Components/HeaderDropdown";
/**
* IDEBottomView is a versatile view meant to be at the bottom of the screen.
* It is resizable and can be hidden or collapsed based on the behavior configured
diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
index f525c40f0d3..b2953d35333 100644
--- a/app/client/src/ce/constants/messages.ts
+++ b/app/client/src/ce/constants/messages.ts
@@ -2475,7 +2475,8 @@ export const ADD_PAGE_FROM_TEMPLATE_MODAL = {
export const HEADER_TITLES = {
DATA: () => "Data",
- EDITOR: () => "Pages",
+ PAGES: () => "Pages",
+ EDITOR: () => "Editor",
SETTINGS: () => "Settings",
LIBRARIES: () => "Libraries",
};
diff --git a/app/client/src/pages/AdminSettings/components.tsx b/app/client/src/pages/AdminSettings/components.tsx
index d2ef4247585..791cdf4fb3c 100644
--- a/app/client/src/pages/AdminSettings/components.tsx
+++ b/app/client/src/pages/AdminSettings/components.tsx
@@ -1,7 +1,6 @@
import styled from "styled-components";
import { Classes } from "@blueprintjs/core";
-import { Link, Text } from "@appsmith/ads";
-import { IDE_HEADER_HEIGHT } from "IDE";
+import { Link, Text, IDE_HEADER_HEIGHT } from "@appsmith/ads";
export const Wrapper = styled.div`
flex-basis: calc(100% - ${(props) => props.theme.homePage.leftPane.width}px);
diff --git a/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx b/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx
index 95903b915ca..3b6b80aa732 100644
--- a/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx
+++ b/app/client/src/pages/AppViewer/Navigation/Sidebar.tsx
@@ -34,7 +34,7 @@ import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettings
import NavigationLogo from "ee/pages/AppViewer/NavigationLogo";
import MenuItemContainer from "./components/MenuItemContainer";
import BackToAppsButton from "./components/BackToAppsButton";
-import { IDE_HEADER_HEIGHT } from "IDE";
+import { IDE_HEADER_HEIGHT } from "@appsmith/ads";
import { BOTTOM_BAR_HEIGHT } from "components/BottomBar/constants";
interface SidebarProps {
diff --git a/app/client/src/pages/Editor/EditorName/components.ts b/app/client/src/pages/Editor/EditorName/components.ts
index 8aaa930f461..a1499635bd7 100644
--- a/app/client/src/pages/Editor/EditorName/components.ts
+++ b/app/client/src/pages/Editor/EditorName/components.ts
@@ -1,8 +1,7 @@
import styled from "styled-components";
import { Classes } from "@blueprintjs/core";
import { getTypographyByKey } from "@appsmith/ads-old";
-import { Icon } from "@appsmith/ads";
-import { IDE_HEADER_HEIGHT } from "IDE";
+import { Icon, IDE_HEADER_HEIGHT } from "@appsmith/ads";
export const Container = styled.div`
display: flex;
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/PagesSection.tsx b/app/client/src/pages/Editor/IDE/EditorPane/PagesSection.tsx
index 0b94703f253..b1ecd0dd7ed 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/PagesSection.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/PagesSection.tsx
@@ -1,5 +1,5 @@
import React, { useCallback, useMemo, useState } from "react";
-import { Text } from "@appsmith/ads";
+import { ListItemContainer, ListWithHeader } from "@appsmith/ads";
import { useDispatch, useSelector } from "react-redux";
import { useLocation } from "react-router";
@@ -18,7 +18,6 @@ import { getNextEntityName } from "utils/AppsmithUtils";
import { getCurrentWorkspaceId } from "ee/selectors/selectedWorkspaceSelectors";
import { getInstanceId } from "ee/selectors/tenantSelectors";
import { PageElement } from "pages/Editor/IDE/EditorPane/components/PageElement";
-import { IDEHeaderDropdown } from "IDE";
import { PAGE_ENTITY_NAME } from "ee/constants/messages";
const PagesSection = ({ onItemSelected }: { onItemSelected: () => void }) => {
@@ -50,35 +49,50 @@ const PagesSection = ({ onItemSelected }: { onItemSelected: () => void }) => {
dispatch(
createNewPageFromEntities(applicationId, name, workspaceId, instanceId),
);
- }, [dispatch, pages, applicationId]);
+ }, [pages, dispatch, applicationId, workspaceId, instanceId]);
const onMenuClose = useCallback(() => setIsMenuOpen(false), [setIsMenuOpen]);
const pageElements = useMemo(
() =>
pages.map((page) => (
-
+
+
+
)),
- [pages, location.pathname],
+ [pages, location.pathname, onItemSelected],
);
+ const createPageContextMenu = useMemo(() => {
+ if (!canCreatePages) return null;
+
+ return (
+
+ );
+ }, [
+ canCreatePages,
+ createPageCallback,
+ isMenuOpen,
+ onItemSelected,
+ onMenuClose,
+ ]);
+
return (
-
-
- {`All Pages (${pages.length})`}
- {canCreatePages ? (
-
- ) : null}
-
- {pageElements}
-
+
+ {pageElements}
+
);
};
diff --git a/app/client/src/pages/Editor/IDE/Header/EditorTitle.tsx b/app/client/src/pages/Editor/IDE/Header/EditorTitle.tsx
index 47ef1030766..327b6f72ed3 100644
--- a/app/client/src/pages/Editor/IDE/Header/EditorTitle.tsx
+++ b/app/client/src/pages/Editor/IDE/Header/EditorTitle.tsx
@@ -1,35 +1,34 @@
-import React, { useState } from "react";
-import { Popover, PopoverTrigger, PopoverContent } from "@appsmith/ads";
+import React from "react";
+import { IDEHeaderSwitcher } from "@appsmith/ads";
import { createMessage, HEADER_TITLES } from "ee/constants/messages";
import { PagesSection } from "../EditorPane/PagesSection";
-import { IDEHeaderEditorSwitcher } from "IDE";
+import { useBoolean } from "usehooks-ts";
+import { useSelector } from "react-redux";
+import { getCurrentPageId, getPageById } from "selectors/editorSelectors";
-const EditorTitle = ({ title }: { title: string }) => {
- const [active, setActive] = useState(false);
+const EditorTitle = () => {
+ const {
+ setFalse: setMenuClose,
+ setValue: setMenuState,
+ value: isMenuOpen,
+ } = useBoolean(false);
- const closeMenu = () => {
- setActive(false);
- };
+ const pageId = useSelector(getCurrentPageId) as string;
+ const currentPage = useSelector(getPageById(pageId));
+
+ if (!currentPage) return null;
return (
-
-
-
-
-
-
-
-
+
+
+
);
};
diff --git a/app/client/src/pages/Editor/IDE/Header/index.tsx b/app/client/src/pages/Editor/IDE/Header/index.tsx
index ee4365196a5..8a801693970 100644
--- a/app/client/src/pages/Editor/IDE/Header/index.tsx
+++ b/app/client/src/pages/Editor/IDE/Header/index.tsx
@@ -13,6 +13,8 @@ import {
TabPanel,
Button,
Link,
+ IDEHeader,
+ IDEHeaderTitle,
} from "@appsmith/ads";
import { useDispatch, useSelector } from "react-redux";
import { EditInteractionKind, SavingState } from "@appsmith/ads-old";
@@ -73,11 +75,10 @@ import { EditorTitle } from "./EditorTitle";
import { useCurrentAppState } from "../hooks/useCurrentAppState";
import { EditorState } from "ee/entities/IDE/constants";
import { EditorSaveIndicator } from "pages/Editor/EditorSaveIndicator";
-import type { Page } from "entities/Page";
-import { IDEHeader, IDEHeaderTitle } from "IDE";
import { APPLICATIONS_URL } from "constants/routes";
import { useNavigationMenuData } from "../../EditorName/useNavigationMenuData";
import useLibraryHeaderTitle from "ee/pages/Editor/IDE/Header/useLibraryHeaderTitle";
+import { AppsmithLink } from "pages/Editor/AppsmithLink";
const StyledDivider = styled(Divider)`
height: 50%;
@@ -89,10 +90,9 @@ const { cloudHosting } = getAppsmithConfigs();
interface HeaderTitleProps {
appState: EditorState;
- currentPage?: Page;
}
-const HeaderTitleComponent = ({ appState, currentPage }: HeaderTitleProps) => {
+const HeaderTitleComponent = ({ appState }: HeaderTitleProps) => {
const libraryHeaderTitle = useLibraryHeaderTitle();
switch (appState) {
@@ -104,7 +104,7 @@ const HeaderTitleComponent = ({ appState, currentPage }: HeaderTitleProps) => {
/>
);
case EditorState.EDITOR:
- return ;
+ return ;
case EditorState.SETTINGS:
return (
{
case EditorState.LIBRARIES:
return ;
default:
- return ;
+ return ;
}
};
@@ -218,8 +218,8 @@ const Header = () => {
return (
<>
-
-
+ }>
+
diff --git a/app/client/src/pages/Editor/JSEditor/styledComponents.ts b/app/client/src/pages/Editor/JSEditor/styledComponents.ts
index f84f96e2a06..0358ce19f10 100644
--- a/app/client/src/pages/Editor/JSEditor/styledComponents.ts
+++ b/app/client/src/pages/Editor/JSEditor/styledComponents.ts
@@ -6,7 +6,7 @@ import {
RUN_GUTTER_ID,
} from "./constants";
import { thinScrollbar } from "constants/DefaultTheme";
-import { IDE_HEADER_HEIGHT } from "IDE";
+import { IDE_HEADER_HEIGHT } from "@appsmith/ads";
export const CodeEditorWithGutterStyles = css`
.${RUN_GUTTER_ID} {
diff --git a/app/client/src/pages/Editor/WidgetsEditor/WidgetEditorContainer.tsx b/app/client/src/pages/Editor/WidgetsEditor/WidgetEditorContainer.tsx
index 1bdf176c374..cad110052fd 100644
--- a/app/client/src/pages/Editor/WidgetsEditor/WidgetEditorContainer.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditor/WidgetEditorContainer.tsx
@@ -8,7 +8,7 @@ import { getIsAppSettingsPaneWithNavigationTabOpen } from "selectors/appSettings
import { EditorState } from "ee/entities/IDE/constants";
import { RenderModes } from "constants/WidgetConstants";
import styled from "styled-components";
-import { IDE_HEADER_HEIGHT } from "IDE";
+import { IDE_HEADER_HEIGHT } from "@appsmith/ads";
import { BOTTOM_BAR_HEIGHT } from "components/BottomBar/constants";
const Container = styled.div`
diff --git a/app/client/src/pages/Editor/commons/EditorHeaderComponents.tsx b/app/client/src/pages/Editor/commons/EditorHeaderComponents.tsx
index cdaaa0859f3..dd758e54326 100644
--- a/app/client/src/pages/Editor/commons/EditorHeaderComponents.tsx
+++ b/app/client/src/pages/Editor/commons/EditorHeaderComponents.tsx
@@ -1,7 +1,7 @@
import styled from "styled-components";
import { Profile } from "pages/common/ProfileImage";
import { getTypographyByKey } from "@appsmith/ads-old";
-import { IDE_HEADER_HEIGHT } from "IDE";
+import { IDE_HEADER_HEIGHT } from "@appsmith/ads";
export const HeaderWrapper = styled.div`
width: 100%;
diff --git a/app/client/src/pages/Editor/commons/EditorWrapperContainer.tsx b/app/client/src/pages/Editor/commons/EditorWrapperContainer.tsx
index 4ed87816a8d..990004cbbec 100644
--- a/app/client/src/pages/Editor/commons/EditorWrapperContainer.tsx
+++ b/app/client/src/pages/Editor/commons/EditorWrapperContainer.tsx
@@ -4,7 +4,7 @@ import classNames from "classnames";
import { useSelector } from "react-redux";
import { combinedPreviewModeSelector } from "../../../selectors/editorSelectors";
import { protectedModeSelector } from "selectors/gitSyncSelectors";
-import { IDE_HEADER_HEIGHT } from "../../../IDE";
+import { IDE_HEADER_HEIGHT } from "@appsmith/ads";
import { BOTTOM_BAR_HEIGHT } from "../../../components/BottomBar/constants";
import { PROTECTED_CALLOUT_HEIGHT } from "../IDE/ProtectedCallout";
diff --git a/app/client/src/pages/Editor/commons/Omnibar.tsx b/app/client/src/pages/Editor/commons/Omnibar.tsx
index d9226faf000..bf4d06e0494 100644
--- a/app/client/src/pages/Editor/commons/Omnibar.tsx
+++ b/app/client/src/pages/Editor/commons/Omnibar.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
import { snipingModeSelector } from "selectors/editorSelectors";
import { retryPromise } from "utils/AppsmithUtils";
import { useSelector } from "react-redux";
-import { IDE_HEADER_HEIGHT } from "IDE";
+import { IDE_HEADER_HEIGHT } from "@appsmith/ads";
const BindingBanner = styled.div`
position: fixed;
diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx
index 9e72edd2173..71615c6b121 100644
--- a/app/client/src/pages/Editor/index.tsx
+++ b/app/client/src/pages/Editor/index.tsx
@@ -50,7 +50,7 @@ import { PartialExportModal } from "components/editorComponents/PartialImportExp
import { PartialImportModal } from "components/editorComponents/PartialImportExport/PartialImportModal";
import type { Page } from "entities/Page";
import { AppCURLImportModal } from "ee/pages/Editor/CurlImport";
-import { IDE_HEADER_HEIGHT } from "IDE";
+import { IDE_HEADER_HEIGHT } from "@appsmith/ads";
import GeneratePageModal from "./GeneratePage";
interface EditorProps {