Merge pull request #2 from EpocDotFr/copy-source-target-branch-name

EpocDotFr · web-flow · commit e52ed2358ca9 · 2020-04-09T17:54:46.000+02:00
Copy source and target branches name
diff --git a/README.md b/README.md
@@ -9,20 +9,23 @@ A browser extension that enhance all Merge Requests lists on any instance of Git
 ## Features
 
   - Display source and target branches
+    - Buttons allowing to easily copy these branches name (can be disabled in the extension preferences)
   - Compatible with all GitLab editions (GitLab CE, GitLab EE, GitLab.com) (look at the prerequisites, though)
   - No configuration needed
 
 ## Prerequisites
 
   - **GitLab**: 9.0 or above or GitLab.com (this addon requires GitLab API v4)
-  - **Firefox**: any recent version of Firefox (>= 57)
-  - **Chrome**: any version of Chrome
+  - **Firefox**: >= 63 (because this extension uses the `clipboard.writeText` API)
+  - **Chrome**: >= 66 (because this extension uses the `clipboard.writeText` API)
 
 ## Installation
 
   - **Firefox**: from the [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/gitlab-mrs-lists-enhancer/) website
   - **Chrome**: from the [Chrome Web Store](https://chrome.google.com/webstore/detail/gitlab-merge-requests-lis/emiefdjcbfjkaofipmdcflcddcchmdkf) website
 
+You can also install this add-on manually by using one of the ZIP files on the [Releases](https://github.com/EpocDotFr/gitlab-merge-requests-lists-enhancer/releases) page.
+
 ## Credits
 
   - Logo by [Thanga Vignesh P](https://www.iconfinder.com/icons/5402348/add_list_playlist_icon) (CC BY-NC 3.0)
@@ -31,8 +34,8 @@ A browser extension that enhance all Merge Requests lists on any instance of Git
 
 👉 = current version
 
-  - 👉 **1.0** - Initial release (display Merge Request source and target branches)
-  - **1.1** - Copy source and target branches name
+  - **1.0** - Initial release (display Merge Request source and target branches)
+  - 👉 **1.1** - Copy source and target branches name
   - **1.2** - Copy basic Merge Request information (intended for sharing on e.g instant messaging softwares)
   - **1.3** - Direct Jira ticket link (automatic detection of ticket ID in branch name or Merge Request title)
   - **1.4** - WIP / unWIP toggle button
diff --git a/css/options.css b/css/options.css
@@ -0,0 +1,14 @@
+/************************************************************************
+ * Global styles */
+
+.txt-center {
+    text-align: center;
+}
+
+/************************************************************************
+ * Preferences form */
+
+form >  * {
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
diff --git a/html/options.html b/html/options.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="../css/options.css">
+</head>
+<body>
+    <form>
+        <div class="browser-style">
+            <input type="checkbox" id="enable_buttons_to_copy_source_and_target_branches_name" class="browser-style"> <label for="enable_buttons_to_copy_source_and_target_branches_name">Enable buttons allowing to copy source and target branches name</label>
+        </div>
+        <div class="txt-center"><button type="submit" class="browser-style">Save preferences</button></div>
+    </form>
+
+    <script src="../js/preferences.js"></script>
+    <script src="../js/options.js"></script>
+</body>
+</html>
diff --git a/js/content.js b/js/content.js
@@ -36,7 +36,7 @@
             xhr.onload = callback;
 
             xhr.onerror = function() {
-                console.error('Error while communicating with GitLab');
+                alert('Error while communicating with GitLab.');
             };
 
             xhr.open(method, this.createEndpointUrl(endpoint, queryStringParameters));
@@ -62,7 +62,7 @@
 
     class ContentScript {
         /**
-         * Initialize the content script of the extension which is executed in the context of the page.
+         * The content script of the extension which is executed in the context of the page.
          */
         constructor() {
             this.currentProjectId = this.getCurrentProjectId();
@@ -87,16 +87,15 @@
             this.baseApiUrl = this.baseUrl + '/api/v4/';
             this.apiClient = new GitLabApiClient(this.baseApiUrl);
 
-            console.debug('Current project ID:', this.currentProjectId);
-            console.debug('Base project URL:', this.baseProjectUrl);
-            console.debug('GitLab base URL:', this.baseUrl);
-            console.debug('GitLab API base URL:', this.baseApiUrl);
-
             let currentMergeRequestIds = this.getCurrentMergeRequestIdsAndSetUuidDataAttributes();
+            let preferencesManager = new globals.Gmrle.PreferencesManager();
 
-            console.debug('Current merge requests IDs:', currentMergeRequestIds);
+            let self = this;
 
-            this.fetchMergeRequestsDetailsThenUpdateUI(currentMergeRequestIds);
+            preferencesManager.getAll(function(preferences) {
+                self.preferences = preferences;
+                self.fetchMergeRequestsDetailsThenUpdateUI(currentMergeRequestIds);
+            });
         }
 
         /**
@@ -149,7 +148,10 @@
                     if (this.status == 200) {
                         self.removeExistingTargetBranchNodes();
                         self.updateMergeRequestsNodes(this.response);
+                        self.attachClickEventToCopyBranchNameButtons();
                     } else {
+                        alert('Got error from GitLab, check console for more information.');
+
                         console.error('Got error from GitLab:', this.status, this.response);
                     }
                 },
@@ -191,20 +193,58 @@
                 let infoDiv = document
                     .querySelector('.mr-list .merge-request[data-iid="' + mergeRequest.iid + '"] .issuable-main-info');
 
-                let html = '<div class="issuable-info"><span class="project-ref-path has-tooltip" title="Source branch">' +
-                    '<a class="ref-name" href="' + self.baseProjectUrl + '/-/commits/' + mergeRequest.source_branch + '">' + mergeRequest.source_branch + '</a>' +
-                '</span>' +
-                ' <i class="fa fa-long-arrow-right" aria-hidden="true"></i> ' +
-                '<span class="project-ref-path has-tooltip" title="Target branch">' +
-                    '<a class="ref-name" href="' + self.baseProjectUrl + '/-/commits/' + mergeRequest.target_branch + '">' + mergeRequest.target_branch + '</a>' +
-                '</span></div>';
+                let html = '<div class="issuable-info">' +
+                    '<span class="project-ref-path has-tooltip" title="Source branch">' +
+                        '<a class="ref-name" href="' + self.baseProjectUrl + '/-/commits/' + mergeRequest.source_branch + '">' + mergeRequest.source_branch + '</a>' +
+                    '</span>';
+
+                if (self.preferences.enable_buttons_to_copy_source_and_target_branches_name) {
+                    html += ' <button class="btn btn-secondary btn-md btn-default btn-transparent btn-clipboard has-tooltip gmrle-copy-branch-name" title="Copy branch name" data-branch-name="' + mergeRequest.source_branch + '">' +
+                        '<i class="fa fa-clipboard" aria-hidden="true"></i>' +
+                    '</button>'
+                }
+
+                html += ' <i class="fa fa-long-arrow-right" aria-hidden="true"></i> ' +
+                    '<span class="project-ref-path has-tooltip" title="Target branch">' +
+                        '<a class="ref-name" href="' + self.baseProjectUrl + '/-/commits/' + mergeRequest.target_branch + '">' + mergeRequest.target_branch + '</a>' +
+                    '</span>';
+
+                if (self.preferences.enable_buttons_to_copy_source_and_target_branches_name) {
+                    html += ' <button class="btn btn-secondary btn-md btn-default btn-transparent btn-clipboard has-tooltip gmrle-copy-branch-name" title="Copy branch name" data-branch-name="' + mergeRequest.target_branch + '">' +
+                        '<i class="fa fa-clipboard" aria-hidden="true"></i>' +
+                    '</button>';
+                }
+
+                html += '</div>';
 
                 self.parseHtmlAndAppendChild(
                     infoDiv,
                     html
                 );
             });
         }
+
+        /**
+         * Attach a click event to all buttons inserted by the extension allowing to copy the source and target
+         * branches name (if feature is enabled by the user).
+         */
+        attachClickEventToCopyBranchNameButtons() {
+            if (!this.preferences.enable_buttons_to_copy_source_and_target_branches_name) {
+                return
+            }
+
+            document.querySelectorAll('button.gmrle-copy-branch-name').forEach(function(el) {
+                el.addEventListener('click', function(e) {
+                    e.preventDefault();
+
+                    navigator.clipboard.writeText(el.dataset.branchName).then(function() {
+                        // Do nothing if copy was successful.
+                    }, function() {
+                        alert('Unable to copy branch name.');
+                    });
+                });
+            });
+        }
     }
 
     let cs = new ContentScript();
diff --git a/js/options.js b/js/options.js
@@ -0,0 +1,62 @@
+(function(globals) {
+    'use strict';
+
+    class OptionsPage {
+        /**
+         * Class which handles everything related to the options page of the extension. Preferences are persisted in
+         * the browser's local storage.
+         */
+        constructor() {
+            this.preferencesManager = new globals.Gmrle.PreferencesManager();
+
+            this.getDomNodes();
+            this.restoreOptionsFromStorage();
+            this.attachEventListenersToDomNodes();
+        }
+
+        /**
+         * Queries and caches every relevant DOM nodes for further manipulations.
+         */
+        getDomNodes() {
+            this.optionsForm = document.querySelector('form');
+            this.enableButtonsToCopySourceAndTargetBranchesNameCheckbox = document.querySelector('input#enable_buttons_to_copy_source_and_target_branches_name');
+        }
+
+        /**
+         * Retrieve preferences from local storage and update the UI accordingly.
+         */
+        restoreOptionsFromStorage() {
+            let self = this;
+
+            this.preferencesManager.getAll(function(preferences) {
+                self.enableButtonsToCopySourceAndTargetBranchesNameCheckbox.checked = preferences.enable_buttons_to_copy_source_and_target_branches_name;
+            });
+        }
+
+        /**
+         * Attach some events to DOM nodes that were queried early.
+         */
+        attachEventListenersToDomNodes() {
+            let self = this;
+
+            this.optionsForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+
+                self.saveOptionsToStorage();
+            });
+        }
+
+        /**
+         * Take all DOM nodes values and perist them in the local storage.
+         */
+        saveOptionsToStorage() {
+            this.preferencesManager.setAll({
+                enable_buttons_to_copy_source_and_target_branches_name: this.enableButtonsToCopySourceAndTargetBranchesNameCheckbox.checked
+            });
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        let op = new OptionsPage();
+    });
+}(this));
diff --git a/js/preferences.js b/js/preferences.js
@@ -0,0 +1,84 @@
+(function(globals) {
+    'use strict';
+
+    globals.Gmrle = globals.Gmrle || {};
+
+    globals.Gmrle.PreferencesManager = class {
+        get defaults() {
+            return {
+                enable_buttons_to_copy_source_and_target_branches_name: true
+            };
+        }
+
+        /**
+         * This class holds all the logic related to user preferences persistance.
+         */
+        constructor() {
+            if (globals.browser) { // Firefox uses `browser`, Chrome uses `chrome`
+                this.getAll = this.getAllFirefox;
+                this.setAll = this.setAllFirefox;
+            } else if (globals.chrome) {
+                this.getAll = this.getAllChrome;
+                this.setAll = this.setAllChrome;
+            } else {
+                console.error('Unsupported browser');
+            }
+        }
+
+        /**
+         * Get all the user's preferences.
+         *
+         * Used as `getAll` if the current browser is Firefox.
+         */
+        getAllFirefox(callback) {
+            browser.storage.local.get(this.defaults).then(callback, function() {
+                alert('Error retrieving extension preferences.');
+            });
+        }
+
+        /**
+         * Save all the user's preferences.
+         *
+         * Used as `setAll` if the current browser is Firefox.
+         */
+        setAllFirefox(preferences) {
+            browser.storage.local.set(preferences).then(function() {
+                // Do nothing if save was successful.
+            }, function() {
+                alert('Error saving extension preferences.');
+            });
+        }
+
+        /**
+         * Get all the user's preferences.
+         *
+         * Used as `getAll` if the current browser is Chrome.
+         */
+        getAllChrome(callback) {
+            chrome.storage.local.get(this.defaults, function(preferences) {
+                if (chrome.runtime.lastError) {
+                    alert('Error retrieving extension preferences, check console for more information.');
+
+                    console.error('Error retrieving extension preferences:', chrome.runtime.lastError);
+                } else {
+                    callback(preferences);
+                }
+            });
+        }
+
+        /**
+         * Save all the user's preferences.
+         *
+         * Used as `setAll` if the current browser is Chrome.
+         */
+        setAllChrome(preferences) {
+            chrome.storage.local.set(preferences, function() {
+                if (chrome.runtime.lastError) {
+                    alert('Error saving extension preferences, check console for more information.');
+
+                    console.error('Error saving extension preferences:', chrome.runtime.lastError);
+                }
+            });
+        }
+    }
+}(this));
diff --git a/screenshot.png b/screenshot.png
diff --git a/scripts/manage.py b/scripts/manage.py
@@ -8,12 +8,15 @@ def create_manifest_file(target):
     data = settings.MANIFEST_FILE
 
     if target == 'firefox':
+        data['options_ui']['browser_style'] = True
         data['browser_specific_settings'] = {
             'gecko': {
                 'id': 'gmrle@epoc.fr',
-                'strict_min_version': '57.0'
+                'strict_min_version': '63.0'
             }
         }
+    elif target == 'chrome':
+        data['options_ui']['chrome_style'] = True
 
     with open('manifest.json', 'w', encoding='utf-8') as f:
         json.dump(data, f, indent=2)
diff --git a/scripts/settings.py b/scripts/settings.py
@@ -1,7 +1,7 @@
 MANIFEST_FILE = {
     'manifest_version': 2,
     'name': 'GitLab Merge Requests lists enhancer',
-    'version': '1.0.0',
+    'version': '1.1.0',
     'description': 'An extension that enhance all Merge Requests lists on any instance of Gitlab and GitLab.com.',
     'homepage_url': 'https://github.com/EpocDotFr/gitlab-merge-requests-lists-enhancer',
     'author': 'Maxime \'Epoc\' G.',
@@ -14,11 +14,15 @@
     'content_scripts': [
         {
             'matches': ['*://*/*/*/-/merge_requests', '*://*/*/*/-/merge_requests?*'],
-            'js': ['js/content.js']
+            'js': ['js/preferences.js', 'js/content.js']
         }
     ],
+    'options_ui': {
+        'page': 'html/options.html'
+    },
     'permissions': [
-        '*://*/*/*/-/merge_requests', '*://*/*/*/-/merge_requests?*'
+        '*://*/*/*/-/merge_requests', '*://*/*/*/-/merge_requests?*',
+        'storage'
     ]
 }
 
