feat: add approve PR button to workflow UI

packages/netlify-cms-backend-azure/src/API.ts

@@ -462,8 +462,10 @@ export default class API {
     const status = labelToStatus(labelName, this.cmsLabelPrefix);
     // Uses creationDate, as we do not have direct access to the updated date
     const updatedAt = pullRequest.closedDate ? pullRequest.closedDate : pullRequest.creationDate;
-    const pullRequestAuthor =
-      pullRequest.createdBy?.displayName || pullRequest.createdBy?.uniqueName;
+    const pullRequestAuthor = {
+      name: pullRequest.createdBy?.displayName,
+      login: pullRequest.createdBy?.uniqueName,
+    };
     return {
       collection,
       slug,
@@ -717,6 +719,22 @@ export default class API {
     await this.completePullRequest(pullRequest);
   }
 
+  async approveEntry(collectionName: string, slug: string) {
+    const contentKey = generateContentKey(collectionName, slug);
+    const branch = branchFromContentKey(contentKey);
+
+    const pullRequest = await this.getBranchPullRequest(branch);
+    const pullRequestCompleted = {
+      status: AzurePullRequestStatus.COMPLETED,
+    };
+
+    await this.requestJSON({
+      method: 'PATCH',
+      url: `${this.endpointUrl}/pullrequests/${encodeURIComponent(pullRequest.pullRequestId)}`,
+      body: JSON.stringify(pullRequestCompleted),
+    });
+  }
+
   async updatePullRequestLabels(pullRequest: AzurePullRequest, labels: string[]) {
     const cmsLabels = pullRequest.labels.filter(l => isCMSLabel(l.name, this.cmsLabelPrefix));
     await Promise.all(

packages/netlify-cms-backend-azure/src/implementation.ts

@@ -365,6 +365,15 @@ export default class Azure implements Implementation {
     );
   }
 
+  approveEntry(collection: string, slug: string) {
+    // approveEntry is a transactional operation
+    return runWithLock(
+      this.lock,
+      () => this.api!.approveEntry(collection, slug),
+      'Failed to acquire approve entry lock',
+    );
+  }
+
   async getDeployPreview(collection: string, slug: string) {
     try {
       const statuses = await this.api!.getStatuses(collection, slug);

packages/netlify-cms-backend-bitbucket/src/API.ts

@@ -700,7 +700,10 @@ export default class API {
     const label = await this.getPullRequestLabel(pullRequest.id);
     const status = labelToStatus(label, this.cmsLabelPrefix);
     const updatedAt = pullRequest.updated_on;
-    const pullRequestAuthor = pullRequest.author.display_name;
+    const pullRequestAuthor = {
+      name: pullRequest.author.display_name,
+      login: pullRequest.author.username,
+    };
     return {
       collection,
       slug,
@@ -743,6 +746,17 @@ export default class API {
     await this.mergePullRequest(pullRequest);
   }
 
+  async approveEntry(collectionName: string, slug: string) {
+    const contentKey = generateContentKey(collectionName, slug);
+    const branch = branchFromContentKey(contentKey);
+
+    const pullRequest = await this.getBranchPullRequest(branch);
+    await this.requestJSON({
+      method: 'POST',
+      url: `${this.repoURL}/pullrequests/${pullRequest.id}/approve`,
+    });
+  }
+
   async declinePullRequest(pullRequest: BitBucketPullRequest) {
     await this.requestJSON({
       method: 'POST',

packages/netlify-cms-backend-bitbucket/src/implementation.ts

@@ -612,6 +612,15 @@ export default class BitbucketBackend implements Implementation {
     );
   }
 
+  approveEntry(collection: string, slug: string) {
+    // approveEntry is a transactional operation
+    return runWithLock(
+      this.lock,
+      () => this.api!.approveEntry(collection, slug),
+      'Failed to acquire approve entry lock',
+    );
+  }
+
   async getDeployPreview(collection: string, slug: string) {
     try {
       const statuses = await this.api!.getStatuses(collection, slug);

packages/netlify-cms-backend-github/src/API.ts

@@ -576,8 +576,8 @@ export default class API {
     }
 
     try {
-      const user: GitHubUser = await this.request(`/users/${pullRequest.user.login}`);
-      return user.name || user.login;
+      const { name, login }: GitHubUser = await this.request(`/users/${pullRequest.user.login}`);
+      return { name, login };
     } catch {
       return;
     }
@@ -1165,6 +1165,14 @@ export default class API {
     await this.deleteBranch(branch);
   }
 
+  async approveEntry(collectionName: string, slug: string) {
+    const contentKey = this.generateContentKey(collectionName, slug);
+    const branch = branchFromContentKey(contentKey);
+
+    const pullRequest = await this.getBranchPullRequest(branch);
+    await this.approvePR(pullRequest);
+  }
+
   async createRef(type: string, name: string, sha: string) {
     const result: Octokit.GitCreateRefResponse = await this.request(`${this.repoURL}/git/refs`, {
       method: 'POST',
@@ -1341,6 +1349,20 @@ export default class API {
     }
   }
 
+  async approvePR(pullrequest: GitHubPull) {
+    console.log('%c Approving PR', 'line-height: 30px;text-align: center;font-weight: bold');
+    const result: Octokit.PullsCreateReviewResponse = await this.request(
+      `${this.originRepoURL}/pulls/${pullrequest.number}/reviews`,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          event: 'APPROVE',
+        }),
+      },
+    );
+    return result;
+  }
+
   async forceMergePR(pullRequest: GitHubPull) {
     const result = await this.getDifferences(pullRequest.base.sha, pullRequest.head.sha);
     const files = getTreeFiles(result.files as GitHubCompareFiles);

packages/netlify-cms-backend-github/src/GraphQLAPI.ts

@@ -281,8 +281,11 @@ export default class GraphQLAPI extends API {
   }
 
   async getPullRequestAuthor(pullRequest: Octokit.PullsListResponseItem) {
-    const user = pullRequest.user as unknown as GraphQLPullsListResponseItemUser;
-    return user?.name || user?.login;
+    if (!pullRequest.user) {
+      return { name: '', login: '' };
+    }
+    const { name, login } = pullRequest.user as unknown as GraphQLPullsListResponseItemUser;
+    return { name, login };
   }
 
   async getPullRequests(

packages/netlify-cms-backend-github/src/implementation.tsx

@@ -670,4 +670,13 @@ export default class GitHub implements Implementation {
       'Failed to acquire publish entry lock',
     );
   }
+
+  approveEntry(collection: string, slug: string) {
+    // approveEntry is a transactional operation
+    return runWithLock(
+      this.lock,
+      () => this.api!.approveEntry(collection, slug),
+      'Failed to acquire approve entry lock',
+    );
+  }
 }

packages/netlify-cms-backend-gitlab/src/API.ts

@@ -809,7 +809,10 @@ export default class API {
     const label = mergeRequest.labels.find(l => isCMSLabel(l, this.cmsLabelPrefix)) as string;
     const status = labelToStatus(label, this.cmsLabelPrefix);
     const updatedAt = mergeRequest.updated_at;
-    const pullRequestAuthor = mergeRequest.author.name;
+    const pullRequestAuthor = {
+      name: mergeRequest.author.name,
+      login: mergeRequest.author.username,
+    };
     return {
       collection,
       slug,
@@ -947,6 +950,17 @@ export default class API {
     await this.mergeMergeRequest(mergeRequest);
   }
 
+  async approveEntry(collectionName: string, slug: string) {
+    const contentKey = generateContentKey(collectionName, slug);
+    const branch = branchFromContentKey(contentKey);
+
+    const mergeRequest = await this.getBranchMergeRequest(branch);
+    await this.requestJSON({
+      method: 'POST',
+      url: `${this.repoURL}/merge_requests/${mergeRequest.iid}/approve`,
+    });
+  }
+
   async closeMergeRequest(mergeRequest: GitLabMergeRequest) {
     await this.requestJSON({
       method: 'PUT',

packages/netlify-cms-backend-gitlab/src/implementation.ts

@@ -438,6 +438,15 @@ export default class GitLab implements Implementation {
     );
   }
 
+  approveEntry(collection: string, slug: string) {
+    // approveEntry is a transactional operation
+    return runWithLock(
+      this.lock,
+      () => this.api!.approveEntry(collection, slug),
+      'Failed to acquire approve entry lock',
+    );
+  }
+
   async getDeployPreview(collection: string, slug: string) {
     try {
       const statuses = await this.api!.getStatuses(collection, slug);

packages/netlify-cms-core/src/__tests__/backend.spec.js

@@ -202,6 +202,8 @@ describe('Backend', () => {
           isModification: null,
           status: '',
           updatedOn: '',
+          canApprove: false,
+          supportsApprove: false,
         },
       });
       expect(localForage.getItem).toHaveBeenCalledTimes(1);
@@ -243,6 +245,8 @@ describe('Backend', () => {
           isModification: null,
           status: '',
           updatedOn: '',
+          canApprove: false,
+          supportsApprove: false,
         },
       });
       expect(localForage.getItem).toHaveBeenCalledTimes(1);
@@ -392,6 +396,8 @@ describe('Backend', () => {
         mediaFiles: [{ id: '1', draft: true }],
         status: '',
         updatedOn: '',
+        canApprove: false,
+        supportsApprove: false,
       });
     });
   });

packages/netlify-cms-core/src/actions/__tests__/entries.spec.js

@@ -60,6 +60,8 @@ describe('entries', () => {
             slug: '',
             status: '',
             updatedOn: '',
+            canApprove: false,
+            supportsApprove: false,
           },
           type: 'DRAFT_CREATE_EMPTY',
         });
@@ -93,6 +95,8 @@ describe('entries', () => {
             slug: '',
             status: '',
             updatedOn: '',
+            canApprove: false,
+            supportsApprove: false,
           },
           type: 'DRAFT_CREATE_EMPTY',
         });
@@ -128,6 +132,8 @@ describe('entries', () => {
               slug: '',
               status: '',
               updatedOn: '',
+              canApprove: false,
+              supportsApprove: false,
             },
             type: 'DRAFT_CREATE_EMPTY',
           });

packages/netlify-cms-core/src/actions/editorialWorkflow.ts

@@ -61,7 +61,10 @@ export const UNPUBLISHED_ENTRY_STATUS_CHANGE_SUCCESS = 'UNPUBLISHED_ENTRY_STATUS
 export const UNPUBLISHED_ENTRY_STATUS_CHANGE_FAILURE = 'UNPUBLISHED_ENTRY_STATUS_CHANGE_FAILURE';
 
 export const UNPUBLISHED_ENTRY_PUBLISH_REQUEST = 'UNPUBLISHED_ENTRY_PUBLISH_REQUEST';
+export const APPROVE_ENTRY_REQUEST = 'APPROVE_ENTRY_REQUEST';
 export const UNPUBLISHED_ENTRY_PUBLISH_SUCCESS = 'UNPUBLISHED_ENTRY_PUBLISH_SUCCESS';
+export const APPROVE_ENTRY_SUCCESS = 'APPROVE_ENTRY_SUCCESS';
+export const APPROVE_ENTRY_FAILURE = 'APPROVE_ENTRY_FAILURE';
 export const UNPUBLISHED_ENTRY_PUBLISH_FAILURE = 'UNPUBLISHED_ENTRY_PUBLISH_FAILURE';
 
 export const UNPUBLISHED_ENTRY_DELETE_REQUEST = 'UNPUBLISHED_ENTRY_DELETE_REQUEST';
@@ -200,20 +203,41 @@ function unpublishedEntryPublishRequest(collection: string, slug: string) {
   };
 }
 
+function approveEntryRequest(collection: string, slug: string) {
+  return {
+    type: APPROVE_ENTRY_REQUEST,
+    payload: { collection, slug },
+  };
+}
+
 function unpublishedEntryPublished(collection: string, slug: string) {
   return {
     type: UNPUBLISHED_ENTRY_PUBLISH_SUCCESS,
     payload: { collection, slug },
   };
 }
 
+function entryApproved(collection: string, slug: string) {
+  return {
+    type: APPROVE_ENTRY_SUCCESS,
+    payload: { collection, slug },
+  };
+}
+
 function unpublishedEntryPublishError(collection: string, slug: string) {
   return {
     type: UNPUBLISHED_ENTRY_PUBLISH_FAILURE,
     payload: { collection, slug },
   };
 }
 
+function entryApproveError(collection: string, slug: string) {
+  return {
+    type: APPROVE_ENTRY_FAILURE,
+    payload: { collection, slug },
+  };
+}
+
 function unpublishedEntryDeleteRequest(collection: string, slug: string) {
   return {
     type: UNPUBLISHED_ENTRY_DELETE_REQUEST,
@@ -524,6 +548,35 @@ export function publishUnpublishedEntry(collectionName: string, slug: string) {
   };
 }
 
+export function approveEntry(collectionName: string, slug: string) {
+  return async (dispatch: ThunkDispatch<State, {}, AnyAction>, getState: () => State) => {
+    const state = getState();
+    const backend = currentBackend(state.config);
+    const entry = selectUnpublishedEntry(state, collectionName, slug);
+    dispatch(approveEntryRequest(collectionName, slug));
+    try {
+      await backend.approveEntry(entry);
+      dispatch(
+        notifSend({
+          message: { key: 'ui.toast.entryApproved' },
+          kind: 'success',
+          dismissAfter: 4000,
+        }),
+      );
+      dispatch(entryApproved(collectionName, slug));
+    } catch (error) {
+      dispatch(
+        notifSend({
+          message: { key: 'ui.toast.onFailToApproveEntry', details: error },
+          kind: 'danger',
+          dismissAfter: 8000,
+        }),
+      );
+      dispatch(entryApproveError(collectionName, slug));
+    }
+  };
+}
+
 export function unpublishPublishedEntry(collection: Collection, slug: string) {
   return (dispatch: ThunkDispatch<State, {}, AnyAction>, getState: () => State) => {
     const state = getState();

packages/netlify-cms-core/src/backend.ts

@@ -882,9 +882,13 @@ export class Backend {
         label: collection && selectFileEntryLabel(collection, slug),
         mediaFiles,
         updatedOn: entryData.updatedAt,
-        author: entryData.pullRequestAuthor,
+        author: entryData.pullRequestAuthor?.name || entryData.pullRequestAuthor?.login,
         status: entryData.status,
         meta: { path: prepareMetaPath(path, collection) },
+        supportsApprove: this.isGitBackend(),
+        canApprove: this.user?.login
+          ? this.user?.login !== entryData.pullRequestAuthor?.login
+          : false,
       });
 
       const entryWithFormat = this.entryWithFormat(collection)(entry);
@@ -1268,6 +1272,13 @@ export class Backend {
     await this.invokePostPublishEvent(entry);
   }
 
+  async approveEntry(entry: EntryMap) {
+    const collection = entry.get('collection');
+    const slug = entry.get('slug');
+
+    await this.implementation.approveEntry!(collection, slug);
+  }
+
   deleteUnpublishedEntry(collection: string, slug: string) {
     return this.implementation.deleteUnpublishedEntry!(collection, slug);
   }