From f44786e74c5b343cf8810ae1760cb3d6d11ccb46 Mon Sep 17 00:00:00 2001 From: astone123 Date: Wed, 15 Feb 2023 15:19:49 -0700 Subject: [PATCH 1/6] misc: add CTA footer to launchpad framework dropdown --- .../src/components/Select.cy.tsx | 5 +++- .../frontend-shared/src/components/Select.vue | 1 + .../frontend-shared/src/locales/en-US.json | 4 ++- .../src/setup/EnvironmentSetup.cy.tsx | 5 ++++ .../src/setup/FrameworkOptionsFooter.vue | 27 +++++++++++++++++++ .../launchpad/src/setup/SelectFwOrBundler.vue | 7 +++++ 6 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 packages/launchpad/src/setup/FrameworkOptionsFooter.vue diff --git a/packages/frontend-shared/src/components/Select.cy.tsx b/packages/frontend-shared/src/components/Select.cy.tsx index f7ee25a42a3a..28723f5ab3bf 100644 --- a/packages/frontend-shared/src/components/Select.cy.tsx +++ b/packages/frontend-shared/src/components/Select.cy.tsx @@ -194,7 +194,8 @@ describe('', () => { // 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') diff --git a/packages/frontend-shared/src/components/Select.vue b/packages/frontend-shared/src/components/Select.vue index d4455eef68d7..8be9cba968f8 100644 --- a/packages/frontend-shared/src/components/Select.vue +++ b/packages/frontend-shared/src/components/Select.vue @@ -136,6 +136,7 @@ + diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json index 947962448157..884a8fd43ad5 100644 --- a/packages/frontend-shared/src/locales/en-US.json +++ b/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", diff --git a/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx b/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx index b7f90fdd5628..fe734e3c36fd 100644 --- a/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx +++ b/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx @@ -54,6 +54,11 @@ describe('', { 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', () => { diff --git a/packages/launchpad/src/setup/FrameworkOptionsFooter.vue b/packages/launchpad/src/setup/FrameworkOptionsFooter.vue new file mode 100644 index 000000000000..5f16d90ea201 --- /dev/null +++ b/packages/launchpad/src/setup/FrameworkOptionsFooter.vue @@ -0,0 +1,27 @@ + + + diff --git a/packages/launchpad/src/setup/SelectFwOrBundler.vue b/packages/launchpad/src/setup/SelectFwOrBundler.vue index 26519a526b63..45c9e530d809 100644 --- a/packages/launchpad/src/setup/SelectFwOrBundler.vue +++ b/packages/launchpad/src/setup/SelectFwOrBundler.vue @@ -74,6 +74,12 @@ v-html="itemValue.icon" /> + @@ -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() From b8f643a7cd176e754e0e328f267852ff40333117 Mon Sep 17 00:00:00 2001 From: astone123 Date: Wed, 15 Feb 2023 17:29:18 -0700 Subject: [PATCH 2/6] misc: use icon from design system --- .../src/setup/FrameworkOptionsFooter.vue | 33 ++++++++++--------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/launchpad/src/setup/FrameworkOptionsFooter.vue b/packages/launchpad/src/setup/FrameworkOptionsFooter.vue index 5f16d90ea201..c61042e91316 100644 --- a/packages/launchpad/src/setup/FrameworkOptionsFooter.vue +++ b/packages/launchpad/src/setup/FrameworkOptionsFooter.vue @@ -1,18 +1,21 @@ @@ -20,7 +23,7 @@ From 4a1909644fb54e9a20746eaad6bb7f0582721f78 Mon Sep 17 00:00:00 2001 From: astone123 Date: Mon, 20 Feb 2023 13:18:22 -0700 Subject: [PATCH 6/6] remove computed --- .../launchpad/src/setup/FrameworkOptionsFooter.vue | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/launchpad/src/setup/FrameworkOptionsFooter.vue b/packages/launchpad/src/setup/FrameworkOptionsFooter.vue index 5ae96feab020..38aea0650f40 100644 --- a/packages/launchpad/src/setup/FrameworkOptionsFooter.vue +++ b/packages/launchpad/src/setup/FrameworkOptionsFooter.vue @@ -27,16 +27,13 @@ import ExternalLink from '@packages/frontend-shared/src/gql-components/ExternalL import Icon from '@cypress-design/vue-icon' import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams' import { getUtmSource } from '@packages/frontend-shared/src/utils/getUtmSource' -import { computed } from 'vue' const { t } = useI18n() -const href = computed(() => { - return getUrlWithParams({ url: 'https://on.cypress.io/component-integrations', params: { - utm_medium: 'Select Framework Dropdown', - utm_source: getUtmSource(), - utm_campaign: 'Browse third-party frameworks', - } }) -}) +const href = getUrlWithParams({ url: 'https://on.cypress.io/component-integrations', params: { + utm_medium: 'Select Framework Dropdown', + utm_source: getUtmSource(), + utm_campaign: 'Browse third-party frameworks', +} })