ENH Refactor Element

client/src/components/ElementActions/PublishAction.js

@@ -4,7 +4,7 @@ import { compose } from 'redux';
 import AbstractAction from 'components/ElementActions/AbstractAction';
 import publishBlockMutation from 'state/editor/publishBlockMutation';
 import i18n from 'i18n';
-import { ElementContext } from 'components/ElementEditor/Element';
+import { ElementContext } from 'components/ElementEditor/ElementContext';
 
 /**
  * Adds the elemental menu action to publish a draft/modified block

client/src/components/ElementActions/SaveAction.js

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import AbstractAction from 'components/ElementActions/AbstractAction';
 import i18n from 'i18n';
-import { ElementContext } from 'components/ElementEditor/Element';
+import { ElementContext } from 'components/ElementEditor/ElementContext';
 
 const SaveAction = (MenuComponent) => (props) => {
   const {

client/src/components/ElementActions/tests/PublishAction-test.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { Component as PublishAction } from '../PublishAction';
-import { ElementContext } from '../../ElementEditor/Element';
+import { ElementContext } from '../../ElementEditor/ElementContext';
 
 window.jQuery = {
   noticeAdd: () => null

client/src/components/ElementActions/tests/SaveAction-test.js

@@ -4,7 +4,7 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { Component as SaveAction } from '../SaveAction';
-import { ElementContext } from '../../ElementEditor/Element';
+import { ElementContext } from '../../ElementEditor/ElementContext';
 
 function makeProps(obj = {}) {
   return {

client/src/components/ElementEditor/Content.js

@@ -2,10 +2,6 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { inject } from 'lib/Injector';
 import { compose } from 'redux';
-import { connect } from 'react-redux';
-import { loadElementFormStateName } from 'state/editor/loadElementFormStateName';
-import { isDirty } from 'redux-form';
-import getFormState from 'lib/getFormState';
 
 class Content extends PureComponent {
   render() {
@@ -87,18 +83,11 @@ Content.propTypes = {
   onFormInit: PropTypes.func,
   ensureFormRendered: PropTypes.bool,
   formHasRendered: PropTypes.bool,
+  formDirty: PropTypes.object,
 };
 
 Content.defaultProps = {};
 
-function mapStateToProps(state, ownProps) {
-  const formName = loadElementFormStateName(ownProps.id);
-
-  return {
-    formDirty: isDirty(`element.${formName}`, getFormState)(state),
-  };
-}
-
 export { Content as Component };
 
 export default compose(
@@ -108,6 +97,5 @@ export default compose(
       SummaryComponent, InlineEditFormComponent,
     }),
     () => 'ElementEditor.ElementList.Element'
-  ),
-  connect(mapStateToProps)
+  )
 )(Content);

client/src/components/ElementEditor/Element.js

@@ -1,6 +1,6 @@
 /* global window */
 
-import React, { createContext, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { elementType } from 'types/elementType';
 import { elementTypeType } from 'types/elementTypeType';
@@ -12,14 +12,14 @@ import { connect } from 'react-redux';
 import { submit } from 'redux-form';
 import { loadElementFormStateName } from 'state/editor/loadElementFormStateName';
 import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
+import { query as readBlocksForAreaQuery } from 'state/editor/readBlocksForAreaQuery';
 import * as TabsActions from 'state/tabs/TabsActions';
 import { DragSource, DropTarget } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { elementDragSource, isOverTop } from 'lib/dragHelpers';
 import * as toastsActions from 'state/toasts/ToastsActions';
 import { addFormChanged, removeFormChanged } from 'state/unsavedForms/UnsavedFormsActions';
-
-export const ElementContext = createContext(null);
+import { ElementContext } from 'components/ElementEditor/ElementContext';
 
 /**
  * The Element component used in the context of an ElementEditor shows the summary
@@ -188,11 +188,14 @@ const Element = (props) => {
     }
   };
 
-  const refetchElementalArea = () => {
-    // This will trigger a graphql readOneElementalArea request that will cause this
-    // element to re-render including any updated title and versioned badge
-    window.ss.apolloClient.queryManager.reFetchObservableQueries();
-  };
+  // This will triggre a graphql request that will cause this
+  // element to re-render including any updated title and versioned badge
+  const refetchElementalArea = () => window.ss.apolloClient.queryManager.refetchQueries({
+    include: [{
+      query: readBlocksForAreaQuery,
+      variables: { id: props.areaId }
+    }]
+  });
 
   /**
    * Update the active tab on tab actions menu button click event. Is passed down to InlineEditForm.
@@ -271,10 +274,10 @@ const Element = (props) => {
     // time under certain conditions, specifically during a behat test when trying to publish a closed
     // block when presumably the apollo cache is empty (or something like that). This happens late and
     // there are no hooks/callbacks available after this happens the input onchange handlers are fired
-    setTimeout(() => {
-      props.dispatchRemoveFormChanged();
-    }, 500);
-    refetchElementalArea();
+    Promise.all(refetchElementalArea())
+      .then(() => {
+        setTimeout(() => props.dispatchRemoveFormChanged(), 500);
+      });
   };
 
   const handleFormInit = (activeTab) => {

client/src/components/ElementEditor/ElementContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ElementContext = createContext(null);

tests/Behat/features/publish-block-element.feature

@@ -21,6 +21,7 @@ Feature: Publish elements in the CMS
     And I should see "Block B"
 
   @modal
+  @sboyd
   Scenario: I can publish a block
     Given I see a list of blocks
     When I press the "View actions" button