Disallow Adding, Importing, Editing, and Deleting a Feature Flag for Users with the 'Reader' Role

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.html

@@ -10,7 +10,7 @@
   <!-- header-right -->
   <app-common-section-card-action-buttons
     header-right
-    [showPrimaryButton]="true"
+    [showPrimaryButton]="(permissions$ | async)?.featureFlags.update"
     [primaryButtonText]="'feature-flags.details.add-exclude-list.button.text' | translate"
     [isSectionCardExpanded]="isSectionCardExpanded"
     (primaryButtonClick)="onAddExcludeListClick(flag.context[0], flag.id)"
@@ -22,6 +22,7 @@
   <app-feature-flag-exclusions-table
     content
     *ngIf="isSectionCardExpanded"
+    [actionsDisabled]="!(permissions$ | async)?.featureFlags.update"
     (rowAction)="onRowAction($event, flag.id)"
   ></app-feature-flag-exclusions-table>
 </app-common-section-card>

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.ts

@@ -20,6 +20,9 @@ import {
   EditPrivateSegmentListRequest,
   Segment,
 } from '../../../../../../../core/segments/store/segments.model';
+import { UserPermission } from '../../../../../../../core/auth/store/auth.models';
+import { Observable } from 'rxjs';
+import { AuthService } from '../../../../../../../core/auth/auth.service';
 
 @Component({
   selector: 'app-feature-flag-exclusions-section-card',
@@ -38,15 +41,24 @@ import {
 })
 export class FeatureFlagExclusionsSectionCardComponent {
   @Input() isSectionCardExpanded;
+  permissions$: Observable<UserPermission>;
   tableRowCount$ = this.featureFlagService.selectFeatureFlagExclusionsLength$;
   selectedFlag$ = this.featureFlagService.selectedFeatureFlag$;
 
-  constructor(private featureFlagService: FeatureFlagsService, private dialogService: DialogService) {}
+  constructor(
+    private featureFlagService: FeatureFlagsService,
+    private dialogService: DialogService,
+    private authService: AuthService
+  ) {}
   menuButtonItems: IMenuButtonItem[] = [
     // { name: 'Import Exclude List', disabled: false },
     // { name: 'Export All Exclude Lists', disabled: false },
   ];
 
+  ngOnInit() {
+    this.permissions$ = this.authService.userPermissions$;
+  }
+
   onAddExcludeListClick(appContext: string, flagId: string) {
     this.dialogService.openAddExcludeListModal(appContext, flagId);
   }

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-table/feature-flag-exclusions-table.component.html

@@ -2,6 +2,7 @@
   <app-common-details-participant-list-table
     [tableType]="tableType"
     [dataSource]="dataSource$ | async"
+    [actionsDisabled]="actionsDisabled"
     [isLoading]="isLoading$ | async"
     noDataRowText="feature-flags.details.exclusions.card.no-data-row.text"
     (rowAction)="onRowAction($event)"

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-table/feature-flag-exclusions-table.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { FeatureFlagsService } from '../../../../../../../../core/feature-flags/feature-flags.service';
 import {
   FEATURE_FLAG_PARTICIPANT_LIST_KEY,
@@ -17,6 +17,7 @@ import { TranslateModule } from '@ngx-translate/core';
   imports: [CommonDetailsParticipantListTableComponent, CommonModule, TranslateModule],
 })
 export class FeatureFlagExclusionsTableComponent {
+  @Input() actionsDisabled?: boolean = false;
   tableType = FEATURE_FLAG_PARTICIPANT_LIST_KEY.EXCLUDE;
   dataSource$ = this.featureFlagService.selectFeatureFlagExclusions$;
   isLoading$ = this.featureFlagService.isLoadingSelectedFeatureFlag$;

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component.html

@@ -12,8 +12,9 @@
     header-right
     [showSlideToggle]="true"
     [slideToggleText]="'feature-flags.details.inclusions.include-all.toggle.text' | translate"
-    [isEnableToggleChecked]="flag.filterMode === FILTER_MODE.INCLUDE_ALL"
-    [showPrimaryButton]="true"
+    [slideToggleChecked]="flag.filterMode === FILTER_MODE.INCLUDE_ALL"
+    [slideToggleDisabled]="!(permissions$ | async)?.featureFlags.update"
+    [showPrimaryButton]="(permissions$ | async)?.featureFlags.update"
     [primaryButtonText]="'feature-flags.details.add-include-list.button.text' | translate"
     [isSectionCardExpanded]="isSectionCardExpanded && flag.filterMode !== FILTER_MODE.INCLUDE_ALL"
     [primaryActionBtnDisabled]="flag.filterMode === FILTER_MODE.INCLUDE_ALL"
@@ -28,6 +29,8 @@
   <app-feature-flag-inclusions-table
     content
     *ngIf="isSectionCardExpanded && flag.filterMode !== FILTER_MODE.INCLUDE_ALL"
+    [slideToggleDisabled]="!(permissions$ | async)?.featureFlags.update"
+    [actionsDisabled]="!(permissions$ | async)?.featureFlags.update"
     (rowAction)="onRowAction($event, flag.id)"
   ></app-feature-flag-inclusions-table>
 </app-common-section-card>

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component.ts

@@ -24,6 +24,8 @@ import {
   EditPrivateSegmentListRequest,
   Segment,
 } from '../../../../../../../core/segments/store/segments.model';
+import { UserPermission } from '../../../../../../../core/auth/store/auth.models';
+import { AuthService } from '../../../../../../../core/auth/auth.service';
 
 @Component({
   selector: 'app-feature-flag-inclusions-section-card',
@@ -42,6 +44,7 @@ import {
 })
 export class FeatureFlagInclusionsSectionCardComponent {
   @Input() isSectionCardExpanded;
+  permissions$: Observable<UserPermission>;
   tableRowCount$ = this.featureFlagService.selectFeatureFlagInclusionsLength$;
   selectedFlag$ = this.featureFlagService.selectedFeatureFlag$;
 
@@ -55,7 +58,11 @@ export class FeatureFlagInclusionsSectionCardComponent {
     return FILTER_MODE;
   }
 
-  constructor(private featureFlagService: FeatureFlagsService, private dialogService: DialogService) {}
+  constructor(
+    private featureFlagService: FeatureFlagsService,
+    private dialogService: DialogService,
+    private authService: AuthService
+  ) {}
   subscriptions = new Subscription();
   menuButtonItems: IMenuButtonItem[] = [
     // { name: 'Import Include List', disabled: false },
@@ -64,6 +71,10 @@ export class FeatureFlagInclusionsSectionCardComponent {
 
   confirmIncludeAllChangeDialogRef: MatDialogRef<CommonSimpleConfirmationModalComponent>;
 
+  ngOnInit() {
+    this.permissions$ = this.authService.userPermissions$;
+  }
+
   onAddIncludeListClick(appContext: string, flagId: string) {
     this.dialogService.openAddIncludeListModal(appContext, flagId);
   }

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-table/feature-flag-inclusions-table.component.html

@@ -2,6 +2,8 @@
   <app-common-details-participant-list-table
     [tableType]="tableType"
     [dataSource]="dataSource$ | async"
+    [slideToggleDisabled]="slideToggleDisabled"
+    [actionsDisabled]="actionsDisabled"
     [isLoading]="isLoading$ | async"
     noDataRowText="feature-flags.details.inclusions.card.no-data-row.text"
     (rowAction)="onRowAction($event)"

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-table/feature-flag-inclusions-table.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { FeatureFlagsService } from '../../../../../../../../core/feature-flags/feature-flags.service';
 import {
   FEATURE_FLAG_PARTICIPANT_LIST_KEY,
@@ -17,6 +17,8 @@ import { TranslateModule } from '@ngx-translate/core';
   imports: [CommonDetailsParticipantListTableComponent, CommonModule, TranslateModule],
 })
 export class FeatureFlagInclusionsTableComponent {
+  @Input() slideToggleDisabled?: boolean = false;
+  @Input() actionsDisabled?: boolean = false;
   tableType = FEATURE_FLAG_PARTICIPANT_LIST_KEY.INCLUDE;
   dataSource$ = this.featureFlagService.selectFeatureFlagInclusions$;
   isLoading$ = this.featureFlagService.isLoadingSelectedFeatureFlag$;

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html

@@ -12,8 +12,8 @@
   <!-- header-right -->
   <app-common-section-card-action-buttons
     header-right
-    [showSlideToggle]="true"
-    [isEnableToggleChecked]="flag.status === FEATURE_FLAG_STATUS.ENABLED"
+    [showSlideToggle]="(permissions$ | async)?.featureFlags.update"
+    [slideToggleChecked]="flag.status === FEATURE_FLAG_STATUS.ENABLED"
     [slideToggleText]="'feature-flags.enable.text' | translate"
     [showMenuButton]="true"
     [menuButtonItems]="menuButtonItems"

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts

@@ -16,10 +16,12 @@ import {
   FEATURE_FLAG_DETAILS_PAGE_ACTIONS,
   FeatureFlag,
 } from '../../../../../../../core/feature-flags/store/feature-flags.model';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { MatDialogRef } from '@angular/material/dialog';
 import { CommonSimpleConfirmationModalComponent } from '../../../../../../../shared-standalone-component-lib/components/common-simple-confirmation-modal/common-simple-confirmation-modal.component';
 import { Router } from '@angular/router';
+import { UserPermission } from '../../../../../../../core/auth/store/auth.models';
+import { AuthService } from '../../../../../../../core/auth/auth.service';
 @Component({
   selector: 'app-feature-flag-overview-details-section-card',
   standalone: true,
@@ -37,6 +39,7 @@ import { Router } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagOverviewDetailsSectionCardComponent implements OnInit, OnDestroy {
+  permissions$: Observable<UserPermission>;
   isSectionCardExpanded = true;
   @Output() sectionCardExpandChange = new EventEmitter<boolean>();
   emailId = '';
@@ -45,23 +48,24 @@ export class FeatureFlagOverviewDetailsSectionCardComponent implements OnInit, O
   shouldShowWarning$ = this.featureFlagService.shouldShowWarningForSelectedFlag$;
   subscriptions = new Subscription();
   confirmStatusChangeDialogRef: MatDialogRef<CommonSimpleConfirmationModalComponent>;
-  menuButtonItems: IMenuButtonItem[] = [
-    { name: FEATURE_FLAG_DETAILS_PAGE_ACTIONS.EDIT, disabled: false },
-    { name: FEATURE_FLAG_DETAILS_PAGE_ACTIONS.DUPLICATE, disabled: false },
-    { name: FEATURE_FLAG_DETAILS_PAGE_ACTIONS.EXPORT_DESIGN, disabled: false },
-    { name: FEATURE_FLAG_DETAILS_PAGE_ACTIONS.EMAIL_DATA, disabled: true },
-    { name: FEATURE_FLAG_DETAILS_PAGE_ACTIONS.ARCHIVE, disabled: true },
-    { name: FEATURE_FLAG_DETAILS_PAGE_ACTIONS.DELETE, disabled: false },
-  ];
+  menuButtonItems: IMenuButtonItem[];
 
   constructor(
     private dialogService: DialogService,
     private featureFlagService: FeatureFlagsService,
-    private router: Router
+    private router: Router,
+    private authService: AuthService
   ) {}
 
   ngOnInit(): void {
+    this.permissions$ = this.authService.userPermissions$;
     this.subscriptions.add(this.featureFlagService.currentUserEmailAddress$.subscribe((id) => (this.emailId = id)));
+
+    this.subscriptions.add(
+      this.permissions$.subscribe((permissions) => {
+        this.updateMenuItems(permissions);
+      })
+    );
   }
 
   get FEATURE_FLAG_STATUS() {
@@ -72,6 +76,17 @@ export class FeatureFlagOverviewDetailsSectionCardComponent implements OnInit, O
     return FILTER_MODE;
   }
 
+  private updateMenuItems(permissions: UserPermission): void {
+    this.menuButtonItems = [
+      { name: FEATURE_FLAG_DETAILS_PAGE_ACTIONS.EDIT, disabled: !permissions?.featureFlags.update },
+      { name: FEATURE_FLAG_DETAILS_PAGE_ACTIONS.DUPLICATE, disabled: !permissions?.featureFlags.create },
+      { name: FEATURE_FLAG_DETAILS_PAGE_ACTIONS.EXPORT_DESIGN, disabled: false },
+      { name: FEATURE_FLAG_DETAILS_PAGE_ACTIONS.EMAIL_DATA, disabled: true },
+      { name: FEATURE_FLAG_DETAILS_PAGE_ACTIONS.ARCHIVE, disabled: true },
+      { name: FEATURE_FLAG_DETAILS_PAGE_ACTIONS.DELETE, disabled: !permissions?.featureFlags.delete },
+    ];
+  }
+
   onSlideToggleChange(event: MatSlideToggleChange, flag: FeatureFlag) {
     const slideToggleEvent = event.source;
     const newStatus = slideToggleEvent.checked ? FEATURE_FLAG_STATUS.ENABLED : FEATURE_FLAG_STATUS.DISABLED;

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card.component.html

@@ -11,10 +11,10 @@
   <!-- header-right -->
   <app-common-section-card-action-buttons
     header-right
-    [showPrimaryButton]="true"
+    [showPrimaryButton]="(permissions$ | async)?.featureFlags.create"
     [primaryButtonText]="'feature-flags.add-feature-flag.text' | translate"
     [menuButtonItems]="menuButtonItems"
-    [showMenuButton]="true"
+    [showMenuButton]="(permissions$ | async)?.featureFlags.create"
     [isSectionCardExpanded]="isSectionCardExpanded"
     (primaryButtonClick)="onAddFeatureFlagButtonClick()"
     (menuButtonItemClick)="onMenuButtonItemClick($event)"

frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card.component.ts

@@ -20,6 +20,8 @@ import {
   CommonTableHelpersService,
   TableState,
 } from '../../../../../../../shared/services/common-table-helpers.service';
+import { UserPermission } from '../../../../../../../core/auth/store/auth.models';
+import { AuthService } from '../../../../../../../core/auth/auth.service';
 
 @Component({
   selector: 'app-feature-flag-root-section-card',
@@ -41,6 +43,7 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagRootSectionCardComponent {
+  permissions$: Observable<UserPermission>;
   dataSource$: Observable<MatTableDataSource<FeatureFlag>>;
   isLoadingFeatureFlags$ = this.featureFlagService.isLoadingFeatureFlags$;
   isInitialLoading$ = this.featureFlagService.isInitialFeatureFlagsLoading$;
@@ -75,10 +78,12 @@ export class FeatureFlagRootSectionCardComponent {
     private featureFlagService: FeatureFlagsService,
     private translateService: TranslateService,
     private dialogService: DialogService,
-    private tableHelpersService: CommonTableHelpersService
+    private tableHelpersService: CommonTableHelpersService,
+    private authService: AuthService
   ) {}
 
   ngOnInit() {
+    this.permissions$ = this.authService.userPermissions$;
     this.featureFlagService.fetchFeatureFlags(true);
   }
 

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component.html

@@ -49,7 +49,12 @@
         {{ PARTICIPANT_LIST_TRANSLATION_KEYS.ENABLE | translate }}
       </th>
       <td mat-cell *matCellDef="let rowData" class="enable-column ft-14-400">
-        <mat-slide-toggle color="primary" [checked]="rowData.enabled" (change)="onSlideToggleChange($event, rowData)">
+        <mat-slide-toggle
+          color="primary"
+          [checked]="rowData.enabled"
+          [disabled]="slideToggleDisabled"
+          (change)="onSlideToggleChange($event, rowData)"
+        >
         </mat-slide-toggle>
       </td>
     </ng-container>
@@ -60,10 +65,10 @@
         {{ PARTICIPANT_LIST_TRANSLATION_KEYS.ACTIONS | translate }}
       </th>
       <td mat-cell *matCellDef="let rowData" class="actions-column ft-14-400 dense-2">
-        <button mat-icon-button class="action-button" (click)="onEditButtonClick(rowData)">
+        <button mat-icon-button class="action-button" [disabled]="actionsDisabled" (click)="onEditButtonClick(rowData)">
           <mat-icon>edit</mat-icon>
         </button>
-        <button mat-icon-button class="action-button" (click)="onDeleteButtonClick(rowData)">
+        <button mat-icon-button class="action-button" [disabled]="actionsDisabled" (click)="onDeleteButtonClick(rowData)">
           <mat-icon>delete_outline</mat-icon>
         </button>
       </td>

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component.scss

@@ -86,6 +86,12 @@
 
       .action-button {
         color: var(--dark-grey);
+
+        &[disabled] {
+          .mat-icon {
+            opacity: 0.5;
+          }
+        }
       }
     }
   }

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component.ts

@@ -25,8 +25,10 @@ import { MemberTypes } from '../../../core/segments/store/segments.model';
  * <app-common-details-participant-list-table
  *   [dataSource]="inclusions$ | async"
  *   [isLoading]="isLoading$ | async"
- *   [noDataRowText]="'No data available' | translate">
- * </app-common-details-participant-list-table>
+ *   [noDataRowText]="'No data available' | translate"
+ *   [slideToggleDisabled]="false"
+ *   [actionsDisabled]="false"
+ * ></app-common-details-participant-list-table>
  * ```
  */
 
@@ -55,6 +57,8 @@ export class CommonDetailsParticipantListTableComponent {
   @Input() tableType: FEATURE_FLAG_PARTICIPANT_LIST_KEY;
   @Input() dataSource: any[];
   @Input() noDataRowText: string;
+  @Input() slideToggleDisabled?: boolean = false;
+  @Input() actionsDisabled?: boolean = false;
   @Input() isLoading: boolean;
   @Output() rowAction = new EventEmitter<ParticipantListRowActionEvent>();
 

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-action-buttons/common-section-card-action-buttons.component.html

@@ -3,7 +3,8 @@
     <mat-slide-toggle
       *ngIf="showSlideToggle"
       color="primary"
-      [checked]="isEnableToggleChecked"
+      [checked]="slideToggleChecked"
+      [disabled]="slideToggleDisabled"
       (change)="onSlideToggleChange($event)"
     >
       {{ slideToggleText }}

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-action-buttons/common-section-card-action-buttons.component.ts

@@ -17,7 +17,8 @@ import { IMenuButtonItem } from 'upgrade_types';
  * ```
  * <app-common-section-card-action-buttons
  *   [showSlideToggle]="false"
- *   [isEnableToggleChecked]="false"
+ *   [slideToggleChecked]="false"
+ *   [slideToggleDisabled]="false"
  *   [showPrimaryButton]="true"
  *   [primaryButtonText]="'Add Row'"
  *   [showMenuButton]="true"
@@ -41,7 +42,8 @@ import { IMenuButtonItem } from 'upgrade_types';
 export class CommonSectionCardActionButtonsComponent {
   @Input() showSlideToggle?: boolean = false;
   @Input() slideToggleText?: string;
-  @Input() isEnableToggleChecked?: boolean = false;
+  @Input() slideToggleChecked?: boolean = false;
+  @Input() slideToggleDisabled?: boolean = false;
   @Input() showPrimaryButton?: boolean = false;
   @Input() primaryButtonText?: string;
   @Input() showMenuButton?: boolean = false;