🐛 Fix incorrect version visibility on workspace (#8463)

* 🐛 Add missing order by clause to snapshot query

This fixes the incorrect snapshot visibility when file
has a lot of versions.

* ⚡ Reduce allocation on milestone-group* component

* 🐛 Fix milestone group timestamp formatting

* 📎 Update changelog

* 🐛 Fix scroll on history panel

---------

Co-authored-by: Eva Marco <evamarcod@gmail.com>

CHANGES.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 2.13.4
+
+### :bug: Bugs fixed
+
+- Fix incorrect query for file versions [Github #8463](https://github.com/penpot/penpot/pull/8463)
+
+
 ## 2.13.3
 
 ### :bug: Bugs fixed

backend/src/app/features/file_snapshots.clj

@@ -138,6 +138,7 @@
                  c.deleted_at
             FROM snapshots1 AS c
            WHERE c.file_id = ?
+           ORDER BY c.created_at DESC
        ), snapshots3 AS (
           (SELECT * FROM snapshots2
             WHERE created_by = 'system'
@@ -150,8 +151,7 @@
               AND deleted_at IS NULL
             LIMIT 500)
        )
-       SELECT * FROM snapshots3
+       SELECT * FROM snapshots3;"))
-        ORDER BY created_at DESC"))
 
 (defn get-visible-snapshots
   "Return a list of snapshots fecheable from the API, it has a limited

common/src/app/common/time.cljc

@@ -208,7 +208,7 @@
                 (dfn-format v "p")
 
                 :localized-date-time
-                (dfn-format v "PPPp")
+                (dfn-format v "PPP . p")
 
                 (if (string? fmt)
                   (dfn-format v fmt)

frontend/src/app/main/ui/ds/layout/tab_switcher.scss

@@ -114,4 +114,5 @@
   width: 100%;
   height: 100%;
   outline: $b-1 solid var(--tab-panel-outline-color);
+  overflow-y: auto;
 }

frontend/src/app/main/ui/ds/product/milestone_group.cljs

@@ -39,7 +39,6 @@
         (mf/spread-props props
                          {:class [class class']
                           :data-testid "milestone"})
-
         open*
         (mf/use-state false)
 
@@ -57,7 +56,13 @@
                            (dom/get-data "index")
                            (d/parse-integer))]
              (when (fn? on-menu-click)
-               (on-menu-click index event)))))]
+               (on-menu-click index event)))))
+
+        snapshots
+        (mf/with-memo [snapshots]
+          (map-indexed (fn [index date]
+                         (d/vec2 date index))
+                       snapshots))]
 
     [:> :div props
      [:> text*  {:as "span" :typography t/body-small :class (stl/css :name)} label]
@@ -76,14 +81,14 @@
                                        :icon-arrow-toggled open?)}]]
 
       (when ^boolean open?
-        (for [[idx d] (d/enumerate snapshots)]
+        (for [[date index] snapshots]
-          [:div {:key (dm/str "entry-" idx)
+          [:div {:key (dm/str "entry-" index)
                  :class (stl/css :version-entry)}
-           [:> date* {:date d :class (stl/css :date) :typography t/body-small}]
+           [:> date* {:date date :class (stl/css :date) :typography t/body-small}]
            [:> icon-button* {:class (stl/css :entry-button)
                              :variant "ghost"
                              :icon i/menu
                              :aria-label (tr "workspace.versions.version-menu")
-                             :data-index idx
+                             :data-index index
                              :on-click on-menu-click}]]))]]))
 

frontend/src/app/main/ui/ds/utilities/date.cljs

@@ -6,10 +6,8 @@
 
 (ns app.main.ui.ds.utilities.date
   (:require-macros
-   [app.common.data.macros :as dm]
    [app.main.style :as stl])
   (:require
-   [app.common.data :as d]
    [app.common.time :as ct]
    [app.main.ui.ds.foundations.typography :as t]
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
@@ -30,15 +28,10 @@
 (mf/defc date*
   {::mf/schema schema:date}
   [{:keys [class date selected typography] :rest props}]
-  (let [class (d/append-class class (stl/css-case :date true :is-selected selected))
+  (let [date       (cond-> date (not (ct/inst? date)) ct/inst)
-        date  (cond-> date (not (ct/inst? date)) ct/inst)
         typography (or typography t/body-medium)]
     [:> text* {:as "time"
                :typography typography
-               :class class
+               :class [class (stl/css-case :date true :is-selected selected)]
                :date-time (ct/format-inst date :iso)}
-     (dm/str
+     (ct/format-inst date :localized-date-time)]))
-      (ct/format-inst date :localized-date)
-      " . "
-      (ct/format-inst date :localized-time)
-      "h")]))

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

@@ -159,3 +159,7 @@
   overflow: hidden;
   height: calc(100vh - deprecated.$s-88);
 }
+
+.history-tab {
+  overflow-y: auto;
+}