frontend: fix drawer (#2730)

### Description Adding fill to array, build storybook is making the array empty --------- Co-authored-by: Josh Slaughter <[email protected]>
lyft · Jul 14, 2023 · a69ccb2 · a69ccb2
1 parent 09a2d1d
commit a69ccb2
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
 );