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;