ui v2: update AppLayout stories

frontend/packages/core/src/AppLayout/stories/header.stories.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 import { MemoryRouter } from "react-router";
 import type { Meta } from "@storybook/react";
 
+import ResizeAutoscalingGroup from "../../../../../workflows/ec2/src/resize-asg";
+import TerminateInstance from "../../../../../workflows/ec2/src/terminate-instance";
 import { ApplicationContext } from "../../Contexts/app-context";
 import Header from "../header";
 
@@ -16,7 +18,37 @@ export default {
     ),
     StoryFn => {
       return (
-        <ApplicationContext.Provider value={{ workflows: [] }}>
+        <ApplicationContext.Provider
+          value={{
+            workflows: [
+              {
+                developer: { name: "Lyft", contactUrl: "mailto:hello@clutch.sh" },
+                displayName: "EC2",
+                group: "AWS",
+                path: "ec2",
+                routes: [
+                  {
+                    component: TerminateInstance,
+                    componentProps: { resolverType: "clutch.aws.ec2.v1.Instance" },
+                    description: "Terminate an EC2 instance.",
+                    displayName: "Terminate Instance",
+                    path: "instance/terminate",
+                    requiredConfigProps: ["resolverType"],
+                    trending: true,
+                  },
+                  {
+                    component: ResizeAutoscalingGroup,
+                    componentProps: { resolverType: "clutch.aws.ec2.v1.AutoscalingGroup" },
+                    description: "Resize an autoscaling group.",
+                    displayName: "Resize Autoscaling Group",
+                    path: "asg/resize",
+                    requiredConfigProps: ["resolverType"],
+                  },
+                ],
+              },
+            ],
+          }}
+        >
           <StoryFn />
         </ApplicationContext.Provider>
       );

frontend/packages/core/src/AppLayout/stories/searchfield.stories.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { MemoryRouter } from "react-router";
+import styled from "@emotion/styled";
+import { Box, Grid as MuiGrid } from "@material-ui/core";
 import type { Meta } from "@storybook/react";
 
 import ResizeAutoscalingGroup from "../../../../../workflows/ec2/src/resize-asg";
@@ -11,11 +13,13 @@ export default {
   title: "Core/AppLayout/Search Field",
   component: SearchField,
   decorators: [
-    () => (
-      <MemoryRouter>
-        <SearchField />
-      </MemoryRouter>
-    ),
+    Search => {
+      return (
+        <MemoryRouter>
+          <Search />
+        </MemoryRouter>
+      );
+    },
     StoryFn => {
       return (
         <ApplicationContext.Provider
@@ -54,12 +58,19 @@ export default {
       );
     },
   ],
-  parameters: {
-    backgrounds: {
-      default: "header blue",
-      values: [{ name: "header blue", value: "#131C5F" }],
-    },
-  },
 } as Meta;
 
-export const Primary: React.FC<{}> = () => <SearchField />;
+const Grid = styled(MuiGrid)({
+  height: "64px",
+  backgroundColor: "#131C5F",
+});
+
+const Template = () => (
+  <Grid container alignItems="center" justify="center">
+    <Box>
+      <SearchField />
+    </Box>
+  </Grid>
+);
+
+export const Primary = Template.bind({});

frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx

@@ -16,7 +16,7 @@ export default {
 } as Meta;
 
 const Template = () => (
-  <Grid container alignItems="center" justify="flex-end">
+  <Grid container alignItems="center" justify="center">
     <UserInformation />
   </Grid>
 );