✨ Add the ability to log using logging subsystem the audit events

This template will be part of the open beta test for the new render, so that users can report issues for us to review.

.github/ISSUE_TEMPLATE/new-render-bug-report.md

@@ -0,0 +1,38 @@
+---
+name: New Render Bug Report
+about: Create a report about the bugs you have found in the new render
+title: ''
+labels: new render
+assignees: claragvinola
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Steps to Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots or screen recordings**
+If applicable, add screenshots or screen recording to help illustrate your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/workflows/build-bundle.yml

@@ -40,7 +40,7 @@ on:
 jobs:
   build-bundle:
     name: Build and Upload Penpot Bundle
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
     env:
       AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
       AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

.github/workflows/build-docker-devenv.yml

@@ -7,7 +7,7 @@ jobs:
   build-and-push:
     name: Build and push DevEnv Docker image
     environment: release-admins
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
 
     steps:
       - name: Checkout code

.github/workflows/build-docker.yml

@@ -19,7 +19,7 @@ on:
 jobs:
   build-and-push:
     name: Build and Push Penpot Docker Images
-    runs-on: ubuntu-24.04-arm
+    runs-on: self-hosted
 
     steps:
       - name: Checkout code

.github/workflows/tests.yml

@@ -21,7 +21,7 @@ concurrency:
 jobs:
   lint:
     name: "Linter"
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
     container: penpotapp/devenv:latest
 
     steps:
@@ -34,7 +34,7 @@ jobs:
 
   test-common:
     name: "Common Tests"
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
     container: penpotapp/devenv:latest
 
     steps:
@@ -53,7 +53,7 @@ jobs:
 
   test-plugins:
     name: Plugins Runtime Linter & Tests
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
 
     steps:
       - uses: actions/checkout@v4
@@ -98,7 +98,7 @@ jobs:
 
   test-frontend:
     name: "Frontend Tests"
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
     container: penpotapp/devenv:latest
 
     steps:
@@ -119,7 +119,7 @@ jobs:
 
   test-render-wasm:
     name: "Render WASM Tests"
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
     container: penpotapp/devenv:latest
 
     steps:
@@ -143,7 +143,7 @@ jobs:
 
   test-backend:
     name: "Backend Tests"
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
     container: penpotapp/devenv:latest
 
     services:
@@ -182,7 +182,7 @@ jobs:
 
   test-library:
     name: "Library Tests"
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
     container: penpotapp/devenv:latest
 
     steps:
@@ -196,7 +196,7 @@ jobs:
 
   build-integration:
     name: "Build Integration Bundle"
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
     container: penpotapp/devenv:latest
 
     steps:
@@ -217,7 +217,7 @@ jobs:
 
   test-integration-1:
     name: "Integration Tests 1/4"
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
     container: penpotapp/devenv:latest
     needs: build-integration
 
@@ -247,7 +247,7 @@ jobs:
 
   test-integration-2:
     name: "Integration Tests 2/4"
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
     container: penpotapp/devenv:latest
     needs: build-integration
 
@@ -277,7 +277,7 @@ jobs:
 
   test-integration-3:
     name: "Integration Tests 3/4"
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
     container: penpotapp/devenv:latest
     needs: build-integration
 
@@ -307,7 +307,7 @@ jobs:
 
   test-integration-4:
     name: "Integration Tests 4/4"
-    runs-on: ubuntu-24.04
+    runs-on: self-hosted
     container: penpotapp/devenv:latest
     needs: build-integration
 

CHANGES.md

@@ -12,6 +12,9 @@
 
 - Remap references when renaming tokens [Taiga #10202](https://tree.taiga.io/project/penpot/us/10202)
 - Tokens panel nested path view [Taiga #9966](https://tree.taiga.io/project/penpot/us/9966)
+- Improve usability of lock and hide buttons in the layer panel. [Taiga #12916](https://tree.taiga.io/project/penpot/issue/12916)
+
+### :bug: Bugs fixed
 
 ### :bug: Bugs fixed
 

backend/src/app/loggers/audit.clj

@@ -9,6 +9,7 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.json :as json]
    [app.common.logging :as l]
    [app.common.schema :as sm]
    [app.common.time :as ct]
@@ -223,7 +224,7 @@
       (some? tnow)
       (assoc :tracked-at tnow))))
 
-(defn- append-audit-entry!
+(defn- append-audit-entry
   [cfg params]
   (let [params (-> params
                    (update :props db/tjson)
@@ -236,6 +237,16 @@
   (let [params (event->params event)
         tnow   (ct/now)]
 
+    (when (contains? cf/flags :audit-log-logger)
+      (l/log! ::l/logger "app.audit"
+              ::l/level :info
+              :profile-id (str (::profile-id event))
+              :ip-addr (str (::ip-addr event))
+              :type (::type event)
+              :name (::name event)
+              :props (json/encode (::props event) :key-fn json/write-camel-key)
+              :context (json/encode (::context event) :key-fn json/write-camel-key)))
+
     (when (contains? cf/flags :audit-log)
       ;; NOTE: this operation may cause primary key conflicts on inserts
       ;; because of the timestamp precission (two concurrent requests), in
@@ -243,7 +254,7 @@
       (let [params (-> params
                        (assoc :created-at tnow)
                        (update :tracked-at #(or % tnow)))]
-        (append-audit-entry! cfg params)))
+        (append-audit-entry cfg params)))
 
     (when (and (or (contains? cf/flags :telemetry)
                    (cf/get :telemetry-enabled))
@@ -258,7 +269,7 @@
                        (update :tracked-at #(or % tnow))
                        (assoc :props {})
                        (assoc :context {}))]
-        (append-audit-entry! cfg params)))
+        (append-audit-entry cfg params)))
 
     (when (and (contains? cf/flags :webhooks)
                (::webhooks/event? event))
@@ -312,4 +323,4 @@
                            params (-> (event->params event)
                                       (assoc :created-at tnow)
                                       (update :tracked-at #(or % tnow)))]
-                       (append-audit-entry! cfg params)))))))
+                       (append-audit-entry cfg params)))))))

common/src/app/common/flags.cljc

@@ -62,6 +62,7 @@
   #{:audit-log
     :audit-log-archive
     :audit-log-gc
+    :audit-log-logger
     :auto-file-snapshot
     ;; enables the `/api/doc` endpoint that lists all the rpc methods available.
     :backend-api-doc

docs/scripts/build

@@ -1,8 +1,10 @@
 #!/usr/bin/env bash
 
-source ~/.bashrc
-
 set -ex
+
+corepack enable;
+corepack install;
+
 rm -rf ./_dist
-yarn
+yarn install
 yarn run build

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

@@ -139,30 +139,29 @@
                         :variant-properties variant-properties
                         :variant-error variant-error
                         :component-id (:id component)
-                        :is-hidden hidden?}]
-
-       (when (not read-only?)
-         [:div {:class (stl/css-case
-                        :element-actions true
-                        :is-parent has-shapes?
-                        :selected hidden?
-                        :selected blocked?)}
-          [:button {:class (stl/css-case
-                            :toggle-element true
-                            :selected hidden?)
-                    :title (if hidden?
-                             (tr "workspace.shape.menu.show")
-                             (tr "workspace.shape.menu.hide"))
-                    :on-click on-toggle-visibility}
-           (if ^boolean hidden? deprecated-icon/hide deprecated-icon/shown)]
-          [:button {:class (stl/css-case
-                            :block-element true
-                            :selected blocked?)
-                    :title (if (:blocked item)
-                             (tr "workspace.shape.menu.unlock")
-                             (tr "workspace.shape.menu.lock"))
-                    :on-click on-toggle-blocking}
-           (if ^boolean blocked? deprecated-icon/lock deprecated-icon/unlock)]])]]
+                        :is-hidden hidden?}]]
+      (when (not read-only?)
+        [:div {:class (stl/css-case
+                       :element-actions true
+                       :is-parent has-shapes?
+                       :selected hidden?
+                       :selected blocked?)}
+         [:button {:class (stl/css-case
+                           :toggle-element true
+                           :selected hidden?)
+                   :title (if hidden?
+                            (tr "workspace.shape.menu.show")
+                            (tr "workspace.shape.menu.hide"))
+                   :on-click on-toggle-visibility}
+          (if ^boolean hidden? deprecated-icon/hide deprecated-icon/shown)]
+         [:button {:class (stl/css-case
+                           :block-element true
+                           :selected blocked?)
+                   :title (if (:blocked item)
+                            (tr "workspace.shape.menu.unlock")
+                            (tr "workspace.shape.menu.lock"))
+                   :on-click on-toggle-blocking}
+          (if ^boolean blocked? deprecated-icon/lock deprecated-icon/unlock)]])]
 
      children]))
 

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

@@ -4,79 +4,81 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "refactor/common-refactor.scss" as deprecated;
 @use "ds/_utils.scss" as *;
+@use "ds/borders.scss" as *;
+@use "ds/_sizes.scss" as *;
 
 .layer-row {
-  --layer-indentation-size: calc(#{deprecated.$s-4} * 6);
+  --layer-indentation-size: var(--sp-xxl);
+  --layer-background-color: var(--color-background-primary);
+  --layer-foreground-color: inherit;
+  --shadow-color: transparent;
+  box-shadow: px2rem(16) px2rem(0) px2rem(0) px2rem(0) var(--shadow-color);
+
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: 100%;
-  background-color: var(--layer-row-background-color);
-  border: deprecated.$s-2 solid transparent;
+  inline-size: 100%;
+  background-color: var(--layer-background-color);
+  border: $b-2 solid transparent;
+  color: var(--layer-foreground-color);
 
   &.highlight,
   &:hover {
+    --layer-background-color: var(--color-background-secondary);
+    --shadow-color: var(--color-background-secondary);
     --context-hover-color: var(--layer-row-foreground-color-hover);
-    --context-hover-opacity: deprecated.$op-10;
-    background-color: var(--layer-row-background-color-hover);
-    color: var(--layer-row-foreground-color-hover);
-    box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
-      var(--layer-row-background-color-hover);
+    --context-hover-opacity: 1;
+    --layer-foreground-color: var(--layer-row-foreground-color-hover);
     &.hidden {
-      opacity: deprecated.$op-10;
+      opacity: 1;
     }
   }
 
   &.selected {
-    background-color: var(--layer-row-background-color-selected);
-    box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
-      var(--layer-row-background-color-selected);
+    --layer-background-color: var(--color-background-quaternary);
+    --shadow-color: var(--color-background-quaternary);
   }
 
   &.selected.highlight,
   &.selected:hover {
-    background-color: var(--layer-row-background-color-selected);
+    --layer-background-color: var(--color-background-quaternary);
   }
 
   .parent-selected & {
-    background-color: var(--layer-child-row-background-color);
-    box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
-      var(--layer-child-row-background-color);
+    --layer-background-color: var(--color-background-tertiary);
+    --shadow-color: var(--color-background-tertiary);
   }
 
   .parent-selected &.highlight,
   .parent-selected &:hover {
-    background-color: var(--layer-row-background-color-hover);
-    box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
-      var(--layer-row-background-color-hover);
+    --layer-background-color: var(--color-background-secondary);
+    --shadow-color: var(--color-background-secondary);
   }
 
   &.dnd-over-bot {
-    border-bottom: deprecated.$s-2 solid var(--layer-row-foreground-color-hover);
+    border-block-end: $b-2 solid var(--color-accent-primary);
   }
   &.dnd-over-top {
-    border-top: deprecated.$s-2 solid var(--layer-row-foreground-color-hover);
+    border-block-start: $b-2 solid var(--color-accent-primary);
   }
   &.dnd-over {
-    border: deprecated.$s-2 solid var(--layer-row-foreground-color-hover);
+    border: $b-2 solid var(--color-accent-primary);
   }
 }
 
 .element-children {
   .layer-row.highlight &,
   .layer-row:hover & {
-    background-color: var(--layer-row-background-color-selected);
-    box-shadow: deprecated.$s-16 deprecated.$s-0 deprecated.$s-0 deprecated.$s-0
-      var(--layer-row-background-color-selected);
+    --layer-background-color: var(--color-background-quaternary);
+    --shadow-color: var(--color-background-quaternary);
   }
   .layer-row.type-comp & {
-    color: var(--layer-row-component-foreground-color);
+    --layer-foreground-color: var(--color-accent-secondary);
   }
   .layer-row.selected & {
-    background-color: transparent;
-    color: var(--layer-row-foreground-color-selected);
+    --layer-background-color: transparent;
+    --layer-foreground-color: var(--color-accent-primary);
   }
 }
 
@@ -84,21 +86,22 @@
   align-items: center;
   display: grid;
   grid-template-columns: auto 1fr auto;
-  column-gap: deprecated.$s-4;
-  height: deprecated.$s-32;
-  width: calc(100% - (var(--depth) * var(--layer-indentation-size)));
+  column-gap: var(--sp-xs);
+  block-size: $sz-32;
+  inline-size: calc(100% - (var(--depth) * var(--layer-indentation-size)));
   cursor: pointer;
-  min-width: px2rem(140);
+  min-inline-size: px2rem(140);
   &.filtered {
-    width: calc(100% - deprecated.$s-12);
+    inline-size: calc(100% - $sz-12);
   }
 }
 
 .element-actions {
-  display: none;
-  height: 100%;
   display: flex;
   align-items: end;
+  position: sticky;
+  inset-inline-end: 0;
+  block-size: $sz-32;
 
   &.selected {
     display: flex;
@@ -111,95 +114,107 @@
 
 .button-content {
   display: flex;
-  height: 100%;
+  block-size: 100%;
 }
 
 .icon-shape {
-  @include deprecated.flexCenter;
-  @include deprecated.buttonStyle;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background: none;
+  cursor: pointer;
   position: relative;
   justify-self: flex-end;
-  width: deprecated.$s-16;
-  height: 100%;
-  width: deprecated.$s-24;
-  padding-inline-start: deprecated.$s-4;
-  color: var(--icon-foreground);
+  block-size: 100%;
+  inline-size: $sz-24;
+  padding-inline-start: var(--sp-xs);
+  color: var(--color-foreground-secondary);
   .layer-row.selected & {
-    color: var(--layer-row-foreground-color-selected);
+    color: var(--color-accent-primary);
   }
   .layer-row.type-comp & {
-    color: var(--layer-row-component-foreground-color);
+    color: var(--color-accent-secondary);
   }
   .inverse & {
     transform: rotate(-90deg);
   }
   .layer-row.hidden & {
-    opacity: deprecated.$op-7;
+    opacity: 0.7;
   }
   .layer-row.highlight &,
   .layer-row:hover & {
-    opacity: deprecated.$op-10;
+    opacity: 1;
     svg {
-      stroke: var(--layer-row-foreground-color-hover);
+      stroke: var(--color-accent-primary);
     }
   }
 }
 
 .absolute {
   position: absolute;
-  background-color: var(--layer-row-foreground-color);
-  opacity: deprecated.$op-4;
-  width: deprecated.$s-12;
-  height: deprecated.$s-12;
-  border-radius: deprecated.$br-2;
+  background-color: var(--color-foreground-secondary);
+  opacity: 0.4;
+  inline-size: $sz-12;
+  block-size: $sz-12;
+  border-radius: px2rem(2);
 
   .layer-row.hidden & {
-    opacity: deprecated.$op-1;
+    opacity: 0.1;
   }
   .layer-row.type-comp & {
-    background-color: var(--layer-row-component-foreground-color);
+    background-color: var(--color-accent-secondary);
   }
   .layer-row.highlight &,
   .layer-row:hover & {
-    opacity: deprecated.$op-4;
-    background-color: var(--layer-row-foreground-color-hover);
+    opacity: 0.4;
+    background-color: var(--color-accent-primary);
   }
   .layer-row.selected & {
-    background-color: var(--layer-row-foreground-color-selected);
+    background-color: var(--color-accent-primary);
   }
 }
 
 .toggle-content {
-  @include deprecated.buttonStyle;
+  border: none;
+  background: none;
+  cursor: pointer;
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
-  height: 100%;
-  width: deprecated.$s-24;
-  padding-inline-start: deprecated.$s-8;
+  block-size: 100%;
+  inline-size: $sz-24;
+  padding-inline-start: var(--sp-s);
 
   svg {
-    @extend .button-icon-small;
-    stroke: var(--icon-foreground);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: transparent;
+    fill: none;
+    block-size: $sz-12;
+    inline-size: $sz-12;
+    stroke-width: 1.33px;
+    stroke: var(--color-foreground-secondary);
 
     .layer-row.hidden & {
-      opacity: deprecated.$op-7;
+      opacity: 0.7;
     }
     .layer-row.selected & {
-      stroke: var(--layer-row-foreground-color-selected);
+      stroke: var(--color-accent-primary);
     }
     .layer-row.type-comp & {
-      stroke: var(--layer-row-component-foreground-color);
+      stroke: var(--color-accent-secondary);
     }
     .layer-row.highlight &,
     .layer-row:hover & {
-      opacity: deprecated.$op-10;
-      stroke: var(--layer-row-foreground-color-hover);
+      opacity: 1;
+      stroke: var(--color-accent-primary);
     }
   }
 
   .layer-row.selected & {
-    background-color: var(--layer-row-background-color-selected);
+    background-color: var(--color-background-quaternary);
   }
   &.inverse svg {
     transform: rotate(90deg);
@@ -208,65 +223,78 @@
 
 .toggle-element,
 .block-element {
-  @include deprecated.buttonStyle;
-  @include deprecated.flexCenter;
-  height: 100%;
-  width: deprecated.$s-24;
+  --layer-row-action-btn-background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: 100%;
+  inline-size: $sz-24;
   margin: 0;
   display: none;
-
+  background: var(--layer-row-action-btn-background);
+  padding-inline-end: px2rem(6);
   svg {
-    @extend .button-icon-small;
-    stroke: var(--icon-foreground);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: transparent;
+    fill: none;
+    block-size: $sz-12;
+    inline-size: $sz-12;
+    stroke-width: 1.33px;
+    stroke: var(--color-foreground-secondary);
 
     .layer-row.hidden & {
-      opacity: deprecated.$op-7;
+      opacity: 0.7;
     }
     .type-comp & {
-      stroke: var(--layer-row-component-foreground-color);
+      stroke: var(--color-accent-secondary);
     }
   }
 
   .element-actions.selected & {
     display: flex;
-    opacity: deprecated.$op-0;
-
+    opacity: 0;
     &.selected {
-      opacity: deprecated.$op-10;
+      opacity: 1;
     }
   }
 
   .layer-row:hover .element-actions.selected & {
-    opacity: deprecated.$op-10;
+    opacity: 1;
   }
 
   .layer-row.highlight &,
   .layer-row:hover & {
     display: flex;
+    --layer-row-action-btn-background: var(--color-background-secondary);
     svg {
-      opacity: deprecated.$op-10;
-      stroke: var(--layer-row-foreground-color-hover);
+      opacity: 1;
+      stroke: var(--color-accent-primary);
     }
   }
   .layer-row.selected & {
     display: flex;
+    --layer-row-action-btn-background: var(--color-background-quaternary);
     svg {
-      stroke: var(--layer-row-foreground-color-selected);
+      stroke: var(--color-accent-primary);
     }
   }
 }
 
 :global(.sticky) {
   position: sticky;
-  top: deprecated.$s-0;
-  z-index: deprecated.$z-index-4;
+  inset-block-start: 0;
+  z-index: 4;
 }
 
 .tab-indentation {
   display: block;
-  height: deprecated.$s-16;
-  min-width: calc(var(--depth) * var(--layer-indentation-size));
+  block-size: $sz-16;
+  min-inline-size: calc(var(--depth) * var(--layer-indentation-size));
 }
 .filtered {
-  min-width: deprecated.$s-12;
+  min-inline-size: $sz-12;
 }

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

@@ -180,6 +180,8 @@
   overflow-y: overlay;
   scrollbar-gutter: stable;
 }
+
 .element-list {
   display: grid;
+  position: relative;
 }