adewes / gitboard Goto Github PK

Some users might be uncomfortable entering their Github login credentials into the form on the app page (although this information gets only transmitted to Github).

We should give the user an alternative way of authenticating by allowing him to manually create an access token on Github and paste it into a form field. Like this, we bypass the normal authentication using login/password/otp.

Currently, the normal version of Github uses hashtag-based navigation.

We have also implemented HTML5-based navigation, which requires running a server that will redirect all nested URLs to the app page though (i.e. "/milestones/adewes/gitboard" should be a valid URL and render the same page as "/").

Currently, enabling HTML5-based navigation requires the following steps:

• Replace all relative URLs in templates/index.html and the config.js with absolute paths.
• Use settings_html5_navigation.js as the main settings file

We could solve this in a more intuitive way by having Make generate settings and template files with the appropriate content, e.g. using Jinja to process templates.

We should post Gitboard to social media sites to gain attention and new contributors. The following websites are relevant:

• Hacker News - https://news.ycombinator.com
• Reddit - https://reddit.com

Any other ideas?

Currently, the access token is stored in the browser's session storage. Therefore, when closing the browser window, the data will be erased and the when the user opens the app again he/she will have to log in again.

We should add a remember me checkbox to the login dialog. When checked, this should cause the access token to be store in the local storage instead of the session storage, which will make it persistent until the user explicitly logs out.

The accessToken function of the Utils library should automatically check for the access token both in the local storage and the session storage, and should make sure to clear it out from both when logging out the user.

Currently, the app is mostly for viewing issues, while interaction takes place mostly on Github. While this is a reasonable approach, for some use cases it would be great to be able to manipulate issues directly through Gitboard.

One such use case it the planning of sprints: For this, we usually take existing issues (that are either in the backlog or associated to another milestone) and want to add them to a given milestone / sprint.

We should implement a view where the user can create and populate a new milestone with existing issues from Github.

We should add a Reload button on the top of the sprint board so that the user can reload all issues (e.g. if he changes things on Github).

In the future, we should automatically reload all issues. This is possible since the Github API allows for use of the ETag field and will not count repeated requests that yield a 300 response towards the rate limit.

Hi,

Thanks for sharing this. It looks really interesting. I've made the following three changes to get it working against a GitHub Enterprise installation:

diff --git a/src/js/components/user/login.jsx b/src/js/components/user/login.jsx
index 7b86cea..5300cf7 100644
--- a/src/js/components/user/login.jsx
+++ b/src/js/components/user/login.jsx
@@ -141,7 +141,7 @@ define(["js/settings",
                         </div>
                         <div className="panel-body">
                             <ol className="list">
-                                <li>Click <a target="_blank" href={"https://github.com/settings/tokens/new?"+Utils.makeUrlParameters({scopes : settings.scopes.join(','),description : 'Gitboard Access Token'})}>here</a> to go to your Github token settings.</li>
+                                <li>Click <a target="_blank" href={"http://OHNO.com/settings/tokens/new?"+Utils.makeUrlParameters({scopes : settings.scopes.join(','),description : 'Gitboard Access Token'})}>here</a> to go to your Github token settings.</li>
                                 <li>Confirm the creation of the token. Scopes (we need <strong>read:org + repo</strong>) and description should already be correctly set.</li>
                                 <li>Copy the token and paste it into the form above.</li>
                             </ol>
diff --git a/src/js/components/user/logout.jsx b/src/js/components/user/logout.jsx
index 52edfb0..35efa55 100644
--- a/src/js/components/user/logout.jsx
+++ b/src/js/components/user/logout.jsx
@@ -63,7 +63,7 @@ define(["js/settings",
                                             <h5>Security notice</h5>
                                         </div>
                                         <div className="panel-body">
-                                            <p>We cannot delete your authorization from Github without your username and password. If you want to delete it, you can do so manually <a href="https://github.com/settings/tokens">here</a> (look for the <strong>gitboard</strong> token)</p>
+                                            <p>We cannot delete your authorization from Github without your username and password. If you want to delete it, you can do so manually <a href="http://OHNO.com/settings/applications">here</a> (look for the <strong>gitboard</strong> token)</p>
                                         </div>
                                     </div>
                                 </div>
diff --git a/src/js/settings.js b/src/js/settings.js
index 298b313..aacb994 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -21,7 +21,7 @@ define(["jquery","js/env_settings"],function ($,envSettings,Utils) {

     var settings = {
         scopes: ['read:org','repo'],
-        source : 'https://api.github.com',
+        source : 'http://OHNO.com/api/v3',
         useCache : true,
         cacheValidity : 3600*24, //cache expires after 24 hours
         cacheRefreshLimit  : 0.0, //how long until we fetch the new value of something?

and the following change so that the optimization step succeeds:

diff --git a/src/scss/_above_the_fold.scss b/src/scss/_above_the_fold.scss
index b3f0ba7..7ab5d14 100644
--- a/src/scss/_above_the_fold.scss
+++ b/src/scss/_above_the_fold.scss
@@ -1,6 +1,6 @@
 //Import CSS modules
 @import '../bower_components/bootstrap/dist/css/bootstrap.min.css';
-@import '../bower_components/bootstrap-material-design/dist/css/material.min.css';
+@import '../bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.min.css';
 @import '../bower_components/font-mfizz/css/font-mfizz.css';
 @import '../bower_components/font-awesome/css/font-awesome.min.css';
 @import '../bower_components/octicons/octicons/octicons.css';

I built like so:

env NAVIGATION=html5 ENVIRONMENT=production make

and I'm serving from the build/optimized directory with a simple server like so:

python -m SimpleHTTPServer 6060

I'm seeing three problems, the first two are minor (I might be able to run them down), the third is the point of this issue:

1. The gitboard logo in the upper left corner is not rendering, even though the image seems to exist and is being served correctly:

   10.31.209.146 - - [31/Jan/2016 11:39:59] "GET /static/assets/images/homepage/logo.svg HTTP/1.1" 200 -
   

2. I sometimes end up in a loop, starting on the index page, clicking the login button and getting redirected to the index page after a brief glimpse of the gitboard app.

3. I can't view issues associated with milestones, I end up with this page:

I'd appreciate any feedback.

Thanks!

Hi,

I'm getting this error on installation:
npm: 2.14.2
node: v0.12.0
osx: El Capitan
bower: 1.6.8

gitboard - master $> ENVIRONMENT=production make
...
bootstrap#3.3.6 build/static/bower_components/bootstrap
└── jquery#2.1.1

font-mfizz#2.0.0 build/static/bower_components/font-mfizz

marked#0.3.3 build/static/bower_components/marked

markdown#0.5.0 build/static/bower_components/markdown

octicons#3.3.0 build/static/bower_components/octicons

bootstrap-sass#3.3.6 build/static/bower_components/bootstrap-sass
└── jquery#2.1.1
rsync -rupE src/assets build/static
mkdir -p build/static/js
rsync -rupE src/js --include="*.js" build/static
jsx src/js build/static/js -x jsx
could not open file: src/js, Error: EISDIR, illegal operation on a directory

make: *** [jsx] Error 65
gitboard - master $>

We should extend the documentation to make it easier for people to contribute to this project. This comprises the following tasks:

• Explain in detail the philosophy of the project
• Explain the routing and the component hierarchy
• Explain the use of the LoaderMixin and FormMixin classes and the resource loading paradigm.
• Explain UI guidelines

Currently it is hard to navigate back and forth between organizations, repositories, milestones and isues.

We should implement a breadcrumb navigation on top of each page to make it easier for the user to know where he is and to navigate back to higher levels of the hierarchy.

We should implement Trello-style drag & drop functionality, which should work as follows:

• A user drags an issue card from one column to another
• We determine which change is required to put the issue in the column into which it has been dropped (e.g. "remove label 'doing' and add label 'done'").
• We perform the change and reload the issues to reflect it

In the repositories view we should sort repositories by the number of open issues/milestones they have and display repositories without any milestones / open issues at the bottom of the list.

The intent is to make it easier for the user to see which of his repositories actually contain issues / sprint information.

We should automatically and periodically reload the sprintboard to reflect changes made on Github. This should be easy to implement as it only requires a call to reloadResources (e.g. through setTimeout).

Github will not count requests that yield at 300 resonse towards the rate limit, so we can query often without feeling guilty :D

It would be nice to have an "installable" version of Gitboard that people could use on their desktop.

Google Chrome App Store provides a way to do that:

https://developer.chrome.com/apps/about_apps

We should update all the JS dependencies to the newest version in order to be sure to get all the bug fixes and new features. The versioning in the Bower/NPM files should remain fixed though to make sure that the build result stays deterministic and we don't introduce issues through automated updates of dependencies.

The current, text-based display of time estimates and budgets is not very intuitive.

We should try to implement a graphical representation, e.g. in the form of a progress bar or diagram, which should give the user a better feeling for how much work is left to do in the sprint and how much work has already been done.

It would be nice to be able to open new issues directly from Gitboard instead of having to create them in GitHub.

We should write a short introduction to explain what Gitboard is and who can use it.

Important points:

• Gitboard is a single-page application
• Gitboard works without a server
• Gitboard will not send your login credentials anywhere
• Gitboard can be used everywhere and set up on your own server
• Giboard makes use of the Github API through AJAX and jQuery
• Gitboard is built on top of React.js, Bootstrap and Material Design
• Gitboard demonstrates various techniques that we have developed for React apps (e.g. resource loading)

Sprint planning requires to estimate how much time is still required to finished remaining issues in a given sprint.

To facilitate this, we add time-estimate labels to issues, which can be parsed by Gitboard. We want to use this information to generate a so-called burn-down chart (https://en.wikipedia.org/wiki/Burn_down_chart), which will show to the user if it is realistic to complete the sprint tasks on time.

Cheers!
Pascal