feat: compare pathname to contentId to show draft watermark

src/components/theme/DraftBackground/DraftBackground.jsx

@@ -5,16 +5,17 @@ import { BodyClass } from '@plone/volto/helpers';
 import { withRouter } from 'react-router-dom';
 import { compose } from 'redux';
 import { runtimeConfig } from '@plone/volto/runtime_config';
+import { flattenToAppURL } from '@plone/volto/helpers';
 
 /**
  * The review_state and id don't change everytime the page is changed and because of that the draft background
  * will apear on pages that shouldn't have it. The RAZZLE_DISABLE_DRAFT_WATERMARK varible from ENV file should have two possible values:
  * "Hide-No-Workflow" and "Hide-All". If the variable is not present, it should follow the current logic(show the draft image everywhere),
- * if the value is "Hide-No-Workflow", then the draft image is not shown on the /login and /controlpanel and if the value is "Hide-All", then
+ * if the value is "Hide-No-Workflow", then the draft image is not shown on pages like login or controlpanel and if the value is "Hide-All", then
  * the draft image is not visible at all.
  * For example, if the current page is /datatable (that has the draft background) and then we go to Content Types page,
  * the review_state and id will be the same as the ones from /datatable, so the draft background will still be present. By checking
- * if the pathname from (from withRouter) is different than 'login' or 'controlpanel' and based on the varible from ENV,
+ * if the pathname from (from withRouter) is different than the one from state.content.data and based on the varible from ENV,
  * we decide if the draft backgound can be present or not.
  * @param {Object} props
  * @returns
@@ -24,10 +25,9 @@ const DraftBackground = (props) => {
   const razzleDraft =
     runtimeConfig['RAZZLE_DISABLE_DRAFT_WATERMARK'] || 'default';
   const isReviewableStateComponent =
-    props.review_state &&
-    !props.pathname.match('login') &&
-    !props.pathname.match('controlpanel');
+    props.review_state && props.contentId === props.pathname;
 
+  console.log(props.contentId, props.pathname);
   const draftOptions = {
     'Hide-All': 'wf-state-published',
     'Hide-No-Workflow': isReviewableStateComponent
@@ -43,6 +43,6 @@ export default compose(
   withRouter,
   connect((state, props) => ({
     review_state: state.content.data?.review_state,
-    content: state.content,
+    contentId: flattenToAppURL(state.content.data?.['@id']),
   })),
 )(DraftBackground);