|
87 | 87 | this.baseApiUrl = this.baseUrl + '/api/v4/'; |
88 | 88 | this.apiClient = new GitLabApiClient(this.baseApiUrl); |
89 | 89 |
|
90 | | - let currentMergeRequestIds = this.getCurrentMergeRequestIdsAndSetUuidDataAttributes(); |
| 90 | + let currentMergeRequestIds = this.getCurrentMergeRequestIds(); |
91 | 91 | let preferencesManager = new globals.Gmrle.PreferencesManager(); |
92 | 92 |
|
93 | 93 | let self = this; |
|
121 | 121 | } |
122 | 122 |
|
123 | 123 | /** |
124 | | - * Gets all Merge Requests IDs that are currently displayed AND sets the `iid` data attribute (public Merge |
125 | | - * Request identifier) on all DOM nodes representing a Merge Requests (it's used later in the process). |
| 124 | + * Gets all Merge Requests IDs that are currently displayed. |
126 | 125 | */ |
127 | | - getCurrentMergeRequestIdsAndSetUuidDataAttributes() { |
| 126 | + getCurrentMergeRequestIds() { |
128 | 127 | return Array.from( |
129 | | - document.querySelectorAll('.mr-list .merge-request') |
| 128 | + document.querySelectorAll('.mr-list .merge-request .issuable-reference') |
130 | 129 | ).map(function(el) { |
131 | | - let iid = el.querySelector('.issuable-reference').textContent.trim().replace('!', ''); |
132 | | - |
133 | | - el.dataset.iid = iid; |
134 | | - |
135 | | - return iid; |
| 130 | + return el.textContent.trim().replace('!', ''); |
136 | 131 | }); |
137 | 132 | } |
138 | 133 |
|
|
148 | 143 | if (this.status == 200) { |
149 | 144 | self.removeExistingTargetBranchNodes(); |
150 | 145 | self.updateMergeRequestsNodes(this.response); |
151 | | - self.attachClickEventToCopyBranchNameButtons(); |
| 146 | + |
| 147 | + if (self.preferences.enable_buttons_to_copy_source_and_target_branches_name) { |
| 148 | + self.attachClickEventToCopyBranchNameButtons(); |
| 149 | + } |
| 150 | + |
| 151 | + if (self.preferences.enable_button_to_copy_mr_info) { |
| 152 | + self.attachClickEventToCopyMergeRequestInfoButtons(); |
| 153 | + } |
152 | 154 | } else { |
153 | 155 | alert('Got error from GitLab, check console for more information.'); |
154 | 156 |
|
|
170 | 172 | } |
171 | 173 |
|
172 | 174 | /** |
173 | | - * Append the given HTML string at the end of the given child target node. |
| 175 | + * Parses HTML code and applies a callback on all of the parsed root DOM nodes. |
174 | 176 | */ |
175 | | - parseHtmlAndAppendChild(targetNode, html) { |
| 177 | + parseHtml(html, callback) { |
176 | 178 | new DOMParser() |
177 | 179 | .parseFromString(html, 'text/html') |
178 | 180 | .querySelector('body') |
179 | 181 | .childNodes |
180 | 182 | .forEach(function(node) { |
181 | | - targetNode.appendChild(node); |
| 183 | + callback(node); |
182 | 184 | } |
183 | | - ) |
| 185 | + ); |
| 186 | + } |
| 187 | + |
| 188 | + /** |
| 189 | + * Prepends the given HTML string at the beginning of the given child target node. |
| 190 | + */ |
| 191 | + parseHtmlAndPrepend(targetNode, html) { |
| 192 | + this.parseHtml(html, function(node) { |
| 193 | + targetNode.prepend(node); |
| 194 | + }); |
| 195 | + } |
| 196 | + |
| 197 | + /** |
| 198 | + * Appends the given HTML string at the end of the given child target node. |
| 199 | + */ |
| 200 | + parseHtmlAndAppend(targetNode, html) { |
| 201 | + this.parseHtml(html, function(node) { |
| 202 | + targetNode.append(node); |
| 203 | + }); |
184 | 204 | } |
185 | 205 |
|
186 | 206 | /** |
187 | 207 | * Actually updates the UI by altering the DOM by adding our stuff. |
188 | 208 | */ |
189 | 209 | updateMergeRequestsNodes(mergeRequestsDetails) { |
190 | | - let self = this; |
191 | | - |
192 | 210 | mergeRequestsDetails.forEach(function(mergeRequest) { |
193 | | - let infoDiv = document |
194 | | - .querySelector('.mr-list .merge-request[data-iid="' + mergeRequest.iid + '"] .issuable-main-info'); |
| 211 | + let mergeRequestContainer = document.querySelector('.mr-list .merge-request[data-id="' + mergeRequest.id + '"]'); |
| 212 | + |
| 213 | + this.setDataAttributesToMergeRequestContainer(mergeRequestContainer, mergeRequest); |
| 214 | + |
| 215 | + // ----------------------------------------------- |
| 216 | + // Copy MR info button |
| 217 | + |
| 218 | + if (this.preferences.enable_button_to_copy_mr_info) { |
| 219 | + let copyMrInfoButton = '<button class="btn btn-secondary btn-md btn-default btn-transparent btn-clipboard has-tooltip gmrle-copy-mr-info" title="Copy Merge Request info">' + |
| 220 | + '<i class="fa fa-share-square-o" aria-hidden="true"></i>' + |
| 221 | + '</button> '; |
| 222 | + |
| 223 | + this.parseHtmlAndPrepend( |
| 224 | + mergeRequestContainer.querySelector('.issuable-info'), |
| 225 | + copyMrInfoButton |
| 226 | + ); |
| 227 | + } |
| 228 | + |
| 229 | + // ----------------------------------------------- |
| 230 | + // Source and target branches info |
195 | 231 |
|
196 | | - let html = '<div class="issuable-info">' + |
| 232 | + // Source branch name |
| 233 | + let newInfoLineToInject = '<div class="issuable-info">' + |
197 | 234 | '<span class="project-ref-path has-tooltip" title="Source branch">' + |
198 | | - '<a class="ref-name" href="' + self.baseProjectUrl + '/-/commits/' + mergeRequest.source_branch + '">' + mergeRequest.source_branch + '</a>' + |
| 235 | + '<a class="ref-name" href="' + this.baseProjectUrl + '/-/commits/' + mergeRequest.source_branch + '">' + mergeRequest.source_branch + '</a>' + |
199 | 236 | '</span>'; |
200 | 237 |
|
201 | | - if (self.preferences.enable_buttons_to_copy_source_and_target_branches_name) { |
202 | | - 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 + '">' + |
| 238 | + // Copy source branch name button |
| 239 | + if (this.preferences.enable_buttons_to_copy_source_and_target_branches_name) { |
| 240 | + newInfoLineToInject += ' <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-to-copy="source">' + |
203 | 241 | '<i class="fa fa-clipboard" aria-hidden="true"></i>' + |
204 | | - '</button>' |
| 242 | + '</button>'; |
205 | 243 | } |
206 | 244 |
|
207 | | - html += ' <i class="fa fa-long-arrow-right" aria-hidden="true"></i> ' + |
| 245 | + // Target branch name |
| 246 | + newInfoLineToInject += ' <i class="fa fa-long-arrow-right" aria-hidden="true"></i> ' + |
208 | 247 | '<span class="project-ref-path has-tooltip" title="Target branch">' + |
209 | | - '<a class="ref-name" href="' + self.baseProjectUrl + '/-/commits/' + mergeRequest.target_branch + '">' + mergeRequest.target_branch + '</a>' + |
| 248 | + '<a class="ref-name" href="' + this.baseProjectUrl + '/-/commits/' + mergeRequest.target_branch + '">' + mergeRequest.target_branch + '</a>' + |
210 | 249 | '</span>'; |
211 | 250 |
|
212 | | - if (self.preferences.enable_buttons_to_copy_source_and_target_branches_name) { |
213 | | - 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 + '">' + |
| 251 | + // Copy target branch name button |
| 252 | + if (this.preferences.enable_buttons_to_copy_source_and_target_branches_name) { |
| 253 | + newInfoLineToInject += ' <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-to-copy="target">' + |
214 | 254 | '<i class="fa fa-clipboard" aria-hidden="true"></i>' + |
215 | 255 | '</button>'; |
216 | 256 | } |
217 | 257 |
|
218 | | - html += '</div>'; |
| 258 | + newInfoLineToInject += '</div>'; |
219 | 259 |
|
220 | | - self.parseHtmlAndAppendChild( |
221 | | - infoDiv, |
222 | | - html |
| 260 | + this.parseHtmlAndAppend( |
| 261 | + mergeRequestContainer.querySelector('.issuable-main-info'), |
| 262 | + newInfoLineToInject |
223 | 263 | ); |
224 | | - }); |
| 264 | + }, this); |
| 265 | + } |
| 266 | + |
| 267 | + /** |
| 268 | + * Sets several data-* attributes on a DOM node representing a Merge Request so these values may be used later. |
| 269 | + */ |
| 270 | + setDataAttributesToMergeRequestContainer(mergeRequestContainer, mergeRequest) { |
| 271 | + mergeRequestContainer.dataset.title = mergeRequest.title; |
| 272 | + mergeRequestContainer.dataset.iid = mergeRequest.iid; |
| 273 | + mergeRequestContainer.dataset.url = mergeRequest.web_url; |
| 274 | + mergeRequestContainer.dataset.diffsUrl = mergeRequest.web_url + '/diffs'; |
| 275 | + mergeRequestContainer.dataset.authorName = mergeRequest.author.name; |
| 276 | + mergeRequestContainer.dataset.status = mergeRequest.state; |
| 277 | + mergeRequestContainer.dataset.sourceBranchName = mergeRequest.source_branch; |
| 278 | + mergeRequestContainer.dataset.targetBranchName = mergeRequest.target_branch; |
225 | 279 | } |
226 | 280 |
|
227 | 281 | /** |
228 | 282 | * Attach a click event to all buttons inserted by the extension allowing to copy the source and target |
229 | | - * branches name (if feature is enabled by the user). |
| 283 | + * branches name. |
230 | 284 | */ |
231 | 285 | attachClickEventToCopyBranchNameButtons() { |
232 | | - if (!this.preferences.enable_buttons_to_copy_source_and_target_branches_name) { |
233 | | - return |
234 | | - } |
235 | | - |
236 | 286 | document.querySelectorAll('button.gmrle-copy-branch-name').forEach(function(el) { |
237 | 287 | el.addEventListener('click', function(e) { |
238 | 288 | e.preventDefault(); |
239 | 289 |
|
240 | | - navigator.clipboard.writeText(el.dataset.branchName).then(function() { |
| 290 | + let branchName = this.closest('.merge-request').dataset[this.dataset.branchNameToCopy + 'BranchName']; |
| 291 | + |
| 292 | + navigator.clipboard.writeText(branchName).then(function() { |
241 | 293 | // Do nothing if copy was successful. |
242 | 294 | }, function() { |
243 | 295 | alert('Unable to copy branch name.'); |
244 | 296 | }); |
245 | 297 | }); |
246 | 298 | }); |
247 | 299 | } |
| 300 | + |
| 301 | + /** |
| 302 | + * Attach a click event to all buttons inserted by the extension allowing to copy Merge Request info. |
| 303 | + */ |
| 304 | + attachClickEventToCopyMergeRequestInfoButtons() { |
| 305 | + let self = this; |
| 306 | + |
| 307 | + document.querySelectorAll('button.gmrle-copy-mr-info').forEach(function(el) { |
| 308 | + el.addEventListener('click', function(e) { |
| 309 | + e.preventDefault(); |
| 310 | + |
| 311 | + let text = self.buildMergeRequestInfoText(this.closest('.merge-request')); |
| 312 | + |
| 313 | + navigator.clipboard.writeText(text).then(function() { |
| 314 | + // Do nothing if copy was successful. |
| 315 | + }, function() { |
| 316 | + alert('Unable to copy Merge Request info.'); |
| 317 | + }); |
| 318 | + }); |
| 319 | + }); |
| 320 | + } |
| 321 | + |
| 322 | + /** |
| 323 | + * Creates the Merge Request info text from a Merge Request container DOM node. |
| 324 | + */ |
| 325 | + buildMergeRequestInfoText(mergeRequestContainer) { |
| 326 | + let placeholders = { |
| 327 | + 'MR_TITLE': mergeRequestContainer.dataset.title, |
| 328 | + 'MR_ID': mergeRequestContainer.dataset.iid, |
| 329 | + 'MR_URL': mergeRequestContainer.dataset.url, |
| 330 | + 'MR_DIFFS_URL': mergeRequestContainer.dataset.diffsUrl, |
| 331 | + 'MR_AUTHOR_NAME': mergeRequestContainer.dataset.authorName, |
| 332 | + 'MR_STATUS': mergeRequestContainer.dataset.status, |
| 333 | + 'MR_SOURCE_BRANCH_NAME': mergeRequestContainer.dataset.sourceBranchName, |
| 334 | + 'MR_TARGET_BRANCH_NAME': mergeRequestContainer.dataset.targetBranchName |
| 335 | + }; |
| 336 | + |
| 337 | + let placeholdersReplaceRegex = new RegExp('{(' + Object.keys(placeholders).join('|') + ')}', 'g'); |
| 338 | + |
| 339 | + return this.preferences.copy_mr_info_format.replace(placeholdersReplaceRegex, function(_, placeholder) { |
| 340 | + return placeholders[placeholder]; |
| 341 | + }); |
| 342 | + } |
248 | 343 | } |
249 | 344 |
|
250 | 345 | let cs = new ContentScript(); |
|
0 commit comments