From 221de8beb474b81a8a503872443dc2b951be2a49 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Fri, 11 Jul 2025 20:07:53 -0700 Subject: [PATCH 1/9] improvements: revise commit history and commit details UI --- .../CommitDetailsTab/CommitDetailsTab.tsx | 237 ++++++++---------- .../SecretVersionDiffView.tsx | 21 +- .../CommitsPage/CommitsPage.tsx | 2 +- .../CommitHistoryTab/CommitHistoryTab.tsx | 155 +++++------- 4 files changed, 178 insertions(+), 237 deletions(-) diff --git a/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx b/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx index c403f9f3f..7c7fa3d0d 100644 --- a/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx +++ b/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import { faAngleDown } from "@fortawesome/free-solid-svg-icons"; +import { faAngleDown, 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 +7,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 +110,25 @@ export const CommitDetailsTab = ({ // If no commit is selected or data is loading, show appropriate message if (!selectedCommitId) { return ( -
-

Select a commit to view details

-
+ + + ); } if (isLoading) { - return ( -
- -
- ); + return ; } if (!commitDetails) { return ( -
-

No details found for this commit

-
+ + + ); } @@ -138,9 +140,11 @@ export const CommitDetailsTab = ({ } catch (error) { console.error("Failed to parse commit details:", error); return ( -
-

Error parsing commit details

-
+ + + ); } @@ -223,13 +227,12 @@ export const CommitDetailsTab = ({ // Render an item from the merged list const renderMergedItem = (item: MergedItem): JSX.Element => { return ( -
- toggleItemCollapsed(id)} - /> -
+ toggleItemCollapsed(id)} + /> ); }; @@ -240,114 +243,94 @@ export const CommitDetailsTab = ({ "Unknown"; return ( -
-
-
-
-
-
-

- {parsedCommitDetails.changes?.message || "No message"} -

-
-
-
-

- Commited by - {actorDisplay} - on - - {formatDisplayDate( - parsedCommitDetails.changes?.createdAt || new Date().toISOString() - )} - - {parsedCommitDetails.changes?.isLatest && ( - (Latest) - )} -

-
-
-
- - {(isAllowed) => ( - - + + Commited by {actorDisplay} on{" "} + {formatDisplayDate(parsedCommitDetails.changes?.createdAt || new Date().toISOString())} + {parsedCommitDetails.changes?.isLatest && ( + (Latest) + )} + + } + > + + {(isAllowed) => ( + + + + + + {!parsedCommitDetails.changes.isLatest && ( + goToRollbackPreview()} > - -

Restore Options

- - - - - {!parsedCommitDetails.changes.isLatest && ( - goToRollbackPreview()} - > -
-
- - Roll back to this commit - - - Return this folder to its exact state at the time of this commit, - discarding all other changes made after it - -
-
- - )} - - handlePopUpOpen("revertChanges")} - > -
-
- Revert changes - - Will restore to the previous version of affected resources - -
+
+
+ + Roll back to this commit + + + Return this folder to its exact state at the time of this commit, + discarding all other changes made after it +
- - - - )} - -
+
+ + )} + handlePopUpOpen("revertChanges")} + > +
+
+ Revert changes + + Will restore to the previous version of affected resources + +
+
+ + + + )} + + +
+
+

Commit Changes

- -
-
-
- {sortedChangedItems.length > 0 ? ( - sortedChangedItems.map((item) => renderMergedItem(item)) - ) : ( -
-

No changed items found

-
- )} -
+
+
+ {sortedChangedItems.length > 0 ? ( + sortedChangedItems.map((item) => renderMergedItem(item)) + ) : ( + + )}
- -
+ ); }; diff --git a/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx b/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx index 7744d3626..b3bda7368 100644 --- a/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx +++ b/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx @@ -225,15 +225,17 @@ 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"; + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const getHighlightClass = (_different: boolean) => { + return ""; }; - const prefix = isDifferent ? (isOldVersion ? "-" : "+") : " "; + const prefix = isDifferent ? (isOldVersion ? " -" : " +") : " "; const keyDisplay = keyName ? `"${keyName}": ` : ""; const comma = !isLastItem ? "," : ""; @@ -320,7 +322,7 @@ const renderJsonWithDiffs = (
- {isContainerAddedOrRemoved ? (isOldVersion ? "-" : "+") : " "} + {isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
{indent} @@ -625,12 +627,11 @@ export const SecretVersionDiffView = ({ }; return ( -
+
{showHeader && renderHeader()} - {!collapsed && ( -
-
+
+
{ title="Commits" description="Track, inspect, and restore your secrets and folders with confidence. View the complete history of changes made to your environment, examine specific modifications at each commit point, and preview the exact impact before rolling back to previous states." /> - +

Secret Snapshots have been officially renamed to Commits. Going forward, all secret changes will be tracked as Commits. If you made changes before this update, you can diff --git a/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx b/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx index 8f529ba86..0f0cf8323 100644 --- a/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx +++ b/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx @@ -2,13 +2,14 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { faArrowDownWideShort, faArrowUpWideShort, + faCodeCommit, faCopy, faSearch } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { format, formatDistanceToNow } from "date-fns"; -import { Button, Input, Spinner } from "@app/components/v2"; +import { Button, ContentLoader, EmptyState, IconButton, Input } from "@app/components/v2"; import { CopyButton } from "@app/components/v2/CopyButton"; import { useGetFolderCommitHistory } from "@app/hooks/api/folderCommits"; @@ -40,58 +41,40 @@ const CommitItem = ({ onSelectCommit: (commitId: string, tab: string) => void; }) => { return ( -

-
-
-
-
- -
-

- - {commit.actorMetadata?.email || commit.actorMetadata?.name || commit.actorType} -

committed

- - -

-
-
-
- - -
-
+
+ ); }; @@ -108,24 +91,16 @@ const DateGroup = ({ onSelectCommit: (commitId: string, tab: string) => void; }) => { return ( -
-
-
-
-
-
-

Commits on {date}

+
+
+ +

Commits on {date}

-
-
+
{commits.map((commit) => ( -
-
- -
-
+ ))}
@@ -150,7 +125,7 @@ export const CommitHistoryTab = ({ const [offset, setOffset] = useState(0); const [allCommits, setAllCommits] = useState([]); const debounceTimeoutRef = useRef(); - const limit = 5; + const limit = 10; // Debounce search term useEffect(() => { @@ -234,42 +209,37 @@ export const CommitHistoryTab = ({ }, [hasMore, isFetching, limit]); return ( -
+
+

Commit History

} placeholder="Search commits..." - className="h-10 w-full rounded-md border-transparent bg-zinc-800 pl-9 pr-3 text-sm text-white placeholder-gray-400 focus:border-gray-600 focus:ring-primary-500/20" onChange={(e) => handleSearch(e.target.value)} value={searchTerm} aria-label="Search commits" /> -
-
- +
- {isLoading && offset === 0 ? ( -
- -
+ ) : ( -
+
{Object.keys(groupedCommits).length > 0 ? ( <> {Object.entries(groupedCommits).map(([date, dateCommits]) => ( @@ -282,34 +252,21 @@ export const CommitHistoryTab = ({ ))} ) : ( -
-
+ )} {hasMore && (
)} From 7ff8a195183e75170f9b0ba9b5a7487876762788 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Mon, 14 Jul 2025 14:08:30 -0700 Subject: [PATCH 2/9] improvement: address feedback --- .../src/hooks/api/folderCommits/queries.tsx | 3 +- .../CommitDetailsTab/CommitDetailsTab.tsx | 17 ++++++- .../SecretVersionDiffView.tsx | 47 +++++++------------ 3 files changed, 35 insertions(+), 32 deletions(-) diff --git a/frontend/src/hooks/api/folderCommits/queries.tsx b/frontend/src/hooks/api/folderCommits/queries.tsx index 8d0883c5b..785c13ad2 100644 --- a/frontend/src/hooks/api/folderCommits/queries.tsx +++ b/frontend/src/hooks/api/folderCommits/queries.tsx @@ -265,7 +265,8 @@ export const useGetFolderCommitHistory = ({ ], queryFn: () => fetchFolderCommitHistory(workspaceId, environment, directory, offset, limit, search, sort), - enabled: Boolean(workspaceId && environment) + enabled: Boolean(workspaceId && environment), + placeholderData: (prev) => prev }); }; diff --git a/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx b/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx index 7c7fa3d0d..f1d6d8f7e 100644 --- a/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx +++ b/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx @@ -1,5 +1,10 @@ import { useEffect, useState } from "react"; -import { faAngleDown, faCodeCommit, faWarning } 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"; @@ -244,6 +249,16 @@ export const CommitDetailsTab = ({ return ( <> + { - return ""; - }; - const prefix = isDifferent ? (isOldVersion ? " -" : " +") : " "; const keyDisplay = keyName ? `"${keyName}": ` : ""; const comma = !isLastItem ? "," : ""; @@ -257,8 +252,8 @@ const renderJsonWithDiffs = (
{prefix}
{indent} - {keyName && {keyDisplay}} - {valueDisplay} + {keyName && {keyDisplay}} + {valueDisplay} {comma}
@@ -271,8 +266,8 @@ const renderJsonWithDiffs = (
{prefix}
{indent} - {keyName && {keyDisplay}} - [] + {keyName && {keyDisplay}} + [] {comma}
@@ -285,8 +280,8 @@ const renderJsonWithDiffs = (
{prefix}
{indent} - {keyName && {keyDisplay}} - {"{}"} + {keyName && {keyDisplay}} + {"{}"} {comma}
@@ -326,12 +321,8 @@ const renderJsonWithDiffs = (
{indent} - {keyName && ( - - {keyDisplay} - - )} - [ + {keyName && {keyDisplay}} + [
@@ -363,7 +354,7 @@ const renderJsonWithDiffs = (
{indent} - ] + ] {comma}
@@ -382,12 +373,8 @@ const renderJsonWithDiffs = (
{indent} - {keyName && ( - - {keyDisplay} - - )} - {"{"} + {keyName && {keyDisplay}} + {"{"}
@@ -420,7 +407,7 @@ const renderJsonWithDiffs = (
{indent} - {"}"} + {"}"} {comma}
@@ -630,18 +617,18 @@ export const SecretVersionDiffView = ({
{showHeader && renderHeader()} {!collapsed && ( -
-
+
+
{oldVersionContent}
- +
{newVersionContent}
From bd7947c04e75870ed4a3b7ec79ab5bac432fe718 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Mon, 14 Jul 2025 14:25:33 -0700 Subject: [PATCH 3/9] improvements: missed changes --- .../SecretVersionDiffView/SecretVersionDiffView.tsx | 6 +++--- .../components/CommitHistoryTab/CommitHistoryTab.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx b/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx index 7810ccdfc..c3a3fa6c4 100644 --- a/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx +++ b/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx @@ -350,7 +350,7 @@ const renderJsonWithDiffs = (
- {isContainerAddedOrRemoved ? (isOldVersion ? "-" : "+") : " "} + {isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
{indent} @@ -369,7 +369,7 @@ const renderJsonWithDiffs = (
- {isContainerAddedOrRemoved ? (isOldVersion ? "-" : "+") : " "} + {isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
{indent} @@ -403,7 +403,7 @@ const renderJsonWithDiffs = (
- {isContainerAddedOrRemoved ? (isOldVersion ? "-" : "+") : " "} + {isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
{indent} diff --git a/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx b/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx index 0f0cf8323..b5ae9d0c4 100644 --- a/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx +++ b/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx @@ -239,7 +239,7 @@ export const CommitHistoryTab = ({ {isLoading && offset === 0 ? ( ) : ( -
+
{Object.keys(groupedCommits).length > 0 ? ( <> {Object.entries(groupedCommits).map(([date, dateCommits]) => ( From 49afaa4d2da9b92f44f2eaa963bff66f3c622596 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Tue, 15 Jul 2025 20:03:45 -0700 Subject: [PATCH 4/9] improvements: address feedback --- .../src/hooks/api/folderCommits/queries.tsx | 40 +++++---- frontend/src/hooks/api/folderCommits/types.ts | 13 +++ .../CommitDetailsTab/CommitDetailsTab.tsx | 6 +- .../CommitHistoryTab/CommitHistoryTab.tsx | 89 ++++--------------- 4 files changed, 57 insertions(+), 91 deletions(-) diff --git a/frontend/src/hooks/api/folderCommits/queries.tsx b/frontend/src/hooks/api/folderCommits/queries.tsx index 785c13ad2..1bca7ce9a 100644 --- a/frontend/src/hooks/api/folderCommits/queries.tsx +++ b/frontend/src/hooks/api/folderCommits/queries.tsx @@ -1,8 +1,9 @@ -import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { format } from "date-fns"; import { apiRequest } from "@app/config/request"; -import { CommitHistoryItem, CommitWithChanges, RollbackPreview } from "./types"; +import { Commit, CommitHistoryItem, CommitWithChanges, RollbackPreview } from "./types"; export const commitKeys = { count: ({ @@ -242,7 +243,6 @@ export const useGetFolderCommitHistory = ({ workspaceId, environment, directory, - offset = 0, limit = 20, search, sort = "desc" @@ -250,23 +250,33 @@ export const useGetFolderCommitHistory = ({ workspaceId: string; environment: string; directory: string; - offset?: number; limit?: number; search?: string; sort?: "asc" | "desc"; }) => { - return useQuery({ - queryKey: [ - commitKeys.history({ workspaceId, environment, directory }), - offset, - limit, - search, - sort - ], - queryFn: () => - fetchFolderCommitHistory(workspaceId, environment, directory, offset, limit, search, sort), + return useInfiniteQuery({ + initialPageParam: 0, + queryKey: [commitKeys.history({ workspaceId, environment, directory }), limit, search, sort], + queryFn: ({ pageParam }) => + fetchFolderCommitHistory(workspaceId, environment, directory, pageParam, limit, search, sort), enabled: Boolean(workspaceId && environment), - placeholderData: (prev) => prev + select: (data) => { + return (data?.pages ?? []) + ?.map((page) => page.commits) + .flat() + .reduce( + (acc, commit) => { + const date = format(new Date(commit.createdAt), "MMM d, yyyy"); + if (!acc[date]) { + acc[date] = []; + } + acc[date].push(commit); + return acc; + }, + {} as Record + ); + }, + getNextPageParam: (lastPage, pages) => (lastPage.hasMore ? pages.length * limit : undefined) }); }; diff --git a/frontend/src/hooks/api/folderCommits/types.ts b/frontend/src/hooks/api/folderCommits/types.ts index 878e3224d..a5f4e6df6 100644 --- a/frontend/src/hooks/api/folderCommits/types.ts +++ b/frontend/src/hooks/api/folderCommits/types.ts @@ -62,3 +62,16 @@ export type RollbackPreview = { folderPath: string; changes: RollbackChange[]; }; + +interface CommitActorMetadata { + email?: string; + name?: string; +} + +export interface Commit { + id: string; + message: string; + createdAt: string; + actorType: string; + actorMetadata?: CommitActorMetadata; +} diff --git a/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx b/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx index f1d6d8f7e..4fb7182a2 100644 --- a/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx +++ b/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx @@ -291,10 +291,10 @@ export const CommitDetailsTab = ({ Restore Options - + {!parsedCommitDetails.changes.isLatest && ( goToRollbackPreview()} >
@@ -311,7 +311,7 @@ export const CommitDetailsTab = ({ )} handlePopUpOpen("revertChanges")} >
diff --git a/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx b/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx index b5ae9d0c4..58191f389 100644 --- a/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx +++ b/frontend/src/pages/secret-manager/CommitsPage/components/CommitHistoryTab/CommitHistoryTab.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { faArrowDownWideShort, faArrowUpWideShort, @@ -7,24 +7,11 @@ import { faSearch } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { format, formatDistanceToNow } from "date-fns"; +import { formatDistanceToNow } from "date-fns"; import { Button, ContentLoader, EmptyState, IconButton, Input } from "@app/components/v2"; import { CopyButton } from "@app/components/v2/CopyButton"; -import { useGetFolderCommitHistory } from "@app/hooks/api/folderCommits"; - -interface CommitActorMetadata { - email?: string; - name?: string; -} - -interface Commit { - id: string; - message: string; - createdAt: string; - actorType: string; - actorMetadata?: CommitActorMetadata; -} +import { Commit, useGetFolderCommitHistory } from "@app/hooks/api/folderCommits"; const formatTimeAgo = (timestamp: string): string => { return formatDistanceToNow(new Date(timestamp), { addSuffix: true }); @@ -50,10 +37,10 @@ const CommitItem = ({ className="w-full border border-b-0 border-mineshaft-600 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md last:border-b" >
-
- +
+

{commit.message} - +

{commit.actorMetadata?.email || commit.actorMetadata?.name || commit.actorType}{" "} committed @@ -122,8 +109,6 @@ export const CommitHistoryTab = ({ const [searchTerm, setSearchTerm] = useState(""); const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(""); const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc"); - const [offset, setOffset] = useState(0); - const [allCommits, setAllCommits] = useState([]); const debounceTimeoutRef = useRef(); const limit = 10; @@ -145,55 +130,20 @@ export const CommitHistoryTab = ({ }, [searchTerm]); const { - data: response, + data: groupedCommits, isLoading, - isFetching + fetchNextPage, + isFetchingNextPage, + hasNextPage } = useGetFolderCommitHistory({ workspaceId: projectId, environment, directory: secretPath, - offset, limit, search: debouncedSearchTerm, sort: sortDirection }); - const commits = response?.commits || []; - const hasMore = response?.hasMore || false; - - // Reset accumulated commits when search or sort changes - useEffect(() => { - setAllCommits([]); - setOffset(0); - }, [debouncedSearchTerm, sortDirection]); - - // Accumulate commits instead of replacing them - useEffect(() => { - if (commits.length > 0) { - if (offset === 0) { - // First load or after search/sort change - replace all commits - setAllCommits(commits); - } else { - // Subsequent loads - append new commits - setAllCommits((prev) => [...prev, ...commits]); - } - } - }, [commits, offset]); - - const groupedCommits = useMemo(() => { - return allCommits.reduce( - (acc, commit) => { - const date = format(new Date(commit.createdAt), "MMM d, yyyy"); - if (!acc[date]) { - acc[date] = []; - } - acc[date].push(commit); - return acc; - }, - {} as Record - ); - }, [allCommits]); - const handleSort = useCallback(() => { setSortDirection((prev) => (prev === "desc" ? "asc" : "desc")); }, []); @@ -202,12 +152,6 @@ export const CommitHistoryTab = ({ setSearchTerm(value); }, []); - const loadMoreCommits = useCallback(() => { - if (hasMore && !isFetching) { - setOffset((prev) => prev + limit); - } - }, [hasMore, isFetching, limit]); - return (

Commit History

@@ -236,11 +180,11 @@ export const CommitHistoryTab = ({
- {isLoading && offset === 0 ? ( + {isLoading ? ( ) : (
- {Object.keys(groupedCommits).length > 0 ? ( + {groupedCommits && Object.keys(groupedCommits).length > 0 ? ( <> {Object.entries(groupedCommits).map(([date, dateCommits]) => ( )} - - {hasMore && ( + {hasNextPage && (