archiving: lands components for staging branch

common/navigation-data.js

@@ -33,7 +33,15 @@ const constructFilesTreeForNavigation = (library) => {
   return {
     ...library[0],
     name: `Data`,
-    children: [],
+    children: [
+      {
+        id: "V1_NAVIGATION_ARCHIVE",
+        decorator: "ARCHIVE",
+        name: "Archive",
+        pageTitle: "Archive on Filecoin",
+        children: null,
+      },
+    ],
   };
 };
 

components/core/Application.js

@@ -27,6 +27,7 @@ import SceneProfile from "~/scenes/SceneProfile";
 import SceneSentinel from "~/scenes/SceneSentinel";
 import ScenePublicProfile from "~/scenes/ScenePublicProfile";
 import ScenePublicSlate from "~/scenes/ScenePublicSlate";
+import SceneArchive from "~/scenes/SceneArchive";
 
 // NOTE(jim):
 // Sidebars each have a decorator and can be shown to with _handleAction
@@ -80,6 +81,7 @@ const SCENES = {
   LOCAL_DATA: <SceneLocalData />,
   NETWORK: <SceneSentinel />,
   DIRECTORY: <SceneDirectory />,
+  ARCHIVE: <SceneArchive />,
 };
 
 export default class ApplicationPage extends React.Component {

components/core/ApplicationNavigation.js

@@ -20,6 +20,7 @@ const IconMap = {
   PROFILE_PAGE: <SVG.ProfileUser height="20px" />,
   SETTINGS_DEVELOPER: <SVG.Tool height="20px" />,
   DIRECTORY: <SVG.Directory height="20px" />,
+  ARCHIVE: <SVG.Layers height="20px" />,
 };
 
 const STYLES_NAVIGATION = css`

scenes/SceneArchive.js

@@ -0,0 +1,47 @@
+import * as React from "react";
+import * as System from "~/components/system";
+
+import { css } from "@emotion/react";
+
+import Section from "~/components/core/Section";
+import ScenePage from "~/components/core/ScenePage";
+import ScenePageHeader from "~/components/core/ScenePageHeader";
+
+export default class SceneArchive extends React.Component {
+  render() {
+    return (
+      <ScenePage>
+        <ScenePageHeader title="Archive">
+          Slate provides a way to archive your data onto the Filecoin network.
+          Once your archive is sealed on the Filecoin network, it will be shown
+          here.
+        </ScenePageHeader>
+
+        <Section
+          title="Archives"
+          onAction={this.props.onAction}
+          buttons={[
+            {
+              name: "Archive",
+              type: "SIDEBAR",
+              value: "SIDEBAR_FILECOIN_ARCHIVE",
+            },
+          ]}
+        >
+          <System.Table
+            data={{
+              columns: [
+                {
+                  key: "job",
+                  name: "Job ID",
+                  width: "100%",
+                },
+              ],
+              rows: [],
+            }}
+          />
+        </Section>
+      </ScenePage>
+    );
+  }
+}