Merge pull request #6017 from penpot/alotor-bugfix

🐛 Fix problem with selection colors

CHANGES.md

@@ -1,6 +1,35 @@
 # CHANGELOG
 
-## 2.5.0 (Unreleased)
+## 2.5.2
+
+### :rocket: Epics and highlights
+
+### :boom: Breaking changes & Deprecations
+
+### :heart: Community contributions (Thank you!)
+
+### :sparkles: New features
+
+### :bug: Bugs fixed
+
+- Navigate tracking event firing multiple times [Taiga #10415](https://tree.taiga.io/project/penpot/issue/10415)
+- Fix problem with selection colors [Taiga #](https://tree.taiga.io/project/penpot/issue/10376)
+
+## 2.5.1
+
+### :rocket: Epics and highlights
+
+### :boom: Breaking changes & Deprecations
+
+### :heart: Community contributions (Thank you!)
+
+### :sparkles: New features
+
+- Improve Nginx entryponit to get the resolvers dinamically by default
+
+### :bug: Bugs fixed
+
+## 2.5.0
 
 ### :rocket: Epics and highlights
 

docker/images/Dockerfile.frontend

@@ -11,6 +11,7 @@ RUN set -ex; \
 ADD ./bundle-frontend/ /var/www/app/
 ADD ./files/config.js /var/www/app/js/config.js
 ADD ./files/nginx.conf /etc/nginx/nginx.conf.template
+ADD ./files/resolvers.conf /etc/nginx/overrides.d/resolvers.conf.template
 ADD ./files/nginx-mime.types /etc/nginx/mime.types
 ADD ./files/nginx-entrypoint.sh /entrypoint.sh
 

docker/images/files/nginx-entrypoint.sh

@@ -21,10 +21,14 @@ update_flags /var/www/app/js/config.js
 
 export PENPOT_BACKEND_URI=${PENPOT_BACKEND_URI:-http://penpot-backend:6060};
 export PENPOT_EXPORTER_URI=${PENPOT_EXPORTER_URI:-http://penpot-exporter:6061};
-export PENPOT_INTERNAL_RESOLVER=${PENPOT_INTERNAL_RESOLVER:-127.0.0.11};
+PENPOT_DEFAULT_INTERNAL_RESOLVER="$(awk 'BEGIN{ORS=" "} $1=="nameserver" { sub(/%.*$/,"",$2); print ($2 ~ ":")? "["$2"]": $2}' /etc/resolv.conf)";
+export PENPOT_INTERNAL_RESOLVER=${PENPOT_INTERNAL_RESOLVER:-$PENPOT_DEFAULT_INTERNAL_RESOLVER};
 export PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE=${PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE:-367001600}; # Default to 350MiB
 
-envsubst "\$PENPOT_BACKEND_URI,\$PENPOT_EXPORTER_URI,\$PENPOT_INTERNAL_RESOLVER,\$PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE" \
-         < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf
+envsubst "\$PENPOT_BACKEND_URI,\$PENPOT_EXPORTER_URI,\$PENPOT_HTTP_SERVER_MAX_MULTIPART_BODY_SIZE" \
+         < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf;
+
+envsubst "\$PENPOT_INTERNAL_RESOLVER" \
+         < /etc/nginx/overrides.d/resolvers.conf.template > /etc/nginx/overrides.d/resolvers.conf;
 
 exec "$@";

docker/images/files/nginx.conf

@@ -46,7 +46,6 @@ http {
     proxy_buffer_size 16k;
     proxy_busy_buffers_size 24k; # essentially, proxy_buffer_size + 2 small buffers of 4k
     proxy_buffers 32 4k;
-    resolver $PENPOT_INTERNAL_RESOLVER ipv6=off;
 
     map $http_upgrade $connection_upgrade {
         default upgrade;

docker/images/files/resolvers.conf

@@ -0,0 +1 @@
+resolver $PENPOT_INTERNAL_RESOLVER ipv6=off valid=10s;

docs/technical-guide/getting-started.md

@@ -280,6 +280,67 @@ Postgres database and another one for the assets uploaded by your users (images
 clips). There may be more volumes if you enable other features, as explained in the file
 itself.
 
+### Configure the proxy
+
+Your host configuration needs to make a proxy to http://localhost:9001.
+
+#### Example with NGINX
+
+```bash
+server {
+  listen 80;
+  server_name penpot.mycompany.com;
+  return 301 https://$host$request_uri;
+}
+
+server {
+  listen 443 ssl;
+  server_name penpot.mycompany.com;
+
+  # This value should be in sync with the corresponding in the docker-compose.yml
+  # PENPOT_HTTP_SERVER_MAX_BODY_SIZE: 31457280
+  client_max_body_size 31457280;
+
+  # Logs: Configure your logs following the best practices inside your company
+  access_log /path/to/penpot.access.log;
+  error_log /path/to/penpot.error.log;
+
+  # TLS: Configure your TLS following the best practices inside your company
+  ssl_certificate /path/to/fullchain;
+  ssl_certificate_key /path/to/privkey;
+
+  # Websockets
+  location /ws/notifications {
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection 'upgrade';
+    proxy_pass http://localhost:9001/ws/notifications;
+  }
+
+  # Proxy pass
+  location / {
+    proxy_set_header Host $http_host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Scheme $scheme;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_redirect off;
+    proxy_pass http://localhost:9001/;
+  }
+}
+```
+
+#### Example with CADDY SERVER
+
+```bash
+penpot.mycompany.com {
+        reverse_proxy :9001
+        tls /path/to/fullchain.pem /path/to/privkey.pem
+        log {
+            output file /path/to/penpot.log
+        }
+}
+```
+
 ### Troubleshooting
 
 Knowing how to do Penpot troubleshooting can be very useful; on the one hand, it helps to create issues easier to resolve, since they include relevant information from the beginning which also makes them get solved faster; on the other hand, many times troubleshooting gives the necessary information to resolve a problem autonomously, without even creating an issue.
@@ -350,7 +411,6 @@ you need.
 Therefore, your prerequisite will be to have a Kubernetes cluster on which we can install
 Helm.
 
-
 ### What is Helm
 
 *Helm* is the package manager for Kubernetes. A *Chart* is a Helm package. It contains

frontend/src/app/main/router.cljs

@@ -62,18 +62,21 @@
 ;; --- Navigate (Event)
 
 (defn navigated
-  [match]
+  [match send-event-info?]
   (ptk/reify ::navigated
     IDeref
     (-deref [_] match)
 
-    ev/Event
-    (-data [_]
-      (let [route  (dm/get-in match [:data :name])
-            params (get match :path-params)]
-        (assoc params
-               ::ev/name "navigate"
-               :route (name route))))
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (when send-event-info?
+        (let [route  (dm/get-in match [:data :name])
+              params (get match :query-params)]
+          (rx/of (ptk/event
+                  ::ev/event
+                  (assoc params
+                         ::ev/name "navigate"
+                         :route (name route)))))))
 
     ptk/UpdateEvent
     (update [_ state]
@@ -186,6 +189,21 @@
 
 ;; --- History API
 
+;; Check the urls to see if we need to send the navigated event.
+;; If two paths are the same we only send the event when there is a
+;; change in the parameters `file-id`, `page-id` or `team-id`
+(defn- send-event-info?
+  [old-url new-url]
+  (let [params [:file-id :page-id :team-id]
+        new-uri (u/uri new-url)
+        new-path (:path new-uri)
+        new-params (-> new-uri :query u/query-string->map (select-keys params))
+        old-uri (u/uri old-url)
+        old-path (:path old-uri)
+        old-params (-> old-uri :query u/query-string->map (select-keys params))]
+    (or (not= old-path new-path)
+        (not= new-params old-params))))
+
 (defn initialize-history
   [on-change]
   (ptk/reify ::initialize-history
@@ -200,11 +218,19 @@
       (let [stopper (rx/filter (ptk/type? ::initialize-history) stream)
             history (:history state)
             router  (:router state)]
-        (ts/schedule #(on-change router (.getToken ^js history)))
-        (->> (rx/create (fn [subs]
-                          (let [key (e/listen history "navigate" (fn [o] (rx/push! subs (.-token ^js o))))]
-                            (fn []
-                              (bhistory/disable! history)
-                              (e/unlistenByKey key)))))
+        (ts/schedule #(on-change router (.getToken ^js history) true))
+        (->> (rx/concat
+              (rx/of nil nil)
+              (rx/create
+               (fn [subs]
+                 (let [key (e/listen history "navigate" (fn [o] (rx/push! subs (.-token ^js o))))]
+                   (fn []
+                     (bhistory/disable! history)
+                     (e/unlistenByKey key))))))
+             (rx/buffer 2 1)
              (rx/take-until stopper)
-             (rx/subs! #(on-change router %)))))))
+             (rx/subs!
+              (fn [[old-url new-url]]
+                (when (some? new-url)
+                  (let [send? (or (nil? old-url) (send-event-info? old-url new-url))]
+                    (on-change router new-url send?))))))))))

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

@@ -959,6 +959,7 @@
         on-power-up-click
         (mf/use-fn
          (fn []
+           (st/emit! (ptk/event ::ev/event {::ev/name "explore-pricing-click" ::ev/origin "dashboard" :section "sidebar"}))
            (dom/open-new-window "https://penpot.app/pricing")))]
 
     [:*

frontend/src/app/main/ui/routes.cljs

@@ -88,7 +88,7 @@
              :plugin-url plugin))))
 
 (defn on-navigate
-  [router path]
+  [router path send-event-info?]
   (let [location        (.-location js/document)
         [base-path qs]  (str/split path "?")
         location-path   (dm/str (.-origin location) (.-pathname location))
@@ -102,7 +102,7 @@
       (st/emit! (rt/assign-exception {:type :not-found}))
 
       (some? match)
-      (st/emit! (rt/navigated match))
+      (st/emit! (rt/navigated match send-event-info?))
 
       :else
       ;; We just recheck with an additional profile request; this

frontend/src/app/main/ui/shapes/text.cljs

@@ -35,5 +35,8 @@
 
     ;; Old components can have texts without position data that must be rendered via foreign key
     (cond
-      (some? position-data) [:> svg/text-shape props]
-      is-component?             [:> fo/text-shape props])))
+      (some? position-data)
+      [:> svg/text-shape props]
+
+      (or (nil? position-data) is-component?)
+      [:> fo/text-shape props])))

frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs

@@ -25,7 +25,7 @@
    [rumext.v2 :as mf]))
 
 (mf/defc options*
-  [{:keys [shape file-id shapes-with-children shared-libs] :as props}]
+  [{:keys [shape file-id shapes-with-children libraries] :as props}]
   (let [shape-id   (dm/get-prop shape :id)
         shape-type (dm/get-prop shape :type)
 
@@ -116,7 +116,7 @@
      [:> color-selection-menu* {:type shape-type
                                 :shapes shapes-with-children
                                 :file-id file-id
-                                :libraries shared-libs}]
+                                :libraries libraries}]
      [:> shadow-menu* {:ids ids :values (get shape :shadow)}]
      [:& blur-menu {:ids ids
                     :values (select-keys shape [:blur])}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs

@@ -292,7 +292,7 @@
 
         page-id (unchecked-get props "page-id")
         file-id (unchecked-get props "file-id")
-        shared-libs (unchecked-get props "shared-libs")
+        shared-libs (unchecked-get props "libraries")
 
         show-caps (some #(and (= :path (:type %)) (gsh/open-path? %)) shapes)