From 0bac62b46916ef55a839927372123b0526ccea4f Mon Sep 17 00:00:00 2001
From: Stanley Pageot <stanley@rxdu.io>
Date: Thu, 30 Dec 2021 09:27:37 -0800
Subject: [PATCH] feat: Message when no staged or pending present

---
 src/components/blocks/StagingDataTable.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/blocks/StagingDataTable.js b/src/components/blocks/StagingDataTable.js
index a68d3281..34e4948d 100644
--- a/src/components/blocks/StagingDataTable.js
+++ b/src/components/blocks/StagingDataTable.js
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import styled, { withTheme } from 'styled-components';
 import { TableCellHeaderText, TableCellText } from '../typography';
 import { convertPascalCaseToSentenceCase } from '../../utils/stringUtils';
-import { MinusIcon } from '..';
+import { MinusIcon, H3 } from '..';
 import { TableDrawer } from './';
 import { useWindowSize } from '../hooks/useWindowSize';
 
@@ -76,6 +76,13 @@ const StagingDataTableContainer = styled('div')`
   height: 100%;
 `;
 
+const NoDataMessageContainer = styled('div')`
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
 const ChangeGroupHeader = ({ headings, appStore }) => {
   return (
     <THead selectedTheme={appStore.theme}>
@@ -195,6 +202,11 @@ const StagingDataTable = withTheme(({ headings, data, deleteStagingData }) => {
   return (
     <StagingDataTableContainer ref={ref}>
       <div style={{ height: `${height}px`, overflow: 'auto' }}>
+        {data.length === 0 && (
+          <NoDataMessageContainer>
+            <H3>No staged data at this time</H3>
+          </NoDataMessageContainer>
+        )}
         {data &&
           headings &&
           data.map((changeGroup, index) => (