Create a view-only artifact viewer

Summary:
Paired with @dandelionmane.

wchargin-branch: create-artifact-viewer

src/plugins/artifact/artifactPlugin.js

@@ -0,0 +1,18 @@
+// @flow
+
+export type ArtifactNodeID = string;
+export type ArtifactNodePayload = {|
+  +name: string,
+|};
+
+export type NodePayload = ArtifactNodePayload;
+
+export type ArtifactEdgeID = {|
+  +src: string,
+  +dst: string,
+|};
+export type ArtifactEdgePayload = {|
+  +weight: number, // non-negative
+|};
+
+export type EdgePayload = ArtifactEdgePayload;

src/plugins/artifact/editor/App.js

@@ -3,16 +3,35 @@
 import React from "react";
 import {StyleSheet, css} from "aphrodite/no-important";
 
+import {ArtifactList} from "./ArtifactList";
+
 type Props = {};
 type State = {};
 
 export default class App extends React.Component<Props, State> {
   render() {
+    function createSampleArtifact(name) {
+      const id = name.toLowerCase().replace(/[^a-z]/g, "-");
+      return {
+        address: {
+          repositoryName: "sourcecred/devnull",
+          pluginName: "sourcecred/artifact-beta",
+          id,
+        },
+        payload: {name},
+      };
+    }
+    const artifacts = [
+      createSampleArtifact("Root"),
+      createSampleArtifact("Tooling"),
+      createSampleArtifact("Tests"),
+    ];
     return (
       <div>
         <header className={css(styles.header)}>
           <h1>Artifact editor</h1>
         </header>
+        <ArtifactList artifacts={artifacts} />
       </div>
     );
   }

src/plugins/artifact/editor/ArtifactList.js

@@ -0,0 +1,26 @@
+// @flow
+
+import React from "react";
+
+import type {Node} from "../../../core/graph";
+import type {ArtifactNodePayload} from "../artifactPlugin";
+
+type Props = {
+  artifacts: Node<ArtifactNodePayload>[],
+};
+type State = {};
+
+export class ArtifactList extends React.Component<Props, State> {
+  render() {
+    return (
+      <div>
+        <h2>Artifacts</h2>
+        <ul>
+          {this.props.artifacts.map((x) => (
+            <li key={x.address.id}>{x.payload.name}</li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+}