Fix SCT-2664: Show status when cells are collapsed

kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js

@@ -367,6 +367,20 @@ define([
         }
 
         function render(cell) {
+            /*
+            The cell metadata 'kbase.cellState.toggleMinMax' is the
+            canonical indicator of whether a cell is collapsed or not.
+            */
+            const cellCollapsed = utils.getCellMeta(
+                cell, 'kbase.cellState.toggleMinMax', 'maximized'
+            ) !== 'maximized';
+            const execMessage = cell.element[0].querySelectorAll(
+                '[data-element="execMessage"]'
+            )[0];
+            const collapsedCellStatus = cellCollapsed ? (
+                execMessage && execMessage.innerHTML
+            ) : '';
+
             var events = Events.make({ node: container }),
                 buttons = [
                     div({ class: 'buttons pull-right' }, [
@@ -470,7 +484,11 @@ define([
                                             overflow: 'hidden'
                                         }
                                     }, [getCellSubtitle(cell)])
-                                ])
+                                ]),
+                                div(
+                                    { style: { margin: '0px 0px 0px auto' } },
+                                    [collapsedCellStatus]
+                                )
                             ])
                         ]),
                         div({ class: 'col-sm-3 buttons-container' }, [

test/unit/spec/narrative_core/kbaseCellToolbarMenu-spec.js

@@ -6,9 +6,53 @@
 define([
     'kbaseCellToolbarMenu'
 ], function(Widget) {
+    'use strict';
     describe('Test the kbaseCellToolbarMenu widget', function() {
+        const mockParentCell = (message, collapsedState) => {
+            const messageContainer = document.createElement('div');
+            const execMessage = document.createElement('div');
+            execMessage.setAttribute('data-element', 'execMessage');
+            execMessage.innerHTML = message;
+            messageContainer.appendChild(execMessage);
+            return {
+                element: [messageContainer],
+                metadata: {
+                    kbase: {
+                        cellState: {
+                            toggleMinMax: collapsedState
+                        },
+                        type: 'app'
+                    }
+                }
+            };
+        };
+        const message = 'When in the course of human events...';
+
         it('Should do things', function() {
+        });
+
+        it('Should show the status message when collapsed', function() {
+            const instance = Widget.make();
+            const parentCell = mockParentCell(message, 'minimized');
+            const toolbarDiv = document.createElement('div');
+            instance.register_callback([toolbarDiv], parentCell);
+            expect(
+                toolbarDiv.querySelectorAll(
+                    'div.title div:nth-child(3)'
+                )[0].innerHTML
+            ).toBe(message);
+        });
 
+        it('Should suppress the status message if not collapsed', function() {
+            const instance = Widget.make();
+            const parentCell = mockParentCell(message, 'maximized');
+            const toolbarDiv = document.createElement('div');
+            instance.register_callback([toolbarDiv], parentCell);
+            expect(
+                toolbarDiv.querySelectorAll(
+                    'div.title div:nth-child(3)'
+                )[0].innerHTML
+            ).toBe('');
         });
     });
 });