github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/pages/repositories/repository/commits/commit/index.jsx (about) 1 import React, {useEffect, useState} from "react"; 2 import {AlertError, Loading} from "../../../../../lib/components/controls"; 3 import {useRefs} from "../../../../../lib/hooks/repo"; 4 import {useAPI, useAPIWithPagination} from "../../../../../lib/hooks/api"; 5 import {commits, refs} from "../../../../../lib/api"; 6 import {ChangesTreeContainer, defaultGetMoreChanges} from "../../../../../lib/components/repository/changes"; 7 import {useRouter} from "../../../../../lib/hooks/router"; 8 import {URINavigator} from "../../../../../lib/components/repository/tree"; 9 import {appendMoreResults} from "../../changes"; 10 import {CommitInfoCard} from "../../../../../lib/components/repository/commits"; 11 import { useOutletContext } from "react-router-dom"; 12 13 14 15 const ChangeList = ({ repo, commit, prefix, onNavigate }) => { 16 const [actionError, setActionError] = useState(null); 17 const [afterUpdated, setAfterUpdated] = useState(""); // state of pagination of the item's children 18 const [resultsState, setResultsState] = useState({prefix: prefix, results:[], pagination:{}}); // current retrieved children of the item 19 20 const delimiter = "/" 21 22 const { error, loading, nextPage } = useAPIWithPagination(async () => { 23 if (!repo) return 24 if (!commit.parents || commit.parents.length === 0) return {results: [], pagination: {has_more: false}}; 25 26 return await appendMoreResults(resultsState, prefix, afterUpdated, setAfterUpdated, setResultsState, 27 () => refs.diff(repo.id, commit.parents[0], commit.id, afterUpdated, prefix, delimiter)); 28 }, [repo.id, commit.id, afterUpdated, prefix]) 29 30 const results = resultsState.results 31 32 if (error) return <AlertError error={error}/> 33 if (loading) return <Loading/> 34 35 const actionErrorDisplay = (actionError) ? 36 <AlertError error={actionError} onDismiss={() => setActionError(null)}/> : <></> 37 38 const commitSha = commit.id.substring(0, 12); 39 const uriNavigator = <URINavigator path={prefix} reference={commit} repo={repo} 40 relativeTo={`${commitSha}`} 41 pathURLBuilder={(params, query) => { 42 return { 43 pathname: '/repositories/:repoId/commits/:commitId', 44 params: {repoId: repo.id, commitId: commit.id}, 45 query: {prefix: query.path} 46 } 47 }}/> 48 const changesTreeMessage = <p>Showing changes for commit <strong>{commitSha}</strong></p> 49 return ( 50 <> 51 {actionErrorDisplay} 52 <ChangesTreeContainer results={results} delimiter={delimiter} uriNavigator={uriNavigator} leftDiffRefID={commit.parents[0]} 53 rightDiffRefID={commit.id} repo={repo} reference={commit} prefix={prefix} 54 getMore={defaultGetMoreChanges(repo, commit.parents[0], commit.id, delimiter)} 55 loading={loading} nextPage={nextPage} setAfterUpdated={setAfterUpdated} onNavigate={onNavigate} 56 changesTreeMessage={changesTreeMessage}/> 57 </> 58 ) 59 }; 60 61 const CommitView = ({ repo, commitId, onNavigate, view, prefix }) => { 62 // pull commit itself 63 const {response, loading, error} = useAPI(async () => { 64 return await commits.get(repo.id, commitId); 65 }, [repo.id, commitId]); 66 67 if (loading) return <Loading/>; 68 if (error) return <AlertError error={error}/>; 69 70 const commit = response; 71 72 return ( 73 <div className="mb-5 mt-3"> 74 <CommitInfoCard repo={repo} commit={commit}/> 75 <div className="mt-4"> 76 <ChangeList 77 prefix={prefix} 78 view={(view) ? view : ""} 79 repo={repo} 80 commit={commit} 81 onNavigate={onNavigate} 82 /> 83 </div> 84 </div> 85 ); 86 }; 87 88 const CommitContainer = () => { 89 const router = useRouter(); 90 const { repo, loading, error } = useRefs(); 91 const { prefix } = router.query; 92 const { commitId } = router.params; 93 94 if (loading) return <Loading/>; 95 if (error) return <AlertError error={error}/>; 96 97 return ( 98 <CommitView 99 repo={repo} 100 prefix={(prefix) ? prefix : ""} 101 commitId={commitId} 102 onNavigate={(entry) => { 103 return { 104 pathname: '/repositories/:repoId/commits/:commitId', 105 params: {repoId: repo.id, commitId: commitId}, 106 query: { 107 prefix: entry.path, 108 } 109 } 110 }} 111 /> 112 ) 113 } 114 115 const RepositoryCommitPage = () => { 116 const [setActivePage] = useOutletContext(); 117 useEffect(() => setActivePage('commits'), [setActivePage]); 118 119 return <CommitContainer/>; 120 } 121 122 export default RepositoryCommitPage;