Student | Freelance Web Developer | Open Source Developer

About meResume

Dashboard for Managing Registered Repositories in Yaydoc

Monday, August 7, 2017

In order to register repositories for continuous documentation generation and development using Yaydoc, we relied on a modal in the Web User Interface. Using a modal makes the UI simple; however, it comes with a lot of limitations. Apart from the limitations that come with using modal, the previous implementation had some notable flaws

  • It was possible to close the modal, either by clicking the x button on the top right corner or clicking anywhere outside the modal. If the modal was closed mistakenly, the user would have to Sign in to the Yaydoc CI again to get that modal. This would have wasted a lot of time and resources and could have been frustrating to the user.
  • If the user logs in to Yaydoc CI, performing One-Time Deployment was not possible since the user is presumably signed in for CI deployment and hence Callback assumes that the user wants to CI Deploy.
  • With further development of the project, many new features would be added to CI Deployment. These new features and functionalities cannot be handled from a single modal

Realizing these flaws, there was a need to update the flow and hence a Dashboard was introduced. The dashboard has various sections, two of which are:

  1. A repository registration form. This is the same form as was shown in the CI modal that existed before this update. It is used to register repositories to Yaydoc for continuous documentation generation.
  2. A list of organizations that were authorized by the user to be accessible by Yaydoc.

The user accesses the dashboard after signing in using Github. The sign in and registration operation is performed using passport-github.

passport.use(new GithubStrategy({
  clientID: process.env.GITHUB_CLIENT_ID,
  clientSecret: process.env.GITHUB_CLIENT_SECRET,
  callbackURL: process.env.GITHUB_CALLBACK_URL
}, function (accessToken, refreshToken, profile, cb) {
  User.getUserById(profile.id, function(error, user) {
    // if the user already exists
    if (user) { return done(null, user); }
    else {
      let newUser = new User();
      ....
      ....
      newUser.save(function(error) { return done(error, newUser) });
    }
  });
}));

Since the dashboard shows content specific to users, there was a need to register users to Yaydoc. Previously, only repositories were registered to Yaydoc, storing user’s information and access token in the repository’s collection. Since a single access token is required for a user and all his or her accessible repositories, storing it and user’s other information like the email in each repository increased redundancy. Hence, a user collection was created, with the following schema:

const User = module.exports = mongoose.model(‘User’, mongoose.Schema({
  id: String,       // Github id of the user
  token: String,    // Encrypted access token of the user
  email: String,    // Email id (used for mail services)
  name: String,     // Github’s `display_name` of the user 
  username: String  // Github username
}));

Storing user’s’ information in a collection was necessary for the current implementation and will also help with adding various envisaged features to Yaydoc.

The organization’s list shows the organizations that the user grant access to Yaydoc. These are retrieved using Github’s Organization API. The user can manually give or revoke access to repository to any OAuth Application. It is possible that the user may forget to give access to an organization while registration or may want to give access to the application at a later case. A possibility of such a scenario is considered and handle similar to the way it is handled by Travis. Along with the list of authorized organizations, a link is also given that redirects the user to Yaydoc’s OAuth settings in Github from where the user can grant or revoke access.

Resources:

  1. Mongoose Schema Documentation: http://mongoosejs.com/docs/guide.html
  2. Github Authentication Strategy using Passport https://github.com/jaredhanson/passport-github
  3. Github’s organization API https://developer.github.com/v3/orgs/

Original Post:- http://blog.fossasia.org/dashboard-for-managing-registered-repositories-in-yaydoc/