fix: render Ordertab only when active

plone · Jan 13, 2025 · 7b06c00 · 7b06c00
1 parent 1c88feb
commit 7b06c00
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 38 deletions.
diff --git a/packages/volto/news/6492.bugfix b/packages/volto/news/6492.bugfix
@@ -0,0 +1 @@
+You can now render the order side panel only when the 'Order' tab is active. Previously, the panel would render unnecessarily even when not active.@Abhishek-17h
diff --git a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx
@@ -276,6 +276,7 @@ const BlocksForm = (props) => {
     <>
       {isMainForm &&
         isClient &&
+        document.getElementById('sidebar-order') &&
         createPortal(
           <div>
             <Order
@@ -353,7 +354,6 @@ const BlocksForm = (props) => {
                 editable,
                 showBlockChooser: selectedBlock === childId,
                 detached: isContainer,
-                // Properties to pass to the BlocksForm to match the View ones
                 content: properties,
                 history,
                 location,
@@ -373,5 +373,4 @@ const BlocksForm = (props) => {
     </>
   );
 };
-
 export default BlocksForm;
diff --git a/packages/volto/src/components/manage/Sidebar/Sidebar.jsx b/packages/volto/src/components/manage/Sidebar/Sidebar.jsx
@@ -186,19 +186,20 @@ const Sidebar = (props) => {
             },
             !!orderTab && {
               menuItem: intl.formatMessage(messages.order),
-              pane: (
-                <Tab.Pane
-                  key="order"
-                  className="tab-wrapper"
-                  id="sidebar-order"
-                >
-                  <Icon
-                    className="tab-forbidden"
-                    name={forbiddenSVG}
-                    size="48px"
-                  />
-                </Tab.Pane>
-              ),
+              pane:
+                tab === 2 ? (
+                  <Tab.Pane
+                    key="order"
+                    className="tab-wrapper"
+                    id="sidebar-order"
+                  >
+                    <Icon
+                      className="tab-forbidden"
+                      name={forbiddenSVG}
+                      size="48px"
+                    />
+                  </Tab.Pane>
+                ) : null,
             },
             !!settingsTab && {
               menuItem: intl.formatMessage(messages.settings),

diff --git a/packages/volto/src/components/manage/Sidebar/__snapshots__/Sidebar.test.jsx.snap b/packages/volto/src/components/manage/Sidebar/__snapshots__/Sidebar.test.jsx.snap
@@ -87,29 +87,6 @@ Array [
           xmlns=""
         />
       </div>
-      <div
-        className="ui bottom attached segment tab tab-wrapper"
-        id="sidebar-order"
-      >
-        <svg
-          className="icon tab-forbidden"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": undefined,
-            }
-          }
-          onClick={null}
-          style={
-            Object {
-              "fill": "currentColor",
-              "height": "48px",
-              "width": "auto",
-            }
-          }
-          viewBox=""
-          xmlns=""
-        />
-      </div>
     </div>
   </div>,
   <div
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		You can now render the order side panel only when the 'Order' tab is active. Previously, the panel would render unnecessarily even when not active.@Abhishek-17h