From 9e9b054b593ee5e9e8a3ece049fa8b7be4cfa707 Mon Sep 17 00:00:00 2001
From: kevin <kevinbe71@gmail.com>
Date: Fri, 13 Dec 2024 09:21:39 -0500
Subject: [PATCH] no content msg for empty backlog

---
 .../atoms/text/NoContentMessage.module.css    | 14 ++++++++++++++
 .../atoms/text/NoContentMessage.tsx           | 19 +++++++++++++++++++
 .../shared/src/components/atoms/text/index.ts |  1 +
 .../src/components/common/base.module.css     |  9 +++++++++
 .../productPlanning/ProductPlanningPanel.tsx  |  4 ++++
 packages/shared/src/views/PlanView.module.css | 15 ---------------
 packages/shared/src/views/PlanView.tsx        |  3 ++-
 7 files changed, 49 insertions(+), 16 deletions(-)
 create mode 100644 packages/shared/src/components/atoms/text/NoContentMessage.module.css
 create mode 100644 packages/shared/src/components/atoms/text/NoContentMessage.tsx

diff --git a/packages/shared/src/components/atoms/text/NoContentMessage.module.css b/packages/shared/src/components/atoms/text/NoContentMessage.module.css
new file mode 100644
index 0000000..d040673
--- /dev/null
+++ b/packages/shared/src/components/atoms/text/NoContentMessage.module.css
@@ -0,0 +1,14 @@
+.noContentMsg {
+    position: absolute;
+    display: grid;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    font-size: 1.2rem;
+    padding: 1.5rem;
+}
+
+:global(.mobile) .noContentMsg {
+    text-align: center;
+}
diff --git a/packages/shared/src/components/atoms/text/NoContentMessage.tsx b/packages/shared/src/components/atoms/text/NoContentMessage.tsx
new file mode 100644
index 0000000..dbb2fa3
--- /dev/null
+++ b/packages/shared/src/components/atoms/text/NoContentMessage.tsx
@@ -0,0 +1,19 @@
+// externals
+import * as React from "react";
+
+// style
+import css from "./NoContentMessage.module.css";
+
+/* exported interfaces/types */
+
+export type NoContentMessageStateProps = React.PropsWithChildren<Record<never, any>>;
+
+export type NoContentMessageDispatchProps = {};
+
+export type NoContentMessageProps = NoContentMessageStateProps & NoContentMessageDispatchProps;
+
+/* exported components */
+
+export const NoContentMessage: React.FC<NoContentMessageProps> = (props) => {
+    return <div className={css.noContentMsg}>{props.children}</div>;
+};
diff --git a/packages/shared/src/components/atoms/text/index.ts b/packages/shared/src/components/atoms/text/index.ts
index 849abd9..aca8268 100755
--- a/packages/shared/src/components/atoms/text/index.ts
+++ b/packages/shared/src/components/atoms/text/index.ts
@@ -1 +1,2 @@
+export * from "./NoContentMessage";
 export * from "./SimpleText";
diff --git a/packages/shared/src/components/common/base.module.css b/packages/shared/src/components/common/base.module.css
index ed33ea8..30490ef 100755
--- a/packages/shared/src/components/common/base.module.css
+++ b/packages/shared/src/components/common/base.module.css
@@ -1,3 +1,12 @@
+/*
+    Purpose: This is for use in the components and should only contain VERY
+      common CSS that's used in a lot of them.  This is not the file for CSS
+      that's "global" in nature but used in a small subset of files.  At
+      present there isn't a file for that purpose but the guidance is that you
+      should try to create components to encapsulate the common style rather
+      than making the styles "global".
+*/
+
 .fill {
     fill: var(--normal-pen-color, black);
 }
diff --git a/packages/shared/src/components/organisms/panels/productPlanning/ProductPlanningPanel.tsx b/packages/shared/src/components/organisms/panels/productPlanning/ProductPlanningPanel.tsx
index 85f1048..cfde267 100755
--- a/packages/shared/src/components/organisms/panels/productPlanning/ProductPlanningPanel.tsx
+++ b/packages/shared/src/components/organisms/panels/productPlanning/ProductPlanningPanel.tsx
@@ -16,6 +16,7 @@ import {
     buildDividerKey
 } from "../../../molecules/cards/BacklogItemCard";
 import { SimpleDivider } from "../../../atoms/dividers/SimpleDivider";
+import { NoContentMessage } from "../../../atoms/text/NoContentMessage";
 
 // consts/enums
 import { EditMode } from "../../../common/componentEnums";
@@ -567,6 +568,9 @@ export const InnerProductPlanningPanel: React.FC<ProductPlanningPanelProps> = (p
         }
         return null;
     };
+    if (renderElts.length === 0) {
+        renderElts.push(<NoContentMessage>The product backlog is empty. To add content click the Edit button!</NoContentMessage>);
+    }
     return (
         <div
             ref={ref}
diff --git a/packages/shared/src/views/PlanView.module.css b/packages/shared/src/views/PlanView.module.css
index 194cfad..ef0787e 100755
--- a/packages/shared/src/views/PlanView.module.css
+++ b/packages/shared/src/views/PlanView.module.css
@@ -23,18 +23,3 @@
     height: 100%;
     display: flex;
 }
-
-.noContentMsg {
-    position: absolute;
-    display: grid;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    font-size: 1.2rem;
-    padding: 1.5rem;
-}
-
-:global(.mobile) .noContentMsg {
-    text-align: center;
-}
diff --git a/packages/shared/src/views/PlanView.tsx b/packages/shared/src/views/PlanView.tsx
index 9127d27..8ded840 100755
--- a/packages/shared/src/views/PlanView.tsx
+++ b/packages/shared/src/views/PlanView.tsx
@@ -10,6 +10,7 @@ import { SprintPlanningPanel } from "../components/organisms/panels/sprintPlanni
 import { SmartSpinner } from "../components/molecules/unique/smartSpinner/SmartSpinner";
 import { BottomPanelContainer } from "../containers/BottomPanelContainer";
 import { ContentPanel } from "../components/organisms/panels/ContentPanel";
+import { NoContentMessage } from "../components/atoms/text/NoContentMessage";
 
 // contexts
 import { AppContext } from "../contexts/appContextUtil";
@@ -232,7 +233,7 @@ export class PlanView extends React.Component<PlanViewProps, {}> {
         } else if (hasContent || this.props.editMode === EditMode.Edit) {
             pageContent = pageContentsElts;
         } else {
-            pageContent = <div className={css.noContentMsg}>This project is empty. To add content click the Edit button!</div>;
+            pageContent = <NoContentMessage>This project is empty. To add content click the Edit button!</NoContentMessage>;
         }
         return (
             <>