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,