🐛 Fix asset name on inspect tab (#6173)

Signed-off-by: Eva Marco <eva.marco@kaleidos.net>

CHANGES.md

@@ -40,6 +40,8 @@
 - Fix problem with constraints when creating group [Taiga #10455](https://tree.taiga.io/project/penpot/issue/10455)
 - Fix opening pen with shortcut multiple times breaks toolbar [Taiga #10566](https://tree.taiga.io/project/penpot/issue/10566)
 - Fix actions when workspace is visited first time [Taiga #10548](https://tree.taiga.io/project/penpot/issue/10548)
+- Chat icon overlaps "Show" button in carrousel section [Taiga #10542](https://tree.taiga.io/project/penpot/issue/10542)
+- Fix assets name on inspect tab [Taiga #10630](https://tree.taiga.io/project/penpot/issue/10630)
 - Fix chat icon overlaps "Show" button in carrousel section [Taiga #10542](https://tree.taiga.io/project/penpot/issue/10542)
 - Fix incorrect handling of background task result (now task rows are properly marked as completed)
 

backend/src/app/rpc/commands/viewer.clj

@@ -78,7 +78,10 @@
                   :always
                   (update :data select-keys [:id :options :pages :pages-index :components]))
 
-        libs    (files/get-file-libraries conn file-id)
+        libs    (->> (files/get-file-libraries conn file-id)
+                     (mapv (fn [{:keys [id] :as lib}]
+                             (merge lib (files/get-file cfg id)))))
+
         links   (->> (db/query conn :share-link {:file-id file-id})
                      (mapv (fn [row]
                              (-> row

frontend/playwright/ui/pages/WorkspacePage.js

@@ -245,6 +245,9 @@ export class WorkspacePage extends BaseWebSocketPage {
   async clickAssets(clickOptions = {}) {
     await this.sidebar.getByText("Assets").click(clickOptions);
   }
+  async clickLayers(clickOptions = {}) {
+    await this.sidebar.getByText("Layers").click(clickOptions);
+  }
 
   async openLibrariesModal(clickOptions = {}) {
     await this.sidebar.getByTestId("libraries").click(clickOptions);

frontend/playwright/ui/specs/inspect-layout.spec.js

@@ -70,3 +70,55 @@ test("[Taiga #9116] Copy CSS background color in the selected format in the INSP
   );
   expect(rgbaColorText).toContain("background: rgba(");
 });
+
+test("[Taiga #10630] [INSPECT] Style assets not being displayed on info tab", async ({
+  page,
+  context,
+}) => {
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.setupEmptyFile(page);
+  await workspacePage.goToWorkspace();
+  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.clickColorPalette();
+  await workspacePage.clickAssets();
+  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();
+
+  await workspacePage.clickLayers();
+
+  await workspacePage.rectShapeButton.click();
+  await workspacePage.clickWithDragViewportAt(128, 128, 200, 100);
+  await workspacePage.clickLeafLayer("Rectangle");
+  await workspacePage.palette
+    .getByRole("button", { name: "test-color-187cd5" })
+    .click();
+
+  const inspectButton = workspacePage.page.getByRole("tab", {
+    name: "Inspect",
+  });
+  await inspectButton.click();
+
+  const colorLibraryName = workspacePage.page.getByTestId("color-library-name");
+
+  await expect(colorLibraryName).toHaveText("test-color-187cd5");
+});

frontend/src/app/main/data/viewer.cljs

@@ -189,6 +189,8 @@
               (assoc :share-links share-links)
               (assoc :current-team-id team-id)
               (assoc :teams {team-id team})
+              (assoc :files (-> (d/index-by :id libraries)
+                                (assoc (:id file) file)))
               (assoc :viewer {:libraries (d/index-by :id libraries)
                               :users (d/index-by :id users)
                               :permissions permissions

frontend/src/app/main/ui/inspect/attributes/common.cljs

@@ -32,16 +32,11 @@
           (get-in state [libraries-place file-id :data :colors]))]
     (l/derived get-library st/state)))
 
-(defn- get-colors-library [color]
-  (let [colors-library-v  (-> (mf/use-memo
-                               (mf/deps (:file-id color))
-                               #(make-colors-library-ref :viewer-libraries (:file-id color)))
-                              mf/deref)
-        colors-library-ws (-> (mf/use-memo
-                               (mf/deps (:file-id color))
-                               #(make-colors-library-ref :libraries (:file-id color)))
-                              mf/deref)]
-    (or colors-library-v colors-library-ws)))
+(defn- use-colors-library [color]
+  (-> (mf/use-memo
+       (mf/deps (:file-id color))
+       #(make-colors-library-ref :files (:file-id color)))
+      mf/deref))
 
 (defn- get-file-colors []
   (or (mf/deref file-colors-ref) (mf/deref refs/workspace-file-colors)))
@@ -54,7 +49,7 @@
     (str/capital $)))
 
 (mf/defc color-row [{:keys [color format copy-data on-change-format]}]
-  (let [colors-library     (get-colors-library color)
+  (let [colors-library     (use-colors-library color)
         file-colors        (get-file-colors)
         color-library-name (get-in (or colors-library file-colors) [(:id color) :name])
         color              (assoc color :color-library-name color-library-name)
@@ -85,7 +80,8 @@
 
             (when color-library-name
               [:div {:class (stl/css :second-row)}
-               [:div {:class (stl/css :color-name-library)}
+               [:div {:class (stl/css :color-name-library)
+                      :data-testid "color-library-name"}
                 color-library-name]])]]
 
           [:div {:class (stl/css :image-download)}
@@ -146,6 +142,7 @@
 
         (when color-library-name
           [:div {:class (stl/css :second-row)}
-           [:div {:class (stl/css :color-name-library)}
+           [:div {:class (stl/css :color-name-library)
+                  :data-testid "color-library-name"}
             color-library-name]])]])))