feat: add contributor confidence to repository table (#4038)

open-sauced · Aug 27, 2024 · 6f510cb · 6f510cb
1 parent 23e4d76
commit 6f510cb
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/components/molecules/RepoRow/repo-row.tsx b/components/molecules/RepoRow/repo-row.tsx
@@ -23,6 +23,7 @@ import useRepositoryPullRequests from "lib/hooks/api/useRepositoryPullRequests";
 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 TableRepositoryName from "../TableRepositoryName/table-repository-name";
 import PullRequestOverview from "../PullRequestOverview/pull-request-overview";
 import StackedAvatar from "../StackedAvatar/stacked-avatar";
@@ -91,6 +92,7 @@ const RepoRow = ({ repo, topic, userPage, selected, handleOnSelectRepo }: RepoPr
     spam_prs_count: spamPrsCount,
     pr_velocity_count: prVelocityCount,
     ossf_scorecard_total_score: ossfScorecardTotalScore,
+    contributor_confidence: contributorConfidence,
   } = repo;
   const ownerAvatar = getAvatarByUsername(fullName.split("/")[0]);
 
@@ -194,8 +196,16 @@ const RepoRow = ({ repo, topic, userPage, selected, handleOnSelectRepo }: RepoPr
             </div>
           </div>
 
-          {/* Row: Contributors */}
+          {/* Row: Contributor Confidence*/}
+          <div className="flex items-center justify-between py-3 border-b">
+            <div className="flex gap-2">
+              Contributor Confidence
+              <InfoTooltip information="The percentage of stargazers and forkers that come back later on to a meaningful contribution." />
+            </div>
+            <div className="flex text-base gap-x-3">{Math.floor((contributorConfidence ?? 0) * 100)}%</div>
+          </div>
 
+          {/* Row: Contributors */}
           <div className="flex items-center justify-between py-3">
             <div>Contributors</div>
             <div className="flex items-center text-base">
@@ -253,6 +263,9 @@ const RepoRow = ({ repo, topic, userPage, selected, handleOnSelectRepo }: RepoPr
           {ossfScorecardTotalScore ? `${ossfScorecardTotalScore}/10` : "-"}
         </div>
 
+        {/* Column: Contributor Confidence*/}
+        <div className={`${classNames.cols.spam}`}>{Math.floor((contributorConfidence ?? 0) * 100)}%</div>
+
         {/* Column: Contributors */}
         <div className={clsx(classNames.cols.contributors, "hidden xl:flex")}>
           {contributorData.length! > 0 ? <StackedAvatar contributors={contributorData} /> : "-"}

diff --git a/components/organisms/Repositories/repositories.tsx b/components/organisms/Repositories/repositories.tsx
@@ -16,6 +16,7 @@ import Checkbox from "components/atoms/Checkbox/checkbox";
 import LimitSelect from "components/atoms/Select/limit-select";
 import Button from "components/shared/Button/button";
 import { useMediaQuery } from "lib/hooks/useMediaQuery";
+import InfoTooltip from "components/shared/InfoTooltip";
 import RepositoriesTable, { classNames, RepositoriesRows } from "../RepositoriesTable/repositories-table";
 import RepoNotIndexed from "./repository-not-indexed";
 
@@ -95,7 +96,7 @@ export default function Repositories({ repositories, showSearch = true, personal
 
   const handleOnSearch = (search?: string) => {
     if (selectedFilter && !search) {
-       return router.push(`/explore/topic/${topic}/${toolName}`);
+      return router.push(`/explore/topic/${topic}/${toolName}`);
     }
     if (search && /^[a-zA-Z0-9\-\.]+\/[a-zA-Z0-9\-\.]+$/.test(search)) {
       return router.push(`/explore/topic/${topic}/${toolName}/filter/${search}`);
@@ -123,7 +124,7 @@ export default function Repositories({ repositories, showSearch = true, personal
               <TableTitle> Pr Overview </TableTitle>
             </div>
           </div>
-          <div className="hidden gap-2 px-6 py-4 md:flex bg-light-slate-3">
+          <div className="hidden gap-2 px-6 py-4 md:flex items-center bg-light-slate-3">
             <div className={clsx(classNames.cols.checkbox)}>
               <Checkbox
                 onCheckedChange={handleOnSelectAllChecked}
@@ -145,6 +146,12 @@ export default function Repositories({ repositories, showSearch = true, personal
             <div className={clsx(classNames.cols.spam)}>
               <TableTitle>OSSF Score</TableTitle>
             </div>
+            <div className={clsx(classNames.cols.spam)}>
+              <TableTitle className="inline-flex items-center">
+                Contributor Confidence
+                <InfoTooltip information="The percentage of stargazers and forkers that come back later on to a meaningful contribution." />
+              </TableTitle>
+            </div>
             <div className={clsx(classNames.cols.contributors, "hidden xl:flex")}>
               <TableTitle>Contributors</TableTitle>
             </div>

diff --git a/components/organisms/RepositoriesTable/repositories-table.tsx b/components/organisms/RepositoriesTable/repositories-table.tsx
@@ -36,6 +36,7 @@ export interface RepositoriesRows {
   contributors?: ContributorsRows[];
   last30days?: Serie[];
   ossf_scorecard_total_score?: number;
+  contributor_confidence?: number;
 }
 
 interface RepositoriesTableProps {