Merge branch 'main' into feat/secretsBatchUI

2026-10-21 20:28:17 +00:00 · 2025-07-21 10:10:21 -07:00
parent 1fc217798e 193bbf2bf3
commit 51d4444c77
113 changed files with 2510 additions and 531 deletions
@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
-import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
+import {
+  faAngleDown,
+  faChevronLeft,
+  faCodeCommit,
+  faWarning
+} 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";
@@ -7,12 +12,14 @@ import { useSearch } from "@tanstack/react-router";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
+  Button,
+  ContentLoader,
  DeleteActionModal,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
-  IconButton,
-  Spinner
+  EmptyState,
+  PageHeader
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import {
@@ -108,25 +115,25 @@ export const CommitDetailsTab = ({
  // 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>
+      <EmptyState className="mt-40" title="Select a commit to view details." icon={faCodeCommit}>
+        <Button className="mt-4" colorSchema="secondary" onClick={() => goBackToHistory()}>
+          Back to Commits
+        </Button>
+      </EmptyState>
    );
  }

  if (isLoading) {
-    return (
-      <div className="flex h-64 items-center justify-center">
-        <Spinner size="lg" />
-      </div>
-    );
+    return <ContentLoader />;
  }

  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>
+      <EmptyState className="mt-40" title="No details found for this commit." icon={faCodeCommit}>
+        <Button className="mt-4" colorSchema="secondary" onClick={() => goBackToHistory()}>
+          Back to Commits
+        </Button>
+      </EmptyState>
    );
  }

@@ -138,9 +145,11 @@ export const CommitDetailsTab = ({
  } 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>
+      <EmptyState className="mt-40" title="Error parsing commit details." icon={faWarning}>
+        <Button className="mt-4" colorSchema="secondary" onClick={() => goBackToHistory()}>
+          Back to Commits
+        </Button>
+      </EmptyState>
    );
  }

@@ -223,13 +232,12 @@ export const CommitDetailsTab = ({
  // 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>
+      <SecretVersionDiffView
+        key={item.id}
+        item={item}
+        isCollapsed={collapsedItems[item.id]}
+        onToggleCollapse={(id) => toggleItemCollapsed(id)}
+      />
    );
  };

@@ -240,114 +248,104 @@ export const CommitDetailsTab = ({
    "Unknown";

  return (
-    <div className="w-full">
-      <div>
-        <div className="flex justify-between pb-2">
-          <div className="w-5/6">
-            <div>
-              <div className="flex items-center">
-                <h1 className="mr-4 truncate 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>
-                {parsedCommitDetails.changes?.isLatest && (
-                  <span className="ml-1 italic text-gray-400">(Latest)</span>
-                )}
-              </p>
-            </div>
-          </div>
-          <div className="flex items-center justify-start">
-            <ProjectPermissionCan
-              I={ProjectPermissionCommitsActions.PerformRollback}
-              a={ProjectPermissionSub.Commits}
-            >
-              {(isAllowed) => (
-                <DropdownMenu>
-                  <DropdownMenuTrigger
-                    asChild
-                    disabled={!isAllowed}
-                    className={`${!isAllowed ? "cursor-not-allowed" : ""}`}
+    <>
+      <Button
+        variant="link"
+        type="submit"
+        leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+        onClick={() => {
+          goBackToHistory();
+        }}
+      >
+        Commit History
+      </Button>
+      <PageHeader
+        title={`${parsedCommitDetails.changes?.message}` || "No message"}
+        description={
+          <>
+            Commited by {actorDisplay} on{" "}
+            {formatDisplayDate(parsedCommitDetails.changes?.createdAt || new Date().toISOString())}
+            {parsedCommitDetails.changes?.isLatest && (
+              <span className="ml-1 text-mineshaft-400">(Latest)</span>
+            )}
+          </>
+        }
+      >
+        <ProjectPermissionCan
+          I={ProjectPermissionCommitsActions.PerformRollback}
+          a={ProjectPermissionSub.Commits}
+        >
+          {(isAllowed) => (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                asChild
+                disabled={!isAllowed}
+                className={`${!isAllowed ? "cursor-not-allowed" : ""}`}
+              >
+                <Button
+                  rightIcon={<FontAwesomeIcon className="ml-2" icon={faAngleDown} />}
+                  variant="solid"
+                  className="h-min"
+                  colorSchema="secondary"
+                >
+                  Restore Options
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="max-w-sm bg-bunker-500" sideOffset={2}>
+                {!parsedCommitDetails.changes.isLatest && (
+                  <DropdownMenuItem
+                    className="group cursor-pointer border-b border-mineshaft-600 px-3 py-3 transition-colors hover:bg-mineshaft-700"
+                    onClick={() => goToRollbackPreview()}
                  >
-                    <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-[240px] rounded-md bg-mineshaft-800 p-1 shadow-lg"
-                    style={{ marginTop: "0" }}
-                  >
-                    {!parsedCommitDetails.changes.isLatest && (
-                      <DropdownMenuItem
-                        className="group cursor-pointer rounded-md px-3 py-3 transition-colors hover:bg-mineshaft-700"
-                        onClick={() => goToRollbackPreview()}
-                      >
-                        <div className="flex items-center space-x-3">
-                          <div className="flex flex-col">
-                            <span className="text-sm font-medium text-white">
-                              Roll back to this commit
-                            </span>
-                            <span className="max-w-[180px] whitespace-normal break-words text-xs leading-snug text-gray-400">
-                              Return this folder to its exact state at the time of this commit,
-                              discarding all other changes made after it
-                            </span>
-                          </div>
-                        </div>
-                      </DropdownMenuItem>
-                    )}
-
-                    <DropdownMenuItem
-                      className="group cursor-pointer rounded-md px-3 py-3 transition-colors hover:bg-mineshaft-700"
-                      onClick={() => handlePopUpOpen("revertChanges")}
-                    >
-                      <div className="flex items-center space-x-3">
-                        <div className="flex flex-col">
-                          <span className="text-sm font-medium text-white">Revert changes</span>
-                          <span className="max-w-[180px] whitespace-normal break-words text-xs leading-snug text-gray-400">
-                            Will restore to the previous version of affected resources
-                          </span>
-                        </div>
+                    <div className="flex items-center space-x-3">
+                      <div className="flex flex-col">
+                        <span className="text-sm font-medium text-white">
+                          Roll back to this commit
+                        </span>
+                        <span className="whitespace-normal break-words text-xs leading-snug text-gray-400">
+                          Return this folder to its exact state at the time of this commit,
+                          discarding all other changes made after it
+                        </span>
                      </div>
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
-            </ProjectPermissionCan>
-          </div>
+                    </div>
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem
+                  className="group cursor-pointer px-3 py-3 transition-colors hover:bg-mineshaft-700"
+                  onClick={() => handlePopUpOpen("revertChanges")}
+                >
+                  <div className="flex items-center space-x-3">
+                    <div className="flex flex-col">
+                      <span className="text-sm font-medium text-white">Revert changes</span>
+                      <span className="whitespace-normal break-words text-xs leading-snug text-gray-400">
+                        Will restore to the previous version of affected resources
+                      </span>
+                    </div>
+                  </div>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </ProjectPermissionCan>
+      </PageHeader>
+      <div className="flex w-full flex-col rounded-lg border border-mineshaft-600 bg-mineshaft-900 pt-4">
+        <div className="mx-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+          <h3 className="text-lg font-semibold text-mineshaft-100">Commit Changes</h3>
        </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 className="flex flex-col overflow-hidden px-4">
+          <div className="thin-scrollbar overflow-y-auto py-4">
+            {sortedChangedItems.length > 0 ? (
+              sortedChangedItems.map((item) => renderMergedItem(item))
+            ) : (
+              <EmptyState
+                title="No changes found."
+                className="h-full pb-0 pt-28"
+                icon={faCodeCommit}
+              />
+            )}
          </div>
        </div>
      </div>
-
      <DeleteActionModal
        isOpen={popUp.revertChanges.isOpen}
        deleteKey="revert"
@@ -357,6 +355,6 @@ export const CommitDetailsTab = ({
        onDeleteApproved={handleRevertChanges}
        buttonText="Yes, revert changes"
      />
-    </div>
+    </>
  );
 };
@@ -2,6 +2,7 @@
 import { useCallback, useRef, useState } from "react";
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";

 export interface Version {
  id?: string;
@@ -225,15 +226,12 @@ const renderJsonWithDiffs = (

  const getLineClass = (different: boolean) => {
    if (!different) return "flex";
-    return isOldVersion ? "flex bg-red-950 text-red-300" : "flex bg-green-950 text-green-300";
+    return isOldVersion
+      ? "flex bg-red-500/50 rounded-sm text-red-300"
+      : "flex bg-green-500/50 rounded-sm text-green-300";
  };

-  const getHighlightClass = (different: boolean) => {
-    if (!different) return "";
-    return isOldVersion ? "bg-red-900 rounded px-1" : "bg-green-900 rounded px-1";
-  };
-
-  const prefix = isDifferent ? (isOldVersion ? "-" : "+") : " ";
+  const prefix = isDifferent ? (isOldVersion ? " -" : " +") : " ";
  const keyDisplay = keyName ? `"${keyName}": ` : "";
  const comma = !isLastItem ? "," : "";

@@ -255,8 +253,8 @@ const renderJsonWithDiffs = (
        <div className="w-4 flex-shrink-0">{prefix}</div>
        <div>
          {indent}
-          {keyName && <span className={getHighlightClass(isDifferent)}>{keyDisplay}</span>}
-          <span className={getHighlightClass(isDifferent)}>{valueDisplay}</span>
+          {keyName && <span>{keyDisplay}</span>}
+          <span>{valueDisplay}</span>
          {comma}
        </div>
      </div>
@@ -269,8 +267,8 @@ const renderJsonWithDiffs = (
        <div className="w-4 flex-shrink-0">{prefix}</div>
        <div>
          {indent}
-          {keyName && <span className={getHighlightClass(isDifferent)}>{keyDisplay}</span>}
-          <span className={getHighlightClass(isDifferent)}>[]</span>
+          {keyName && <span>{keyDisplay}</span>}
+          <span>[]</span>
          {comma}
        </div>
      </div>
@@ -283,8 +281,8 @@ const renderJsonWithDiffs = (
        <div className="w-4 flex-shrink-0">{prefix}</div>
        <div>
          {indent}
-          {keyName && <span className={getHighlightClass(isDifferent)}>{keyDisplay}</span>}
-          <span className={getHighlightClass(isDifferent)}>{"{}"}</span>
+          {keyName && <span>{keyDisplay}</span>}
+          <span>{"{}"}</span>
          {comma}
        </div>
      </div>
@@ -320,16 +318,12 @@ const renderJsonWithDiffs = (
      <div key={reactKey}>
        <div className={getLineClass(isContainerAddedOrRemoved)}>
          <div className="w-4 flex-shrink-0">
-            {isContainerAddedOrRemoved ? (isOldVersion ? "-" : "+") : " "}
+            {isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
          </div>
          <div>
            {indent}
-            {keyName && (
-              <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>
-                {keyDisplay}
-              </span>
-            )}
-            <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>[</span>
+            {keyName && <span>{keyDisplay}</span>}
+            <span>[</span>
          </div>
        </div>

@@ -357,11 +351,11 @@ const renderJsonWithDiffs = (

        <div className={getLineClass(isContainerAddedOrRemoved)}>
          <div className="w-4 flex-shrink-0">
-            {isContainerAddedOrRemoved ? (isOldVersion ? "-" : "+") : " "}
+            {isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
          </div>
          <div>
            {indent}
-            <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>]</span>
+            <span>]</span>
            {comma}
          </div>
        </div>
@@ -376,16 +370,12 @@ const renderJsonWithDiffs = (
      <div key={reactKey}>
        <div className={getLineClass(isContainerAddedOrRemoved)}>
          <div className="w-4 flex-shrink-0">
-            {isContainerAddedOrRemoved ? (isOldVersion ? "-" : "+") : " "}
+            {isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
          </div>
          <div>
            {indent}
-            {keyName && (
-              <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>
-                {keyDisplay}
-              </span>
-            )}
-            <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>{"{"}</span>
+            {keyName && <span>{keyDisplay}</span>}
+            <span>{"{"}</span>
          </div>
        </div>

@@ -414,11 +404,11 @@ const renderJsonWithDiffs = (

        <div className={getLineClass(isContainerAddedOrRemoved)}>
          <div className="w-4 flex-shrink-0">
-            {isContainerAddedOrRemoved ? (isOldVersion ? "-" : "+") : " "}
+            {isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
          </div>
          <div>
            {indent}
-            <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>{"}"}</span>
+            <span>{"}"}</span>
            {comma}
          </div>
        </div>
@@ -528,7 +518,7 @@ export const SecretVersionDiffView = ({
    }

    oldVersionContent = (
-      <div className="font-mono text-sm">
+      <div className="w-fit min-w-[100%] font-mono text-sm">
        {renderJsonWithDiffs(
          cleanOldVersion,
          diffPaths,
@@ -544,7 +534,7 @@ export const SecretVersionDiffView = ({
      </div>
    );
    newVersionContent = (
-      <div className="font-mono text-sm">
+      <div className="w-fit min-w-[100%] font-mono text-sm">
        {renderJsonWithDiffs(
          cleanNewVersion,
          diffPaths,
@@ -584,19 +574,19 @@ export const SecretVersionDiffView = ({
    if (item.isDeleted) {
      textStyle = "line-through text-red-300";
      changeBadge = (
-        <span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
+        <span className="ml-2 whitespace-nowrap rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
          {isSecret ? "Secret" : "Folder"} Deleted
        </span>
      );
    } else if (item.isAdded) {
      changeBadge = (
-        <span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
+        <span className="ml-2 whitespace-nowrap rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
          {isSecret ? "Secret" : "Folder"} Added
        </span>
      );
    } else if (item.isUpdated) {
      changeBadge = (
-        <span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
+        <span className="ml-2 whitespace-nowrap rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
          {isSecret ? "Secret" : "Folder"} Updated
        </span>
      );
@@ -616,32 +606,34 @@ export const SecretVersionDiffView = ({
        tabIndex={0}
        aria-expanded={!collapsed}
      >
-        <div className="flex items-center">
-          <span className={textStyle}>{key}</span>
+        <div className="flex min-w-0 flex-1 items-center">
+          <p className={twMerge(textStyle, "truncate")}>{key}</p>
          {changeBadge}
        </div>
-        <FontAwesomeIcon icon={collapsed ? faChevronDown : faChevronUp} className="text-gray-400" />
+        <FontAwesomeIcon
+          icon={collapsed ? faChevronDown : faChevronUp}
+          className="ml-2 text-gray-400"
+        />
      </div>
    );
  };

  return (
-    <div className="overflow-hidden rounded-lg border border-mineshaft-600 bg-mineshaft-800">
+    <div className="overflow-hidden border border-b-0 border-mineshaft-600 bg-mineshaft-800 first:rounded-t last:rounded-b last:border-b">
      {showHeader && renderHeader()}
-
      {!collapsed && (
-        <div className="border-t border-mineshaft-700 bg-mineshaft-900 px-6 py-4">
-          <div className="grid grid-cols-2 gap-4">
+        <div className="border-t border-mineshaft-700 bg-mineshaft-900 p-3 text-mineshaft-100">
+          <div className="flex gap-3">
            <div
              ref={oldContainerRef}
-              className="thin-scrollbar max-h-96 overflow-auto whitespace-pre rounded border border-mineshaft-600 bg-mineshaft-900 p-4"
+              className="thin-scrollbar max-h-96 flex-1 overflow-auto whitespace-pre"
            >
              {oldVersionContent}
            </div>
-
+            <div className="max-h-96 w-[0.05rem] self-stretch bg-mineshaft-600" />
            <div
              ref={newContainerRef}
-              className="thin-scrollbar max-h-96 overflow-auto whitespace-pre rounded border border-mineshaft-600 bg-mineshaft-900 p-4"
+              className="thin-scrollbar max-h-96 flex-1 overflow-auto whitespace-pre"
            >
              {newVersionContent}
            </div>