From a69ccb2e43eef157b7fdd6daf81bca10d405c92a Mon Sep 17 00:00:00 2001
From: Roier <1994723+roier@users.noreply.github.com>
Date: Fri, 14 Jul 2023 15:48:11 -0600
Subject: [PATCH] frontend: fix drawer (#2730)

### Description
Adding fill to array, build storybook is making the array empty

---------

Co-authored-by: Josh Slaughter <jslaughter@lyft.com>
---
 .../src/AppLayout/stories/drawer.stories.tsx  |  1 +
 .../core/src/Table/stories/table.stories.tsx  |  6 ++---
 .../core/src/stories/stepper.stories.tsx      | 26 +++++++++++--------
 .../core/src/stories/tabs.stories.tsx         | 14 +++++-----
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/frontend/packages/core/src/AppLayout/stories/drawer.stories.tsx b/frontend/packages/core/src/AppLayout/stories/drawer.stories.tsx
index a531213902..0a6da55ae5 100644
--- a/frontend/packages/core/src/AppLayout/stories/drawer.stories.tsx
+++ b/frontend/packages/core/src/AppLayout/stories/drawer.stories.tsx
@@ -27,6 +27,7 @@ export default {
                 displayName: "EC2",
                 group: "AWS",
                 path: "ec2",
+                icon: { path: "" },
                 routes: [
                   {
                     component: () => null,
diff --git a/frontend/packages/core/src/Table/stories/table.stories.tsx b/frontend/packages/core/src/Table/stories/table.stories.tsx
index d2eaf197f2..ba8f22d92d 100644
--- a/frontend/packages/core/src/Table/stories/table.stories.tsx
+++ b/frontend/packages/core/src/Table/stories/table.stories.tsx
@@ -20,10 +20,10 @@ export default {
 const Template = ({ row, ...props }: TableProps & { row: React.ReactElement }) => (
   <div style={{ maxHeight: "300px", display: "flex" }}>
     <Table {...props} columns={["Column 1", "Column 2", "Column 3", "Column 4", "Column 5"]}>
-      {
+      {Array(10)
+        .fill(null)
         // eslint-disable-next-line react/no-array-index-key
-        [...Array(10)].map((_, index: number) => React.cloneElement(row, { key: index }))
-      }
+        .map((_, index: number) => React.cloneElement(row, { key: index }))}
     </Table>
   </div>
 );
diff --git a/frontend/packages/core/src/stories/stepper.stories.tsx b/frontend/packages/core/src/stories/stepper.stories.tsx
index 9110273a3f..7a47a3d43d 100644
--- a/frontend/packages/core/src/stories/stepper.stories.tsx
+++ b/frontend/packages/core/src/stories/stepper.stories.tsx
@@ -33,10 +33,12 @@ const PrimaryTemplate = ({ stepCount, activeStep }: StepperProps & { stepCount:
   return (
     <>
       <Stepper activeStep={curStep}>
-        {[...Array(stepCount)].map((_, index: number) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <Step key={index} label={`Step ${index + 1}`} />
-        ))}
+        {Array(stepCount)
+          .fill(null)
+          .map((_, index: number) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <Step key={index} label={`Step ${index + 1}`} />
+          ))}
       </Stepper>
       <div>
         <Text>Step{curStep + 1} content</Text>
@@ -73,13 +75,15 @@ const FailureTemplate = ({ failedStep = 2, activeStep }: StepperProps & { failed
   return (
     <>
       <Stepper activeStep={curStep}>
-        {[...Array(stepCount)].map((_, index: number) => (
-          <Step
-            error={curStep === failedStep && index === failedStep}
-            key={index} // eslint-disable-line react/no-array-index-key
-            label={`Step ${index + 1}`}
-          />
-        ))}
+        {Array(stepCount)
+          .fill(null)
+          .map((_, index: number) => (
+            <Step
+              error={curStep === failedStep && index === failedStep}
+              key={index} // eslint-disable-line react/no-array-index-key
+              label={`Step ${index + 1}`}
+            />
+          ))}
       </Stepper>
       <div>
         <Text>Step{curStep + 1} content</Text>
diff --git a/frontend/packages/core/src/stories/tabs.stories.tsx b/frontend/packages/core/src/stories/tabs.stories.tsx
index b231427f70..5a87f51278 100644
--- a/frontend/packages/core/src/stories/tabs.stories.tsx
+++ b/frontend/packages/core/src/stories/tabs.stories.tsx
@@ -14,12 +14,14 @@ export default {
 
 const Template = ({ tabCount, value, variant }: TabsProps & { tabCount: number }) => (
   <Tabs value={value - 1} variant={variant}>
-    {[...Array(tabCount)].map((_, index: number) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <Tab key={index} label={`Tab ${index + 1}`} value={index}>
-        <div>Tab{index + 1} Content</div>
-      </Tab>
-    ))}
+    {Array(tabCount)
+      .fill(null)
+      .map((_, index: number) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Tab key={index} label={`Tab ${index + 1}`} value={index}>
+          <div>Tab{index + 1} Content</div>
+        </Tab>
+      ))}
   </Tabs>
 );