style: Use Card component in bundle onboarding (#2861)

* Fix copy pasta border/padding * Page width change * Vite onboarding overhaul * Webpack onboarding overhaul * Rollup onboarding overhaul * Fix tests
codecov · May 8, 2024 · 7bad031 · 7bad031
1 parent 54ebc8b
commit 7bad031
Show file tree

Hide file tree

Showing 7 changed files with 490 additions and 432 deletions.
diff --git a/src/pages/RepoPage/BundlesTab/BundleOnboarding/BundleOnboarding.tsx b/src/pages/RepoPage/BundlesTab/BundleOnboarding/BundleOnboarding.tsx
@@ -35,19 +35,21 @@ const Content: React.FC = () => {
           { pageName: 'bundleWebpackOnboarding' },
         ]}
       />
-      <Suspense fallback={<Loader />}>
-        <Switch>
-          <SentryRoute path="/:provider/:owner/:repo/bundles/new" exact>
-            <ViteOnboarding />
-          </SentryRoute>
-          <SentryRoute path="/:provider/:owner/:repo/bundles/new/rollup">
-            <RollupOnboarding />
-          </SentryRoute>
-          <SentryRoute path="/:provider/:owner/:repo/bundles/new/webpack">
-            <WebpackOnboarding />
-          </SentryRoute>
-        </Switch>
-      </Suspense>
+      <div className="pt-6">
+        <Suspense fallback={<Loader />}>
+          <Switch>
+            <SentryRoute path="/:provider/:owner/:repo/bundles/new" exact>
+              <ViteOnboarding />
+            </SentryRoute>
+            <SentryRoute path="/:provider/:owner/:repo/bundles/new/rollup">
+              <RollupOnboarding />
+            </SentryRoute>
+            <SentryRoute path="/:provider/:owner/:repo/bundles/new/webpack">
+              <WebpackOnboarding />
+            </SentryRoute>
+          </Switch>
+        </Suspense>
+      </div>
     </>
   )
 }
@@ -65,7 +67,7 @@ const BundleOnboarding: React.FC = () => {
 
   return (
     <div className="flex flex-col gap-6">
-      <div className="mx-auto w-4/5 pt-6 md:w-3/5 lg:w-3/6">
+      <div className="mx-auto pt-6 lg:w-3/5">
         <h1 className="mb-2 text-3xl font-semibold">
           Configure bundle analysis
         </h1>

diff --git a/src/pages/RepoPage/BundlesTab/BundleOnboarding/RollupOnboarding/RollupOnboarding.spec.tsx b/src/pages/RepoPage/BundlesTab/BundleOnboarding/RollupOnboarding/RollupOnboarding.spec.tsx
@@ -107,11 +107,11 @@ describe('RollupOnboarding', () => {
       setup(null)
       render(<RollupOnboarding />, { wrapper })
 
-      const stepText = await screen.findByText('Step 1:')
+      const stepText = await screen.findByText(/Step 1:/)
       expect(stepText).toBeInTheDocument()
 
       const headerText = await screen.findByText(
-        'Install the Codecov Rollup Plugin'
+        /Install the Codecov Rollup Plugin/
       )
       expect(headerText).toBeInTheDocument()
     })
@@ -231,10 +231,10 @@ describe('RollupOnboarding', () => {
       setup(null)
       render(<RollupOnboarding />, { wrapper })
 
-      const stepText = await screen.findByText('Step 2:')
+      const stepText = await screen.findByText(/Step 2:/)
       expect(stepText).toBeInTheDocument()
 
-      const headerText = await screen.findByText('Copy Codecov token')
+      const headerText = await screen.findByText(/Copy Codecov token/)
       expect(headerText).toBeInTheDocument()
     })
 
@@ -298,10 +298,10 @@ describe('RollupOnboarding', () => {
       setup(null)
       render(<RollupOnboarding />, { wrapper })
 
-      const stepText = await screen.findByText('Step 3:')
+      const stepText = await screen.findByText(/Step 3:/)
       expect(stepText).toBeInTheDocument()
 
-      const headerText = await screen.findByText('Configure the bundler plugin')
+      const headerText = await screen.findByText(/Configure the bundler plugin/)
       expect(headerText).toBeInTheDocument()
     })
 
@@ -352,11 +352,11 @@ describe('RollupOnboarding', () => {
       setup(null)
       render(<RollupOnboarding />, { wrapper })
 
-      const stepText = await screen.findByText('Step 4:')
+      const stepText = await screen.findByText(/Step 4:/)
       expect(stepText).toBeInTheDocument()
 
       const headerText = await screen.findByText(
-        'Commit and push your latest changes'
+        /Commit and push your latest changes/
       )
       expect(headerText).toBeInTheDocument()
     })
@@ -407,10 +407,10 @@ describe('RollupOnboarding', () => {
       setup(null)
       render(<RollupOnboarding />, { wrapper })
 
-      const stepText = await screen.findByText('Step 5:')
+      const stepText = await screen.findByText(/Step 5:/)
       expect(stepText).toBeInTheDocument()
 
-      const headerText = await screen.findByText('Build the application')
+      const headerText = await screen.findByText(/Build the application/)
       expect(headerText).toBeInTheDocument()
     })