Page Layouts - Added data collection layout (#4652)

* Create layouts route in demo-app

* Added RoutedAnchor component

* Started data collection page layout

* Progress on data collection layout

* Added VM data

* Refactor

* customize columns based on cloud type

* Refactoring

* Adjust Grid content alignment

* Added back button

* Added lines at end of files and small refactor

* remove excessive line

Author: halocline

sandbox/grommet-app/src/App.jsx

@@ -7,6 +7,7 @@ import Home from './pages/index';
 import NextDashboard from './pages/next/index';
 import StickerSheet from './pages/sticker-sheet/index';
 import Refresh from './pages/refresh/index';
+import { Layouts, routes as layoutRoutes } from './pages/layouts';
 import { Login } from './Login';
 import { GlobalHeader } from './components/GlobalHeader';
 import { FloatingActionButton } from './components';
@@ -104,6 +105,8 @@ const App = () => {
                   <Route path="/sustainability" element={<Sustainability />} />
                   <Route path="/sticker-sheet" element={<StickerSheet />} />
                   <Route path="/refresh" element={<Refresh />} />
+                  <Route path="/layouts" element={<Layouts />} />
+                  {layoutRoutes}
                 </Routes>
               </BrowserRouter>
               {window.location.pathname === '/next' ? (

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Anchor } from 'grommet';
+
+interface RoutedAnchorProps extends React.ComponentProps<typeof Anchor> {
+  to: string;
+}
+
+export const RoutedAnchor = ({ ...rest }: RoutedAnchorProps) => (
+  <Anchor {...rest} />
+);

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

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

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

@@ -7,4 +7,5 @@ export * from './ContentPane';
 export * from './GlobalHeader';
 export * from './ToggleGroup';
 export * from './FloatingActionButton';
+export * from './RoutedAnchor';
 export * from './SkeletonContext';