restore version updates

2025-03-28 15:15:49 -06:00 · 2025-03-28 15:15:49 -06:00 · 26ec6c4589
parent fbc5af0f2c
commit 26ec6c4589
3 changed files with 204 additions and 98 deletions
--- a/web/src/components/features/versionHistory/VersionHistoryPanel.tsx
+++ b/web/src/components/features/versionHistory/VersionHistoryPanel.tsx
@ -1,22 +1,26 @@
-import { useGetDashboard } from '@/api/buster_rest/dashboards';
-import { useGetMetric } from '@/api/buster_rest/metrics';
 import React, { useMemo, useRef } from 'react';
 import { Button } from '@/components/ui/buttons';
-import { Xmark } from '@/components/ui/icons';
+import { Xmark, History } from '@/components/ui/icons';
 import { Check3 } from '@/components/ui/icons/NucleoIconFilled';
 import { Text } from '@/components/ui/typography';
 import { useCloseVersionHistory } from '@/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory';
 import { cn } from '@/lib/classMerge';
 import { timeFromNow, timeout } from '@/lib';
 import { AppPageLayout } from '@/components/ui/layouts';
-import { useSearchParams } from 'next/navigation';
-import last from 'lodash/last';
 import { useListVersionHistories } from './useListVersionHistories';
 import { useMount } from '@/hooks';
+import { AppTooltip } from '@/components/ui/tooltip';

 export const VersionHistoryPanel = React.memo(
  ({ assetId, type }: { assetId: string; type: 'metric' | 'dashboard' }) => {
-    const { listItems, selectedVersion, onClickVersionHistory } = useListVersionHistories({
+    const removeVersionHistoryQueryParams = useCloseVersionHistory();
+    const {
+      listItems,
+      selectedVersion,
+      selectedQueryVersion,
+      onClickRestoreVersion,
+      onClickVersionHistory
+    } = useListVersionHistories({
      assetId,
      type
    });
@ -24,7 +28,7 @@ export const VersionHistoryPanel = React.memo(

    useMount(async () => {
      if (bodyRef.current) {
-        await timeout(200);
+        await timeout(250);
        const selectedNode = bodyRef.current.querySelector('.selected-version');
        if (selectedNode) {
          selectedNode.scrollIntoView({ behavior: 'smooth', block: 'start' });
@ -34,22 +38,24 @@ export const VersionHistoryPanel = React.memo(

    return (
      <AppPageLayout
+        headerClassName="border-l"
        header={useMemo(
          () => (
-            <PanelHeader />
+            <PanelHeader removeVersionHistoryQueryParams={removeVersionHistoryQueryParams} />
          ),
          []
        )}
        scrollable
-        headerBorderVariant="ghost"
-        headerClassName="border-l">
+        headerBorderVariant="ghost">
        <div ref={bodyRef} className="mx-1.5 mb-1.5 flex flex-col">
          {listItems?.map((item) => (
            <ListItem
              key={item.version_number}
              {...item}
-              selected={item.version_number === selectedVersion}
+              selected={item.version_number === selectedQueryVersion}
+              showRestoreButton={item.version_number !== selectedVersion}
              onClickVersionHistory={onClickVersionHistory}
+              onClickRestoreVersion={onClickRestoreVersion}
            />
          ))}
        </div>
@ -63,18 +69,22 @@ const ListItem = React.memo(
    version_number,
    updated_at,
    selected,
-    onClickVersionHistory
+    showRestoreButton,
+    onClickVersionHistory,
+    onClickRestoreVersion
  }: {
    version_number: number;
    updated_at: string;
    selected: boolean;
+    showRestoreButton: boolean;
    onClickVersionHistory: (versionNumber: number) => void;
+    onClickRestoreVersion: (versionNumber: number) => void;
  }) => {
    return (
      <div
        onClick={() => onClickVersionHistory(version_number)}
        className={cn(
-          'hover:bg-item-hover flex cursor-pointer items-center justify-between space-x-2 rounded px-2.5 py-1.5',
+          'group hover:bg-item-hover flex cursor-pointer items-center justify-between space-x-2 rounded px-2.5 py-1.5',
          selected && 'bg-item-select hover:bg-item-select selected-version'
        )}>
        <div className="flex flex-col justify-center space-y-0.5">
@ -83,27 +93,44 @@ const ListItem = React.memo(
            {timeFromNow(updated_at, false)}
          </Text>
        </div>
-        {selected && (
-          <div className="text-icon-color animate-in fade-in-0 flex items-center duration-200">
-            <Check3 />
-          </div>
-        )}
+
+        <div className="text-icon-color animate-in fade-in-0 flex items-center space-x-2 duration-200">
+          {showRestoreButton && (
+            <AppTooltip title="Restore version">
+              <div
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  onClickRestoreVersion(version_number);
+                }}
+                className="hover:bg-item-select -mr-1 rounded p-1 opacity-0 group-hover:block group-hover:opacity-100">
+                <History />
+              </div>
+            </AppTooltip>
+          )}
+
+          {selected && (
+            <div className="group-hover:opacity-100">
+              <Check3 />
+            </div>
+          )}
+        </div>
      </div>
    );
  }
 );
 ListItem.displayName = 'ListItem';

-const PanelHeader = React.memo(() => {
-  const removeVersionHistoryQueryParams = useCloseVersionHistory();
-
-  return (
-    <div className="flex w-full items-center justify-between">
-      <Text>Version History</Text>
-      <Button variant="ghost" prefix={<Xmark />} onClick={removeVersionHistoryQueryParams} />
-    </div>
-  );
-});
+const PanelHeader = React.memo(
+  ({ removeVersionHistoryQueryParams }: { removeVersionHistoryQueryParams: () => void }) => {
+    return (
+      <div className="flex w-full items-center justify-between">
+        <Text>Version History</Text>
+        <Button variant="ghost" prefix={<Xmark />} onClick={removeVersionHistoryQueryParams} />
+      </div>
+    );
+  }
+);
 PanelHeader.displayName = 'PanelHeader';

 VersionHistoryPanel.displayName = 'VersionHistoryPanel';
--- a/web/src/components/features/versionHistory/useListVersionHistories.tsx
+++ b/web/src/components/features/versionHistory/useListVersionHistories.tsx
@ -1,7 +1,11 @@
-import { useGetDashboard } from '@/api/buster_rest/dashboards';
-import { useGetMetric } from '@/api/buster_rest/metrics';
+'use client';
+
+import { useGetDashboard, useUpdateDashboard } from '@/api/buster_rest/dashboards';
+import { useGetMetric, useSaveMetric } from '@/api/buster_rest/metrics';
 import { useAppLayoutContextSelector } from '@/context/BusterAppLayout';
 import { useMemoizedFn } from '@/hooks';
+import { useCloseVersionHistory } from '@/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory';
+import { BusterRoutes, createBusterRoute } from '@/routes';
 import last from 'lodash/last';
 import { useSearchParams } from 'next/navigation';
 import { useMemo } from 'react';
@ -13,14 +17,26 @@ export const useListVersionHistories = ({
  assetId: string;
  type: 'metric' | 'dashboard';
 }) => {
+  const removeVersionHistoryQueryParams = useCloseVersionHistory();
  const onChangeQueryParams = useAppLayoutContextSelector((x) => x.onChangeQueryParams);
-  const { dashboardVersions, selectedVersion: dashboardSelectedVersion } = useListDashboardVersions(
-    {
-      assetId,
-      type
-    }
-  );
-  const { metricVersions, selectedVersion: metricSelectedVersion } = useListMetricVersions({
+  const onChangePage = useAppLayoutContextSelector((x) => x.onChangePage);
+  const {
+    dashboardVersions,
+    selectedQueryVersion: dashboardSelectedQueryVersion,
+    selectedVersion: dashboardSelectedVersion,
+    onRestoreVersion: onRestoreDashboardVersion,
+    isSavingDashboard
+  } = useListDashboardVersions({
+    assetId,
+    type
+  });
+  const {
+    metricVersions,
+    selectedQueryVersion: metricSelectedQueryVersion,
+    selectedVersion: metricSelectedVersion,
+    onRestoreVersion: onRestoreMetricVersion,
+    isSavingMetric
+  } = useListMetricVersions({
    assetId,
    type
  });
@ -34,19 +50,65 @@ export const useListVersionHistories = ({
    return type === 'metric' ? metricSelectedVersion : dashboardSelectedVersion;
  }, [type, dashboardSelectedVersion, metricSelectedVersion]);

+  const selectedQueryVersion = useMemo(() => {
+    return type === 'metric' ? metricSelectedQueryVersion : dashboardSelectedQueryVersion;
+  }, [type, dashboardSelectedQueryVersion, metricSelectedQueryVersion]);
+
  const onClickVersionHistory = useMemoizedFn((versionNumber: number) => {
    if (type === 'metric') onChangeQueryParams({ metric_version_number: versionNumber.toString() });
    if (type === 'dashboard')
      onChangeQueryParams({ dashboard_version_number: versionNumber.toString() });
  });

+  const onClickRestoreVersion = useMemoizedFn(
+    async (versionNumber: number, rereouteToAsset: boolean = true) => {
+      if (type === 'metric') {
+        await onRestoreMetricVersion(versionNumber);
+        if (rereouteToAsset) {
+          await onChangePage(
+            createBusterRoute({
+              route: BusterRoutes.APP_METRIC_ID,
+              metricId: assetId
+            })
+          );
+        }
+      }
+      if (type === 'dashboard') {
+        await onRestoreDashboardVersion(versionNumber);
+        if (rereouteToAsset) {
+          await onChangePage(
+            createBusterRoute({
+              route: BusterRoutes.APP_DASHBOARD_ID,
+              dashboardId: assetId
+            })
+          );
+        }
+      }
+
+      removeVersionHistoryQueryParams();
+    }
+  );
+
+  const isRestoringVersion = useMemo(() => {
+    return isSavingDashboard || isSavingMetric;
+  }, [isSavingDashboard, isSavingMetric]);
+
  return useMemo(() => {
    return {
      listItems,
      selectedVersion,
-      onClickVersionHistory
+      selectedQueryVersion,
+      onClickVersionHistory,
+      onClickRestoreVersion,
+      isRestoringVersion
    };
-  }, [listItems, selectedVersion, onClickVersionHistory]);
+  }, [
+    listItems,
+    selectedVersion,
+    selectedQueryVersion,
+    onClickVersionHistory,
+    onClickRestoreVersion
+  ]);
 };

 const useListDashboardVersions = ({
@ -57,25 +119,48 @@ const useListDashboardVersions = ({
  type: 'metric' | 'dashboard';
 }) => {
  const selectedVersionParam = useSearchParams().get('dashboard_version_number');
-  const { data: dashboardVersions } = useGetDashboard(
+  const { mutateAsync: updateDashboard, isPending: isSavingDashboard } = useUpdateDashboard();
+  const { data: dashData } = useGetDashboard(
    {
      id: type === 'dashboard' ? assetId : undefined,
      version_number: null
    },
-    (x) => x.dashboard.versions
+    (x) => ({
+      versions: x.dashboard.versions,
+      version_number: x.dashboard.version_number
+    })
  );

-  const selectedVersion = useMemo(() => {
+  const dashboardVersions = dashData?.versions;
+  const selectedVersion = dashData?.version_number;
+
+  const selectedQueryVersion = useMemo(() => {
    if (selectedVersionParam) return parseInt(selectedVersionParam);
    return last(dashboardVersions)?.version_number;
  }, [dashboardVersions, selectedVersionParam]);

+  const onRestoreVersion = useMemoizedFn(async (versionNumber: number) => {
+    await updateDashboard({
+      id: assetId,
+      restore_to_version: versionNumber
+    });
+  });
+
  return useMemo(() => {
    return {
      dashboardVersions,
-      selectedVersion
+      selectedQueryVersion,
+      onRestoreVersion,
+      selectedVersion,
+      isSavingDashboard
    };
-  }, [dashboardVersions, selectedVersion]);
+  }, [
+    dashboardVersions,
+    selectedVersion,
+    onRestoreVersion,
+    selectedQueryVersion,
+    isSavingDashboard
+  ]);
 };

 const useListMetricVersions = ({
@ -85,16 +170,31 @@ const useListMetricVersions = ({
  assetId: string;
  type: 'metric' | 'dashboard';
 }) => {
+  const { mutateAsync: updateMetric, isPending: isSavingMetric } = useSaveMetric({
+    updateOnSave: true
+  });
  const selectedVersionParam = useSearchParams().get('metric_version_number');
-  const { data: metricVersions } = useGetMetric(
+  const { data: metricData } = useGetMetric(
    {
      id: type === 'metric' ? assetId : undefined,
      version_number: null
    },
-    (x) => x.versions
+    (x) => ({
+      versions: x.versions,
+      version_number: x.version_number
+    })
  );
+  const metricVersions = metricData?.versions;
+  const selectedVersion = metricData?.version_number;

-  const selectedVersion = useMemo(() => {
+  const onRestoreVersion = useMemoizedFn(async (versionNumber: number) => {
+    await updateMetric({
+      id: assetId,
+      restore_to_version: versionNumber
+    });
+  });
+
+  const selectedQueryVersion = useMemo(() => {
    if (selectedVersionParam) return parseInt(selectedVersionParam);
    return last(metricVersions)?.version_number;
  }, [metricVersions, selectedVersionParam]);
@ -102,7 +202,10 @@ const useListMetricVersions = ({
  return useMemo(() => {
    return {
      metricVersions,
-      selectedVersion
+      selectedQueryVersion,
+      onRestoreVersion,
+      selectedVersion,
+      isSavingMetric
    };
-  }, [metricVersions, selectedVersion]);
+  }, [metricVersions, onRestoreVersion, selectedQueryVersion, selectedVersion, isSavingMetric]);
 };
--- a/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory/FileContainerHeaderVersionHistory.tsx
+++ b/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/FileContainerHeaderVersionHistory/FileContainerHeaderVersionHistory.tsx
@ -4,14 +4,10 @@ import { Button } from '@/components/ui/buttons';
 import { ArrowLeft, History } from '@/components/ui/icons';
 import React from 'react';
 import { useChatLayoutContextSelector } from '../../../ChatLayoutContext';
-import last from 'lodash/last';
 import first from 'lodash/first';
 import { useCloseVersionHistory } from './useCloseVersionHistory';
 import { useListVersionHistories } from '@/components/features/versionHistory';
 import { useMemoizedFn } from '@/hooks';
-import { useBusterNotifications } from '@/context/BusterNotifications';
-import { useSaveMetric } from '@/api/buster_rest/metrics';
-import { useUpdateDashboard } from '@/api/buster_rest/dashboards';

 export const FileContainerHeaderVersionHistory = React.memo(() => {
  const removeVersionHistoryQueryParams = useCloseVersionHistory();
@ -19,63 +15,43 @@ export const FileContainerHeaderVersionHistory = React.memo(() => {
  return (
    <div className="flex w-full items-center justify-between gap-x-1.5">
      <ExitVersionHistoryButton removeVersionHistoryQueryParams={removeVersionHistoryQueryParams} />
-      <DisplayVersionHistory removeVersionHistoryQueryParams={removeVersionHistoryQueryParams} />
+      <DisplayVersionHistory />
    </div>
  );
 });

 FileContainerHeaderVersionHistory.displayName = 'FileContainerHeaderVersionHistory';

-const DisplayVersionHistory = React.memo(
-  ({ removeVersionHistoryQueryParams }: { removeVersionHistoryQueryParams: () => void }) => {
-    const { openSuccessMessage } = useBusterNotifications();
-    const selectedFile = useChatLayoutContextSelector((x) => x.selectedFile);
-    const { listItems, selectedVersion } = useListVersionHistories({
+const DisplayVersionHistory = React.memo(({}: {}) => {
+  const selectedFile = useChatLayoutContextSelector((x) => x.selectedFile);
+  const { listItems, isRestoringVersion, selectedQueryVersion, onClickRestoreVersion } =
+    useListVersionHistories({
      assetId: selectedFile?.id || '',
      type: selectedFile?.type as 'metric' | 'dashboard'
    });

-    const { mutateAsync: saveMetric, isPending: isSavingMetric } = useSaveMetric({
-      updateOnSave: true
-    });
-    const { mutateAsync: saveDashboard, isPending: isSavingDashboard } = useUpdateDashboard();
+  const currentVersion = first(listItems)?.version_number;
+  const isSelectedVersionCurrent = selectedQueryVersion === currentVersion;

-    const isSaving = isSavingMetric || isSavingDashboard;
+  const onClickRestoreVersionPreflight = useMemoizedFn(async () => {
+    if (selectedQueryVersion) {
+      await onClickRestoreVersion(selectedQueryVersion, true);
+    }
+  });

-    const currentVersion = first(listItems)?.version_number;
-    const isSelectedVersionCurrent = selectedVersion === currentVersion;
-
-    const onMakeCurrentVersion = useMemoizedFn(async () => {
-      const params = {
-        id: selectedFile?.id || '',
-        update_version: true,
-        restore_to_version: selectedVersion
-      };
-
-      if (selectedFile?.type === 'metric') {
-        await saveMetric(params);
-      }
-      if (selectedFile?.type === 'dashboard') {
-        await saveDashboard(params);
-      }
-      removeVersionHistoryQueryParams();
-      openSuccessMessage('Successfully made current version');
-    });
-
-    return (
-      <div className="flex space-x-1.5">
-        <Button variant="ghost" prefix={<History />}>{`Version ${selectedVersion || 0}`}</Button>
-        <Button
-          variant="black"
-          disabled={isSelectedVersionCurrent || !currentVersion}
-          onClick={onMakeCurrentVersion}
-          loading={isSaving}>
-          Current version
-        </Button>
-      </div>
-    );
-  }
-);
+  return (
+    <div className="flex space-x-1.5">
+      <Button variant="ghost" prefix={<History />}>{`Version ${selectedQueryVersion || 0}`}</Button>
+      <Button
+        variant="black"
+        disabled={isSelectedVersionCurrent || !currentVersion}
+        onClick={onClickRestoreVersionPreflight}
+        loading={isRestoringVersion}>
+        Restore version
+      </Button>
+    </div>
+  );
+});
 DisplayVersionHistory.displayName = 'DisplayVersionHistory';

 const ExitVersionHistoryButton = React.memo(