enso-org · mergify · Aug 14, 2025 · Aug 13, 2025 · Aug 13, 2025 · Aug 13, 2025
@@ -14,7 +14,7 @@ import {
   type LocalTrackedCalls,
 } from './localApi'
 import LoginPageActions from './LoginPageActions'
-import { passAgreementsDialog, TEXT, VALID_PASSWORD, type MockParams } from './utilities'
+import { passAgreementsDialog, TEXT, type MockParams } from './utilities'
 export * from './utilities'
 
 export const getText = (key: TextId, ...replacements: Replacements[TextId]) => {
@@ -28,35 +28,23 @@ export function getAuthFilePath() {
 }
 
 /** Perform a successful login. */
-async function login({ page }: MockParams, email = '[email protected]', password = VALID_PASSWORD) {
+async function loginIfNeeded(page: Page, actions: LoginPageActions<Context>) {
   const authFile = getAuthFilePath()
-
-  await waitForLoaded(page)
   const isLoggedIn = (await page.getByTestId('before-auth-layout').count()) === 0
-
   if (isLoggedIn) {
     test.info().annotations.push({
       type: 'skip',
       description: 'Already logged in',
     })
-    return
-  }
-
-  return test.step('Login', async () => {
-    test.info().annotations.push({
-      type: 'Login',
-      description: 'Performing login',
-    })
-    await page.getByPlaceholder(TEXT.emailPlaceholder).fill(email)
-    await page.getByPlaceholder(TEXT.passwordPlaceholder).fill(password)
-    await page.getByRole('button', { name: TEXT.login, exact: true }).getByText(TEXT.login).click()
-
-    await expect(page.getByText(TEXT.loadingAppMessage)).not.toBeVisible()
-
-    await passAgreementsDialog({ page })
-
+    const agreementModalVisible = (await page.locator('#agreements-modal').count()) > 0
+    if (agreementModalVisible) {
+      await passAgreementsDialog({ page })
+      await page.context().storageState({ path: authFile })
+    }
+  } else {
+    await actions.login()
     await page.context().storageState({ path: authFile })
-  })
+  }
 }
 
 /** Wait for the page to load. */
@@ -144,7 +132,7 @@ export function mockAllAndLogin({
   const actions = mockAll({ page, setupAPI, setupLocalAPI })
 
   const driveActions = actions
-    .step('Login', (page) => login({ page }))
+    .step('Pass login screen', (page, _ctx, actions) => loginIfNeeded(page, actions))
     .step('Wait for dashboard to load', waitForDashboardToLoad)
     .into(DrivePageActions<Context>)
   return goToCloudFirst ? driveActions.goToCategory.cloud() : driveActions

@@ -67,8 +67,6 @@
     "@react-aria/interactions": "3.23.0",
     "@sentry/vite-plugin": "^2.22.7",
     "@sentry/vue": "^7.120.2",
-    "@stripe/react-stripe-js": "^2.9.0",
-    "@stripe/stripe-js": "^3.5.0",
     "@tanstack/react-query": "5.59.20",
     "@tanstack/vue-query": "5.59.20",
     "@vue/reactivity": "^3.5.13",

@@ -78,7 +78,9 @@ export default defineConfig({
   fullyParallel: true,
   ...(WORKERS ? { workers: WORKERS } : {}),
   forbidOnly: isCI,
-  reporter: isCI ? [['list'], ['blob']] : [['html']],
+  // Make test preview use the same port as test URL, so that svg icons are properly displayed.
+  // Unfortunately we can't make it work for both dashboard and project-view at the same time.
+  reporter: isCI ? [['list'], ['blob']] : [['html', { port: ports.projectView }]],
   retries: isCI ? 1 : 0,
   use: {
     actionTimeout: 5000,

@@ -12,8 +12,8 @@ import type {
   TestIdProps,
 } from '#/components/types'
 import { tv, type VariantProps } from '#/utilities/tailwindVariants'
-import icons from '@/assets/icons.svg'
 import { isIconName, type Icon as PossibleIcon } from '@/util/iconMetadata/iconName'
+import { svgUseHref } from '@/util/icons'
 import { memo } from 'react'
 import SvgMask from '../SvgMask'
 
@@ -171,12 +171,7 @@ export function SvgUse(props: SvgUseProps) {
       preserveAspectRatio="xMidYMid slice"
       aria-label={alt}
     >
-      <use
-        href={icon.includes(':') ? icon : `${icons}#${icon}`}
-        className="h-full w-full"
-        aria-hidden="true"
-        data-icon={icon}
-      />
+      <use href={svgUseHref(icon)} className="h-full w-full" aria-hidden="true" data-icon={icon} />
     </svg>
   )
 }

@@ -3,8 +3,7 @@ import NodeWidget from '@/components/GraphEditor/NodeWidget.vue'
 import GrowingSpinner from '@/components/shared/GrowingSpinner.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import { Score, defineWidget, widgetProps } from '@/providers/widgetRegistry'
-import { type URLString } from '@/util/data/urlString'
-import { type Icon } from '@/util/iconMetadata/iconName'
+import { type AnyWidgetIcon } from '@/util/icons'
 import { computed } from 'vue'
 
 const props = defineProps(widgetProps(widgetDefinition))
@@ -17,7 +16,7 @@ export const DisplayIcon: unique symbol = Symbol.for('WidgetInput:DisplayIcon')
 declare module '@/providers/widgetRegistry' {
   export interface WidgetInput {
     [DisplayIcon]?: {
-      icon: Icon | URLString | '$evaluating'
+      icon: AnyWidgetIcon
       allowChoice?: boolean
       showContents?: boolean
       noGap?: boolean

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { URLString } from '@/util/data/urlString'
-import type { Icon } from '@/util/iconMetadata/iconName'
+import { type AnyIcon } from '@/util/icons'
 import SvgButton from './SvgButton.vue'
 
 const props = defineProps<{
-  icon?: Icon | URLString | undefined
+  icon?: AnyIcon | undefined
   label?: string | undefined
   disabled?: boolean
   title?: string | undefined

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import MenuButton from '@/components/MenuButton.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
-import type { URLString } from '@/util/data/urlString'
-import type { Icon } from '@/util/iconMetadata/iconName'
+import { AnyIcon } from '@/util/icons'
 
 const toggledOn = defineModel<boolean | undefined>()
 defineProps<{
-  name?: Icon | URLString | undefined
+  name?: AnyIcon | undefined
   label?: string | undefined
   disabled?: boolean | undefined
   title?: string | undefined

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { AnyIcon, svgUseHref } from '@/util/icons'
+// This export is to have this widely used component's docs displayed in IDE.
 /**
  * A component displaying a SVG icon.
  *
@@ -8,23 +10,17 @@ export default {}
 </script>
 
 <script setup lang="ts">
-import icons from '@/assets/icons.svg'
-import type { URLString } from '@/util/data/urlString'
-import type { Icon } from '@/util/iconMetadata/iconName'
-
-const props = defineProps<{
-  name: Icon | URLString
-}>()
+const { name } = defineProps<{ name: AnyIcon }>()
 </script>
 
 <template>
   <svg class="SvgIcon" viewBox="0 0 16 16" preserveAspectRatio="xMidYMid slice">
-    <use :href="props.name.includes(':') ? props.name : `${icons}#${props.name}`"></use>
+    <use :href="svgUseHref(name)"></use>
   </svg>
 </template>
 
 <style scoped>
-svg.SvgIcon {
+.SvgIcon {
   overflow: visible; /* Prevent slight cutting off icons that are using all available space. */
   width: var(--icon-width, var(--icon-size, 16px));
   height: var(--icon-height, var(--icon-size, 16px));

@@ -1,13 +1,12 @@
 <script lang="ts">
-import icons from '@/assets/icons.svg'
 import AgGridTableView, { commonContextMenuActions } from '@/components/shared/AgGridTableView.vue'
 import {
   useTableVizToolbar,
   type SortModel,
 } from '@/components/visualizations/TableVisualization/tableVizToolbar'
 import { Ast } from '@/util/ast'
 import { Pattern } from '@/util/ast/match'
-import { Icon } from '@/util/iconMetadata/iconName'
+import { svgUseHref } from '@/util/icons'
 import { useVisualizationConfig } from '@/util/visualizationBuiltins'
 import type {
   CellClassParams,
@@ -183,8 +182,8 @@ const grid = ref<
   ComponentInstance<typeof AgGridTableView> & ComponentExposed<typeof AgGridTableView>
 >()
 
-const getSvgTemplate = (icon: Icon) =>
-  `<svg viewBox="0 0 16 16" width="16" height="16"> <use xlink:href="${icons}#${icon}"/> </svg>`
+const getSvgTemplate = (icon: string) =>
+  `<svg viewBox="0 0 16 16" width="16" height="16"><use xlink:href="${svgUseHref(icon)}"/></svg>`
 
 const getContextMenuItems = (
   params: GetContextMenuItemsParams,
@@ -201,7 +200,7 @@ const getContextMenuItems = (
   const createMenuItem = ({ name, action, colId, rowIndex, icon }: (typeof actions)[number]) => ({
     name,
     action: () => createValueNode(colId, rowIndex, action),
-    icon: getSvgTemplate(icon as Icon),
+    icon: getSvgTemplate(icon),
   })
 
   return [

@@ -1,13 +1,12 @@
-import type { URLString } from '@/util/data/urlString'
-import type { Icon } from '@/util/iconMetadata/iconName'
+import { AnyIcon } from '@/util/icons'
 import type { ToValue } from '@/util/reactivity'
 import type { Ref } from 'vue'
 
 export interface Button {
   iconStyle?: Record<string, string>
   title?: string
   dataTestid?: string
-  icon: Icon | URLString
+  icon: AnyIcon
 }
 
 export interface ActionButton extends Button {