Merge pull request #280 from open-sauced/beta

main <- v1.14.2-beta.1

Author: bdougie

CHANGELOG.md

@@ -5,6 +5,13 @@
 
 > All notable changes to this project will be documented in this file
 
+## [1.14.2-beta.1](https://github.com/open-sauced/ai/compare/v1.14.1...v1.14.2-beta.1) (2023-11-05)
+
+
+### 🐛 Bug Fixes
+
+* view on open sauced ([#278](https://github.com/open-sauced/ai/issues/278)) ([eb56300](https://github.com/open-sauced/ai/commit/eb563009c32adabede89187035aff9e46ce4f962))
+
 ## [1.14.1](https://github.com/open-sauced/ai/compare/v1.14.0...v1.14.1) (2023-11-01)
 
 

npm-shrinkwrap.json

@@ -1,7 +1,7 @@
 {
   "name": "opensauced-browser-extension",
   "private": true,
-  "version": "1.14.1",
+  "version": "1.14.2-beta.1",
   "files": [
     "dist"
   ],

package.json

@@ -31,8 +31,6 @@ export const OPEN_SAUCED_EMOJIS_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/emojis`;
 // Content-scripts selectors
 export const GITHUB_PROFILE_MENU_SELECTOR = ".p-nickname.vcard-username.d-block";
 export const GITHUB_PROFILE_EDIT_MENU_SELECTOR = "button.js-profile-editable-edit-button";
-export const GITHUB_PROFILE_USER_PROFILE_BIO_SELECTOR = ".p-note.user-profile-bio.mb-3.js-user-profile-bio.f4";
-export const GITHUB_PROFILE_USER_PROFILE_EDITABLE_AREA_SELECTOR = "js-profile-editable-area d-flex flex-column d-md-block";
 export const GITHUB_PR_COMMENT_HEADER_SELECTOR = "timeline-comment-header clearfix d-flex";
 export const GITHUB_NEW_PR_COMMENT_EDITOR_SELECTOR = "flex-nowrap d-none d-md-inline-block mr-md-0 mr-3";
 export const GITHUB_PR_COMMENT_EDITOR_SELECTOR = "flex-nowrap d-inline-block mr-3";

src/constants.ts

@@ -7,8 +7,7 @@ export const ViewOnOpenSaucedButton = (username: string) => {
     const viewOnOpenSaucedButton = createHtmlElement("a", {
         id: "view-on-opensauced-button",
         href: `https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/user/${username}/contributions`,
-        className:
-      "inline-block my-4 text-black bg-gh-white dark:bg-gh-gray dark:text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border hover:shadow-button hover:no-underline",
+        className: "inline-block mb-2 text-black bg-gh-white dark:bg-gh-gray dark:text-white rounded-md p-2 text-sm font-semibold text-center select-none w-full border hover:shadow-button hover:no-underline",
         target: "_blank",
         rel: "noopener noreferrer",
         innerHTML: `

src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts

@@ -26,7 +26,7 @@ export const HighlightSlide = ({ highlight, emojis }: HighlightSlideProps) => {
 
     async function fetchHighlightReactions () {
         const highlightReactionData = await getHighlightReactions(highlight.id);
-        const userHighlightReactionData = await getUserHighlightReactions( await getAuthToken(), highlight.id);
+        const userHighlightReactionData = await getUserHighlightReactions(await getAuthToken(), highlight.id);
 
         const highlightReactionsWithEmojiUrls = emojis.filter(emoji => highlightReactionData.some(highlightReaction => highlightReaction.emoji_id === emoji.id)).map(emoji => {
             const highlightReaction = highlightReactionData.find(highlightReaction => highlightReaction.emoji_id === emoji.id)!;
@@ -69,23 +69,29 @@ export const HighlightSlide = ({ highlight, emojis }: HighlightSlideProps) => {
     return (
         <div className="border border-white/40 rounded-md p-3 mt-2 bg-white">
             {/* fixed height, content ellipsis */}
-            <h3 className="
-                text-base font-medium
-                overflow-hidden
-                line-clamp-2
-                h-6
-                leading-5
-            "
-            >
-                <a
-                    className="text-slate-800 cursor-pointer"
-                    href={url}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                >
-                    {title}
-                </a>
-            </h3>
+
+            {
+
+                title
+                    ? (
+                        <h3 className="
+                    text-base font-medium
+                    overflow-hidden
+                    line-clamp-2
+                    h-6
+                    leading-5"
+                        >
+                            <a
+                                className="text-slate-800 cursor-pointer"
+                                href={url}
+                                rel="noopener noreferrer"
+                                target="_blank"
+                            >
+                                {title}
+                            </a>
+                        </h3>)
+                    : null
+            }
 
             <div className="flex items-center">
                 <span className="mr-2 text-slate-500">Author:</span>
@@ -158,10 +164,10 @@ export const HighlightSlide = ({ highlight, emojis }: HighlightSlideProps) => {
                             role="menuitem"
                             tabIndex={-1}
                             onClick={async () => {
-                                await addReactionToHighlight( highlight.id, emoji.id);
+                                await addReactionToHighlight(highlight.id, emoji.id);
                             }}
                             onKeyDown={async () => {
-                                await addReactionToHighlight( highlight.id, emoji.id);
+                                await addReactionToHighlight(highlight.id, emoji.id);
                             }}
                         >
                             <img

src/popup/components/HighlightSlide.tsx

@@ -1,4 +1,3 @@
-import { GITHUB_PROFILE_USER_PROFILE_EDITABLE_AREA_SELECTOR } from "../../constants";
 import { ViewOnOpenSaucedButton } from "../../content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton";
 
 const injectViewOnOpenSaucedButton = (username: string) => {
@@ -8,12 +7,16 @@ const injectViewOnOpenSaucedButton = (username: string) => {
 
     const viewOnOpenSaucedButton = ViewOnOpenSaucedButton(username);
 
-    const userEditableArea = document.getElementsByClassName(
-        GITHUB_PROFILE_USER_PROFILE_EDITABLE_AREA_SELECTOR,
-    );
-    const editableAreaElement = userEditableArea[0];
+    const editProfileButtonSelector = ".btn-block.js-profile-editable-edit-button";
+    const editProfileButton = document.querySelector(editProfileButtonSelector);
 
-    editableAreaElement.parentNode?.insertBefore(viewOnOpenSaucedButton, editableAreaElement);
+    if (editProfileButton) {
+        editProfileButton.parentNode?.insertBefore(viewOnOpenSaucedButton, editProfileButton);
+    } else {
+        const callToActionButtonsArea = document.querySelector(".js-user-profile-follow-button")?.closest(".flex-order-1.flex-md-order-none");
+
+        callToActionButtonsArea?.insertBefore(viewOnOpenSaucedButton, callToActionButtonsArea.firstChild);
+    }
 };
 
 export default injectViewOnOpenSaucedButton;