From 07ffc29a26b00759ea92d788d093b9e825fb508f Mon Sep 17 00:00:00 2001
From: Sugan G <Sugan.G@cerner.com>
Date: Thu, 9 May 2024 12:52:39 +0530
Subject: [PATCH] status view display

---
 .../outline-view/DefaultOutlineView.test.jsx  | 20 ++++++++++---------
 .../terra-navigation-side-menu/package.json   |  3 ++-
 .../src/NavigationSideMenu.jsx                |  5 +++++
 .../terra-outline-view/src/OutlineView.jsx    | 14 ++++++++++---
 4 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/packages/terra-framework-docs/src/terra-dev-site/test/outline-view/DefaultOutlineView.test.jsx b/packages/terra-framework-docs/src/terra-dev-site/test/outline-view/DefaultOutlineView.test.jsx
index 2da1c73782..851d9c56ba 100644
--- a/packages/terra-framework-docs/src/terra-dev-site/test/outline-view/DefaultOutlineView.test.jsx
+++ b/packages/terra-framework-docs/src/terra-dev-site/test/outline-view/DefaultOutlineView.test.jsx
@@ -10,6 +10,7 @@ const DefaultOutlineView = () => {
     projects: false,
     tests: false,
     details: false,
+    test2: false,
   });
 
   const handleExpandCollapseKeys = (key) => {
@@ -122,6 +123,15 @@ const DefaultOutlineView = () => {
                   isSelected={selectedKey === 'longer-name-test'}
                   onSelect={() => { setSelectedKey('longer-name-test'); }}
                 />),
+                (<OutlineView.Item
+                  label="test2"
+                  key="test2"
+                  isSelected={selectedKey === 'test2'}
+                  onSelect={() => { setSelectedKey('test2'); }}
+                  isExpanded={expandedItems.test2}
+                  onToggle={() => { handleExpandCollapseKeys('test2'); }}
+                  subfolderItems={[]}
+                />),
               ]}
             />),
           ]}
@@ -133,15 +143,7 @@ const DefaultOutlineView = () => {
           onSelect={() => { setSelectedKey('details'); }}
           isExpanded={expandedItems.details}
           onToggle={() => { handleExpandCollapseKeys('details'); }}
-          subfolderItems={[
-            // (<OutlineView.Item
-            //   label="test.txt"
-            //   icon={<IconDocuments />}
-            //   key="test"
-            //   isSelected={selectedKey === 'test'}
-            //   onSelect={() => { setSelectedKey('test'); }}
-            // />),
-          ]}
+          subfolderItems={[]}
         />
       </OutlineView>
     </div>
diff --git a/packages/terra-navigation-side-menu/package.json b/packages/terra-navigation-side-menu/package.json
index 090238d221..cb9b7512e2 100644
--- a/packages/terra-navigation-side-menu/package.json
+++ b/packages/terra-navigation-side-menu/package.json
@@ -39,7 +39,8 @@
     "terra-content-container": "^3.0.0",
     "terra-icon": "^3.19.0",
     "terra-theme-context": "^1.9.0",
-    "terra-visually-hidden-text": "^2.0.0"
+    "terra-visually-hidden-text": "^2.0.0",
+    "terra-status-view": "^4.76.0"
   },
   "peerDependencies": {
     "react": "^16.8.5",
diff --git a/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx b/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
index 30078796b2..e70d6b4ab3 100644
--- a/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
+++ b/packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
@@ -6,6 +6,7 @@ import ContentContainer from 'terra-content-container';
 import VisuallyHiddenText from 'terra-visually-hidden-text';
 import * as KeyCode from 'keycode-js';
 import ThemeContext from 'terra-theme-context';
+import StatusView from 'terra-status-view';
 import MenuItem from './_MenuItem';
 
 import styles from './NavigationSideMenu.module.scss';
@@ -308,6 +309,10 @@ class NavigationSideMenu extends Component {
       this.handleEvents(event, item, key);
     };
 
+    if (key === 'empty-child-key') {
+      return <StatusView variant="no-data" />;
+    }
+
     return (
       <MenuItem
         id={item.id}
diff --git a/packages/terra-outline-view/src/OutlineView.jsx b/packages/terra-outline-view/src/OutlineView.jsx
index 48876af5f8..b9855f6523 100644
--- a/packages/terra-outline-view/src/OutlineView.jsx
+++ b/packages/terra-outline-view/src/OutlineView.jsx
@@ -122,14 +122,18 @@ class OutlineView extends Component {
 
   buildSideMenuItems = (items) => {
     if (items) {
-      const menuItems = [{ key: 'menu', text: this.props.title, childKeys: items.map(k => k.key) }];
+      const menuItems = [{ key: 'menu', text: this.props.title, childKeys: items.map(k => k.key) }, { key: 'empty-child-key', text: 'Empty' }];
       const sideMenuItems = [];
       items.forEach(item => {
+        let childKeys;
+        if (item && item.props.subfolderItems) {
+          childKeys = item.props.subfolderItems.length ? item.props.subfolderItems.map(k => k.key) : ['empty-child-key'];
+        }
         menuItems.push({
           key: item.key,
           text: item.props.label,
           id: item.id,
-          childKeys: (item && item.props.subfolderItems) ? item.props.subfolderItems.map(k => k.key) : [],
+          childKeys: childKeys || [],
           icon: item.props.icon,
           showIcon: true,
           hasSubMenu: item && item.props.subfolderItems && item.props.subfolderItems.length === 0,
@@ -148,11 +152,15 @@ class OutlineView extends Component {
     if (items) {
       const sideMenuItems = [];
       items.forEach(item => {
+        let childKeys;
+        if (item && item.props.subfolderItems) {
+          childKeys = item.props.subfolderItems.length ? item.props.subfolderItems.map(k => k.key) : ['empty-child-key'];
+        }
         sideMenuItems.push({
           key: item.key,
           text: item.props.label,
           id: item.id,
-          childKeys: (item && item.props.subfolderItems) ? item.props.subfolderItems.map(k => k.key) : [],
+          childKeys: childKeys || [],
           icon: item.props.icon,
           showIcon: true,
           hasSubMenu: item && item.props.subfolderItems && item.props.subfolderItems.length === 0,