refactor: use cypress design button in launchpad (#27795)

* install button package in launchpad * refactor: remove test that does not test anything * fix: naive implementation * fix the button bar * finish the job * some more fixes * size = sm => 24 * restore global header * make sure learn more opens in a new window * simplify lean more * a set of fixes * fix open range * Apply suggestions from code review Co-authored-by: Emily Rohrbough <emilyrohrbough@users.noreply.github.com> * move constant after imports * fix types * fix: allow for mainvariant to be pending * simplify import of button variants * trigger * remove the comment * remove eslint ignores * Revert "remove eslint ignores" This reverts commit 9ffbcf2. * remove useless no-duplicate imports --------- Co-authored-by: Emily Rohrbough <emilyrohrbough@users.noreply.github.com> Co-authored-by: Ryan Wilke <ryan@ryanwilke.com>
cypress-io · Jan 19, 2024 · cdc42b9 · cdc42b9 · cypress-bot · Jan 19, 2024
1 parent ca0891e
commit cdc42b9
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 95 deletions.
diff --git a/packages/launchpad/package.json b/packages/launchpad/package.json
@@ -20,6 +20,7 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@cypress-design/vue-button": "^0.11.0",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@intlify/unplugin-vue-i18n": "0.10.0",
@@ -77,4 +78,4 @@
       "@packages/graphql"
     ]
   }
-}
+}
diff --git a/packages/launchpad/src/components/code/FileRow.vue b/packages/launchpad/src/components/code/FileRow.vue
@@ -45,7 +45,8 @@
       </p>
       <Button
         class="whitespace-nowrap"
-        href="https://on.cypress.io/guides/configuration"
+        size="32"
+        @click="openLearnMoreExternalLink"
       >
         {{ t('links.learnMoreButton') }}
       </Button>
@@ -60,8 +61,8 @@
 </template>
 
 <script lang="ts">
-import type { BadgeRowStatus } from '@cy/components/Badge.vue'
 import type { FunctionalComponent, SVGAttributes, ComputedRef } from 'vue'
+import type { BadgeRowStatus } from '@cy/components/Badge.vue'
 
 export type FileRowStatus = 'changes' | 'valid' | 'skipped' | 'error';
 
@@ -74,10 +75,9 @@ export type StatusInfo = {
 </script>
 
 <script lang="ts" setup>
-// eslint-disable-next-line no-duplicate-imports
 import { computed } from 'vue'
-import Button from '@cy/components/Button.vue'
-// eslint-disable-next-line no-duplicate-imports
+import Button from '@cypress-design/vue-button'
+import { useExternalLink } from '@cy/gql-components/useExternalLink'
 import Badge from '@cy/components/Badge.vue'
 import { useI18n } from '@cy/i18n'
 import ShikiHighlight from '@cy/components/ShikiHighlight.vue'
@@ -88,6 +88,8 @@ import SkippedIcon from '~icons/cy/file-changes-skipped_x24.svg'
 import ErrorIcon from '~icons/cy/file-changes-error_x24.svg'
 import WarningIcon from '~icons/cy/file-changes-warning_x24.svg'
 
+const LEARN_MORE_URL = 'https://on.cypress.io/guides/configuration'
+
 const { t } = useI18n()
 
 const props = defineProps<{
@@ -98,6 +100,8 @@ const props = defineProps<{
   fileExtension: string
 }>()
 
+const openLearnMoreExternalLink = useExternalLink(LEARN_MORE_URL)
+
 const language = computed(() => {
   // The fileExtension from FileParts is prepended with a period;
   // we must strip the period to validate against our supported languages.

diff --git a/packages/launchpad/src/global/GlobalPageHeader.vue b/packages/launchpad/src/global/GlobalPageHeader.vue
@@ -18,18 +18,16 @@
       aria-controls="dropzone"
       class="h-full text-[16px]"
       data-cy="addProjectButton"
-      size="lg"
-      :variant="showDropzone ? 'pending' : 'primary'"
+      size="40"
+      :variant="showDropzone ? 'indigo-light' : 'indigo-dark'"
       :aria-expanded="showDropzone"
       @click="toggleDropzone"
     >
-      <template #prefix>
-        <i-cy-add-large_x16
-          class="transform duration-150"
-          :class="showDropzone ?
-            'icon-dark-gray-100 rotate-45' : 'icon-dark-indigo-300'"
-        />
-      </template>
+      <i-cy-add-large_x16
+        class="duration-150 transform mr-[8px]"
+        :class="showDropzone ?
+          'icon-dark-gray-100 rotate-45' : 'icon-dark-indigo-300'"
+      />
       {{ t('globalPage.addProjectButton') }}
     </Button>
   </div>
@@ -55,7 +53,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import Button from '@cy/components/Button.vue'
+import Button from '@cypress-design/vue-button'
 import Input from '@cy/components/Input.vue'
 import FileDropzone from './FileDropzone.vue'
 import { useModelWrapper } from '@packages/frontend-shared/src/composables'

diff --git a/packages/launchpad/src/migration/MajorVersionWelcome.vue b/packages/launchpad/src/migration/MajorVersionWelcome.vue
@@ -179,13 +179,11 @@
       >
         <Button
           class="group"
-          size="lg"
+          size="40"
           @click="handleClick"
         >
           {{ t('majorVersionWelcome.actionContinue') }}
-          <template #suffix>
-            <i-cy-chevron-right_x16 class="icon-dark-white" />
-          </template>
+          <i-cy-chevron-right_x16 class="icon-dark-white ml-[8px]" />
         </Button>
         <ExternalLink
           href="https://on.cypress.io/changelog"
@@ -198,7 +196,7 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '@cy/components/Button.vue'
+import Button from '@cypress-design/vue-button'
 import { useI18n } from '@cy/i18n'
 import ExternalLink from '@packages/frontend-shared/src/gql-components/ExternalLink.vue'
 import InlineCodeFragment from '@cy/components/InlineCodeFragment.vue'

diff --git a/packages/launchpad/src/migration/MigrationWizard.vue b/packages/launchpad/src/migration/MigrationWizard.vue
@@ -4,7 +4,7 @@
       {{ t('migration.wizard.title', { version: cypressMajorVersion }) }}
     </h1>
     <p
-      class="mt-2 text-center text-body-gray-600 text-lg"
+      class="mt-2 text-lg text-center text-body-gray-600"
     >
       {{ t('migration.wizard.description') }}
     </p>
@@ -27,12 +27,11 @@
         />
         <template #footer>
           <Button
-            size="lg"
-            :suffix-icon="ArrowRightIcon"
-            suffix-icon-class="w-[16px] h-[16px] icon-dark-white"
+            size="40"
             @click="renameSpecs"
           >
             {{ buttonTitle }}
+            <ArrowRightIcon class="ml-[8px] w-[16px] h-[16px] icon-dark-white" />
           </Button>
         </template>
       </MigrationStep>
@@ -47,19 +46,17 @@
           <div class="flex gap-[16px]">
             <Button
               v-if="migration.manualFiles?.completed"
-              size="lg"
-              :suffix-icon="ArrowRightIcon"
-              suffix-icon-class="w-[16px] h-[16px] icon-dark-white"
+              size="40"
               @click="finishedRenamingComponentSpecs"
             >
               {{ t('migration.wizard.step2.buttonDone') }}
+              <ArrowRightIcon class="ml-[8px] w-[16px] h-[16px] icon-dark-white" />
             </Button>
 
             <Button
               v-else
-              size="lg"
+              size="40"
               disabled
-              variant="pending"
             >
               <template #prefix>
                 <i-cy-loading_x16
@@ -72,8 +69,8 @@
 
             <Button
               v-if="!migration.manualFiles?.completed"
-              size="lg"
-              variant="outline"
+              size="40"
+              variant="outline-light"
               @click="skipStep2"
             >
               {{ t('migration.wizard.step2.button') }}
@@ -90,13 +87,12 @@
         <RenameSupport :gql="migration" />
         <template #footer>
           <Button
-            size="lg"
-            :suffix-icon="ArrowRightIcon"
-            suffix-icon-class="w-[16px] h-[16px] icon-dark-white"
+            size="40"
             data-cy="renameSupportButton"
             @click="launchRenameSupportFile"
           >
             {{ t('migration.wizard.step3.button') }}
+            <ArrowRightIcon class="ml-[8px] w-[16px] h-[16px] icon-dark-white" />
           </Button>
         </template>
       </MigrationStep>
@@ -109,13 +105,12 @@
         <ConvertConfigFile :gql="migration" />
         <template #footer>
           <Button
-            size="lg"
-            :suffix-icon="ArrowRightIcon"
-            suffix-icon-class="w-[16px] h-[16px] icon-dark-white"
+            size="40"
             data-cy="convertConfigButton"
             @click="convertConfig"
           >
             {{ t('migration.wizard.step4.button') }}
+            <ArrowRightIcon class="ml-[8px] w-[16px] h-[16px] icon-dark-white" />
           </Button>
         </template>
       </MigrationStep>
@@ -128,13 +123,12 @@
         <SetupComponentTesting />
         <template #footer>
           <Button
-            size="lg"
-            :suffix-icon="ArrowRightIcon"
-            suffix-icon-class="w-[16px] h-[16px] icon-dark-white"
+            size="40"
             data-cy="launchReconfigureButton"
             @click="launchReconfigureComponentTesting"
           >
             {{ t('migration.wizard.step5.button') }}
+            <ArrowRightIcon class="w-[16px] h-[16px] icon-dark-white" />
           </Button>
         </template>
       </MigrationStep>
@@ -150,7 +144,7 @@
 import { computed, onBeforeMount, ref } from 'vue'
 import { gql, useMutation, useQuery } from '@urql/vue'
 import Spinner from '@cy/components/Spinner.vue'
-import Button from '@cy/components/Button.vue'
+import Button from '@cypress-design/vue-button'
 import ArrowRightIcon from '~icons/cy/arrow-right_x16.svg'
 import MigrationStep from './fragments/MigrationStep.vue'
 import RenameSpecsAuto from './RenameSpecsAuto.vue'

diff --git a/packages/launchpad/src/migration/OptOutModal.vue b/packages/launchpad/src/migration/OptOutModal.vue
@@ -100,7 +100,7 @@
           {{ t('migration.renameAuto.modal.buttonSave') }}
         </Button>
         <Button
-          variant="outline"
+          variant="outline-light"
           @click="emit('cancel')"
         >
           {{ t('migration.renameAuto.modal.buttonCancel') }}
@@ -113,7 +113,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import Alert from '@cy/components/Alert.vue'
-import Button from '@cy/components/Button.vue'
+import Button from '@cypress-design/vue-button'
 import CodeTag from '@cy/components/CodeTag.vue'
 import StandardModal from '@cy/components/StandardModal.vue'
 import Radio from '@cy/components/Radio.vue'

diff --git a/packages/launchpad/src/setup/ButtonBar.vue b/packages/launchpad/src/setup/ButtonBar.vue
@@ -1,28 +1,23 @@
 <template>
-  <div class="border-t rounded-b flex bg-gray-50 border-t border-t-gray-100 py-[16px] px-[24px] gap-3">
+  <div class="rounded-b flex bg-gray-50 border-t border-t-gray-100 py-[16px] px-[24px] gap-3">
     <slot>
       <Button
         v-if="nextFn"
-        size="lg"
+        size="40"
         :disabled="!canNavigateForward"
-        :variant="mainVariant"
+        :variant="mainVariant === 'pending' ? 'disabled' : mainVariant"
         @click="nextFn"
       >
-        <template
+        <i-cy-loading_x16
           v-if="mainVariant === 'pending'"
-          #prefix
-        >
-          <i-cy-loading_x16
-            v-if="mainVariant === 'pending'"
-            class="animate-spin icon-dark-white icon-light-gray-400"
-          />
-        </template>
+          class="animate-spin icon-dark-white icon-light-gray-400 mr-[8px]"
+        />
         {{ next }}
       </Button>
       <Button
         v-if="backFn"
-        size="lg"
-        variant="outline"
+        size="40"
+        variant="outline-light"
         @click="backFn"
       >
         {{ back }}
@@ -48,8 +43,8 @@
       </div>
       <Button
         v-if="skipFn"
-        size="lg"
-        variant="text"
+        size="40"
+        variant="link"
         class="text-gray-500"
         @click="skipFn"
       >
@@ -62,8 +57,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import type { ButtonVariants } from '@cy/components/Button.vue'
-import Button from '@cy/components/Button.vue'
+import Button, { type ButtonVariants } from '@cypress-design/vue-button'
 import Switch from '@cy/components/Switch.vue'
 
 const props = withDefaults(defineProps<{
@@ -76,7 +70,7 @@ const props = withDefaults(defineProps<{
   alt?: string
   altFn?: (value: boolean) => void
   canNavigateForward?: boolean
-  mainVariant?: ButtonVariants
+  mainVariant?: ButtonVariants | 'pending'
 }>(), {
   alt: undefined,
   altFn: undefined,
@@ -86,7 +80,7 @@ const props = withDefaults(defineProps<{
   backFn: undefined,
   nextFn: undefined,
   skipFn: undefined,
-  mainVariant: 'primary',
+  mainVariant: 'indigo-dark',
 })
 
 const altValue = ref(false)

diff --git a/packages/launchpad/src/setup/InstallDependencies.vue b/packages/launchpad/src/setup/InstallDependencies.vue
@@ -5,7 +5,7 @@
     :back-fn="props.backFn"
     :next-fn="confirmInstalled"
     class="max-w-[640px] relative"
-    :main-button-variant="allDependenciesInstalled ? 'primary' : 'pending'"
+    :main-button-variant="allDependenciesInstalled ? 'indigo-dark' : 'disabled'"
     :skip-fn="!allDependenciesInstalled ? confirmInstalled : undefined"
   >
     <template