misc: add CTA footer to launchpad framework dropdown

packages/frontend-shared/src/components/Select.cy.tsx

@@ -194,7 +194,8 @@ describe('<Select />', () => {
         'item-suffix': () => <IconHeart data-testid="item-suffix"></IconHeart>,
         'selected': () => 'Selected',
         'input-prefix': () => <IconHeart data-testid="input-prefix"></IconHeart>,
-        'input-suffix': () => <IconHeart data-testid="input-suffix"></IconHeart>,
+        'input-suffix': () => <IconHeart data-testid="input-suffix">suffix</IconHeart>,
+        'footer': () => <div>This is the footer</div>,
       }
 
       mountSelect({ vSlots })
@@ -219,6 +220,8 @@ describe('<Select />', () => {
       // Choose an option
       .then(selectFirstOption)
 
+      cy.contains('This is the footer').should('be.visible')
+
       // The options list should be closed
       cy.get(optionsSelector).should('not.exist')
       .get(inputSelector).should('have.text', 'Selected')

packages/frontend-shared/src/components/Select.vue

@@ -136,6 +136,7 @@
                 </span>
               </li>
             </ListboxOption>
+            <slot name="footer" />
           </ListboxOptions>
         </transition>
       </div>

packages/frontend-shared/src/locales/en-US.json

@@ -355,7 +355,9 @@
       "bundlerPlaceholder": "Pick a bundler",
       "languageLabel": "Language",
       "configFileLanguageLabel": "Cypress config file",
-      "detected": "(detected)"
+      "detected": "(detected)",
+      "frameworkNotListed": "If your framework is not listed above,",
+      "browseIntegrations": "browse the list of third-party integrations"
     },
     "step": {
       "continue": "Continue",

packages/launchpad/src/setup/EnvironmentSetup.cy.tsx

@@ -54,6 +54,11 @@ describe('<EnvironmentSetup />', { viewportWidth: 800 }, () => {
 
     cy.findByRole('button', { name: 'Next step' })
     .should('have.disabled')
+
+    cy.contains('If your framework is not listed above').should('be.visible')
+    cy.findByRole('link', { name: 'browse the list of third-party integrations' }).should('have.attr', 'href', 'https://on.cypress.io/component-integrations')
+
+    cy.percySnapshot()
   })
 
   it('renders the detected flag', () => {

packages/launchpad/src/setup/FrameworkOptionsFooter.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex bg-gray-50 h-65px py-12px px-15px text-gray-800 items-center">
+    <div><IconComponent class="h-40px min-w-0 min-h-0 w-40px" /></div>
+    <div class="ml-10px">
+      <div>{{ t("setupPage.projectSetup.frameworkNotListed") }}</div>
+      <div>
+        <ExternalLink
+          href="https://on.cypress.io/component-integrations"
+          class="text-indigo-500 block hocus-link-default group"
+        >
+          {{ t('setupPage.projectSetup.browseIntegrations') }}<i-cy-arrow-right_x16
+            class="ml-4px transform transition-transform ease-in -translate-y-1px duration-200 inline-block icon-dark-current group-hocus:translate-x-2px"
+          />
+        </ExternalLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from '@cy/i18n'
+import ExternalLink from '@packages/frontend-shared/src/gql-components/ExternalLink.vue'
+import IconComponent from '~icons/cy/testing-type-component_x64.svg'
+
+const { t } = useI18n()
+
+</script>

packages/launchpad/src/setup/SelectFwOrBundler.vue

@@ -74,6 +74,12 @@
         v-html="itemValue.icon"
       />
     </template>
+    <template
+      v-if="selectorType === 'framework'"
+      #footer
+    >
+      <FrameworkOptionsFooter />
+    </template>
   </Select>
 </template>
 
@@ -88,6 +94,7 @@ import type {
 import { useI18n } from '@cy/i18n'
 import AlphaLabel from './AlphaLabel.vue'
 import CommunityLabel from './CommunityLabel.vue'
+import FrameworkOptionsFooter from './FrameworkOptionsFooter.vue'
 
 const { t } = useI18n()