feat(plugins/projects): add support for GitHub projects beta (#1178)

source/app/web/statics/embed/app.placeholder.js

@@ -715,6 +715,16 @@
                 name: faker.lorem.sentence(),
                 description: faker.lorem.paragraph(),
                 updated: `${2 + faker.datatype.number(8)} days ago`,
+                ...(faker.datatype.boolean() ? {
+                  items: new Array(faker.datatype.number(4)).fill(null).map(() => ({type: faker.helpers.arrayElement(["DRAFT_ISSUE", "ISSUE", "PULL_REQUEST", "REDACTED"]), text: faker.lorem.sentence()})),
+                  progress: {
+                    enabled: false,
+                    todo: NaN,
+                    doing: NaN,
+                    done: NaN,
+                    total: faker.datatype.number(100),
+                  }
+                } : {
                   progress: {
                     enabled: true,
                     todo: faker.datatype.number(50),
@@ -723,7 +733,8 @@
                     get total() {
                       return this.todo + this.doing + this.done
                     },
-                },
+                  }
+                }),
               })),
             },
           })

source/plugins/projects/index.mjs

@@ -15,7 +15,10 @@ export default async function({login, data, imports, graphql, q, queries, accoun
 
     //Retrieve user owned projects from graphql api
     console.debug(`metrics/compute/${login}/plugins > projects > querying api`)
-    const {[account]: {projects}} = await graphql(queries.projects.user({login, limit, account}))
+    const {[account]: {projects}} = await graphql(queries.projects["user.legacy"]({login, limit, account}))
+    const {[account]: {projectsV2}} = await graphql(queries.projects.user({login, limit, account}))
+    projects.nodes.unshift(...projectsV2.nodes)
+    projects.totalCount += projectsV2.totalCount
 
     //Retrieve repositories projects from graphql api
     for (const identifier of repositories) {
@@ -24,13 +27,23 @@ export default async function({login, data, imports, graphql, q, queries, accoun
       const {user, repository, id} = identifier.match(/(?<user>[-\w]+)[/](?<repository>[-\w]+)[/]projects[/](?<id>\d+)/)?.groups ?? {}
       let project = null
       for (const account of ["user", "organization"]) {
+        //Try projects beta
         try {
-          ;({project} = (await graphql(queries.projects.repository({user, repository, id, account})))[account].repository)
+          project = (await graphql(queries.projects.repository({user, repository, id, account})))[account].repository.projectV2
+          break
+        }
+        catch (error) {
+          //Try projects classic
+          console.debug(error)
+          try {
+            ;({project} = (await graphql(queries.projects["repository.legacy"]({user, repository, id, account})))[account].repository)
+            break
           }
           catch (error) {
             console.debug(error)
           }
         }
+      }
       if (!project)
         throw new Error(`Could not load project ${user}/${repository}`)
       //Adding it to projects list
@@ -52,9 +65,16 @@ export default async function({login, data, imports, graphql, q, queries, accoun
       else if (time < 30)
         updated = `${Math.floor(time)} day${time >= 2 ? "s" : ""} ago`
       //Format progress
-      const {enabled, todoCount: todo, inProgressCount: doing, doneCount: done} = project.progress
+      const {enabled = false, todoCount: todo = NaN, inProgressCount: doing = NaN, doneCount: done = NaN} = project.progress ?? {}
+      let total = todo + doing + done
+      //Format items (v2)
+      const items = []
+      if (project.items) {
+        items.push(...project.items.nodes.map(({type, fieldValues:{nodes:fields}}) => ({type, text:fields.filter(field => field.text).shift()?.text ?? ""})))
+        total = project.items.totalCount
+      }
       //Append
-      list.push({name: project.name, updated, description: project.body, progress: {enabled, todo, doing, done, total: todo + doing + done}})
+      list.push({name: project.name, updated, description: project.body, progress: {enabled, todo, doing, done, total}, items})
     }
 
     //Limit

source/plugins/projects/metadata.yml

@@ -2,8 +2,6 @@ name: 🗂️ GitHub projects
 category: github
 description: |
   This plugin displays progress of profile and repository projects.
-notes: |
-  > ℹ️ This plugin currently only supports [GitHub projects boards](https://docs.github.com/en/issues/organizing-your-work-with-project-boards/managing-project-boards/about-project-boards) and not [GitHub projects (beta)](https://docs.github.com/en/issues/trying-out-the-new-projects-experience/about-projects)
 examples:
   default: https://github.com/lowlighter/metrics/blob/examples/metrics.plugin.projects.svg
 index: 25
@@ -14,6 +12,7 @@ supports:
 scopes:
   - public_access
   - public_repo
+  - read:project
 inputs:
 
   plugin_projects:
@@ -37,6 +36,8 @@ inputs:
       Featured repositories projects
 
       Use the following syntax for each project `:user/:repo/projects/:project_id`
+
+      > ℹ️ [GitHub projects (beta)](https://docs.github.com/en/issues/trying-out-the-new-projects-experience/about-projects) needs to use the same syntax as above and repository must specified repository must be linked to given project.
     type: array
     example: username/repo/projects/1, username/repo/projects/2, ...
     format: comma-separated

source/plugins/projects/queries/repository.graphql

@@ -1,15 +1,23 @@
 query ProjectsRepository {
   $account(login: "$user") {
     repository(name: "$repository") {
-      project(number: $id) {
+      projectV2(number: $id) {
-        name
+        name: title
-        body
+        body: shortDescription
         updatedAt
-        progress {
+        items(first: 4, orderBy: {field: POSITION, direction: ASC}) {
-          doneCount
+          totalCount
-          inProgressCount
+          nodes {
-          todoCount
+            type
-          enabled
+            isArchived
+            fieldValues(last: 100) {
+              nodes {
+                ... on ProjectV2ItemFieldTextValue {
+                  text
+                }
+              }
+            }
+          }
         }
       }
     }

source/plugins/projects/queries/repository.legacy.graphql

@@ -0,0 +1,17 @@
+query ProjectsRepositoryLegacy {
+  $account(login: "$user") {
+    repository(name: "$repository") {
+      project(number: $id) {
+        name
+        body
+        updatedAt
+        progress {
+          doneCount
+          inProgressCount
+          todoCount
+          enabled
+        }
+      }
+    }
+  }
+}

source/plugins/projects/queries/user.graphql

@@ -1,16 +1,24 @@
 query ProjectsUser {
   $account(login: "$login") {
-    projects(last: $limit, states: OPEN, orderBy: {field: UPDATED_AT, direction: DESC}) {
+    projectsV2(last: $limit, orderBy: {field: UPDATED_AT, direction: DESC}) {
       totalCount
       nodes {
-        name
+        name: title
-        body
+        body: shortDescription
         updatedAt
-        progress {
+        items(first: 4, orderBy: {field: POSITION, direction: ASC}) {
-          doneCount
+          totalCount
-          inProgressCount
+          nodes {
-          todoCount
+            type
-          enabled
+            isArchived
+            fieldValues(last: 100) {
+              nodes {
+                ... on ProjectV2ItemFieldTextValue {
+                  text
+                }
+              }
+            }
+          }
         }
       }
     }

source/plugins/projects/queries/user.legacy.graphql

@@ -0,0 +1,18 @@
+query ProjectsUserLegacy {
+  $account(login: "$login") {
+    projects(last: $limit, states: OPEN, orderBy: {field: UPDATED_AT, direction: DESC}) {
+      totalCount
+      nodes {
+        name
+        body
+        updatedAt
+        progress {
+          doneCount
+          inProgressCount
+          todoCount
+          enabled
+        }
+      }
+    }
+  }
+}

source/templates/classic/partials/projects.ejs

@@ -14,7 +14,7 @@
         </section>
       <% } else { %>
         <section class="project">
-          <% for (const {name, updated, progress, description = ""} of plugins.projects.list) { %>
+          <% for (const {name, updated, progress, items = [], description = ""} of plugins.projects.list) { %>
             <div class="row fill-width">
               <section>
                 <div class="field">
@@ -60,6 +60,28 @@
                 </svg>
               </div>
             <% } %>
+            <% if (items.length) { %>
+              <div class="items">
+              <% for (const {type, text} of items) { %>
+                <div class="row fill-width">
+                  <section>
+                    <div class="field">
+                      <% if (type === "DRAFT_ISSUE") { %>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.749.097a8.054 8.054 0 012.502 0 .75.75 0 11-.233 1.482 6.554 6.554 0 00-2.036 0A.75.75 0 016.749.097zM4.345 1.693A.75.75 0 014.18 2.74a6.542 6.542 0 00-1.44 1.44.75.75 0 01-1.212-.883 8.042 8.042 0 011.769-1.77.75.75 0 011.048.166zm7.31 0a.75.75 0 011.048-.165 8.04 8.04 0 011.77 1.769.75.75 0 11-1.214.883 6.542 6.542 0 00-1.439-1.44.75.75 0 01-.165-1.047zM.955 6.125a.75.75 0 01.624.857 6.554 6.554 0 000 2.036.75.75 0 01-1.482.233 8.054 8.054 0 010-2.502.75.75 0 01.858-.624zm14.09 0a.75.75 0 01.858.624 8.057 8.057 0 010 2.502.75.75 0 01-1.482-.233 6.55 6.55 0 000-2.036.75.75 0 01.624-.857zm-13.352 5.53a.75.75 0 011.048.165 6.542 6.542 0 001.439 1.44.75.75 0 01-.883 1.212 8.04 8.04 0 01-1.77-1.769.75.75 0 01.166-1.048zm12.614 0a.75.75 0 01.165 1.048 8.038 8.038 0 01-1.769 1.77.75.75 0 11-.883-1.214 6.543 6.543 0 001.44-1.439.75.75 0 011.047-.165zm-8.182 3.39a.75.75 0 01.857-.624 6.55 6.55 0 002.036 0 .75.75 0 01.233 1.482 8.057 8.057 0 01-2.502 0 .75.75 0 01-.624-.858z"></path></svg>
+                      <% } else if (type === "ISSUE") { %>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path></svg>
+                      <% } else if (type === "ISSUE") { %>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
+                      <% } else { %>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4 5.75C4 4.784 4.784 4 5.75 4h4.5c.966 0 1.75.784 1.75 1.75v4.5A1.75 1.75 0 0110.25 12h-4.5A1.75 1.75 0 014 10.25v-4.5zm1.75-.25a.25.25 0 00-.25.25v4.5c0 .138.112.25.25.25h4.5a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-4.5z"></path></svg>
+                      <% } %>
+                      <%= text %>
+                    </div>
+                  </section>
+                </div>
+              <% } %>
+              </div>
+            <% } %>
           <% } %>
         </section>
       <% } %>

source/templates/classic/style.css

@@ -918,6 +918,9 @@
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
   }
+  .project .items, .project-items {
+    padding-left: 11px;
+  }
 
 /* Star lists */
   .starlist {

source/templates/repository/partials/projects.ejs

@@ -14,7 +14,7 @@
         </section>
       <% } else { %>
         <section>
-          <% for (const {name, updated, progress} of plugins.projects.list) { %>
+          <% for (const {name, updated, progress, items = []} of plugins.projects.list) { %>
             <div class="row fill-width">
               <section>
                 <div class="field">
@@ -51,6 +51,28 @@
                 </svg>
               </div>
             <% } %>
+            <% if (items.length) { %>
+              <div class="project-items">
+              <% for (const {type, text} of items) { %>
+                <div class="row fill-width">
+                  <section>
+                    <div class="field">
+                      <% if (type === "DRAFT_ISSUE") { %>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.749.097a8.054 8.054 0 012.502 0 .75.75 0 11-.233 1.482 6.554 6.554 0 00-2.036 0A.75.75 0 016.749.097zM4.345 1.693A.75.75 0 014.18 2.74a6.542 6.542 0 00-1.44 1.44.75.75 0 01-1.212-.883 8.042 8.042 0 011.769-1.77.75.75 0 011.048.166zm7.31 0a.75.75 0 011.048-.165 8.04 8.04 0 011.77 1.769.75.75 0 11-1.214.883 6.542 6.542 0 00-1.439-1.44.75.75 0 01-.165-1.047zM.955 6.125a.75.75 0 01.624.857 6.554 6.554 0 000 2.036.75.75 0 01-1.482.233 8.054 8.054 0 010-2.502.75.75 0 01.858-.624zm14.09 0a.75.75 0 01.858.624 8.057 8.057 0 010 2.502.75.75 0 01-1.482-.233 6.55 6.55 0 000-2.036.75.75 0 01.624-.857zm-13.352 5.53a.75.75 0 011.048.165 6.542 6.542 0 001.439 1.44.75.75 0 01-.883 1.212 8.04 8.04 0 01-1.77-1.769.75.75 0 01.166-1.048zm12.614 0a.75.75 0 01.165 1.048 8.038 8.038 0 01-1.769 1.77.75.75 0 11-.883-1.214 6.543 6.543 0 001.44-1.439.75.75 0 011.047-.165zm-8.182 3.39a.75.75 0 01.857-.624 6.55 6.55 0 002.036 0 .75.75 0 01.233 1.482 8.057 8.057 0 01-2.502 0 .75.75 0 01-.624-.858z"></path></svg>
+                      <% } else if (type === "ISSUE") { %>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path></svg>
+                      <% } else if (type === "ISSUE") { %>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
+                      <% } else { %>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4 5.75C4 4.784 4.784 4 5.75 4h4.5c.966 0 1.75.784 1.75 1.75v4.5A1.75 1.75 0 0110.25 12h-4.5A1.75 1.75 0 014 10.25v-4.5zm1.75-.25a.25.25 0 00-.25.25v4.5c0 .138.112.25.25.25h4.5a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-4.5z"></path></svg>
+                      <% } %>
+                      <%= text %>
+                    </div>
+                  </section>
+                </div>
+              <% } %>
+              </div>
+            <% } %>
           <% } %>
         </section>
       <% } %>

tests/mocks/api/github/graphql/projects.repository.legacy.mjs

@@ -0,0 +1,21 @@
+/**Mocked data */
+export default function({faker, query, login = faker.internet.userName()}) {
+  console.debug("metrics/compute/mocks > mocking graphql api result > projects/repository.legacy")
+  return ({
+    user: {
+      repository: {
+        project: {
+          name: "Repository project example",
+          updatedAt: `${faker.date.recent()}`,
+          body: faker.lorem.paragraph(),
+          progress: {
+            doneCount: faker.datatype.number(10),
+            inProgressCount: faker.datatype.number(10),
+            todoCount: faker.datatype.number(10),
+            enabled: true,
+          },
+        },
+      },
+    },
+  })
+}

tests/mocks/api/github/graphql/projects.repository.mjs

@@ -4,16 +4,16 @@ export default function({faker, query, login = faker.internet.userName()}) {
   return ({
     user: {
       repository: {
-        project: {
+        projectV2: {
           name: "Repository project example",
           updatedAt: `${faker.date.recent()}`,
           body: faker.lorem.paragraph(),
-          progress: {
+          items: {
-            doneCount: faker.datatype.number(10),
+            get totalCount() {
-            inProgressCount: faker.datatype.number(10),
+              return this.nodes.length
-            todoCount: faker.datatype.number(10),
-            enabled: true,
             },
+            nodes: new Array(faker.datatype.number(10)).fill(null).map(() => ({type: faker.helpers.arrayElement(["DRAFT_ISSUE", "ISSUE", "PULL_REQUEST", "REDACTED"]), fieldValues: { nodes: [ { text: faker.lorem.sentence() } ] }}))
+          }
         },
       },
     },

tests/mocks/api/github/graphql/projects.user.legacy.mjs

@@ -0,0 +1,24 @@
+/**Mocked data */
+export default function({faker, query, login = faker.internet.userName()}) {
+  console.debug("metrics/compute/mocks > mocking graphql api result > projects/user.legacy")
+  return ({
+    user: {
+      projects: {
+        totalCount: 1,
+        nodes: [
+          {
+            name: "User-owned project",
+            updatedAt: `${faker.date.recent()}`,
+            body: faker.lorem.paragraph(),
+            progress: {
+              doneCount: faker.datatype.number(10),
+              inProgressCount: faker.datatype.number(10),
+              todoCount: faker.datatype.number(10),
+              enabled: true,
+            },
+          },
+        ],
+      },
+    },
+  })
+}

tests/mocks/api/github/graphql/projects.user.mjs

@@ -3,19 +3,19 @@ export default function({faker, query, login = faker.internet.userName()}) {
   console.debug("metrics/compute/mocks > mocking graphql api result > projects/user")
   return ({
     user: {
-      projects: {
+      projectsV2: {
         totalCount: 1,
         nodes: [
           {
             name: "User-owned project",
             updatedAt: `${faker.date.recent()}`,
             body: faker.lorem.paragraph(),
-            progress: {
+            items: {
-              doneCount: faker.datatype.number(10),
+              get totalCount() {
-              inProgressCount: faker.datatype.number(10),
+                return this.nodes.length
-              todoCount: faker.datatype.number(10),
-              enabled: true,
               },
+              nodes: new Array(faker.datatype.number(10)).fill(null).map(() => ({type: faker.helpers.arrayElement(["DRAFT_ISSUE", "ISSUE", "PULL_REQUEST", "REDACTED"]), fieldValues: { nodes: [ { text: faker.lorem.sentence() } ] }}))
+            }
           },
         ],
       },