Merge branch 'fix/devcard-longnames' of https://github.com/Mandeep56S…

…ingh/opensauced into fix/devcard-longnames

.github/workflows/development.yml

@@ -26,6 +26,7 @@ jobs:
         uses: actions/[email protected]
         with:
           node-version: 18
+          cache: "npm"
 
       - name: "🔧 install npm@latest"
         run: npm i -g npm@latest

.github/workflows/issue.yml

@@ -2,6 +2,7 @@
 # https://github.com/marketplace/actions/create-or-update-comment (https://github.com/peter-evans/create-or-update-comment)
 
 name: Automatic Comment
+
 on:
   issues:
     types: [opened]

.github/workflows/pizza.yml

@@ -0,0 +1,16 @@
+name: OpenSauced Pizza Action
+
+on:
+  schedule:
+    # Run once a week on Sunday at 00:00 UTC
+    - cron: "0 0 * * 0"
+  workflow_dispatch: # Allow manual triggering
+
+jobs:
+  pizza-action:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Pizza Action
+        uses: open-sauced/[email protected]
+        with:
+          commit-and-pr: "true"

.github/workflows/playwright.yml

@@ -1,4 +1,5 @@
 name: Playwright Tests
+
 on:
   push:
     branches: [main, beta]
@@ -11,12 +12,14 @@ jobs:
   test:
     name: E2E Tests
     timeout-minutes: 60
-    runs-on: ubuntu-latest
+    runs-on:
+      group: powerful-runners
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
+          cache: "npm"
       - name: Install dependencies
         run: npm ci
       - name: Build App

.github/workflows/release.yml

@@ -38,6 +38,7 @@ jobs:
         uses: actions/[email protected]
         with:
           node-version: 18
+          cache: "npm"
 
       - name: "🔧 install npm@latest"
         run: npm i -g npm@latest
@@ -49,10 +50,11 @@ jobs:
         run: npm run build
 
       - name: "📂 production artifacts"
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: build
           path: .next
+          include-hidden-files: true
 
   release:
     environment:
@@ -80,7 +82,7 @@ jobs:
           token: ${{ steps.generate_token.outputs.token }}
 
       - name: "📂 download build artifacts"
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: build

.github/workflows/storybook.yml

@@ -12,8 +12,8 @@ on:
 
 jobs:
   deploy:
-    runs-on: ubuntu-latest
     timeout-minutes: 10
+    runs-on: ubuntu-latest
     steps:
       - name: "☁️ checkout repository"
         uses: actions/checkout@v2
@@ -22,6 +22,7 @@ jobs:
         uses: actions/[email protected]
         with:
           node-version: 18
+          cache: "npm"
 
       - name: "🔧 install npm@latest"
         run: npm i -g npm@latest

.github/workflows/triage.yml

@@ -1,5 +1,4 @@
 name: "Assign issues with .take"
-
 on:
   issue_comment:
     types:

.sauced.yaml

@@ -0,0 +1,22 @@
+# Configuration for attributing commits with emails to GitHub user profiles
+# Used during codeowners generation.
+
+# List the emails associated with the given username.
+# The commits associated with these emails will be attributed to
+# the username in this yaml map. Any number of emails may be listed.
+attribution:
+  brandonroberts:
+    - [email protected]
+  jpmcb:
+    - [email protected]
+  nickytonline:
+    - [email protected]
+    - [email protected]
+  bdougie:
+    - [email protected]
+  zeucapua:
+    - [email protected]
+  bekahhw:
+    - [email protected]
+  isabensusan:
+    - [email protected]

components/Contributors/Oscr.tsx

@@ -27,26 +27,28 @@ export const OscrPill = ({ rating, hideRating, signIn = DEFAULT_SIGN_IN, calcula
 
   return (
     <Tooltip direction="top" content={tooltipText}>
-      {hideRating ? (
-        <div className="relative flex items-center justify-center w-fit">
-          <span className="absolute blur-sm text-xl text-purple-00 leading-tight">000</span>
-          <Button
-            variant="primary"
-            className="flex items-center gap-2 !p-1 !text-xs z-0"
-            onClick={() => {
-              posthog.capture("OSCR Login Button Clicked", {
-                pathname: router.pathname,
-              });
-              signIn({ provider: "github", options: { redirectTo: window.location.href } });
-            }}
-          >
-            <span className="sr-only">{OSCR_LOGIN_TEXT}</span>
-            <LockIcon size={16} />
-          </Button>
-        </div>
-      ) : (
-        <Pill color="purple" size="small" text={`${ratingToRender}`} />
-      )}
+      <div className="relative flex items-center justify-center w-fit">
+        {hideRating ? (
+          <>
+            <span className="absolute blur-sm text-xl text-purple-00 leading-tight">000</span>
+            <Button
+              variant="primary"
+              className="flex items-center gap-2 !p-1 !text-xs z-0"
+              onClick={() => {
+                posthog.capture("OSCR Login Button Clicked", {
+                  pathname: router.pathname,
+                });
+                signIn({ provider: "github", options: { redirectTo: window.location.href } });
+              }}
+            >
+              <span className="sr-only">{OSCR_LOGIN_TEXT}</span>
+              <LockIcon size={16} />
+            </Button>
+          </>
+        ) : (
+          <Pill color="purple" size="small" text={`${ratingToRender}`} />
+        )}
+      </div>
     </Tooltip>
   );
 };
@@ -98,6 +100,7 @@ export const OscrInfoTooltip = () => {
           <a
             href="https://opensauced.pizza/docs/features/contributor-insights/#open-source-contributor-rating-oscr"
             className="underline"
+            target="_blank"
           >
             Learn more...
             <span className="sr-only"> about OSCR rating</span>

components/Repositories/AddToWorkspaceModal.tsx

@@ -70,7 +70,7 @@ export default function AddToWorkspaceModal({ repository, isOpen, onCloseModal,
         onInteractOutside={onCloseModal}
       >
         <Card heading={<h1 className="text-xl font-semibold">Add to workspace</h1>}>
-          <div className="flex flex-col gap-4 w-[32rem] h-full px-8 py-4">
+          <div className="flex flex-col gap-4 w-fit h-full px-8 py-4">
             {!user ? (
               <div className="flex flex-col gap-4 text-center">
                 <img

components/Repositories/ContributorConfidenceChart.tsx

@@ -52,16 +52,17 @@ export default function ContributorConfidenceChart({
   };
 
   return (
-    <Card className={`${className ?? ""} flex flex-col gap-4 w-full h-fit items-center py-8`}>
+    <Card className={`${className ?? ""} flex flex-col gap-4 w-full h-fit items-center py-8 graph-to-image`}>
       <header className="flex items-center justify-between w-full px-4">
         <div className="flex items-center gap-2">
-          <FaUserPlus className="text-xl" />
+          <FaUserPlus className="text-xl contributor-confidence-logo" />
           <h3 className="text-sm font-semibold xl:text-lg text-slate-800">Contributor Confidence</h3>
         </div>
         <a
           href="https://opensauced.pizza/docs/features/repo-pages/#insights-into-contributor-confidence"
           onClick={onLearnMoreClick}
           className="text-xs font-semibold text-sauced-orange xl:text-sm hover:underline"
+          data-html2canvas-ignore
         >
           Learn More
         </a>

components/Repositories/LotteryFactorBadge.tsx

@@ -0,0 +1,30 @@
+import Pill from "components/atoms/Pill/pill";
+import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
+
+type LotteryFactorBadgeProps = {
+  lotteryFactor: RepositoryLottoFactor | undefined;
+  isLoading: boolean;
+  error: Error | undefined;
+};
+
+export function LotteryFactorBadge({ lotteryFactor, isLoading, error }: LotteryFactorBadgeProps) {
+  return error ? null : isLoading || !lotteryFactor ? (
+    <SkeletonWrapper width={42} height={24} radius={999} />
+  ) : (
+    <Pill
+      text={lotteryFactor.all_lotto_factor.replace("-", " ") ?? ""}
+      color={
+        lotteryFactor.all_lotto_factor === "high"
+          ? "red"
+          : lotteryFactor.all_lotto_factor === "moderate"
+          ? "yellow"
+          : lotteryFactor.all_lotto_factor === "low"
+          ? "green"
+          : lotteryFactor.all_lotto_factor === "very-high"
+          ? "purple"
+          : "slate"
+      }
+      className="capitalize"
+    />
+  );
+}

components/Repositories/LotteryFactorChart.tsx

@@ -6,7 +6,6 @@ import Link from "next/link";
 import * as HoverCard from "@radix-ui/react-hover-card";
 import { FaArrowRight, FaRegHandPeace } from "react-icons/fa6";
 import Card from "components/atoms/Card/card";
-import Pill from "components/atoms/Pill/pill";
 import { DayRange } from "components/shared/DayRangePicker";
 import StackedOwners from "components/Workspaces/StackedOwners";
 import InfoTooltip from "components/shared/InfoTooltip";
@@ -16,6 +15,7 @@ import Avatar from "components/atoms/Avatar/avatar";
 import { getAvatarByUsername } from "lib/utils/github";
 import HoverCardWrapper from "components/molecules/HoverCardWrapper/hover-card-wrapper";
 import errorImage from "../../public/assets/images/lotto-factor-empty.png";
+import { LotteryFactorBadge } from "./LotteryFactorBadge";
 
 type LotteryFactorChartProps = {
   lotteryFactor: RepositoryLottoFactor | undefined;
@@ -116,25 +116,7 @@ export default function LotteryFactorChart({
             <h3 className="text-sm font-semibold xl:text-lg text-slate-800">Lottery Factor</h3>
             <InfoTooltip information="Identifies reliance on top contributors. Indicates potential project vulnerability if 2 or fewer create >50% of the pull requests." />
           </div>
-          {error ? null : isLoading || !lotteryFactor ? (
-            <SkeletonWrapper width={42} height={24} radius={999} />
-          ) : (
-            <Pill
-              text={lotteryFactor.all_lotto_factor.replace("-", " ") ?? ""}
-              color={
-                lotteryFactor.all_lotto_factor === "high"
-                  ? "red"
-                  : lotteryFactor.all_lotto_factor === "moderate"
-                  ? "yellow"
-                  : lotteryFactor.all_lotto_factor === "low"
-                  ? "green"
-                  : lotteryFactor.all_lotto_factor === "very-high"
-                  ? "purple"
-                  : "slate"
-              }
-              className="capitalize"
-            />
-          )}
+          <LotteryFactorBadge lotteryFactor={lotteryFactor} isLoading={isLoading} error={error} />
         </header>
       </section>
 

components/Repositories/OssfChart.tsx

@@ -110,6 +110,7 @@ export default function OssfChart({
             href="https://opensauced.pizza/docs/features/repo-pages/#insights-into-the-ossf-scorecard"
             onClick={onLearnMoreClick}
             className="text-xs font-semibold text-sauced-orange xl:text-sm hover:underline"
+            data-html2canvas-ignore
           >
             Learn More
           </a>
@@ -120,13 +121,6 @@ export default function OssfChart({
         ) : (
           <section className="flex justify-between items-center w-full gap-2 lg:flex-col xl:flex-row h-fit max-h-24 lg:max-h-full xl:max-h-24">
             <div className="relative w-full !max-w-[14rem] lg:max-w-full lg:mx-auto h-full lg:max-h-24 xl:h-full">
-              {isError && (
-                <div className="absolute inset-0 z-50 flex items-center justify-center">
-                  <Button variant="primary" onClick={onRequestClick} className="!text-xs">
-                    I want this now!
-                  </Button>
-                </div>
-              )}
               <ResponsiveContainer width="100%" height={150} className={`${isError && "blur-[2.5px]"}`}>
                 <PieChart>
                   <Pie
@@ -145,13 +139,20 @@ export default function OssfChart({
                   </Pie>
                 </PieChart>
               </ResponsiveContainer>
+              {isError && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Button variant="primary" onClick={onRequestClick} className="!text-xs">
+                    I want this now!
+                  </Button>
+                </div>
+              )}
             </div>
             <section className="flex flex-col gap-1 lg:text-center xl:text-start">
               <h3 className="font-medium text-sm text-slate-700">{projectStatus}</h3>
               <p className="text-xs text-slate-600">
                 {projectDescription}
                 {!isError && (
-                  <span>
+                  <span data-html2canvas-ignore>
                     You can run the full test{" "}
                     <a
                       href="https://github.com/ossf/scorecard?tab=readme-ov-file#view-a-projects-score"