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
deleted file mode 100644
index 2f7f3041c58e..000000000000
--- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/ListWithHeader.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-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
deleted file mode 100644
index cd175bbdf5e3..000000000000
--- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-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
deleted file mode 100644
index df4b639c91ec..000000000000
--- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/styles.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-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
deleted file mode 100644
index 06309d2d20cf..000000000000
--- a/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/HeaderSwitcher.styles.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-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/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/IDEHeaderSwitcher.tsx b/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/IDEHeaderSwitcher.tsx
deleted file mode 100644
index 22928a5f4994..000000000000
--- a/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/IDEHeaderSwitcher.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-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
deleted file mode 100644
index 1580b3834c63..000000000000
--- a/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 6307b9c5b692..000000000000
--- a/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.constants.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-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
deleted file mode 100644
index 37c3900615a3..000000000000
--- a/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-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
deleted file mode 100644
index 6c709080dd52..000000000000
--- a/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-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
deleted file mode 100644
index 1b99915945d7..000000000000
--- a/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-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/packages/design-system/ads/src/Templates/IDEHeader/index.ts b/app/client/packages/design-system/ads/src/Templates/IDEHeader/index.ts
deleted file mode 100644
index 6ea1fd289a19..000000000000
--- a/app/client/packages/design-system/ads/src/Templates/IDEHeader/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * 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
deleted file mode 100644
index 283192812370..000000000000
--- a/app/client/packages/design-system/ads/src/Templates/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-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 4afae937fda1..173d119074e6 100644
--- a/app/client/packages/design-system/ads/src/index.ts
+++ b/app/client/packages/design-system/ads/src/index.ts
@@ -36,4 +36,3 @@ 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
new file mode 100644
index 000000000000..647e2e7be5d9
--- /dev/null
+++ b/app/client/src/IDE/Components/HeaderDropdown.test.tsx
@@ -0,0 +1,40 @@
+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
new file mode 100644
index 000000000000..28777fc3f80d
--- /dev/null
+++ b/app/client/src/IDE/Components/HeaderDropdown.tsx
@@ -0,0 +1,79 @@
+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/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/HeaderSwitcher.test.tsx b/app/client/src/IDE/Components/HeaderEditorSwitcher.test.tsx
similarity index 59%
rename from app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/HeaderSwitcher.test.tsx
rename to app/client/src/IDE/Components/HeaderEditorSwitcher.test.tsx
index d248d3f518b6..e9bb49738823 100644
--- a/app/client/packages/design-system/ads/src/Templates/IDEHeader/HeaderSwitcher/HeaderSwitcher.test.tsx
+++ b/app/client/src/IDE/Components/HeaderEditorSwitcher.test.tsx
@@ -1,67 +1,67 @@
import React from "react";
-import { render, fireEvent, screen } from "@testing-library/react";
-import { IDEHeaderSwitcher } from "./IDEHeaderSwitcher";
+import { render, fireEvent } from "@testing-library/react";
+import HeaderEditorSwitcher from "./HeaderEditorSwitcher";
import "@testing-library/jest-dom";
-describe("HeaderSwitcher", () => {
+describe("HeaderEditorSwitcher", () => {
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", () => {
- render();
+ const { getByText } = render();
- // eslint-disable-next-line testing-library/no-node-access
const testIdElement = document.getElementsByClassName(
defaultProps.titleTestId,
);
- expect(screen.getByText("Prefix /")).toBeInTheDocument();
- expect(screen.getByText(defaultProps.title)).toBeInTheDocument();
+ expect(getByText("Prefix /")).toBeInTheDocument();
+ expect(getByText(defaultProps.title)).toBeInTheDocument();
expect(testIdElement).toBeDefined();
});
it("renders active state correctly", () => {
- render();
+ const { getByText } = render(
+ ,
+ );
- expect(screen.getByText("Prefix /")).toHaveStyle(
+ expect(getByText("Prefix /")).toHaveStyle(
"background-color: var(--ads-v2-color-bg-subtle)",
);
});
it("calls onClick handler when clicked", () => {
- render();
+ const { getByText } = render();
- fireEvent.click(screen.getByText("Title"));
+ fireEvent.click(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", () => {
- render();
+ const { getByText } = render(
+ ,
+ );
- fireEvent.click(screen.getByText("Title")); // Should not throw error
+ fireEvent.click(getByText("Title")); // Should not throw error
});
it("does not show separator and applies different inactive color to icon", () => {
- const ref = React.createRef();
- 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(screen.getByTestId("root-div")).toHaveTextContent("Prefix");
+ expect(getByTestId("root-div")).toHaveTextContent("Prefix");
expect(icon).toHaveAttribute(
"fill",
"var(--ads-v2-colors-content-label-inactive-fg)",
@@ -84,20 +83,16 @@ describe("HeaderSwitcher", () => {
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/src/IDE/Components/HeaderEditorSwitcher.tsx b/app/client/src/IDE/Components/HeaderEditorSwitcher.tsx
new file mode 100644
index 000000000000..a7baa0744264
--- /dev/null
+++ b/app/client/src/IDE/Components/HeaderEditorSwitcher.tsx
@@ -0,0 +1,73 @@
+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/packages/design-system/ads/src/Templates/IDEHeader/IDEHeaderTitle.tsx b/app/client/src/IDE/Components/HeaderTitle.tsx
similarity index 68%
rename from app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeaderTitle.tsx
rename to app/client/src/IDE/Components/HeaderTitle.tsx
index cfa626f95910..7423cb338ed6 100644
--- a/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeaderTitle.tsx
+++ b/app/client/src/IDE/Components/HeaderTitle.tsx
@@ -1,11 +1,10 @@
import React from "react";
-import { Flex } from "../../Flex";
-import { Text } from "../../Text";
+import { Flex, Text } from "@appsmith/ads";
/**
* Handy little styled component that can be used to render the title in the IDEHeader component
* **/
-export const IDEHeaderTitle = ({ title }: { title: string }) => {
+const HeaderTitle = ({ title }: { title: string }) => {
return (
@@ -14,3 +13,5 @@ export const IDEHeaderTitle = ({ title }: { title: string }) => {
);
};
+
+export default HeaderTitle;
diff --git a/app/client/src/IDE/index.ts b/app/client/src/IDE/index.ts
index a151c77f1b75..cc69383fab62 100644
--- a/app/client/src/IDE/index.ts
+++ b/app/client/src/IDE/index.ts
@@ -3,6 +3,15 @@
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
@@ -16,6 +25,22 @@ 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 191df123f250..d3dc228d3f1a 100644
--- a/app/client/src/ce/constants/messages.ts
+++ b/app/client/src/ce/constants/messages.ts
@@ -2485,8 +2485,7 @@ export const ADD_PAGE_FROM_TEMPLATE_MODAL = {
export const HEADER_TITLES = {
DATA: () => "Data",
- PAGES: () => "Pages",
- EDITOR: () => "Editor",
+ EDITOR: () => "Pages",
SETTINGS: () => "Settings",
LIBRARIES: () => "Libraries",
};
diff --git a/app/client/src/pages/AdminSettings/components.tsx b/app/client/src/pages/AdminSettings/components.tsx
index 791cdf4fb3cc..d2ef42475856 100644
--- a/app/client/src/pages/AdminSettings/components.tsx
+++ b/app/client/src/pages/AdminSettings/components.tsx
@@ -1,6 +1,7 @@
import styled from "styled-components";
import { Classes } from "@blueprintjs/core";
-import { Link, Text, IDE_HEADER_HEIGHT } from "@appsmith/ads";
+import { Link, Text } from "@appsmith/ads";
+import { IDE_HEADER_HEIGHT } from "IDE";
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 3b6b80aa7328..95903b915ca6 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 "@appsmith/ads";
+import { IDE_HEADER_HEIGHT } from "IDE";
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 a1499635bd75..8aaa930f461f 100644
--- a/app/client/src/pages/Editor/EditorName/components.ts
+++ b/app/client/src/pages/Editor/EditorName/components.ts
@@ -1,7 +1,8 @@
import styled from "styled-components";
import { Classes } from "@blueprintjs/core";
import { getTypographyByKey } from "@appsmith/ads-old";
-import { Icon, IDE_HEADER_HEIGHT } from "@appsmith/ads";
+import { Icon } from "@appsmith/ads";
+import { IDE_HEADER_HEIGHT } from "IDE";
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 b1ecd0dd7ede..0b94703f2532 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 { ListItemContainer, ListWithHeader } from "@appsmith/ads";
+import { Text } from "@appsmith/ads";
import { useDispatch, useSelector } from "react-redux";
import { useLocation } from "react-router";
@@ -18,6 +18,7 @@ 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 }) => {
@@ -49,50 +50,35 @@ const PagesSection = ({ onItemSelected }: { onItemSelected: () => void }) => {
dispatch(
createNewPageFromEntities(applicationId, name, workspaceId, instanceId),
);
- }, [pages, dispatch, applicationId, workspaceId, instanceId]);
+ }, [dispatch, pages, applicationId]);
const onMenuClose = useCallback(() => setIsMenuOpen(false), [setIsMenuOpen]);
const pageElements = useMemo(
() =>
pages.map((page) => (
-
-
-
+
)),
- [pages, location.pathname, onItemSelected],
+ [pages, location.pathname],
);
- const createPageContextMenu = useMemo(() => {
- if (!canCreatePages) return null;
-
- return (
-
- );
- }, [
- canCreatePages,
- createPageCallback,
- isMenuOpen,
- onItemSelected,
- onMenuClose,
- ]);
-
return (
-
- {pageElements}
-
+
+
+ {`All Pages (${pages.length})`}
+ {canCreatePages ? (
+
+ ) : null}
+
+ {pageElements}
+
);
};
diff --git a/app/client/src/pages/Editor/IDE/Header/EditorTitle.tsx b/app/client/src/pages/Editor/IDE/Header/EditorTitle.tsx
index 327b6f72ed35..47ef1030766c 100644
--- a/app/client/src/pages/Editor/IDE/Header/EditorTitle.tsx
+++ b/app/client/src/pages/Editor/IDE/Header/EditorTitle.tsx
@@ -1,34 +1,35 @@
-import React from "react";
-import { IDEHeaderSwitcher } from "@appsmith/ads";
+import React, { useState } from "react";
+import { Popover, PopoverTrigger, PopoverContent } from "@appsmith/ads";
import { createMessage, HEADER_TITLES } from "ee/constants/messages";
import { PagesSection } from "../EditorPane/PagesSection";
-import { useBoolean } from "usehooks-ts";
-import { useSelector } from "react-redux";
-import { getCurrentPageId, getPageById } from "selectors/editorSelectors";
+import { IDEHeaderEditorSwitcher } from "IDE";
-const EditorTitle = () => {
- const {
- setFalse: setMenuClose,
- setValue: setMenuState,
- value: isMenuOpen,
- } = useBoolean(false);
+const EditorTitle = ({ title }: { title: string }) => {
+ const [active, setActive] = useState(false);
- const pageId = useSelector(getCurrentPageId) as string;
- const currentPage = useSelector(getPageById(pageId));
-
- if (!currentPage) return null;
+ const closeMenu = () => {
+ setActive(false);
+ };
return (
-
-
-
+
+
+
+
+
+
+
+
);
};
diff --git a/app/client/src/pages/Editor/IDE/Header/index.tsx b/app/client/src/pages/Editor/IDE/Header/index.tsx
index 8a8016939705..ee4365196a5c 100644
--- a/app/client/src/pages/Editor/IDE/Header/index.tsx
+++ b/app/client/src/pages/Editor/IDE/Header/index.tsx
@@ -13,8 +13,6 @@ import {
TabPanel,
Button,
Link,
- IDEHeader,
- IDEHeaderTitle,
} from "@appsmith/ads";
import { useDispatch, useSelector } from "react-redux";
import { EditInteractionKind, SavingState } from "@appsmith/ads-old";
@@ -75,10 +73,11 @@ 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%;
@@ -90,9 +89,10 @@ const { cloudHosting } = getAppsmithConfigs();
interface HeaderTitleProps {
appState: EditorState;
+ currentPage?: Page;
}
-const HeaderTitleComponent = ({ appState }: HeaderTitleProps) => {
+const HeaderTitleComponent = ({ appState, currentPage }: HeaderTitleProps) => {
const libraryHeaderTitle = useLibraryHeaderTitle();
switch (appState) {
@@ -104,7 +104,7 @@ const HeaderTitleComponent = ({ appState }: 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 0358ce19f101..f84f96e2a064 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 "@appsmith/ads";
+import { IDE_HEADER_HEIGHT } from "IDE";
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 cad110052fd0..1bdf176c3748 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 "@appsmith/ads";
+import { IDE_HEADER_HEIGHT } from "IDE";
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 dd758e54326f..cdaaa0859f32 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 "@appsmith/ads";
+import { IDE_HEADER_HEIGHT } from "IDE";
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 990004cbbec5..4ed87816a8d5 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 "@appsmith/ads";
+import { IDE_HEADER_HEIGHT } from "../../../IDE";
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 bf4d06e0494b..d9226faf000f 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 "@appsmith/ads";
+import { IDE_HEADER_HEIGHT } from "IDE";
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 71615c6b1216..9e72edd21739 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 "@appsmith/ads";
+import { IDE_HEADER_HEIGHT } from "IDE";
import GeneratePageModal from "./GeneratePage";
interface EditorProps {