feat: copy OSSF Scorecard as image (#4000)

open-sauced · Aug 21, 2024 · 690fb38 · 690fb38
1 parent 20053e7
commit 690fb38
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 9 deletions.
diff --git a/components/shared/CopyContainer.tsx b/components/shared/CopyContainer.tsx
@@ -9,13 +9,15 @@ interface CopyContainerProps {
   copySuccessMessage?: string;
   copyErrorMessage?: string;
   options?: Partial<Options>;
+  onCopyClick?: () => void;
   children: React.ReactNode;
 }
 
 export const CopyContainer = ({
   copySuccessMessage = "Copied image to clipboard",
   copyErrorMessage = "Error copying image",
   options,
+  onCopyClick,
   children,
 }: CopyContainerProps) => {
   const { toast } = useToast();
@@ -27,6 +29,7 @@ export const CopyContainer = ({
       <button
         className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-md opacity-0 group-hover:opacity-100 focus-within:opacity-100 scale-95 group-hover:scale-100 transition-all duration-200 ease-in-out transform"
         onClick={async () => {
+          onCopyClick?.();
           const node = copyRef.current;
 
           try {

diff --git a/pages/s/[org]/[repo]/index.tsx b/pages/s/[org]/[repo]/index.tsx
@@ -370,15 +370,45 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                         })
                       }
                     />
-                    <OssfChart
-                      repository={repoData.full_name}
-                      totalScore={repoData.ossf_scorecard_total_score}
-                      dependencyUpdateScore={repoData.ossf_scorecard_dependency_update_score}
-                      maintainedScore={repoData.ossf_scorecard_maintained_score}
-                      fuzzingScore={repoData.ossf_scorecard_fuzzing_score}
-                      isLoading={false}
-                      isError={!repoData.ossf_scorecard_total_score}
-                    />
+                    {!repoData.ossf_scorecard_total_score ? (
+                      <OssfChart
+                        repository={repoData.full_name}
+                        totalScore={repoData.ossf_scorecard_total_score}
+                        dependencyUpdateScore={repoData.ossf_scorecard_dependency_update_score}
+                        maintainedScore={repoData.ossf_scorecard_maintained_score}
+                        fuzzingScore={repoData.ossf_scorecard_fuzzing_score}
+                        isLoading={false}
+                        isError={!repoData.ossf_scorecard_total_score}
+                      />
+                    ) : (
+                      <CopyContainer
+                        onCopyClick={() => {
+                          posthog.capture("Repo Pages: copied OSSF Scorecard", {
+                            repository: repoData.full_name,
+                          });
+                        }}
+                        options={{
+                          windowWidth: 1700,
+                          allowTaint: true,
+                          onclone: (document, element) => {
+                            element.querySelectorAll("[data-copy-image-branding]").forEach((el) => {
+                              el.classList.remove("hidden");
+                            });
+                          },
+                        }}
+                      >
+                        <CopyImageBranding repository={repoData.full_name} />
+                        <OssfChart
+                          repository={repoData.full_name}
+                          totalScore={repoData.ossf_scorecard_total_score}
+                          dependencyUpdateScore={repoData.ossf_scorecard_dependency_update_score}
+                          maintainedScore={repoData.ossf_scorecard_maintained_score}
+                          fuzzingScore={repoData.ossf_scorecard_fuzzing_score}
+                          isLoading={false}
+                          isError={!repoData.ossf_scorecard_total_score}
+                        />
+                      </CopyContainer>
+                    )}
                   </div>
 
                   <RossChart