PIT: UI views

frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx

@@ -0,0 +1,327 @@
+import { useEffect, useState } from "react";
+import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { DropdownMenuItem } from "@radix-ui/react-dropdown-menu";
+import { useSearch } from "@tanstack/react-router";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  IconButton,
+  Spinner
+} from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { usePopUp } from "@app/hooks";
+import { CommitWithChanges } from "@app/hooks/api/folderCommits";
+import { useCommitRevert, useGetCommitDetails } from "@app/hooks/api/folderCommits/queries";
+
+import { SecretVersionDiffView } from "../SecretVersionDiffView";
+import { MergedItem } from "./types";
+
+const formatDisplayDate = (dateString: string): string => {
+  try {
+    const date = new Date(dateString);
+    const options: Intl.DateTimeFormatOptions = {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      hour12: true
+    };
+    return new Intl.DateTimeFormat("en-US", options).format(date);
+  } catch {
+    return dateString;
+  }
+};
+
+export const CommitDetailsTab = ({
+  selectedCommitId,
+  workspaceId,
+  envSlug,
+  goBackToHistory,
+  goToRollbackPreview
+}: {
+  selectedCommitId: string;
+  workspaceId: string;
+  envSlug: string;
+  goBackToHistory: () => void;
+  goToRollbackPreview: () => void;
+}): JSX.Element => {
+  // State for tracking collapsed items (empty by default means all are expanded)
+  const [collapsedItems, setCollapsedItems] = useState<Record<string, boolean>>({});
+
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "revertChanges"
+  ] as const);
+
+  const { data: commitDetails, isLoading } = useGetCommitDetails(workspaceId, selectedCommitId);
+
+  const routerQueryParams: { secretPath?: string } = useSearch({
+    from: ROUTE_PATHS.SecretManager.CommitDetailsPage.id
+  });
+  const secretPath = (routerQueryParams.secretPath as string) || "/";
+
+  const { mutateAsync: revert } = useCommitRevert({
+    commitId: selectedCommitId,
+    projectId: workspaceId,
+    environment: envSlug,
+    directory: secretPath
+  });
+
+  useEffect(() => {
+    setCollapsedItems({});
+  }, [selectedCommitId]);
+
+  const toggleItemCollapsed = (itemId: string): void => {
+    setCollapsedItems((prev) => ({ ...prev, [itemId]: !prev[itemId] }));
+  };
+
+  const handleRevertChanges = async (): Promise<void> => {
+    const response = await revert();
+    if (!response.success) {
+      createNotification({
+        type: "error",
+        text: response.message
+      });
+      return;
+    }
+    createNotification({
+      type: "success",
+      text: response.message
+    });
+
+    handlePopUpClose("revertChanges");
+
+    goBackToHistory();
+  };
+
+  // If no commit is selected or data is loading, show appropriate message
+  if (!selectedCommitId) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-gray-400">Select a commit to view details</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  if (!commitDetails) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-gray-400">No details found for this commit</p>
+      </div>
+    );
+  }
+
+  // Parse the commit details if it's a string
+  let parsedCommitDetails: CommitWithChanges;
+  try {
+    parsedCommitDetails =
+      typeof commitDetails === "string" ? JSON.parse(commitDetails) : commitDetails;
+  } catch (error) {
+    console.error("Failed to parse commit details:", error);
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-gray-400">Error parsing commit details</p>
+      </div>
+    );
+  }
+
+  // Get all changes from the commit
+  const commitChanges = parsedCommitDetails.changes?.changes || [];
+
+  // Separate changes by type
+  const addedChanges = commitChanges.filter((c) => c.changeType === "add" && !c.isUpdate);
+  const updatedChanges = commitChanges.filter((c) => c.changeType === "add" && c.isUpdate);
+  const deletedChanges = commitChanges.filter((c) => c.changeType === "delete");
+
+  // Create merged item list from changes only
+  const changedItems: MergedItem[] = [];
+
+  // Add items from added changes
+  addedChanges.forEach((change) => {
+    changedItems.push({
+      id: change.id,
+      type: change.secretVersionId || change.secretKey ? "secret" : "folder",
+      versionId: change.secretVersionId || change.id,
+      folderName: change.folderName,
+      folderVersion: change.folderVersion,
+      secretKey: change.secretKey,
+      secretVersion: change.secretVersion,
+      isAdded: true,
+      versions: change.versions,
+      changeId: change.id
+    });
+  });
+
+  // Add items from updated changes
+  updatedChanges.forEach((change) => {
+    changedItems.push({
+      id: change.id,
+      type: change.secretVersionId || change.secretKey ? "secret" : "folder",
+      versionId: change.secretVersionId || change.id,
+      folderName: change.folderName,
+      folderVersion: change.folderVersion,
+      secretKey: change.secretKey,
+      secretVersion: change.secretVersion,
+      isUpdated: true,
+      versions: change.versions,
+      changeId: change.id
+    });
+  });
+
+  // Add deleted items
+  deletedChanges.forEach((change) => {
+    changedItems.push({
+      id: change.id,
+      type: change.secretVersionId || change.secretKey ? "secret" : "folder",
+      secretKey: change.secretKey,
+      folderName: change.folderName,
+      secretVersion: change.secretVersion,
+      folderVersion: change.folderVersion,
+      isDeleted: true,
+      versions: change.versions,
+      changeId: change.id
+    });
+  });
+
+  // Sort items: deleted first, then folders, then secrets, all alphabetically
+  const sortedChangedItems = [...changedItems].sort((a, b) => {
+    // First sort deleted items to the top
+    if (a.isDeleted !== b.isDeleted) {
+      return a.isDeleted ? -1 : 1;
+    }
+
+    // Then sort by type (folders before secrets)
+    if (a.type !== b.type) {
+      return a.type === "folder" ? -1 : 1;
+    }
+
+    // Finally sort alphabetically by name
+    const aName = a.type === "folder" ? a.folderName || "" : a.secretKey || "";
+    const bName = b.type === "folder" ? b.folderName || "" : b.secretKey || "";
+    return aName.localeCompare(bName);
+  });
+
+  // Render an item from the merged list
+  const renderMergedItem = (item: MergedItem): JSX.Element => {
+    return (
+      <div key={item.id} className="mb-2">
+        <SecretVersionDiffView
+          item={item}
+          isCollapsed={collapsedItems[item.id]}
+          onToggleCollapse={(id) => toggleItemCollapsed(id)}
+        />
+      </div>
+    );
+  };
+
+  // Format actor display
+  const actorDisplay =
+    parsedCommitDetails.changes?.actorMetadata?.name ||
+    parsedCommitDetails.changes?.actorType ||
+    "Unknown";
+
+  return (
+    <div className="w-full">
+      <div>
+        <div className="flex justify-between pb-2">
+          <div>
+            <div>
+              <div className="flex items-center">
+                <h1 className="mr-4 text-3xl font-semibold text-white">
+                  {parsedCommitDetails.changes?.message || "No message"}
+                </h1>
+              </div>
+            </div>
+            <div className="font-small mb-4 mt-2 flex items-center text-sm">
+              <p>
+                <span> Commited by </span>
+                <b>{actorDisplay}</b>
+                <span> on </span>
+                <b>
+                  {formatDisplayDate(
+                    parsedCommitDetails.changes?.createdAt || new Date().toISOString()
+                  )}
+                </b>
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center justify-start">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <IconButton
+                  ariaLabel="commit-options"
+                  variant="outline_bg"
+                  className="h-10 rounded border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-sm font-medium"
+                >
+                  <p className="mr-2">Restore Options</p>
+                  <FontAwesomeIcon icon={faAngleDown} />
+                </IconButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                sideOffset={2}
+                className="animate-in fade-in-50 zoom-in-95 min-w-[200px] p-1"
+                style={{ marginTop: "0" }}
+              >
+                <DropdownMenuItem
+                  className="h-10 w-full cursor-pointer px-3 py-2 text-sm transition-colors hover:bg-mineshaft-700"
+                  onClick={() => goToRollbackPreview()}
+                >
+                  <div className="flex w-full items-center justify-start">
+                    <span>Restore entire folder</span>
+                  </div>
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  className="h-10 w-full cursor-pointer px-3 py-2 text-sm transition-colors hover:bg-mineshaft-700"
+                  onClick={() => handlePopUpOpen("revertChanges")}
+                >
+                  <div className="flex w-full items-center justify-start">
+                    <span>Revert commit changes</span>
+                  </div>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        <div className="py-2">
+          <div className="overflow-hidden">
+            <div className="space-y-2">
+              {sortedChangedItems.length > 0 ? (
+                sortedChangedItems.map((item) => renderMergedItem(item))
+              ) : (
+                <div className="flex h-32 items-center justify-center rounded-lg border border-mineshaft-600 bg-mineshaft-800">
+                  <p className="text-gray-400">No changed items found</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <DeleteActionModal
+        isOpen={popUp.revertChanges.isOpen}
+        deleteKey="revert"
+        title="Are you sure you want to revert changes from this commit?"
+        subTitle="This action will undo all changes made in this commit."
+        onChange={(isOpen) => handlePopUpToggle("revertChanges", isOpen)}
+        onDeleteApproved={handleRevertChanges}
+        buttonText="Revert Changes"
+      />
+    </div>
+  );
+};

frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/index.ts

@@ -0,0 +1 @@
+export { CommitDetailsTab } from "./CommitDetailsTab";

frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/types.ts

@@ -0,0 +1,14 @@
+export interface MergedItem {
+  id: string;
+  type: "secret" | "folder";
+  versionId?: string;
+  folderName?: string;
+  folderVersion?: string;
+  secretKey?: string;
+  secretVersion?: string;
+  isAdded?: boolean;
+  isUpdated?: boolean;
+  isDeleted?: boolean;
+  versions?: any[];
+  changeId: string;
+}