Add a few buttons that can copy some label templates from some repos.

Add up to 3 templates. Keep it simple.

This enhancement will simplify future maintenance and updates on the code, by turning "delete-all-and-copy" buttons into a combination of clicking "delete-all" and "copy-from" functions. Thus, in the future, we only need to maintain "delete-all" and "copy-from" functions. We don't need to maintain separate "delete-all-and-copy" functions.

Issue

Clicking to edit the color of a label opens a color picker.

Currently, to complete the process, you need to copy and paste the desired hex code onto the label.

Desired outcome

We would like for the selected hex code to auto-populate the label.

Change wording: Ask for tokens, not passwords.

At least, encourage using tokens instead of passwords.

Material Design for Bootstrap 4:

https://fezvrasta.github.io/bootstrap-material-design/

Observed behavior

When repo-owner and repo fields are vacant, clicking on "Revert to Original" returns a 404 status code (Not Found).

Expected behavior

• Check if repo-owner and repo fields are vacant before sending http requests (GET). If they are vacant, don't send http requests
• Catch the 404 error, in case of typos

Details

• Copy labels does not enable the Commit button
• Copy milestones does not enable the Commit button
• Delete all existing labels and copy does not enable Commit button on a repo that has no existing labels.
  Delete all existing milestones and copy does not enable Commit button on a repo that has no existing milestones.

Task:

• Clean up text in html and js
• Clean up confusing text
• Fix typos and grammatical errors
• Clean up variables and confusing wordings in App.js

Summary

Within the Labels page under Issues of any GitHub repository, the current max display amount of individual labels is 28. Take these labels for instance. Notice how there are 41 labels in total but only 28 can fit in the first page.

This affects the label-manager web app in that if you are trying to copy all labels from another repo that has more than 28 labels -- by inputting username:repo, you are only able to copy the first page of 28 labels. For all subsequent pages, you'd need to concatenate the additional path onto the existing username:repo to copy all remaining labels.

Recreating the bug

1. Open the web app. It should look like this:

2. Create a dummy repository.

3. Point to your dummy repo under the Manage your GitHub labels section and click List labels in this repo. This will generate a list of current labels under your new dummy repo. Like so:

4. Click on Copy an existing repo's labels. Using this repo, input Badwater-Apps:github-label-manager-2 within username:repo.

5. Go ahead and click Copy. You should see the addition of quite a few labels that were copied from this repo. Like so:

BUG => Keep in mind that the repo Badwater-Apps:github-label-manager-2 contains 41 labels, but if you do a quick tally, you'll find that the Copy button only managed to pull the first 28 labels that are displayed on the first page.

6. In order to capture the labels on page 2, you'll need to concatenate the additional path /labels?page=2&sort=name-asc onto the existing one and re-copy. Like so:

Expected result after fix

Step 5 should be able to copy all labels from all pages instead of only from the first page.

Just like copying, editing, and committing issue labels, add a feature to do the same for milestones.

Current

Expected

The asterisk in front of the label name dfa should be removed, and the label name should also be properly aligned.

The bug is:

When you commit new milestones that were copied from other repos, it fails. The server returns a 422 status code (Unprocessable Entity).

The reasons are:

• Milestones copied from other repos already have 'milestone number' assigned to them.
• When creating a new milestone for a repo via POST http request via GitHub API, the new milestone cannot contain a 'milestone number' attribute.

Task:

• Add font-awesome
• Use a font-awesome's icon for the recover button
• Make the button show up and make it work

Implementation (open to discussion)

Elements that should be placed into tabs:

• Labels tab
  • All elements of current Labels card
  • Revert to original labels button
  • Delete all labels button
• Milestones tab
  • All elements of current Milestones card
  • Revert to original milestones button
  • Delete all milestones button
• Help tab
  • How this web app works? card
  • Is my personal access token safe? card

Link to Bootstrap navs page for reference

Task:

In js/app.js:

• find all instances of $(this).parent().parent().parent().parent()
• declare a new variable called $that and define it as:
  let $that = $(this).parent().parent().parent().parent();
• use $that in lieu of $(this).parent().parent().parent().parent() in all instances

Improve UI/UX of input form consist of:

• Repo owner
• Repo
• Username
• Personal access token

Issue

The underscores of descriptions of labels and milestones sticking out of the bound of their cards when the browser’s width is between 768px and 996px

To-do

Make the website single column (from 2 columns) when < 996px.

Add a feature to sort labels/milestones on the web app. This feature will be convenient and helpful.

Example sorting schemes

For labels:

• alphabetically
• reverse-alphabetically

For milestones:

• alphabetically
• reverse-alphabetically
• furthest due dates
• closest due dates

Tip: this doesn't have any effect on GitHub API calls, meaning you don't need to modify functions related to making API calls.

It doesn't work. Probably, caused by syntax errors.

Issue

Currently, when you delete an existing label, the window pops up an alert asking you "Really want to delete this?"

Since we have the "restore" button and the "revert to original" button, we don't need this pop-up alert. It is unnecessary and intrusive and slows the workflow down.

Task

Remove all functionalities that involves this pop-up alert.

It starts on Line 230 in app.js:

confirm('Really want to delete this?\n\nNote that this action only removes the label from this list not from Github.')

Adopted from: destan/github-label-manager#10

This will require subsequent changes to accommodate the new UI.

Redesign UI to today's taste.

This is up for discussion, to break it down to specific tasks.

Use a more modern approach for the color picker.

This will also address #35 Feature request: Auto-fill hex code of color picker.
Issue #35 was addressed by a separate PR.

Issue occurs when copying labels from another repo (Chrome & IE)

Commit Changes button remains disabled when the labels are copied from another repo - until another change to the label list is made.

Repro

View list of existing labels for your repo (click List labels in this repo)
Enter repo to copy labels from (click Copy an existing repo's labels (Optional) & enter repo info)
Click Copy
Label list updates, but Commit Changes button remains disabled
-- Workaround --
5. Click Add new label button
6. Delete the newly added label
7. Confirm the delete
8. Commit Changes button is now enabled & clicking it saves the updated list of labels

Adopted from destan/github-label-manager#9

The bootstrap.css the web app uses is severely out of date.

Upgrade bootstrap.css to the latest version and make all necessary adjustments (in index.html and associated files), because the latest version might use slightly different names of classes and variables.

Please test the code before submitting a PR:

• Run the index.html locally
• Use the web app to change labels in a dummy repo and see if it works
• Don’t use your password for authentication. Use a token instead. The instructions are in the web app itself

Issue

Take a look at the issues pointed out by CodeFactor.

Example issue

Issue: 'e' is defined but never used, found in js\app.js on line 352:

$('#copyFromRepoButton').click(function(e) {

Task

Remove all defined but unused variables that can be safely removed in terms of syntax and the code's functionality, as pointed out by CodeFactor.

Solution 1

The e can be omitted. This example code on line 352 can be written as:

$('#copyFromRepoButton').click(function() {

Solution 2

Another way is to use the arrow notation, if this keyword is not used in the function:

$('#copyFromRepoButton').click(() => {

If you don't understand when to use arrow notation or how this keyword works, please stick to Solution 1.

Test

Before submitting a pull request, please test the code and make sure it works. Please check the console for potential errors.

In "Which repo is in use?" Card, "username" is not fully functional.

Observed behavior

Currently, the username is identical as repo-owner.

I'm not 100% sure what the current behavior is, but I'm sure it is NOT functional in all scenarios.

Part of the task is to debug this erroneous behavior.

Expected behavior

The username is the username for login authentication, which may or may not be the same as the repo-owner.

Feature request: Streamline remove all existing labels and cloning labels from another repository.

For example: I'd like to have an option to remove all GitHub's default labels and clone all labels from another repository. Currently, I have to remove existing label one by one.

Task

• Write a function/object to query info for API calls at the top level
• Call the function before every API calls
• Use consistent variable names for these variables inside js/app.js to improve readability

Fields to query

• target owner
• target repo
• username
• personal access token
• copy-from owner
• copy-from repo

Some fields are allowed to be empty for some API calls, while some are not.

Skyler will do it.

The JQuery the web app uses is severely out of date. It uses JQuery 1.8.3, and the latest version is 3.5.1.

Task:

Upgrade jquery.js to the latest version (ver. 3.5.1) and make all necessary adjustments (in index.html, app.js, and all other associated files, if any), because the latest version might use slightly different names of variables and functions.

Please test the code before submitting a PR:

• Run the index.html locally
• Use the web app to change labels in a dummy repo and see if it works
• Don’t use your password for authentication. Use a token instead. The instructions are in the web app itself

This should set the bot straight, and score us an A+.

Title: Remove unnecessary semicolons in javascript

Task

Remove semicolons in js/app.js on the following lines:

• Line 133
• Line 167

Then create a pull request (PR) for review