From e46701e2cd15e3ed4983de32078983fbd8ff8a62 Mon Sep 17 00:00:00 2001
From: Free Wortley <free@lunasec.io>
Date: Thu, 16 Feb 2023 16:59:01 -0800
Subject: [PATCH 1/5] One more comment

---
 .../resolvers/create-pull-request-for-vulnerability.ts           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts b/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts
index 743589d98..1e9abb4ae 100644
--- a/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts
+++ b/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts
@@ -26,6 +26,7 @@ import { checkProjectIsAuthorizedOrThrow, isAuthenticated } from '../helpers/aut
 type CreatePullRequestForVulnerabilityType = NonNullable<MutationResolvers['createPullRequestForVulnerability']>;
 
 function splitGitHubRepoPath(gitHubRepo: string) {
+  // URL from GitHub of the repo, eg: git://github.com/lunasec-io/lunasec.git
   const split = gitHubRepo.split('/');
   const owner = split[split.length - 2];
   const repo = split[split.length - 1].replace('.git', '');

From 00ee8329b0b1c0dd4ba84d8cbb7dfd1a574d7839 Mon Sep 17 00:00:00 2001
From: Free Wortley <free@lunasec.io>
Date: Thu, 16 Feb 2023 18:17:16 -0800
Subject: [PATCH 2/5] Front-End for GitHub PR Generation

This is tested and it works, but we still need to write the final part of the UI. (Showing the link to the PR that was created.)

For now, this does work and it just needs some additional polish to be shipped.

We will need to increase the permissions that we ask for with the GitHub app, unfortunately, because we don't currently have write
permissions to repositories associated with the GitHub App.

Maybe there is a way that we can progressively do that to let people opt-in? That's a discussion for later.
---
 .../create-pull-request-for-vulnerability.ts  |  2 +
 lunatrace/bsl/frontend/src/api/generated.ts   | 51 +++++++++++++++++--
 ...tateCreateGitHubPullRequestForVuln.graphql | 18 +++++++
 .../details/VulnerablePackageListWrapper.tsx  |  4 +-
 .../PackageUpdatablePopOver.tsx               | 47 ++++++++++++-----
 .../VulnerablePackageCardHeader.tsx           |  4 +-
 .../VulnerablePackageMain.tsx                 | 26 ++++++++--
 .../src/package/github-pr/index.ts            |  2 +-
 8 files changed, 130 insertions(+), 24 deletions(-)
 create mode 100644 lunatrace/bsl/frontend/src/api/graphql/mutateCreateGitHubPullRequestForVuln.graphql

diff --git a/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts b/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts
index 1e9abb4ae..8bf8e6769 100644
--- a/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts
+++ b/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts
@@ -103,6 +103,8 @@ export const createPullRequestForVulnerabilityResolver: CreatePullRequestForVuln
 
     const { owner, repo } = splitGitHubRepoPath(githubRepo);
 
+    console.log('installation id', installationId);
+
     const installationAccessTokenRes = await getInstallationAccessToken(installationId);
     if (installationAccessTokenRes.error) {
       log.error('Failed to fetch installation access token', { installationAccessTokenRes });
diff --git a/lunatrace/bsl/frontend/src/api/generated.ts b/lunatrace/bsl/frontend/src/api/generated.ts
index 8965da27d..7c9137727 100644
--- a/lunatrace/bsl/frontend/src/api/generated.ts
+++ b/lunatrace/bsl/frontend/src/api/generated.ts
@@ -171,6 +171,12 @@ export type BuildData_VulnerableRelease = {
   trivially_updatable: Scalars['String'];
 };
 
+export type CreatePullRequestForVulnerabilityResponse = {
+  __typename?: 'CreatePullRequestForVulnerabilityResponse';
+  pullRequestUrl: Scalars['String'];
+  success?: Maybe<Scalars['Boolean']>;
+};
+
 /** Boolean expression to compare columns of type "Float". All fields are combined with logical 'AND'. */
 export type Float_Comparison_Exp = {
   _eq?: InputMaybe<Scalars['Float']>;
@@ -3760,6 +3766,7 @@ export enum Manifests_Update_Column {
 /** mutation root */
 export type Mutation_Root = {
   __typename?: 'mutation_root';
+  createPullRequestForVulnerability?: Maybe<CreatePullRequestForVulnerabilityResponse>;
   /** delete data from the table: "builds" */
   delete_builds?: Maybe<Builds_Mutation_Response>;
   /** delete single row from the table: "builds" */
@@ -3854,6 +3861,16 @@ export type Mutation_Root = {
 };
 
 
+/** mutation root */
+export type Mutation_RootCreatePullRequestForVulnerabilityArgs = {
+  new_package_slug: Scalars['String'];
+  old_package_slug: Scalars['String'];
+  package_manifest_path: Scalars['String'];
+  project_id: Scalars['uuid'];
+  vulnerability_id: Scalars['uuid'];
+};
+
+
 /** mutation root */
 export type Mutation_RootDelete_BuildsArgs = {
   where: Builds_Bool_Exp;
@@ -6330,7 +6347,7 @@ export type Query_RootVulnerability_Cisa_Known_ExploitedArgs = {
 
 
 export type Query_RootVulnerability_Cisa_Known_Exploited_By_PkArgs = {
-  id: Scalars['uuid'];
+  cve: Scalars['String'];
 };
 
 
@@ -7681,7 +7698,7 @@ export type Subscription_RootVulnerability_Cisa_Known_ExploitedArgs = {
 
 
 export type Subscription_RootVulnerability_Cisa_Known_Exploited_By_PkArgs = {
-  id: Scalars['uuid'];
+  cve: Scalars['String'];
 };
 
 
@@ -8429,7 +8446,7 @@ export type Vulnerability_Bool_Exp = {
 /** columns and relationships of "vulnerability.cisa_known_exploited" */
 export type Vulnerability_Cisa_Known_Exploited = {
   __typename?: 'vulnerability_cisa_known_exploited';
-  cve?: Maybe<Scalars['String']>;
+  cve: Scalars['String'];
   date_added: Scalars['date'];
   due_date: Scalars['date'];
   id: Scalars['uuid'];
@@ -9349,6 +9366,17 @@ export type InsertProjectAccessTokenMutationVariables = Exact<{
 
 export type InsertProjectAccessTokenMutation = { __typename?: 'mutation_root', insert_project_access_tokens_one?: { __typename?: 'project_access_tokens', id: any } | null };
 
+export type CreateGitHubPullRequestForVulnMutationVariables = Exact<{
+  project_id: Scalars['uuid'];
+  vulnerability_id: Scalars['uuid'];
+  old_package_slug: Scalars['String'];
+  new_package_slug: Scalars['String'];
+  package_manifest_path: Scalars['String'];
+}>;
+
+
+export type CreateGitHubPullRequestForVulnMutation = { __typename?: 'mutation_root', createPullRequestForVulnerability?: { __typename?: 'CreatePullRequestForVulnerabilityResponse', success?: boolean | null, pullRequestUrl: string } | null };
+
 export type InsertIgnoredVulnerabilitiesMutationVariables = Exact<{
   objects: Array<Ignored_Vulnerabilities_Insert_Input> | Ignored_Vulnerabilities_Insert_Input;
 }>;
@@ -10308,6 +10336,20 @@ export const InsertProjectAccessTokenDocument = `
   }
 }
     `;
+export const CreateGitHubPullRequestForVulnDocument = `
+    mutation CreateGitHubPullRequestForVuln($project_id: uuid!, $vulnerability_id: uuid!, $old_package_slug: String!, $new_package_slug: String!, $package_manifest_path: String!) {
+  createPullRequestForVulnerability(
+    project_id: $project_id
+    vulnerability_id: $vulnerability_id
+    old_package_slug: $old_package_slug
+    new_package_slug: $new_package_slug
+    package_manifest_path: $package_manifest_path
+  ) {
+    success
+    pullRequestUrl
+  }
+}
+    `;
 export const InsertIgnoredVulnerabilitiesDocument = `
     mutation InsertIgnoredVulnerabilities($objects: [ignored_vulnerabilities_insert_input!]!) {
   insert_ignored_vulnerabilities(
@@ -10500,6 +10542,9 @@ const injectedRtkApi = api.injectEndpoints({
     InsertProjectAccessToken: build.mutation<InsertProjectAccessTokenMutation, InsertProjectAccessTokenMutationVariables>({
       query: (variables) => ({ document: InsertProjectAccessTokenDocument, variables })
     }),
+    CreateGitHubPullRequestForVuln: build.mutation<CreateGitHubPullRequestForVulnMutation, CreateGitHubPullRequestForVulnMutationVariables>({
+      query: (variables) => ({ document: CreateGitHubPullRequestForVulnDocument, variables })
+    }),
     InsertIgnoredVulnerabilities: build.mutation<InsertIgnoredVulnerabilitiesMutation, InsertIgnoredVulnerabilitiesMutationVariables>({
       query: (variables) => ({ document: InsertIgnoredVulnerabilitiesDocument, variables })
     }),
diff --git a/lunatrace/bsl/frontend/src/api/graphql/mutateCreateGitHubPullRequestForVuln.graphql b/lunatrace/bsl/frontend/src/api/graphql/mutateCreateGitHubPullRequestForVuln.graphql
new file mode 100644
index 000000000..1904ec2ee
--- /dev/null
+++ b/lunatrace/bsl/frontend/src/api/graphql/mutateCreateGitHubPullRequestForVuln.graphql
@@ -0,0 +1,18 @@
+mutation CreateGitHubPullRequestForVuln(
+    $project_id: uuid!,
+    $vulnerability_id: uuid!,
+    $old_package_slug: String!,
+    $new_package_slug: String!,
+    $package_manifest_path: String!
+) {
+    createPullRequestForVulnerability(
+        project_id: $project_id,
+        vulnerability_id: $vulnerability_id,
+        old_package_slug: $old_package_slug,
+        new_package_slug: $new_package_slug,
+        package_manifest_path: $package_manifest_path
+    ) {
+        success
+        pullRequestUrl
+    }
+}
diff --git a/lunatrace/bsl/frontend/src/pages/project/builds/details/VulnerablePackageListWrapper.tsx b/lunatrace/bsl/frontend/src/pages/project/builds/details/VulnerablePackageListWrapper.tsx
index 769f995ee..3dd0a7982 100644
--- a/lunatrace/bsl/frontend/src/pages/project/builds/details/VulnerablePackageListWrapper.tsx
+++ b/lunatrace/bsl/frontend/src/pages/project/builds/details/VulnerablePackageListWrapper.tsx
@@ -44,10 +44,10 @@ export const VulnerablePackageListWrapper: React.FC<VulnerablePackageListWrapper
   shouldIgnore,
   build,
 }) => {
-  // severity state for modern tree data, legacy has its own state and doesnt use this
+  // severity state for modern tree data, legacy has its own state and doesn't use this
   const [severity, setSeverity] = useState<SeverityNamesOsv>('Critical');
 
-  // data for modern tree, legacy doesnt use this
+  // data for modern tree, legacy doesn't use this
   const {
     data: vulnerableReleasesData,
     isLoading,
diff --git a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/PackageUpdatablePopOver.tsx b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/PackageUpdatablePopOver.tsx
index e680b063e..4b3fd0db9 100644
--- a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/PackageUpdatablePopOver.tsx
+++ b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/PackageUpdatablePopOver.tsx
@@ -12,14 +12,19 @@
  *
  */
 import React from 'react';
-import { NavLink, OverlayTrigger, Popover, Tooltip } from 'react-bootstrap';
+import { Button, NavLink, OverlayTrigger, Popover, Tooltip } from 'react-bootstrap';
 import { CopyBlock, tomorrowNight } from 'react-code-blocks';
+import { BsGithub } from 'react-icons/bs';
 import { FcUpload } from 'react-icons/fc';
 
 import useBreakpoint from '../../../../../../hooks/useBreakpoint';
 import { isDirectDep } from '../../../../../../utils/package';
 import { VulnerablePackage } from '../types';
-export const PackageUpdatablePopOver: React.FC<{ pkg: VulnerablePackage }> = ({ pkg }) => {
+
+export const PackageUpdatablePopOver: React.FC<{
+  pkg: VulnerablePackage;
+  onClickUpdate: (pkg: VulnerablePackage) => void;
+}> = ({ pkg, onClickUpdate }) => {
   const trivialUpdateStatus = pkg.trivially_updatable;
 
   if (!trivialUpdateStatus || trivialUpdateStatus === 'no') {
@@ -30,13 +35,21 @@ export const PackageUpdatablePopOver: React.FC<{ pkg: VulnerablePackage }> = ({
     return (
       <Popover className="vulnerablePackage-update-popover" {...props}>
         <Popover.Header>Trivially Updatable </Popover.Header>
-        <Popover.Body>
-          A fix is available within the semver range this package was requested with, meaning that the{' '}
-          <strong>project lockfile</strong> is probably the only thing constraining the package to the vulnerable
-          version.
-          <hr className="m-1" />
+        <Popover.Body style={{ maxWidth: '500px' }}>
+          <div className="mb-1 ">
+            <Button variant="primary" size="lg" className="mb-1" onClick={() => onClickUpdate(pkg)}>
+              <BsGithub className="mb-1 me-1" /> {'Click to Patch Vulnerability'}
+            </Button>
+          </div>
+          Clicking this button will open a Pull Request to update the project&apos;s lockfile.
+          <hr className="mt-1 mb-1" />
+          <>
+            A fix is available within the semver range this package was requested with, meaning that the{' '}
+            <strong>project lockfile</strong> is likely constraining the package to the vulnerable version.
+          </>
+          <hr className="mt-1 mb-1" />
           {isDirectDep(pkg) ? (
-            <>
+            <div>
               This command will update the package:
               <CopyBlock
                 text={`npm update ${pkg.release.package.name}`}
@@ -55,14 +68,20 @@ export const PackageUpdatablePopOver: React.FC<{ pkg: VulnerablePackage }> = ({
                 theme={tomorrowNight}
                 codeBlock
               />
-            </>
+            </div>
           ) : (
-            <>
+            <div>
               This package is a <strong>transitive</strong> (deep) dependency. Due to constraints of NPM and Yarn,
-              updating it is only possible by manually deleting it from your project&apos;s lockfile (or deleting your
-              entire lockfile) and then re-running your package install command (npm install) to fetch the latest
-              version. Automated lockfile patching is currently in development by LunaTrace.
-            </>
+              updating it is only possible using a special tool like{' '}
+              <a
+                href="https://github.com/lunasec-io/lunasec/tree/master/lunatrace/npm-package-cli"
+                target="_blank"
+                rel="noreferrer"
+              >
+                @lunatrace/npm-package-cli
+              </a>{' '}
+              (which powers the automated patcher above).
+            </div>
           )}
         </Popover.Body>
       </Popover>
diff --git a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageCardHeader.tsx b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageCardHeader.tsx
index 27710faa2..d0017ea35 100644
--- a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageCardHeader.tsx
+++ b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageCardHeader.tsx
@@ -26,11 +26,13 @@ import { PackageUpdatablePopOver } from './PackageUpdatablePopOver';
 interface VulnerablePackageCardHeaderProps {
   ignored: boolean;
   pkg: VulnerablePackage;
+  onClickUpdate: (pkg: VulnerablePackage) => void;
 }
 
 export const VulnerablePackageCardHeader: React.FunctionComponent<VulnerablePackageCardHeaderProps> = ({
   pkg,
   ignored,
+  onClickUpdate,
 }) => {
   const recommendedVersion = semver.rsort([...pkg.fix_versions])[0];
   return (
@@ -50,7 +52,7 @@ export const VulnerablePackageCardHeader: React.FunctionComponent<VulnerablePack
                   {recommendedVersion}
                 </>
               )}
-              <PackageUpdatablePopOver pkg={pkg} />
+              <PackageUpdatablePopOver pkg={pkg} onClickUpdate={onClickUpdate} />
               <PackageManagerLink
                 packageName={pkg.release.package.name}
                 packageManager={pkg.release.package.package_manager}
diff --git a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageMain.tsx b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageMain.tsx
index 282cd8a02..6db5d55b2 100644
--- a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageMain.tsx
+++ b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageMain.tsx
@@ -16,10 +16,11 @@ import React, { useState } from 'react';
 import { Card, Dropdown, FloatingLabel, Form, FormControl, Spinner } from 'react-bootstrap';
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { useParams } from 'react-router-dom';
+import semver from 'semver';
 
 import api from '../../../../../../api';
 import { ConfirmationDailog } from '../../../../../../components/ConfirmationDialog';
-import {BuildDetailInfo, QuickViewProps} from '../../../types';
+import { BuildDetailInfo, QuickViewProps } from '../../../types';
 import { VulnerablePackage } from '../types';
 
 import { PackageCardBody } from './PackageCardBody';
@@ -42,6 +43,8 @@ export const VulnerablePackageMain: React.FunctionComponent<VulnerablePackageMai
 }) => {
   const [showConfirmation, setShowConfirmation] = useState(false);
   const [insertVulnIgnore, insertVulnIgnoreState] = api.useInsertIgnoredVulnerabilitiesMutation();
+  const [createGitHubPullRequestForVuln] = api.useCreateGitHubPullRequestForVulnMutation();
+
   const [ignoreNote, setIgnoreNote] = useState('');
   const { project_id } = useParams();
   const [shouldFilterFindingsBySeverity, setShouldFilterFindingsBySeverity] = useState(true);
@@ -65,6 +68,8 @@ export const VulnerablePackageMain: React.FunctionComponent<VulnerablePackageMai
 
   const allFindingsIgnored = findings.every((f) => f.ignored);
 
+  const recommendedVersion = semver.rsort([...pkg.fix_versions])[0];
+
   const bulkIgnoreVulns = async () => {
     if (!project_id) {
       throw new Error('attempted to ignore a vuln but no project id is in the url');
@@ -82,7 +87,7 @@ export const VulnerablePackageMain: React.FunctionComponent<VulnerablePackageMai
   // eslint-disable-next-line react/display-name
   const customMenuToggle = React.forwardRef<
     HTMLAnchorElement,
-    { onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void,children:React.ReactNode }
+    { onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void; children: React.ReactNode }
   >(({ children, onClick }, ref) => (
     <a
       className="text-end position-absolute top-0 end-0 m-3 btn-white"
@@ -113,11 +118,26 @@ export const VulnerablePackageMain: React.FunctionComponent<VulnerablePackageMai
     );
   };
 
+  async function onClickUpdate(pkg) {
+    console.log('opening PR', pkg);
+
+    const response = await createGitHubPullRequestForVuln({
+      project_id: build.project_id,
+      vulnerability_id: pkg.affected_by[0].vulnerability.id,
+      old_package_slug: `${pkg.release.package.name}@${pkg.release.version}`,
+      new_package_slug: `${pkg.release.package.name}@^${recommendedVersion}`,
+      // TODO: Add support for multiple paths...
+      package_manifest_path: pkg.paths[0],
+    });
+
+    console.log('pr response:', response);
+  }
+
   return (
     <>
       <Card className="vulnpkg-card">
         {renderIgnoreUi()}
-        <VulnerablePackageCardHeader pkg={pkg} ignored={allFindingsIgnored} />
+        <VulnerablePackageCardHeader pkg={pkg} ignored={allFindingsIgnored} onClickUpdate={onClickUpdate} />
         <PackageCardBody
           findingsHiddenBySeverityCount={findingsHiddenBySeverityCount}
           pkg={pkg}
diff --git a/lunatrace/npm-package-cli/src/package/github-pr/index.ts b/lunatrace/npm-package-cli/src/package/github-pr/index.ts
index 5109fa55a..5115ac65f 100644
--- a/lunatrace/npm-package-cli/src/package/github-pr/index.ts
+++ b/lunatrace/npm-package-cli/src/package/github-pr/index.ts
@@ -233,7 +233,7 @@ export async function replacePackageAndFileGitHubPullRequest(
     throw new Error(`GitHub Error: Unable to create pull request for ${owner}/${repo}@${checkoutRef} in path: ${path}`);
   }
 
-  if (pullRequest.status !== 200) {
+  if (pullRequest.status !== 201 && pullRequest.status !== 200) {
     throw new Error(
       `GitHub Error: Unable to create pull request for ${owner}/${repo}@${checkoutRef} in path: ${path} (Status: ${pullRequest.status})`
     );

From e6f3cf904ecc9b083b4fb910d3683951c3186260 Mon Sep 17 00:00:00 2001
From: Free Wortley <free@lunasec.io>
Date: Thu, 16 Feb 2023 18:24:54 -0800
Subject: [PATCH 3/5] Cleanup

---
 .../resolvers/create-pull-request-for-vulnerability.ts       | 2 --
 .../vulnerable-package-card/VulnerablePackageMain.tsx        | 5 ++---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts b/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts
index 8bf8e6769..1e9abb4ae 100644
--- a/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts
+++ b/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts
@@ -103,8 +103,6 @@ export const createPullRequestForVulnerabilityResolver: CreatePullRequestForVuln
 
     const { owner, repo } = splitGitHubRepoPath(githubRepo);
 
-    console.log('installation id', installationId);
-
     const installationAccessTokenRes = await getInstallationAccessToken(installationId);
     if (installationAccessTokenRes.error) {
       log.error('Failed to fetch installation access token', { installationAccessTokenRes });
diff --git a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageMain.tsx b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageMain.tsx
index 6db5d55b2..090b44bdf 100644
--- a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageMain.tsx
+++ b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageMain.tsx
@@ -118,9 +118,7 @@ export const VulnerablePackageMain: React.FunctionComponent<VulnerablePackageMai
     );
   };
 
-  async function onClickUpdate(pkg) {
-    console.log('opening PR', pkg);
-
+  async function onClickUpdate(pkg: VulnerablePackage) {
     const response = await createGitHubPullRequestForVuln({
       project_id: build.project_id,
       vulnerability_id: pkg.affected_by[0].vulnerability.id,
@@ -130,6 +128,7 @@ export const VulnerablePackageMain: React.FunctionComponent<VulnerablePackageMai
       package_manifest_path: pkg.paths[0],
     });
 
+    // TODO: Make this actually put some HTML on the page.
     console.log('pr response:', response);
   }
 

From 99ee3a046c9c771a23a4a7ec4ebb23564037c0a5 Mon Sep 17 00:00:00 2001
From: Free Wortley <free@lunasec.io>
Date: Fri, 3 Mar 2023 15:41:08 -0800
Subject: [PATCH 4/5] Finish up the UI, fix some bugs

---
 .../PackageUpdatablePopOver.tsx               | 29 ++++++++++++++++---
 .../VulnerablePackageCardHeader.tsx           |  2 +-
 .../VulnerablePackageMain.tsx                 | 18 ++++++++++--
 .../src/package/github-pr/index.ts            |  2 +-
 4 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/PackageUpdatablePopOver.tsx b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/PackageUpdatablePopOver.tsx
index 4b3fd0db9..f5675404d 100644
--- a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/PackageUpdatablePopOver.tsx
+++ b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/PackageUpdatablePopOver.tsx
@@ -23,8 +23,11 @@ import { VulnerablePackage } from '../types';
 
 export const PackageUpdatablePopOver: React.FC<{
   pkg: VulnerablePackage;
-  onClickUpdate: (pkg: VulnerablePackage) => void;
+  onClickUpdate: (pkg: VulnerablePackage) => Promise<void>;
 }> = ({ pkg, onClickUpdate }) => {
+  const [creatingPr, setCreatingPr] = React.useState(false);
+  const [showPopOver, setShowPopOver] = React.useState(false);
+
   const trivialUpdateStatus = pkg.trivially_updatable;
 
   if (!trivialUpdateStatus || trivialUpdateStatus === 'no') {
@@ -37,8 +40,19 @@ export const PackageUpdatablePopOver: React.FC<{
         <Popover.Header>Trivially Updatable </Popover.Header>
         <Popover.Body style={{ maxWidth: '500px' }}>
           <div className="mb-1 ">
-            <Button variant="primary" size="lg" className="mb-1" onClick={() => onClickUpdate(pkg)}>
-              <BsGithub className="mb-1 me-1" /> {'Click to Patch Vulnerability'}
+            <Button
+              variant="primary"
+              size="lg"
+              className="mb-1"
+              disabled={creatingPr}
+              onClick={async () => {
+                setCreatingPr(true);
+                await onClickUpdate(pkg);
+                setCreatingPr(false);
+                setShowPopOver(false);
+              }}
+            >
+              <BsGithub className="mb-1 me-1" /> {creatingPr ? 'Creating Pr...' : 'Click to Patch Vulnerability'}
             </Button>
           </div>
           Clicking this button will open a Pull Request to update the project&apos;s lockfile.
@@ -92,7 +106,14 @@ export const PackageUpdatablePopOver: React.FC<{
   return (
     <>
       {' '}
-      <OverlayTrigger trigger="click" rootClose placement={mdOrLarger ? 'right' : 'bottom'} overlay={renderToolTip}>
+      <OverlayTrigger
+        trigger="click"
+        rootClose
+        placement={mdOrLarger ? 'right' : 'bottom'}
+        overlay={renderToolTip}
+        show={showPopOver}
+        onToggle={(nextShow) => setShowPopOver(nextShow)}
+      >
         <NavLink className="primary-color d-inline m-0 p-0">
           {trivialUpdateStatus === 'partially' ? 'partially ' : ''}updatable
           <FcUpload color="black" className="pb-1" />
diff --git a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageCardHeader.tsx b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageCardHeader.tsx
index d0017ea35..dd30abf4c 100644
--- a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageCardHeader.tsx
+++ b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageCardHeader.tsx
@@ -26,7 +26,7 @@ import { PackageUpdatablePopOver } from './PackageUpdatablePopOver';
 interface VulnerablePackageCardHeaderProps {
   ignored: boolean;
   pkg: VulnerablePackage;
-  onClickUpdate: (pkg: VulnerablePackage) => void;
+  onClickUpdate: (pkg: VulnerablePackage) => Promise<void>;
 }
 
 export const VulnerablePackageCardHeader: React.FunctionComponent<VulnerablePackageCardHeaderProps> = ({
diff --git a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageMain.tsx b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageMain.tsx
index 090b44bdf..17fe970e1 100644
--- a/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageMain.tsx
+++ b/lunatrace/bsl/frontend/src/pages/project/builds/details/vulnerable-packages/vulnerable-package-card/VulnerablePackageMain.tsx
@@ -49,6 +49,8 @@ export const VulnerablePackageMain: React.FunctionComponent<VulnerablePackageMai
   const { project_id } = useParams();
   const [shouldFilterFindingsBySeverity, setShouldFilterFindingsBySeverity] = useState(true);
 
+  const [patchPullRequestUrl, setPatchPullRequestUrl] = useState(undefined);
+
   const findingsAboveSeverity = pkg.affected_by.filter((affectedByVuln) => {
     return !affectedByVuln.beneath_minimum_severity || !shouldFilterFindingsBySeverity;
   });
@@ -128,8 +130,12 @@ export const VulnerablePackageMain: React.FunctionComponent<VulnerablePackageMai
       package_manifest_path: pkg.paths[0],
     });
 
-    // TODO: Make this actually put some HTML on the page.
-    console.log('pr response:', response);
+    if (Object.keys(response).includes('error')) {
+      console.error('Failed to create pull request', response);
+      return;
+    }
+
+    setPatchPullRequestUrl((response as any).data.createPullRequestForVulnerability.pullRequestUrl);
   }
 
   return (
@@ -137,6 +143,14 @@ export const VulnerablePackageMain: React.FunctionComponent<VulnerablePackageMai
       <Card className="vulnpkg-card">
         {renderIgnoreUi()}
         <VulnerablePackageCardHeader pkg={pkg} ignored={allFindingsIgnored} onClickUpdate={onClickUpdate} />
+        {patchPullRequestUrl && (
+          <div className="alert alert-success" role="alert">
+            Pull Request Created:{' '}
+            <a href={patchPullRequestUrl} target="_blank" rel="noreferrer">
+              {patchPullRequestUrl}
+            </a>
+          </div>
+        )}
         <PackageCardBody
           findingsHiddenBySeverityCount={findingsHiddenBySeverityCount}
           pkg={pkg}
diff --git a/lunatrace/npm-package-cli/src/package/github-pr/index.ts b/lunatrace/npm-package-cli/src/package/github-pr/index.ts
index 5115ac65f..4e2b79a3c 100644
--- a/lunatrace/npm-package-cli/src/package/github-pr/index.ts
+++ b/lunatrace/npm-package-cli/src/package/github-pr/index.ts
@@ -204,7 +204,7 @@ export async function replacePackageAndFileGitHubPullRequest(
   const branchName = `replace-${normalizedOldPackageName}-with-${normalizedNewPackageName}`;
   const message = `This pull request replaces \`${oldPackage}\` with \`${newPackage}\` in \`${owner}/${repo}@${checkoutRef}\` in path: \`${path}\``;
 
-  const pullRequest = await octokit.createPullRequest({
+  const pullRequest: any = await octokit.createPullRequest({
     owner,
     repo,
     title: `[Security][LunaTrace] Replace ${oldPackage} with ${newPackage}`,

From 4ea5a620e12e6c06b4e23ab129589e74b34a299d Mon Sep 17 00:00:00 2001
From: Free Wortley <free@lunasec.io>
Date: Fri, 3 Mar 2023 16:05:44 -0800
Subject: [PATCH 5/5] Attempt to fix CI failure

---
 .github/workflows/lunatrace-stack-and-hasura.yaml               | 1 +
 .../resolvers/create-pull-request-for-vulnerability.ts          | 2 +-
 lunatrace/npm-package-cli/package.json                          | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/lunatrace-stack-and-hasura.yaml b/.github/workflows/lunatrace-stack-and-hasura.yaml
index b0d9df9b3..4dfadc851 100644
--- a/.github/workflows/lunatrace-stack-and-hasura.yaml
+++ b/.github/workflows/lunatrace-stack-and-hasura.yaml
@@ -36,6 +36,7 @@ jobs:
       - name: Build
         run: |-
           set -x
+          (cd lunatrace/npm-package-cli && yarn run compile)
           (cd lunatrace/bsl/logger && yarn run compile)
           (cd lunatrace/bsl/common && yarn run compile)
           (cd lunatrace/bsl/backend && yarn run compile)
diff --git a/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts b/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts
index 1e9abb4ae..326ad7020 100644
--- a/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts
+++ b/lunatrace/bsl/backend/src/graphql-yoga/resolvers/create-pull-request-for-vulnerability.ts
@@ -15,7 +15,7 @@ import { GraphQLYogaError } from '@graphql-yoga/node';
 import {
   PullRequestOctokit,
   replacePackageAndFileGitHubPullRequest,
-} from '@lunatrace/npm-package-cli/src/package/github-pr';
+} from '@lunatrace/npm-package-cli/src/package/github-pr/index';
 
 import { getInstallationAccessToken } from '../../github/auth';
 import { hasura } from '../../hasura-api';
diff --git a/lunatrace/npm-package-cli/package.json b/lunatrace/npm-package-cli/package.json
index c3100d0ac..4e7f9e655 100644
--- a/lunatrace/npm-package-cli/package.json
+++ b/lunatrace/npm-package-cli/package.json
@@ -69,6 +69,7 @@
   },
   "scripts": {
     "build": "shx rm -rf dist && tsc -b",
+    "compile": "yarn build",
     "dev": "node ./bin/dev",
     "dev-debug": "node --inspect-brk ./bin/dev",
     "postpack": "shx rm -f oclif.manifest.json",