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 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}

View File

@ -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(

View File

@ -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(),

View File

@ -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);
}
}
}