Merge pull request #31 from aha-develop/ADT-211-refactor-inline-with-other-exts

ADT-211 + DEVELOP-1305-2: Refactor github extension and empty state

Author: jemmyw

.gitignore

@@ -1,2 +1,5 @@
 /node_modules
 .aha-cache
+
+# Ignore build files in the repo root
+./*.gz

jest.config.cjs

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

package.json

@@ -9,7 +9,10 @@
   },
   "dependencies": {
     "@aha-app/aha-develop-react": "^1.0.0",
+    "@octokit/graphql": "^5.0.0",
+    "@octokit/webhooks-types": "^6.3.2",
     "gql-tag": "^1.0.1",
+    "inflected": "^2.1.0",
     "prettier": "^2.6.2"
   },
   "type": "module",
@@ -35,7 +38,7 @@
         "links": {
           "title": "GitHub",
           "host": "attribute",
-          "entryPoint": "src/views/attribute.js",
+          "entryPoint": "src/views/attribute.tsx",
           "recordTypes": [
             "Feature",
             "Epic",
@@ -45,7 +48,7 @@
         "prs": {
           "title": "My Pull Requests",
           "host": "page",
-          "entryPoint": "src/views/prsPage.js",
+          "entryPoint": "src/views/prsPage.tsx",
           "location": {
             "menu": "Work"
           }
@@ -59,7 +62,7 @@
       "commands": {
         "sync": {
           "title": "Sync pull requests",
-          "entryPoint": "src/commands/sync.js",
+          "entryPoint": "src/commands/sync.ts",
           "commandType": "recordAction",
           "recordTypes": [
             "Epic",
@@ -69,7 +72,7 @@
         },
         "addLink": {
           "title": "Link pull request to record",
-          "entryPoint": "src/commands/addLink.js",
+          "entryPoint": "src/commands/addLink.ts",
           "commandType": "recordAction",
           "recordTypes": [
             "Epic",
@@ -79,7 +82,7 @@
         },
         "removeLinks": {
           "title": "Remove linked pull requests from record",
-          "entryPoint": "src/commands/removeLinks.js",
+          "entryPoint": "src/commands/removeLinks.ts",
           "commandType": "recordAction",
           "recordTypes": [
             "Epic",
@@ -121,7 +124,12 @@
     }
   },
   "devDependencies": {
+    "@types/inflected": "^1.1.29",
+    "@types/jest": "^28.1.8",
     "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3"
+    "@types/react-dom": "^17.0.3",
+    "jest": "^28.1.3",
+    "ts-jest": "^28.0.8",
+    "typescript": "^4.7.4"
   }
 }

src/commands/addLink.js

@@ -0,0 +1,26 @@
+import { updatePullRequestLinkOnRecord } from "@lib/fields";
+import { withGitHubApi } from "@lib/github/api";
+import { getPrByUrl } from "@lib/github/getPr";
+import { LinkableRecord } from "@lib/linkableRecord";
+import { validPrUrl } from "@lib/validPrUrl";
+
+const AddLink: Aha.CommandExtension<{ record: LinkableRecord }> = async ({
+  record,
+}) => {
+  if (!record) return;
+
+  const prUrl = await aha.commandPrompt("Link URL", {
+    placeholder: "Enter the URL to a pull request",
+  });
+
+  if (!validPrUrl(prUrl)) {
+    throw new Error("Please enter a valid pull request URL");
+  }
+
+  await withGitHubApi(async (api) => {
+    const pullRequest = await getPrByUrl(api, prUrl);
+    await updatePullRequestLinkOnRecord(pullRequest, record);
+  });
+};
+
+aha.on("addLink", AddLink);

src/commands/addLink.ts

@@ -1,4 +1,4 @@
-import { unlinkBranches, unlinkPullRequests } from "../lib/fields";
+import { unlinkBranches, unlinkPullRequests } from "@lib/fields";
 
 aha.on("removeLinks", async ({ record }) => {
   await unlinkPullRequests(record);

src/commands/removeLinks.js src/commands/removeLinks.tssrc/commands/removeLinks.js renamed to src/commands/removeLinks.ts

@@ -1,16 +1,20 @@
-import { linkBranch, linkPullRequest } from "../lib/fields";
-import { withGitHubApi } from "../lib/github/api";
-import GithubSearchQuery from "../lib/github/GithubSearchQuery";
-import { searchForPr } from "../lib/github/searchForPr";
+import { linkBranch, getOrLinkPullRequestRecord } from "@lib/fields";
+import { withGitHubApi } from "@lib/github/api";
+import GithubSearchQuery from "@lib/github/GithubSearchQuery";
+import { searchForPr } from "@lib/github/searchForPr";
+import { LinkableRecord } from "@lib/linkableRecord";
 
-aha.on("sync", ({ record }, { settings }) => {
+const SyncCommand: Aha.CommandExtension<{ record: LinkableRecord }> = (
+  { record },
+  { settings }
+) => {
   if (!record) {
     aha.commandOutput("Open a record first to sync PRs for that record");
     return;
   }
   console.log(`Syncing PRs for ${record.referenceNum}`);
   /** @type {string[]} */
-  const repos = settings.repos;
+  const repos = settings.repos as string[];
 
   if (!repos || repos.length === 0) {
     throw new Error(
@@ -28,14 +32,23 @@ aha.on("sync", ({ record }, { settings }) => {
   withGitHubApi(async (api) => {
     const search = await searchForPr(api, { query });
 
+    if (search.edges.length === 0) {
+      aha.commandOutput(
+        `No pull requests found with ${record.referenceNum} in the title`
+      );
+      return;
+    }
+
     for (let prNode of search.edges) {
       const pr = prNode.node;
 
-      await linkPullRequest(pr);
+      await getOrLinkPullRequestRecord(pr);
 
       if (pr.headRef) {
         await linkBranch(pr.headRef.name, pr.repository.url);
       }
     }
   });
-});
+};
+
+aha.on("sync", SyncCommand);

src/commands/sync.js src/commands/sync.tssrc/commands/sync.js renamed to src/commands/sync.ts

@@ -5,7 +5,7 @@ import { Styles } from "./Styles";
 /**
  * Set up the styles and auth provider
  */
-export const ExtensionRoot = ({ children }) => {
+export const ExtensionRoot: React.FC = ({ children }) => {
   return (
     <>
       <Styles />

src/components/ExtensionRoot.js src/components/ExtensionRoot.tsxsrc/components/ExtensionRoot.js renamed to src/components/ExtensionRoot.tsx

@@ -1,24 +1,19 @@
 import React from "react";
 
-/**
- * @param {string} urlString
- */
-function isValidExternalLink(urlString) {
+function isValidExternalLink(urlString: string) {
   try {
     const url = new URL(urlString);
     return url.protocol === "https:";
   } catch (e) {
     return false;
   }
-};
+}
 
 /**
  * Ensures that Github target _blank links have the required noopener noreferrer properties
  * and that they point to Github. Use like a normal <a> tag
- *
- * @type {React.FC<{href: string}>}
  */
-export const ExternalLink = (props) => {
+export const ExternalLink: React.FC<{ href: string }> = (props) => {
   if (isValidExternalLink(props.href)) {
     return (
       <a {...props} target="_blank" rel="noopener noreferrer">

src/components/ExternalLink.js src/components/ExternalLink.tsxsrc/components/ExternalLink.js renamed to src/components/ExternalLink.tsx

@@ -2,10 +2,8 @@ import React from "react";
 
 /**
  * Display the pull request labels as pills with the correct colors
- *
- * @type {React.FC<{pr: Github.PrWithLabels}>}
  */
-export const PrLabels = ({ pr }) => {
+export const PrLabels: React.FC<{ pr: Github.PrWithLabels }> = ({ pr }) => {
   const labels = pr.labels.nodes.map(({ name, color }, idx) => (
     <span key={idx} className="pr-label">
       <aha-pill color={"#" + color}>{name}</aha-pill>