From 3807e222306c94a4da5b7835ef37c663a5a20320 Mon Sep 17 00:00:00 2001
From: Dakota Blair <dblair@bnl.gov>
Date: Tue, 14 Jul 2020 16:01:43 -0400
Subject: [PATCH] Fix SCT-2664: Show status when cells are collapsed

This commit makes an app cell status visible when the app cell is collapsed.
The unit tests test whether the status messages display in the toolbar menu
depending on if the app cell is collapsed.
---
 .../narrative_core/kbaseCellToolbarMenu.js    | 20 ++++++++-
 .../kbaseCellToolbarMenu-spec.js              | 44 +++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
index f63b019084..134743ca43 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
+++ b/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' }, [
diff --git a/test/unit/spec/narrative_core/kbaseCellToolbarMenu-spec.js b/test/unit/spec/narrative_core/kbaseCellToolbarMenu-spec.js
index 33bbb54f8f..9f13243816 100644
--- a/test/unit/spec/narrative_core/kbaseCellToolbarMenu-spec.js
+++ b/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('');
         });
     });
 });