From 31061988753fd5f61b7c816b9d56b253761f9ea2 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Wed, 26 Mar 2025 10:13:37 -0600
Subject: [PATCH] better version selecting

---
 .../versionHistory/VersionHistoryPanel.tsx      |  5 +++--
 .../DashboardThreeDotMenu.tsx                   | 17 +++++++----------
 .../MetricThreeDotMenu.tsx                      |  2 +-
 web/src/styles/buster.scss                      |  8 ++++----
 4 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/web/src/components/features/versionHistory/VersionHistoryPanel.tsx b/web/src/components/features/versionHistory/VersionHistoryPanel.tsx
index 6c98381c8..0a868d149 100644
--- a/web/src/components/features/versionHistory/VersionHistoryPanel.tsx
+++ b/web/src/components/features/versionHistory/VersionHistoryPanel.tsx
@@ -2,7 +2,8 @@ import { useGetDashboard } from '@/api/buster_rest/dashboards';
 import { useGetMetric } from '@/api/buster_rest/metrics';
 import React, { useMemo } from 'react';
 import { Button } from '@/components/ui/buttons';
-import { Check3, Xmark } from '@/components/ui/icons';
+import { Xmark } from '@/components/ui/icons';
+import { Check3 } from '@/components/ui/icons/NucleoIconFilled';
 import { Text } from '@/components/ui/typography';
 import { useCloseVersionHistory } from '@/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/FileContainerVersionHistory';
 import { cn } from '@/lib/classMerge';
@@ -50,7 +51,7 @@ export const VersionHistoryPanel = React.memo(
         scrollable
         headerBorderVariant="ghost"
         headerClassName="border-l">
-        <div className="my-2 flex flex-col px-1">
+        <div className="mx-1.5 my-1.5 flex flex-col">
           {listItems?.map((item) => (
             <ListItem
               key={item.version_number}
diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx
index e1f5d93f1..476670870 100644
--- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx
+++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/DashboardContainerHeaderButtons/DashboardThreeDotMenu.tsx
@@ -83,22 +83,19 @@ export const DashboardThreeDotMenu = React.memo(({ dashboardId }: { dashboardId:
 DashboardThreeDotMenu.displayName = 'ThreeDotMenuButton';
 
 const useVersionHistorySelectMenu = ({ dashboardId }: { dashboardId: string }) => {
-  const DEFAULT_VERSION_HISTORY_ITEMS: DropdownItems = [];
   const { data } = useGetDashboard({ id: dashboardId }, (x) => ({
-    versions: x?.dashboard?.versions,
+    versions: x?.dashboard?.versions || [],
     version_number: x?.dashboard?.version_number
   }));
   const { versions, version_number } = data || {};
 
   const versionHistoryItems: DropdownItems = useMemo(() => {
-    return (
-      versions?.map((x) => ({
-        label: `Version ${x.version_number}`,
-        secondaryLabel: timeFromNow(x.updated_at, false),
-        value: x.version_number.toString(),
-        selected: x.version_number === version_number
-      })) || DEFAULT_VERSION_HISTORY_ITEMS
-    );
+    return [...(versions || [])].reverse().map((x) => ({
+      label: `Version ${x.version_number}`,
+      secondaryLabel: timeFromNow(x.updated_at, false),
+      value: x.version_number.toString(),
+      selected: x.version_number === version_number
+    }));
   }, [versions, version_number]);
 
   return useMemo(
diff --git a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx
index 3e17d19bb..bf28ccfe3 100644
--- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx
+++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx
@@ -190,7 +190,7 @@ const useVersionHistorySelectMenu = ({ metricId }: { metricId: string }) => {
   });
 
   const versionHistoryItems: DropdownItems = useMemo(() => {
-    return versions.map((x) => ({
+    return [...versions].reverse().map((x) => ({
       label: `Version ${x.version_number}`,
       secondaryLabel: timeFromNow(x.updated_at, false),
       value: x.version_number.toString(),
diff --git a/web/src/styles/buster.scss b/web/src/styles/buster.scss
index 5673bfca5..cd48a2cce 100644
--- a/web/src/styles/buster.scss
+++ b/web/src/styles/buster.scss
@@ -10,19 +10,19 @@
   scroll-timeline-name: --scrollShadowContainer;
 
   .scroll-header {
-    @apply fixed top-[30px] right-0 left-0 h-2 w-full;
+    @apply pointer-events-none absolute top-[0px] right-0 left-0 h-[0.5px] w-full border-b border-transparent;
     animation: shadowAnimation linear;
-    animation-range: 0px 100px;
+    animation-range: 0px 120px;
     animation-timeline: --scrollShadowContainer;
     animation-fill-mode: forwards;
   }
 
   @keyframes shadowAnimation {
     from {
-      box-shadow: 0px 0px 0px 0px var(--color-border) !important;
+      border-color: transparent;
     }
     to {
-      box-shadow: 0px 0px 0px 0.5px var(--color-border) !important;
+      border-color: var(--color-border);
     }
   }
 }