Maintenance: Update dependency tailwindcss to v4

.dev/cypress/types/commands.ts

@@ -8,11 +8,9 @@ declare global {
        * Simulates a paste event.
        * Modified from https://gist.github.com/nickytonline/bcdef8ef00211b0faf7c7c0e7777aaf6
        *
-       * @param subject A jQuery context representing a DOM element.
-       * @param pasteOptions Set of options for a simulated paste event.
        * @param pasteOptions.pastePayload Simulated data that is on the clipboard.
        * @param pasteOptions.pasteFormat The format of the simulated paste payload. Default value is 'text'.
-       * @param pasteOptions.files A list of assisiated file, if any
+       * @param pasteOptions.files A list of assisted file, if any
        *
        * @returns The subject parameter.
        *
@@ -21,6 +19,7 @@ declare global {
        *   pasteType: 'application/json',
        *   pastePayload: {hello: 'yolo'},
        * });
+       * @param options
        */
       paste(options: {
         pastePayload?: string

.dev/cypress/visual-regression/run.sh

@@ -2,4 +2,4 @@
 
 pnpm install --frozen-lockfile --ignore-scripts
 pnpm cypress:install --frozen-lockfile
-pnpm test:ci:ct --env pluginVisualRegressionUpdateImages=$CYPRESS_UPDATE_SNAPSHOTS --spec '../**/*-visuals.cy.*'
+pnpm test:ci:ct --env pluginVisualRegressionUpdateImages=$CYPRESS_UPDATE_SNAPSHOTS --spec '../../**/*-visuals.cy.*'

.eslintignore

@@ -5,6 +5,7 @@ app/frontend/**/graphql/**/*.ts
 !app/frontend/tests/graphql/**/*.ts
 app/frontend/shared/graphql/types.ts
 app/frontend/shared/types/config.ts
+/.dev/cypress/dist/*
 
 # Skip legacy files
 public/assets/tests/**/*.js

.gitlab/renovate.json

@@ -1,8 +1,8 @@
 {
   "enabledManagers": ["bundler", "npm", "github-actions"],
-  "lockFileMaintenance": {"enabled": false},
+  "lockFileMaintenance": { "enabled": false },
   "packageRules": [
-    {"matchCategories": ["ci"], "assignees": ["mg"]},
+    { "matchCategories": ["ci"], "assignees": ["mg"] },
     {
       "matchCategories": ["ruby"],
       "assignees": ["mg"],
@@ -93,12 +93,18 @@
     {
       "matchCategories": ["js"],
       "matchPackageNames": ["pinia", "/^@vue/", "/^vue/"],
-      "excludePackageNames": ["@vue/eslint-config-prettier", "@vue/eslint-config-typescript"],
+      "excludePackageNames": [
+        "@vue/eslint-config-prettier",
+        "@vue/eslint-config-typescript"
+      ],
       "groupName": "Vue packages",
       "groupSlug": "vue"
     },
     {
-      "matchPackageNames": ["@vue/eslint-config-prettier", "@vue/eslint-config-typescript"],
+      "matchPackageNames": [
+        "@vue/eslint-config-prettier",
+        "@vue/eslint-config-typescript"
+      ],
       "groupName": "Vue ESLint Configs",
       "groupSlug": "vue-eslint-configs"
     },

app/frontend/apps/desktop/components/CommonActionMenu/CommonActionMenu.vue

@@ -67,11 +67,17 @@ const singleActionAriaLabel = computed(() => {
 })
 
 const buttonVariantClassExtension = computed(() => {
+  const hoverClass = 'dark:hover:border-blue-700! hover:border-blue-800!'
+
   if (props.defaultButtonVariant === 'neutral-dark')
-    return 'border border-neutral-100 !outline-transparent dark:hover:border-blue-700 hover:border-blue-800 bg-neutral-50 hover:bg-white text-gray-100 dark:border-gray-900 dark:bg-gray-500 dark:text-neutral-400'
+    return ` border! border-neutral-100! bg-neutral-50! hover:bg-white! hover:dark:bg-gray-500! text-gray-100! dark:border-gray-900! dark:bg-gray-500! dark:text-neutral-400! ${
+      popoverIsOpen.value ? 'border-transparent!' : hoverClass
+    }`
 
   if (props.defaultButtonVariant === 'neutral-light')
-    return 'border border-neutral-100 !outline-transparent dark:hover:border-blue-700 hover:border-blue-800 hover:bg-white bg-blue-100 text-gray-100 dark:border-gray-900 dark:bg-stone-500 dark:text-neutral-400'
+    return ` border! border-neutral-100! bg-blue-100! text-gray-100! dark:border-gray-900! dark:bg-stone-500! dark:text-neutral-400! ${
+      popoverIsOpen.value ? '' : hoverClass
+    }`
 
   return ''
 })
@@ -83,22 +89,22 @@ const singleActionMode = computed(() => {
 })
 
 const variantClasses = computed(() => {
-  if (singleMenuItem.value?.variant === 'secondary') return 'text-blue-800'
-  if (singleMenuItem.value?.variant === 'danger') return 'text-red-500'
-  return 'text-stone-200 dark:text-neutral-500'
+  if (singleMenuItem.value?.variant === 'secondary') return 'text-blue-800!'
+  if (singleMenuItem.value?.variant === 'danger') return 'text-red-500!'
+  return 'text-stone-200! dark:text-neutral-500!'
 })
 </script>
 
 <template>
   <div
     v-if="filteredMenuItems && filteredMenuItems.length > 0"
-    class="-:inline-block"
+    class="inline-block"
   >
     <template v-if="singleActionMode">
       <CommonLink
         v-if="singleMenuItem?.link"
         v-tooltip="$t(singleActionAriaLabel)"
-        class="flex focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800"
+        class="flex focus:outline-hidden focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800"
         :aria-label="$t(singleActionAriaLabel)"
         :disabled="disabled"
         :link="singleMenuItem.link"
@@ -113,7 +119,7 @@ const variantClasses = computed(() => {
       <CommonButton
         v-else
         v-tooltip="$t(singleActionAriaLabel)"
-        class="rounded-sm p-0"
+        class="rounded-xs p-0"
         :class="[variantClasses]"
         :size="buttonSize"
         :disabled="disabled"
@@ -131,12 +137,12 @@ const variantClasses = computed(() => {
         aria-haspopup="true"
         :aria-controls="popoverIsOpen ? menuId : undefined"
         :disabled="disabled"
+        class="outline-offset-0!"
         :class="[
           {
-            'outline outline-1 outline-offset-1 outline-blue-800 hover:outline-blue-800 hover:dark:outline-blue-800':
-              popoverIsOpen,
+            'outline! outline-blue-800!': popoverIsOpen,
             'p-0': noPaddedDefaultButton,
-            'rounded-sm': !noSmallRoundingDefaultButton,
+            'rounded-xs': !noSmallRoundingDefaultButton,
           },
           buttonVariantClassExtension,
         ]"

app/frontend/apps/desktop/components/CommonBreadcrumb/CommonBreadcrumb.vue

@@ -49,7 +49,7 @@ const sizeClasses = computed(() => {
 
         <CommonLink
           v-if="item.route"
-          class="focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800"
+          class="focus:outline-hidden focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800"
           :link="item.route"
           internal
         >
@@ -70,7 +70,7 @@ const sizeClasses = computed(() => {
 
         <CommonBadge
           v-if="item.count !== undefined"
-          class="font-bold leading-snug ltr:ml-1.5 rtl:mr-1.5"
+          class="leading-snug font-bold ltr:ml-1.5 rtl:mr-1.5"
           size="xs"
           rounded
         >

app/frontend/apps/desktop/components/CommonButton/CommonButton.vue

@@ -75,7 +75,7 @@ const variantClasses = computed(() => {
       return []
     case 'secondary':
     default:
-      return ['-:bg-transparent', '-:hover:bg-transparent', 'text-blue-800']
+      return ['bg-transparent', 'hover:bg-transparent', 'text-blue-800']
   }
 })
 
@@ -141,7 +141,7 @@ const iconSizeClass = computed(() => {
 
 <template>
   <button
-    class="-:inline-flex -:focus:outline-none -:focus:outline-0 -:focus:outline-offset-0 -:border-0 h-min min-h-min flex-shrink-0 flex-nowrap items-center justify-center gap-x-1 font-normal shadow-none transition-transform duration-200 hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus:hover:outline focus:hover:outline-1 focus:hover:outline-offset-1 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 focus:active:scale-[95%] focus:active:!outline-blue-800 dark:hover:outline-blue-900"
+    class="inline-flex h-min min-h-min flex-shrink-0 flex-nowrap items-center justify-center gap-x-1 border-0 font-normal shadow-none transition-transform duration-200 hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus:outline-hidden focus:outline-0 focus:outline-offset-0 focus:hover:outline-1 focus:hover:outline-offset-1 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 focus:active:scale-[95%] focus:active:outline-blue-800! dark:hover:outline-blue-900"
     :class="[
       ...variantClasses,
       ...sizeClasses,

app/frontend/apps/desktop/components/CommonButton/__tests__/CommonButton.spec.ts

@@ -11,11 +11,7 @@ describe('CommonButton.vue', () => {
     const button = view.getByRole('button')
 
     expect(button).toHaveAttribute('type', 'button')
-    expect(button).toHaveClasses([
-      '-:inline-flex',
-      '-:bg-transparent',
-      'btn-sm',
-    ])
+    expect(button).toHaveClasses(['inline-flex', 'bg-transparent', 'btn-sm'])
   })
 
   it('renders default slot as the button label', async () => {
@@ -75,7 +71,7 @@ describe('CommonButton.vue', () => {
     },
     {
       variant: 'secondary',
-      classes: ['-:bg-transparent'],
+      classes: ['bg-transparent'],
     },
     {
       variant: 'tertiary',

app/frontend/apps/desktop/components/CommonDropdown/CommonDropdown.vue

@@ -103,9 +103,10 @@ const actionItems = computed(() =>
     ref="popoverTarget"
     class="group"
     :class="{
-      'hover:bg-blue-600 hover:text-black dark:hover:bg-blue-900 dark:hover:text-white':
+      'hover:bg-blue-600! hover:text-black dark:hover:bg-blue-900! dark:hover:text-white':
         !isOpen,
-      'bg-blue-800 text-white hover:bg-blue-800': isOpen,
+      'bg-blue-800! text-white! outline! outline-offset-1! outline-blue-800! hover:bg-blue-800!':
+        isOpen,
     }"
     size="large"
     variant="secondary"
@@ -118,7 +119,7 @@ const actionItems = computed(() =>
       <CommonIcon
         size="small"
         decorative
-        class="pointer-events-none shrink-0 text-stone-200 transition duration-200 dark:text-neutral-500 dark:group-hover:text-white"
+        class="pointer-events-none shrink-0 text-stone-200 dark:text-neutral-500 dark:group-hover:text-white"
         :class="{
           'text-white dark:text-white': isOpen,
           'group-hover:text-black dark:group-hover:text-white': !isOpen,

app/frontend/apps/desktop/components/CommonFlyout/CommonFlyout.vue

@@ -280,7 +280,7 @@ const transition = VITE_TEST_MODE
       ref="flyout-container"
       tag="aside"
       tabindex="-1"
-      class="overflow-clip-x fixed bottom-0 top-0 z-40 flex max-h-dvh min-w-min flex-col border-y border-neutral-100 bg-neutral-50 ltr:right-0 ltr:rounded-l-xl ltr:border-l rtl:left-0 rtl:rounded-r-xl rtl:border-r dark:border-gray-900 dark:bg-gray-500"
+      class="overflow-clip-x fixed top-0 bottom-0 z-40 flex max-h-dvh min-w-min flex-col border-y border-neutral-100 bg-neutral-50 ltr:right-0 ltr:rounded-l-xl ltr:border-l rtl:left-0 rtl:rounded-r-xl rtl:border-r dark:border-gray-900 dark:bg-gray-500"
       :no-close-on-backdrop-click="noCloseOnBackdropClick"
       :show-backdrop="showBackdrop && isActive"
       :style="{ width: `${flyoutContainerWidth}px` }"