Skip to content

Update dependency vuetify to v4#2800

Open
gardener-ci-robot wants to merge 7 commits intomasterfrom
renovate/vuetify-4.x
Open

Update dependency vuetify to v4#2800
gardener-ci-robot wants to merge 7 commits intomasterfrom
renovate/vuetify-4.x

Conversation

@gardener-ci-robot
Copy link
Contributor

@gardener-ci-robot gardener-ci-robot commented Feb 23, 2026

This PR contains the following updates:

Package Change Age Confidence
vuetify (source) ^3.7.5^4.0.0 age confidence

Release Notes

vuetifyjs/vuetify (vuetify)

v4.0.0

Compare Source

v4.0.0 (Revisionist)

Welcome to the v4.0.0 release of Vuetify!

Supporting Vuetify

Vuetify is an open source MIT project that has been made possible due to the generous contributions by sponsors and backers. If your business depend on Vuetify, please consider joining sponsors and backers on various platforms to help support ongoing development and new features.

💯 Release notes

🚀 Features
🔧 Bug Fixes
  • colors: correct CSS layer name (47d4b70)
  • defaults: skip undefined values (2a74859), closes #​17845
  • inputs: restore plain/underlined icon alignment (5495cca)
  • styles: utilities should override responsive typography (#​22573) (878907f)
  • VSnackbarQueue: pause all items when collapsed and hovered (df63fec)
  • theme: re-merge default variables when themes is set (a14c763)
  • theme: helpers should override theme base (2690877)
  • theme: override automatic text color with classes (#​22475) (59b11d5)
  • theme: .text- classes always override color from .bg- (7edf33a), closes #​21787
  • VContainer: drop dependency on utility class (47ca5c8)
  • VCounter: inherit color (aligns with VMessages) (#​22424) (ecd07b9)
  • VField: append/prepend should fill height (add5d2d)
  • VOverlay: apply scrollbar offset to body and VNavigationDrawer (ec926d7)
🔬 Code Refactoring
  • styles: replace !important with layers (7484c81)
  • VBtn: remove default text transform (#​21079) (712bdd6)
  • VBtn: convert display from grid to flex (41b7768)

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.


  • If you want to rebase/retry this PR, check this box

This PR has been generated by Renovate Bot.

Summary by CodeRabbit

  • Dependencies

    • Upgraded Vuetify to 4.0.0.
  • Bug Fixes

    • Fixed item rendering in dropdowns, lists and selection controls to use the updated item shape.
  • Style

    • Global typography and spacing adjustments across the UI and a new .v-btn rule to uppercase button text.
  • Tests

    • Updated UI selector in a login test to match revised styles.

@gardener-ci-robot gardener-ci-robot added kind/enhancement Enhancement, improvement, extension renovate labels Feb 23, 2026
@gardener-prow gardener-prow bot added cla: yes Indicates the PR's author has signed the cla-assistant.io CLA. size/M Denotes a PR that changes 30-99 lines, ignoring generated files. labels Feb 23, 2026
@gardener-prow
Copy link

gardener-prow bot commented Feb 23, 2026

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign grolu for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@coderabbitai
Copy link

coderabbitai bot commented Feb 23, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Updated Vuetify dependency to 4.0.0 and adjusted many frontend templates and a few filter method signatures to read item properties directly (item.) instead of item.raw.; several import paths for Vuetify color utilities and multiple typography class renames were also applied. No behavioral/control-flow changes beyond signature adjustments noted.

Changes

Cohort / File(s) Summary
Package registry / lock
./.pnp.cjs
Bumped Vuetify virtual package identifiers and version strings from 3.x → 4.0.0 (metadata-only updates).
Dependency manifest
frontend/package.json
Bumped vuetify dependency from ^3.7.5^4.0.0.
Template bindings (item.raw → item)
frontend/src/components/.../GIconPicker.vue, frontend/src/components/.../GWildcardSelect.vue, frontend/src/components/.../GMemberDialog.vue, frontend/src/components/.../GNewShootDetails.vue, frontend/src/components/.../GNewShootInfrastructureDetails.vue, frontend/src/components/.../GShootVersionUpdate.vue, frontend/src/components/.../GMachineImage.vue, frontend/src/components/.../GVolumeType.vue, frontend/src/components/.../GTerminalSettings.vue, frontend/src/components/.../GSelectCredential.vue
Replaced template property accesses from item.raw.* to item.* (titles, subtitles, icons, values, timestamps, selection displays). No new control flow.
Filter / selection logic & method signatures
frontend/src/components/ShootWorkers/GMachineType.vue, frontend/src/views/GCredentials.vue
Adjusted customFilter signatures to accept internalItem and derive item = internalItem.raw internally; internal property accesses normalized to new shapes.
Vuetify imports for colors
frontend/src/plugins/vuetify.js, frontend/src/composables/useCustomColors.js, frontend/src/composables/useShootSubscription.js, frontend/eslint.config.cjs
Changed import path from vuetify/lib/util/colorsvuetify/util/colors.
Global styles
frontend/src/sass/main.scss
Added .v-btn { text-transform: uppercase; } global rule.
Typography/class renames (presentation-only)
many frontend/src/components/... and frontend/src/views/... files (e.g., GLogin.spec.js, GListItemContent.vue, GMainToolbar.vue, GMessage.vue, GShootMessageDetails.vue, GMaintenanceComponents.vue, etc.)
Replaced numerous Vuetify typography utility classes (e.g., text-h6text-title-large, text-subtitle-1text-body-large, text-captiontext-body-small, etc.). Purely presentational changes.
Tests
frontend/__tests__/components/GLogin.spec.js
Updated DOM selector expectation to match renamed typography class.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • holgerkoser
  • klocke-io
  • petersutter

Poem

🐇 I hopped through templates, swapped .raw for item,
Vuetify climbed a rung — now versions are prime.
I nudged some imports, tweaked a class or two,
Buttons shout UPPERCASE — I’m quite pleased, it’s true.
A little rabbit cheer for this tidy UI climb.

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description is incomplete per the template. It lacks 'What this PR does / why we need it', 'Which issue(s) this PR fixes', and 'Special notes for your reviewer' sections, though it does provide release notes and change context. Complete the missing template sections: add explanation of PR purpose, reference any related issues, and provide reviewer notes about breaking changes and migration guidance.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change: updating the vuetify dependency to version 4, which is the primary focus of the entire PR across all affected files.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch renovate/vuetify-4.x

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
frontend/package.json (1)

109-109: ⚠️ Potential issue | 🟠 Major

Verify vite-plugin-vuetify ^2.0.4 compatibility with Vuetify 4.

The latest published version of vite-plugin-vuetify is 2.1.3, which declares vuetify: ">=3" as a peer dependency. While this semver range technically permits Vuetify 4.x, it is not an explicit guarantee of compatibility. The plugin was designed for Vuetify 3 (initial releases declared vuetify: "^3.0.0"), and there is no evidence of deliberate Vuetify 4 testing or validation. If Vuetify 4's internal structure—particularly component registration, auto-import paths, or Sass exports—differs from Vuetify 3, the tree-shaking transform and style injection will fail at build time. Either confirm compatibility with Vuetify 4 through manual testing or upgrade to a version with explicit Vuetify 4 support.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/package.json` at line 109, The dependency entry
"vite-plugin-vuetify": "^2.0.4" may not be explicitly compatible with Vuetify 4;
either verify compatibility by testing the app build/run with Vuetify 4 (run
dev/build, exercise components that rely on auto-imports and styles to ensure
tree-shaking and style injection work) or upgrade the dependency to a release
that declares Vuetify 4 support (e.g., bump "vite-plugin-vuetify" to a known
compatible release such as ^2.1.3), then reinstall (npm/yarn/pnpm), rebuild, and
re-run tests; also check the plugin changelog and package peerDependencies to
confirm compatibility before merging.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/package.json`:
- Line 81: The package.json change bumps "vuetify" to "^4.0.0" but the project's
"vite-plugin-vuetify" is still on the 2.x line (incompatible), so revert the
Vuetify bump: change the "vuetify" dependency back to the compatible 3.x range
(e.g., "^3.x") and keep the existing "vite-plugin-vuetify" until a
4.x-compatible plugin is released; also add a short comment in package.json or
PR description referencing "vite-plugin-vuetify" and that upgrading to Vuetify 4
requires a plugin release plus code changes to components/composables (useTheme,
color utils, SCSS vars) and full testing before re-attempting the upgrade.
- Line 81: Replace the deep import path "vuetify/lib/util/colors" with the
public API "vuetify/util/colors" in the three modules that currently use the
deep import: update the import statement in src/plugins/vuetify.js (where colors
are imported for theme setup), in src/composables/useShootSubscription.js (the
import at the top that pulls colors), and in src/composables/useCustomColors.js
(the import around line 13); keep the rest of the import names the same so usage
(e.g., color constants or functions referenced in those files) continues to work
and run the build to confirm no other deep imports remain.

---

Outside diff comments:
In `@frontend/package.json`:
- Line 109: The dependency entry "vite-plugin-vuetify": "^2.0.4" may not be
explicitly compatible with Vuetify 4; either verify compatibility by testing the
app build/run with Vuetify 4 (run dev/build, exercise components that rely on
auto-imports and styles to ensure tree-shaking and style injection work) or
upgrade the dependency to a release that declares Vuetify 4 support (e.g., bump
"vite-plugin-vuetify" to a known compatible release such as ^2.1.3), then
reinstall (npm/yarn/pnpm), rebuild, and re-run tests; also check the plugin
changelog and package peerDependencies to confirm compatibility before merging.

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 69046fa and 5d8b3b6.

⛔ Files ignored due to path filters (2)
  • .yarn/cache/vuetify-npm-4.0.0-ef6e708af3-86bf2449a8.zip is excluded by !**/.yarn/**, !**/*.zip
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (2)
  • .pnp.cjs
  • frontend/package.json

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (2)
frontend/package.json (2)

81-81: ⚠️ Potential issue | 🟡 Minor

Replace vuetify/lib/util/colors deep imports with the public API path.

The three usages of vuetify/lib/util/colors in src/plugins/vuetify.js, src/composables/useShootSubscription.js, and src/composables/useCustomColors.js need to be updated to vuetify/util/colors as part of this upgrade. This was flagged in a prior review and is still unaddressed.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/package.json` at line 81, Three files import from the internal path
'vuetify/lib/util/colors' which must be switched to the public API path; update
the import statements in src/plugins/vuetify.js,
src/composables/useShootSubscription.js, and src/composables/useCustomColors.js
to import from 'vuetify/util/colors' instead, preserving the same imported
symbols (e.g. color names or utilities) and run a quick build/test to ensure no
renamed exports are used.

81-81: ⚠️ Potential issue | 🔴 Critical

vite-plugin-vuetify 2.x remains incompatible with Vuetify 4 — this bump is blocked.

This was flagged in a prior review and the blocker is still present. The latest published version of vite-plugin-vuetify is 2.1.2. Its peer-dependency range covers only vuetify: ^3.0.0, and the npm latest dist-tag for vuetify itself is still 3.11.6, meaning Vuetify 4.0.0 has not been promoted to latest on npm. No vite-plugin-vuetify v3.x exists in the registry. Until a compatible plugin version is released and integrated, merging this bump will break the build.

Run the script below to confirm the current state of both packages on npm before re-attempting the upgrade:

#!/bin/bash
# Description: Check vuetify and vite-plugin-vuetify npm dist-tags and peer deps

echo "=== vuetify dist-tags ==="
curl -s https://registry.npmjs.org/vuetify | python3 -c "
import json, sys
data = json.load(sys.stdin)
print('dist-tags:', json.dumps(data.get('dist-tags', {}), indent=2))
v4 = sorted([v for v in data.get('versions', {}).keys() if v.startswith('4.')])
print('v4 versions available:', v4[-5:] if v4 else 'None')
"

echo -e "\n=== vite-plugin-vuetify dist-tags and peer deps ==="
curl -s https://registry.npmjs.org/vite-plugin-vuetify | python3 -c "
import json, sys
data = json.load(sys.stdin)
print('dist-tags:', json.dumps(data.get('dist-tags', {}), indent=2))
latest = data['dist-tags'].get('latest', '')
if latest:
    peer = data['versions'][latest].get('peerDependencies', {})
    print('Latest version peer deps:', json.dumps(peer, indent=2))
all_versions = sorted(data.get('versions', {}).keys())
print('All versions:', all_versions[-10:])
"
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/package.json` at line 81, The package.json change bumped "vuetify"
to "^4.0.0" while the project still depends on "vite-plugin-vuetify" which only
supports Vuetify 3; revert the vuetify version to the previous working range
(e.g., "^3.x" or the exact previous value) in package.json, do not remove or
upgrade "vite-plugin-vuetify", and add a comment in the PR noting this is
blocked until a compatible vite-plugin-vuetify (v3.x) is released; before
reattempting the upgrade run the provided npm registry check script to confirm
vuetify dist-tags and vite-plugin-vuetify peerDependencies match and only then
update package.json.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.pnp.cjs:
- Around line 16141-16149: The project is pulling vuetify@4.0.0 which conflicts
with vite-plugin-vuetify@2.0.4's peerRange (vuetify:^3) and Vuetify 4.0.0 isn't
a stable release; update package.json to set vite-plugin-vuetify to ^2.1.3 or
later and pin vuetify to a supported stable 3.x version (e.g., ^3.0.0) OR if you
intentionally want Vuetify 4 beta, keep vite-plugin-vuetify compatible and
audit/update code for Vuetify 4 breaking changes (MD3 typography, grid, CSS
layers, theme and component API); after changing the dependency versions for
"vite-plugin-vuetify" and "vuetify" run your package manager (yarn/npm) to
regenerate the lockfile and test the app to ensure no runtime peer-dependency or
API breakages.

---

Duplicate comments:
In `@frontend/package.json`:
- Line 81: Three files import from the internal path 'vuetify/lib/util/colors'
which must be switched to the public API path; update the import statements in
src/plugins/vuetify.js, src/composables/useShootSubscription.js, and
src/composables/useCustomColors.js to import from 'vuetify/util/colors' instead,
preserving the same imported symbols (e.g. color names or utilities) and run a
quick build/test to ensure no renamed exports are used.
- Line 81: The package.json change bumped "vuetify" to "^4.0.0" while the
project still depends on "vite-plugin-vuetify" which only supports Vuetify 3;
revert the vuetify version to the previous working range (e.g., "^3.x" or the
exact previous value) in package.json, do not remove or upgrade
"vite-plugin-vuetify", and add a comment in the PR noting this is blocked until
a compatible vite-plugin-vuetify (v3.x) is released; before reattempting the
upgrade run the provided npm registry check script to confirm vuetify dist-tags
and vite-plugin-vuetify peerDependencies match and only then update
package.json.

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5d8b3b6 and 7552291.

⛔ Files ignored due to path filters (2)
  • .yarn/cache/vuetify-npm-4.0.0-ef6e708af3-86bf2449a8.zip is excluded by !**/.yarn/**, !**/*.zip
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (2)
  • .pnp.cjs
  • frontend/package.json

@gardener-prow gardener-prow bot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Mar 3, 2026
@gardener-prow gardener-prow bot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Mar 3, 2026
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

♻️ Duplicate comments (1)
frontend/package.json (1)

81-81: ⚠️ Potential issue | 🟠 Major

Align vite-plugin-vuetify with the Vuetify 4 bump.

vuetify was bumped to ^4.0.0, but vite-plugin-vuetify is still ^2.0.4 (Line 109). This can cause peer-dependency resolution issues for the upgrade path. Please bump the plugin to a Vuetify-4-compatible range (or defer Vuetify 4 until that is possible).

Suggested package.json adjustment
   "devDependencies": {
@@
-    "vite-plugin-vuetify": "^2.0.4",
+    "vite-plugin-vuetify": "^2.1.3",

Run this read-only check to verify declared peer requirements against the current file:

#!/bin/bash
set -euo pipefail

echo "=== Local dependency versions from frontend/package.json ==="
python3 - <<'PY'
import json
from pathlib import Path

pkg = json.loads(Path("frontend/package.json").read_text())
print("vuetify:", pkg.get("dependencies", {}).get("vuetify"))
print("vite-plugin-vuetify:", pkg.get("devDependencies", {}).get("vite-plugin-vuetify"))
PY

echo
echo "=== Registry peerDependencies ==="
python3 - <<'PY'
import json, urllib.request

def fetch(url):
    with urllib.request.urlopen(url) as r:
        return json.load(r)

vu = fetch("https://registry.npmjs.org/vuetify/4.0.0")
vp = fetch("https://registry.npmjs.org/vite-plugin-vuetify/2.0.4")

print("vuetify@4.0.0 peerDependencies:", vu.get("peerDependencies"))
print("vite-plugin-vuetify@2.0.4 peerDependencies:", vp.get("peerDependencies"))
PY

Expected outcome: if Vuetify 4 requires a higher plugin version than 2.0.4, the current manifest is mismatched.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/package.json` at line 81, The devDependency vite-plugin-vuetify is
still pinned to an older range that conflicts with the bumped dependency
vuetify:^4.0.0; update the vite-plugin-vuetify entry in package.json
(devDependencies) to a Vuetify‑4 compatible range (or revert the vuetify bump)
so peerDependencies align—change the "vite-plugin-vuetify" version to a release
that declares support for Vuetify 4 (or remove the vuetify 4 bump) and run your
package installer to verify no peer-dependency warnings.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@frontend/package.json`:
- Line 81: The devDependency vite-plugin-vuetify is still pinned to an older
range that conflicts with the bumped dependency vuetify:^4.0.0; update the
vite-plugin-vuetify entry in package.json (devDependencies) to a Vuetify‑4
compatible range (or revert the vuetify bump) so peerDependencies align—change
the "vite-plugin-vuetify" version to a release that declares support for Vuetify
4 (or remove the vuetify 4 bump) and run your package installer to verify no
peer-dependency warnings.

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7552291 and f468574.

⛔ Files ignored due to path filters (2)
  • .yarn/cache/vuetify-npm-4.0.0-ef6e708af3-86bf2449a8.zip is excluded by !**/.yarn/**, !**/*.zip
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (2)
  • .pnp.cjs
  • frontend/package.json
✅ Files skipped from review due to trivial changes (1)
  • .pnp.cjs

@grolu grolu added the reviewed/do-not-merge Has no approval for merging as it may break things, be of poor quality or have (ext.) dependencies label Mar 3, 2026
@gardener-prow gardener-prow bot added size/L Denotes a PR that changes 100-499 lines, ignoring generated files. and removed size/M Denotes a PR that changes 30-99 lines, ignoring generated files. labels Mar 3, 2026
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
frontend/src/components/ShootWorkers/GMachineType.vue (1)

129-133: Defensively normalize the customFilter third argument before .raw access.

Per Vuetify 4's v-autocomplete API, the custom-filter callback receives an optional InternalItem as its third argument. The current code at line 130 directly accesses internalItem.raw without guarding against internalItem being undefined, which would throw a TypeError. Use optional chaining to safely handle this case.

Proposed hardening patch
 customFilter (_, query, internalItem) {
-  const item = internalItem.raw
+  const item = internalItem?.raw ?? internalItem
   if (!item) {
     return false
   }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/ShootWorkers/GMachineType.vue` around lines 129 -
133, The customFilter callback directly accesses internalItem.raw which can be
undefined per Vuetify 4's v-autocomplete API; update the customFilter
implementation (the customFilter function) to defensively normalize the third
argument before accessing .raw (e.g., use optional chaining like
internalItem?.raw or default internalItem to an empty object) and then proceed
with the existing null-check and return logic so no TypeError occurs when
internalItem is undefined.
frontend/src/views/GCredentials.vue (1)

660-667: Guard internalItem before reading .raw in customFilter.

Vuetify 4's custom-filter callback signature defines the third parameter as optional (item?: InternalItem). The current code dereferences .raw immediately without checking, risking a runtime error if the argument is undefined. Add a defensive guard to safely handle all callback shapes.

Proposed patch
 customFilter (_, query, internalItem) {
-  const item = internalItem.raw
+  const item = internalItem?.raw ?? internalItem
+  if (!item) {
+    return false
+  }
   const {
     credentialDetails,
     credential,
     binding,
     providerType,
   } = item
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/views/GCredentials.vue` around lines 660 - 667, The customFilter
currently dereferences internalItem.raw unconditionally; add a defensive guard
at the top of customFilter to handle the case where internalItem is undefined
(or internalItem.raw is missing) — for example, if (!internalItem ||
!internalItem.raw) return false (or another appropriate default result) — then
proceed to read const item = internalItem.raw and the existing destructuring
(credentialDetails, credential, binding, providerType) so the filter never
throws when Vuetify calls it with an undefined item.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@frontend/src/components/ShootWorkers/GMachineType.vue`:
- Around line 129-133: The customFilter callback directly accesses
internalItem.raw which can be undefined per Vuetify 4's v-autocomplete API;
update the customFilter implementation (the customFilter function) to
defensively normalize the third argument before accessing .raw (e.g., use
optional chaining like internalItem?.raw or default internalItem to an empty
object) and then proceed with the existing null-check and return logic so no
TypeError occurs when internalItem is undefined.

In `@frontend/src/views/GCredentials.vue`:
- Around line 660-667: The customFilter currently dereferences internalItem.raw
unconditionally; add a defensive guard at the top of customFilter to handle the
case where internalItem is undefined (or internalItem.raw is missing) — for
example, if (!internalItem || !internalItem.raw) return false (or another
appropriate default result) — then proceed to read const item = internalItem.raw
and the existing destructuring (credentialDetails, credential, binding,
providerType) so the filter never throws when Vuetify calls it with an undefined
item.

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f468574 and e302e85.

📒 Files selected for processing (12)
  • frontend/src/components/Credentials/GSelectCredential.vue
  • frontend/src/components/GIconPicker.vue
  • frontend/src/components/GTerminalSettings.vue
  • frontend/src/components/GWildcardSelect.vue
  • frontend/src/components/Members/GMemberDialog.vue
  • frontend/src/components/NewShoot/GNewShootDetails.vue
  • frontend/src/components/NewShoot/GNewShootInfrastructureDetails.vue
  • frontend/src/components/ShootVersion/GShootVersionUpdate.vue
  • frontend/src/components/ShootWorkers/GMachineImage.vue
  • frontend/src/components/ShootWorkers/GMachineType.vue
  • frontend/src/components/ShootWorkers/GVolumeType.vue
  • frontend/src/views/GCredentials.vue

@gardener-ci-robot
Copy link
Contributor Author

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠️ Warning: custom changes will be lost.

- migrated css classes to Material Design 3
- manually set text-transform: uppercase globally for v-btn class to preserve look & feel
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (2)
frontend/__tests__/components/GLogin.spec.js (1)

103-103: Prefer a behavior/content assertion over a typography-class selector.

This assertion is brittle against future style-token renames.

♻️ Suggested test update
-      expect(wrapper.find('div.text-headline-small.text-primary').text()).toBe('Universal Kubernetes at Scale')
+      expect(wrapper.text()).toContain('Universal Kubernetes at Scale')
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/__tests__/components/GLogin.spec.js` at line 103, The test currently
asserts using the brittle selector "div.text-headline-small.text-primary";
replace that with a content/behavior-focused assertion that checks the rendered
text contains "Universal Kubernetes at Scale" (use the wrapper's text-based
query or a text-finding helper instead of the typography class selector) so the
spec verifies visible content rather than CSS token names.
frontend/src/sass/main.scss (1)

133-135: Scope the global button uppercasing to reduce unintended side effects.

Line 133 currently affects every .v-btn. Consider making this opt-in so only legacy buttons keep forced uppercase.

Proposed refactor
-.v-btn {
+[data-v-app] .v-btn.g-btn-uppercase {
   text-transform: uppercase;
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/sass/main.scss` around lines 133 - 135, The global rule
targeting .v-btn forces uppercase on all buttons; restrict this by turning it
into an opt-in modifier class (e.g., .v-btn--legacy or .v-btn--uppercase)
instead of styling .v-btn directly and update any legacy templates to add that
modifier where uppercase is required; modify the SCSS selector from .v-btn {
text-transform: uppercase; } to the new modifier selector and search for usages
of .v-btn in templates to add the modifier class to legacy buttons only.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/components/dialogs/GInfoDialog.vue`:
- Around line 28-30: The title block in GInfoDialog.vue uses a span which
removes heading semantics and can affect spacing; replace the span containing
"{{ branding.productName }} Dashboard" with an appropriate heading element
(e.g., h2 or h3) so it becomes a block-level, semantic heading while keeping the
existing classes (like text-display-large and mb-1) to preserve styling and
spacing; ensure the changed element remains inside the same template location so
bindings (branding.productName) and any dialog semantics continue to work.

In `@frontend/src/components/GShootMessageDetails.vue`:
- Around line 86-92: The alert uses non-semantic <span> elements for headings
which breaks document structure for screen readers; in GShootMessageDetails.vue
replace the two <span class="text-display-medium"> and <span
class="text-headline-large wrap-text font-weight-bold"> elements with
appropriate heading tags (e.g., <h3> and <h4> or other level consistent with
surrounding markup) while preserving their class attributes and text content so
visual styling remains unchanged and semantic heading hierarchy is restored.

In `@frontend/src/views/GHome.vue`:
- Line 11: Replace the non-semantic <span> used for the section title with an
appropriate heading element (e.g., <h2>) so assistive technologies can detect
the section; retain the existing class "text-display-medium" and any other
attributes/styles from the original element so visual appearance stays the same
— update the element in GHome.vue where the title currently uses <span
class="text-display-medium">Let's get started</span> to use a heading tag while
preserving the class and content.

---

Nitpick comments:
In `@frontend/__tests__/components/GLogin.spec.js`:
- Line 103: The test currently asserts using the brittle selector
"div.text-headline-small.text-primary"; replace that with a
content/behavior-focused assertion that checks the rendered text contains
"Universal Kubernetes at Scale" (use the wrapper's text-based query or a
text-finding helper instead of the typography class selector) so the spec
verifies visible content rather than CSS token names.

In `@frontend/src/sass/main.scss`:
- Around line 133-135: The global rule targeting .v-btn forces uppercase on all
buttons; restrict this by turning it into an opt-in modifier class (e.g.,
.v-btn--legacy or .v-btn--uppercase) instead of styling .v-btn directly and
update any legacy templates to add that modifier where uppercase is required;
modify the SCSS selector from .v-btn { text-transform: uppercase; } to the new
modifier selector and search for usages of .v-btn in templates to add the
modifier class to legacy buttons only.

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e302e85 and 834210b.

📒 Files selected for processing (53)
  • frontend/__tests__/components/GLogin.spec.js
  • frontend/eslint.config.cjs
  • frontend/src/components/Credentials/GSecretDialog.vue
  • frontend/src/components/Credentials/GSecretDialogDelete.vue
  • frontend/src/components/Credentials/GSecretDialogOpenstack.vue
  • frontend/src/components/GBreadcrumb.vue
  • frontend/src/components/GGardenctlConfigExample.vue
  • frontend/src/components/GGardenctlInfo.vue
  • frontend/src/components/GGardenloginInfo.vue
  • frontend/src/components/GListItemContent.vue
  • frontend/src/components/GLoginFooter.vue
  • frontend/src/components/GLoginHints.vue
  • frontend/src/components/GLoginTeaser.vue
  • frontend/src/components/GMainNavigation.vue
  • frontend/src/components/GMainToolbar.vue
  • frontend/src/components/GMessage.vue
  • frontend/src/components/GNotReadyProjectWarning.vue
  • frontend/src/components/GSeedStatus.vue
  • frontend/src/components/GShootActionReconcileStart.vue
  • frontend/src/components/GShootActionRotateCredentials.vue
  • frontend/src/components/GShootMessageDetails.vue
  • frontend/src/components/GShootStatus.vue
  • frontend/src/components/GShootSubscriptionStatus.vue
  • frontend/src/components/GTableColumnSelection.vue
  • frontend/src/components/Members/GMemberHelpDialog.vue
  • frontend/src/components/NewShoot/GNewShootDetails.vue
  • frontend/src/components/NewShoot/GNewShootInfrastructureCard.vue
  • frontend/src/components/ShootAccessRestrictions/GAccessRestrictions.vue
  • frontend/src/components/ShootAddons/GManageAddons.vue
  • frontend/src/components/ShootDetails/GShootDetailsCard.vue
  • frontend/src/components/ShootDns/GManageDns.vue
  • frontend/src/components/ShootMaintenance/GMaintenanceComponents.vue
  • frontend/src/components/ShootMaintenance/GMaintenanceTime.vue
  • frontend/src/components/ShootMaintenance/GShootActionMaintenanceStart.vue
  • frontend/src/components/ShootWorkers/GWorkerGroup.vue
  • frontend/src/components/dialogs/GInfoDialog.vue
  • frontend/src/components/editable/GEditableText.vue
  • frontend/src/components/floating/GPopover.vue
  • frontend/src/composables/useCustomColors.js
  • frontend/src/composables/useShootSubscription.js
  • frontend/src/layouts/GLogin.vue
  • frontend/src/plugins/vuetify.js
  • frontend/src/sass/main.scss
  • frontend/src/utils/index.js
  • frontend/src/views/GAccount.vue
  • frontend/src/views/GAdministration.vue
  • frontend/src/views/GCredentials.vue
  • frontend/src/views/GHome.vue
  • frontend/src/views/GMembers.vue
  • frontend/src/views/GSeedList.vue
  • frontend/src/views/GSettings.vue
  • frontend/src/views/GShootItemLoading.vue
  • frontend/src/views/GShootList.vue
✅ Files skipped from review due to trivial changes (13)
  • frontend/src/components/GLoginFooter.vue
  • frontend/src/components/ShootMaintenance/GMaintenanceTime.vue
  • frontend/src/views/GShootList.vue
  • frontend/src/components/GShootActionRotateCredentials.vue
  • frontend/src/components/GMainNavigation.vue
  • frontend/src/views/GAdministration.vue
  • frontend/src/components/NewShoot/GNewShootInfrastructureCard.vue
  • frontend/src/components/GGardenctlInfo.vue
  • frontend/src/views/GMembers.vue
  • frontend/src/components/GMessage.vue
  • frontend/src/components/Credentials/GSecretDialogDelete.vue
  • frontend/src/components/GGardenctlConfigExample.vue
  • frontend/src/components/ShootWorkers/GWorkerGroup.vue
🚧 Files skipped from review as they are similar to previous changes (1)
  • frontend/src/components/NewShoot/GNewShootDetails.vue

@gardener-prow gardener-prow bot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Mar 11, 2026
@gardener-prow
Copy link

gardener-prow bot commented Mar 11, 2026

PR needs rebase.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

cla: yes Indicates the PR's author has signed the cla-assistant.io CLA. kind/enhancement Enhancement, improvement, extension needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. renovate reviewed/do-not-merge Has no approval for merging as it may break things, be of poor quality or have (ext.) dependencies size/L Denotes a PR that changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants