NEW Add save action to element inline edit forms

[robbieaverill]

This PR:

• adds inline save action into the more actions menu
• moves the click bubbling protection from the MoreActions wrapper into the Element
• adds CSRF protection to the form submissions
• adds some helpers to get the serialized content of the current form (because we aren't doing actual form submissions), and to get config from the Redux store
• switches <button> for <DropdownItem> in the more actions menu so that clicking on the items will correctly close the menu via toggle state

Issue: #296 (doesn't close it yet)

[robbieaverill]

Note that if #397 is merged then we will need to remove the "get serialised form data" helper and simply pull out the redux form state instead, because that change would mean that the DOM doesn't always contain the form fields, but the state will after first initial load. We could also conditionally render the save button if there is some data in the redux-form state for that element (would solve one of the outstanding tasks)

[robbieaverill]

I've pushed an update to refetch apollo queries when saving an inline form. This is a stop-gap solution to get the Element data to update after editing the contents within it (e.g. the title and versioning state).

In a perfect world we would be doing this optimistically but for now telling Apollo to refetch is better than nothing.

[robbieaverill]

I have this nasty piece of code which is optimistically adding to the query cache, but it needs to replace the node rather than append the new one:

diff --git a/client/src/components/ElementActions/SaveAction.js b/client/src/components/ElementActions/SaveAction.js
index d62c35d..b22cf0d 100644
--- a/client/src/components/ElementActions/SaveAction.js
+++ b/client/src/components/ElementActions/SaveAction.js
@@ -7,6 +7,7 @@ import backend from 'lib/Backend';
 import i18n from 'i18n';
 import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
 import { getSerializedFormData } from 'state/editor/getSerializedFormData';
+import { query as readBlocksQuery, config as readBlocksConfig } from 'state/editor/readBlocksForPageQuery';
 
 /**
  * Using a REST backend, serialize the current form data and post it to the backend endpoint to save
@@ -16,7 +17,7 @@ const SaveAction = (MenuComponent) => (props) => {
   const handleClick = (event) => {
     event.stopPropagation();
 
-    const { id, securityId } = props;
+    const { id, pageId, securityId } = props;
 
     const formData = getSerializedFormData(`Form_ElementForm_${id}`);
 
@@ -34,9 +35,38 @@ const SaveAction = (MenuComponent) => (props) => {
       // Update the Apollo query cache with the new form data
       const { apolloClient } = window.ss;
 
-      // @todo optimistically update the data for the current element instead of
-      // rerunning the whole query
-      apolloClient.queryManager.reFetchObservableQueries();
+      const variables = readBlocksConfig.options({ pageId }).variables;
+
+      const query = apolloClient.readQuery({ query: readBlocksQuery, variables });
+
+      const oldData = query.readOnePage.ElementalAreaIfExists.Elements.edges.find(element => element.node.ID === id);
+      const newData = {
+        node: {
+          ...oldData.node,
+          Title: 'Testing',
+        },
+      };
+
+      console.log(newData);
+      const newQuery = {
+        ...query.readOnePage,
+        ElementalAreaIfExists: {
+          ...query.readOnePage.ElementalAreaIfExists,
+          Elements: {
+            ...query.readOnePage.ElementalAreaIfExists.Elements,
+            edges: [
+              ...query.readOnePage.ElementalAreaIfExists.Elements.edges,
+              newData,
+            ],
+          },
+        },
+      };
+      console.log(newQuery);
+
+      apolloClient.writeQuery({
+        query: readBlocksQuery,
+        data: newQuery,
+      });
     });
   };

It also doesn't automatically add a new item to the UI. We'd also need to pull the title out of formData, e.g.

  Title: formData[`PageElements_${id}_Title`],

[raissanorth]

Looking good. Seems to need a rebase, but happy to merge otherwise.

[raissanorth]

Is this not done on line 121?

[robbieaverill]

Yep it is done now, sorry

[raissanorth]

That branch name 👍

[NightJar]

I pair-peer-reviewed with @raissanorth, so her comments stand for us both.
Looks good to me :) I like the use of DropdownItem instead of button!

Raissa will rebase (and remove that @todo) and merge while you 💤 😃