feat: empty state within the dashboard to help guide users how to cre…

…ate their dashboard

packages/dashboard/src/components/internalDashboard/dashboardEmptyState.css

@@ -0,0 +1,18 @@
+.dashboard-empty-state {
+  position: fixed;
+  top: 50%;
+  right: 50%;
+  border: dashed;
+  height: 200px;
+  margin-top: -100px;
+  width: 350px;
+  margin-right: -125px;
+  text-align: center;
+  font-size: 16px !important;
+  font-weight: 600 !important;
+}
+
+.dashboard-empty-state img {
+  width: 50px;
+  height: 50px;
+}

packages/dashboard/src/components/internalDashboard/dashboardEmptyState.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+  colorTextBodySecondary,
+  spaceStaticS,
+  spaceStaticXs,
+  spaceStaticXxl,
+  spaceStaticXxxl,
+} from '@cloudscape-design/design-tokens';
+
+import { default as lineSvg } from '../../customization/widgets/lineChart/line.svg';
+import './dashboardEmptyState.css';
+
+const emptyState = {
+  borderColor: colorTextBodySecondary,
+  borderRadius: spaceStaticXs,
+  padding: spaceStaticXxxl,
+};
+
+const DashboardEmptyState: React.FC = () => {
+  return (
+    <div data-testid='empty-state' className='dashboard-empty-state' style={emptyState}>
+      <div style={{ margin: spaceStaticXxl }}>
+        <img style={{ margin: spaceStaticS }} src={lineSvg} alt='Line widget light icon' />
+        <div>Drag and drop your widget to the canvas.</div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardEmptyState;

packages/dashboard/src/components/internalDashboard/index.test.tsx

@@ -6,9 +6,14 @@ import { render, fireEvent, screen } from '@testing-library/react';
 
 import InternalDashboard from './index';
 import { configureDashboardStore } from '~/store';
+import { useDashboardPlugins } from '../../customization/api';
 import { DashboardWidgetsConfiguration } from '~/types';
 import { initialState } from '~/store/state';
 
+import { AppKitConfig } from '@iot-app-kit/react-components';
+import { DEFAULT_APP_KIT_CONFIG } from '@iot-app-kit/react-components/src/components/iot-app-kit-config/defaultValues';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
 const EMPTY_DASHBOARD: DashboardWidgetsConfiguration = {
   widgets: [],
   viewport: { duration: '10m' },
@@ -130,3 +135,34 @@ it.skip('toggles to preview mode and hides the component library', function () {
   expect(screen.queryByText(/time machine/i)).toBeInTheDocument();
   expect(screen.queryByText(/actions/i)).toBeInTheDocument();
 });
+
+// TODO: fix these tests (likely need to mock TwinMaker client)
+it.skip('empty state within the dashboard when no widget is selected', function () {
+  const args = {
+    readOnly: false,
+    dashboardConfiguration: EMPTY_DASHBOARD,
+  };
+
+  const InternalDashboardAux = () => {
+    useDashboardPlugins();
+    return <InternalDashboard editable={true} />;
+  };
+
+  render(
+    <AppKitConfig customFeatureConfig={DEFAULT_APP_KIT_CONFIG.featureFlagConfig}>
+      <Provider store={configureDashboardStore(args)}>
+        <DndProvider
+          backend={HTML5Backend}
+          options={{
+            enableMouseEvents: true,
+            enableKeyboardEvents: true,
+          }}
+        >
+          <InternalDashboardAux />
+        </DndProvider>
+      </Provider>
+    </AppKitConfig>
+  );
+
+  expect(screen.getByTestId('empty-state')).toBeInTheDocument();
+});

packages/dashboard/src/components/internalDashboard/index.tsx

@@ -20,6 +20,7 @@ import CustomDragLayer from '../dragLayer';
 import Actions from '../actions';
 import { QueryEditor } from '../queryEditor';
 import { useClients } from '../dashboard/clientContext';
+import DashboardEmptyState from './dashboardEmptyState';
 
 /**
  * Store imports
@@ -127,6 +128,8 @@ const InternalDashboard: React.FC<InternalDashboardProperties> = ({ onSave, edit
     );
   };
 
+  const widgetLength = dashboardConfiguration.widgets.length;
+
   /**
    * setup keyboard shortcuts for actions
    */
@@ -230,6 +233,7 @@ const InternalDashboard: React.FC<InternalDashboardProperties> = ({ onSave, edit
             <GestureableGrid {...gridProps}>
               <ContextMenu {...contextMenuProps} />
               <Widgets {...widgetsProps} />
+              {!widgetLength && <DashboardEmptyState />}
               {activeGesture === 'select' && <UserSelection {...selectionProps} />}
             </GestureableGrid>
             <WebglContext viewFrame={viewFrame} />