Merge pull request #4723 from penpot/ladybenko-7466-layers-sidebar

Fix layers tree not expanding to the bottom edge

CHANGES.md

@@ -19,7 +19,8 @@
 
 ### :bug: Bugs fixed
 
-- Fix guides move when board is moved by inputs [Taiga 8010](https://tree.taiga.io/project/penpot/issue/8010)
+- Fix layer tree not expanding to the bottom edge [Taiga #7466](https://tree.taiga.io/project/penpot/issue/7466)
+- Fix guides move when board is moved by inputs [Taiga #8010](https://tree.taiga.io/project/penpot/issue/8010)
 - Fix clickable area of Penptot logo in the viewer [Taiga #7988](https://tree.taiga.io/project/penpot/issue/7988)
 - Fix constraints dropdown when selecting multiple shapes [Taiga #7686](https://tree.taiga.io/project/penpot/issue/7686)
 - Layout and scrollign fixes for the bottom palette [Taiga #7559](https://tree.taiga.io/project/penpot/issue/7559)

frontend/playwright/ui/pages/WorkspacePage.js

@@ -45,11 +45,9 @@ export class WorkspacePage extends BaseWebSocketPage {
     this.rootShape = page.locator(`[id="shape-00000000-0000-0000-0000-000000000000"]`);
     this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
     this.colorpicker = page.getByTestId("colorpicker");
-    this.layers = page.getByTestId("layers");
+    this.layers = page.getByTestId("layer-tree");
     this.palette = page.getByTestId("palette");
-    this.assets = page.getByTestId("assets");
-    this.libraries = page.getByTestId("libraries");
-    this.closeLibraries = page.getByTestId("close-libraries");
+    this.sidebar = page.getByTestId("left-sidebar");
     this.librariesModal = page.getByTestId("libraries-modal");
   }
 
@@ -102,6 +100,11 @@ export class WorkspacePage extends BaseWebSocketPage {
     await this.page.mouse.up();
   }
 
+  async togglePages() {
+    const pagesToggle = this.page.getByText("Pages");
+    await pagesToggle.click();
+  }
+
   async clickLeafLayer(name, clickOptions = {}) {
     const layer = this.layers.getByText(name);
     await layer.click(clickOptions);
@@ -113,15 +116,17 @@ export class WorkspacePage extends BaseWebSocketPage {
   }
 
   async expectSelectedLayer(name) {
-    await expect(this.layers.getByTestId("layer-row").filter({ has: this.page.getByText(name) })).toHaveClass(/selected/);
+    await expect(this.layers.getByTestId("layer-row").filter({ has: this.page.getByText(name) })).toHaveClass(
+      /selected/,
+    );
   }
 
   async clickAssets(clickOptions = {}) {
-    await this.assets.click(clickOptions);
+    await this.sidebar.getByText("Assets").click(clickOptions);
   }
 
-  async clickLibraries(clickOptions = {}) {
-    await this.libraries.click(clickOptions);
+  async openLibrariesModal(clickOptions = {}) {
+    await this.sidebar.getByText("Libraries").click(clickOptions);
   }
 
   async clickLibrary(name, clickOptions = {}) {
@@ -129,16 +134,14 @@ export class WorkspacePage extends BaseWebSocketPage {
       .getByTestId("library-item")
       .filter({ hasText: name })
       .getByRole("button")
-      .click(clickOptions);  
+      .click(clickOptions);
   }
 
-  async clickCloseLibraries(clickOptions = {}) {
-    await this.closeLibraries.click(clickOptions);
+  async closeLibrariesModal(clickOptions = {}) {
+    await this.librariesModal.getByRole("button", { name: "Close" }).click(clickOptions);
   }
 
   async clickColorPalette(clickOptions = {}) {
-    await this.palette
-      .getByRole("button", { name: "Color Palette (Alt+P)" })
-      .click(clickOptions);
+    await this.palette.getByRole("button", { name: "Color Palette (Alt+P)" }).click(clickOptions);
   }
 }

frontend/playwright/ui/specs/sidebar.spec.js

@@ -0,0 +1,58 @@
+import { test, expect } from "@playwright/test";
+import { WorkspacePage } from "../pages/WorkspacePage";
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+});
+
+test.describe("Layers tab", () => {
+  test("BUG 7466 - Layers tab height extends to the bottom when 'Pages' is collapsed", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+
+    await workspace.goToWorkspace();
+
+    const { height: heightExpanded } = await workspace.layers.boundingBox();
+    await workspace.togglePages();
+    const { height: heightCollapsed } = await workspace.layers.boundingBox();
+
+    console.log(heightExpanded, heightCollapsed);
+
+    expect(heightExpanded > heightCollapsed);
+  });
+});
+
+test.describe("Assets tab", () => {
+  test("User adds a library and its automatically selected in the color palette", async ({ page }) => {
+    const workspacePage = new WorkspacePage(page);
+    await workspacePage.setupEmptyFile();
+    await workspacePage.mockRPC("link-file-to-library", "workspace/link-file-to-library.json");
+    await workspacePage.mockRPC("unlink-file-from-library", "workspace/unlink-file-from-library.json");
+    await workspacePage.mockRPC(
+      "get-team-shared-files?team-id=*",
+      "workspace/get-team-shared-libraries-non-empty.json",
+    );
+
+    await workspacePage.goToWorkspace();
+
+    // Add Testing library 1
+    await workspacePage.clickColorPalette();
+    await workspacePage.clickAssets();
+    // Now the get-file call should return a library
+    await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json");
+    await workspacePage.openLibrariesModal();
+    await workspacePage.clickLibrary("Testing library 1");
+    await workspacePage.closeLibrariesModal();
+
+    await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible();
+
+    // Remove Testing library 1
+    await workspacePage.openLibrariesModal();
+    await workspacePage.clickLibrary("Testing library 1");
+    await workspacePage.closeLibrariesModal();
+
+    await expect(
+      workspacePage.palette.getByText("There are no color styles in your library yet"),
+    ).toBeVisible();
+  });
+});

frontend/playwright/ui/specs/workspace.spec.js

@@ -39,44 +39,15 @@ test("User draws a rect", async ({ page }) => {
   await expect(shape).toHaveAttribute("height", "100");
 });
 
-test("User adds a library and its automatically selected in the color palette", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
-  await workspacePage.setupEmptyFile();
-  await workspacePage.mockRPC("link-file-to-library", "workspace/link-file-to-library.json");
-  await workspacePage.mockRPC("unlink-file-from-library", "workspace/unlink-file-from-library.json");
-  await workspacePage.mockRPC("get-team-shared-files?team-id=*", "workspace/get-team-shared-libraries-non-empty.json");
-  
-  await workspacePage.goToWorkspace();
-
-  // Add Testing library 1
-  await workspacePage.clickColorPalette();
-  await workspacePage.clickAssets();
-  // Now the get-file call should return a library
-  await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json");
-  await workspacePage.clickLibraries();
-  await workspacePage.clickLibrary("Testing library 1")
-  await workspacePage.clickCloseLibraries(); 
-
-  await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible();
-
-  // Remove Testing library 1
-  await workspacePage.clickLibraries();
-  await workspacePage.clickLibrary("Testing library 1")
-  await workspacePage.clickCloseLibraries();
-
-  await expect(workspacePage.palette.getByText('There are no color styles in your library yet')).toBeVisible();
-});
-
-
 test("User makes a group", async ({ page }) => {
   const workspacePage = new WorkspacePage(page);
   await workspacePage.setupEmptyFile();
   await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-not-empty.json");
   await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-create-rect.json");
 
-  await workspacePage.goToWorkspace({ 
-    fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374", 
-    pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375"
+  await workspacePage.goToWorkspace({
+    fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374",
+    pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375",
   });
   await workspacePage.clickLeafLayer("Rectangle");
   await workspacePage.page.keyboard.press("ControlOrMeta+g");

frontend/src/app/main/ui/components/tab_container.cljs

@@ -59,7 +59,6 @@
            [:div {:key (str/concat "tab-" sid)
                   :title tooltip
                   :data-id sid
-                  :data-testid sid
                   :on-click on-click
                   :class  (stl/css-case
                            :tab-container-tab-title true

frontend/src/app/main/ui/workspace/libraries.cljs

@@ -519,7 +519,7 @@
      [:div {:class (stl/css :modal-dialog)}
       [:button {:class (stl/css :close-btn)
                 :on-click close-dialog
-                :data-testid "close-libraries"}
+                :aria-label (tr "labels.close")}
        close-icon]
       [:div {:class (stl/css :modal-title)}
        (tr "workspace.libraries.libraries")]

frontend/src/app/main/ui/workspace/sidebar.cljs

@@ -38,8 +38,7 @@
   (let [options-mode   (mf/deref refs/options-mode-global)
         mode-inspect?  (= options-mode :inspect)
         project        (mf/deref refs/workspace-project)
-        show-pages?    (mf/use-state true)
-        toggle-pages   (mf/use-callback #(reset! show-pages? not))
+
 
         section        (cond (or mode-inspect? (contains? layout :layers)) :layers
                              (contains? layout :assets) :assets)
@@ -50,9 +49,12 @@
         {on-pointer-down :on-pointer-down on-lost-pointer-capture :on-lost-pointer-capture  on-pointer-move :on-pointer-move parent-ref :parent-ref size :size}
         (use-resize-hook :left-sidebar 275 275 500 :x false :left)
 
-        {on-pointer-down-pages :on-pointer-down on-lost-pointer-capture-pages  :on-lost-pointer-capture on-pointer-move-pages :on-pointer-move size-pages :size}
+        {on-pointer-down-pages :on-pointer-down on-lost-pointer-capture-pages  :on-lost-pointer-capture on-pointer-move-pages :on-pointer-move size-pages-opened :size}
         (use-resize-hook :sitemap 200 38 400 :y false nil)
 
+        show-pages?    (mf/use-state true)
+        toggle-pages   (mf/use-callback #(reset! show-pages? not))
+        size-pages (mf/use-memo (mf/deps show-pages? size-pages-opened) (fn [] (if @show-pages? size-pages-opened 32)))
 
         handle-collapse
         (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
@@ -63,6 +65,7 @@
     [:& (mf/provider muc/sidebar) {:value :left}
      [:aside {:ref parent-ref
               :id "left-sidebar-aside"
+              :data-testid "left-sidebar"
               :data-size (str size)
               :class (stl/css-case :left-settings-bar true
                                    :global/two-row    (<= size 300)

frontend/src/app/main/ui/workspace/sidebar.scss

@@ -84,10 +84,8 @@ $width-settings-bar-max: $s-500;
 
 .resize-area-horiz {
   position: absolute;
-  // top: calc($s-88 + var(--height, 200px));
   left: 0;
   width: 100%;
-  // height: $s-8;
   border-bottom: $s-2 solid var(--resize-area-border-color);
   cursor: ns-resize;
 }

frontend/src/app/main/ui/workspace/sidebar/layers.cljs

@@ -510,7 +510,7 @@
         (mf/use-fn
          #(st/emit! (dw/toggle-focus-mode)))]
 
-    [:div#layers {:class (stl/css :layers) :data-testid "layers"}
+    [:div#layers {:class (stl/css :layers) :data-testid "layer-tree"}
      (if (d/not-empty? focus)
        [:div {:class (stl/css :tool-window-bar)}
         [:button {:class (stl/css :focus-title)

frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs

@@ -205,7 +205,6 @@
                         (fn [event]
                           (st/emit! (dw/create-page {:file-id file-id :project-id project-id}))
                           (-> event dom/get-current-target dom/blur!)))
-        size           (if show-pages? size 32)
         read-only?     (mf/use-ctx ctx/workspace-read-only?)]
 
     [:div {:class (stl/css :sitemap)