chore: optimizations around browser dropdown code (#31256)

* chore: optimizations around browser dropdown code

* Write test for overlayZIndex prop, ensuring it takes effect + update styles.

* pass in numbers

Author: jennifer-shehane

packages/app/src/runner/SpecRunnerDropdown.vue

@@ -64,6 +64,8 @@ import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 const props = withDefaults(defineProps<{
   variant?: 'panel'
   align?: 'left' | 'right'
+  // The minimal prop is used to style the dropdown as a minimal button with
+  // no border, background, or chevron icon.
   minimal?: boolean
   // The disabled prop is used as the Popover key so that changes to the prop
   // cause the Popover component to mount again. This re-mounting ensures that

packages/app/src/runner/SpecRunnerHeaderOpenMode.vue

@@ -62,6 +62,7 @@
           v-if="studioStore.needsUrl && !urlDisabled"
           :aut-url-input-ref="autUrlInputRef"
           :url-in-progress="urlInProgress"
+          :overlay-z-index="studioOverlayZIndex"
           @submit="visitUrl"
           @cancel="() => eventManager.emit('studio:cancel', undefined)"
         />
@@ -182,10 +183,12 @@ watchEffect(() => {
 
 const autIframe = props.getAutIframe()
 
+const studioOverlayZIndex = 50
+
 const inputZIndex = computed(() => {
   // input needs to be above the Studio prompt overlay
   // but other times it needs to be below other resizable panels
-  return studioStore.needsUrl ? 51 : 5
+  return studioStore.needsUrl ? studioOverlayZIndex + 1 : 5
 })
 
 const displayScale = computed(() => {

packages/app/src/runner/studio/StudioUrlPrompt.cy.tsx

@@ -2,14 +2,19 @@ import StudioUrlPrompt from './StudioUrlPrompt.vue'
 
 describe('<StudioUrlPrompt />', () => {
   it('renders', () => {
-    cy.mount(<StudioUrlPrompt urlInProgress="" />)
+    cy.mount(<StudioUrlPrompt urlInProgress="" overlayZIndex={50} />)
     cy.percySnapshot()
   })
 
+  it('zindex of overlay matches passed in zindex', () => {
+    cy.mount(<StudioUrlPrompt urlInProgress="" overlayZIndex={99} />)
+    cy.get('[cy-data="studio-url-overlay"]').should('have.css', 'z-index', '99')
+  })
+
   it('emits cancel when button is clicked', () => {
     const cancelStub = cy.stub()
 
-    cy.mount(<StudioUrlPrompt urlInProgress="" onCancel={cancelStub}/>)
+    cy.mount(<StudioUrlPrompt urlInProgress="" overlayZIndex={50} onCancel={cancelStub}/>)
 
     cy.findByText('Cancel').click().then(() => {
       expect(cancelStub).to.be.called
@@ -19,7 +24,7 @@ describe('<StudioUrlPrompt />', () => {
   it('disables submit button when url field is empty', () => {
     const continueStub = cy.stub()
 
-    cy.mount(<StudioUrlPrompt urlInProgress="" onSubmit={continueStub}/>)
+    cy.mount(<StudioUrlPrompt urlInProgress="" overlayZIndex={50} onSubmit={continueStub}/>)
 
     cy.findByText('Continue ➜').should('be.disabled')
   })
@@ -29,7 +34,7 @@ describe('<StudioUrlPrompt />', () => {
 
     const url = 'http://localhost:8080'
 
-    cy.mount(<StudioUrlPrompt urlInProgress={url} onSubmit={continueStub}/>)
+    cy.mount(<StudioUrlPrompt urlInProgress={url} overlayZIndex={50} onSubmit={continueStub}/>)
 
     cy.findByText('Continue ➜').click().then(() => {
       expect(continueStub).to.be.called

packages/app/src/runner/studio/StudioUrlPrompt.vue

@@ -28,7 +28,8 @@
   </div>
   <div
     cy-data="studio-url-overlay"
-    class="bg-black h-full w-full opacity-[.35] top-0 right-0 bottom-0 left-0 z-50 fixed"
+    class="bg-black h-full w-full opacity-[.35] top-0 right-0 bottom-0 left-0 fixed"
+    :style="{ zIndex: props.overlayZIndex }"
   />
 </template>
 
@@ -41,6 +42,7 @@ const { t } = useI18n()
 const props = defineProps<{
   autUrlInputRef?: HTMLInputElement
   urlInProgress: string
+  overlayZIndex: number
 }>()
 
 const emit = defineEmits<{

packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue

@@ -80,6 +80,7 @@ import { computed } from 'vue'
 import { gql, useMutation } from '@urql/vue'
 import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 import Tooltip from '../../components/Tooltip.vue'
+import _ from 'lodash'
 
 const { t } = useI18n()
 
@@ -121,10 +122,12 @@ const props = withDefaults(defineProps <{
 })
 
 const browsers = computed(() => {
-  const alphaSortedBrowser = (props.gql.browsers ?? []).slice().sort((a, b) => a.displayName > b.displayName ? 1 : -1)
+  const alphaSortedBrowser = _.sortBy(props.gql.browsers ?? [], 'displayName')
+
+  const [selectedBrowser] = _.remove(alphaSortedBrowser, (browser) => browser.isSelected)
 
   // move the selected browser to the top to easily see selected browser version at the top when opening the dropdown
-  alphaSortedBrowser.some((browser, i) => browser.isSelected && alphaSortedBrowser.unshift(alphaSortedBrowser.splice(i, 1)[0]))
+  alphaSortedBrowser.unshift(selectedBrowser)
 
   return alphaSortedBrowser
 })