Merge pull request #5 from pt1602/feature/add-mr-copy-brach-name-button

feat(mergeRequestPage): added button to copy branch name
pt1602 · Oct 20, 2022 · 7172ab9 · 7172ab9
2 parents c3dc3c0 + cc0191c
commit 7172ab9
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 17 deletions.
diff --git a/js/frontend.js b/js/frontend.js
@@ -2,18 +2,52 @@
 let cloneButtons = document.querySelectorAll('#ssh_project_clone, #http_project_clone');
 let cloneOptionsDropdown = document.querySelectorAll('.clone-options-dropdown > li > a');
 let mobileCloneButtons = document.querySelector('.mobile-git-clone .clone-dropdown-btn');
+const currentPath = window.location.pathname;
 const beforeVal = 'git clone ';
-if (cloneButtons) {
+const copyNameBtnVal = 'Copy branch name';
+const copyNameBtnClasses = 'gl-display-none gl-md-display-block btn gl-button btn-default btn-grouped';
+let branchNameEl;
+function modifyMobileCloneButtons() {
+    mobileCloneButtons.dataset.clipboardText = beforeVal + mobileCloneButtons.dataset.clipboardText;
+}
+function createCopyBranchNameButton(branchNameEl) {
+    const headerActions = document.querySelector('.detail-page-header-actions');
+    const branchName = branchNameEl.innerHTML;
+    let cloneBranchNameBtn = document.createElement("button");
+    cloneBranchNameBtn.className = copyNameBtnClasses;
+    cloneBranchNameBtn.innerText = copyNameBtnVal;
+    if (branchName) {
+        cloneBranchNameBtn.addEventListener('click', () => {
+            navigator.clipboard.writeText(branchName).then(() => {
+                /* success */
+            }, () => {
+                /* failure */
+            });
+        });
+    }
+    if (headerActions) {
+        headerActions.prepend(cloneBranchNameBtn);
+    }
+}
+if (currentPath.includes('merge_requests/')) {
+    let checkInterval = window.setInterval(() => {
+        branchNameEl = document.querySelector('.label-branch a');
+        if (branchNameEl) {
+            createCopyBranchNameButton(branchNameEl);
+            clearInterval(checkInterval);
+            return;
+        }
+    }, 300);
+}
+try {
     cloneButtons.forEach(function (item) {
         item.value = beforeVal + item.value;
     });
-}
-if (mobileCloneButtons) {
-    function modifyMobileCloneButtons() {
-        mobileCloneButtons.dataset.clipboardText = beforeVal + mobileCloneButtons.dataset.clipboardText;
-    }
-    modifyMobileCloneButtons();
     cloneOptionsDropdown.forEach(item => {
         item.addEventListener('click', modifyMobileCloneButtons);
     });
+    modifyMobileCloneButtons();
+}
+catch (err) {
+    // do nothing
 }
diff --git a/ts/frontend.ts b/ts/frontend.ts
@@ -1,22 +1,63 @@
 let cloneButtons: NodeList | null = document.querySelectorAll('#ssh_project_clone, #http_project_clone');
 let cloneOptionsDropdown: NodeList | null = document.querySelectorAll('.clone-options-dropdown > li > a');
-let mobileCloneButtons: Element | null = document.querySelector('.mobile-git-clone .clone-dropdown-btn');
+let mobileCloneButtons: HTMLElement | null = document.querySelector('.mobile-git-clone .clone-dropdown-btn');
+const currentPath: string = window.location.pathname;
 const beforeVal: string = 'git clone ';
+const copyNameBtnVal: string = 'Copy Branch Name';
+const copyNameBtnClasses: string = 'gl-display-none gl-md-display-block btn gl-button btn-default btn-grouped';
+let branchNameEl: HTMLElement | null;
 
-if (cloneButtons) {
-    cloneButtons.forEach(function (item) {
-        (item as HTMLInputElement).value = beforeVal + (item as HTMLInputElement).value;
-    });
+function modifyMobileCloneButtons() {
+    (mobileCloneButtons! as HTMLInputElement).dataset.clipboardText = beforeVal + (mobileCloneButtons! as HTMLInputElement).dataset.clipboardText;
 }
 
-if (mobileCloneButtons) {
-    function modifyMobileCloneButtons() {
-        (mobileCloneButtons! as HTMLInputElement).dataset.clipboardText = beforeVal + (mobileCloneButtons! as HTMLInputElement).dataset.clipboardText;
+function createCopyBranchNameButton(branchNameEl: HTMLElement) {
+    const headerActions: HTMLElement | null = document.querySelector('.detail-page-header-actions');
+    const branchName: string = branchNameEl.innerHTML;
+    let cloneBranchNameBtn: HTMLElement | null = document.createElement("button");
+    cloneBranchNameBtn.className = copyNameBtnClasses;
+    cloneBranchNameBtn.innerText = copyNameBtnVal;
+
+    if (branchName) {
+        cloneBranchNameBtn.addEventListener('click', () => {
+            navigator.clipboard.writeText(branchName).then(
+                () => {
+                    /* success - do nothing */
+                },
+                () => {
+                    /* failure - do nothing */
+                }
+            );
+        });
     }
 
-    modifyMobileCloneButtons();
+    if (headerActions) {
+        headerActions.prepend(cloneBranchNameBtn);
+    }
+}
+
+if (currentPath.includes('merge_requests/')) {
+    let checkInterval = window.setInterval(() => {
+        branchNameEl = document.querySelector('.label-branch a');
+
+        if (branchNameEl) {
+            createCopyBranchNameButton(branchNameEl);
+            clearInterval(checkInterval);
+            return;
+        }
+    }, 300);
+}
+
+try {
+    cloneButtons.forEach(function (item) {
+        (item as HTMLInputElement).value = beforeVal + (item as HTMLInputElement).value;
+    });
 
     cloneOptionsDropdown.forEach(item => {
         item.addEventListener('click', modifyMobileCloneButtons);
     });
-}
+
+    modifyMobileCloneButtons();
+} catch (err) {
+    // do nothing
+}