4013 - Custom entity page starts with sidepanel closed

app/react/App/scss/modules/_ContextMenu.scss

@@ -14,7 +14,7 @@
 
     .document-viewer.is-active ~ &,
     .document-viewer.is-active & {
-      left: calc((100% - 400px)/2);
+      left: calc((100% - 400px) / 2);
     }
   }
 
@@ -24,7 +24,7 @@
     width: $header-height;
     height: $header-height;
     line-height: $header-height;
-    font-size: $f-size-lg;
+    font-size: $f-size-xl;
     padding: 0;
     margin: 0 6px;
     opacity: 0.9;
@@ -35,9 +35,17 @@
     animation-name: ContextMenu-center;
     animation-duration: 225ms;
     @keyframes ContextMenu-center {
-        0%   { transform: scale(0.5); opacity: 0; }
-        25%  { transform: scale(1.1); opacity: 0.9; }
-        100% { transform: scale(1); }
+      0% {
+        transform: scale(0.5);
+        opacity: 0;
+      }
+      25% {
+        transform: scale(1.1);
+        opacity: 0.9;
+      }
+      100% {
+        transform: scale(1);
+      }
     }
   }
 
@@ -50,7 +58,7 @@
     left: 50%;
     transform: translateX(-50%) translateY(-10px);
     padding: 5px;
-    background-color: transparentize($c-black, .25);
+    background-color: transparentize($c-black, 0.25);
     color: $c-white;
     border-radius: $border-radius;
     text-align: center;
@@ -60,7 +68,7 @@
       content: '';
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
-      border-top: 5px solid transparentize($c-black, .25);
+      border-top: 5px solid transparentize($c-black, 0.25);
       position: absolute;
       top: 100%;
       left: 50%;

app/react/Entities/components/EntityViewer.js

@@ -36,7 +36,7 @@ export class EntityViewer extends Component {
   constructor(props, context) {
     super(props, context);
     this.state = {
-      panelOpen: true,
+      panelOpen: !this.props.hasPageView,
       copyFrom: false,
       copyFromProps: [],
     };

app/react/Entities/components/ShowSidepanelMenu.js

@@ -13,7 +13,7 @@ export class ShowSidepanelMenu extends Component {
       <div className={active ? 'active' : ''}>
         <ShowIf if={!panelIsOpen}>
           <div className="btn btn-primary" onClick={e => openPanel(e)}>
-            <Icon icon="chart-bar" />
+            <Icon icon="columns" />
           </div>
         </ShowIf>
       </div>

app/react/Entities/components/specs/EntityViewer.spec.js

@@ -127,26 +127,45 @@ describe('EntityViewer', () => {
     });
   });
 
-  describe('closing side panel', () => {
-    beforeEach(() => {
+  describe('Side panel', () => {
+    it('should have the sidepanel open by default', () => {
       render();
-      component.find('.closeSidepanel').simulate('click');
-      component.update();
+      expect(component.find('.entity-viewer').hasClass('with-panel')).toBe(true);
+      expect(component.find('.entity-connections').prop('open')).toBe(true);
+      expect(component.find('.show-info-sidepanel-context-menu').prop('show')).toBe(false);
     });
-    it('should close the side panel when close button is clicked', () => {
+
+    it('should have the sidepanel closed by default when entity has page view', () => {
+      props.hasPageView = true;
+      render();
       expect(component.find('.entity-viewer').hasClass('with-panel')).toBe(false);
       expect(component.find('.entity-connections').prop('open')).toBe(false);
       expect(component.find('.show-info-sidepanel-context-menu').prop('show')).toBe(true);
     });
-    it('should reveal side panel when context menu is clicked', () => {
-      expect(component.find('.entity-viewer').hasClass('with-panel')).toBe(false);
 
-      component.find('.show-info-sidepanel-menu').prop('openPanel')();
-      component.update();
+    describe('toggling the side panel', () => {
+      beforeEach(() => {
+        render();
+        component.find('.closeSidepanel').simulate('click');
+        component.update();
+      });
+
+      it('should close the side panel when close button is clicked', () => {
+        expect(component.find('.entity-viewer').hasClass('with-panel')).toBe(false);
+        expect(component.find('.entity-connections').prop('open')).toBe(false);
+        expect(component.find('.show-info-sidepanel-context-menu').prop('show')).toBe(true);
+      });
 
-      expect(component.find('.entity-viewer').hasClass('with-panel')).toBe(true);
-      expect(component.find('.entity-connections').prop('open')).toBe(true);
-      expect(component.find('.show-info-sidepanel-context-menu').prop('show')).toBe(false);
+      it('should reveal side panel when context menu is clicked', () => {
+        expect(component.find('.entity-viewer').hasClass('with-panel')).toBe(false);
+
+        component.find('.show-info-sidepanel-menu').prop('openPanel')();
+        component.update();
+
+        expect(component.find('.entity-viewer').hasClass('with-panel')).toBe(true);
+        expect(component.find('.entity-connections').prop('open')).toBe(true);
+        expect(component.find('.show-info-sidepanel-context-menu').prop('show')).toBe(false);
+      });
     });
   });
 

app/react/Entities/components/specs/__snapshots__/ShowSidepanelMenu.spec.js.snap

@@ -12,7 +12,7 @@ exports[`ShowSidepanelMenu should show button if panel is not open 1`] = `
       onClick={[Function]}
     >
       <Connect(Icon)
-        icon="chart-bar"
+        icon="columns"
       />
     </div>
   </ShowIf>

app/react/UI/Icon/library.js

@@ -104,6 +104,7 @@ import { infoCircleHollow } from 'UI/Icon/info-circle-hollow';
 import { faTasks } from '@fortawesome/free-solid-svg-icons/faTasks';
 import { faMap } from '@fortawesome/free-solid-svg-icons/faMap';
 import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons/faMapMarkerAlt';
+import { faColumns } from '@fortawesome/free-solid-svg-icons';
 import { saveAndNext } from './save-and-next';
 import { exportCsv } from './export-csv';
 import { importCsv } from './import-csv';
@@ -221,6 +222,7 @@ const icons = {
   twoFactorAuth,
   infoCircleHollow,
   faBullseye,
+  faColumns,
 };
 
 export const loadIcons = () => {