fix(ignore-whitespace): Update CSS selectors

Fix "Ignore Whitespace" feature that broke after Atlassian migrated their pull request list page to a CSS-in-JS solution that autogenerates the CSS class names of the elements, making the previous selectors the extension relied on useless. Closes #285
refined-bitbucket · Jun 9, 2019 · 64c4f3c · 64c4f3c
1 parent 3bb87de
commit 64c4f3c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+# Next Version
+
+### Bug Fixes
+
+-   Fix "Ignore Whitespace" feature that broke after Atlassian migrated their pull request list page
+    to a CSS-in-JS solution that autogenerates the CSS class names of the elements, making the
+    previous selectors the extension relied on useless,
+    closes [issue #285](https://github.com/refined-bitbucket/refined-bitbucket/issues/285),
+    [pull request #290](https://github.com/refined-bitbucket/refined-bitbucket/pull/290).
+
 # 3.17.0 (2019-06-03)
 
 ### Improvements

diff --git a/src/ignore-whitespace/ignore-whitespace.js b/src/ignore-whitespace/ignore-whitespace.js
@@ -2,7 +2,7 @@
 
 export default function init(prRow: Element) {
     const link: HTMLAnchorElement = (prRow.querySelector(
-        'a.pull-request-title'
+        'a[data-qa="pull-request-row-link"]'
     ): any)
     const url = new URL(link.href)
     const searchParams = new URLSearchParams(url.search)

diff --git a/src/ignore-whitespace/ignore-whitespace.spec.js b/src/ignore-whitespace/ignore-whitespace.spec.js
@@ -9,7 +9,7 @@ test('should transform pull request link to add ignore whitespace query param to
     const actual = (
         <div>
             <a
-                class="pull-request-title"
+                data-qa="pull-request-row-link"
                 title="pull request title"
                 href="https://bitbucket.org/user/repo/pull-requests/1"
             >
@@ -21,7 +21,7 @@ test('should transform pull request link to add ignore whitespace query param to
     const expected = (
         <div>
             <a
-                class="pull-request-title"
+                data-qa="pull-request-row-link"
                 title="pull request title"
                 href="https://bitbucket.org/user/repo/pull-requests/1?w=1"
             >
@@ -39,7 +39,7 @@ test('should transform pull request link to toggle ignore whitespace query param
     const actual = (
         <div>
             <a
-                class="pull-request-title"
+                data-qa="pull-request-row-link"
                 title="pull request title"
                 href="https://bitbucket.org/user/repo/pull-requests/1?w=0"
             >

diff --git a/src/main.js b/src/main.js
@@ -104,19 +104,21 @@ function pullrequestListRelatedFeatures(config) {
         return
     }
 
-    const prTable = document.querySelector('.pull-requests-table')
-
     // eslint-disable-next-line no-new
-    new SelectorObserver(prTable, 'tr.pull-request-row', function() {
-        if (config.ignoreWhitespace) {
-            ignoreWhitespace(this)
-        }
+    new SelectorObserver(
+        document.body,
+        'tr[data-qa="pull-request-row"]',
+        function() {
+            if (config.ignoreWhitespace) {
+                ignoreWhitespace(this)
+            }
 
-        if (config.augmentPrEntry) {
-            linkifyTargetBranch(this)
-            augmentPrEntry(this)
+            if (config.augmentPrEntry) {
+                linkifyTargetBranch(this)
+                augmentPrEntry(this)
+            }
         }
-    })
+    )
 }
 
 function codeReviewFeatures(config) {