feat(commits): commit and task list.

codegen.yml

@@ -7,6 +7,6 @@ generates:
       - "typescript"
       - "typescript-operations"
       - "typescript-react-apollo"
-  ./graphql.schema.json:
+  src/generated/graphql.schema.json:
     plugins:
       - "introspection"

package-lock.json

@@ -12,6 +12,9 @@
         "@curi/react-dom": "^2.0.4",
         "@curi/router": "^2.1.2",
         "@date-io/date-fns": "^1.3.13",
+        "@fortawesome/fontawesome-svg-core": "^1.2.35",
+        "@fortawesome/free-solid-svg-icons": "^5.15.3",
+        "@fortawesome/react-fontawesome": "^0.1.14",
         "@hickory/browser": "^2.1.0",
         "@material-ui/core": "^4.11.3",
         "@material-ui/icons": "^4.11.2",
@@ -24,12 +27,14 @@
         "@types/node": "^12.20.10",
         "@types/react": "^17.0.3",
         "@types/react-dom": "^17.0.3",
+        "apollo-link-scalars": "^2.1.3",
         "date-fns": "^2.21.1",
         "fontsource-roboto": "^4.0.0",
         "formik": "^2.2.6",
         "formik-material-ui": "^3.0.1",
         "formik-material-ui-pickers": "^0.0.12",
         "graphql": "^15.5.0",
+        "graphql-scalars": "^1.9.3",
         "material-ui-confirm": "^2.1.2",
         "notistack": "^1.0.6",
         "ramda": "^0.27.1",
@@ -2159,6 +2164,51 @@
         "node": ">=8"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "0.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+      "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
+      "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.32",
+        "react": ">=16.x"
+      }
+    },
     "node_modules/@graphql-codegen/cli": {
       "version": "1.21.3",
       "resolved": "https://registry.npmjs.org/@graphql-codegen/cli/-/cli-1.21.3.tgz",
@@ -5011,6 +5061,35 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apollo-link-scalars": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/apollo-link-scalars/-/apollo-link-scalars-2.1.3.tgz",
+      "integrity": "sha512-yniDMwmRcNcJW2uH8Z10Pj7AaPgysgIlL5stqkabPMnUShHqFIB/4VqQueNQoHBlh5T7sd/5hbqZ1mtWUDel1Q==",
+      "dependencies": {
+        "@apollo/client": "^3.0.2",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.every": "^4.6.0",
+        "lodash.flatmap": "^4.5.0",
+        "lodash.frompairs": "^4.0.1",
+        "lodash.has": "^4.5.2",
+        "lodash.isnull": "^3.0.0",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isstring": "^4.0.1",
+        "lodash.isundefined": "^3.0.1",
+        "lodash.mapvalues": "^4.6.0",
+        "lodash.omit": "^4.5.0",
+        "lodash.pickby": "^4.6.0",
+        "lodash.reduce": "^4.6.0",
+        "lodash.uniqby": "^4.7.0",
+        "zen-observable-ts": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "peerDependencies": {
+        "graphql": "14.x || 15.x"
+      }
+    },
     "node_modules/aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -11235,6 +11314,25 @@
         "node": ">= 6"
       }
     },
+    "node_modules/graphql-scalars": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.9.3.tgz",
+      "integrity": "sha512-vP71Og4ALfe3PCk6T+B7LcJHH55gL0tYidmAE/kWT3ScE2FUCFS7iiMXFQXjCaYLi8nZcRLn9HuejGcjZ8kRug==",
+      "dependencies": {
+        "tslib": "~2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
+    "node_modules/graphql-scalars/node_modules/tslib": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+      "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+    },
     "node_modules/graphql-tag": {
       "version": "2.12.4",
       "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.4.tgz",
@@ -14743,17 +14841,37 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "node_modules/lodash.every": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.every/-/lodash.every-4.6.0.tgz",
+      "integrity": "sha1-64mYS+vENkJ5uzrvu9HKGb+mxqc="
+    },
+    "node_modules/lodash.flatmap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatmap/-/lodash.flatmap-4.5.0.tgz",
+      "integrity": "sha1-74y/QI9uSCaGYzRTBcaswLd4cC4="
+    },
     "node_modules/lodash.flatten": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
       "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8="
     },
+    "node_modules/lodash.frompairs": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz",
+      "integrity": "sha1-vE5SB/onV8E25XNhTpZkUGsrG9I="
+    },
     "node_modules/lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
       "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
       "dev": true
     },
+    "node_modules/lodash.has": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz",
+      "integrity": "sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI="
+    },
     "node_modules/lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -14772,11 +14890,15 @@
       "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=",
       "dev": true
     },
+    "node_modules/lodash.isnull": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.isnull/-/lodash.isnull-3.0.0.tgz",
+      "integrity": "sha1-+vvlnqHcon7teGU0A53YTC4HxW4="
+    },
     "node_modules/lodash.isnumber": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=",
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
-      "dev": true
     },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
@@ -14787,20 +14909,44 @@
     "node_modules/lodash.isstring": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=",
+      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
-      "dev": true
+    },
+    "node_modules/lodash.isundefined": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz",
+      "integrity": "sha1-I+89lTVWUgOmbO/VuDD4SJEa+0g="
+    },
+    "node_modules/lodash.mapvalues": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
+      "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw="
     },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "node_modules/lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
+    },
     "node_modules/lodash.once": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
       "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=",
       "dev": true
     },
+    "node_modules/lodash.pickby": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.pickby/-/lodash.pickby-4.6.0.tgz",
+      "integrity": "sha1-feoh2MGNdwOifHBMFdO4SmfjOv8="
+    },
+    "node_modules/lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
+    },
     "node_modules/lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -14828,6 +14974,11 @@
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
     },
+    "node_modules/lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI="
+    },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -25052,6 +25203,15 @@
       "version": "0.8.15",
       "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
       "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "node_modules/zen-observable-ts": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.0.0.tgz",
+      "integrity": "sha512-KmWcbz+9kKUeAQ8btY8m1SsEFgBcp7h/Uf3V5quhan7ZWdjGsf0JcGLULQiwOZibbFWnHkYq8Nn2AZbJabovQg==",
+      "dependencies": {
+        "@types/zen-observable": "^0.8.2",
+        "zen-observable": "^0.8.15"
+      }
     }
   },
   "dependencies": {
@@ -26804,6 +26964,35 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+      "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
+      "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@graphql-codegen/cli": {
       "version": "1.21.3",
       "resolved": "https://registry.npmjs.org/@graphql-codegen/cli/-/cli-1.21.3.tgz",
@@ -29116,6 +29305,29 @@
         "picomatch": "^2.0.4"
       }
     },
+    "apollo-link-scalars": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/apollo-link-scalars/-/apollo-link-scalars-2.1.3.tgz",
+      "integrity": "sha512-yniDMwmRcNcJW2uH8Z10Pj7AaPgysgIlL5stqkabPMnUShHqFIB/4VqQueNQoHBlh5T7sd/5hbqZ1mtWUDel1Q==",
+      "requires": {
+        "@apollo/client": "^3.0.2",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.every": "^4.6.0",
+        "lodash.flatmap": "^4.5.0",
+        "lodash.frompairs": "^4.0.1",
+        "lodash.has": "^4.5.2",
+        "lodash.isnull": "^3.0.0",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isstring": "^4.0.1",
+        "lodash.isundefined": "^3.0.1",
+        "lodash.mapvalues": "^4.6.0",
+        "lodash.omit": "^4.5.0",
+        "lodash.pickby": "^4.6.0",
+        "lodash.reduce": "^4.6.0",
+        "lodash.uniqby": "^4.7.0",
+        "zen-observable-ts": "^1.0.0"
+      }
+    },
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -34122,6 +34334,21 @@
         }
       }
     },
+    "graphql-scalars": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/graphql-scalars/-/graphql-scalars-1.9.3.tgz",
+      "integrity": "sha512-vP71Og4ALfe3PCk6T+B7LcJHH55gL0tYidmAE/kWT3ScE2FUCFS7iiMXFQXjCaYLi8nZcRLn9HuejGcjZ8kRug==",
+      "requires": {
+        "tslib": "~2.2.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
     "graphql-tag": {
       "version": "2.12.4",
       "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.4.tgz",
@@ -36896,17 +37123,37 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "lodash.every": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.every/-/lodash.every-4.6.0.tgz",
+      "integrity": "sha1-64mYS+vENkJ5uzrvu9HKGb+mxqc="
+    },
+    "lodash.flatmap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatmap/-/lodash.flatmap-4.5.0.tgz",
+      "integrity": "sha1-74y/QI9uSCaGYzRTBcaswLd4cC4="
+    },
     "lodash.flatten": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
       "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8="
     },
+    "lodash.frompairs": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz",
+      "integrity": "sha1-vE5SB/onV8E25XNhTpZkUGsrG9I="
+    },
     "lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
       "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
       "dev": true
     },
+    "lodash.has": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz",
+      "integrity": "sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI="
+    },
     "lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -36925,11 +37172,15 @@
       "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=",
       "dev": true
     },
+    "lodash.isnull": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.isnull/-/lodash.isnull-3.0.0.tgz",
+      "integrity": "sha1-+vvlnqHcon7teGU0A53YTC4HxW4="
+    },
     "lodash.isnumber": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=",
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
-      "dev": true
     },
     "lodash.isplainobject": {
       "version": "4.0.6",
@@ -36940,20 +37191,44 @@
     "lodash.isstring": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=",
+      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
-      "dev": true
+    },
+    "lodash.isundefined": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz",
+      "integrity": "sha1-I+89lTVWUgOmbO/VuDD4SJEa+0g="
+    },
+    "lodash.mapvalues": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
+      "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw="
     },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
+    },
     "lodash.once": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
       "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=",
       "dev": true
     },
+    "lodash.pickby": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.pickby/-/lodash.pickby-4.6.0.tgz",
+      "integrity": "sha1-feoh2MGNdwOifHBMFdO4SmfjOv8="
+    },
+    "lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
+    },
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -36981,6 +37256,11 @@
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
     },
+    "lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI="
+    },
     "log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -45156,6 +45436,15 @@
       "version": "0.8.15",
       "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
       "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "zen-observable-ts": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.0.0.tgz",
+      "integrity": "sha512-KmWcbz+9kKUeAQ8btY8m1SsEFgBcp7h/Uf3V5quhan7ZWdjGsf0JcGLULQiwOZibbFWnHkYq8Nn2AZbJabovQg==",
+      "requires": {
+        "@types/zen-observable": "^0.8.2",
+        "zen-observable": "^0.8.15"
+      }
     }
   }
 }

package.json

@@ -7,6 +7,9 @@
     "@curi/react-dom": "^2.0.4",
     "@curi/router": "^2.1.2",
     "@date-io/date-fns": "^1.3.13",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@hickory/browser": "^2.1.0",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
@@ -19,12 +22,14 @@
     "@types/node": "^12.20.10",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
+    "apollo-link-scalars": "^2.1.3",
     "date-fns": "^2.21.1",
     "fontsource-roboto": "^4.0.0",
     "formik": "^2.2.6",
     "formik-material-ui": "^3.0.1",
     "formik-material-ui-pickers": "^0.0.12",
     "graphql": "^15.5.0",
+    "graphql-scalars": "^1.9.3",
     "material-ui-confirm": "^2.1.2",
     "notistack": "^1.0.6",
     "ramda": "^0.27.1",

src/commits/commit-list.tsx

@@ -0,0 +1,109 @@
+import { useQuery } from '@apollo/client';
+import { faPlayCircle, faVial } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { CircularProgress, Collapse, IconButton, LinearProgress, List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, makeStyles, useTheme } from '@material-ui/core';
+import { Cancel, CheckCircle, CloudDownload, ShoppingCart, Timer } from '@material-ui/icons';
+import { format } from 'date-fns';
+import React, { FC, Fragment, ReactNode, useState } from 'react';
+import { Commit, Pipeline, PipelineTask, TaskStatuses } from '../generated/graphql';
+import { COMMITS } from './queries';
+
+interface Props {
+  pipeline: Pipeline;
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flex: "1 1 100%",
+  },
+  nested: {
+    paddingLeft: theme.spacing(4),
+  },
+}));
+
+export const CommitList: FC<Props> = ({pipeline}) => {
+  const { data, loading } = useQuery<{ commits: Commit[] }>(COMMITS, {
+    variables: {
+      pipelineId: pipeline.id,
+    },
+  });
+
+  const classes = useStyles();
+
+  return (
+    <section className={classes.root}>
+      {(() => {
+        if (loading) {
+          return <LinearProgress color="secondary" />;
+        }
+
+        return <List>
+          {data?.commits.map(commit => (
+            <Item key={commit.hash} commit={commit} />
+          ))}
+        </List>;
+      })()}
+    </section>
+  )
+}
+
+const Item: FC<{commit: Commit}> = ({commit}) => {
+  const [isOpen, setOpen] = useState(() => false);
+  const classes = useStyles();
+  return (
+    <Fragment>
+      <ListItem button onClick={() => setOpen(!isOpen)}>
+        <ListItemText
+          primary={commit.message}
+          secondary={format(commit.date, "yyyy-MM-dd HH:mm:ss")}
+        />
+        <ListItemSecondaryAction>
+          <IconButton edge="end" aria-label="delete">
+            <ShoppingCart />
+          </IconButton>
+          <IconButton edge="end" aria-label="delete">
+            <CloudDownload />
+          </IconButton>
+          <IconButton edge="end" aria-label="delete">
+            <FontAwesomeIcon icon={faVial} />
+          </IconButton>
+          <IconButton edge="end" aria-label="delete">
+            <FontAwesomeIcon icon={faPlayCircle} />
+          </IconButton>
+        </ListItemSecondaryAction>
+      </ListItem>
+      <Collapse in={isOpen} timeout="auto" unmountOnExit>
+        <List component="div" disablePadding>
+          {
+            commit.tasks.map(task => (<TaskItem key={task.id} task={task} />))
+          }
+        </List>
+      </Collapse>
+    </Fragment>
+  );
+}
+
+const TaskItem: FC<{task: PipelineTask}> = ({task}) => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const statusIcon: ReactNode = (() => {
+    switch (task.status) {
+      case TaskStatuses.Pending:
+        return <Timer style={{ color: theme.palette.info.main }} />;
+      case TaskStatuses.Success:
+        return <CheckCircle style={{ color: theme.palette.success.main }} />;
+      case TaskStatuses.Failed:
+        return <Cancel style={{ color: theme.palette.error.main }} />;
+      case TaskStatuses.Working:
+        return <CircularProgress style={{ color: theme.palette.secondary.main }} />;
+
+    }
+  }
+  )()
+  return (
+    <ListItem button className={classes.nested}>
+      <ListItemIcon>{statusIcon}</ListItemIcon>
+      <ListItemText primary={format(task.startedAt, "yyyy-MM-dd HH:mm:ss")} />
+    </ListItem>
+  );
+};

src/commits/queries.ts

@@ -0,0 +1,20 @@
+import { gql } from '@apollo/client';
+
+export const COMMITS = gql`
+  query Commits($pipelineId: String!) {
+    commits(pipelineId: $pipelineId) {
+      message
+      hash
+      date
+      body
+      author_name
+      tasks {
+        id
+        units
+        status
+        startedAt
+        endedAt
+      }
+    }
+  }
+`;

src/commons/graphql/client.ts

@@ -1,6 +1,29 @@
-import { ApolloClient, InMemoryCache } from "@apollo/client";
+import { ApolloClient, ApolloLink, HttpLink, InMemoryCache } from "@apollo/client";
+import { withScalars } from 'apollo-link-scalars';
+import { buildClientSchema, IntrospectionQuery } from 'graphql';
+import { DateTimeResolver } from 'graphql-scalars';
+import introspectionResult from "../../generated/graphql.schema.json";
 
-export const client = new ApolloClient({
+const schema = buildClientSchema(
+  (introspectionResult as unknown) as IntrospectionQuery
+);
+
+const httpLink = new HttpLink({
   uri: "/api/graphql",
-  cache: new InMemoryCache(),
 });
+
+const typesMap = {
+  DateTime: DateTimeResolver,
+};
+const link = ApolloLink.from([
+  (withScalars({ schema, typesMap }) as unknown) as ApolloLink,
+  httpLink,
+]);
+
+export function createApolloClient() {
+  return new ApolloClient({
+    ssrMode: typeof window === "undefined",
+    link,
+    cache: new InMemoryCache(),
+  });
+}

src/commons/graphql/queries.ts

@@ -0,0 +1,26 @@
+import { gql } from '@apollo/client';
+
+export const COMMIT_LIST_QUERY = gql`
+  query CommitListQuery($projectId: String!, $pipelineId: String!) {
+    project(id: $projectId) {
+      id
+      name
+      comment
+      webUrl
+      sshUrl
+      webHookSecret
+    }
+    pipeline(id: $pipelineId) {
+      id
+      name
+      branch
+      workUnitMetadata {
+        version
+        units {
+          type
+          scripts
+        }
+      }
+    }
+  }
+`;

src/generated/graphql.schema.json

@@ -10,6 +10,163 @@
       "name": "Subscription"
     },
     "types": [
+      {
+        "kind": "OBJECT",
+        "name": "Commit",
+        "description": null,
+        "fields": [
+          {
+            "name": "hash",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "date",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "DateTime",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "message",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "refs",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "body",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "author_name",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "author_email",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "tasks",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "LIST",
+                "name": null,
+                "ofType": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "OBJECT",
+                    "name": "PipelineTask",
+                    "ofType": null
+                  }
+                }
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "inputFields": null,
+        "interfaces": [],
+        "enumValues": null,
+        "possibleTypes": null
+      },
+      {
+        "kind": "SCALAR",
+        "name": "String",
+        "description": "The `String` scalar type represents textual data, represented as UTF-8 character sequences. The String type is most often used by GraphQL to represent free-form human-readable text.",
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "INPUT_OBJECT",
         "name": "CreatePipelineInput",
@@ -85,16 +242,6 @@
         "enumValues": null,
         "possibleTypes": null
       },
-      {
-        "kind": "SCALAR",
-        "name": "String",
-        "description": "The `String` scalar type represents textual data, represented as UTF-8 character sequences. The String type is most often used by GraphQL to represent free-form human-readable text.",
-        "fields": null,
-        "inputFields": null,
-        "interfaces": null,
-        "enumValues": null,
-        "possibleTypes": null
-      },
       {
         "kind": "INPUT_OBJECT",
         "name": "CreatePipelineTaskInput",
@@ -1480,6 +1627,47 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "commits",
+            "description": null,
+            "args": [
+              {
+                "name": "pipelineId",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "String",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "LIST",
+                "name": null,
+                "ofType": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "OBJECT",
+                    "name": "Commit",
+                    "ofType": null
+                  }
+                }
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "listPipelineTaskByPipelineId",
             "description": null,

src/generated/graphql.tsx

@@ -14,6 +14,18 @@ export type Scalars = {
   DateTime: any;
 };
 
+export type Commit = {
+  __typename?: 'Commit';
+  hash: Scalars['String'];
+  date: Scalars['DateTime'];
+  message: Scalars['String'];
+  refs: Scalars['String'];
+  body: Scalars['String'];
+  author_name: Scalars['String'];
+  author_email: Scalars['String'];
+  tasks: Array<PipelineTask>;
+};
+
 export type CreatePipelineInput = {
   projectId: Scalars['String'];
   branch: Scalars['String'];
@@ -172,6 +184,7 @@ export type Query = {
   project: Project;
   pipelines: Array<Pipeline>;
   pipeline: Pipeline;
+  commits: Array<Commit>;
   listPipelineTaskByPipelineId: Array<PipelineTask>;
   findPipelineTask: PipelineTask;
 };
@@ -192,6 +205,11 @@ export type QueryPipelineArgs = {
 };
 
 
+export type QueryCommitsArgs = {
+  pipelineId: Scalars['String'];
+};
+
+
 export type QueryListPipelineTaskByPipelineIdArgs = {
   pipelineId: Scalars['String'];
 };

src/index.tsx

@@ -4,7 +4,7 @@ import "./index.css";
 import "fontsource-roboto";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import { client } from "./commons/graphql/client";
+import { createApolloClient } from "./commons/graphql/client";
 import { ApolloProvider } from "@apollo/client";
 import { MuiPickersUtilsProvider } from "@material-ui/pickers";
 import DateFnsUtils from "@date-io/date-fns";
@@ -16,6 +16,8 @@ import routes from "./routes";
 import { ConfirmProvider } from 'material-ui-confirm';
 import { SnackbarProvider } from 'notistack';
 
+const client = createApolloClient();
+
 const router = createRouter(browser, routes, {
   sideEffects: [
     announce(({ response }) => {

src/pipelines/index.ts

@@ -0,0 +1,3 @@
+export * from './pipeline-detail';
+export * from './pipeline-list';
+export * from './queries';

src/pipelines/pipeline-detail.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { Pipeline } from '../generated/graphql';
+
+interface Props {
+  pipeline: Pipeline;
+}
+
+export const PipelineDetail: FC<Props> = ({pipeline}) => {
+
+  return <div>PipelineDetail</div>
+}

src/pipelines/pipeline-list.tsx

@@ -27,8 +27,8 @@ export const PipelineList: FC<Props> = ({ projectId }) => {
     <List>
       {data?.pipelines.map((pipeline) => (
         <Link
-          name="pipeline-details"
+          name="pipeline-commits"
-          params={{ pipelineId: pipeline.id }}
+          params={{ pipelineId: pipeline.id, projectId: projectId }}
           key={pipeline.id}
         >
           <Item pipeline={pipeline} />

src/pipelines/queries.ts

@@ -0,0 +1,18 @@
+import { gql } from '@apollo/client';
+
+export const PIPELINE = gql`
+  query Pipeline($id: String!) {
+    pipeline(id: $id) {
+      id
+      name
+      branch
+      workUnitMetadata {
+        version
+        units {
+          type
+          scripts
+        }
+      }
+    }
+  }
+`

src/projects/project-detail.tsx

@@ -23,7 +23,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-export const ProjectDetail: FC<Props> = ({ project }) => {
+export const ProjectDetail: FC<Props> = ({ project, children }) => {
   const headerContainer = useHeaderContainer();
 
   const classes = useStyles();
@@ -55,7 +55,7 @@ export const ProjectDetail: FC<Props> = ({ project }) => {
       </Portal>
       <Grid
         container
-        spacing={1}
+        spacing={0}
         direction="row"
         alignItems="stretch"
         className={classes.root}
@@ -65,6 +65,9 @@ export const ProjectDetail: FC<Props> = ({ project }) => {
             <PipelineList projectId={project.id} />
           </Paper>
         </Grid>
+        <Grid item xs={9} style={{ height: "100%", display: "flex", overflowY: 'auto' }}>
+          {children}
+        </Grid>
       </Grid>
     </Fragment>
   );

src/routes.tsx

@@ -2,8 +2,12 @@ import { ApolloClient, InMemoryCache } from "@apollo/client";
 import { prepareRoutes } from "@curi/router";
 import { omit } from 'ramda';
 import React from 'react';
-import { CreateProjectInput, Project } from './generated/graphql';
+import { CreateProjectInput, Pipeline, Project } from './generated/graphql';
+import { PipelineDetail } from './pipelines';
 import { ProjectDetail, ProjectEditor, PROJECT } from "./projects";
+import { COMMIT_LIST_QUERY } from './commons/graphql/queries';
+import { CommitList } from './commits/commit-list';
+import { COMMITS } from './commits/queries';
 
 export default prepareRoutes([
   {
@@ -12,7 +16,7 @@ export default prepareRoutes([
     respond() {
       return { body: () => <div>DashBoard</div> };
     },
-  },
+  }, // dashboard
   {
     name: "create-project",
     path: "projects/create",
@@ -26,7 +30,7 @@ export default prepareRoutes([
       };
       return { body: () => <ProjectEditor project={input} /> };
     },
-  },
+  }, // create-project
   {
     name: "edit-project",
     path: "projects/:projectId/edit",
@@ -47,7 +51,7 @@ export default prepareRoutes([
     respond({ resolved }) {
       return resolved;
     },
-  },
+  }, // edit-project
   {
     name: "project-detail",
     path: "projects/:projectId",
@@ -68,5 +72,38 @@ export default prepareRoutes([
     respond({ resolved }) {
       return resolved;
     },
-  },
+    children: [
+      {
+        name: "pipeline-commits",
+        path: "pipelines/:pipelineId/commits",
+        async resolve(
+          matched,
+          { client }: { client: ApolloClient<InMemoryCache> }
+        ) {
+          const { data } = await client.query<{
+            pipeline: Pipeline;
+            project: Project;
+          }>({
+            query: COMMIT_LIST_QUERY,
+            variables: {
+              projectId: matched?.params.projectId,
+              pipelineId: matched?.params.pipelineId,
+            },
+          });
+          return {
+            body: () => (
+              <ProjectDetail project={omit(["__typename"], data.project)}>
+                <CommitList
+                  pipeline={omit(["__typename"], data.pipeline)}
+                />
+              </ProjectDetail>
+            ),
+          };
+        },
+        respond({ resolved, error }) {
+          return resolved || <div>Failed</div>;
+        },
+      },
+    ],
+  }, // project-detail
 ]);