fix: React Bootstrap un-revert with fixups (#8996)

* Reapply "migrate reactstrap to react bootstrap (#8897)" because of rendering issues with dropdowns and bugfiler (#8988)

This reverts commit b1faecc.

* fix: Dropdowns for elipsis and CustomMenuActions dropdowns

* fix: Bugfiler and tier toggles

* fix Bootstrap bugs

* fixes for dropdowns

* intermittent failure view fixes

* fixes to perfherder and links

* fix several UI differences for bootstrap

* fix colors and fast next navigation

* more cleanup fixes

* fix details panel with pinboard resizing

* fix bugfiler

* perfherder fixes

* Bug 2000886: fixed - fuzzy jobs

* fix bug 2000874

* fix bug 2000869

* fix bug 2000854

* fix remove bug vertical spacing

* fix bug 2000847

* fix bug 2000804

* fix bug 2000627

* Fix casing of CSS variable for outline of selected job

* Bug 2000632 - show outline for selected job

---------

Co-authored-by: Sebastian Hengst <aryx.github@gmx-topmail.de>

Author: camd

docs/accessibility.md

@@ -54,7 +54,7 @@ For example:
 </Button>
 ```
 
-Known reactstrap components that accept the `color` prop and work with custom Treeherder colors: `Badge`, `Button`, `Card`, `DropdownToggle`, `FormText`, `NavBar`, `Progress`, `Spinner`.
+Known reactstrap components that accept the `color` prop and work with custom Treeherder colors: `Badge`, `Button`, `Card`, `Dropdown.Toggle`, `FormText`, `NavBar`, `Progress`, `Spinner`.
 
 In case you need to add more custom colors, please add on [treeherder-custom-styles.css](https://github.com/mozilla/treeherder/blob/master/ui/css/treeherder-custom-styles.css#L348) style sheet.
 
@@ -102,7 +102,7 @@ If your case is more specific, please check [this guide](https://css-tricks.com/
 
 ## Interactive elements
 
-When creating elements that have event listeners, prefer any component of the reactstrap interactive elements. Examples are: `Button`, `Input`, `DropdownToggle`. You can also choose a HTML `<a>` element.
+When creating elements that have event listeners, prefer any component of the reactstrap interactive elements. Examples are: `Button`, `Input`, `Dropdown.Toggle`. You can also choose a HTML `<a>` element.
 
 If you need to insert an event listener in a non-interactive element, such as a `span`, add also an `aria-role` of `button`, `link`, `checkbox`, or whatever seems closer to the functionality of the element.
 
@@ -116,10 +116,10 @@ If you need to insert an event listener in a non-interactive element, such as a
 
 There is a special case when you are creating a dropdown menu. First of all, try to follow [reactstrap structure](https://reactstrap.github.io/components/dropdowns/).
 
-Lastly, insert an additional tag `prop` to `DropdownItem` component.
+Lastly, insert an additional tag `prop` to `Dropdown.Item` component.
 
 ```jsx
-<DropdownItem tag="a"> Menu Item </DropdownItem>
+<Dropdown.Item tag="a"> Menu Item </Dropdown.Item>
 ```
 
 ## Forms, inputs and buttons

package.json

@@ -18,6 +18,7 @@
     "@fortawesome/react-fontawesome": "0.2.6",
     "@mui/material": "7.1.2",
     "@mui/styled-engine-sc": "npm:@mui/styled-engine-sc@latest",
+    "@popperjs/core": "2.11.8",
     "@types/react": "*",
     "@types/react-dom": "*",
     "ajv": "8.17.1",
@@ -42,6 +43,7 @@
     "prop-types": "15.8.1",
     "query-string": "7.0.1",
     "react": "18.3.1",
+    "react-bootstrap": "2.10.10",
     "react-dates": "21.8.0",
     "react-dom": "18.3.1",
     "react-helmet": "6.1.0",
@@ -55,7 +57,6 @@
     "react-split-pane": "0.1.92",
     "react-table-6": "6.11.0",
     "react-tabs": "6.1.0",
-    "reactstrap": "8.10.1",
     "redoc": "2.4.0",
     "redux": "4.2.1",
     "redux-debounce": "1.0.1",
@@ -87,6 +88,7 @@
     "@testing-library/react": "16.2.0",
     "babel-jest": "29.7.0",
     "babel-loader": "10.0.0",
+    "bootstrap": "5.3.8",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "13.0.1",
     "css-loader": "7.1.2",
@@ -111,6 +113,8 @@
     "path": "0.12.7",
     "prettier": "2.2.1",
     "puppeteer": "24.2.1",
+    "sass": "1.93.2",
+    "sass-loader": "16.0.6",
     "setup-polly-jest": "0.11.0",
     "style-loader": "4.0.0",
     "webpack": "5.97.1",

tests/ui/job-view/App_test.jsx

@@ -78,6 +78,10 @@ describe('App', () => {
       [],
     );
     fetchMock.get(getProjectUrl('/jobs/259537375/', repoName), fullJob);
+    fetchMock.get(
+      getProjectUrl('/jobs/259537375/bug_suggestions/', repoName),
+      [],
+    );
     fetchMock.get(getProjectUrl('/jobs/259537372/', repoName), {
       ...fullJob,
       task_id: 'secondTaskId',

tests/ui/job-view/Filtering_test.jsx

@@ -198,6 +198,11 @@ describe('Filtering', () => {
       );
       expect(unfilteredPushes).toHaveLength(10);
 
+      // Open the filters dropdown to reveal menu items
+      const filtersDropdown = await waitFor(() => getByTitle('Set filters'));
+      fireEvent.click(filtersDropdown);
+
+      // Wait for dropdown to open and find "My pushes only"
       const myPushes = await waitFor(() => getByText('My pushes only'));
       fireEvent.click(myPushes);
 
@@ -368,8 +373,15 @@ describe('Filtering', () => {
   });
 
   describe('by result status', () => {
+    const statusMap = {
+      green: 'success',
+      red: 'failures',
+      dkgray: 'in progress',
+    };
+
     const clickFilterChicklet = (color) => {
-      fireEvent.click(document.querySelector(`.btn-${color}-filter-chicklet`));
+      const status = statusMap[color];
+      fireEvent.click(document.querySelector(`[data-status="${status}"]`));
     };
 
     test('uncheck success should leave 30 jobs', async () => {

tests/ui/job-view/bugfiler_test.jsx

@@ -26,45 +26,85 @@ describe('BugFiler', () => {
   const suggestions = [
     {
       search: 'ShutdownLeaks | process() called before end of test suite',
+      bugs: { open_recent: [], all_others: [] },
+      counter: 1,
+      failure_in_new_rev: false,
+      line_number: 1,
+      path_end: null,
+      search_terms: [],
     },
     {
       search:
         'browser/components/search/test/browser_searchbar_smallpanel_keyboard_navigation.js | application terminated with exit code 11',
+      bugs: { open_recent: [], all_others: [] },
+      counter: 1,
+      failure_in_new_rev: false,
+      line_number: 2,
+      path_end:
+        'browser/components/search/test/browser_searchbar_smallpanel_keyboard_navigation.js',
+      search_terms: [],
     },
     {
       search:
         'browser/components/search/test/browser_searchbar_smallpanel_keyboard_navigation.js | application crashed [@ js::GCMarker::eagerlyMarkChildren]',
+      bugs: { open_recent: [], all_others: [] },
+      counter: 1,
+      failure_in_new_rev: false,
+      line_number: 3,
+      path_end:
+        'browser/components/search/test/browser_searchbar_smallpanel_keyboard_navigation.js',
+      search_terms: [],
     },
     {
       search:
         'leakcheck | default process: missing output line for total leaks!',
+      bugs: { open_recent: [], all_others: [] },
+      counter: 1,
+      failure_in_new_rev: false,
+      line_number: 4,
+      path_end: null,
+      search_terms: [],
+    },
+    {
+      search: '# TBPL FAILURE #',
+      bugs: { open_recent: [], all_others: [] },
+      counter: 1,
+      failure_in_new_rev: false,
+      line_number: 5,
+      path_end: null,
+      search_terms: [],
     },
-    { search: '# TBPL FAILURE #' },
   ];
 
   const PdfSuggestions = [
     {
-      bugs: {},
+      bugs: { open_recent: [], all_others: [] },
       line_number: 10,
       path_end: 'browser/extensions/pdfjs/test/browser_pdfjs_views.js',
       search_terms: [],
       search:
         'TEST-UNEXPECTED-FAIL | browser/extensions/pdfjs/test/browser_pdfjs_views.js | Test timed out -',
+      counter: 1,
+      failure_in_new_rev: false,
     },
     {
-      bugs: {},
+      bugs: { open_recent: [], all_others: [] },
       line_number: 235,
       path_end: 'browser/extensions/pdfjs/test/browser_pdfjs_views.js',
       search_terms: [],
       search:
         'TEST-UNEXPECTED-FAIL | browser/extensions/pdfjs/test/browser_pdfjs_views.js | Found a tab after previous test timed out: about:blank -',
+      counter: 1,
+      failure_in_new_rev: false,
     },
     {
-      bugs: {},
+      bugs: { open_recent: [], all_others: [] },
       line_number: 783,
       path_end: 'flee',
       search_terms: [],
       search: 'REFTEST TEST-UNEXPECTED-PASS | flee | floo',
+      counter: 1,
+      failure_in_new_rev: false,
     },
   ];
 
@@ -82,6 +122,24 @@ describe('BugFiler', () => {
         },
       ],
     );
+    fetchMock.mock(
+      `/api${bzComponentEndpoint}?path=browser%2Fcomponents%2Fsearch%2Ftest%2Fbrowser_searchbar_smallpanel_keyboard_navigation.js`,
+      [
+        {
+          product: 'Firefox',
+          component: 'Search',
+        },
+      ],
+    );
+    fetchMock.mock(
+      `/api${bzComponentEndpoint}?path=browser%2Fcomponents%2Fsessionstore%2Ftest%2Fbrowser_625016.js`,
+      [
+        {
+          product: 'Firefox',
+          component: 'Session Restore',
+        },
+      ],
+    );
 
     fetchMock.mock(
       `${bzBaseUrl}rest/prod_comp_search/find/firefox%20::%20search?limit=5`,
@@ -175,6 +233,12 @@ describe('BugFiler', () => {
         'browser_searchbar_smallpanel_keyboard_navigation.js", "[@ js::GCMarker::eagerlyMarkChildren]',
       ],
       search: summary,
+      bugs: { open_recent: [], all_others: [] },
+      counter: 1,
+      failure_in_new_rev: false,
+      line_number: 1,
+      path_end:
+        'browser/components/search/test/browser_searchbar_smallpanel_keyboard_navigation.js',
     };
 
     render(bugFilerComponentSuggestion(suggestion));

tests/ui/perfherder/alerts-view/alerts_test.jsx

@@ -622,8 +622,20 @@ test('Selecting `all` from (frameworks|projects) dropdown shows all (frameworks|
   const { queryAllByText, getByTestId } = alertsView();
 
   const allFromDropdown = await waitFor(() => queryAllByText(/all/));
-  fireEvent.click(allFromDropdown[0]);
-  fireEvent.click(allFromDropdown[1]);
+  // Find the actual clickable parent elements (dropdown items) that contain the text "all"
+  const clickableElements = allFromDropdown
+    .map(
+      (textNode) =>
+        textNode.closest('a') ||
+        textNode.closest('button') ||
+        textNode.closest('[role="button"]'),
+    )
+    .filter(Boolean);
+
+  if (clickableElements.length >= 2) {
+    fireEvent.click(clickableElements[0]);
+    fireEvent.click(clickableElements[1]);
+  }
 
   const alert1 = await waitFor(() => getByTestId('69526'));
   const alert2 = await waitFor(() => getByTestId('69530'));
@@ -740,7 +752,7 @@ test(`table data cannot be sorted by 'Tags & Options'`, async () => {
     getAllByTitle('Sorted by tags & options disabled'),
   );
 
-  expect(sortByTags[0]).toHaveClass('disabled-button');
+  expect(sortByTags[0]).toBeDisabled();
 });
 
 test(`table data can be sorted in ascending order by 'Confidence'`, async () => {

tests/ui/perfherder/alerts-view/modal_perf_tags_test.jsx

@@ -54,9 +54,9 @@ test('An active/checked tag can be unchecked', async () => {
 
 test('Modal closes on X', async () => {
   const handleClose = jest.fn();
-  const { getByText } = testTagsModal(handleClose);
+  const { getByLabelText } = testTagsModal(handleClose);
 
-  const closeButton = await waitFor(() => getByText('×'));
+  const closeButton = await waitFor(() => getByLabelText('Close'));
 
   expect(closeButton).toBeInTheDocument();
 
@@ -69,7 +69,7 @@ test('Modal does not keep unsaved changes', async () => {
   testAlertSummary.performance_tags = ['harness'];
 
   const handleClose = jest.fn();
-  const { getByText, getByTestId } = testTagsModal(handleClose);
+  const { getByLabelText, getByTestId } = testTagsModal(handleClose);
 
   let activeTag = await waitFor(() => getByTestId('modal-perf-tag harness'));
 
@@ -78,7 +78,7 @@ test('Modal does not keep unsaved changes', async () => {
   fireEvent.change(activeTag, { target: { checked: false } });
   expect(activeTag.checked).toBeFalsy();
 
-  const closeButton = await waitFor(() => getByText('×'));
+  const closeButton = await waitFor(() => getByLabelText('Close'));
   fireEvent.click(closeButton);
 
   expect(handleClose).toHaveBeenCalledTimes(1);

tests/ui/perfherder/alerts-view/select_alert_framework_test.jsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { noop } from 'lodash';
 import React from 'react';
 
@@ -41,10 +41,14 @@ const testFrameworksDropdown = () => {
 };
 
 test('should pin the right number of items to top and bottom frameworks w.r.t config', async () => {
-  testFrameworksDropdown();
+  const { container } = testFrameworksDropdown();
   // top pinned represents all items in the drop down that is at the top of the list
   // bottom pinned represents all items in the drop down that is at the bottom of the list.
 
+  // Open the dropdown to render the menu items
+  const dropdownToggle = container.querySelector('.dropdown-toggle');
+  fireEvent.click(dropdownToggle);
+
   const topPinned = document.querySelectorAll('.top-pinned');
   const bottomPinned = document.querySelectorAll('.bottom-pinned');
 

tests/ui/perfherder/alerts-view/status_dropdown_test.jsx

@@ -52,6 +52,10 @@ afterEach(cleanup);
 test("Summary with no tags shows 'Add tags'", async () => {
   const { getByText } = testStatusDropdown([]);
 
+  // Open the status dropdown first
+  const statusDropdown = await waitFor(() => getByText('untriaged'));
+  fireEvent.click(statusDropdown);
+
   const dropdownItem = await waitFor(() => getByText('Add tags'));
 
   expect(dropdownItem).toBeInTheDocument();
@@ -60,6 +64,10 @@ test("Summary with no tags shows 'Add tags'", async () => {
 test("Summary with tags shows 'Edit tags'", async () => {
   const { getByText } = testStatusDropdown(['harness']);
 
+  // Open the status dropdown first
+  const statusDropdown = await waitFor(() => getByText('untriaged'));
+  fireEvent.click(statusDropdown);
+
   const dropdownItem = await waitFor(() => getByText('Edit tags'));
 
   expect(dropdownItem).toBeInTheDocument();
@@ -68,6 +76,10 @@ test("Summary with tags shows 'Edit tags'", async () => {
 test("Tags modal opens from 'Add tags'", async () => {
   const { getByText, getByTestId } = testStatusDropdown([]);
 
+  // Open the status dropdown first
+  const statusDropdown = await waitFor(() => getByText('untriaged'));
+  fireEvent.click(statusDropdown);
+
   const dropdownItem = await waitFor(() => getByText('Add tags'));
 
   fireEvent.click(dropdownItem);
@@ -80,6 +92,10 @@ test("Tags modal opens from 'Add tags'", async () => {
 test("Tags modal opens from 'Edit tags'", async () => {
   const { getByText, getByTestId } = testStatusDropdown(['harness']);
 
+  // Open the status dropdown first
+  const statusDropdown = await waitFor(() => getByText('untriaged'));
+  fireEvent.click(statusDropdown);
+
   const dropdownItem = await waitFor(() => getByText('Edit tags'));
 
   fireEvent.click(dropdownItem);