chore: upgrade frontend to Angular 21#5344
Open
tidusjar wants to merge 4 commits into
Open
Conversation
Member
Author
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
📝 WalkthroughWalkthroughAngular and related client dependencies are upgraded from v20 to v21.x, TypeScript is updated to ^5.9.2, angular.json array formatting was adjusted, and the CI workflow sleep before Cypress tests was increased from 20s to 60s. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
|
✅ PR Build Status All checks passed! Your PR is ready for review. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss (1)
3-56:⚠️ Potential issue | 🟠 MajorUpdate CSS selectors to PrimeNG v19 naming convention.
The codebase is upgrading to PrimeNG v19, which uses
p-carousel-*class names instead of the legacyui-carousel-*classes. These selectors target classes that no longer exist in PrimeNG v19, causing all carousel styling to break. Update the selectors using this mapping:
ui-carousel→p-carouselui-carousel-content .ui-carousel-prev→p-carousel-prev-buttonui-carousel-content .ui-carousel-next→p-carousel-next-buttonui-carousel-dots-container .ui-carousel-dot-item→p-carousel-indicator-list .p-carousel-indicatorui-carousel-viewport→p-carousel-viewportui-carousel-items→p-carousel-item-listui-carousel-item→p-carousel-itemThis same issue affects cast-carousel.component.scss and primeng-overrides.scss.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss` around lines 3 - 56, The carousel styles target legacy PrimeNG selectors (e.g., ui-carousel, ui-carousel-prev, ui-carousel-next, ui-carousel-dot-item, ui-carousel-item) which no longer exist in v19; update the selectors to the v19 names by replacing ui-carousel → p-carousel, ui-carousel-content .ui-carousel-prev → p-carousel-prev-button, ui-carousel-content .ui-carousel-next → p-carousel-next-button, ui-carousel-dots-container .ui-carousel-dot-item → p-carousel-indicator-list .p-carousel-indicator, ui-carousel-viewport → p-carousel-viewport, ui-carousel-items → p-carousel-item-list and ui-carousel-item → p-carousel-item throughout the stylesheet (and apply the same replacements in the cast-carousel and primeng-overrides scss files) so the selectors match PrimeNG v19 class names and the styles apply again.
🧹 Nitpick comments (4)
src/Ombi/ClientApp/angular.json (1)
42-48: Consider addressing SCSS deprecations rather than silencing them.The
silenceDeprecationslist includes several Sass deprecation warnings:import,color-functions,abs-percent,mixed-decls, andglobal-builtin. While silencing is acceptable for a major upgrade, these indicate technical debt that should be tracked for future resolution.The
importdeprecation suggests migrating from@importto@use/@forward, andcolor-functionssuggests updating to modern Sass colour functions.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/Ombi/ClientApp/angular.json` around lines 42 - 48, The current "silenceDeprecations" config mutes Sass deprecation warnings (entries: "import", "color-functions", "abs-percent", "mixed-decls", "global-builtin"); instead of quietly silencing them, revert these entries and create actionable fixes: remove the keys for those deprecations from the "silenceDeprecations" array, add a tracking task/issue for each deprecation, and update SCSS sources referenced by the build to migrate from `@import` to `@use/`@forward (addressing "import"), replace legacy color function usage with modern Sass color functions ("color-functions"), and refactor occurrences related to "abs-percent", "mixed-decls", and "global-builtin" in relevant stylesheets so the deprecations can be resolved rather than ignored.src/Ombi/ClientApp/package.json (1)
35-36: Consider using caret ranges for@ngxspackages.The
@ngxs/storeand@ngxs/devtools-pluginuse exact versions (21.0.0) rather than caret ranges like other dependencies. This prevents automatic patch updates. Consider using^21.0.0for consistency unless there's a specific reason to pin.♻️ Suggested change
- "@ngxs/devtools-plugin": "21.0.0", - "@ngxs/store": "21.0.0", + "@ngxs/devtools-plugin": "^21.0.0", + "@ngxs/store": "^21.0.0",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/Ombi/ClientApp/package.json` around lines 35 - 36, The package.json pins `@ngxs/store` and `@ngxs/devtools-plugin` to exact versions ("21.0.0"); change their version strings to caret ranges ("^21.0.0") so they receive patch/minor fixes like the other deps—update the dependency entries for "@ngxs/store" and "@ngxs/devtools-plugin" accordingly and run your package manager to verify lockfile changes.src/Ombi/ClientApp/src/styles/variables.scss (1)
8-8: Minor formatting inconsistencies flagged by Stylelint.Static analysis detected spacing issues around
:in variable declarations. While not blocking, fixing these would improve consistency:
- Lines 8, 10: Unexpected whitespace before
:- Lines 14, 21, 23, 34, 46: Expected single space after
:🧹 Proposed formatting fixes
-$ombi-app-accent : mat.m2-define-palette($ombi-accent); +$ombi-app-accent: mat.m2-define-palette($ombi-accent); -$ombi-app-warn : mat.m2-define-palette($ombi-accent); +$ombi-app-warn: mat.m2-define-palette($ombi-accent); -$ombi-dark-app-accent: mat.m2-define-palette($ombi-accent, 500); +$ombi-dark-app-accent: mat.m2-define-palette($ombi-accent, 500); -$text:black; +$text: black; -$backgroundTint: mat.m2-get-color-from-palette(mat.m2-define-palette($ombi-primary, 50)); +$backgroundTint: mat.m2-get-color-from-palette(mat.m2-define-palette($ombi-primary, 50)); -$backgroundTint-dark: mat.m2-get-color-from-palette(mat.m2-define-palette($ombi-background, 900)); +$backgroundTint-dark: mat.m2-get-color-from-palette(mat.m2-define-palette($ombi-background, 900)); -$ombi-active-text:`#1b242f`; +$ombi-active-text: `#1b242f`;Also applies to: 10-10, 14-14, 21-21, 23-23, 34-34, 46-46
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/Ombi/ClientApp/src/styles/variables.scss` at line 8, Stylelint flagged inconsistent spacing around colons in SCSS variable declarations; update the declarations such as $ombi-app-accent, and the other variables referenced on lines noted (e.g., the variables at lines 10, 14, 21, 23, 34, 46) to remove any unexpected space before the colon and ensure exactly one space after the colon (format: $variable: value;), so adjust each variable declaration (e.g., $ombi-app-accent : mat.m2-define-palette(...) → $ombi-app-accent: mat.m2-define-palette(...)) to match the consistent spacing rule.src/Ombi/ClientApp/src/styles/Styles.scss (1)
108-115: Minor formatting inconsistencies in wizard styles.Spacing after
:is inconsistent. While not blocking, aligning with project formatting conventions would improve maintainability.🧹 Proposed formatting fixes
.wizard-background{ background-color: $ombi-background-primary; - width:100%; - height:100vh; - display:flex; - align-items:center; + width: 100%; + height: 100vh; + display: flex; + align-items: center; justify-content: center; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/Ombi/ClientApp/src/styles/Styles.scss` around lines 108 - 115, The .wizard-background rule has inconsistent spacing after colons; update the CSS properties inside the .wizard-background block (background-color, width, height, display, align-items, justify-content) to follow project style by adding a single space after each colon and normalizing spacing around values (e.g., change width:100% to width: 100%; height:100vh to height: 100vh; and similarly for other declarations) so the selector uses consistent formatting with the rest of the styles.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss`:
- Around line 1-2: Update the SCSS import in crew-carousel.component.scss so it
can resolve variables: either change the import `@use "./styles/variables.scss"
as *;` to the correct relative path `@use "../../../../../styles/variables.scss"
as *;` (from the crew-carousel component location) or add the styles directory
to angular.json's stylePreprocessorOptions.includePaths so the original `@use
"./styles/variables.scss" as *;` works; ensure the chosen fix is applied to the
import in crew-carousel.component.scss.
In `@src/Ombi/ClientApp/src/styles/Styles.scss`:
- Around line 20-101: The styles use legacy Angular Material selectors like
.mat-table, .mat-card, .mat-dialog-container, .mat-form-field,
.mat-input-element, .mat-paginator, .mat-chip, .mat-autocomplete-panel,
.mat-tooltip, etc., which don't match MDC DOM in Angular Material v21; update
each rule to the corresponding MDC selector (e.g., .mat-mdc-table,
.mat-mdc-card, .mat-mdc-dialog-container, .mat-mdc-form-field / relevant MDC
form-field classes, .mat-mdc-input-element or the MDC input selector,
.mat-mdc-paginator, .mat-mdc-chip, .mat-mdc-autocomplete-panel,
.mat-mdc-tooltip, etc.), or run the official migration schematic (ng generate
`@angular/material`:mdc-migration) and then adjust the selectors referenced above
(including .mat-flat-button.mat-primary, .mat-accent.grow:hover,
.mat-expansion-panel, .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent,
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick,
.mat-form-field.mat-focused .mat-form-field-ripple) to their .mat-mdc-*
equivalents so the styles apply to MDC-based components.
In `@src/Ombi/ClientApp/src/styles/variables.scss`:
- Line 20: The $panel Sass variable is declared twice (once as $panel: white;
and again as $panel: mat.m2-get-color-from-palette($ombi-dark-app-primary);) so
the first value is overwritten; rename them to distinct names (for example
$panel-light and $panel-dark), update any usages of $panel in light-theme and
dark-theme blocks to use $panel-light and $panel-dark respectively, and ensure
any imports or mixins referencing $panel (e.g., theme-related rules) are updated
to the new variable names to avoid breaking styles.
---
Outside diff comments:
In
`@src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss`:
- Around line 3-56: The carousel styles target legacy PrimeNG selectors (e.g.,
ui-carousel, ui-carousel-prev, ui-carousel-next, ui-carousel-dot-item,
ui-carousel-item) which no longer exist in v19; update the selectors to the v19
names by replacing ui-carousel → p-carousel, ui-carousel-content
.ui-carousel-prev → p-carousel-prev-button, ui-carousel-content
.ui-carousel-next → p-carousel-next-button, ui-carousel-dots-container
.ui-carousel-dot-item → p-carousel-indicator-list .p-carousel-indicator,
ui-carousel-viewport → p-carousel-viewport, ui-carousel-items →
p-carousel-item-list and ui-carousel-item → p-carousel-item throughout the
stylesheet (and apply the same replacements in the cast-carousel and
primeng-overrides scss files) so the selectors match PrimeNG v19 class names and
the styles apply again.
---
Duplicate comments:
In
`@src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.scss`:
- Around line 1-2: The SCSS import in cast-carousel.component.scss uses a
relative path "@use "./styles/variables.scss"" which may not resolve depending
on the Angular style preprocessor configuration; ensure the path is correct or
change to the project's canonical import (e.g., use the shared variables via the
configured includePaths or a root-relative import used elsewhere) and mirror the
fix you applied for crew-carousel: update cast-carousel.component.scss to import
the variables using the same working pattern (the exact token to update is the
"@use \"./styles/variables.scss\"" line in cast-carousel.component.scss).
- Around line 3-56: Update the PrimeNG v19 CSS selectors by replacing all
occurrences of the legacy ".ui-carousel" classes with the new ".p-carousel"
equivalents in this stylesheet; specifically update selector strings such as
"::ng-deep body .ui-carousel .ui-carousel-content .ui-carousel-prev",
".ui-carousel .ui-carousel-content .ui-carousel-next", ".ui-carousel
.ui-carousel-dots-container .ui-carousel-dot-item>.ui-button",
".ui-carousel-dot-item .ui-carousel-dot-icon",
".ui-carousel-dot-item.ui-state-highlight .ui-carousel-dot-icon", and "::ng-deep
.ui-carousel-next" to use ".p-carousel" (and keep other class parts like
.ui-carousel-content, .ui-carousel-prev, .ui-carousel-next,
.ui-carousel-dots-container, .ui-carousel-dot-item, .ui-carousel-dot-icon,
.ui-state-highlight unchanged where appropriate) so the styles apply under
PrimeNG v19.
In `@src/Ombi/ClientApp/src/app/media-details/media-details.component.scss`:
- Around line 1-2: Verify and update the SCSS import in
media-details.component.scss: the current line "@use \"./styles/variables.scss\"
as *;" may not resolve the same way as the carousel components; compare with the
carousel components' import pattern and change this `@use` to the same resolved
path (either the project alias like "styles/variables" or the correct relative
path used by the carousel) so the SCSS preprocessor can find variables.scss
consistently.
---
Nitpick comments:
In `@src/Ombi/ClientApp/angular.json`:
- Around line 42-48: The current "silenceDeprecations" config mutes Sass
deprecation warnings (entries: "import", "color-functions", "abs-percent",
"mixed-decls", "global-builtin"); instead of quietly silencing them, revert
these entries and create actionable fixes: remove the keys for those
deprecations from the "silenceDeprecations" array, add a tracking task/issue for
each deprecation, and update SCSS sources referenced by the build to migrate
from `@import` to `@use/`@forward (addressing "import"), replace legacy color
function usage with modern Sass color functions ("color-functions"), and
refactor occurrences related to "abs-percent", "mixed-decls", and
"global-builtin" in relevant stylesheets so the deprecations can be resolved
rather than ignored.
In `@src/Ombi/ClientApp/package.json`:
- Around line 35-36: The package.json pins `@ngxs/store` and `@ngxs/devtools-plugin`
to exact versions ("21.0.0"); change their version strings to caret ranges
("^21.0.0") so they receive patch/minor fixes like the other deps—update the
dependency entries for "@ngxs/store" and "@ngxs/devtools-plugin" accordingly and
run your package manager to verify lockfile changes.
In `@src/Ombi/ClientApp/src/styles/Styles.scss`:
- Around line 108-115: The .wizard-background rule has inconsistent spacing
after colons; update the CSS properties inside the .wizard-background block
(background-color, width, height, display, align-items, justify-content) to
follow project style by adding a single space after each colon and normalizing
spacing around values (e.g., change width:100% to width: 100%; height:100vh to
height: 100vh; and similarly for other declarations) so the selector uses
consistent formatting with the rest of the styles.
In `@src/Ombi/ClientApp/src/styles/variables.scss`:
- Line 8: Stylelint flagged inconsistent spacing around colons in SCSS variable
declarations; update the declarations such as $ombi-app-accent, and the other
variables referenced on lines noted (e.g., the variables at lines 10, 14, 21,
23, 34, 46) to remove any unexpected space before the colon and ensure exactly
one space after the colon (format: $variable: value;), so adjust each variable
declaration (e.g., $ombi-app-accent : mat.m2-define-palette(...) →
$ombi-app-accent: mat.m2-define-palette(...)) to match the consistent spacing
rule.
Comment on lines
1
to
2
|
|
||
| @use "./styles/variables.scss" as *; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if there's an includePaths configuration in angular.json
echo "=== Checking for includePaths in angular.json ==="
find src/Ombi/ClientApp -name "angular.json" -type f -exec cat {} \; | jq '.projects[] | select(.architect.build.options | has("stylePreprocessorOptions")) | .architect.build.options.stylePreprocessorOptions' 2>/dev/null || echo "No stylePreprocessorOptions found or jq parsing failed"
# Also try a simpler grep approach
echo -e "\n=== Grep for includePaths ==="
rg -A 5 "includePaths|stylePreprocessorOptions" src/Ombi/ClientApp/angular.json 2>/dev/null || echo "Pattern not found with rg"
# Verify the actual location of variables.scss
echo -e "\n=== Finding variables.scss files ==="
fd "variables\.scss" src/Ombi/ClientApp/src/
# Check if there's a styles directory at src/Ombi/ClientApp/src/
echo -e "\n=== Checking for styles directory ==="
if [ -d "src/Ombi/ClientApp/src/styles/" ]; then
ls -la src/Ombi/ClientApp/src/styles/ | head -20
else
echo "Directory src/Ombi/ClientApp/src/styles/ not found"
fi
# Check relative path from crew-carousel component
echo -e "\n=== From component directory perspective ==="
COMPONENT_DIR="src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel"
if [ -d "$COMPONENT_DIR" ]; then
cd "$COMPONENT_DIR"
echo "From crew-carousel directory, checking if ./styles/variables.scss exists:"
ls -la ./styles/variables.scss 2>/dev/null || echo "File not found at ./styles/variables.scss"
echo "Checking actual relative path to variables.scss at src/Ombi/ClientApp/src/styles/:"
ls -la ../../../../../styles/variables.scss 2>/dev/null || echo "File not found at ../../../../../styles/variables.scss"
fiRepository: Ombi-app/Ombi
Length of output: 1660
Fix SCSS import path—no stylePreprocessorOptions.includePaths configuration.
The import @use "./styles/variables.scss" as *; cannot resolve from the component's location without a stylePreprocessorOptions.includePaths configuration in angular.json. The stylePreprocessorOptions present contains only SASS silenceDeprecations and no includePaths entry.
The variables.scss file exists at src/Ombi/ClientApp/src/styles/variables.scss, but from the crew-carousel component at src/app/media-details/components/shared/crew-carousel/, the correct relative path should be ../../../../../styles/variables.scss, or configure stylePreprocessorOptions.includePaths in angular.json to include the styles directory.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@src/Ombi/ClientApp/src/app/media-details/components/shared/crew-carousel/crew-carousel.component.scss`
around lines 1 - 2, Update the SCSS import in crew-carousel.component.scss so it
can resolve variables: either change the import `@use "./styles/variables.scss"
as *;` to the correct relative path `@use "../../../../../styles/variables.scss"
as *;` (from the crew-carousel component location) or add the styles directory
to angular.json's stylePreprocessorOptions.includePaths so the original `@use
"./styles/variables.scss" as *;` works; ensure the chosen fix is applied to the
import in crew-carousel.component.scss.
Comment on lines
+20
to
+101
| .mat-table { | ||
| background: $ombi-background-accent; | ||
| } | ||
|
|
||
| .mat-paginator { | ||
| background: $ombi-background-accent; | ||
| } | ||
|
|
||
| .mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary{ | ||
| background-color: $ombi-background-accent; | ||
| } | ||
|
|
||
| .mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent{ | ||
| color: $ombi-active-text; | ||
| background-color: $ombi-active; | ||
| } | ||
|
|
||
| .mat-menu-panel{ | ||
| background: $ombi-background-accent; | ||
| } | ||
|
|
||
| .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{ | ||
| color: $ombi-active; | ||
| } | ||
|
|
||
| .mat-form-field.mat-focused .mat-form-field-label{ | ||
| color: $ombi-active; | ||
| } | ||
|
|
||
| .mat-input-element{ | ||
| caret-color: $ombi-active; | ||
| } | ||
|
|
||
| .mat-card { | ||
| background: $ombi-background-accent; | ||
| } | ||
|
|
||
| .mat-expansion-panel{ | ||
| background: $ombi-background-accent; | ||
| } | ||
|
|
||
| .mat-chip.mat-standard-chip.mat-chip-selected.mat-accent{ | ||
| color:$ombi-active-text; | ||
| } | ||
|
|
||
| .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary{ | ||
| background-color: $ombi-background-primary; | ||
| } | ||
|
|
||
| .mat-bottom-sheet-container{ | ||
| background: $ombi-background-accent; | ||
| } | ||
|
|
||
| .grow:hover{ | ||
| color: $ombi-active; | ||
| } | ||
|
|
||
| .mat-accent.grow:hover{ | ||
| color: $ombi-active-text; | ||
| } | ||
|
|
||
| .mat-dialog-container{ | ||
| background: $ombi-background-accent; | ||
| } | ||
|
|
||
| .mat-autocomplete-panel{ | ||
| background: $ombi-background-accent; | ||
| } | ||
|
|
||
| .mat-form-field.mat-focused .mat-form-field-ripple{ | ||
| background-color: $ombi-active; | ||
| } | ||
|
|
||
| @media (hover: none){ | ||
| .mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover{ | ||
| background: $ombi-background-accent; | ||
| } | ||
|
|
||
| .mat-form-field.mat-focused .mat-form-field-ripple{ | ||
| background-color: $ombi-active; | ||
| } | ||
|
|
||
| @media (hover: none){ | ||
| .mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover{ | ||
| background: $ombi-background-accent; | ||
| } | ||
| } | ||
|
|
||
| .mat-tooltip{ | ||
| background: $ombi-background-accent; | ||
| } | ||
|
|
||
| //Wizard CSS | ||
| .mat-stepper-horizontal, .mat-stepper-vertical{ | ||
| background: $ombi-background-accent; | ||
| } | ||
|
|
||
| .wizard-background{ | ||
| background-color: $ombi-background-primary; | ||
| width:100%; | ||
| height:100vh; | ||
| display:flex; | ||
| align-items:center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .wizard-inner{ | ||
| color:#FFF; | ||
| min-height: 450px; | ||
| } | ||
|
|
||
| .wizard-inner .mat-stepper-horizontal { | ||
| min-height: 450px; | ||
| } | ||
|
|
||
| .mat-step-header .mat-step-icon{ | ||
| background-color:$ombi-active; | ||
| color: $ombi-active-text; | ||
| } | ||
|
|
||
| .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{ | ||
| background-color: $ombi-active; | ||
| } | ||
|
|
||
| .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab{ | ||
| background-color: $ombi-active; | ||
| } | ||
|
|
||
| a.mat-raised-button { | ||
| text-decoration:none; | ||
| } | ||
|
|
||
| hr { | ||
| border-top: 1px solid $accent-dark; | ||
| } | ||
|
|
||
| .form-control{ | ||
| background-color: $ombi-background-accent; | ||
| color:#FFF; | ||
| border: 1px solid $ombi-background-accent; | ||
| } | ||
|
|
||
| .form-control:focus{ | ||
| background-color: $ombi-background-accent; | ||
| color:#FFF; | ||
| border: 1px solid $ombi-active; | ||
| } | ||
|
|
||
|
|
||
| .alert .glyphicon{ | ||
| display: table-cell; | ||
| vertical-align: middle; | ||
| padding-right: 1%; | ||
| } | ||
|
|
||
| .alert div, | ||
| .alert span{ | ||
| padding-left: 1%; | ||
| display:table-cell; | ||
| } | ||
|
|
||
| .right-buttons { | ||
| float:right; | ||
| } No newline at end of file | ||
| } | ||
|
|
||
| .mat-tooltip{ | ||
| background: $ombi-background-accent; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Angular Material v15 MDC Material Design Components CSS selector backwards compatibility
💡 Result:
Angular Material v15’s MDC-based components are not CSS-selector backwards compatible with the pre-v15 (legacy) components in any reliable way, because DOM structure and many internal class names changed as part of the MDC rewrite. Styling that targeted legacy internals (often via global CSS / ::ng-deep) is expected to break and must be updated. [2]
What you can do instead:
- Stay on legacy components (temporary compatibility path): import the
@angular/material/legacy-*modules (e.g.MatLegacySliderModule) to keep the old DOM/classes for those components. Legacy components were deprecated in v15 and planned for removal in v17. [3] - Migrate your styles to MDC: most component host classes changed to the
mat-mdc-prefix (instead ofmat-). [1] Use the schematic to update templates/styles as much as possible:
ng generate@angular/material:mdc-migration(it also leaves TODO comments where it can’t safely rewrite selectors). [3] - Find remaining legacy selectors: one practical approach is searching for old
.mat-selectors that aren’t.mat-mdc-*(icons are a common exception), e.g..mat-(?!mdc|icon). [4]
Sources: [1] [2] [3] [4]
🏁 Script executed:
find . -name "package.json" -type f | head -5Repository: Ombi-app/Ombi
Length of output: 111
🏁 Script executed:
cat ./src/Ombi/ClientApp/package.json | grep -A 5 -B 5 "@angular/material"Repository: Ombi-app/Ombi
Length of output: 445
🌐 Web query:
Angular Material v17 legacy components removed deprecation timeline
💡 Result:
- Q4 2022: Angular Material introduced the new MDC-based components and announced deprecation of the equivalent “legacy” (non‑MDC) components. Legacy components were deprecated in Angular Material v15. [1]
- Angular Material v17: the legacy component entry points are removed from the v17 package (i.e., they’re no longer shipped as part of
@angular/materialv17). [1] - Temporary compatibility option: you could upgrade Angular to v17 while staying on Angular Material v16 (to keep legacy components) only until Angular v18; after that, Material v16 is no longer compatible with newer Angular versions. [1]
- Policy context: Angular’s general deprecation policy is that deprecated APIs remain for at least the next two major releases (~1 year) before they become candidates for removal in a major release. [2]
Sources:
[1] Angular Blog – “Introducing Angular v17” (Nov 8, 2023)
[2] Angular docs – Versioning and releases (Deprecation policy)
Update all Material selectors to MDC equivalents—legacy components are not available in Angular Material v21.
Angular Material v17 removed legacy components entirely. Since the project uses v21, all .mat-* selectors (e.g., .mat-table, .mat-card, .mat-dialog-container) will not apply to MDC-based components. These selectors target the pre-v15 DOM structure which no longer exists. Update selectors to their .mat-mdc-* equivalents (e.g., .mat-mdc-table, .mat-mdc-card), or use the migration schematic: ng generate @angular/material:mdc-migration.
🧰 Tools
🪛 Stylelint (17.3.0)
[error] 94-94: Expected complex :not() pseudo-class notation (selector-not-notation)
(selector-not-notation)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/Ombi/ClientApp/src/styles/Styles.scss` around lines 20 - 101, The styles
use legacy Angular Material selectors like .mat-table, .mat-card,
.mat-dialog-container, .mat-form-field, .mat-input-element, .mat-paginator,
.mat-chip, .mat-autocomplete-panel, .mat-tooltip, etc., which don't match MDC
DOM in Angular Material v21; update each rule to the corresponding MDC selector
(e.g., .mat-mdc-table, .mat-mdc-card, .mat-mdc-dialog-container,
.mat-mdc-form-field / relevant MDC form-field classes, .mat-mdc-input-element or
the MDC input selector, .mat-mdc-paginator, .mat-mdc-chip,
.mat-mdc-autocomplete-panel, .mat-mdc-tooltip, etc.), or run the official
migration schematic (ng generate `@angular/material`:mdc-migration) and then
adjust the selectors referenced above (including .mat-flat-button.mat-primary,
.mat-accent.grow:hover, .mat-expansion-panel,
.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent,
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick,
.mat-form-field.mat-focused .mat-form-field-ripple) to their .mat-mdc-*
equivalents so the styles apply to MDC-based components.
|
|
||
|
|
||
| // CUSTOM LIGHT | ||
| $panel: white; |
There was a problem hiding this comment.
$panel variable is declared twice with different values.
Line 20 declares $panel: white; for the light theme, but line 36 redeclares it as $panel: mat.m2-get-color-from-palette($ombi-dark-app-primary);. The second declaration overwrites the first, so the light theme value is never used.
If both values are needed, consider using distinct variable names (e.g., $panel-light and $panel-dark).
Also applies to: 36-36
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/Ombi/ClientApp/src/styles/variables.scss` at line 20, The $panel Sass
variable is declared twice (once as $panel: white; and again as $panel:
mat.m2-get-color-from-palette($ombi-dark-app-primary);) so the first value is
overwritten; rename them to distinct names (for example $panel-light and
$panel-dark), update any usages of $panel in light-theme and dark-theme blocks
to use $panel-light and $panel-dark respectively, and ensure any imports or
mixins referencing $panel (e.g., theme-related rules) are updated to the new
variable names to avoid breaking styles.
- Upgrade Angular core packages from v20 to v21.1.5 - Upgrade @angular-eslint to v21.2.0 - Upgrade @angular/cli and build tools to v21.1.4 - Upgrade TypeScript to 5.9.2 (required by Angular 21 compiler) Third-party libraries (Angular Material, CDK, PrimeNG, ngxs, etc.) are kept at their existing versions to minimise risk.
tidusjar
force-pushed
the
upgrade/angular-21
branch
from
8d25c57 to
ef39236
Compare
|
✅ PR Build Status All checks passed! Your PR is ready for review. |
1 similar comment
|
✅ PR Build Status All checks passed! Your PR is ready for review. |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/Ombi/ClientApp/package.json`:
- Line 55: Update the zone.js dependency in package.json from "zone.js":
"0.14.7" to a 0.15.x range (for example "zone.js": "^0.15.0") so the Angular 21
zone-based change detection configured in angular.json is satisfied; run package
manager install afterwards to update lockfile and verify the app builds with the
new "zone.js" version.
- Around line 20-25: The package.json currently lists mismatched Angular deps:
keep `@angular/common/`@angular/core/@angular/compiler/@angular/forms at v21 and
update the UI libs to match Angular 21 by changing "@angular/material" and
"@angular/cdk" to the Angular 21 major (e.g., "^21.1.x" for both) so their
majors match the existing "@angular/*" packages, and update or remove "zone.js"
to the recommended Angular 21 value (set to "~0.15.0" or remove if you intend to
run zoneless); ensure the dependency keys "@angular/material", "@angular/cdk",
and "zone.js" are adjusted in package.json and then run install to resolve peer
deps.
| @@ -55,13 +55,13 @@ | |||
| "zone.js": "0.14.7" | |||
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n src/Ombi/ClientApp/package.json | head -100Repository: Ombi-app/Ombi
Length of output: 3046
🌐 Web query:
Angular 21 zone.js version requirement compatibility
💡 Result:
Angular v21 is zoneless by default, so Zone.js is not required unless you explicitly opt back into Zone-based change detection. [2]
If you do use Zone-based change detection in Angular 21:
@angular/core@21.0.0declareszone.jsas an optional peer dependency with the version range~0.15.0(i.e., compatible with 0.15.x, starting at 0.15.0, but not 0.16.0). [1]- You must also ensure
zone.jsis included in your build (typically viaangular.jsonpolyfills, or equivalent). [2]
Sources:
[1] @angular/core@21.0.0 package.json (peerDependencies) (app.unpkg.com)
[2] Angular docs: Zoneless guide (v21+ default, removing/adding Zone.js) (angular.dev)
Citations:
- 1: https://app.unpkg.com/%40angular/core%4021.0.0/files/package.json?utm_source=openai
- 2: https://angular.dev/guide/zoneless?utm_source=openai
🏁 Script executed:
find src/Ombi/ClientApp -name "angular.json" -o -name "tsconfig.json" | head -5Repository: Ombi-app/Ombi
Length of output: 202
🏁 Script executed:
cat -n src/Ombi/ClientApp/angular.json | head -150Repository: Ombi-app/Ombi
Length of output: 5948
Update zone.js to 0.15.x for Angular 21 compatibility.
The project uses Zone-based change detection (configured in angular.json), which requires zone.js 0.15.x when running Angular 21. The current version 0.14.7 is incompatible. Update to zone.js "zone.js": "^0.15.0" or later.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/Ombi/ClientApp/package.json` at line 55, Update the zone.js dependency in
package.json from "zone.js": "0.14.7" to a 0.15.x range (for example "zone.js":
"^0.15.0") so the Angular 21 zone-based change detection configured in
angular.json is satisfied; run package manager install afterwards to update
lockfile and verify the app builds with the new "zone.js" version.
|
✅ PR Build Status All checks passed! Your PR is ready for review. |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
.github/workflows/automation-tests.yml (1)
57-58: Prefer readiness checks over fixed sleep.Line 57-58: a fixed 60s delay is still brittle and can either be too short or waste time. Consider replacing this with an explicit wait for the frontend to be ready (port or HTTP endpoint) to reduce flakiness.
♻️ Proposed change (example using wait-on)
- - name: Sleep for server to start - run: sleep 60 + - name: Wait for frontend to be ready + run: npx --yes wait-on http://localhost:4200/ --timeout 600000🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.github/workflows/automation-tests.yml around lines 57 - 58, The workflow step named "Sleep for server to start" uses a fixed "run: sleep 60" which is brittle; replace it with an explicit readiness check that polls the frontend endpoint or port until ready (e.g., use npx wait-on or a curl/while loop against http://localhost:PORT/health or the app root) so the job proceeds as soon as the server is actually listening; update the step that currently contains "run: sleep 60" to run the chosen readiness command instead and ensure the URL/port matches the frontend service being started.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In @.github/workflows/automation-tests.yml:
- Around line 57-58: The workflow step named "Sleep for server to start" uses a
fixed "run: sleep 60" which is brittle; replace it with an explicit readiness
check that polls the frontend endpoint or port until ready (e.g., use npx
wait-on or a curl/while loop against http://localhost:PORT/health or the app
root) so the job proceeds as soon as the server is actually listening; update
the step that currently contains "run: sleep 60" to run the chosen readiness
command instead and ensure the URL/port matches the frontend service being
started.
|
✅ PR Build Status All checks passed! Your PR is ready for review. |
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Upgrades the Ombi frontend from Angular 20 to Angular 21.
Changes
Package upgrades
@angular/*packages: v20 → v21.1.5@angular/cdkand@angular/material: v20 → v21@angular-devkit/build-angularand@angular/cli: v20 → v21.1.4@angular-eslint/*: v20 → v21.2.0@angular/compiler-cli: v20 → v21.1.5typescript: 5.8.3 → 5.9.2 (required by Angular 21 compiler)@ngxs/storeand@ngxs/devtools-plugin: 3.8.2 → 21.0.0primeng: v17 → v19angularx-qrcode: v16 → v19ngx-infinite-scroll: v17 → v19@ngx-translate/core: v15 → v16Migration fixes
mat-palette()/mat-color()API to the newmat.m2-define-palette()/mat.m2-get-color-from-palette()API@use "@angular/material/theming"imports with@use "@angular/material" as matmat-dark-theme()→mat.m2-define-dark-theme()mat-core()/angular-material-theme()withmat.core()/mat.all-component-themes()<mat-chip-list>→<mat-chip-grid>and<mat-chip>→<mat-chip-row>in genre, keyword, and watch provider select componentsQRCodeModulewithQRCodeComponentin user preferences (angularx-qrcode v19 standalone API)primeng/resources/) fromangular.json(v19 uses CSS variables/ThemeProvider instead)Testing
Summary by CodeRabbit
Chores
Tests