Merge pull request #193 from creative-commoners/pulls/4/versioned-but…

…ton-state

ENH Set Published button dirty state when Link is an unpublished state

client/src/components/LinkField/LinkField.js

@@ -42,6 +42,7 @@ const section = 'SilverStripe\\LinkField\\Controllers\\LinkFieldController';
 const LinkField = ({
   value = null,
   onChange,
+  onNonPublishedVersionedState,
   types = {},
   actions,
   isMulti = false,
@@ -136,7 +137,7 @@ const LinkField = ({
   /**
    * Update the component when the 'Delete' button in the LinkPicker is clicked
    */
-  const onDelete = (linkID, deleteType) => {
+  const handleDelete = (linkID, deleteType) => {
     const versionState = data[linkID]?.versionState || '';
     const isVersioned = ['draft', 'modified', 'published'].includes(versionState);
     const deleteText = isVersioned
@@ -172,6 +173,46 @@ const LinkField = ({
     onChange(isMulti ? Object.keys(newData) : 0);
   };
 
+  /**
+   * Update the edit form "Publish" button state to be dirty when an link has an
+   * unpublished version state
+   *
+   * We do not update the state of the "Save" button because LinkField exclusively updates
+   * via AJAX so that there's no need to save the page to update a Link DataObject
+   *
+   * This is fairly hackish code that directly manipulates the DOM, however there's no
+   * clean way to do this since the publish button is not a react component, and the existing
+   * jQuery change tracker does not allow independently updating only the publish button
+   */
+  const handleUnpublishedVersionedState = () => {
+    const cssSelector = [
+      // CMS page edit form publish button
+      '.cms-edit-form button[data-text-alternate]#Form_EditForm_action_publish',
+      // GridField managed DataObject edit form publish button
+      '.cms-edit-form button[data-text-alternate]#Form_ItemEditForm_action_doPublish'
+    ].join(',');
+    const publishButton = document.querySelector(cssSelector);
+    if (!publishButton) {
+      return;
+    }
+    const dataBtnAlternateRemove = publishButton.getAttribute('data-btn-alternate-remove') || '';
+    dataBtnAlternateRemove.split(' ').forEach((className) => {
+      if (className) {
+        publishButton.classList.remove(className);
+      }
+    });
+    const dataBtnAlternateAdd = publishButton.getAttribute('data-btn-alternate-add') || '';
+    dataBtnAlternateAdd.split(' ').forEach((className) => {
+      if (className) {
+        publishButton.classList.add(className);
+      }
+    });
+    const dataTextAlternate = publishButton.getAttribute('data-text-alternate');
+    if (dataTextAlternate) {
+      publishButton.innerHTML = dataTextAlternate;
+    }
+  }
+
   /**
    * Render all of the links currently in the field data
    */
@@ -194,8 +235,9 @@ const LinkField = ({
         versionState={data[linkID]?.versionState}
         typeTitle={type.title || ''}
         typeIcon={type.icon}
-        onDelete={onDelete}
+        onDelete={handleDelete}
         onClick={() => { setEditingID(linkID); }}
+        onUnpublishedVersionedState={handleUnpublishedVersionedState}
         canDelete={data[linkID]?.canDelete ? true : false}
         isMulti={isMulti}
         isFirst={i === 0}

client/src/components/LinkPicker/LinkPickerTitle.js

@@ -41,6 +41,7 @@ const LinkPickerTitle = ({
   typeIcon,
   onDelete,
   onClick,
+  onUnpublishedVersionedState,
   canDelete,
   isMulti,
   isFirst,
@@ -78,6 +79,9 @@ const LinkPickerTitle = ({
   const deleteText = ['unversioned', 'unsaved'].includes(versionState)
     ? i18n._t('LinkField.DELETE', 'Delete')
     : i18n._t('LinkField.ARCHIVE', 'Archive');
+  if (['draft', 'modified'].includes(versionState)) {
+    onUnpublishedVersionedState();
+  }
   return <div
     className={className}
     ref={setNodeRef}
@@ -129,6 +133,7 @@ LinkPickerTitle.propTypes = {
   typeIcon: PropTypes.string.isRequired,
   onDelete: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,
+  onUnpublishedVersionedState: PropTypes.func.isRequired,
   canDelete: PropTypes.bool.isRequired,
   isMulti: PropTypes.bool.isRequired,
   isFirst: PropTypes.bool.isRequired,

client/src/components/LinkPicker/tests/LinkPickerTitle-test.js

@@ -19,6 +19,7 @@ function makeProps(obj = {}) {
     disabled: false,
     onDelete: () => {},
     onClick: () => {},
+    onUnpublishedVersionedState: () => {},
     isMulti: false,
     isFirst: false,
     isLast: false,