better version selecting

This commit is contained in:
Nate Kelley 2025-03-26 10:13:37 -06:00
parent 1a361bf102
commit 3106198875
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
4 changed files with 15 additions and 17 deletions

View File

@ -2,7 +2,8 @@ import { useGetDashboard } from '@/api/buster_rest/dashboards';
import { useGetMetric } from '@/api/buster_rest/metrics'; import { useGetMetric } from '@/api/buster_rest/metrics';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { Button } from '@/components/ui/buttons'; 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 { Text } from '@/components/ui/typography';
import { useCloseVersionHistory } from '@/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/FileContainerVersionHistory'; import { useCloseVersionHistory } from '@/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/FileContainerVersionHistory';
import { cn } from '@/lib/classMerge'; import { cn } from '@/lib/classMerge';
@ -50,7 +51,7 @@ export const VersionHistoryPanel = React.memo(
scrollable scrollable
headerBorderVariant="ghost" headerBorderVariant="ghost"
headerClassName="border-l"> 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) => ( {listItems?.map((item) => (
<ListItem <ListItem
key={item.version_number} key={item.version_number}

View File

@ -83,22 +83,19 @@ export const DashboardThreeDotMenu = React.memo(({ dashboardId }: { dashboardId:
DashboardThreeDotMenu.displayName = 'ThreeDotMenuButton'; DashboardThreeDotMenu.displayName = 'ThreeDotMenuButton';
const useVersionHistorySelectMenu = ({ dashboardId }: { dashboardId: string }) => { const useVersionHistorySelectMenu = ({ dashboardId }: { dashboardId: string }) => {
const DEFAULT_VERSION_HISTORY_ITEMS: DropdownItems = [];
const { data } = useGetDashboard({ id: dashboardId }, (x) => ({ const { data } = useGetDashboard({ id: dashboardId }, (x) => ({
versions: x?.dashboard?.versions, versions: x?.dashboard?.versions || [],
version_number: x?.dashboard?.version_number version_number: x?.dashboard?.version_number
})); }));
const { versions, version_number } = data || {}; const { versions, version_number } = data || {};
const versionHistoryItems: DropdownItems = useMemo(() => { const versionHistoryItems: DropdownItems = useMemo(() => {
return ( return [...(versions || [])].reverse().map((x) => ({
versions?.map((x) => ({ label: `Version ${x.version_number}`,
label: `Version ${x.version_number}`, secondaryLabel: timeFromNow(x.updated_at, false),
secondaryLabel: timeFromNow(x.updated_at, false), value: x.version_number.toString(),
value: x.version_number.toString(), selected: x.version_number === version_number
selected: x.version_number === version_number }));
})) || DEFAULT_VERSION_HISTORY_ITEMS
);
}, [versions, version_number]); }, [versions, version_number]);
return useMemo( return useMemo(

View File

@ -190,7 +190,7 @@ const useVersionHistorySelectMenu = ({ metricId }: { metricId: string }) => {
}); });
const versionHistoryItems: DropdownItems = useMemo(() => { const versionHistoryItems: DropdownItems = useMemo(() => {
return versions.map((x) => ({ return [...versions].reverse().map((x) => ({
label: `Version ${x.version_number}`, label: `Version ${x.version_number}`,
secondaryLabel: timeFromNow(x.updated_at, false), secondaryLabel: timeFromNow(x.updated_at, false),
value: x.version_number.toString(), value: x.version_number.toString(),

View File

@ -10,19 +10,19 @@
scroll-timeline-name: --scrollShadowContainer; scroll-timeline-name: --scrollShadowContainer;
.scroll-header { .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: shadowAnimation linear;
animation-range: 0px 100px; animation-range: 0px 120px;
animation-timeline: --scrollShadowContainer; animation-timeline: --scrollShadowContainer;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
@keyframes shadowAnimation { @keyframes shadowAnimation {
from { from {
box-shadow: 0px 0px 0px 0px var(--color-border) !important; border-color: transparent;
} }
to { to {
box-shadow: 0px 0px 0px 0.5px var(--color-border) !important; border-color: var(--color-border);
} }
} }
} }