Merge pull request #5645 from paulkaplan/fix-admin-panel-spacing

src/views/studio/studio-admin-panel.jsx

@@ -48,8 +48,11 @@ const StudioAdminPanel = ({studioId, showAdminPanel}) => {
     const [adminPanelOpen, setAdminPanelOpen] = useState(getAdminPanelOpen());
 
     useEffect(() => {
-        storeAdminPanelOpen(adminPanelOpen);
-    }, [adminPanelOpen]);
+        // This effect will both keep localStorage up-to-date AND cause
+        // the spacing to change to allow for the open admin panel, so make
+        // sure the admin panel should be visible at all before making any changes.
+        if (showAdminPanel) storeAdminPanelOpen(adminPanelOpen);
+    }, [showAdminPanel, adminPanelOpen]);
 
     useEffect(() => {
         if (!showAdminPanel) return;

test/unit/components/studio-admin-panel.test.jsx

@@ -39,6 +39,19 @@ describe('Studio comments', () => {
             expect(child.prop('isOpen')).toBe(false);
         });
     });
+    describe('non admins', () => {
+        test('should not have localStorage set with a false value', () => {
+            mountWithIntl(<StudioAdminPanel showAdminPanel={false} />);
+            expect(global.localStorage.getItem(adminPanelOpenKey)).toBe(null);
+        });
+        test('should not have css class set even if localStorage contains open key', () => {
+            // Regression test for situation where admin logs out but localStorage still
+            // contains "open", causing extra space to appear
+            global.localStorage.setItem(adminPanelOpenKey, 'open');
+            mountWithIntl(<StudioAdminPanel showAdminPanel={false} />);
+            expect(viewEl.classList.contains(adminPanelOpenClass)).toBe(false);
+        });
+    });
     test('calling onOpen sets a class on the #viewEl and records in local storage', () => {
         const component = mountWithIntl(<StudioAdminPanel showAdminPanel />);
         let child = component.find(AdminPanel);