feat: Initial implementation of app #1
Conversation
Implements a UI using next and nextui that allows browsing the list of repos user has access to and the contributors for a repo.
There was a problem hiding this comment.
@xitij2000 Hi, I tested this locally. I have a few suggestions. Summarising them below
- I couldn't browse any of the openedx repos as there were other repos in the first 30 repos that the API pulled. Switching from user repo listing to org repo listing, with pagination will make is easier to get just the openedx ones.
- The
collaboratorsAPI seems to only work when the user already has PUSH rights to the repo. So, it wouldn't pull any information for a casual community user like me. - (Optional) Because the collaborators API is not suitable, we can also consider ditching the Github API token requirement, if the alternate solution can make use of a public API.
| <li>Save and see your changes instantly.</li> | ||
| </ol> | ||
| const [filter, setFilter] = React.useState<string>(""); | ||
| const data = useAuthenticatedQuery(['repos-list'], "https://api.github.com/user/repos"); |
There was a problem hiding this comment.
I couldn't browse any of the "openedx" repos. I believe List organization's repositories would be a better API to call, and it can be called without using the User Auth Token.
curl -L \
∙ -H "Accept: application/vnd.github+json" \
∙ -H "X-GitHub-Api-Version: 2022-11-28" \
∙ https://api.github.com/orgs/openedx/repos
[
{
"id": 4732120,
"node_id": "MDEwOlJlcG9zaXRvcnk0NzMyMTIw",
"name": "cs_comments_service",
"full_name": "openedx/cs_comments_service",
"private": false,
"owner": {
"login": "openedx",
"id": 40179672,
"node_id": "MDEyOk9yZ2FuaXphdGlvbjQwMTc5Njcy",
"avatar_url": "https://avatars.githubusercontent.com/u/40179672?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/openedx",
"html_url": "https://github.com/openedx",
"followers_url": "https://api.github.com/users/openedx/followers",
"following_url": "https://api.github.com/users/openedx/following{/other_user}",
"gists_url": "https://api.github.com/users/openedx/gists{/gist_id}",
"starred_url": "https://api.github.com/users/openedx/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/openedx/subscriptions",
"organizations_url": "https://api.github.com/users/openedx/orgs",
"repos_url": "https://api.github.com/users/openedx/repos",
"events_url": "https://api.github.com/users/openedx/events{/privacy}",
"received_events_url": "https://api.github.com/users/openedx/received_events",
"type": "Organization",
"user_view_type": "public",
"site_admin": false
},
"html_url": "https://github.com/openedx/cs_comments_service",
"description": "server side of the comment service",
"fork": false,
...
There was a problem hiding this comment.
Secondly, I think the API by default only returns like 30 entries, so pagination logic should be implemented to fetch more repos.
There was a problem hiding this comment.
Makes sense, I figured this what it's more generic.
As for pagination. I know that is missing; however, this is a prototype-level APP. I just wanted to show-case the idea before investing more time and effort into it.
| </TableCell> | ||
| <TableCell> | ||
| <Link href={item.full_name}> | ||
| Browse Contributors |
There was a problem hiding this comment.
| Browse Contributors | |
| Show Core Contributors |
In Github terminology, "Contributors" are anyone who has a commit in a repo. So, this might create some confusion. Making it explicit can provide clarity.
There was a problem hiding this comment.
That is exactly why I say Contributors and not Core Contributors, because we are not filtering and some of the people listed here will be admins etc who have access but are not CCs.
src/lib/utils.ts
Outdated
| import { useQuery } from "@tanstack/react-query"; | ||
|
|
||
| export const getGithubToken = () => { | ||
| return localStorage.getItem("github-token"); |
There was a problem hiding this comment.
This keeps throwing me errors when running via npm run dev. I think this is a known issue. Adding if (window.localStorage !== undefined) solved it for me. I also see other options like wrapping it in a useEffect being suggested.
| const {org, repo} = React.use(params); | ||
| const data = useAuthenticatedQuery( | ||
| [org, repo, 'contributor'], | ||
| `https://api.github.com/repos/${org}/${repo}/collaborators?affiliation=all&permission=push` |
There was a problem hiding this comment.
This API only seem to work for repos to which the user already has rights. When I tried to browse an openedx repo, this is what I got
{
"message": "Must have push access to view repository collaborators.",
"documentation_url": "https://docs.github.com/rest/collaborators/collaborators#list-repository-collaborators",
"status": "403"
}There was a problem hiding this comment.
Yup, that is a definite limitation, however I don't know how to get around that other than having a proxy API that fetches the required data using a higher-privilege token.
There was a problem hiding this comment.
@xitij2000 Thank you for explaining the reasons behind the decisions and limitations. I agree, finding a way to do this directly via API might be tricky. An option could be to have a Github actions commit a CSV or JSON file to the repo on a periodic interval. I have seen github actions used this way for collecting periodic data somewhere, but can't find a quick example.
|
@itsjeyd Could you have a look at this app as well and do tell if you agree with the scope I picked for the prototype. If not I can add the missing features. |
Implements a UI using next and nextui that allows browsing the list of repos user has access to and the contributors for a repo.
Implements openedx/wg-coordination#148