Demo App - Added Empty state (#4678)

* Added empty state route

* Added empty state layout page

* Address formatting

sandbox/grommet-app/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,40 @@
+import React, { cloneElement } from 'react';
+import { Box, Heading, HeadingProps, Paragraph } from 'grommet';
+import { DriveCage } from 'grommet-icons';
+
+export const EmptyState = ({
+  actions,
+  align = 'center',
+  description,
+  icon: iconProp,
+  level,
+  title,
+}: {
+  actions: React.ReactNode | React.ReactNode[];
+  align?: 'start' | 'center';
+  description?: string;
+  icon?: React.ReactElement;
+  level: HeadingProps['level'];
+  title: string;
+}) => {
+  let icon = iconProp;
+  if (iconProp && !iconProp.props.size)
+    icon = cloneElement(iconProp, { size: 'xlarge' });
+
+  return (
+    <Box gap="medium" align={align} flex={false}>
+      <Box align={align} gap="small">
+        {icon}
+        <Box align={align} gap="xsmall">
+          <Heading margin="none" level={level}>
+            {title}
+          </Heading>
+          <Paragraph margin="none" textAlign={align}>
+            {description}
+          </Paragraph>
+        </Box>
+      </Box>
+      {actions}
+    </Box>
+  );
+};

sandbox/grommet-app/src/components/EmptyState/index.ts

@@ -0,0 +1 @@
+export * from './EmptyState';

sandbox/grommet-app/src/components/index.js

@@ -2,6 +2,7 @@ export * from './Legend';
 export * from './Metric';
 export * from './Card';
 export * from './DashboardCard';
+export * from './EmptyState';
 export * from './NotificationMetric';
 export * from './ContentPane';
 export * from './GlobalHeader';

sandbox/grommet-app/src/mockData/bareMetal.json

@@ -0,0 +1,112 @@
+{
+  "Las Vegas": [],
+  "Frankfurt": [
+    {
+      "name": "HPE-PC-NODE 5",
+      "os": {
+        "name": "Ubuntu Server",
+        "description": "Ubuntu 24.04 LTS Linux",
+        "version": "24.04 LTS",
+        "architecture": "64-bit (x86)",
+        "type": "ISO"
+      },
+      "cpu": "HPE ProLiant DL380",
+      "system": "HPE Private Cloud - Frankfurt",
+      "ilo ip": "12.189.23.15",
+      "health": "Okay",
+      "location": "Frankfurt"
+    },
+    {
+      "name": "HPE-PC-NODE 6",
+      "os": {
+        "name": "Ubuntu Server",
+        "description": "Ubuntu 24.04 LTS Linux",
+        "version": "24.04 LTS",
+        "architecture": "64-bit (x86)",
+        "type": "ISO"
+      },
+      "cpu": "HPE ProLiant DL380",
+      "system": "HPE Private Cloud - Frankfurt",
+      "ilo ip": "12.189.23.16",
+      "health": "Okay",
+      "location": "Frankfurt"
+    },
+    {
+      "name": "HPE-PC-NODE 7",
+      "os": {
+        "name": "Ubuntu Server",
+        "description": "Ubuntu 24.04 LTS Linux",
+        "version": "24.04 LTS",
+        "architecture": "64-bit (x86)",
+        "type": "ISO"
+      },
+      "cpu": "HPE ProLiant DL380",
+      "system": "HPE Private Cloud - Frankfurt",
+      "ilo ip": "12.189.23.17",
+      "health": "Okay",
+      "location": "Frankfurt"
+    }
+  ],
+  "New York": [
+    {
+      "name": "HPE-PC-NODE 1",
+      "os": {
+        "name": "Ubuntu Server",
+        "description": "Ubuntu 24.04 LTS Linux",
+        "version": "24.04 LTS",
+        "architecture": "64-bit (x86)",
+        "type": "ISO"
+      },
+      "cpu": "HPE ProLiant DL380",
+      "system": "HPE Private Cloud - New York",
+      "ilo ip": "",
+      "health": "Unknown",
+      "location": "New York"
+    },
+    {
+      "name": "HPE-PC-NODE 2",
+      "os": {
+        "name": "Ubuntu Server",
+        "description": "Ubuntu 24.04 LTS Linux",
+        "version": "24.04 LTS",
+        "architecture": "64-bit (x86)",
+        "type": "ISO"
+      },
+      "cpu": "HPE ProLiant DL380",
+      "system": "HPE Private Cloud - New York",
+      "ilo ip": "12.189.112.3",
+      "health": "Okay",
+      "location": "New York"
+    },
+    {
+      "name": "HPE-PC-NODE 3",
+      "os": {
+        "name": "Ubuntu Server",
+        "description": "Ubuntu 24.04 LTS Linux",
+        "version": "24.04 LTS",
+        "architecture": "64-bit (x86)",
+        "type": "ISO"
+      },
+      "cpu": "HPE ProLiant DL380",
+      "system": "HPE Private Cloud - New York",
+      "ilo ip": "12.189.112.4",
+      "health": "Okay",
+      "location": "New York"
+    },
+    {
+      "name": "HPE-PC-NODE 4",
+      "os": {
+        "name": "Ubuntu Server",
+        "description": "Ubuntu 24.04 LTS Linux",
+        "version": "24.04 LTS",
+        "architecture": "64-bit (x86)",
+        "type": "ISO"
+      },
+      "cpu": "HPE ProLiant DL380",
+      "system": "HPE Private Cloud - New York",
+      "ilo ip": "12.189.112.5",
+      "health": "Okay",
+      "location": "New York"
+    }
+  ]
+}

sandbox/grommet-app/src/pages/layouts/index.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { Link, Route } from 'react-router-dom';
 import { List, Page, PageContent, PageHeader } from "grommet";
 import { RoutedAnchor } from '../../components';
-import { Collection } from './kinds';
+import { Collection, EmptyState } from './kinds';
 
-const layouts = ['Collection', 'Dashboard', 'Detail', 'Form', 'Home', 'List', 'Login', 'Main', 'NotFound', 'Settings', 'Splash', 'Wizard'];
+const layouts = ['Collection', 'Dashboard', 'Detail', 'Empty state', 'Form', 'Home', 'List', 'Login', 'Main', 'NotFound', 'Settings', 'Splash', 'Wizard'];
 
 const Layouts = () => {
   return (
@@ -13,7 +13,7 @@ const Layouts = () => {
         <PageHeader title="Layouts" />
         <List data={layouts} defaultItemProps={{ pad: { vertical: 'xxsmall' } }}>
           {(item) => (
-            <RoutedAnchor key={item} as={Link} to={`/layouts/${item.toLowerCase()}`} label={item} alignSelf="start" />
+            <RoutedAnchor key={item} as={Link} to={`/layouts/${item.toLowerCase().replace(' ', '-')}`} label={item} alignSelf="start" />
           )}
         </List>
       </PageContent>
@@ -23,7 +23,8 @@ const Layouts = () => {
 
 const routes = [
   <Route key="collection" path="/layouts/collection" element={<Collection />} />,
-  <Route key="dashboard" path="/layouts/dashboard" element={<div>Dashboard</div>} />
+  <Route key="dashboard" path="/layouts/dashboard" element={<div>Dashboard</div>} />,
+  <Route key="empty-state" path="/layouts/empty-state" element={<EmptyState />} />,
 ]
 
 export { Layouts, routes };

sandbox/grommet-app/src/pages/layouts/kinds/EmptyState/DataTableActions.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Box, Menu } from 'grommet';
+
+export const DataTableActions = (
+  { servers, ...rest }:
+    {
+      servers: object[],
+      [key: string]: any
+    }
+) => {
+  const serverActions =
+    [
+      {
+        label: 'Power on',
+        onClick: () => { }
+      },
+      {
+        label: 'Power off',
+        onClick: () => { }
+      },
+      {
+        label: 'Reboot',
+        onClick: () => { }
+      },
+    ];
+
+  let tableActions = [
+    [
+      {
+        label: 'Add instance',
+        onClick: () => { }
+      },
+    ]
+  ]
+
+  if (servers.length > 0) {
+    tableActions.push(serverActions);
+  }
+
+  return (
+    <Box direction="row" {...rest}>
+      <Menu label="Actions" items={tableActions} />
+    </Box>
+  );
+}

sandbox/grommet-app/src/pages/layouts/kinds/EmptyState/EmptyState.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Box,
+  Button,
+  Data,
+  DataFilters,
+  DataSearch,
+  DataSummary,
+  DataTable,
+  Page,
+  PageContent,
+  PageHeader,
+  Toolbar,
+} from 'grommet';
+import { DriveCage, Previous } from 'grommet-icons';
+import ContentPane from '../../../../components/ContentPane';
+import { EmptyState, RoutedAnchor } from '../../../../components';
+import { DataTableActions } from './DataTableActions';
+import { tableColumns } from './tableColumns';
+import bareMetal from '../../../../mockData/bareMetal.json';
+
+
+const EmptyStatePage = ({ ...rest }) => {
+  const data = bareMetal["Las Vegas"];
+
+  return (
+    <Page pad={{ bottom: "xlarge" }} {...rest}>
+      <PageContent>
+        <PageHeader
+          title="Bare Metal"
+          parent={<RoutedAnchor as={Link} label="Layouts" to="/layouts" icon={<Previous />} />}
+        />
+        <ContentPane
+          heading="Las Vegas"
+          level={2}
+          actions={undefined}
+          skeleton={undefined}
+        >
+          <Data data={data}>
+            <Toolbar>
+              <Toolbar>
+                <DataSearch />
+                <DataFilters layer />
+              </Toolbar>
+              <DataTableActions servers={data} flex justify="end" />
+            </Toolbar>
+            <DataSummary />
+            <DataTable
+              columns={tableColumns}
+              onSelect={() => { }}
+              placeholder={data.length === 0 &&
+                <Box pad="xlarge">
+                  <EmptyState
+                    title="No Bare Metal instances"
+                    level={3}
+                    actions={<Button label="Add an instance" primary />}
+                    icon={<DriveCage size="xxlarge" />}
+                  />
+                </Box>
+              }
+            />
+          </Data>
+        </ContentPane>
+      </PageContent>
+    </Page>
+  );
+}
+
+export { EmptyStatePage as EmptyState };

sandbox/grommet-app/src/pages/layouts/kinds/EmptyState/index.ts

@@ -0,0 +1 @@
+export * from './EmptyState';

sandbox/grommet-app/src/pages/layouts/kinds/EmptyState/tableColumns.ts

@@ -0,0 +1,27 @@
+export const tableColumns = [
+  {
+    property: "name",
+    header: "Name",
+    primary: true,
+  },
+  {
+    property: "os.name",
+    header: "OS Image",
+  },
+  {
+    property: "cpu",
+    header: "Instance type",
+  },
+  {
+    property: "system",
+    header: "System",
+  },
+  {
+    property: "ilo ip",
+    header: "ILO IP address",
+  },
+  {
+    property: "health",
+    header: "Server health",
+  },
+];

sandbox/grommet-app/src/pages/layouts/kinds/index.ts

@@ -1 +1,2 @@
 export * from './Collection';
+export * from './EmptyState';