[OSPP 2023] Project 1: Implement the new "Repo Collections" feature (except for charts)

[tyn1998]

Description

Related to #487. Should be started after v1.9.0 is merged into master.

In this project, you are asked to implement the "Repo Collections" feature according to the prototype, except for the charts which will be done by the other project (#654).

https://user-images.githubusercontent.com/32434520/200306078-f16e06bf-24e2-40e9-83e8-5c36ef0dda80.mov

Output Requirements

• "Add to collections" drop down button in repo page (ContentScript)
• Collections quick entrance (Popup page)
• Repo Collections page (Options page)

Technical Requirements

• Chrome Extensions MV3
• HTML, CSS, TS
• React, React Hooks
• GitHub REST API Documentation (for getting all repos of an org)
• Git, GitHub

Difficulty

Advance

Mentor

@tyn1998

[stealth-bombeer]

hey @tyn1998 I have had a detailed look at the codebase , forked and setup hypertrons-crx ; I think now I understand how hypertrons-crx work. I have also looked at the issue #624 and currently working on it I have done research on this project #653 and I am very much interested in it

I have tried to implicate the static version of Add to Collections and Pop-up in my local system

https://user-images.githubusercontent.com/96366867/233772786-fddc84bc-fbb7-413a-b71a-106bd6c42011.mp4

Add Collections : -The dropdown will allow users to create new collections and add the repo's/projects to it for aggregate data and comparison ,on hovering we get the repo's/project of a particular collection; If the collection contains the current repo/project on clicking the item we're redirected to group-level page where the repo belongs

Pop-Up page : -It will enlist all the collections and on clicking we reach the Repo Collections Page of a particular Collection We can use chrome.storage.sync to store and retreive the users preferences I've used this in my personal projects and it works completely fine https://developer.chrome.com/docs/extensions/reference/storage/

Repo Collection Page : -This page allows users to import the repo's of an org ;delete the existing projects/repo's, edit them. We can use gh rest Api to import the repo's of an org https://docs.github.com/en/rest/repos/repos?apiVersion=2022-11-28#list-organization-repositories

ill continue the research on this project and keep you updated.

Please let me know your thoughts. Thankyou, Regards

[tyn1998]

Hi @stealth-bombeer, I'm impressed!

For "Popup page" and "Repo Collection page", you got the point. Yet for "Add Collections", I could give you more details on the button.

This button is a dropdown button with selectable items which stand for collection names. Since a repo can belong to multiple collections in the same time, users are allowed to select many items. Once the items(collections) are selected, current repo should be pushed to those collections. No redirect is needed when clicking items.

Besides, this project only requires implementing the "Collection" tab in the Options page, so "Comparison" and "Settings" are not in the scope :)

🚀

[stealth-bombeer]

Hi @stealth-bombeer, I'm impressed!

For "Popup page" and "Repo Collection page", you got the point. Yet for "Add Collections", I could give you more details on the button.

This button is a dropdown button with selectable items which stand for collection names. Since a repo can belong to multiple collections in the same time, so users are allowed to select many items. Once the items(collections) are selected, current repo should be pushed to those collections. No redirect is needed when clicking items.

Besides, this project only requires implementing the "Collection" tab in the Options page, so "Comparison" and "Settings" are not in the scope :)

🚀

Thanks @tyn1998 ,for more clarity i will be making changes accordingly .

[andyhuang18]

Hi~ @stealth-bombeer . I see you've been active in this project for quite a while! Thanks for your contribution. I appreciate your knowledge base and practical experience. Looking forward to your outcome~

[stealth-bombeer]

Hi~ @stealth-bombeer . I see you've been active in this project for quite a while! Thanks for your contribution. I appreciate your knowledge base and practical experience. Looking forward to your outcome~

Thank you,i'll make most of the opportunity 😀😀

[frank-zsy]

Do we decide to implement the repo collections page in the options page? From a user perspective, I would like the repo collections page popup on current web page rather than go into the options page.

I agree that we can manipulate the collections setting with popup page like add new collections and add current repo/org into a collection. And then if a repo belongs to a certain collection, I would like to click a button and investigate the collection page right now, I think this makes sense a lot than go into the options page.

WDYT?

[stealth-bombeer]

Do we decide to implement the repo collections page in the options page? From a user perspective, I would like the repo collections page popup on current web page rather than go into the options page.

I agree that we can manipulate the collections setting with popup page like add new collections and add current repo/org into a collection. And then if a repo belongs to a certain collection, I would like to click a button and investigate the collection page right now, I think this makes sense a lot than go into the options page.

WDYT?

I match your thoughts, We can visit collection page by clicking on a particular collection which appears on the popup

[tyn1998]

Hi @frank-zsy, got your point so I improved the prototype a bit, with the "Collections" button redesigned:

Since one repo can belong to multiple collections I don't think it's a good idea to put the repo collection page into certain repo page. Rather, we can enhance the "Collections" button to access corresponding collections more quickly.

[frank-zsy]

So when I click on the collection that contains current repo, it will open a new page in options page right? Rather than popup a panel to show the metrics.

[tyn1998]

@frank-zsy that's true.

When developing Options page, we can leverage HMR feature so the development process can be fluent. However if we develop a feature relying on ContentScript then every change only takes effect after a page refresh. That's a reason that I prefer Options page from a perspective of development.

[frank-zsy]

Alright, although this is acceptable, I still think a popup panel in current page has a better user experience than redirect to another page. But you can get the final decision considering all the conditions, I just give some feedbacks on users' perspective here.

[tyn1998]

@frank-zsy Thanks a lot for your valuable suggestion!

@wxharry @zhicheng-ning @lhbvvvvv @andyhuang18 @wj23027 what do you guys think?

[l1tok]

I think the popup panel in current page is more concise and convenient for users when they want to see several variable charts. But for my personal usage habits, an extra page will not matter.

[stealth-bombeer]

Hi @frank-zsy, got your point so I improved the prototype a bit, with the "Collections" button redesigned:

Since one repo can belong to multiple collections I don't think it's a good idea to put the repo collection page into certain repo page. Rather, we can enhance the "Collections" button to access corresponding collections more quickly.

Hey @tyn1998 ,i have some doubts on the new prototype should I ask it over here or pin you on slack

[tyn1998]

Hi @stealth-bombeer, you are welcomed to leave a comment to point out your question just here! I'll anwser your question.

By the way, the design of this feature is still envolving as we discussed on last biweekly meeting(#581). We'll update the final design of this feature in this issue ASAP.

Looking forward to work with you on this exciting feature :)

[tyn1998]

Hi @stealth-bombeer, I have updated the prototype in MasterGo, you can hit the button in the right top corner to have a try:

A big update is that now there are two places to show the chart dashboard:

1. in current repo. If users click one item of those in the collections dropdown list, a dialog containing the chart dashboard for corresponding collection will show up.
2. in Collections | Settings page. if users click one item of those in extension Popup page or directly go to Options page, they can visit all chart dashboards for different collections there.

For others, hopefully the prototype could describe itself clearly :)

[andyhuang18]

Hi @tyn1998 . I decided to participate in this project and I am already writing a proposal. Based on my previous contributions and understanding of this project, I will present a framework with a preliminary idea. 💪

[tyn1998]

@andyhuang18 Wow, I've been wondering for weeks why you didn't take this chance to make a big difference in Hypercrx. But finally, you come 🚀

I was impressed by your contributions many times, looking foward to your proposal!

[stealth-bombeer]

Hi @stealth-bombeer, I have updated the prototype in MasterGo, you can hit the button in the right top corner to have a try:

A big update is that now there are two places to show the chart dashboard:

1. in current repo. If users click one item of those in the collections dropdown list, a dialog containing the chart dashboard for corresponding collection will show up.
2. in Collections | Settings page. if users click one item of those in extension Popup page or directly go to Options page, they can visit all chart dashboards for different collections there.

For others, hopefully the prototype could describe itself clearly :)

Thank you @tyn1998 ,for more clarity on the new prototype I will continue making changes in the framework I published earlier https://github.com/hypertrons/hypertrons-crx/issues/653#issuecomment-1518615228 and will keep you posted 😄

[stealth-bombeer]

https://github.com/hypertrons/hypertrons-crx/assets/96366867/d33b5730-ab5d-40fa-890f-1a3f93ae0ce5

Hello @tyn1998 ,extension to the previous framework https://github.com/hypertrons/hypertrons-crx/issues/653#issuecomment-1518615228 I was successful in creating Comparison and Collection Editor in my local codebase

Comparison: This component will display the name of all the repos from different organizations of the selected collection (here Hypertrons) and will help users to get insights

Collection Editor: This allows users to edit their collections i.e import/remove the repositories from the collection and save them to their local storage

I was successful in using github rest api for importing the repositories of a given organization and save them locally

Express your views on the and help me improvisefurther 😄

[stealth-bombeer]

Hello @tyn1998, a humble request to share your views on the above prototype and suggest changes if any ,it would be quite insightful in drafting my proposal and make necessary changes in it :D

[tyn1998]

@stealth-bombeer

Sorry for the late replay. I have been struggling with my Graduation Thesis Proposal Report so I decided to turn off all bells to avoid distraction.

Your working prototype is impressed. Only one thing: Collection Editor should not be a seperate tab. Others are good to me 👍

---

Hi @andyhuang18 @stealth-bombeer could you please send your resumes to me by email or just leave a link here?

[stealth-bombeer]

@stealth-bombeer

Sorry for the late replay. I have been struggling with my Graduation Thesis Proposal Report so I decided to turn off all bells to avoid distraction.

Your working prototype is impressed. Only one thing: Collection Editor should not be a seperate tab. Others are good to me 👍

Hi @andyhuang18 @stealth-bombeer could you please send your resumes to me by email or just leave a link here?

Thanks @tyn1998 ,i'll be mailing you my resume by early evening. One doubt regarding collection editor : User can visit the collection editor by clicking on edit button next to the repo's right ?

[tyn1998]

One doubt regarding collection editor : User can visit the collection editor by clicking on edit button next to the repo's right ?

Yes, that's right (the pen icon)

[wxharry]

Hi @andyhuang18, here is the new design of this feature: HyperCRX - Figma. The styles are based on the style of Github, you are supposed to use styles directly from github. Feel free to contact me for any confusion on the new design.

[andyhuang18]

Copy that! Thank you Harry for the design. I also think that the repo-collection function should conform to the official style design of GitHub. What needs to be done now is to realize the floating layer modal that pops up after clicking a certain collection. In this floating layer, there are also functions to edit collection, add or delete repo, setting the size of the display view, and the most important part is the part of displaying visual information.

[andyhuang18]

After talking with @tyn1998 in person yesterday, I have a deeper understanding of the prototype. After the discussion, the buttons on the GitHub repository interface and the buttons on the Option interface still maintain the original interface. The Repo Collection display board page is adjusted, the repository list is moved to the left column, and the collection list is moved to the top, which is displayed in a manner similar to a browser tab. The edit button in the upper right corner leads to the edit interface, and the edit interface adds the function of deleting collection (marked in red). In addition, there is still room for improvement in the code, such as optimizing data storage, component references, etc.

repo collection display board draft:

collection editor draft:

Thanks to @tyn1998, @wj23027 offline communication is more efficient... finally 对齐.

[tyn1998]

Hi @andyhuang18, if I remember right the collection edit icon should be in the collection tab. After all the collection tabs, a "+" button is provided to create a new collection. Am I right?

[andyhuang18]

Hi @andyhuang18, if I remember right the collection edit icon should be in the collection tab. After all the collection tabs, a "+" button is provided to create a new collection. Am I right?

YES! My fault...