feat: display lottery factor on Repository Table (#4059)

open-sauced · Aug 28, 2024 · 48343e0 · 48343e0
1 parent b49d6ce
commit 48343e0
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 29 deletions.
diff --git a/components/Repositories/LotteryFactorBadge.tsx b/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"
+    />
+  );
+}
diff --git a/components/Repositories/LotteryFactorChart.tsx b/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>
 

diff --git a/components/molecules/RepoRow/repo-row.tsx b/components/molecules/RepoRow/repo-row.tsx
@@ -24,6 +24,9 @@ import { getPullRequestsHistogramToDays } from "lib/utils/get-prs-to-days";
 import getPullRequestsContributors from "lib/utils/get-pr-contributors";
 import { usePullRequestsHistogram } from "lib/hooks/api/usePullRequestsHistogram";
 import InfoTooltip from "components/shared/InfoTooltip";
+import { useRepositoryLottoFactor } from "lib/hooks/api/useRepositoryLottoFactor";
+import { DayRange } from "components/shared/DayRangePicker";
+import { LotteryFactorBadge } from "components/Repositories/LotteryFactorBadge";
 import TableRepositoryName from "../TableRepositoryName/table-repository-name";
 import PullRequestOverview from "../PullRequestOverview/pull-request-overview";
 import StackedAvatar from "../StackedAvatar/stacked-avatar";
@@ -112,10 +115,15 @@ const RepoRow = ({ repo, topic, userPage, selected, handleOnSelectRepo }: RepoPr
   });
   const totalPrs = getTotalPrs(openPrsCount, mergedPrsCount, closedPrsCount, draftPrsCount);
   const prsMergedPercentage = getPercent(totalPrs, mergedPrsCount || 0);
-  const spamPrsPercentage = getPrsSpam(totalPrs, spamPrsCount || 0);
   const prVelocityInDays = getRelativeDays(prVelocityCount || 0);
   const contributorData = getPullRequestsContributors(repositoryPullRequests);
 
+  const {
+    data: lotteryFactor,
+    error: lotteryFactorError,
+    isLoading: isLotteryFactorLoading,
+  } = useRepositoryLottoFactor({ repository: fullName.toLowerCase(), range: range as DayRange });
+
   const days = getPullRequestsHistogramToDays(repositoryPullRequestsHistogram, Number(range || "30"));
 
   const last30days = [
@@ -179,12 +187,15 @@ const RepoRow = ({ repo, topic, userPage, selected, handleOnSelectRepo }: RepoPr
             {getActivity(totalPrs, false)}
           </div>
 
-          {/* Row: Pr velocity */}
+          {/* Row: Lottery Factor */}
           <div className="flex items-center justify-between py-3 border-b">
-            <div>Pr Velocity</div>
+            <div>Lottery Factor</div>
             <div className="flex text-base gap-x-3">
-              <div>{prVelocityInDays}</div>
-              {repo.id ? <Pill color="purple" text={`${prsMergedPercentage}%`} /> : ""}
+              <LotteryFactorBadge
+                lotteryFactor={lotteryFactor}
+                isLoading={isLotteryFactorLoading}
+                error={lotteryFactorError}
+              />
             </div>
           </div>
 
@@ -252,10 +263,13 @@ const RepoRow = ({ repo, topic, userPage, selected, handleOnSelectRepo }: RepoPr
           )}
         </div>
 
-        {/* Column: PR Velocity */}
+        {/* Column: Lottery Factor */}
         <div className={`${classNames.cols.prVelocity}`}>
-          <div>{prVelocityInDays}</div>
-          {repo.id ? <Pill color="purple" text={`${prsMergedPercentage}%`} /> : ""}
+          <LotteryFactorBadge
+            lotteryFactor={lotteryFactor}
+            isLoading={isLotteryFactorLoading}
+            error={lotteryFactorError}
+          />
         </div>
 
         {/* Column: OSSF Scorecard */}

diff --git a/components/organisms/Repositories/repositories.tsx b/components/organisms/Repositories/repositories.tsx
@@ -141,7 +141,7 @@ export default function Repositories({ repositories, showSearch = true, personal
               <TableTitle>PR Overview</TableTitle>
             </div>
             <div className={clsx(classNames.cols.prVelocity)}>
-              <TableTitle>PR Velocity</TableTitle>
+              <TableTitle>Lottery Factor</TableTitle>
             </div>
             <div className={clsx(classNames.cols.spam)}>
               <TableTitle>OSSF Score</TableTitle>