feat: sync graphql schema and clean code

.vscode/settings.json

@@ -3,6 +3,8 @@
     "Formik",
     "clsx",
     "fontsource",
+    "notistack",
+    "unmount",
     "vditor"
   ]
 }

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,242 @@
+import { useMutation, useQuery, useSubscription } from "@apollo/client";
+import { Link, useResponse, useRouter } from "@curi/react-dom";
+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 { useSnackbar } from "notistack";
+import { complement, equals, find, propEq, takeWhile } from "ramda";
+import {
+  FC,
+  Fragment,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
+import {
+  Commit,
+  CreatePipelineTaskInput,
+  Pipeline,
+  PipelineTask,
+  TaskStatuses,
+  PipelineUnits,
+} from "../generated/graphql";
+import { CREATE_PIPELINE_TASK } from "./mutations";
+import { COMMITS } from "./queries";
+import { SYNC_COMMITS } from "./subscriptions";
+
+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 { enqueueSnackbar } = useSnackbar();
+
+  const { data, loading, refetch } = useQuery<{ commits?: Commit[] }>(COMMITS, {
+    variables: {
+      pipelineId: pipeline.id,
+    },
+  });
+
+  const { loading: syncing } = useSubscription<{ syncCommits: boolean }>(
+    SYNC_COMMITS,
+    {
+      variables: {
+        pipelineId: pipeline.id,
+      },
+      onSubscriptionData({ subscriptionData: { data, error } }) {
+        if (error) {
+          enqueueSnackbar(error.message, {
+            variant: "warning",
+          });
+        }
+        if (data?.syncCommits) {
+          refetch({
+            appInstance: data.syncCommits,
+          });
+        }
+      },
+    }
+  );
+
+  const classes = useStyles();
+
+  return (
+    <section className={classes.root}>
+      {(() => {
+        if (loading) {
+          return <LinearProgress color="secondary" />;
+        }
+
+        return (
+          <section>
+            {syncing && <LinearProgress color="secondary" />}
+            <List>
+              {data?.commits?.map((commit) => (
+                <Item key={commit.hash} commit={commit} pipeline={pipeline} />
+              ))}
+            </List>
+          </section>
+        );
+      })()}
+    </section>
+  );
+};
+
+const unitActionPairs: Array<[PipelineUnits, ReactNode, string]> = [
+  [PipelineUnits.Checkout, <ShoppingCart />, "checkout"],
+  [
+    PipelineUnits.InstallDependencies,
+    <CloudDownload />,
+    "install dependencies",
+  ],
+  [PipelineUnits.Test, <FontAwesomeIcon icon={faVial} />, "test"],
+  [PipelineUnits.Deploy, <FontAwesomeIcon icon={faPlayCircle} />, "deploy"],
+];
+
+const Item: FC<{ commit: Commit; pipeline: Pipeline }> = ({
+  commit,
+  pipeline,
+}) => {
+  const [isOpen, setOpen] = useState(() => false);
+
+  const [createTask, { loading }] =
+    useMutation<
+      { createPipelineTask: PipelineTask },
+      { task: CreatePipelineTaskInput }
+    >(CREATE_PIPELINE_TASK);
+
+  const units = useMemo(
+    () => pipeline.workUnitMetadata.units.map((unit) => unit.type),
+    [pipeline]
+  );
+
+  const { navigate, url } = useRouter();
+  const { response } = useResponse();
+
+  const handleCreateTask = useCallback(
+    (unit: PipelineUnits) => {
+      const _units = [...takeWhile(complement(equals(unit)), units), unit];
+      createTask({
+        variables: {
+          task: {
+            units: _units,
+            pipelineId: pipeline.id,
+            commit: commit.hash,
+          },
+        },
+      }).then(({ data }) => {
+        navigate({
+          url: url({
+            name: "pipeline-task-detail",
+            params: { ...response.params, taskId: data?.createPipelineTask.id },
+          }),
+        });
+      });
+    },
+    [commit, createTask, navigate, pipeline, response, units, url]
+  );
+
+  const actions = useMemo(
+    () =>
+      units.map((unit) => {
+        const pair = find(propEq(0, unit), unitActionPairs);
+        return (
+          pair && (
+            <IconButton
+              key={unit}
+              aria-label={pair[2]}
+              disabled={loading}
+              onClick={() => handleCreateTask(unit)}
+            >
+              {pair[1]}
+            </IconButton>
+          )
+        );
+      }),
+    [units, handleCreateTask, loading]
+  );
+  return (
+    <Fragment>
+      <ListItem button onClick={() => setOpen(!isOpen)}>
+        <ListItemText
+          primary={commit.message}
+          secondary={commit.date && format(commit.date, "yyyy-MM-dd HH:mm:ss")}
+        />
+        <ListItemSecondaryAction>{actions}</ListItemSecondaryAction>
+      </ListItem>
+      {loading && <LinearProgress color="secondary" />}
+      <Collapse in={isOpen} timeout="auto" unmountOnExit>
+        <List component="div" disablePadding>
+          {commit.tasks.map((task) => (
+            <Link
+              key={task.id}
+              name="pipeline-task-detail"
+              params={{ ...response.params, taskId: task.id }}
+            >
+              <TaskItem task={task} />
+            </Link>
+          ))}
+        </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={
+          task.startedAt && format(task.startedAt, "yyyy-MM-dd HH:mm:ss")
+        }
+      />
+    </ListItem>
+  );
+};

src/commits/mutations.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_PIPELINE_TASK = gql`
+  mutation CreatePipelineTask($task: CreatePipelineTaskInput!) {
+    createPipelineTask(task: $task) {
+      id
+      status
+      startedAt
+      endedAt
+    }
+  }
+`

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/commits/subscriptions.ts

@@ -0,0 +1,6 @@
+import { gql } from "@apollo/client";
+export const SYNC_COMMITS = gql`
+  subscription SyncCommits($pipelineId: String!) {
+    syncCommits(pipelineId: $pipelineId)
+  }
+`;

src/commons/fallbacks/error-page.tsx

@@ -0,0 +1,11 @@
+import { Typography } from '@material-ui/core';
+import React, { FC } from 'react';
+
+export const ErrorPage: FC = ({children}) => {
+  return (
+    <section>
+      <Typography component="h2">Something is wrong :(</Typography>
+      <Typography variant="body1" component="div">{children}</Typography>
+    </section>
+  );
+}

src/commons/graphql/client.ts

@@ -1,6 +0,0 @@
-import { ApolloClient, InMemoryCache } from "@apollo/client";
-
-export const client = new ApolloClient({
-  uri: "/api/graphql",
-  cache: new InMemoryCache(),
-});

src/commons/graphql/client.tsx

@@ -0,0 +1,83 @@
+import {
+  ApolloClient,
+  ApolloLink,
+  HttpLink,
+  InMemoryCache,
+  split,
+  ApolloProvider,
+} from "@apollo/client";
+import { withScalars } from "apollo-link-scalars";
+import { buildClientSchema, IntrospectionQuery } from "graphql";
+import { DateTimeResolver } from "graphql-scalars";
+import { FC } from "react";
+import introspectionResult from "../../generated/graphql.schema.json";
+import { onError } from "@apollo/client/link/error";
+import { WebSocketLink } from "@apollo/client/link/ws";
+import { getMainDefinition } from "@apollo/client/utilities";
+import { useSnackbar } from "notistack";
+
+const schema = buildClientSchema(
+  (introspectionResult as unknown) as IntrospectionQuery
+);
+
+const typesMap = {
+  DateTime: DateTimeResolver,
+};
+
+export const FennecApolloClientProvider: FC = ({ children }) => {
+  const { enqueueSnackbar } = useSnackbar();
+  const errorLink = onError(({ graphQLErrors, networkError }) => {
+    if (graphQLErrors) {
+      graphQLErrors.forEach((error) => {
+        enqueueSnackbar(error.message, {
+          variant: "error",
+        });
+      });
+      graphQLErrors.forEach(({ message, locations, path }) => {
+        console.error(
+          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+        );
+      });
+    }
+    if (networkError) {
+      console.log(`[Network error]: ${networkError}`);
+      enqueueSnackbar(networkError.message, {
+        variant: "error",
+      });
+    }
+  });
+  const wsLink = new WebSocketLink({
+    uri: `${window.location.protocol.replace("http", "ws")}//${
+      window.location.hostname
+    }:${window.location.port}/api/graphql`,
+    options: {
+      reconnect: true,
+    },
+  });
+  const httpLink = new HttpLink({
+    uri: "/api/graphql",
+  });
+  const splitLink = split(
+    ({ query }) => {
+      const definition = getMainDefinition(query);
+      return (
+        definition.kind === "OperationDefinition" &&
+        definition.operation === "subscription"
+      );
+    },
+    wsLink,
+    httpLink
+  );
+  const link = ApolloLink.from([
+    errorLink,
+    (withScalars({ schema, typesMap }) as unknown) as ApolloLink,
+    splitLink,
+  ]);
+  const client = new ApolloClient({
+    ssrMode: typeof window === "undefined",
+    link,
+    cache: new InMemoryCache(),
+  });
+
+  return <ApolloProvider client={client}>{children}</ApolloProvider>;
+};

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/commons/route/active-link.tsx

@@ -0,0 +1,20 @@
+import { ActiveHookProps, Link, LinkProps, useActive } from '@curi/react-dom';
+import React, { FC, ReactNode } from 'react';
+
+export type ActiveLinkProps = ActiveHookProps &
+  LinkProps & {
+    className?: string;
+    children: ReactNode;
+  };
+
+export const ActiveLink:FC<ActiveLinkProps> = ({ name, params, partial, className = "", ...rest }) => {
+  const active = useActive({ name, params, partial });
+  return (
+    <Link
+      name={name}
+      params={params}
+      {...rest}
+      className={active ? `${className} active` : className}
+    />
+  );
+};

src/commons/route/router.tsx

@@ -0,0 +1,31 @@
+import { useApolloClient } from "@apollo/client";
+import { createRouterComponent } from "@curi/react-dom";
+import { createRouter, announce } from "@curi/router";
+import { browser } from "@hickory/browser";
+import { FC, ReactNode, useEffect, useMemo, useState } from "react";
+import routes from "../../routes";
+import { LinearProgress } from "@material-ui/core";
+
+const Component: FC = ({ children }) => {
+  const client = useApolloClient();
+  const [body, setBody] = useState<any>(null);
+
+  useEffect(() => {
+    const router = createRouter(browser, routes, {
+      sideEffects: [
+        announce(({ response }) => {
+          return `Navigated to ${response.location.pathname}`;
+        }),
+      ],
+      external: { client },
+    });
+    const Router = createRouterComponent(router);
+    router.once(() => {
+      setBody(<Router>{children}</Router>);
+    });
+  }, [setBody, client, children]);
+
+  return body ?? <LinearProgress />;
+};
+
+export default Component;

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",
@@ -429,83 +576,6 @@
         "enumValues": null,
         "possibleTypes": null
       },
-      {
-        "kind": "OBJECT",
-        "name": "LogList",
-        "description": null,
-        "fields": [
-          {
-            "name": "all",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "LIST",
-                "name": null,
-                "ofType": {
-                  "kind": "NON_NULL",
-                  "name": null,
-                  "ofType": {
-                    "kind": "OBJECT",
-                    "name": "LogFields",
-                    "ofType": null
-                  }
-                }
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "total",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "Float",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "latest",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "OBJECT",
-                "name": "LogFields",
-                "ofType": null
-              }
-            },
-            "isDeprecated": false,
-            "deprecationReason": null
-          }
-        ],
-        "inputFields": null,
-        "interfaces": [],
-        "enumValues": null,
-        "possibleTypes": null
-      },
-      {
-        "kind": "SCALAR",
-        "name": "Float",
-        "description": "The `Float` scalar type represents signed double-precision fractional values as specified by [IEEE 754](https://en.wikipedia.org/wiki/IEEE_floating_point).",
-        "fields": null,
-        "inputFields": null,
-        "interfaces": null,
-        "enumValues": null,
-        "possibleTypes": null
-      },
       {
         "kind": "OBJECT",
         "name": "Mutation",
@@ -741,6 +811,39 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "stopPipelineTask",
+            "description": null,
+            "args": [
+              {
+                "name": "id",
+                "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": "SCALAR",
+                "name": "Boolean",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -748,6 +851,26 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "SCALAR",
+        "name": "Float",
+        "description": "The `Float` scalar type represents signed double-precision fractional values as specified by [IEEE 754](https://en.wikipedia.org/wiki/IEEE_floating_point).",
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
+      {
+        "kind": "SCALAR",
+        "name": "Boolean",
+        "description": "The `Boolean` scalar type represents `true` or `false`.",
+        "fields": null,
+        "inputFields": null,
+        "interfaces": null,
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "OBJECT",
         "name": "Pipeline",
@@ -1030,7 +1153,7 @@
       },
       {
         "kind": "OBJECT",
-        "name": "PipelineTaskLogMessage",
+        "name": "PipelineTaskEvent",
         "description": null,
         "fields": [
           {
@@ -1046,47 +1169,15 @@
             "deprecationReason": null
           },
           {
-            "name": "time",
+            "name": "status",
             "description": null,
             "args": [],
             "type": {
               "kind": "NON_NULL",
               "name": null,
               "ofType": {
-                "kind": "SCALAR",
+                "kind": "ENUM",
-                "name": "DateTime",
+                "name": "TaskStatuses",
-                "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": "isError",
-            "description": null,
-            "args": [],
-            "type": {
-              "kind": "NON_NULL",
-              "name": null,
-              "ofType": {
-                "kind": "SCALAR",
-                "name": "Boolean",
                 "ofType": null
               }
             },
@@ -1099,16 +1190,6 @@
         "enumValues": null,
         "possibleTypes": null
       },
-      {
-        "kind": "SCALAR",
-        "name": "Boolean",
-        "description": "The `Boolean` scalar type represents `true` or `false`.",
-        "fields": null,
-        "inputFields": null,
-        "interfaces": null,
-        "enumValues": null,
-        "possibleTypes": null
-      },
       {
         "kind": "OBJECT",
         "name": "PipelineTaskLogs",
@@ -1480,6 +1561,43 @@
             "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": "LIST",
+              "name": null,
+              "ofType": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": {
+                  "kind": "OBJECT",
+                  "name": "Commit",
+                  "ofType": null
+                }
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "listPipelineTaskByPipelineId",
             "description": null,
@@ -1522,7 +1640,7 @@
             "deprecationReason": null
           },
           {
-            "name": "findPipelineTask",
+            "name": "pipelineTask",
             "description": null,
             "args": [
               {
@@ -1566,11 +1684,23 @@
         "description": null,
         "fields": [
           {
-            "name": "listLogsForPipeline",
+            "name": "syncCommits",
             "description": null,
             "args": [
               {
-                "name": "id",
+                "name": "appInstance",
+                "description": null,
+                "type": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "pipelineId",
                 "description": null,
                 "type": {
                   "kind": "NON_NULL",
@@ -1587,19 +1717,15 @@
               }
             ],
             "type": {
-              "kind": "NON_NULL",
+              "kind": "SCALAR",
-              "name": null,
+              "name": "String",
-              "ofType": {
-                "kind": "OBJECT",
-                "name": "LogList",
               "ofType": null
-              }
             },
             "isDeprecated": false,
             "deprecationReason": null
           },
           {
-            "name": "pipelineTaskLog",
+            "name": "pipelineTaskEvent",
             "description": null,
             "args": [
               {
@@ -1624,7 +1750,7 @@
               "name": null,
               "ofType": {
                 "kind": "OBJECT",
-                "name": "PipelineTaskLogMessage",
+                "name": "PipelineTaskEvent",
                 "ofType": 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'];
@@ -53,13 +65,6 @@ export type LogFields = {
   tasks: Array<PipelineTask>;
 };
 
-export type LogList = {
-  __typename?: 'LogList';
-  all: Array<LogFields>;
-  total: Scalars['Float'];
-  latest: LogFields;
-};
-
 export type Mutation = {
   __typename?: 'Mutation';
   createProject: Project;
@@ -69,6 +74,7 @@ export type Mutation = {
   updatePipeline: Pipeline;
   deletePipeline: Scalars['Float'];
   createPipelineTask: PipelineTask;
+  stopPipelineTask: Scalars['Boolean'];
 };
 
 
@@ -106,6 +112,11 @@ export type MutationCreatePipelineTaskArgs = {
   task: CreatePipelineTaskInput;
 };
 
+
+export type MutationStopPipelineTaskArgs = {
+  id: Scalars['String'];
+};
+
 export type Pipeline = {
   __typename?: 'Pipeline';
   id: Scalars['ID'];
@@ -129,12 +140,10 @@ export type PipelineTask = {
   endedAt?: Maybe<Scalars['DateTime']>;
 };
 
-export type PipelineTaskLogMessage = {
+export type PipelineTaskEvent = {
-  __typename?: 'PipelineTaskLogMessage';
+  __typename?: 'PipelineTaskEvent';
   unit?: Maybe<PipelineUnits>;
-  time: Scalars['DateTime'];
+  status: TaskStatuses;
-  message: Scalars['String'];
-  isError: Scalars['Boolean'];
 };
 
 export type PipelineTaskLogs = {
@@ -172,8 +181,9 @@ export type Query = {
   project: Project;
   pipelines: Array<Pipeline>;
   pipeline: Pipeline;
+  commits?: Maybe<Array<Commit>>;
   listPipelineTaskByPipelineId: Array<PipelineTask>;
-  findPipelineTask: PipelineTask;
+  pipelineTask: PipelineTask;
 };
 
 
@@ -192,29 +202,35 @@ export type QueryPipelineArgs = {
 };
 
 
+export type QueryCommitsArgs = {
+  pipelineId: Scalars['String'];
+};
+
+
 export type QueryListPipelineTaskByPipelineIdArgs = {
   pipelineId: Scalars['String'];
 };
 
 
-export type QueryFindPipelineTaskArgs = {
+export type QueryPipelineTaskArgs = {
   id: Scalars['String'];
 };
 
 export type Subscription = {
   __typename?: 'Subscription';
-  listLogsForPipeline: LogList;
+  syncCommits?: Maybe<Scalars['String']>;
-  pipelineTaskLog: PipelineTaskLogMessage;
+  pipelineTaskEvent: PipelineTaskEvent;
   pipelineTaskChanged: PipelineTask;
 };
 
 
-export type SubscriptionListLogsForPipelineArgs = {
+export type SubscriptionSyncCommitsArgs = {
-  id: Scalars['String'];
+  appInstance?: Maybe<Scalars['String']>;
+  pipelineId: Scalars['String'];
 };
 
 
-export type SubscriptionPipelineTaskLogArgs = {
+export type SubscriptionPipelineTaskEventArgs = {
   taskId: Scalars['String'];
 };
 

src/index.tsx

@@ -4,46 +4,30 @@ import "./index.css";
 import "fontsource-roboto";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import { client } from "./commons/graphql/client";
+import { FennecApolloClientProvider } from "./commons/graphql/client";
-import { ApolloProvider } from "@apollo/client";
 import { MuiPickersUtilsProvider } from "@material-ui/pickers";
 import DateFnsUtils from "@date-io/date-fns";
 import zhLocale from "date-fns/locale/zh-CN";
-import { createRouterComponent } from "@curi/react-dom";
+import { ConfirmProvider } from "material-ui-confirm";
-import { createRouter, announce } from "@curi/router";
+import { SnackbarProvider } from "notistack";
-import { browser } from "@hickory/browser";
+import Router from './commons/route/router';
-import routes from "./routes";
-import { ConfirmProvider } from 'material-ui-confirm';
-import { SnackbarProvider } from 'notistack';
 
-const router = createRouter(browser, routes, {
-  sideEffects: [
-    announce(({ response }) => {
-      return `Navigated to ${response.location.pathname}`;
-    }),
-  ],
-  external: { client }
-});
-const Router = createRouterComponent(router);
-
-router.once(() => {
   ReactDOM.render(
     <React.StrictMode>
       <ConfirmProvider>
         <SnackbarProvider maxSnack={5}>
-          <ApolloProvider client={client}>
+          <FennecApolloClientProvider>
             <MuiPickersUtilsProvider utils={DateFnsUtils} locale={zhLocale}>
               <Router>
                 <App />
               </Router>
             </MuiPickersUtilsProvider>
-          </ApolloProvider>
+          </FennecApolloClientProvider>
         </SnackbarProvider>
       </ConfirmProvider>
     </React.StrictMode>,
     document.getElementById("root")
   );
-});
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/pipeline-tasks/pipeline-task-detail.tsx

@@ -0,0 +1,92 @@
+import { gql, useQuery } from "@apollo/client";
+import { LinearProgress, makeStyles, Typography } from "@material-ui/core";
+import { format } from 'date-fns';
+import React, { FC } from "react";
+import { ErrorPage } from "../commons/fallbacks/error-page";
+import { PipelineTask, PipelineTaskLogs } from "../generated/graphql";
+
+interface Props {
+  taskId: string;
+}
+
+const PIPELINE_TASK = gql`
+  query FindPipelineTask($taskId: String!) {
+    pipelineTask(id: $taskId) {
+      id
+      units
+      commit
+      status
+      startedAt
+      endedAt
+      logs {
+        unit
+        logs
+        status
+        startedAt
+        endedAt
+      }
+    }
+  }
+`;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+  },
+  groupTitle: {
+    backgroundColor: 'white',
+    fontWeight: 500,
+    borderTop: '1px solid #eee',
+    fontSize: '16px',
+    padding: '12px',
+    marginLeft: '1px',
+  },
+  logText: {
+    fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+    whiteSpace: 'pre-wrap',
+    border: 'none',
+    margin: '6px 12px',
+    display: "block"
+  },
+}));
+
+export const PipelineTaskDetail: FC<Props> = ({ taskId }) => {
+  const { data, loading, error } = useQuery<{ pipelineTask: PipelineTask }>(
+    PIPELINE_TASK,
+    {
+      variables: { taskId },
+    }
+  );
+  const classes = useStyles();
+
+  if (error) {
+    return <ErrorPage>{error.message}</ErrorPage>;
+  }
+
+  if (loading) {
+    return <LinearProgress color="secondary" />;
+  }
+
+  return (
+    <div className={classes.root}>
+      <Typography variant="h4" component="h2">
+        {taskId} detail
+      </Typography>
+
+      {data?.pipelineTask.logs.map((logs) => (
+        <LogGroup key={logs.unit} logs={logs} />
+      ))}
+    </div>
+  );
+};
+
+const LogGroup: FC<{ logs: PipelineTaskLogs }> = ({ logs }) => {
+  const classes = useStyles();
+  return (
+    <div>
+      <div className={classes.groupTitle}>
+        {logs.unit} {format(logs.startedAt, 'yyyy-MM-dd HH:mm:ss')} {logs.status}
+      </div>
+      <code className={classes.logText}>{logs.logs}</code>
+    </div>
+  );
+};

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

@@ -3,7 +3,6 @@ import { Link } from '@curi/react-dom';
 import { List, ListItem, Typography, ListItemText } from '@material-ui/core';
 import { FC } from 'react';
 import { Pipeline } from '../generated/graphql';
-import { Fragment } from 'react';
 import { CallMerge } from '@material-ui/icons';
 
 interface Props {
@@ -28,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,16 +55,19 @@ export const ProjectDetail: FC<Props> = ({ project }) => {
       </Portal>
       <Grid
         container
-        spacing={1}
+        spacing={0}
         direction="row"
         alignItems="stretch"
         className={classes.root}
       >
-        <Grid item xs={3} style={{ height: "100%", display: "flex" }}>
+        <Grid item lg={1} style={{ height: "100%", display: "flex" }}>
           <Paper className={classes.pipelineListContainer}>
             <PipelineList projectId={project.id} />
           </Paper>
         </Grid>
+        <Grid item xs={10} lg={11} style={{ height: "100%", display: "flex", overflowY: 'auto' }}>
+          {children}
+        </Grid>
       </Grid>
     </Fragment>
   );

src/projects/project-panel.tsx

@@ -1,12 +1,12 @@
-import { gql, useQuery } from '@apollo/client';
+import { gql, useQuery } from "@apollo/client";
-import { Link, useRouter } from '@curi/react-dom';
+import { Link } from "@curi/react-dom";
-import { Box, List, ListItem } from '@material-ui/core';
+import { Box, List, ListItem, makeStyles, Theme } from "@material-ui/core";
-import { find, propEq } from 'ramda';
+import { FC } from "react";
-import React, { useState, FC, useEffect } from 'react';
+import { Project } from "../generated/graphql";
-import { Project } from '../generated/graphql';
+import { ListItemText } from "@material-ui/core";
-import { ListItemText } from '@material-ui/core';
+import { Button } from "@material-ui/core";
-import { Button } from '@material-ui/core';
+import { AddBox } from "@material-ui/icons";
-import { AddBox } from '@material-ui/icons';
+import { ActiveLink } from "../commons/route/active-link";
 
 const PROJECTS = gql`
   query Projects {
@@ -21,13 +21,31 @@ const PROJECTS = gql`
   }
 `;
 
+const useStyles = makeStyles((theme: Theme) => ({
+  item: {
+    position: "relative",
+    ".active &": {
+      backgroundColor: theme.palette.background.default,
+    },
+    ".active &::before": {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      content: '""',
+      display: "block",
+      borderLeftColor: theme.palette.secondary.main,
+      borderLeftWidth: 4,
+      borderLeftStyle: "solid",
+    },
+  },
+}));
+
 export function ProjectPanel() {
   return (
     <section>
       <Box m={2}>
-        <Link
+        <Link name="create-project">
-          name="create-project"
-        >
           <Button
             variant="contained"
             color="primary"
@@ -44,32 +62,23 @@ export function ProjectPanel() {
 }
 
 const ProjectList: FC<{}> = () => {
-  const { data, refetch } = useQuery<{
+  const { data } = useQuery<{
     projects: Project[];
   }>(PROJECTS);
   const projects = data?.projects;
-  const [currentProject, setCurrentProject] = useState<Project | undefined>(
-    undefined
-  );
-  const { current } = useRouter();
 
-  useEffect(() => {
+  const classes = useStyles();
-    const currId = current()?.response?.params.projectId;
-    console.log(currId);
-    setCurrentProject(find(propEq("id", currId), projects ?? []));
-  }, [current, projects]);
 
   const items = projects?.map((item) => (
-    <Link
+    <ActiveLink
       name="project-detail"
       params={{ projectId: item.id }}
       key={item.id}
-      onNav={() => setCurrentProject(item)}
     >
-      <ListItem button>
+      <ListItem button className={classes.item}>
         <ListItemText primary={item.name} secondary={item.comment} />
       </ListItem>
-    </Link>
+    </ActiveLink>
   ));
   return <List>{items}</List>;
 };

src/routes.tsx

@@ -2,8 +2,11 @@ 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 { ProjectDetail, ProjectEditor, PROJECT } from "./projects";
+import { COMMIT_LIST_QUERY } from './commons/graphql/queries';
+import { CommitList } from './commits/commit-list';
+import { PipelineTaskDetail } from './pipeline-tasks/pipeline-task-detail';
 
 export default prepareRoutes([
   {
@@ -12,7 +15,7 @@ export default prepareRoutes([
     respond() {
       return { body: () => <div>DashBoard</div> };
     },
-  },
+  }, // dashboard
   {
     name: "create-project",
     path: "projects/create",
@@ -26,7 +29,7 @@ export default prepareRoutes([
       };
       return { body: () => <ProjectEditor project={input} /> };
     },
-  },
+  }, // create-project
   {
     name: "edit-project",
     path: "projects/:projectId/edit",
@@ -47,7 +50,7 @@ export default prepareRoutes([
     respond({ resolved }) {
       return resolved;
     },
-  },
+  }, // edit-project
   {
     name: "project-detail",
     path: "projects/:projectId",
@@ -68,5 +71,65 @@ 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>;
+        },
+      },
+      {
+        name: "pipeline-task-detail",
+        path: "pipelines/:pipelineId/tasks/:taskId",
+        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)}>
+                <PipelineTaskDetail taskId={matched?.params.taskId} />
+              </ProjectDetail>
+            ),
+          };
+        },
+        respond({ resolved, error }) {
+          return resolved || <div>Failed</div>;
+        },
+      },
+    ],
+  }, // project-detail
 ]);