"cleanup svg icon usage, types and href generation" once more (#13771)

Restoring #13746

Practically, only [5021ed1](5021ed1) is to be reviewed.

#### Original description

Fixes #13712

Removed remains of svg embedding, as it turned out to not work reliably when combined with shadow-dom (i.e. in visualizations) and the exact behavior is browser dependent. I ended up just unifying all places that reference icon's href into a single function, and added a "missing icon" visual. Unfortunately that means the playwright test snapshots still attempt a potentially cross-origin fetch request to resolve the icons, which is cancelled before hitting playwright's service-worker fetch handler. Allowing cross-origin requests in svg is often possible, but for <use> tags is not yet implemented anywhere. The only workaround that somewhat works is to run the test reporter on the same port as the app under test used to have. We unfortunately use two, so the icons will either show up in dashboard or in project-view tests.

Also deduplicated login logic in playwright tests and added extra agreement modal detection, since that modal often used to be a problem for me when running test suite locally.

#### The Fix

~~I don't know why, but adding `?no-inline` suffix made it not working. `?inline` suffix didn't work as well. Leaving now without suffix.~~

Edit: There was a bug in vite (see comments below), so bumped vite version with some others to satisfy peer dependencies + applied some necessary changes.

Also restored the old way of documenting `SvgIcon` with information why I did it that way.

Author: farmaazon

app/common/package.json

@@ -30,7 +30,7 @@
     "@internationalized/date": "3.7.0",
     "@tanstack/query-persist-client-core": "5.59.20",
     "@tanstack/vue-query": "5.59.20",
-    "@types/node": "^20.11.21",
+    "@types/node": "catalog:",
     "is-network-error": "^1.1.0",
     "lib0": "^0.2.99",
     "vitest": "catalog:",

app/gui/integration-test/dashboard/actions/index.ts

@@ -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

app/gui/integration-test/dashboard/mock/react-stripe.tsx

@@ -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",
@@ -145,7 +143,7 @@
     "@types/gunzip-maybe": "^1.4.2",
     "@types/hash-sum": "^1.0.2",
     "@types/mapbox-gl": "^3.4.1",
-    "@types/node": "^22.10.4",
+    "@types/node": "catalog:",
     "@types/papaparse": "^5.3.15",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
@@ -158,8 +156,8 @@
     "@types/ws": "^8.5.13",
     "@types/yauzl": "^2.10.3",
     "@types/zip-stream": "^7.0.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-react": "^5.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
     "@vue/devtools-api": "^7.7.7",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
@@ -191,8 +189,8 @@
     "tar-stream": "^3.1.7",
     "typescript": "catalog:",
     "vite": "catalog:",
-    "vite-plugin-vue-devtools": "7.7.7",
-    "vite-plugin-wasm": "^3.4.1",
+    "vite-plugin-vue-devtools": "^8.0.0",
+    "vite-plugin-wasm": "^3.5.0",
     "vitest": "catalog:",
     "vue-tsc": "^2.2.0",
     "yaml": "^2.7.0",

app/gui/integration-test/dashboard/mock/stripe.ts

@@ -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,

app/gui/package.json

@@ -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>
   )
 }

app/gui/playwright.config.ts

@@ -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

app/gui/src/dashboard/components/Icon/Icon.tsx

@@ -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