API Remove GraphQL

client/src/boot/registerTransforms.js

@@ -1,9 +1,6 @@
 import Injector from 'lib/Injector';
-import readOneBlockQuery from 'state/history/readOneBlockQuery';
 import HistoricElementViewFactory from 'components/HistoricElementView/HistoricElementView';
-import revertToBlockVersionMutation from 'state/history/revertToBlockVersionMutation';
-import readBlocksForAreaQuery from 'state/editor/readBlocksForAreaQuery';
-import addElementToArea from 'state/editor/addElementMutation';
+import revertToBlockVersionRequest from 'state/history/revertToBlockVersionRequest';
 import ArchiveAction from 'components/ElementActions/ArchiveAction';
 import DuplicateAction from 'components/ElementActions/DuplicateAction';
 import SaveAction from 'components/ElementActions/SaveAction';
@@ -25,50 +22,14 @@ export default () => {
     }
   );
 
-  Injector.transform(
-    'elements-history',
-    (updater) => {
-      // Add content block history to the HistoryViewer
-      updater.component(
-        'HistoryViewer.Form_ItemEditForm',
-        readOneBlockQuery,
-        'ElementHistoryViewer'
-      );
-    }
-  );
-
   Injector.transform(
     'blocks-history-revert',
     (updater) => {
-      // Add block element revert GraphQL mutation to the HistoryViewerToolbar
+      // Add revertToVersion() to props.actions on HistoryViewerToolbar
       updater.component(
         'HistoryViewerToolbar.VersionedAdmin.HistoryViewer.Element.HistoryViewerVersionDetail',
-        revertToBlockVersionMutation,
-        'BlockRevertMutation'
-      );
-    }
-  );
-
-  Injector.transform(
-    'cms-element-editor',
-    (updater) => {
-      // Add GraphQL query for reading elements on a page for the ElementEditor
-      updater.component(
-        'ElementList',
-        readBlocksForAreaQuery,
-        'PageElements'
-      );
-    }
-  );
-
-  Injector.transform(
-    'cms-element-adder',
-    (updater) => {
-      // Add GraphQL query for adding elements to an ElementEditor (ElementalArea)
-      updater.component(
-        'AddElementPopover',
-        addElementToArea,
-        'ElementAddButton'
+        revertToBlockVersionRequest,
+        'BlockRevertRequest'
       );
     }
   );

client/src/components/ElementActions/ArchiveAction.js

@@ -1,40 +1,53 @@
 /* global window */
-import React from 'react';
-import { compose } from 'redux';
+import React, { useContext } from 'react';
 import AbstractAction from 'components/ElementActions/AbstractAction';
-import archiveBlockMutation from 'state/editor/archiveBlockMutation';
 import i18n from 'i18n';
+import { ElementEditorContext } from 'components/ElementEditor/ElementEditor';
+import backend from 'lib/Backend';
+import Config from 'lib/Config';
+import { getConfig } from 'state/editor/elementConfig';
+import getJsonErrorMessage from 'lib/getJsonErrorMessage';
 
 /**
  * Adds the elemental menu action to archive a block of any state
  */
 const ArchiveAction = (MenuComponent) => (props) => {
+  const { fetchElements } = useContext(ElementEditorContext);
+
   const handleClick = (event) => {
     event.stopPropagation();
-
-    const { element: { id }, isPublished, actions: { handleArchiveBlock } } = props;
-
+    const isPublished = props.element.isPublished;
     let archiveMessage = i18n._t(
       'ElementArchiveAction.CONFIRM_DELETE',
       'Are you sure you want to send this block to the archive?'
     );
-
     if (isPublished) {
       archiveMessage = i18n._t(
         'ElementArchiveAction.CONFIRM_DELETE_AND_UNPUBLISH',
         'Warning: This block will be unpublished before being sent to the archive. Are you sure you want to proceed?'
       );
     }
-
     // eslint-disable-next-line no-alert
-    if (handleArchiveBlock && window.confirm(archiveMessage)) {
-      handleArchiveBlock(id).then(() => {
-        const preview = window.jQuery('.cms-preview');
-        if (preview && typeof preview.entwine === 'function') {
-          preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
-        }
-      });
+    if (!window.confirm(archiveMessage)) {
+      return;
     }
+    const id = props.element.id;
+    const url = `${getConfig().controllerLink.replace(/\/$/, '')}/api/delete`;
+    backend.post(url, {
+      id
+    }, {
+      'X-SecurityID': Config.get('SecurityID')
+    })
+      .then(() => fetchElements())
+      .catch(async (err) => {
+        const message = await getJsonErrorMessage(err);
+        // Using jquery instead of redux toasts because redux won't connect to an AbstractAction
+        window.jQuery.noticeAdd({
+          text: message,
+          stay: true,
+          type: 'error',
+        });
+      });
   };
 
   const disabled = props.element.canDelete !== undefined && !props.element.canDelete;
@@ -61,4 +74,4 @@ const ArchiveAction = (MenuComponent) => (props) => {
 
 export { ArchiveAction as Component };
 
-export default compose(archiveBlockMutation, ArchiveAction);
+export default ArchiveAction;

client/src/components/ElementActions/DuplicateAction.js

@@ -1,14 +1,19 @@
 /* global window */
-import React from 'react';
-import { compose } from 'redux';
+import React, { useContext } from 'react';
 import AbstractAction from 'components/ElementActions/AbstractAction';
-import duplicateBlockMutation from 'state/editor/duplicateBlockMutation';
 import i18n from 'i18n';
+import { ElementEditorContext } from 'components/ElementEditor/ElementEditor';
+import backend from 'lib/Backend';
+import Config from 'lib/Config';
+import { getConfig } from 'state/editor/elementConfig';
+import getJsonErrorMessage from 'lib/getJsonErrorMessage';
 
 /**
  * Adds the elemental menu action to duplicate a block
  */
 const DuplicateAction = (MenuComponent) => (props) => {
+  const { fetchElements } = useContext(ElementEditorContext);
+
   if (props.type.broken) {
     // Don't allow this action for a broken element.
     return (
@@ -18,15 +23,23 @@ const DuplicateAction = (MenuComponent) => (props) => {
 
   const handleClick = (event) => {
     event.stopPropagation();
-
-    const { element: { id }, actions: { handleDuplicateBlock } } = props;
-
-    if (handleDuplicateBlock) {
-      handleDuplicateBlock(id).then(() => {
-        const preview = window.jQuery('.cms-preview');
-        preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
+    const id = props.element.id;
+    const url = `${getConfig().controllerLink.replace(/\/$/, '')}/api/duplicate`;
+    backend.post(url, {
+      id,
+    }, {
+      'X-SecurityID': Config.get('SecurityID')
+    })
+      .then(() => fetchElements())
+      .catch(async (err) => {
+        const message = await getJsonErrorMessage(err);
+        // Using jquery instead of redux toasts because redux won't connect to an AbstractAction
+        window.jQuery.noticeAdd({
+          text: message,
+          stay: true,
+          type: 'error',
+        });
       });
-    }
   };
 
   const disabled = props.element.canCreate !== undefined && !props.element.canCreate;
@@ -53,4 +66,4 @@ const DuplicateAction = (MenuComponent) => (props) => {
 
 export { DuplicateAction as Component };
 
-export default compose(duplicateBlockMutation, DuplicateAction);
+export default DuplicateAction;

client/src/components/ElementActions/UnpublishAction.js

@@ -1,66 +1,62 @@
 /* global window */
-import React from 'react';
-import { compose } from 'redux';
+import React, { useContext } from 'react';
 import AbstractAction from 'components/ElementActions/AbstractAction';
-import unpublishBlockMutation from 'state/editor/unpublishBlockMutation';
 import i18n from 'i18n';
+import backend from 'lib/Backend';
+import { ElementEditorContext } from 'components/ElementEditor/ElementEditor';
+import Config from 'lib/Config';
+import { getConfig } from 'state/editor/elementConfig';
 
 /**
  * Adds the elemental menu action to unpublish a published block
  */
 const UnpublishAction = (MenuComponent) => (props) => {
+  const { fetchElements } = useContext(ElementEditorContext);
+
   if (props.type.broken) {
     // Don't allow this action for a broken element.
     return (
       <MenuComponent {...props} />
     );
   }
 
-  const { element, type, actions: { handleUnpublishBlock } } = props;
-
-  const handleClick = (event) => {
-    event.stopPropagation();
-    const { jQuery: $ } = window;
+  const reportUnpublicationStatus = (type, title, success) => {
     const noTitle = i18n.inject(
-      i18n._t(
-        'ElementHeader.NOTITLE',
-        'Untitled {type} block'
-      ),
-      { type: type.title }
+      i18n._t('ElementHeader.NOTITLE', 'Untitled {type} block'),
+      { type }
+    );
+    const successMessage = i18n.inject(
+      i18n._t('ElementUnpublishAction.SUCCESS_NOTIFICATION', 'Removed \'{title}\' from the published page'),
+      { title: title || noTitle }
     );
+    const errorMessage = i18n.inject(
+      i18n._t('ElementUnpublishAction.ERROR_NOTIFICATION', 'Error unpublishing \'{title}\''),
+      { title: title || noTitle }
+    );
+    // Using jquery instead of redux toasts because redux won't connect to an AbstractAction
+    window.jQuery.noticeAdd({
+      text: success ? successMessage : errorMessage,
+      stay: false,
+      type: success ? 'success' : 'error',
+    });
+  };
 
-    if (handleUnpublishBlock) {
-      handleUnpublishBlock(element.id)
-        .then(() => {
-          const preview = $('.cms-preview');
-          preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
+  const unpublishElement = () => {
+    const id = props.element.id;
+    const url = `${getConfig().controllerLink.replace(/\/$/, '')}/api/unpublish`;
+    return backend.post(url, {
+      id,
+    }, {
+      'X-SecurityID': Config.get('SecurityID')
+    })
+      .then(() => fetchElements())
+      .then(() => reportUnpublicationStatus(props.type.title, props.element.title, true))
+      .catch(() => reportUnpublicationStatus(props.type.title, props.element.title, false));
+  };
 
-          $.noticeAdd({
-            text: i18n.inject(
-              i18n._t(
-                'ElementUnpublishAction.SUCCESS_NOTIFICATION',
-                'Removed \'{title}\' from the published page'
-              ),
-              { title: element.title || noTitle }
-            ),
-            stay: false,
-            type: 'success'
-          });
-        })
-        .catch(() => {
-          $.noticeAdd({
-            text: i18n.inject(
-              i18n._t(
-                'ElementUnpublishAction.ERROR_NOTIFICATION',
-                'Error unpublishing \'{title}\''
-              ),
-              { title: element.title || noTitle }
-            ),
-            stay: false,
-            type: 'error'
-          });
-        });
-    }
+  const handleClick = (event) => {
+    event.stopPropagation();
+    unpublishElement();
   };
 
   const disabled = props.element.canUnpublish !== undefined && !props.element.canUnpublish;
@@ -80,11 +76,11 @@ const UnpublishAction = (MenuComponent) => (props) => {
   return (
     <MenuComponent {...props}>
       {props.children}
-      {element.isPublished && <AbstractAction {...newProps} />}
+      {props.element.isPublished && <AbstractAction {...newProps} />}
     </MenuComponent>
   );
 };
 
 export { UnpublishAction as Component };
 
-export default compose(unpublishBlockMutation, UnpublishAction);
+export default UnpublishAction;