feat: Allow saved elements to be deleted. (#293)

Author: Pavel910

packages/webiny-api-cms/src/dataSource/schemas/Page.js

@@ -182,6 +182,11 @@ export default {
             createElement(
                 data: ElementInput!
             ): ElementResponse
+            
+            # Delete element
+            deleteElement(
+                id: ID!
+            ): DeleteResponse
         },
     `
     ],
@@ -211,7 +216,9 @@ export default {
             // Delete a revision
             deleteRevision: resolveDelete(pageFetcher),
             // Creates a new element
-            createElement: resolveCreate(elementFetcher)
+            createElement: resolveCreate(elementFetcher),
+            // Deletes an element
+            deleteElement: resolveDelete(elementFetcher)
         },
         Page: {
             createdBy: resolveUser("createdBy"),

packages/webiny-app-cms/src/admin/components/withSavedElements/Title.js

@@ -1,19 +1,28 @@
 // @flow
 import * as React from "react";
+import { graphql } from "react-apollo";
+import { compose, withHandlers } from "recompose";
 import styled from "react-emotion";
+import { removePlugin } from "webiny-app/plugins";
 import { Typography } from "webiny-ui/Typography";
 import { IconButton } from "webiny-ui/Button";
+import { withSnackbar } from "webiny-app-admin/components";
+import { withConfirmation, type WithConfirmationProps } from "webiny-ui/ConfirmationDialog";
 import { ReactComponent as DeleteIcon } from "webiny-app-cms/editor/assets/icons/close.svg";
-
-type Props = { title: string, onDelete: Function };
+import { deleteElement } from "./graphql";
 
 const Icon = styled("div")({
     position: "absolute",
     top: 0,
     right: 15
 });
 
-export default ({ title, onDelete }: Props) => {
+type Props = WithConfirmationProps & {
+    title: string,
+    onDelete: Function
+};
+
+const Title = ({ title, onDelete }: Props) => {
     return (
         <Typography use="overline">
             {title}
@@ -23,3 +32,50 @@ export default ({ title, onDelete }: Props) => {
         </Typography>
     );
 };
+
+export default compose(
+    withConfirmation(({ title }) => ({
+        title: "Delete saved element",
+        message: (
+            <p>
+                Are you sure you want to permanently delete the <strong>{title}</strong> element?
+            </p>
+        )
+    })),
+    withSnackbar(),
+    graphql(deleteElement, { name: "deleteElement" }),
+    withHandlers({
+        onDelete: ({
+            id,
+            title,
+            plugin,
+            showConfirmation,
+            showSnackbar,
+            deleteElement,
+            onDelete
+        }) => () => {
+            showConfirmation(async () => {
+                const { data: res } = await deleteElement({
+                    variables: { id }
+                });
+
+                const { error } = res.cms.deleteElement;
+                if (error) {
+                    return showSnackbar(error.message);
+                }
+
+                removePlugin(plugin);
+
+                if (typeof onDelete === "function") {
+                    onDelete();
+                }
+
+                showSnackbar(
+                    <span>
+                        Element <strong>{title}</strong> deleted!
+                    </span>
+                );
+            });
+        }
+    })
+)(Title);

packages/webiny-app-cms/src/admin/components/withSavedElements/createElementPlugin.js

@@ -31,13 +31,15 @@ export default (el: Element) => {
     const previewContent = cloneDeep(el.content);
     updateChildPaths(previewContent);
 
+    const name = "cms-saved-element-" + el.id;
+
     addPlugin({
-        name: "cms-saved-element-" + el.id,
+        name,
         type: "cms-element",
         target: rootPlugin.target,
         toolbar: {
-            title() {
-                return <Title title={el.name} onDelete={() => {}} />;
+            title({ refresh }) {
+                return <Title plugin={name} title={el.name} id={el.id} onDelete={refresh}/>;
             },
             group: "cms-element-group-saved",
             preview() {

packages/webiny-app-cms/src/admin/components/withSavedElements/graphql.js

@@ -0,0 +1,16 @@
+// @flow
+import gql from "graphql-tag";
+
+export const deleteElement = gql`
+    mutation DeleteElement($id: ID!) {
+        cms {
+            deleteElement(id: $id) {
+                data
+                error {
+                    code
+                    message
+                }
+            }
+        }
+    }
+`;

packages/webiny-app-cms/src/admin/plugins/pageDetails/header/deletePage/DeletePage.js

@@ -1,14 +1,15 @@
+// @flow
 import React from "react";
-import { compose, withProps, withHandlers } from "recompose";
+import { compose, withHandlers } from "recompose";
 import dot from "dot-prop-immutable";
-import { withApollo, graphql } from "react-apollo";
+import { graphql } from "react-apollo";
 import { withRouter } from "webiny-app/components";
 import { withDialog, withSnackbar } from "webiny-app-admin/components";
 import { IconButton } from "webiny-ui/Button";
 import { Tooltip } from "webiny-ui/Tooltip";
 import { withConfirmation, type WithConfirmationProps } from "webiny-ui/ConfirmationDialog";
 import { ReactComponent as DeleteIcon } from "webiny-app-cms/admin/assets/delete.svg";
-import { fragments, deletePage } from "webiny-app-cms/admin/graphql/pages";
+import { deletePage } from "webiny-app-cms/admin/graphql/pages";
 
 type Props = WithConfirmationProps & {
     confirmDelete: Function
@@ -24,7 +25,6 @@ const DeletePage = ({ confirmDelete }: Props) => {
 
 export default compose(
     withRouter(),
-    withApollo,
     withConfirmation(({ pageDetails: { page } }) => ({
         title: "Delete page",
         message: (
@@ -39,12 +39,10 @@ export default compose(
     withSnackbar(),
     withHandlers({
         confirmDelete: ({
-            client,
             pageDetails: { page },
             router,
             showConfirmation,
             deletePage,
-            pageDetails,
             showDialog,
             showSnackbar
         }) => () => {

packages/webiny-app-cms/src/editor/plugins/elements/column/Column.js

@@ -38,7 +38,7 @@ const Column = pure(({ element, dropElement, togglePlugin }) => {
         <ColumnContainer>
             <ElementStyle element={element} style={{ height: "100%" }}>
                 {!elements.length && (
-                    <DropZone.Center id={id} type={type} onDrop={dropElement}>
+                    <DropZone.Center key={id} id={id} type={type} onDrop={dropElement}>
                         <IconButton
                             className={addIcon + " addIcon"}
                             icon={<AddCircleOutline />}

packages/webiny-app-cms/src/editor/plugins/elements/column/ColumnChild.js

@@ -19,13 +19,12 @@ type Props = {
 const ColumnChild = ({
     target,
     element,
-    index,
     last = false,
     dropElementAbove,
     dropElementBelow
 }: Props) => {
     return (
-        <React.Fragment key={element.id}>
+        <React.Fragment>
             <DropZone.Above type={target.type} onDrop={dropElementAbove} />
             <Element id={element.id} />
             {last && <DropZone.Below type={target.type} onDrop={dropElementBelow} />}
@@ -46,7 +45,7 @@ export default compose(
         dropElementAbove: ({ dropElement, target, index }) => (source: Object) => {
             dropElement({ source, target: { ...target, position: index } });
         },
-        dropElementBelow: ({ dropElement, target, index, count }) => (source: Object) => {
+        dropElementBelow: ({ dropElement, target, count }) => (source: Object) => {
             dropElement({ source, target: { ...target, position: count } });
         }
     })

packages/webiny-app-cms/src/editor/plugins/toolbar/addElement/AddElement.js

@@ -131,6 +131,10 @@ class AddElement extends React.Component<Props, State> {
         );
     };
 
+    refresh = () => {
+        this.setState({ group: this.state.group });
+    };
+
     render() {
         const { params, theme } = this.props;
 
@@ -162,7 +166,7 @@ class AddElement extends React.Component<Props, State> {
                                         <Styled.ElementBox>
                                             <Styled.ElementTitle>
                                                 {typeof plugin.toolbar.title === "function" ? (
-                                                    plugin.toolbar.title()
+                                                    plugin.toolbar.title({ refresh: this.refresh })
                                                 ) : (
                                                     <Typography use="overline">
                                                         {plugin.toolbar.title}