chore: release 2.63.0 (#4113)

.github/workflows/pizza.yml

@@ -11,6 +11,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Pizza Action
-        uses: open-sauced/pizza-action@v2.0.0
+        uses: open-sauced/pizza-action@v2.2.0
         with:
+          cli-version: "v2.2.0"
           commit-and-pr: "true"
+          pr-title: "chore: update repository codeowners"

CHANGELOG.md

@@ -5,6 +5,34 @@
 
 > All notable changes to this project will be documented in this file
 
+## [2.63.0-beta.4](https://github.com/open-sauced/app/compare/v2.63.0-beta.3...v2.63.0-beta.4) (2024-09-19)
+
+
+### 🐛 Bug Fixes
+
+* redirect all explore requests to the new explore page ([#4112](https://github.com/open-sauced/app/issues/4112)) ([182f091](https://github.com/open-sauced/app/commit/182f091abc393d5226102ba18aaa006e2ee12add))
+
+## [2.63.0-beta.3](https://github.com/open-sauced/app/compare/v2.63.0-beta.2...v2.63.0-beta.3) (2024-09-19)
+
+
+### 🐛 Bug Fixes
+
+* Prevent OSCR score from popping out of dev card with long usernames ([#4010](https://github.com/open-sauced/app/issues/4010)) ([b92f477](https://github.com/open-sauced/app/commit/b92f477d5691e5f1ffa4957c404bbfb090d220ec))
+
+## [2.63.0-beta.2](https://github.com/open-sauced/app/compare/v2.63.0-beta.1...v2.63.0-beta.2) (2024-09-16)
+
+
+### 🐛 Bug Fixes
+
+* set workspaces for `/explore` "Discover Workspaces" section ([#4106](https://github.com/open-sauced/app/issues/4106)) ([41c7248](https://github.com/open-sauced/app/commit/41c72489df14b9ae563136c0cd50aae64185f92c))
+
+## [2.63.0-beta.1](https://github.com/open-sauced/app/compare/v2.62.0...v2.63.0-beta.1) (2024-09-14)
+
+
+### 🍕 Features
+
+* updated `/explore` page ([#4053](https://github.com/open-sauced/app/issues/4053)) ([37ee0f5](https://github.com/open-sauced/app/commit/37ee0f5f5d66c39bff5b99bf7036db8c14e4b48b))
+
 ## [2.62.0](https://github.com/open-sauced/app/compare/v2.61.0...v2.62.0) (2024-09-10)
 
 

components/Workspaces/WorkspaceCard.tsx

@@ -0,0 +1,63 @@
+import Image from "next/image";
+import Link from "next/link";
+import Card from "components/atoms/Card/card";
+import { Spinner } from "components/atoms/SpinLoader/spin-loader";
+import CardRepoList, { RepoList } from "components/molecules/CardRepoList/card-repo-list";
+import useFetchWorkspace from "lib/hooks/api/useFetchWorkspace";
+import { useGetWorkspaceRepositories } from "lib/hooks/api/useGetWorkspaceRepositories";
+import { useWorkspaceMembers } from "lib/hooks/api/useWorkspaceMembers";
+import { getAvatarById, getAvatarByUsername } from "lib/utils/github";
+
+export default function WorkspaceCard({ workspaceId }: { workspaceId: string }) {
+  const { data: workspace, isLoading, isError } = useFetchWorkspace({ workspaceId });
+  const { data: members, isLoading: isMembersLoading, isError: isMembersError } = useWorkspaceMembers({ workspaceId });
+  const workspaceOwner = members.find((member) => member.role === "owner");
+
+  const {
+    data: workspaceRepositoriesData,
+    isLoading: isWorkspaceRepositoriesLoading,
+    error: isWorkspaceRepositoriesError,
+  } = useGetWorkspaceRepositories({ workspaceId });
+
+  const workspaceRepositories =
+    workspaceRepositoriesData?.data?.map((data) => {
+      const owner = data.repo.full_name.split("/").at(0) ?? "";
+      return { repoOwner: owner, repoName: data.repo.name, repoIcon: getAvatarByUsername(owner) };
+    }) ?? ([] as RepoList[]);
+
+  return (
+    <Link href={`/workspaces/${workspaceId}`}>
+      <Card className="flex flex-col gap-4 justify-between py-[1.25rem] w-full">
+        {!(isLoading || isMembersLoading || isWorkspaceRepositoriesLoading) ? (
+          <>
+            <div className="self-start flex flex-col gap-4">
+              <div className="flex gap-2 items-center">
+                <Image
+                  src={getAvatarById((workspaceOwner?.user_id ?? 0).toString())}
+                  alt={`workspace_owner_${workspaceOwner?.user_id}`}
+                  width={20}
+                  height={20}
+                  className="rounded-md"
+                />
+                <p className="text-slate-500 text-sm">{workspaceOwner?.member.name}</p>
+              </div>
+
+              <section className="flex flex-col gap-2">
+                <h1>{workspace?.name}</h1>
+                <p className="text-sm text-slate-500">
+                  {(workspace?.description.length ?? 0) > 0 ? workspace?.description : "No description given."}
+                </p>
+              </section>
+            </div>
+
+            <CardRepoList repoList={workspaceRepositories} limit={3} />
+          </>
+        ) : (
+          <div className="flex items-center justify-center w-full h-36">
+            <Spinner />
+          </div>
+        )}
+      </Card>
+    </Link>
+  );
+}

components/Workspaces/WorkspaceLayout.tsx

@@ -68,7 +68,8 @@ export const WorkspaceLayout = ({ workspaceId, banner, children, footer }: Works
             )}
           </ClientOnly>
         </div>
-        <main id="main" className="flex flex-col w-full min-w-screen items-center">
+
+        <main id="main" className="flex flex-col w-screen items-center">
           <ClientOnly>{banner}</ClientOnly>
           <div className={clsx("w-full min-h-[100px] pb-20", banner && "md:mt-9")}>{children}</div>
         </main>

components/molecules/DevCard/dev-card.tsx

@@ -12,6 +12,7 @@ import { getRelativeDays } from "lib/utils/date-utils";
 import { getAvatarByUsername } from "lib/utils/github";
 import Pill from "components/atoms/Pill/pill";
 import { UserDevStats } from "pages/u/[username]/card";
+import { useHasMounted } from "lib/hooks/useHasMounted";
 import DevCardGradient from "../../../public/devcard-gradient.png";
 
 export type DevCardProps = {
@@ -27,6 +28,7 @@ export type DevCardProps = {
 export default function DevCard(props: DevCardProps) {
   const [isFlipped, setIsFlipped] = useState(props.isFlipped ?? false);
   const isInteractive = props.isInteractive ?? true;
+  const hasMounted = useHasMounted();
 
   useEffect(() => {
     setIsFlipped(props.isFlipped ?? false);
@@ -83,7 +85,7 @@ export default function DevCard(props: DevCardProps) {
     },
   });
 
-  return props.isLoading ? (
+  return !hasMounted ? (
     <animated.div
       className={"grid rounded-3xl bg-white"}
       style={{
@@ -152,7 +154,9 @@ export default function DevCard(props: DevCardProps) {
                 height={100}
                 className="rounded-full border-[1.5px] border-gray-300 border-opacity-40"
               />
-              <p>@{props.devstats?.login}</p>
+              <p className="break-words mx-auto whitespace-normal text-center max-w-[200px]">
+                @{props.devstats?.login}
+              </p>
             </div>
 
             {/** OSCR Score **/}
@@ -186,10 +190,10 @@ export default function DevCard(props: DevCardProps) {
                 height={50}
                 className="absolute rounded-full border-[1.5px] border-gray-300 border-opacity-40 -left-1"
               />
-              <p className="pl-10">{props.devstats?.login}</p>
-              <p className="-pl-4 justfy-self-end text-sm flex gap-0.5">
+              <p className="pl-10 truncate items-center">{props.devstats?.login}</p>
+              <p className="-pl-4 justify-self-end items-center text-sm flex gap-0.5">
                 {Math.ceil(props.devstats?.oscr || 0)}
-                <span className="text-[0.5rem] text-gray-100 font-normal">/300</span>
+                <span className="text-[0.7rem] text-gray-100 font-normal">/300</span>
               </p>
             </div>
 

components/molecules/RecommendedRepoCard/recommended-repo-card.tsx

@@ -24,12 +24,16 @@ const RecommendedRepoCard = ({ fullName, className }: RecommendedRepoCardProps):
 
   return (
     <div className={clsx("relative w-full flex flex-col gap-2 p-4  bg-white border rounded-2xl ", className)}>
+      {(isError || pullError) && (
+        <p>
+          Error: {fullName} r: {isError} pr: {pullError}
+        </p>
+      )}
       {isLoading && (
         <div className="flex items-center justify-center w-full h-36">
           <Spinner />
         </div>
       )}
-      {isError && <>An error occured loading ...</>}
       {data && (
         <>
           <div className="flex justify-between w-full">

components/organisms/SearchDialog/search-dialog.tsx

@@ -183,7 +183,7 @@ const SearchDialog = () => {
   );
 };
 
-const SearchDialogTrigger = () => {
+const SearchDialogTrigger = ({ hideSmallIcon, className }: { hideSmallIcon?: boolean; className?: string }) => {
   const setOpenSearch = store((state) => state.setOpenSearch);
   const isMac = useIsMacOS();
 
@@ -203,7 +203,7 @@ const SearchDialogTrigger = () => {
       <div
         className={`hidden sm:flex justify-between p-1 pl-3 h-fit ${
           isMac ? "w-56" : "w-64"
-        } ml-auto bg-white border rounded-lg ring-light-slate-6 relative overflow-hidden`}
+        } ${className} ml-auto bg-white border rounded-lg ring-light-slate-6 relative overflow-hidden`}
         onClick={() => setOpenSearch(true)}
       >
         <div className="flex items-center">
@@ -214,9 +214,11 @@ const SearchDialogTrigger = () => {
           {isMac ? "⌘K" : <span className="text-xs px-1 py-2">CTRL+K</span>}
         </Text>
       </div>
-      <div className="flex sm:hidden p-1" onClick={() => setOpenSearch(true)}>
-        <FaSearch className="text-light-slate-9 cursor-pointer" fontSize={16} />
-      </div>
+      {!hideSmallIcon && (
+        <div className="flex sm:hidden p-1" onClick={() => setOpenSearch(true)}>
+          <FaSearch className="text-light-slate-9 cursor-pointer" fontSize={16} />
+        </div>
+      )}
     </>
   );
 };

components/organisms/TopNav/top-nav.tsx

@@ -6,7 +6,6 @@ import HeaderLogo from "components/molecules/HeaderLogo/header-logo";
 
 import useSession from "lib/hooks/useSession";
 import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
-import { useFetchUser } from "lib/hooks/useFetchUser";
 import OnboardingButton from "components/molecules/OnboardingButton/onboarding-button";
 import Tooltip from "components/atoms/Tooltip/tooltip";
 import { useMediaQuery } from "lib/hooks/useMediaQuery";
@@ -43,8 +42,6 @@ const TopNav = () => {
 
 const Nav = ({ className }: { className?: string }) => {
   const { user } = useSupabaseAuth();
-  const { data: gitHubUser } = useFetchUser(user?.user_metadata.user_name);
-  const userInterest = gitHubUser?.interests?.split(",")[0] || "javascript";
   const router = useRouter();
 
   const explorePageUrlPattern = /^(\/explore\/topic).*\/(dashboard|reports|contributors|activity).*/g;
@@ -66,10 +63,10 @@ const Nav = ({ className }: { className?: string }) => {
         ) : null}
         <li className="hidden lg:inline">
           <Link
+            href="/explore"
             className={`tracking-tight font-medium text-slate-700 text-sm hover:text-orange-500 transition-all ${getActiveStyle(
               explorePageUrlPattern.test(router.asPath)
             )}`}
-            href={`/explore/topic/${userInterest}`}
           >
             Explore
           </Link>

e2e/explore-page.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/test";
 
 test("Loads explore dashboard page", async ({ page }) => {
-  await page.goto("/explore/topic/javascript");
-  await expect(page.getByRole("button", { name: "Connect with GitHub", exact: true })).toBeVisible();
+  await page.goto("/explore");
+  await expect(page.getByRole("button", { name: "Connect with GitHub" }).first()).toBeVisible();
 });

lib/hooks/api/useFetchWorkspace.ts

@@ -0,0 +1,16 @@
+import useSWR, { Fetcher } from "swr";
+import { publicApiFetcher } from "lib/utils/public-api-fetcher";
+
+export default function useFetchWorkspace({ workspaceId }: { workspaceId: string }) {
+  const { data, error, isLoading, mutate } = useSWR<Workspace, Error>(
+    `workspaces/${workspaceId}`,
+    publicApiFetcher as Fetcher<Workspace, Error>
+  );
+
+  return {
+    data,
+    isError: error,
+    isLoading,
+    mutate,
+  };
+}

lib/hooks/useFetchTrendingRepositories.ts

@@ -0,0 +1,25 @@
+import useSWR, { Fetcher } from "swr";
+import { publicApiFetcher } from "lib/utils/public-api-fetcher";
+
+export interface HistogramTopRepo {
+  repo_name: string;
+  bucket: string;
+  star_count: number;
+}
+
+export default function useFetchTrendingRepositories() {
+  const { data, error } = useSWR<HistogramTopRepo[], Error>(
+    `histogram/top/stars`,
+    publicApiFetcher as Fetcher<HistogramTopRepo[], Error>
+  );
+
+  return {
+    data: data
+      ? data.filter(
+          (repo) => !repo.repo_name.toLowerCase().includes("-auto") || !repo.repo_name.toLowerCase().includes("crack")
+        )
+      : [],
+    isLoading: !error && !data,
+    isError: !!error,
+  };
+}

middleware.ts

@@ -128,7 +128,7 @@ export async function middleware(req: NextRequest) {
   }
   redirectUrl.searchParams.set("redirectedFrom", req.nextUrl.pathname);
 
-  redirectUrl.pathname = "/explore/topic/typescript";
+  redirectUrl.pathname = "/explore";
   if (!req.nextUrl.searchParams.has("redirectedFrom")) {
     return NextResponse.redirect(redirectUrl);
   }

next-types.d.ts

@@ -339,6 +339,7 @@ interface DbUser {
   readonly location: string;
   readonly display_local_time: boolean;
   readonly name: string;
+  readonly user_name?: string;
   readonly interests?: string;
   readonly receive_collaboration: boolean;
   readonly display_email: boolean;

next.config.js

@@ -125,7 +125,19 @@ module.exports = millionLint({
       ...interests.map((interest) => {
         return {
           source: `/${interest}/:tool(dashboard|reports|contributors|activity)`,
-          destination: `/explore/topic/${interest}/:tool`,
+          destination: `/explore`,
+          permanent: true,
+        };
+      }),
+      {
+        source: `/explore/topic/:slug*`,
+        destination: `/explore`,
+        permanent: true,
+      },
+      ...interests.map((interest) => {
+        return {
+          source: `/${interest}`,
+          destination: `/explore`,
           permanent: true,
         };
       }),
@@ -141,14 +153,6 @@ module.exports = millionLint({
       },
     ];
   },
-  async rewrites() {
-    return [
-      {
-        source: "/explore/topic/:topic",
-        destination: "/explore/topic/:topic/dashboard/filter/recent",
-      },
-    ];
-  },
 });
 
 // Injected content via Sentry wizard below

package.json

@@ -2,7 +2,7 @@
   "name": "@open-sauced/app",
   "description": "🍕The dashboard for open source discovery.",
   "keywords": [],
-  "version": "2.62.0",
+  "version": "2.63.0-beta.4",
   "author": "Brian Douglas <brian@opensauced.pizza>",
   "private": true,
   "license": "Apache 2.0",