From 376b199c5579ab2a1159d49a3bf0d3dcbf5cf51c Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Mon, 26 Sep 2022 16:33:48 +0000
Subject: [PATCH] chore: add outline on migration step and remove from header

---
 .../src/migration/MigrationWizard.cy.tsx      | 37 +++++++++++++++++++
 .../src/migration/fragments/MigrationStep.vue | 10 ++---
 2 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 packages/launchpad/src/migration/MigrationWizard.cy.tsx

diff --git a/packages/launchpad/src/migration/MigrationWizard.cy.tsx b/packages/launchpad/src/migration/MigrationWizard.cy.tsx
new file mode 100644
index 000000000000..801d3a156b96
--- /dev/null
+++ b/packages/launchpad/src/migration/MigrationWizard.cy.tsx
@@ -0,0 +1,37 @@
+import type { MigrationStep } from '@packages/frontend-shared/cypress/support/generated/test-graphql-types.gen'
+import { MigrationWizard_RenameSpecsDocument } from '../generated/graphql-test'
+import MigrationWizard from './MigrationWizard.vue'
+
+describe('<MigrationWizard />', { viewportWidth: 1280, viewportHeight: 1000 }, () => {
+  it('outline focus should highlight current step block', () => {
+    cy.stubMutationResolver(MigrationWizard_RenameSpecsDocument, (defineResult) => {
+      const filteredSteps = cy.gqlStub.Migration.filteredSteps as MigrationStep[]
+
+      filteredSteps[0].isCompleted = true
+      filteredSteps[0].isCurrentStep = false
+      filteredSteps[1].isCurrentStep = true
+
+      return defineResult({
+        migrateRenameSpecs: {
+          baseError: null,
+          migration: {
+            filteredSteps,
+          },
+          __typename: 'Query',
+        },
+      })
+    })
+
+    cy.mount(() => <MigrationWizard class='m-4' />)
+
+    const button = cy.get('button').contains('Rename these specs for me')
+
+    button.should('be.visible')
+
+    cy.percySnapshot('1st step')
+
+    button.click()
+
+    cy.percySnapshot('moved to 2nd step')
+  })
+})
diff --git a/packages/launchpad/src/migration/fragments/MigrationStep.vue b/packages/launchpad/src/migration/fragments/MigrationStep.vue
index f840b30ebca5..faf747f543d8 100644
--- a/packages/launchpad/src/migration/fragments/MigrationStep.vue
+++ b/packages/launchpad/src/migration/fragments/MigrationStep.vue
@@ -2,13 +2,13 @@
   <div
     v-if="step"
     :data-cy="`migration-step ${step?.name}`"
-    class="border rounded bg-light-50 border-gray-100 mb-4 w-full block"
+    class="border rounded bg-light-50 mb-4 w-full block"
+    :class="{
+      'default-ring': step.isCurrentStep,
+      'bg-gray-50 ': !step.isCurrentStep
+    }"
   >
     <ListRowHeader
-      :class="{
-        'rounded-b-none default-ring': step.isCurrentStep,
-        'bg-gray-50': !step.isCurrentStep
-      }"
       class="-m-1px w-auto"
       :description="description"
       @click="emit('toggle')"