fix: be able to close building blocks sidebar when rest of it is disabled (#4004)

Closes: #3963

## Summary

- Fix building blocks sidebar close button being unclickable when the
sidebar
is in disabled/read-only state (e.g. viewing a live canvas with
versioning
  enabled but not in edit mode)
- The disabled overlay (z-30) covered the entire sidebar including the
close
button — fixed by giving both close buttons z-40 so they remain
clickable
  above the overlay
  - Added data-testid="close-sidebar-button" to the close buttons for
  testability

##  Root Cause

When versioning is enabled and the user is viewing the live canvas (not
in
edit mode), isReadOnly becomes true, which passes disabled={true} to the
BuildingBlocksSidebar. A full-coverage overlay with absolute inset-0
z-30
renders to block component interactions, but it also blocks the close
button
since the sidebar container is z-21 and the close buttons had no
explicit
  z-index.

Signed-off-by: Pedro F. Leao <pedroforestileao@gmail.com>

Author: forestileao

test/e2e/canvas_sidebar_close_test.go

@@ -0,0 +1,103 @@
+package e2e
+
+import (
+	"testing"
+	"time"
+
+	pw "github.com/playwright-community/playwright-go"
+	"github.com/stretchr/testify/require"
+
+	"github.com/superplanehq/superplane/pkg/database"
+	"github.com/superplanehq/superplane/pkg/models"
+	q "github.com/superplanehq/superplane/test/e2e/queries"
+	"github.com/superplanehq/superplane/test/e2e/session"
+	"github.com/superplanehq/superplane/test/e2e/shared"
+)
+
+func TestCanvasSidebarClose(t *testing.T) {
+	t.Run("sidebar close button works after exiting edit mode on versioned canvas", func(t *testing.T) {
+		steps := &sidebarCloseSteps{t: t}
+		steps.start()
+		steps.givenCanvasWithVersioningEnabled("E2E Sidebar Close")
+		steps.enterEditMode()
+		steps.openBuildingBlocksSidebar()
+		steps.assertSidebarVisible()
+		steps.exitEditMode()
+		steps.assertSidebarVisible()
+		steps.closeSidebarViaButton()
+		steps.assertSidebarHidden()
+	})
+}
+
+type sidebarCloseSteps struct {
+	t       *testing.T
+	session *session.TestSession
+	canvas  *shared.CanvasSteps
+}
+
+func (s *sidebarCloseSteps) start() {
+	s.session = ctx.NewSession(s.t)
+	s.session.Start()
+	s.session.Login()
+}
+
+func (s *sidebarCloseSteps) givenCanvasWithVersioningEnabled(name string) {
+	err := database.Conn().
+		Model(&models.Organization{}).
+		Where("id = ?", s.session.OrgID).
+		Update("versioning_enabled", true).
+		Error
+	require.NoError(s.t, err)
+
+	s.canvas = shared.NewCanvasSteps(name, s.t, s.session)
+	s.canvas.Create()
+	s.canvas.Visit()
+
+	s.session.AssertVisible(q.Locator(`header button:has-text("Edit")`))
+}
+
+func (s *sidebarCloseSteps) enterEditMode() {
+	editButton := q.Locator(`header button:has-text("Edit")`).Run(s.session)
+	deadline := time.Now().Add(15 * time.Second)
+
+	for {
+		disabled, err := editButton.IsDisabled()
+		require.NoError(s.t, err)
+		if !disabled {
+			break
+		}
+
+		if time.Now().After(deadline) {
+			s.t.Fatalf("edit button did not become enabled")
+		}
+
+		time.Sleep(200 * time.Millisecond)
+	}
+
+	require.NoError(s.t, editButton.Click(pw.LocatorClickOptions{Timeout: pw.Float(15000)}))
+	s.session.AssertVisible(q.Locator(`header button:has-text("Propose Change")`))
+}
+
+func (s *sidebarCloseSteps) openBuildingBlocksSidebar() {
+	s.canvas.OpenBuildingBlocksSidebar()
+}
+
+func (s *sidebarCloseSteps) assertSidebarVisible() {
+	s.session.AssertVisible(q.TestID("building-blocks-sidebar"))
+}
+
+func (s *sidebarCloseSteps) assertSidebarHidden() {
+	s.session.AssertHidden(q.TestID("building-blocks-sidebar"))
+}
+
+func (s *sidebarCloseSteps) exitEditMode() {
+	exitButton := q.Locator(`button[aria-label="Exit edit mode"]`).Run(s.session)
+	require.NoError(s.t, exitButton.Click(pw.LocatorClickOptions{Timeout: pw.Float(15000)}))
+	s.session.AssertVisible(q.Locator(`header button:has-text("Edit")`))
+	s.session.Sleep(500)
+}
+
+func (s *sidebarCloseSteps) closeSidebarViaButton() {
+	closeButton := q.TestID("close-sidebar-button").Run(s.session)
+	require.NoError(s.t, closeButton.Click(pw.LocatorClickOptions{Timeout: pw.Float(15000)}))
+}

web_src/src/ui/BuildingBlocksSidebar/index.spec.tsx

@@ -0,0 +1,57 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { BuildingBlocksSidebar } from "./index";
+
+const defaultProps = {
+  isOpen: true,
+  onToggle: vi.fn(),
+  blocks: [],
+  canvasZoom: 1,
+};
+
+describe("BuildingBlocksSidebar", () => {
+  it("calls onToggle(false) when close button is clicked while disabled", () => {
+    const onToggle = vi.fn();
+    render(
+      <BuildingBlocksSidebar
+        {...defaultProps}
+        onToggle={onToggle}
+        disabled={true}
+        disabledMessage="You don't have permission to edit this canvas."
+      />,
+    );
+
+    const closeButton = screen.getByTestId("close-sidebar-button");
+    fireEvent.click(closeButton);
+
+    expect(onToggle).toHaveBeenCalledWith(false);
+  });
+
+  it("calls onToggle(false) when close button is clicked while not disabled", () => {
+    const onToggle = vi.fn();
+    render(<BuildingBlocksSidebar {...defaultProps} onToggle={onToggle} disabled={false} />);
+
+    const closeButton = screen.getByTestId("close-sidebar-button");
+    fireEvent.click(closeButton);
+
+    expect(onToggle).toHaveBeenCalledWith(false);
+  });
+
+  it("renders the disabled overlay when disabled", () => {
+    const { container } = render(
+      <BuildingBlocksSidebar
+        {...defaultProps}
+        disabled={true}
+        disabledMessage="You don't have permission to edit this canvas."
+      />,
+    );
+
+    expect(container.querySelector(".cursor-not-allowed")).toBeInTheDocument();
+  });
+
+  it("does not render when isOpen is false", () => {
+    const { container } = render(<BuildingBlocksSidebar {...defaultProps} isOpen={false} />);
+
+    expect(container.querySelector('[data-testid="building-blocks-sidebar"]')).not.toBeInTheDocument();
+  });
+});

web_src/src/ui/BuildingBlocksSidebar/index.tsx

@@ -760,7 +760,8 @@ function OpenBuildingBlocksSidebar({
             </div>
             <div
               onClick={() => onToggle(false)}
-              className="absolute top-4 right-4 w-6 h-6 hover:bg-slate-950/5 rounded flex items-center justify-center cursor-pointer leading-none"
+              data-testid="close-sidebar-button"
+              className="absolute top-4 right-4 z-40 w-6 h-6 hover:bg-slate-950/5 rounded flex items-center justify-center cursor-pointer leading-none"
             >
               <X size={16} />
             </div>
@@ -792,7 +793,8 @@ function OpenBuildingBlocksSidebar({
             </TabsList>
             <div
               onClick={() => onToggle(false)}
-              className="absolute top-4 right-4 w-6 h-6 hover:bg-slate-950/5 rounded flex items-center justify-center cursor-pointer leading-none"
+              data-testid="close-sidebar-button"
+              className="absolute top-4 right-4 z-40 w-6 h-6 hover:bg-slate-950/5 rounded flex items-center justify-center cursor-pointer leading-none"
             >
               <X size={16} />
             </div>