restore version updates

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"
+        headerBorderVariant="ghost">
-        headerClassName="border-l">
         <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>
+
+        <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="text-icon-color animate-in fade-in-0 flex items-center duration-200">
+            <div className="group-hover:opacity-100">
               <Check3 />
             </div>
           )}
         </div>
+      </div>
     );
   }
 );
 ListItem.displayName = 'ListItem';
 
-const PanelHeader = React.memo(() => {
+const PanelHeader = React.memo(
-  const removeVersionHistoryQueryParams = useCloseVersionHistory();
+  ({ 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';

web/src/components/features/versionHistory/useListVersionHistories.tsx

@@ -1,7 +1,11 @@
-import { useGetDashboard } from '@/api/buster_rest/dashboards';
+'use client';
-import { useGetMetric } from '@/api/buster_rest/metrics';
+
+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(
+  const onChangePage = useAppLayoutContextSelector((x) => x.onChangePage);
-    {
+  const {
+    dashboardVersions,
+    selectedQueryVersion: dashboardSelectedQueryVersion,
+    selectedVersion: dashboardSelectedVersion,
+    onRestoreVersion: onRestoreDashboardVersion,
+    isSavingDashboard
+  } = useListDashboardVersions({
     assetId,
     type
-    }
+  });
-  );
+  const {
-  const { metricVersions, selectedVersion: metricSelectedVersion } = useListMetricVersions({
+    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]);
 };

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(
+const DisplayVersionHistory = React.memo(({}: {}) => {
-  ({ removeVersionHistoryQueryParams }: { removeVersionHistoryQueryParams: () => void }) => {
-    const { openSuccessMessage } = useBusterNotifications();
   const selectedFile = useChatLayoutContextSelector((x) => x.selectedFile);
-    const { listItems, selectedVersion } = useListVersionHistories({
+  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 isSaving = isSavingMetric || isSavingDashboard;
-
   const currentVersion = first(listItems)?.version_number;
-    const isSelectedVersionCurrent = selectedVersion === currentVersion;
+  const isSelectedVersionCurrent = selectedQueryVersion === currentVersion;
 
-    const onMakeCurrentVersion = useMemoizedFn(async () => {
+  const onClickRestoreVersionPreflight = useMemoizedFn(async () => {
-      const params = {
+    if (selectedQueryVersion) {
-        id: selectedFile?.id || '',
+      await onClickRestoreVersion(selectedQueryVersion, true);
-        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="ghost" prefix={<History />}>{`Version ${selectedQueryVersion || 0}`}</Button>
       <Button
         variant="black"
         disabled={isSelectedVersionCurrent || !currentVersion}
-          onClick={onMakeCurrentVersion}
+        onClick={onClickRestoreVersionPreflight}
-          loading={isSaving}>
+        loading={isRestoringVersion}>
-          Current version
+        Restore version
       </Button>
     </div>
   );
-  }
+});
-);
 DisplayVersionHistory.displayName = 'DisplayVersionHistory';
 
 const ExitVersionHistoryButton = React.memo(