Merge pull request #374 from filecoin-project/@tarafanlin/sandboxscene

creating a hidden scene for feature experiements

common/navigation-data.js

@@ -88,6 +88,14 @@ export const generate = ({ library = [], slates = [] }) => [
     children: null,
     ignore: true,
   },
+  {
+    id: "V1_NAVIGATION_TARA",
+    decorator: "TARA",
+    name: "Tara",
+    pageTitle: "Tara Sandbox",
+    children: null,
+    ignore: true,
+  },
   ...constructSlatesTreeForNavigation(slates),
   constructFilesTreeForNavigation(library),
   /*

components/core/Application.js

@@ -34,6 +34,7 @@ import SceneArchive from "~/scenes/SceneArchive";
 import SceneMakeFilecoinDeal from "~/scenes/SceneMakeFilecoinDeal";
 import SceneEncryptedData from "~/scenes/SceneEncryptedData";
 import SceneMiners from "~/scenes/SceneMiners";
+import SceneTara from "~/scenes/SceneTara";
 
 // NOTE(jim):
 // Sidebars each have a decorator and can be shown to with _handleAction
@@ -97,6 +98,7 @@ const SCENES = {
   MAKE_DEAL: <SceneMakeFilecoinDeal />,
   ENCRYPTED: <SceneEncryptedData />,
   MINERS: <SceneMiners />,
+  TARA: <SceneTara />,
 };
 
 export default class ApplicationPage extends React.Component {
@@ -324,8 +326,7 @@ export default class ApplicationPage extends React.Component {
         name: "create-alert",
         detail: {
           alert: {
-            message:
-              "We encountered issues updating your uploaded files. Please try again",
+            message: "We encountered issues updating your uploaded files. Please try again",
           },
         },
       });
@@ -359,9 +360,7 @@ export default class ApplicationPage extends React.Component {
     if (
       current.target &&
       current.target.slateId &&
-      this.state.viewer.slates
-        .map((slate) => slate.id)
-        .includes(current.target.slateId)
+      this.state.viewer.slates.map((slate) => slate.id).includes(current.target.slateId)
     ) {
       dispatchCustomEvent({
         name: "remote-update-slate-screen",
@@ -515,8 +514,7 @@ export default class ApplicationPage extends React.Component {
 
   _handleDeleteYourself = async () => {
     // TODO(jim): Put this somewhere better for messages.
-    const message =
-      "Do you really want to delete your account? It will be permanently removed";
+    const message = "Do you really want to delete your account? It will be permanently removed";
     if (!window.confirm(message)) {
       return false;
     }
@@ -528,8 +526,7 @@ export default class ApplicationPage extends React.Component {
         name: "create-alert",
         detail: {
           alert: {
-            message:
-              "We're having trouble connecting right now. Please try again later",
+            message: "We're having trouble connecting right now. Please try again later",
           },
         },
       });
@@ -784,24 +781,21 @@ export default class ApplicationPage extends React.Component {
       />
     );
 
-    const scene = React.cloneElement(
-      SCENES[next.scene || current.target.decorator],
-      {
-        current: current.target,
-        data: this.state.data,
-        viewer: this.state.viewer,
-        selected: this.state.selected,
-        onSelectedChange: this._handleSelectedChange,
-        onViewerChange: this._handleViewerChange,
-        onDeleteYourself: this._handleDeleteYourself,
-        onAction: this._handleAction,
-        onUpload: this._handleUploadFiles,
-        onBack: this._handleBack,
-        onForward: this._handleForward,
-        onRehydrate: this.rehydrate,
-        sceneId: current.target.id,
-      }
-    );
+    const scene = React.cloneElement(SCENES[next.scene || current.target.decorator], {
+      current: current.target,
+      data: this.state.data,
+      viewer: this.state.viewer,
+      selected: this.state.selected,
+      onSelectedChange: this._handleSelectedChange,
+      onViewerChange: this._handleViewerChange,
+      onDeleteYourself: this._handleDeleteYourself,
+      onAction: this._handleAction,
+      onUpload: this._handleUploadFiles,
+      onBack: this._handleBack,
+      onForward: this._handleForward,
+      onRehydrate: this.rehydrate,
+      sceneId: current.target.id,
+    });
 
     let sidebarElement;
     if (this.state.sidebar) {
@@ -830,11 +824,7 @@ export default class ApplicationPage extends React.Component {
 
     return (
       <React.Fragment>
-        <WebsitePrototypeWrapper
-          description={description}
-          title={title}
-          url={url}
-        >
+        <WebsitePrototypeWrapper description={description} title={title} url={url}>
           <ApplicationLayout
             onAction={this._handleAction}
             header={headerElement}
@@ -846,10 +836,7 @@ export default class ApplicationPage extends React.Component {
           >
             {scene}
           </ApplicationLayout>
-          <GlobalViewerCID
-            onRehydrate={this.rehydrate}
-            onAction={this._handleAction}
-          />
+          <GlobalViewerCID onRehydrate={this.rehydrate} onAction={this._handleAction} />
           <System.GlobalCarousel />
           <System.GlobalModal />
         </WebsitePrototypeWrapper>

scenes/SceneTara.js

@@ -0,0 +1,65 @@
+import * as React from "react";
+import * as Actions from "~/common/actions";
+import * as System from "~/components/system";
+import * as SVG from "~/common/svg";
+import * as Constants from "~/common/constants";
+
+import { css } from "@emotion/react";
+import { TabGroup } from "~/components/core/TabGroup";
+import { ButtonPrimary } from "~/components/system/components/Buttons";
+import { dispatchCustomEvent } from "~/common/custom-events";
+
+import ScenePage from "~/components/core/ScenePage";
+import DataView from "~/components/core/DataView";
+import ScenePageHeader from "~/components/core/ScenePageHeader";
+import EmptyState from "~/components/core/EmptyState";
+
+const STYLES_ICONS = css`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+`;
+
+export default class SceneTara extends React.Component {
+  render() {
+    return (
+      <ScenePage>
+        <ScenePageHeader
+          title="Tara Sandbox"
+          actions={
+            <ButtonPrimary
+              onClick={() => {
+                this.props.onAction({
+                  type: "SIDEBAR",
+                  value: "SIDEBAR_ADD_FILE_TO_BUCKET",
+                });
+              }}
+            >
+              Upload data
+            </ButtonPrimary>
+          }
+        />
+
+        {this.props.viewer.library[0].children && this.props.viewer.library[0].children.length ? (
+          <DataView
+            onAction={this.props.onAction}
+            viewer={this.props.viewer}
+            items={this.props.viewer.library[0].children}
+            onRehydrate={this.props.onRehydrate}
+          />
+        ) : (
+          <EmptyState>
+            <div css={STYLES_ICONS}>
+              <SVG.Sound height="24px" style={{ margin: "0 16px" }} />
+              <SVG.Document height="24px" style={{ margin: "0 16px" }} />
+              <SVG.Image height="24px" style={{ margin: "0 16px" }} />
+              <SVG.Book height="24px" style={{ margin: "0 16px" }} />
+              <SVG.Video height="24px" style={{ margin: "0 16px" }} />
+            </div>
+            <div style={{ marginTop: 24 }}>Drag and drop files into Slate to upload</div>
+          </EmptyState>
+        )}
+      </ScenePage>
+    );
+  }
+}