From ff425a65224c0e5e08b2fae596a6ac8aa1eebcba Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 23 May 2022 12:31:18 +1000
Subject: [PATCH 1/2] sort correctly

---
 packages/launchpad/src/setup/EnvironmentSetup.cy.tsx |  8 ++++++++
 packages/launchpad/src/setup/EnvironmentSetup.vue    | 11 ++---------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx b/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx
index 8db77a6b5dea..ff7ba27197d6 100644
--- a/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx
+++ b/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx
@@ -22,6 +22,14 @@ describe('<EnvironmentSetup />', { viewportWidth: 800 }, () => {
     .click()
     .should('have.attr', 'aria-expanded', 'true')
 
+    cy.get('li')
+    .then(($items) => {
+      return $items.map((_idx, html) => Cypress.$(html).text()).get()
+    })
+    // alphabetical order
+    // we should "support is in alpha" for a11y (not shown visually)
+    .should('deep.eq', ['Create React App (v5) Support is in Alpha', 'Vue.js (v3)'])
+
     const frameworkIconName = (frameworkName: string) => {
       if (frameworkName.includes('React')) {
         return 'react-logo'
diff --git a/packages/launchpad/src/setup/EnvironmentSetup.vue b/packages/launchpad/src/setup/EnvironmentSetup.vue
index 4fb5df028756..b948be9ba137 100644
--- a/packages/launchpad/src/setup/EnvironmentSetup.vue
+++ b/packages/launchpad/src/setup/EnvironmentSetup.vue
@@ -43,7 +43,6 @@ import {
 } from '../generated/graphql'
 
 import { useI18n } from '@cy/i18n'
-import { sortBy } from 'lodash'
 import { useMutation } from '@urql/vue'
 
 gql`
@@ -93,18 +92,12 @@ const { t } = useI18n()
 
 const bundlers = computed(() => {
   const all = props.gql.framework?.supportedBundlers || []
-  const _bundlers = all.map((b) => {
-    return {
-      disabled: all.length <= 1,
-      ...b,
-    }
-  })
 
-  return _bundlers
+  return all.map((b) => ({ disabled: all.length <= 1, ...b })).sort((x, y) => x.name.localeCompare(y.name))
 })
 
 const frameworks = computed(() => {
-  return sortBy((props.gql.frameworks ?? []).map((f) => ({ ...f })), 'category')
+  return (props.gql.frameworks || []).map((x) => ({ ...x })).sort((x, y) => x.name.localeCompare(y.name))
 })
 
 gql`

From 47eaed79b8426573442b3477e2745724d312604f Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 23 May 2022 12:37:42 +1000
Subject: [PATCH 2/2] fix test

---
 packages/launchpad/src/setup/EnvironmentSetup.cy.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx b/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx
index ff7ba27197d6..9b9cb5bf25b0 100644
--- a/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx
+++ b/packages/launchpad/src/setup/EnvironmentSetup.cy.tsx
@@ -28,7 +28,7 @@ describe('<EnvironmentSetup />', { viewportWidth: 800 }, () => {
     })
     // alphabetical order
     // we should "support is in alpha" for a11y (not shown visually)
-    .should('deep.eq', ['Create React App (v5) Support is in Alpha', 'Vue.js (v3)'])
+    .should('deep.eq', ['Create React App (v5) Support is in  Alpha', 'Vue.js (v3)'])
 
     const frameworkIconName = (frameworkName: string) => {
       if (frameworkName.includes('React')) {