Add random reviewers to Compare-Page

src/components/IconButton/IconButton.tsx

@@ -7,7 +7,7 @@ import styles from "./IconButton.module.scss";
 
 type Props = {
   Icon: Icon;
-  onClick: () => void;
+  onClick: React.MouseEventHandler<HTMLSpanElement>;
   isLoading: boolean;
   tooltipText?: string;
   className?: string;

src/components/RandomReviewerButton/RandomReviewerButton.module.scss

@@ -1,4 +1,3 @@
 .icon {
   display: inline-flex;
-  margin-right: 16px;
 }

src/components/RandomReviewerButton/RandomReviewerButton.tsx

@@ -14,7 +14,8 @@ type Props = {
 export const RandomReviewerButton = ({ octokit, instanceConfig }: Props) => {
   const [isLoading, isLoadingSet] = useState(false);
 
-  const handleClick = () => {
+  const handleClick: React.MouseEventHandler<HTMLSpanElement> = (e) => {
+    e.preventDefault();
     void assignRandomReviewer(octokit, instanceConfig, isLoadingSet);
   };
 

src/content/handleRandomReviewer.tsx

@@ -14,28 +14,36 @@ export const handleRandomReviewer = (
   const urlUiPr = isOnPrPage(instanceConfig);
   if (!urlUiPr) return;
 
-  const topRightSection = document.getElementsByClassName("tabnav-extra")[0];
-  if (!topRightSection) return;
-
-  createRandomReviewerButton(topRightSection, octokit, instanceConfig);
+  const detailsEl = document.getElementById("reviewers-select-menu");
+  createRandomReviewerButton(detailsEl, octokit, instanceConfig);
 };
 
 const createRandomReviewerButton = (
-  parent: Element,
+  detailsEl: Element | null,
   octokit: OctokitWithCache,
   instanceConfig: InstanceConfig,
 ) => {
-  if (parent.querySelector(`.${RANDOM_REVIEWER_BUTTON_CLASS}`)) return;
+  if (!detailsEl || !detailsEl.parentNode) return;
+
+  if (detailsEl.parentNode?.querySelector(`.${RANDOM_REVIEWER_BUTTON_CLASS}`))
+    return;
+
+  const wrapperDiv = document.createElement("div");
+  wrapperDiv.style.cssText = `
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 1rem;
+  `;
 
-  // make parent a flex container to align all children in it
-  if (parent instanceof HTMLElement)
-    parent.style.setProperty("display", "flex", "important");
+  // move detailsEl inside the wrapperDiv
+  detailsEl.parentNode?.insertBefore(wrapperDiv, detailsEl);
+  wrapperDiv.appendChild(detailsEl);
 
-  const spanContainer = document.createElement("span");
-  spanContainer.classList.add(RANDOM_REVIEWER_BUTTON_CLASS);
-  parent.insertBefore(spanContainer, parent.firstChild);
+  const spanEl = document.createElement("span");
+  spanEl.classList.add(RANDOM_REVIEWER_BUTTON_CLASS);
+  wrapperDiv.appendChild(spanEl);
 
-  const root = createRoot(spanContainer);
+  const root = createRoot(spanEl);
   root.render(
     <React.StrictMode>
       <RandomReviewerButton octokit={octokit} instanceConfig={instanceConfig} />

src/content_compare_page.tsx

@@ -1,8 +1,10 @@
+import { handleRandomReviewer } from "./content";
 import { addPrTitleFromJira } from "./content/addPrTitleFromJira";
 import { addDescriptionTemplate } from "./content/addDescriptionTemplate";
 import { isOnComparePage } from "./content/utils/comparePageUtils";
 import { getInstanceConfig } from "./getInstanceConfig";
 import { getSettings, InstanceConfig, Settings } from "./services";
+import { getOctoInstance } from "./services/getOctoInstance";
 
 getSettings({
   onSuccess: handleContentChange,
@@ -22,12 +24,17 @@ async function executeScripts(
   if (!isOnComparePage(instanceConfig)) return;
 
   try {
+    const octokit = getOctoInstance(instanceConfig);
+
     if (settings.features.descriptionTemplate) {
       addDescriptionTemplate(settings);
     }
     if (settings.features.prTitleFromJira) {
       await addPrTitleFromJira(settings);
     }
+    if (instanceConfig.randomReviewers) {
+      handleRandomReviewer(octokit, instanceConfig);
+    }
   } catch (err) {
     alert(
       "Error in content_compare_page-script. Check console and report if the issue persists.",