This is to change the list of projects rows from single rows to display as dynamic react cardview layout..

https://www.npmjs.com/package/react-native-cardview

Tasks

• remove all custom styling to make use of https://tailwindcss.com/ and generate styles.

When adding a new project which does not exist. E.g. invalid/invalid, an error text should show The 'invalid/invalid' project does not exist!

Currently the root of the application requires you to login with github to begin.

We should change it so that it's an optional login to add private repositories.

Otherwise, we should allow to add public repositories.

Add the ability to refresh the statuses with a given interval.

https://sitture.github.io/commit-status/plus.svg is erroring which is used inside the Add bar. Update the references so that it can resolve properly.

To show sub git commit statuses of each project.

Currently, when clcking on the project link, the accrodian expands also, that should only happen when clicking in the project row.

TODO:

• clicking on project link, does not open accrodian
• projects are opened in a new tab.

Task

• Currently when click on a project (https://sitture.github.io/commit-status), it shows the commit history of the project. But we'd like to change that so that clicking on the project shows git commit status of each tasks in the project and each status links to details in a new tab/window.

E.g.

Project A

• Sub Status 1
• Sub Status 2

Currently, we can add or remove to the list of projects. However, it resets when refreshing the page.

This is to tackle not resetting the projects list to default.

When A commit status is set by github actions on a repository, It's currently always shown as pending even though the status is set to pass

For example, the master commit status on the sitture/env-config is green but is showing as pending.

• Add sitture/commit-status as the placeholder test in the Add text field.

Add a toggle button to top right corner of the app to enable/disable auto refreshing.

• Toggle text = Enable Auto Refresh when disabled and Disable Auto Refresh when enabled.

Behavior:

The state for project details is reset every time the projects as a whole are updated. This causes the project details to close (if they are open) and also for the individual auto refresh to be reset.

To replicate:

1. Change the interval timer to 1000ms on row 87 of ProjectList.js

autoRefreshProjectStatuses = () => {
  if(this.state.projects.length && !this.state.authoRefreshIntervalId) {
    const authoRefreshIntervalId = setInterval(() => {
      this.loadProjectStatuses();
    }, 20000) // <- Change to 1000
    this.setState({authoRefreshIntervalId})
  } else if(!this.state.projects.length && this.state.authoRefreshIntervalId) {
    clearInterval(this.state.authoRefreshIntervalId);
    this.setState({authoRefreshIntervalId: null})
  }
}

2. Start the application
3. Try to open project details.

Step 1 is not necessary, but without it, you will have to wait 20 sec instead of 1 for the bug to appear.

Expected behavior:

Opened project details should stay open even after refreshing projects.
The project should still be set to auto update enable if it has been set to enabled.

Add ability to filter by status of the projects

• Add a tabbed view to filter projects by All/Unhealthy
• All shows a full list of projects
• Unhealthy shows list of failed projects only

Example:

Currently, the app shows a list of projects based on flat json file.

This is to allow adding and removing of projects using the UI.

Task

• Add the ability to login and authenticate with github

So that we can then use the oauth tokens to fetch the commit status

Task

• For each project status row, show a count of all sub commit-statuses

E.g.

Current:

${project} ${status}

New:
sitture/commit-status success [5/5]
sitture/commit-status failure [2/5]
${project} ${status} [$count]

We currently get the commit status by hitting this endpoint https://api.github.com/repos/cucumber/cucumber-jvm/commits/master/status

But REF master does not always return the status and errors in 404.

Tasks

Change the api call to fetch status using the commit ref instead of master

• Get the latest commit ref from master
• Use the latest commit ref to fetch the commit status

E.g.

https://api.github.com/repos/cucumber/cucumber-jvm/commits/master/status returns ❌
https://api.github.com/repos/cucumber/cucumber-jvm/commits/bb97c6943659018e5e8496aff6a18d73eec06f26/status 🆗

### Task

Currenty, to remove a project from the list, you have to click on the word Remove.

• Change the Remove to ❌ icon

Problem:

Currently it's continuously requesting the status from github ignoring the global interval of 30 seconds

Tasks:

• Update so that it only requests updates for the set interval or default 30 seconds

Following deprecation warning is thrown when running the application:

Further details on async rendering https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

Task

• Update the project card background based on the status. E.g. if the status is success then change the background of the project card to green.
• Remove the status column
• Right align the action to remove project

To change the layout, so that project rows are set as the accrodians. Hence, these accrodian can be expanded to view sub-statues of each project.

A way to set the interval in seconds (top right), which sets authoRefreshIntervalId in the ProjectList component state.

Task

• Add a github icon (top left) corner to link back to https://github.com/sitture/commit-status repo.

When there are no project, should add a message saying No projects are being monitored.

Where there are projects with status passed, and using unhealthy filter tab should show a text All projects are green.

Currently the initial github login page isn't responsive on mobiles.

Tasks

• Update styling to make login module prettier
• Update application title to commit-status

When clicking on Remove button, the project should be removed.

It's currently not doing that, but opens up the accordian instead.