feat: added the feature flag on the UI

src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html

@@ -78,6 +78,7 @@
                         </span>
 
                             <!-- 4k Status -->
+                            <span *ngIf="is4KEnabled">
                             <span *permission="roleName4k">
                                 <button mat-raised-button class="btn-green btn-spacing" id="availableBtn4k" *ngIf="movie.available4K"> {{
                                     'Common.Available4K' | translate }}
@@ -107,6 +108,7 @@
                                         </span>
                                 </span>
                             </span>
+                        </span>
 
                             <span *ngIf="isAdmin && hasRequest">
                                     <button id="approveBtn" *ngIf="!movie.approved && movie.requested" (click)="approve(false)" mat-raised-button class="btn-spacing" color="accent">
@@ -122,6 +124,7 @@
                                     </button>
 
                                     <!-- 4k -->
+                                    <span *ngIf="is4KEnabled">
                                     <span *permission="roleName4k">
                                         <button id="approve4kBtn" *ngIf="!movie.approved4K && movie.has4KRequest" (click)="approve(true)" mat-raised-button class="btn-spacing" color="accent">
                                             <i class="fas fa-plus"></i> {{ 'Common.Approve4K' | translate }}
@@ -135,6 +138,7 @@
                                             <i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable4K' | translate }}
                                         </button>
                                     </span>
+                                </span>
 
                                     <button id="denyBtn" *ngIf="!movieRequest.denied && movie.requested" mat-raised-button class="btn-spacing" color="warn" (click)="deny(false)">
                                         <i class="fas fa-times"></i> {{'Requests.Deny' | translate }}

src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.ts

@@ -15,13 +15,14 @@ import { RequestServiceV2 } from "../../../services/requestV2.service";
 import { RequestBehalfComponent } from "../shared/request-behalf/request-behalf.component";
 import { firstValueFrom, forkJoin } from "rxjs";
 import { AdminRequestDialogComponent } from "../../../shared/admin-request-dialog/admin-request-dialog.component";
+import { FeaturesFacade } from "../../../state/features/features.facade";
 
 @Component({
     templateUrl: "./movie-details.component.html",
     styleUrls: ["../../media-details.component.scss"],
     encapsulation: ViewEncapsulation.None
 })
-export class MovieDetailsComponent {
+export class MovieDetailsComponent implements OnInit{
     public movie: ISearchMovieResultV2;
     public hasRequest: boolean;
     public movieRequest: IMovieRequests;
@@ -30,6 +31,7 @@ export class MovieDetailsComponent {
     public showAdvanced: boolean; // Set on the UI
     public issuesEnabled: boolean;
     public roleName4k = "Request4KMovie";
+    public is4KEnabled = false;
 
     public requestType = RequestType.movie;
 
@@ -42,7 +44,7 @@ export class MovieDetailsComponent {
         public dialog: MatDialog, private requestService: RequestService,
         private requestService2: RequestServiceV2, private radarrService: RadarrService,
         public messageService: MessageService, private auth: AuthService, private settingsState: SettingsStateService,
-        private translate: TranslateService) {
+        private translate: TranslateService, private featureFacade: FeaturesFacade) {
         this.route.params.subscribe(async (params: any) => {
             if (typeof params.movieDbId === 'string' || params.movieDbId instanceof String) {
                 if (params.movieDbId.startsWith("tt")) {
@@ -50,12 +52,12 @@ export class MovieDetailsComponent {
                 }
             }
             this.theMovidDbId = params.movieDbId;
-            await this.load();
         });
     }
 
-    public async load() {
+    async ngOnInit() {
 
+        this.is4KEnabled = this.featureFacade.is4kEnabled();
         this.issuesEnabled = this.settingsState.getIssue();
         this.isAdmin = this.auth.hasRole("admin") || this.auth.hasRole("poweruser");
 
@@ -88,6 +90,9 @@ export class MovieDetailsComponent {
     }
 
     public async request(is4K: boolean, userId?: string) {
+        if (!this.is4KEnabled) {
+            is4K = false;
+        }
         if (this.isAdmin) {
             const dialog = this.dialog.open(AdminRequestDialogComponent, { width: "700px", data: { type: RequestType.movie, id: this.movie.id }, panelClass: 'modal-panel' });
             dialog.afterClosed().subscribe(async (result) => {

src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html

@@ -11,7 +11,7 @@
                     formGroupName="radarr">
                     </ombi-settings-radarr-form>
                 </mat-tab>
-                <mat-tab label="Radarr 4K">
+                <mat-tab *ngIf="is4kEnabled" label="Radarr 4K">
                     <ombi-settings-radarr-form
                     formGroupName="radarr4K">
                     </ombi-settings-radarr-form>

src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, ValidationErrors } from "@angular/forms";
+import { FormBuilder, FormGroup } from "@angular/forms";
 
 import { IMinimumAvailability, IRadarrCombined, IRadarrProfile, IRadarrRootFolder } from "../../interfaces";
 import { NotificationService, SettingsService } from "../../services";
+import { FeaturesFacade } from "../../state/features/features.facade";
 
 @Component({
     templateUrl: "./radarr.component.html",
@@ -16,12 +17,15 @@ export class RadarrComponent implements OnInit {
     public profilesRunning: boolean;
     public rootFoldersRunning: boolean;
     public form: FormGroup;
+    public is4kEnabled: boolean = false;
 
     constructor(private settingsService: SettingsService,
                 private notificationService: NotificationService,
+                private featureFacade: FeaturesFacade,
                 private fb: FormBuilder) { }
 
     public ngOnInit() {
+        this.is4kEnabled = this.featureFacade.is4kEnabled();
         this.settingsService.getRadarr()
             .subscribe(x => {
                 this.form = this.fb.group({

src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.ts

@@ -6,6 +6,7 @@ import { IdentityService, MessageService, RadarrService, SettingsService, Sonarr
 import { Clipboard } from '@angular/cdk/clipboard';
 import { CustomizationFacade } from "../state/customization";
 import { Location } from "@angular/common";
+import { FeaturesFacade } from "../state/features/features.facade";
 
 @Component({
     templateUrl: "./usermanagement-user.component.html",
@@ -36,7 +37,6 @@ export class UserManagementUserComponent implements OnInit {
 
     constructor(private identityService: IdentityService,
                 private notificationService: MessageService,
-                private readonly settingsService: SettingsService,
                 private router: Router,
                 private route: ActivatedRoute,
                 private sonarrService: SonarrService,
@@ -44,23 +44,33 @@ export class UserManagementUserComponent implements OnInit {
                 private clipboard: Clipboard,
                 private location: Location,
                 private customizationFacade: CustomizationFacade,
+                private featureFacade: FeaturesFacade,
                 ) {
 
                     this.route.params.subscribe((params: any) => {
                         if(params.id) {
                             this.userId = params.id;
                             this.edit = true;
-                            this.identityService.getUserById(this.userId).subscribe(x => {
-                                this.user = x;
-                               });
                         }
                     });
                  }
 
     public ngOnInit() {
+        const is4KEnabled = this.featureFacade.is4kEnabled();
+        this.identityService.getUserById(this.userId).subscribe(x => {
+            this.user = x;
+            if (!is4KEnabled) {
+             this.user.claims = this.user.claims.filter(x => x.value !== "Request4KMovie");
+         }
+           });
         this.requestLimitTypes = [RequestLimitType.Day, RequestLimitType.Week, RequestLimitType.Month];
         this.identityService.getSupportedStreamingCountries().subscribe(x => this.countries = x);
-        this.identityService.getAllAvailableClaims().subscribe(x => this.availableClaims = x);
+        this.identityService.getAllAvailableClaims().subscribe(x => {
+            this.availableClaims = x;
+            if (!is4KEnabled) {
+                this.availableClaims = this.availableClaims.filter(y => y.value !== "Request4KMovie");
+            }
+        });
         if(this.edit) {
             this.identityService.getNotificationPreferencesForUser(this.userId).subscribe(x => this.notificationPreferences = x);
         } else {