Wire up empty dashboard

deephaven · Sep 28, 2021 · 216d054 · 216d054
1 parent 0134fb0
commit 216d054
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/packages/dashboard/src/Dashboard.scss b/packages/dashboard/src/Dashboard.scss
@@ -0,0 +1,3 @@
+.dashboard-container {
+  position: relative;
+}
diff --git a/packages/dashboard/src/Dashboard.tsx b/packages/dashboard/src/Dashboard.tsx
@@ -12,6 +12,7 @@ import './layout/golden-layout';
 import LayoutUtils from './layout/LayoutUtils';
 import PanelPlaceholder from './PanelPlaceholder';
 import DashboardLayout from './DashboardLayout';
+import './Dashboard.scss';
 
 const RESIZE_THROTTLE = 100;
 
@@ -22,6 +23,7 @@ const EMPTY_OBJECT = Object.freeze({});
 export type DashboardProps = {
   id?: string;
   children?: React.ReactNode | React.ReactNode[];
+  emptyDashboard?: React.ReactNode;
   layoutConfig?: ItemConfigType[];
   layoutSettings?: Record<string, unknown>;
   onLayoutConfigChange?: () => void;
@@ -32,6 +34,7 @@ export type DashboardProps = {
 export const Dashboard = ({
   id = 'default',
   children,
+  emptyDashboard,
   layoutConfig,
   layoutSettings = EMPTY_OBJECT,
   onLayoutConfigChange = DEFAULT_CALLBACK,
@@ -107,6 +110,7 @@ export const Dashboard = ({
       <div className="w-100 h-100" ref={layoutElement} />
       {isInitialized && layout && (
         <DashboardLayout
+          emptyDashboard={emptyDashboard}
           id={id}
           layout={layout}
           layoutConfig={layoutConfig}

diff --git a/packages/dashboard/src/DashboardLayout.tsx b/packages/dashboard/src/DashboardLayout.tsx
@@ -38,13 +38,15 @@ const FALLBACK_CALLBACK = (props: unknown) => props;
 type DashboardData = {
   closed?: ClosedPanels;
 };
+
 interface DashboardLayoutProps {
   id: string;
   layout: GoldenLayout;
   layoutConfig?: DashboardLayoutConfig;
   onLayoutChange?: (dehydratedLayout: DashboardLayoutConfig) => void;
   data?: DashboardData;
   children?: React.ReactNode | React.ReactNode[];
+  emptyDashboard?: React.ReactNode;
 }
 
 /**
@@ -53,6 +55,7 @@ interface DashboardLayoutProps {
 export const DashboardLayout = ({
   id,
   children,
+  emptyDashboard = <div>Dashboard is empty.</div>,
   layout,
   layoutConfig = DEFAULT_LAYOUT_CONFIG,
   onLayoutChange = DEFAULT_CALLBACK,
@@ -61,6 +64,7 @@ export const DashboardLayout = ({
   const data =
     useSelector(state => getDashboardData(state, id)) ?? EMPTY_OBJECT;
 
+  const [isDashboardEmpty, setIsDashboardEmpty] = useState(false);
   const [isItemDragging, setIsItemDragging] = useState(false);
   const [lastConfig, setLastConfig] = useState<DashboardLayoutConfig>();
   const [initialClosedPanels] = useState(data?.closed ?? []);
@@ -163,6 +167,8 @@ export const DashboardLayout = ({
     );
 
     if (hasChanged) {
+      setIsDashboardEmpty(layout.root.contentItems.length === 0);
+
       setLastConfig(dehydratedLayoutConfig);
 
       onLayoutChange(dehydratedLayoutConfig);
@@ -219,7 +225,7 @@ export const DashboardLayout = ({
         layout.root.addChild(content[i]);
       }
 
-      // TODO: Wire up empty dashboard?
+      setIsDashboardEmpty(layout.root.contentItems.length === 0);
     }
   }, [
     hydrateComponent,
@@ -232,6 +238,7 @@ export const DashboardLayout = ({
 
   return (
     <>
+      {isDashboardEmpty && emptyDashboard}
       {React.Children.map(children, child =>
         child
           ? React.cloneElement(child as ReactElement, {
@@ -250,6 +257,7 @@ DashboardLayout.propTypes = {
   id: PropTypes.string.isRequired,
   children: PropTypes.node,
   data: PropTypes.shape({}),
+  emptyDashboard: PropTypes.node,
   layout: GLPropTypes.Layout.isRequired,
   layoutConfig: PropTypes.arrayOf(PropTypes.shape({})),
   onLayoutChange: PropTypes.func,