From 0c3aa9c7ba199ab0a23535d0292dd69cf8e8cc8f Mon Sep 17 00:00:00 2001
From: William Chargin <wchargin@gmail.com>
Date: Mon, 19 Mar 2018 16:03:23 -0700
Subject: [PATCH] Create a view-only artifact viewer

Summary:
Paired with @dandelionmane.

wchargin-branch: create-artifact-viewer
---
 src/plugins/artifact/artifactPlugin.js      | 18 ++++++++++++++
 src/plugins/artifact/editor/App.js          | 19 +++++++++++++++
 src/plugins/artifact/editor/ArtifactList.js | 26 +++++++++++++++++++++
 3 files changed, 63 insertions(+)
 create mode 100644 src/plugins/artifact/artifactPlugin.js
 create mode 100644 src/plugins/artifact/editor/ArtifactList.js

diff --git a/src/plugins/artifact/artifactPlugin.js b/src/plugins/artifact/artifactPlugin.js
new file mode 100644
index 0000000..1bdd6e9
--- /dev/null
+++ b/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;
diff --git a/src/plugins/artifact/editor/App.js b/src/plugins/artifact/editor/App.js
index 64b6c81..83c90ec 100644
--- a/src/plugins/artifact/editor/App.js
+++ b/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>
     );
   }
diff --git a/src/plugins/artifact/editor/ArtifactList.js b/src/plugins/artifact/editor/ArtifactList.js
new file mode 100644
index 0000000..3be09a7
--- /dev/null
+++ b/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>
+    );
+  }
+}