Revert "Pane: dynamic title (#2794)"

This reverts commit b340f8f.

Author: JeanRobin

frontend/taipy-gui/src/components/Taipy/Pane.spec.tsx

@@ -202,7 +202,7 @@ describe("Pane Component", () => {
         expect(elt).toHaveClass("MuiDrawer-root");
         expect(elt).toHaveClass("MuiDrawer-anchorLeft");
     });
-    it("anchors to the left when anchor is set to 'l'", async () => {
+    it("anchors to the left when no anchor 'l' is set", async () => {
         const { getByRole } = render(
             <HelmetProvider>
                 <Pane page="page" open={true} anchor="l" />
@@ -239,96 +239,12 @@ describe("Pane Component", () => {
         expect(elt).toHaveClass("MuiDrawer-anchorBottom");
     });
     it("renders with a title", async () => {
-        render(
+        const { getByRole } = render(
             <HelmetProvider>
-                <Pane page="page" open={true} persistent={true} defaultTitle="pane-title-test" />
+                <Pane page="page" open={true} persistent={true} title="pane-title-test" />
             </HelmetProvider>
         );
         const elt = document.querySelector(".MuiBox-root");
         expect(elt).toHaveTextContent("pane-title-test");
     });
-    it("renders with a dynamic title", async () => {
-        render(
-            <HelmetProvider>
-                <Pane page="page" open={true} persistent={true} defaultTitle="pane-title-test" title="pane-dynamic-title-test" />
-            </HelmetProvider>
-        );
-        const elt = document.querySelector(".MuiBox-root");
-        expect(elt).toHaveTextContent("pane-dynamic-title-test");
-    });
-    it("shows correct icon when closed with left anchor", async () => {
-        const { getByRole } = render(
-            <HelmetProvider>
-                <Pane page="page" open={false} showButton={true} anchor="left" />
-            </HelmetProvider>
-        );
-        const but = getByRole("button");
-        expect(but).toBeInTheDocument();
-        const svg = but.querySelector("svg");
-        expect(svg).toHaveAttribute("data-testid", "ChevronRightIcon");
-    });
-    it("shows correct icon when closed with right anchor", async () => {
-        const { getByRole } = render(
-            <HelmetProvider>
-                <Pane page="page" open={false} showButton={true} anchor="right" />
-            </HelmetProvider>
-        );
-        const but = getByRole("button");
-        const svg = but.querySelector("svg");
-        expect(svg).toHaveAttribute("data-testid", "ChevronLeftIcon");
-    });
-    it("shows correct icon when closed with top anchor", async () => {
-        const { getByRole } = render(
-            <HelmetProvider>
-                <Pane page="page" open={false} showButton={true} anchor="top" />
-            </HelmetProvider>
-        );
-        const but = getByRole("button");
-        const svg = but.querySelector("svg");
-        expect(svg).toHaveAttribute("data-testid", "ExpandMoreIcon");
-    });
-    it("shows correct icon when closed with bottom anchor", async () => {
-        const { getByRole } = render(
-            <HelmetProvider>
-                <Pane page="page" open={false} showButton={true} anchor="bottom" />
-            </HelmetProvider>
-        );
-        const but = getByRole("button");
-        const svg = but.querySelector("svg");
-        expect(svg).toHaveAttribute("data-testid", "ExpandLessIcon");
-    });
-    it("shows hover text when closed", async () => {
-        const { getByRole, findByRole } = render(
-            <HelmetProvider>
-                <Pane page="page" open={false} showButton={true} defaultHoverText="Test hover text" />
-            </HelmetProvider>
-        );
-        const but = getByRole("button");
-        await userEvent.hover(but);
-        const tooltip = await findByRole("tooltip");
-        expect(tooltip).toHaveTextContent("Test hover text");
-    });
-    it("shows dynamic hover text when closed", async () => {
-        const { getByRole, findByRole } = render(
-            <HelmetProvider>
-                <Pane page="page" open={false} showButton={true} defaultHoverText="Default hover" hoverText="Dynamic hover" />
-            </HelmetProvider>
-        );
-        const but = getByRole("button");
-        await userEvent.hover(but);
-        const tooltip = await findByRole("tooltip");
-        expect(tooltip).toHaveTextContent("Dynamic hover");
-    });
-    it("shows title and hover text combined when closed", async () => {
-        const { getByRole, findByRole } = render(
-            <HelmetProvider>
-                <Pane page="page" open={false} showButton={true} defaultTitle="Pane Title" defaultHoverText="Hover text" />
-            </HelmetProvider>
-        );
-        const but = getByRole("button");
-        await userEvent.hover(but);
-        const tooltip = await findByRole("tooltip");
-        expect(tooltip).toHaveTextContent("Pane Title");
-        expect(tooltip).toHaveTextContent("Hover text");
-    });
 });

frontend/taipy-gui/src/components/Taipy/Pane.tsx

@@ -38,7 +38,6 @@ interface PaneProps extends TaipyActiveProps, TaipyChangeProps {
     anchor?: string;
     persistent?: boolean;
     title?: string;
-    defaultTitle?: string;
     onClose?: string;
     page?: string;
     partial?: boolean;
@@ -59,16 +58,16 @@ const getHeaderSx = (anchor: AnchorType): CSSProperties => {
             return { ...baseStyle, justifyContent: "flex-end" };
     }
 };
-const getHeaderIcon = (anchor: AnchorType, open = true): JSX.Element => {
+const getHeaderIcon = (anchor: AnchorType): JSX.Element => {
     switch (anchor) {
         case "right":
-            return open ? <ChevronRightIcon /> : <ChevronLeftIcon />;
+            return <ChevronRightIcon />;
         case "top":
-            return open ? <ExpandLess /> : <ExpandMore />;
+            return <ExpandLess />;
         case "bottom":
-            return open ? <ExpandMore /> : <ExpandLess />;
+            return <ExpandMore />;
         default:
-            return open ? <ChevronLeftIcon /> : <ChevronRightIcon />;
+            return <ChevronLeftIcon />;
     }
 };
 const getTitleSx = (anchor: AnchorType): CSSProperties => {
@@ -104,6 +103,7 @@ const Pane = (props: PaneProps) => {
     const {
         id,
         persistent = false,
+        title,
         onClose,
         page,
         partial,
@@ -121,7 +121,6 @@ const Pane = (props: PaneProps) => {
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
     const active = useDynamicProperty(props.active, props.defaultActive, true);
     const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
-    const title = useDynamicProperty(props.title, props.defaultTitle, undefined);
     const anchor = useMemo<AnchorType>(
         () =>
             props.anchor
@@ -140,7 +139,6 @@ const Pane = (props: PaneProps) => {
     const drawerSx = useMemo(() => getDrawerSx(anchor, width, height), [width, height, anchor]);
     const headerSx = useMemo(() => getHeaderSx(anchor), [anchor]);
     const headerIcon = useMemo(() => getHeaderIcon(anchor), [anchor]);
-    const closedHeaderIcon = useMemo(() => getHeaderIcon(anchor, false), [anchor]);
     const titleSx = useMemo(() => getTitleSx(anchor), [anchor]);
     const handleClose = useCallback(() => {
         if (active) {
@@ -197,7 +195,11 @@ const Pane = (props: PaneProps) => {
                 </>
             ) : null}
             <>
-                {page ? <TaipyRendered path={"/" + page} partial={partial} fromBlock={true} /> : null}
+                {page ? (
+                    <Tooltip title={hover || ""}>
+                        <TaipyRendered path={"/" + page} partial={partial} fromBlock={true} />
+                    </Tooltip>
+                ) : null}
                 {props.children}
             </>
         </Drawer>
@@ -209,26 +211,10 @@ const Pane = (props: PaneProps) => {
             open={true}
             className={getSuffixedClassNames(className, "-button")}
         >
-            <Tooltip
-                title={
-                    title ? (
-                        hover ? (
-                            <>
-                                {title}
-                                <br />
-                                {hover}
-                            </>
-                        ) : (
-                            title
-                        )
-                    ) : (
-                        hover || ""
-                    )
-                }
-            >
+            <Tooltip title={hover || ""}>
                 <span>
                     <IconButton onClick={handleOpen} disabled={!active}>
-                        {closedHeaderIcon}
+                        {headerIcon}
                     </IconButton>
                 </span>
             </Tooltip>