Accelerate Github code reviews with Zoho Cliq Platform's link handlers

Accelerate Github code reviews with Zoho Cliq Platform's link handlers



Code reviews are critical, and they can get buried in conversations or lost when using multiple tools. With the Cliq Platform's link handlers, let's transform shared Github pull request links into interactive, real-time code reviews on channels. Share PR links in any reviewer groups or channels to get approval or receive review comments instantly.

Pre-requisites:

  • Connection creation :

  • Creation of form function

    • To create a form function, navigate to Bots & Tools and select "Functions."

    • On the right side, click "Create Function" and name it "addCommentPullRequest."

    • Set the Function Type to "Form." The purpose of this function will be explained in Step 4.

Step 1: Create an extension and add a link handler

  • After successfully logging into Cliq, hover over the top right corner and click on your profile. Then navigate to Bots & Tools > My Extensions.
  • On the right side, click the Create Extension button.
  • To learn more about extensions and their purposes, refer to the Introduction to Extensions.
  • Create an extension using your preferred name. Please specify the following details: the extension name, a description (to help users understand the extension's purpose), and an image to identify it.
  • Under the link handlers section, enter github.com to configure the extension to preview links for that domain.
  • Bundle the newly created form function - addCommentPullRequest, as it is mandatory to include at least one component to an extension, and then click Create.

 

Step 2: Configuring the preview handler

  • After creating an extension, a popup will appear that provides an overview, which includes information about the extension. It will also list the connectors, showing the components bundled with the extension and their associated app keys.
  • Additionally, handlers will allow you to configure access, customize settings, and manage links within the extension.
  • Navigate to handlers, scroll down, and under link handlers, hover over to preview handler.

  • The Preview Handler expands a rich response when a URL is shared in a conversation. Click edit code and copy and paste the script below.
Script
  1. pullRequest_url = url;
  2. owner = pullRequest_url.getSuffix(".com/").getPrefix("/");
  3. pullRequest_ID = pullRequest_url.substring(pullRequest_url.lastIndexOf("/pull/") + 6);
  4. repositoryName = pullRequest_url.substring(pullRequest_url.indexOf("github.com/") + 11,pullRequest_url.lastIndexOf("/pull/"));
  5. // Fetch PR details from GitHub API
  6. getPRDetails = invokeurl
  7. [
  8. url :"https://api.github.com/repos/" + repositoryName + "/pulls/" + pullRequest_ID
  9. type :GET
  10. connection:"githubforcliq"
  11. ];
  12. // Parse API response
  13. pr_title = getPRDetails.get("title");
  14. pr_author = getPRDetails.get("user").get("login");
  15. changed_files = getPRDetails.get("changed_files");
  16. arguments = Map();
  17. arguments.put("pullRequest_ID",pullRequest_ID);
  18. arguments.put("repositoryName",repositoryName);
  19. arguments.put("owner",owner);
  20. arguments.put("pr_title",pr_title);
  21. arguments.put("pr_author",pr_author);
  22. arguments.put("changed_files",changed_files);
  23. // Build preview response
  24. response = {"title":"Pull Request -" + pr_title,"type":"link","provider_url":pullRequest_url,"faviconlink":"https://zoho.com/sites/default/files/cliq/images/githubmark.png","thumbnail_url":"https://zoho.com/sites/default/files/cliq/images/githubmark.png","fields":{"data":{{"label":"Author","value":pr_author},{"label":"Files Changed","value":changed_files}}},"actions":{{"hint":"Approve a pull request instantly","style":"+","label":"Approve","type":"button","params":arguments},{"hint":"Add review comments to the pull request","label":"Add a comment","type":"button","params":arguments}}};
  25. return response;

Step 3: Configuring the action handler

  • We have refined the response of the pull request URL when it is shared in a Cliq conversation. Now, we need to define the actions to be performed when the buttons in the unfurled response are clicked.
  • This can be configured in the action handler. To locate it, navigate to the extension handlers. Scroll down to find the link handlers section, then hover over to the action handler.
  • The action handler executes actions when the buttons in the unfurled card are clicked. Click "Edit Code" and copy and paste the script below.
Script
  1. label = target.get("label");
  2. pullRequest_ID = target.get("params").get("pullRequest_ID");
  3. repositoryName = target.get("params").get("repositoryName");
  4. owner = target.get("params").get("owner");
  5. response = Map();
  6. if(label.equals("Approve"))
  7. {
  8. params = Map();
  9. params.put("event","APPROVE");
  10. headers = Map();
  11. headers.put("Content-Type","application/json");
  12. approvePullRequest = invokeurl
  13. [
  14. url :"https://api.github.com/repos/" + owner + "/" + repositoryName.getSuffix("/") + "/pulls/" + pullRequest_ID + "/reviews"
  15. type :POST
  16. parameters:params + ""
  17. headers:headers
  18. detailed:true
  19. connection:"githubforcliq"
  20. ];
  21. info approvePullRequest;
  22. responseCode = approvePullRequest.get("responseCode");
  23. if(responseCode == 200)
  24. {
  25. pull_request_url = approvePullRequest.get("responseText").get("pull_request_url");
  26. pr_title = target.get("params").get("pr_title");
  27. pr_author = target.get("params").get("pr_author");
  28. changed_files = target.get("params").get("changed_files");
  29. response = {"card":{"title":"✅ Pull Request Approved","theme":"modern-inline"},"buttons":{{"label":"View Pull Request","hint":"","type":"+","action":{"type":"open.url","data":{"web":pull_request_url}}}},"text":"*Pull Request* :" + pr_title + "\n*Author* : " + pr_author + "\n*Files changed*:" + changed_files};
  30. return response;
  31. }
  32. else
  33. {
  34. banner = {"text":"Pull request approval failed!","status":"failure","type":"banner"};
  35. return banner;
  36. }
  37. }
  38. else
  39. {
  40. return {"type":"form","title":"Add Review Comment","name":"addComment","button_label":"Add","inputs":{{"label":"Review Comment","name":"comment","placeholder":"Leave a note for the author or your team","min_length":"0","max_length":"500","mandatory":true,"type":"textarea"},{"name":"pullRequest_ID","value":pullRequest_ID,"type":"hidden"},{"name":"repositoryName","value":repositoryName,"type":"hidden"},{"name":"owner","value":owner,"type":"hidden"}},"action":{"type":"invoke.function","name":"addCommentPullRequest"}};
  41. }
  42. return Map();
 

Step 4: Handling the form submit handler to add comments to a pull request

  • When clicking the "Add a comment" button, a form will be triggered to allow users to add comments in the specified multi-line input text field. This form should be submitted using the form functions in Cliq.
  • To create this function, navigate to Bots & Tools > Functions. On the right side, click "Create Function" and name the function "addCommentPullRequest." Choose the Function Type as "Form."
  • After that, click "Save & Edit Code" and paste the script provided below. 
Script : addCommentPullRequest - Form Submit Handler
  1. response = Map();
  2. formValues = form.get("values");
  3. pullRequest_ID = formValues.get("pullRequest_ID");
  4. repositoryName = formValues.get("repositoryName");
  5. owner = formValues.get("owner");
  6. comment = formValues.get("comment");
  7. params = Map();
  8. params.put("body",comment);
  9. params.put("event","COMMENT");
  10. headers = Map();
  11. headers.put("Content-Type","application/json");
  12. addComment = invokeurl
  13. [
  14. url :"https://api.github.com/repos/" + owner + "/" + repositoryName.getSuffix("/") + "/pulls/" + pullRequest_ID + "/reviews"
  15. type :POST
  16. parameters:params + ""
  17. headers:headers
  18. detailed:true
  19. connection:"githubforcliq"
  20. ];
  21. info addComment;
  22. responseCode = addComment.get("responseCode");
  23. if(responseCode == 200)
  24. {
  25. banner = {"text":"Comment added to the pull request","status":"success","type":"banner"};
  26. return banner;
  27. }
  28. else
  29. {
  30. banner = {"text":"Unable to add review comments!","status":"failure","type":"banner"};
  31. return banner;
  32. }
  33. return Map(); 

Note :

You need to configure the app link to get a rich, unfurled response for the GitHub PR links posted in any chat. Refer to the link below to configure the unfurl link in Zoho Cliq.

🔄 Workflow explanation  

With this custom solution, GitHub Pull Requests can be shared instantly in any chat, group, or channel to get them reviewed by designated reviewers or top collaborators of the repository.
 

💼 Business benefits  

  • Faster review cycles – Reduces turnaround time by bringing PRs directly into team conversations.
  • Improved code quality – Promotes timely feedback from key collaborators and senior reviewers.
  • Increased developer visibility – Ensures pull requests don’t go unnoticed or remain idle.
  • Streamlined collaboration – Centralizes communication around code changes, reducing context-switching. 
No more gaps between the coding lifecycle and collaboration. Implementing rich previews for GitHub pull requests speeds up the development process, leading to better visibility, quicker feedback, and more substantial code ownership.

We're here to help, so don't hesitate to reach out to support@zohocliq.com with any questions or if you need assistance in crafting even more tailored workflows.