wip(checkpoints): stubs for checkpoints & storybook

src/__fixtures__/checkpoints.ts

@@ -0,0 +1,42 @@
+import { CheckpointsMeta } from "../features/Checkpoints/checkpointsSlice";
+import { RestoreCheckpointsResponse } from "../features/Checkpoints/types";
+
+export const STUB_RESTORED_CHECKPOINT_DATA: RestoreCheckpointsResponse = {
+  reverted_to: "2025-01-24T17:44:08Z",
+  checkpoints_for_undo: [],
+  error_log: [],
+  reverted_changes: [
+    {
+      files_changed: [
+        {
+          absolute_path: "test.txt",
+          relative_path: "test.txt",
+          status: "MODIFIED",
+        },
+        {
+          absolute_path:
+            "\\?\\\\C:\\\\Users\\\\andre\\\\Desktop\\\\work\\\\refact.ai\\\\refact-lsp\\\\src\\\\main.rs",
+          relative_path: "src/main.rs",
+          status: "DELETED",
+        },
+      ],
+      workspace_folder: "refact-lsp",
+    },
+  ],
+};
+
+export const STUB_RESTORED_CHECKPOINTS_STATE: CheckpointsMeta = {
+  isVisible: true,
+  latestCheckpointResult: STUB_RESTORED_CHECKPOINT_DATA,
+};
+
+export const STUB_RESTORED_CHECKPOINTS_STATE_WITH_NO_CHANGES: CheckpointsMeta =
+  {
+    isVisible: true,
+    latestCheckpointResult: {
+      reverted_to: "2024-01-20T15:30:00Z",
+      checkpoints_for_undo: [],
+      reverted_changes: [],
+      error_log: [],
+    },
+  };

src/components/Chat/Chat.tsx

@@ -27,7 +27,6 @@ import { DropzoneProvider } from "../Dropzone";
 import { AgentUsage } from "../../features/AgentUsage";
 import { useCheckpoints } from "../../hooks/useCheckpoints";
 import { Checkpoints } from "../../features/Checkpoints";
-import { setIsCheckpointsPopupIsVisible } from "../../features/Checkpoints/checkpointsSlice";
 
 export type ChatProps = {
   host: Config["host"];
@@ -114,27 +113,7 @@ export const Chat: React.FC<ChatProps> = ({
           onStopStreaming={abort}
         />
 
-        {shouldCheckpointsPopupBeShown && (
-          <Checkpoints
-            hash="bc31sds"
-            files={[
-              {
-                absolute_path: "tests/emergency_frog_situation/frog.py",
-                status: "A",
-                relative_path: "",
-              },
-              { absolute_path: "main.rs", status: "M", relative_path: "" },
-              { absolute_path: "test.ts", status: "D", relative_path: "" },
-            ]}
-            onFix={() => {
-              // Handle fix action
-              dispatch(setIsCheckpointsPopupIsVisible(false));
-            }}
-            onUndo={() => {
-              // Handle undo action
-            }}
-          />
-        )}
+        {shouldCheckpointsPopupBeShown && <Checkpoints />}
 
         <AgentUsage />
         {!isStreaming && preventSend && unCalledTools && (

src/components/IntegrationsView/IntegrationsView.tsx

@@ -58,6 +58,7 @@ import isEqual from "lodash.isequal";
 import { convertRawIntegrationFormValues } from "../../features/Integrations/convertRawIntegrationFormValues";
 import { validateSnakeCase } from "../../utils/validateSnakeCase";
 import { setIntegrationData } from "../../features/Chat";
+import { formatPathName } from "../../utils/formatPathName";
 
 type IntegrationViewProps = {
   integrationsMap?: IntegrationWithIconResponse;
@@ -997,12 +998,11 @@ export const IntegrationsView: FC<IntegrationViewProps> = ({
             {groupedProjectIntegrations &&
               Object.entries(groupedProjectIntegrations).map(
                 ([projectPath, integrations], index) => {
-                  const formattedProjectName =
-                    "```.../" +
-                    projectPath.split(/[/\\]/)[
-                      projectPath.split(/[/\\]/).length - 1
-                    ] +
-                    "/```";
+                  const formattedProjectName = formatPathName(
+                    projectPath,
+                    "```.../",
+                    "/```",
+                  );
 
                   return (
                     <Flex

src/features/Checkpoints/Checkpoints.module.css

@@ -1,4 +1,12 @@
 .CheckpointsDialog {
   width: calc(100vw - var(--space-8));
   max-width: 500px;
+  padding-top: var(--space-7);
+  position: relative;
+}
+
+.CheckpointsRevertedDate {
+  position: absolute;
+  top: 10px;
+  right: 10px;
 }

src/features/Checkpoints/Checkpoints.stories.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { setUpStore } from "../../app/store";
+import { Provider } from "react-redux";
+import { Theme } from "../../components/Theme";
+import { Checkpoints } from "./Checkpoints";
+import { CheckpointsMeta } from "./checkpointsSlice";
+import {
+  STUB_RESTORED_CHECKPOINTS_STATE,
+  STUB_RESTORED_CHECKPOINTS_STATE_WITH_NO_CHANGES,
+} from "../../__fixtures__/checkpoints";
+
+const Template: React.FC<{ initialState?: CheckpointsMeta }> = ({
+  initialState,
+}) => {
+  const store = setUpStore({
+    tour: {
+      type: "finished",
+    },
+    config: {
+      apiKey: "foo",
+      addressURL: "Refact",
+      host: "web",
+      lspPort: 8001,
+      themeProps: {
+        appearance: "dark",
+      },
+    },
+    checkpoints: initialState ?? STUB_RESTORED_CHECKPOINTS_STATE,
+  });
+
+  return (
+    <Provider store={store}>
+      <Theme>
+        <Checkpoints />
+      </Theme>
+    </Provider>
+  );
+};
+
+const meta = {
+  title: "Features/Checkpoints",
+  component: Template,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Template>;
+
+export default meta;
+type Story = StoryObj<typeof Template>;
+
+export const Default: Story = {};
+
+export const WithNoChanges: Story = {
+  args: {
+    initialState: STUB_RESTORED_CHECKPOINTS_STATE_WITH_NO_CHANGES,
+  },
+};
+
+export const DialogClosed: Story = {
+  args: {
+    initialState: STUB_RESTORED_CHECKPOINTS_STATE_WITH_NO_CHANGES,
+  },
+};