Skip to content
This repository has been archived by the owner on Jun 5, 2023. It is now read-only.

IssuePageController

jiajunGit edited this page Jul 24, 2017 · 3 revisions

Description

The IssuePageController contains the logic that handles events emitted, DOM manipulation and retrieval of data from issue pages. It primarily contains two different issue page controllers, namely NewIssuePageController (handles new issue page and new pull request page) and ExistingIssuePageController (handles existing issue page and existing pull request page).

Overview of IssuePageController

  • It contains two different run methods (that run when the document is ready), namely runOnNewLabelsPage() and runOnExistingLabelsPage() which are invoked from PageControlDelegator depending on the page (i.e. new issue/pull request page and existing issue/pull request page respectively) that the user has landed on.
  • In addition, it contains two methods (that run before the document is ready), namely partialRunOnNewLabelsPage(runParams, isEnd) and partialRunOnExistingLabelsPage(runParams, isEnd). Both of these methods are continuously invoked by PageControlDelegator while the page is still loading so that it can check if the required DOM elements are present or not and if they are present, run the appropriate methods to either retrieve data or manipulate the DOM elements. runParams parameter is used so that these methods would know which methods have been successfully executed and avoid executing them again. Besides the runParams parameter, the isEnd parameter informs the methods if the page has completed loading so that the necessary methods can be executed accordingly.

NewIssuePageController

  • Before it retrieves data from the page or makes any changes to the page, it checks if the user has permissions to add labels on the new issue/pull request page by calling the hasPermissionToManageLabels() method.
  • All the repository's Github labels are loaded along with the new issue/pull request page and therefore you need to use the getLabelsFromDOM() method to retrieve those labels to display it on the extension's sidebar ui.
  • User selected labels are applied via a POST call performed within the handleExternalApplyLabelsEvent() method. Some request parameters are required to make the POST call and they are retrieved from the page using the getDataForPOSTRequest() method.
  • The following code is a brief overview of the initial execution flow that takes place in NewIssuePageController:
NewIssuePageController.prototype.run = function(layoutManager) {
    if(layoutManager && this.hasPermissionToManageLabels()){
        this.layoutManager = layoutManager;
        this.setupPageListeners();
        var updateType = this.layoutManager.initializeUI();
        this.storage = this.getLabelsFromDOM();
        if(this.storage){
            this.layoutManager.populateUIWithData(updateType, this.storage);
        } else {
            this.cleanup();
        }
    }
}

ExistingIssuePageController

  • Before it retrieves data from the page or makes any changes to the page, it checks if the user has permissions to add labels on the existing issue/pull request page by calling the hasPermissionToManageLabels() method.
  • All the repository's Github labels are NOT loaded along with the existing issue/pull request page and therefore you need to use the retrieveInitialLabelsFromGETRequest(updateType) method to retrieve all GitHub labels via a POST request. Once a response is received, the processInitialGETResponse(updateType) event handler is invoked to update the extension's UI accordingly.
  • When the user applies the labels on page B while having the same issue opened in both page A and page B, the selected labels would also update for page A. The updateUI() event handler will be invoked when updates made to the GitHub discussion sidebar have been detected. updateUI() will check if any selection changes have occurred and calls retrieveLabelsFromGETRequest() to update the extension's UI accordingly if changes made to the selection of labels were observed
  • The following code is a brief overview of the initial execution flow that takes place in ExistingIssuePageController:
ExistingIssuePageController.prototype.run = function(layoutManager) {
    if(layoutManager && this.hasPermissionToManageLabels()){
        this.layoutManager = layoutManager;
        this.setupGitDOMListeners();
        var updateType = this.layoutManager.initializeUI();
        this.storage = this.getLabelsFromDOM();
        if(!this.storage){
            this.retrieveInitialLabelsFromGETRequest(updateType);
        } else {
            this.layoutManager.populateUIWithData(updateType, this.storage);
            this.refreshGitLabelDisplay();
        }
    }
}