From 2cd34912a99613bd46a8634f5fe2a673a76d581b Mon Sep 17 00:00:00 2001
From: Alin Voinea <contact@avoinea.com>
Date: Fri, 22 Sep 2023 19:02:38 +0300
Subject: [PATCH] refactor: Use Pluggable to insert workflow button on Toolbar
 - refs #258073

---
 src/ProgressWorkflow.jsx | 107 ++++++++++++++++++---------------------
 src/index.js             |   4 +-
 src/less/editor.less     |   9 +++-
 3 files changed, 56 insertions(+), 64 deletions(-)

diff --git a/src/ProgressWorkflow.jsx b/src/ProgressWorkflow.jsx
index 237459b..1ad7f36 100644
--- a/src/ProgressWorkflow.jsx
+++ b/src/ProgressWorkflow.jsx
@@ -1,8 +1,7 @@
-import { Pluggable } from '@plone/volto/components/manage/Pluggable';
+import { Pluggable, Plug } from '@plone/volto/components/manage/Pluggable';
 import { getBaseUrl } from '@plone/volto/helpers';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
-import { Portal } from 'react-portal';
 import { useDispatch, useSelector } from 'react-redux';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 import { getWorkflowProgress } from './actions';
@@ -42,7 +41,8 @@ const itemTracker = (tracker, currentStateKey, currentState) => {
  * @summary The React component that shows progress tracking of selected content.
  */
 const ProgressWorkflow = (props) => {
-  const { content, pathname } = props;
+  const { content, pathname, token } = props;
+  const isAuth = !!token;
   const currentStateKey = content?.review_state;
   const dispatch = useDispatch();
   const contentId = content?.['@id'];
@@ -53,10 +53,8 @@ const ProgressWorkflow = (props) => {
     pathname.endsWith('/contents') ||
     pathname.endsWith('/edit') ||
     pathname === basePathname;
-  const [isToolbarOpen, setIsToolbarOpen] = useState(false);
   const [workflowProgressSteps, setWorkflowProgressSteps] = useState([]);
   const [currentState, setCurrentState] = useState(null);
-  const token = useSelector((state) => state?.userSession?.token);
   const workflowProgress = useSelector((state) => {
     if (state?.workflowProgress?.workflow?.loaded === true) {
       const progress = state?.workflowProgress?.result;
@@ -101,7 +99,6 @@ const ProgressWorkflow = (props) => {
         description,
       });
     };
-    const hasToolbar = document.querySelector('#toolbar .toolbar-actions');
 
     /**
      * remove states that are 0% unless if it is current state
@@ -136,8 +133,6 @@ const ProgressWorkflow = (props) => {
       return result;
     };
 
-    setIsToolbarOpen(!!hasToolbar);
-
     // filter out paths that don't have workflow (home, login, dexterity even if the content obj stays the same etc)
     if (
       contentId &&
@@ -205,58 +200,52 @@ const ProgressWorkflow = (props) => {
     private: 'private',
   };
 
-  return (
-    isToolbarOpen && (
-      <Portal
-        node={__CLIENT__ && document.querySelector('#toolbar .toolbar-actions')}
-      >
-        {currentState && contentContainsPathname ? (
-          <>
-            <div ref={pusherRef}>
-              <button
-                className={`circle-right-btn ${
-                  currentStateClass[currentStateKey]
-                    ? `review-state-${currentStateKey}`
-                    : currentState.done === 100
-                    ? 'review-state-published'
-                    : ''
-                }`}
-                id="toolbar-cut-blocks"
-                onClick={toggleVisibleSide}
-                title="Editing progress"
-              >
-                {`${currentState.done}%`}
-              </button>
-              <div className={`sidenav-ol sidenav-ol--wp is-hidden`}>
-                <ol
-                  className="progress-reversed"
-                  style={{
-                    counterReset: `item ${workflowProgressSteps.length + 1}`,
-                  }}
-                >
-                  {workflowProgressSteps.map((progressItem) =>
-                    itemTracker(progressItem, currentStateKey, currentState),
-                  )}
-                </ol>
-              </div>
-            </div>
-            <div
-              className={`review-state-text ${
-                currentStateClass[currentStateKey]
-                  ? `review-state-${currentStateKey}`
-                  : currentState.done === 100
-                  ? 'review-state-published'
-                  : ''
-              }`}
+  return isAuth && currentState && contentContainsPathname ? (
+    <Plug pluggable="main.toolbar.top" id="volto-workflow-progress" order={0}>
+      <div className="toolbar-workflow-progress" id="toolbar-workflow-progress">
+        <div ref={pusherRef}>
+          <button
+            className={`circle-right-btn ${
+              currentStateClass[currentStateKey]
+                ? `review-state-${currentStateKey}`
+                : currentState.done === 100
+                ? 'review-state-published'
+                : ''
+            }`}
+            id="toolbar-cut-blocks"
+            onClick={toggleVisibleSide}
+            title="Editing progress"
+          >
+            {`${currentState.done}%`}
+          </button>
+          <div className={`sidenav-ol sidenav-ol--wp is-hidden`}>
+            <ol
+              className="progress-reversed"
+              style={{
+                counterReset: `item ${workflowProgressSteps.length + 1}`,
+              }}
             >
-              {currentState.title}
-            </div>
-          </>
-        ) : (
-          <></>
-        )}
-      </Portal>
-    )
+              {workflowProgressSteps.map((progressItem) =>
+                itemTracker(progressItem, currentStateKey, currentState),
+              )}
+            </ol>
+          </div>
+        </div>
+        <div
+          className={`review-state-text ${
+            currentStateClass[currentStateKey]
+              ? `review-state-${currentStateKey}`
+              : currentState.done === 100
+              ? 'review-state-published'
+              : ''
+          }`}
+        >
+          {currentState.title}
+        </div>
+      </div>
+    </Plug>
+  ) : (
+    ''
   );
 };
 
diff --git a/src/index.js b/src/index.js
index 205ec63..c368f4f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,10 +29,8 @@ const applyConfig = (config) => {
     },
   };
 
-  const appExtras = config.settings.appExtras || [];
-
   config.settings.appExtras = [
-    ...appExtras,
+    ...(config.settings.appExtras || []),
     {
       match: '',
       component: ProgressWorkflow,
diff --git a/src/less/editor.less b/src/less/editor.less
index 8a8cc0f..535b4b6 100644
--- a/src/less/editor.less
+++ b/src/less/editor.less
@@ -10,12 +10,18 @@
 @progress-sidebar-width: 200px;
 @progress-sidebar-left: 80px;
 
+.toolbar-workflow-progress {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
 .circle-right-btn {
   display: inline-block !important;
   width: 45px;
   height: 45px;
   border: 2px solid @default-state-color !important;
   margin: 4px 2px;
+  margin-bottom: 0.5rem !important;
   border-radius: 50%;
   color: @default-state-color !important;
   cursor: pointer !important;
@@ -23,7 +29,6 @@
   font-weight: 600;
   text-align: center !important;
   text-decoration: none;
-  margin-bottom: 0.5rem !important;
 }
 
 .sidenav-ol {
@@ -68,8 +73,8 @@
 }
 
 .review-state-text {
-  font-size: 12px;
   color: @published-state-color !important;
+  font-size: 12px;
   font-weight: 500;
   text-align: center;
 }