Collapse non-interesting tasks or PRs in member details page

[sahsisunny]

When viewing a member's details page, it's often the case that there are a lot of tasks or PRs that are not interesting to the user. For example dev to main sync PR is not interesting to the user. It would be nice to have a way to collapse these tasks or PRs so that the user can focus on the tasks or PRs that are interesting to them.

When user clicks on the collapse button, PATCH call is made to the backend to update the isCollapsed field of the task or PR. The isCollapsed field is a boolean field that is set to true if the task or PR is collapsed and false if the task or PR is not collapsed. The isCollapsed field is set to false by default.
If isCollapsed is true, then hide the all details of the task or PR except the title. If isCollapsed is false, then show all the details of the task or PR.

[sahsisunny]

For collapsing the PRs like "Dev to main sync" PRs we can use the below function to check "dev" and "main" in the title if it is true then we can collapse the PRs.

const checkPrTitle = (str) => {
  if (!str) {
    return false;
  }
  const headBranchName = ["dev", "Dev", "DEV", "develop", "Develop", "DEVELOP"];
  const baseBranchName = ["main", "Main", "MAIN"];
  const containsHead = headBranchName.some((name) => str.includes(name));
  const containsBase = baseBranchName.some((name) => str.includes(name));
  return containsHead && containsBase;
};

Pros:

• It is easy to implement and we don't need to change the backend and call the GitHub API for every PRs.

Cons:

• It is not a good practice to check the title of the PRs and collapse it.
• If developer not add the "dev" and "main" in the title then it will not collapse the PRs like "Release in Production" then it will not collapse the PRs.
• We manually not change the state of the PRs because its filter the PRs by title and collapse it in the frontend side.

Demo

Untitled.mp4

[WYGIN]

For collapsing the PRs like "Dev to main sync" PRs we can use the below function to check "dev" and "main" in the title if it is true then we can collapse the PRs.

const checkPrTitle = (str) => {
  if (!str) {
    return false;
  }
  const headBranchName = ["dev", "Dev", "DEV", "develop", "Develop", "DEVELOP"];
  const baseBranchName = ["main", "Main", "MAIN"];
  const containsHead = headBranchName.some((name) => str.includes(name));
  const containsBase = baseBranchName.some((name) => str.includes(name));
  return containsHead && containsBase;
};

Pros:

• It is easy to implement and we don't need to change the backend and call the GitHub API for every PRs.

Cons:

• It is not a good practice to check the title of the PRs and collapse it.
• If developer not add the "dev" and "main" in the title then it will not collapse the PRs like "Release in Production" then it will not collapse the PRs.
• We manually not change the state of the PRs because its filter the PRs by title and collapse it in the frontend side.

Demo

Untitled.mp4

https://docs.github.com/en/rest/pulls/pulls?apiVersion=2022-11-28#list-pull-requests
Why github api did not solve this issue i think By setting head to user:main & base to main

[sahsisunny]

Another Solution for Collapsed Non Interesting Task

For collapsing the Task(PR) we can use label collapsed and not-collapsed and toggle the label on click of collapse button by call the RDS backend and RDS backend will send patch request to the github to update the label of the task(PR).

Implementation:

• Set up an API endpoint that send the PATCH request to GitHub API to update the label of the PR.
• When the user clicks on the collapse button, send a PATCH request to the API endpoint to update the label of the PR.
• On the frontend, we use conditional rendering to show or hide the details of the PR based on the label of the PR.
• If the label of the PR is collapsed, then hide the details of the PR except the title otherwise show all the details of the PR.