slates: removing objects from slates

components/system/components/fragments/TableComponents.js

@@ -291,6 +291,8 @@ export const TableContent = ({
       return <Tag>{text}</Tag>;
     case "FILE_DATE":
       return Strings.toDate(text);
+    case "COMPONENT":
+      return text;
     case "FILE_SIZE":
       return Strings.bytesToSize(text, 2);
     case "NEW_WINDOW":

scenes/SceneSlate.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as System from "~/components/system";
 import * as Actions from "~/common/actions";
+import * as Constants from "~/common/constants";
 
 import { css } from "@emotion/react";
 
@@ -30,6 +31,16 @@ const STYLES_RIGHT = css`
   flex-shrink: 0;
 `;
 
+const STYLES_LINK = css`
+  color: ${Constants.system.black};
+  font-family: ${Constants.font.semiBold};
+  cursor: pointer;
+
+  :hover {
+    color: ${Constants.system.brand};
+  }
+`;
+
 export default class SceneSlate extends React.Component {
   state = {
     slatename: this.props.current.slatename,
@@ -49,6 +60,19 @@ export default class SceneSlate extends React.Component {
     }
   }
 
+  _handleRemoveItem = async (id) => {
+    if (!window.confirm("Are you sure you want to delete this item?")) {
+      return null;
+    }
+
+    this.setState(
+      { objects: this.state.objects.filter((o) => o.id !== id) },
+      async () => {
+        await this._handleSave();
+      }
+    );
+  };
+
   _handleSave = async (e) => {
     this.setState({ loading: true });
 
@@ -122,8 +146,26 @@ export default class SceneSlate extends React.Component {
         { key: "name", name: "Data", type: "FILE_LINK", width: "328px" },
         { key: "url", name: "Data URL", width: "100%" },
         { key: "type", name: "Data type", type: "TEXT_TAG", width: "136px" },
+        {
+          key: "button",
+          name: "Remove",
+          width: "136px",
+          hideLabel: true,
+        },
       ],
-      rows: objects,
+      rows: objects.map((o) => {
+        return {
+          ...o,
+          button: (
+            <span
+              css={STYLES_LINK}
+              onClick={() => this._handleRemoveItem(o.id)}
+            >
+              Delete
+            </span>
+          ),
+        };
+      }),
     };
 
     const slateButtons = [