feat: implement of repo collection [OSPP 2023]

[andyhuang18]

Brief Information

This pull request is in the type of (more info about types):

• build
• ci
• docs
• feat
• fix
• perf
• refactor
• test

Related issues (all available keywords):

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

Details

• Currently, the Repo Collection button has been added to the github page. After clicking, the collection list will pop up. Click Delete in the list to delete the corresponding collection.

• Similarly, a button has been added to the settings bar of the hypercrx-icon, but the design of the style has yet to be adjusted.
• The next thing that needs to be implemented is to save the user's Repo Collection locally and complete the development of the main display board of the Repo Collection.

PS: There is a small problem at present is that I want this button to be closer to the Edit Pins, that is, to the right.

Things to be done:

• adjust style of the dropdown opened throuth hypercrx-icon
• save the user's Repo Collection locally
• main display board of the Repo Collection
• i18n
• other more

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA

Others

I used the components of ant design to complete it, and welcome your valuable suggestions!

[andyhuang18]

Report on work completed so far：

1. The user's repo collection can be stored locally in the browser, and the next time the browser is opened, the user's custom repo collection data can be read. Since antd's menu needs to receive the return value of the getitem function as a menuitem, and the return value cannot be stored directly via chrome.storage.local.set due to nesting, I extracted the information required by the getitem function (label,key, icon, children), and converted it into a storable data structure for storage. Also, when reading the local data via chrome.storage.local.get, you need to pass the information mentioned above into the getitem function as parameters to get the value of the menu.
2. Implemented reset default repo-collection function:SetAsDefault, user can initialize menu to default state by this button.
3. A particular collection can be deleted, and in order to add new collections without duplicate key conflicts, the remaining collections need to be renumbered after deleting the collection. Similarly, the children of each renumbered collection should also be renumbered. UpdateCollection function is used to realize the renumbering.
4. User can add the current repo to a specific collection by using the getRepoName function to get the name of the repository on the current page and add it to the item list of the collection.
5. To make the code more understandable, I'll use an example in JSON form to briefly describe the item's information:

[
  {
    "label": "X-Lab",
    "key": "collection1",
    "icon": "GithubOutlined",
    "children": [
      { "label": "delete collection", "key": "delete1", "icon": "DeleteOutlined" },
      { "label": "add current Repo", "key": "add1", "icon": "FolderAddOutlined" },
      { "type": "divider" },
      { "label": "open-digger", "key": "1.1" },
      { "label": "open-perf", "key": "1.2" },
      { "label": "open-leaderboard", "key": "1.3" },
      { "label": "open-wonderland", "key": "1.4" }
    ]
  }
]

• label is the name of the collection
• key is the key of the unique collection option, in the first level, the key is the collection plus a numeric numbering arrangement
• icon is the icon in front of the option
• children is the information contained in the collection.
• The meaning of the data in the second level is similar to that in the first level, where the first three items are the delete collection option for deletion, the add current repo option for adding a repo, and a separator containing only the type attribute. children is the information contained within the collection that is associated with the parent collection number.

[andyhuang18]

Simply recorded a demo video, the operations include adding collection, deleting collection, adding current repo to collection, resetting default values.

demo.for.repo-collection.2023.08.15.mp4

[wxharry]

Hi, I have changed the base branch for this PR. Since you and wj are working this feature together, we cannot merge your work one by one. So, I create a feature branch so that you can work closely together and develop in a relative fast pace.

For this PR, please implement Frame 1, 2, 3. It is okay to ignore styles and unrelated features for this PR.

Thanks!

[andyhuang18]

It is not completely finished yet and has encountered some status management problems. The following is the situation of the two interfaces.

Time is tormenting me...

[andyhuang18]

At present, the button function of the repository page has been initially implemented, and you can check which collection the repository belongs to when you click it for the first time. After clicking edit, you can enter the checkbox list and add it to a new collection.

Clicking on the collection to pop up the modal in the repository interface has not yet been implemented, but it can capture the parameters that need to be transmitted.

In addition, click collection on the pop-up interface (it is blocked in the video), and the modal can pop up. The top of the modal is composed of tabs named after the collection. The left side displays the repository information contained in the collection.

The demo video is shown below：

demo.video.mp4

The problem currently encountered is that sometimes when managing the state of an object, the value of the object cannot be changed. (However, it is possible to increase a certain attribute of an object, but not to decrease it, which is confusing...)

[andyhuang18]

I have initially implemented the function of calling the modal from the button in the dropdown under the repository left yesterday.

The demo video is shown below：

demo.of.modal.from.dropdown.click.mov

[andyhuang18]

The demo video is shown below：

demo.for.collection.editor.mov

[andyhuang18]

demo.mp4

[wxharry]

Please do a chore on your code by removing unnessary comments and use english in comments. Thank you so much.

[andyhuang18]

Hi～ @wxharry @tyn1998 This is the final version of my code! Please spare your time checking it! Thank you very much 😄
This is the button interface：

This is the part where repository can be added to the dropdown of the button：

This is the modal interface, the middle part is the chart：

This is the modalEditor interface, which can edit collection and repository：

[tyn1998]

Great job @andyhuang18 !

Your code LGTM, thank you for your contributions!