No Content Message for Empty Product Backlog

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;
+}

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>;
+};

packages/shared/src/components/atoms/text/index.ts

@@ -1 +1,2 @@
+export * from "./NoContentMessage";
 export * from "./SimpleText";

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);
 }

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}

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;
-}

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 (
             <>