Merge pull request #232 from open-sauced/beta

* feat: view repos on opensauced (#218) * feat: view repos on opensauced * change var names * chore(minor): release 1.12.0-beta.1 on beta channel [skip ci] ## [1.12.0-beta.1](v1.11.1...v1.12.0-beta.1) (2023-07-18) ### 🍕 Features * view repos on opensauced ([#218](#218)) ([f33d9fd](f33d9fd)) * fix: post highlights from the extension (#223) * chore(patch): release 1.12.0-beta.2 on beta channel [skip ci] ## [1.12.0-beta.2](v1.12.0-beta.1...v1.12.0-beta.2) (2023-07-19) ### 🐛 Bug Fixes * post highlights from the extension ([#223](#223)) ([7d91011](7d91011)) * fix: redirect to home page after posting a highlight (#203) * fix: redirect to home page after posting a highligh * Added forceRefresh param to force cache invalidation * chore: default val forceRefresh, typo --------- Co-authored-by: Anush008 <[email protected]> * chore(patch): release 1.12.0-beta.3 on beta channel [skip ci] ## [1.12.0-beta.3](v1.12.0-beta.2...v1.12.0-beta.3) (2023-07-20) ### 🐛 Bug Fixes * redirect to home page after posting a highlight ([#203](#203)) ([4ebd2d1](4ebd2d1)) * fix: view on open sauced location (#225) * bug-fix: view on open sauced location * fix: change classname to constant name * fix: remove unwanted lint changes in constants * feat: change variable name * fix: remove element cast Co-authored-by: Nick Taylor <[email protected]> --------- Co-authored-by: Nick Taylor <[email protected]> * chore(patch): release 1.12.0-beta.4 on beta channel [skip ci] ## [1.12.0-beta.4](v1.12.0-beta.3...v1.12.0-beta.4) (2023-07-25) ### 🐛 Bug Fixes * view on open sauced location ([#225](#225)) ([0ecfef0](0ecfef0)) * feat: Login with pkce (#230) * chore(minor): release 1.12.0-beta.5 on beta channel [skip ci] ## [1.12.0-beta.5](v1.12.0-beta.4...v1.12.0-beta.5) (2023-07-28) ### 🍕 Features * Login with pkce ([#230](#230)) ([42e8d4a](42e8d4a)) --------- Co-authored-by: Divyansh Singh <[email protected]> Co-authored-by: Marcus Chan <[email protected]> Co-authored-by: Anush008 <[email protected]> Co-authored-by: Pratham <[email protected]> Co-authored-by: Nick Taylor <[email protected]>
open-sauced · Jul 31, 2023 · cb469e5 · cb469e5
2 parents 1d401ab + d7c4ee1
commit cb469e5
Show file tree

Hide file tree

Showing 13 changed files with 211 additions and 71 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,41 @@
 
 > All notable changes to this project will be documented in this file
 
+## [1.12.0-beta.5](https://github.com/open-sauced/ai/compare/v1.12.0-beta.4...v1.12.0-beta.5) (2023-07-28)
+
+
+### 🍕 Features
+
+* Login with pkce ([#230](https://github.com/open-sauced/ai/issues/230)) ([42e8d4a](https://github.com/open-sauced/ai/commit/42e8d4ad4d3bc47c4138b2eeec20920015183849))
+
+## [1.12.0-beta.4](https://github.com/open-sauced/ai/compare/v1.12.0-beta.3...v1.12.0-beta.4) (2023-07-25)
+
+
+### 🐛 Bug Fixes
+
+* view on open sauced location ([#225](https://github.com/open-sauced/ai/issues/225)) ([0ecfef0](https://github.com/open-sauced/ai/commit/0ecfef0dda3a83b43deaa12189a7dc0474f29d78))
+
+## [1.12.0-beta.3](https://github.com/open-sauced/ai/compare/v1.12.0-beta.2...v1.12.0-beta.3) (2023-07-20)
+
+
+### 🐛 Bug Fixes
+
+* redirect to home page after posting a highlight ([#203](https://github.com/open-sauced/ai/issues/203)) ([4ebd2d1](https://github.com/open-sauced/ai/commit/4ebd2d15b8b3bae0ea6b563568b0b7b01a86f832))
+
+## [1.12.0-beta.2](https://github.com/open-sauced/ai/compare/v1.12.0-beta.1...v1.12.0-beta.2) (2023-07-19)
+
+
+### 🐛 Bug Fixes
+
+* post highlights from the extension ([#223](https://github.com/open-sauced/ai/issues/223)) ([7d91011](https://github.com/open-sauced/ai/commit/7d910114ed4c094e8040549496873c79aff2196e))
+
+## [1.12.0-beta.1](https://github.com/open-sauced/ai/compare/v1.11.1...v1.12.0-beta.1) (2023-07-18)
+
+
+### 🍕 Features
+
+* view repos on opensauced ([#218](https://github.com/open-sauced/ai/issues/218)) ([f33d9fd](https://github.com/open-sauced/ai/commit/f33d9fd8ab66242aecf07be23d961c33b9779727))
+
 ## [1.11.1](https://github.com/open-sauced/ai/compare/v1.11.0...v1.11.1) (2023-07-18)
 
 

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "opensauced-browser-extension",
   "private": true,
-  "version": "1.11.1",
+  "version": "1.12.0-beta.5",
   "files": [
     "dist"
   ],

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,10 +1,11 @@
 // OpenSauced constants
 export const OPEN_SAUCED_INSIGHTS_DOMAIN = import.meta.env.VITE_OPEN_SAUCED_INSIGHTS_DOMAIN;
 export const OPEN_SAUCED_API_ENDPOINT = import.meta.env.VITE_OPEN_SAUCED_API_ENDPOINT;
-export const SUPABASE_LOGIN_URL = `https://${import.meta.env.VITE_OPEN_SAUCED_SUPABASE_ID}.supabase.co/auth/v1/authorize?provider=github&redirect_to=https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/`;
+export const SUPABASE_LOGIN_URL = `https://${import.meta.env.VITE_OPEN_SAUCED_SUPABASE_ID}.supabase.co/auth/v1/authorize`;
 
 
 export const SUPABASE_AUTH_COOKIE_NAME = `sb-${import.meta.env.VITE_OPEN_SAUCED_SUPABASE_ID}-auth-token`;
+export const SUPABASE_PKCE_VERIFIER_COOKIE_NAME = `sb-${import.meta.env.VITE_OPEN_SAUCED_SUPABASE_ID}-auth-token-code-verifier`;
 export const OPEN_SAUCED_AUTH_TOKEN_KEY = "os-access-token";
 export const OPEN_SAUCED_OPTED_LOG_OUT_KEY = "opted-log-out";
 export const AI_PR_DESCRIPTION_CONFIG_KEY = "ai-pr-description-config";
@@ -27,6 +28,7 @@ export const OPEN_SAUCED_EMOJIS_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/emojis`;
 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";

diff --git a/src/content-scripts/components/AICodeReview/AICodeReviewMenu.ts b/src/content-scripts/components/AICodeReview/AICodeReviewMenu.ts
@@ -1,13 +1,10 @@
-import {
-    SUPABASE_LOGIN_URL,
-    GITHUB_PR_SUGGESTION_TEXT_AREA_SELECTOR,
-} from "../../../constants";
+import { GITHUB_PR_SUGGESTION_TEXT_AREA_SELECTOR } from "../../../constants";
 import { insertTextAtCursor } from "../../../utils/ai-utils/cursorPositionInsert";
 import {
     DescriptionConfig,
     getAIDescriptionConfig,
 } from "../../../utils/ai-utils/descriptionconfig";
-import { getAuthToken, isLoggedIn } from "../../../utils/checkAuthentication";
+import { getAuthToken, isLoggedIn, optLogIn } from "../../../utils/checkAuthentication";
 import { createHtmlElement } from "../../../utils/createHtmlElement";
 import { isOutOfContextBounds } from "../../../utils/fetchGithubAPIData";
 
@@ -73,7 +70,7 @@ const handleSubmit = async (
 
     try {
         if (!(await isLoggedIn())) {
-            return window.open(SUPABASE_LOGIN_URL, "_blank");
+            return void optLogIn();
         }
 
         if (!logo || !button) {

diff --git a/src/content-scripts/components/GenerateAIDescription/DescriptionGeneratorButton.ts b/src/content-scripts/components/GenerateAIDescription/DescriptionGeneratorButton.ts
@@ -3,10 +3,10 @@ import openSaucedLogoIcon from "../../../assets/opensauced-icon.svg";
 import { getPullRequestAPIURL } from "../../../utils/urlMatchers";
 import { getDescriptionContext, isOutOfContextBounds } from "../../../utils/fetchGithubAPIData";
 import { generateDescription } from "../../../utils/ai-utils/openai";
-import { GITHUB_PR_COMMENT_TEXT_AREA_SELECTOR, SUPABASE_LOGIN_URL } from "../../../constants";
+import { GITHUB_PR_COMMENT_TEXT_AREA_SELECTOR } from "../../../constants";
 import { insertTextAtCursor } from "../../../utils/ai-utils/cursorPositionInsert";
 import { getAIDescriptionConfig } from "../../../utils/ai-utils/descriptionconfig";
-import { getAuthToken, isLoggedIn } from "../../../utils/checkAuthentication";
+import { getAuthToken, isLoggedIn, optLogIn } from "../../../utils/checkAuthentication";
 
 export const DescriptionGeneratorButton = () => {
     const descriptionGeneratorButton = createHtmlElement("a", {
@@ -27,7 +27,7 @@ const handleSubmit = async () => {
 
     try {
         if (!(await isLoggedIn())) {
-            return window.open(SUPABASE_LOGIN_URL, "_blank");
+            return void optLogIn();
         }
 
         if (!logo || !button) {

diff --git a/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts b/src/content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton.ts
@@ -8,7 +8,7 @@ export const ViewOnOpenSaucedButton = (username: string) => {
         id: "view-on-opensauced-button",
         href: `https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/user/${username}/contributions`,
         className:
-      "inline-block mt-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",
+      "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",
         target: "_blank",
         rel: "noopener noreferrer",
         innerHTML: `

diff --git a/src/hooks/useGetGitHubPageInfo.ts b/src/hooks/useGetGitHubPageInfo.ts
@@ -2,28 +2,28 @@ import { useEffect, useState } from "react";
 import { isGithubPullRequestPage, isGithubRepoPage } from "../utils/urlMatchers";
 
 interface GitHubPageInfo {
-    prUrl: string;
-    prTitle: string;
+    pageUrl: string;
+    pageTitle: string;
     type: "unknown" | "PR" | "REPO";
 }
 
 export const usGetGitHubPageInfo = () => {
-    const [GithubPRPage, setGithubPRPage] = useState<GitHubPageInfo>({ prUrl: "", prTitle: "", type: "unknown" });
+    const [GithubPage, setGithubPage] = useState<GitHubPageInfo>({ pageUrl: "", pageTitle: "", type: "unknown" });
 
     useEffect(() => {
         chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
             if (tabs.length > 0) {
                 const tab = tabs[0];
 
                 if (isGithubPullRequestPage(tab.url!)) {
-                    setGithubPRPage({ prUrl: tab.url!, prTitle: tab.title!.split("by")[0].trim(), type: "PR" });
+                    setGithubPage({ pageUrl: tab.url!, pageTitle: tab.title!.split("by")[0].trim(), type: "PR" });
                 } else if (isGithubRepoPage(tab.url!)) {
-                    setGithubPRPage({ prUrl: tab.url!, prTitle: "", type: "REPO" });
+                    setGithubPage({ pageUrl: tab.url!, pageTitle: "", type: "REPO" });
                 }
             }
         });
     }, []);
 
 
-    return GithubPRPage;
+    return GithubPage;
 };
diff --git a/src/popup/pages/home.tsx b/src/popup/pages/home.tsx
@@ -5,7 +5,7 @@ import {
     HiUserCircle,
 } from "react-icons/hi2";
 import { IoLogoLinkedin } from "react-icons/io5";
-import { FiSettings } from "react-icons/fi";
+import { FiSettings, FiExternalLink } from "react-icons/fi";
 import { Navigation, Pagination, A11y } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/swiper-bundle.min.css";
@@ -16,7 +16,7 @@ import { Profile } from "./profile";
 import { goTo } from "react-chrome-extension-router";
 import PostOnHighlight from "./posthighlight";
 import { getRepoAPIURL } from "../../utils/urlMatchers";
-import { getEmojis, getHighlights } from "../../utils/fetchOpenSaucedApiData";
+import { getEmojis, getHighlights, getRepoOpenSaucedURL } from "../../utils/fetchOpenSaucedApiData";
 import Help from "./help";
 import { useEffect, useState, useRef } from "react";
 import Settings from "./settings";
@@ -25,18 +25,19 @@ import type { Highlight } from "../../ts/types";
 import { usGetGitHubPageInfo } from "../../hooks/useGetGitHubPageInfo";
 import { HighlightSlide } from "../components/HighlightSlide";
 
-const Home = () => {
+const Home = ({ forceRefresh }: { forceRefresh: boolean } = { forceRefresh: false }) => {
     const { user } = useAuth();
     const { currentTabIsOpensaucedUser, checkedUser } = useOpensaucedUserCheck();
-    const { prUrl: pageURL, prTitle, type: GitHubPageType } = usGetGitHubPageInfo();
+    const { pageUrl, pageTitle, type: GitHubPageType } = usGetGitHubPageInfo();
+    const [repoOpenSaucedURL, setRepoOpenSaucedURL] = useState<string>("");
     const [highlights, setHighlights] = useState<Highlight[]>([]);
     const [emojis, setEmojis] = useState<Record<string, string>[]>([]);
     const toolsRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         const fetchHighlights = async () => {
             try {
-                const userHighlightsData = await getHighlights();
+                const userHighlightsData = await getHighlights(forceRefresh);
 
                 if (!userHighlightsData) {
                     return;
@@ -68,6 +69,22 @@ const Home = () => {
         void fetchEmojis();
     }, []);
 
+    useEffect(() => {
+        const fetchRepoOpenSaucedURL = async () => {
+            try {
+                const openSaucedUrl = await getRepoOpenSaucedURL(pageUrl);
+
+                setRepoOpenSaucedURL(openSaucedUrl);
+            } catch (error) {
+                console.log(error);
+            }
+        };
+
+        if (GitHubPageType === "REPO") {
+            void fetchRepoOpenSaucedURL();
+        }
+    }, [pageUrl]);
+
     return (
         <div className="p-4 bg-slate-800">
             <div className="grid grid-cols-1 divide-y divide-white/40 divider-y-center-2 min-w-[320px] text-white">
@@ -146,49 +163,71 @@ const Home = () => {
                     >
 
                         {GitHubPageType === "REPO" && (
-                            <button
-                                className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
-                                onClick={() => {
-                                    function populateDataToLinkedIn (data: any) {
-                                        const inputFields: NodeListOf<HTMLInputElement> = document.querySelectorAll(".artdeco-text-input--input");
+                            <>
+                                <button
+                                    className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
+                                    onClick={() => {
+                                        function populateDataToLinkedIn (data: any) {
+                                            const inputFields: NodeListOf<HTMLInputElement> = document.querySelectorAll(".artdeco-text-input--input");
 
-                                        if (inputFields.length === 0) {
+                                            if (inputFields.length === 0) {
                                             // set timeout to wait for the page to load
-                                            setTimeout(() => {
-                                                populateDataToLinkedIn(data);
-                                            }, 500);
+                                                setTimeout(() => {
+                                                    populateDataToLinkedIn(data);
+                                                }, 500);
 
-                                            return;
+                                                return;
+                                            }
+                                            inputFields[0].value = data.name;
+                                            inputFields[1].value = data.description;
                                         }
-                                        inputFields[0].value = data.name;
-                                        inputFields[1].value = data.description;
-                                    }
-                                    fetch(getRepoAPIURL(pageURL)).then(async res => res.json())
-                                        .then(data => chrome.tabs.create(
-                                            { url: "https://www.linkedin.com/in/me/edit/forms/project/new/", active: true },
-                                            tab => {
-                                                void chrome.scripting
-                                                    .executeScript({
-                                                        target: { tabId: tab.id! },
-                                                        func: populateDataToLinkedIn,
-                                                        args: [data],
-                                                    });
-                                            },
-
-                                        ))
-                                        .catch(err => console.log(err));
-                                }}
-                            >
-                                <IoLogoLinkedin />
+                                        fetch(getRepoAPIURL(pageUrl)).then(async res => res.json())
+                                            .then(data => chrome.tabs.create(
+                                                { url: "https://www.linkedin.com/in/me/edit/forms/project/new/", active: true },
+                                                tab => {
+                                                    void chrome.scripting
+                                                        .executeScript({
+                                                            target: { tabId: tab.id! },
+                                                            func: populateDataToLinkedIn,
+                                                            args: [data],
+                                                        });
+                                                },
+
+                                            ))
+                                            .catch(err => console.log(err));
+                                    }}
+                                >
+                                    <IoLogoLinkedin />
                                 Add to LinkedIn Projects.
-                            </button>
+                                </button>
+
+                                {
+                                    repoOpenSaucedURL && (
+                                        <a
+                                            className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
+                                            href={repoOpenSaucedURL}
+                                            rel="noreferrer"
+                                            target="_blank"
+                                        >
+                                            <FiExternalLink />
+                                            View On OpenSauced
+                                        </a>
+                                    )
+                                }
+                            </>
                         )}
 
                         {GitHubPageType === "PR" && (
                             <button
                                 className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
                                 onClick={() => {
-                                    goTo(PostOnHighlight, { pageURL, prTitle });
+                                    goTo(
+                                        PostOnHighlight,
+                                        {
+                                            prUrl: pageUrl,
+                                            prTitle: pageTitle,
+                                        },
+                                    );
                                 }}
                             >
                                 <HiPencil />

diff --git a/src/popup/pages/posthighlight.tsx b/src/popup/pages/posthighlight.tsx
@@ -4,9 +4,10 @@ import OpenSaucedLogo from "../../assets/opensauced-logo.svg";
 import { useAuth } from "../../hooks/useAuth";
 import toast, { Toaster } from "react-hot-toast";
 import { createHighlight } from "../../utils/fetchOpenSaucedApiData";
-import { goBack } from "react-chrome-extension-router";
+import { goBack, goTo } from "react-chrome-extension-router";
 import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../../constants";
 import { getAiDescription } from "../../content-scripts/components/GenerateAIDescription/DescriptionGeneratorButton";
+import Home from "./home";
 
 const PostOnHighlight = ({ prUrl, prTitle }: { prUrl: string, prTitle: string }) => {
     const { authToken, user } = useAuth();
@@ -45,8 +46,9 @@ const PostOnHighlight = ({ prUrl, prTitle }: { prUrl: string, prTitle: string })
             success: data => {
                 enableSendButton(true);
                 if (!data.ok) {
-                    throw new Error(`Statues code ${data.status}`);
+                    throw new Error(`Status code ${data.status}`);
                 }
+                goTo(Home, { forceRefresh: true });
                 return (
                     <span>
                         <a