feat(ui): update persona selector visibility logic (#171)

Update persona selector to show when either persona is not autodetected
OR user has role-selector feature flag enabled. This provides more
flexibility in controlling persona selector visibility.

Changes:
- Inject FeatureFlagService into persona-selector component
- Add shouldShowSelector computed signal combining both conditions
- Update template to use new visibility logic
- Remove redundant conditional wrapper in sidebar component

LFXV2-777

Signed-off-by: Asitha de Silva <asithade@gmail.com>

Author: asithade

apps/lfx-one/src/app/shared/components/persona-selector/persona-selector.component.html

@@ -1,7 +1,7 @@
 <!-- Copyright The Linux Foundation and each contributor to LFX. -->
 <!-- SPDX-License-Identifier: MIT -->
 
-@if (!isAutoDetected()) {
+@if (shouldShowSelector()) {
   <div class="persona-selector" data-testid="persona-selector">
     <lfx-select [form]="form" control="persona" [options]="personaOptions" optionLabel="label" optionValue="value" size="small"></lfx-select>
   </div>

apps/lfx-one/src/app/shared/components/persona-selector/persona-selector.component.ts

@@ -1,12 +1,13 @@
 // Copyright The Linux Foundation and each contributor to LFX.
 // SPDX-License-Identifier: MIT
 
-import { Component, inject } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { SelectComponent } from '@components/select/select.component';
 import { PERSONA_OPTIONS } from '@lfx-one/shared/constants';
 import { PersonaType } from '@lfx-one/shared/interfaces';
+import { FeatureFlagService } from '@services/feature-flag.service';
 import { PersonaService } from '@services/persona.service';
 import { ProjectContextService } from '@services/project-context.service';
 
@@ -19,10 +20,16 @@ import { ProjectContextService } from '@services/project-context.service';
 export class PersonaSelectorComponent {
   private readonly personaService = inject(PersonaService);
   private readonly projectContextService = inject(ProjectContextService);
+  private readonly featureFlagService = inject(FeatureFlagService);
+
   // Persona options available for selection
   protected readonly personaOptions = PERSONA_OPTIONS;
   // Whether persona is auto-detected (read-only)
   protected readonly isAutoDetected = this.personaService.isAutoDetected;
+  // Feature flag for role selector
+  protected readonly showRoleSelector = this.featureFlagService.getBooleanFlag('role-selector', true);
+  // Show selector if not autodetected OR feature flag is enabled
+  protected readonly shouldShowSelector = computed(() => !this.isAutoDetected() || this.showRoleSelector());
 
   public form: FormGroup;
 

apps/lfx-one/src/app/shared/components/sidebar/sidebar.component.html

@@ -34,11 +34,9 @@
     <!-- Bottom Navigation -->
     <div class="flex flex-col gap-2 items-start px-3 w-full">
       <!-- Persona Selector -->
-      @if (showRoleSelector()) {
-        <div class="w-full mb-2">
-          <lfx-persona-selector></lfx-persona-selector>
-        </div>
-      }
+      <div class="w-full mb-2">
+        <lfx-persona-selector></lfx-persona-selector>
+      </div>
 
       @if (footerItems().length > 0) {
         @for (item of footerItemsWithTestIds(); track item.label) {

apps/lfx-one/src/app/shared/components/sidebar/sidebar.component.ts

@@ -9,7 +9,6 @@ import { BadgeComponent } from '@components/badge/badge.component';
 import { PersonaSelectorComponent } from '@components/persona-selector/persona-selector.component';
 import { ProjectSelectorComponent } from '@components/project-selector/project-selector.component';
 import { Project, ProjectContext, SidebarMenuItem } from '@lfx-one/shared/interfaces';
-import { FeatureFlagService } from '@services/feature-flag.service';
 import { PersonaService } from '@services/persona.service';
 import { ProjectContextService } from '@services/project-context.service';
 import { ProjectService } from '@services/project.service';
@@ -26,7 +25,6 @@ export class SidebarComponent {
   private readonly projectService = inject(ProjectService);
   private readonly projectContextService = inject(ProjectContextService);
   private readonly personaService = inject(PersonaService);
-  private readonly featureFlagService = inject(FeatureFlagService);
 
   // Input properties
   public readonly items = input.required<SidebarMenuItem[]>();
@@ -35,9 +33,6 @@ export class SidebarComponent {
   public readonly styleClass = input<string>('');
   public readonly showProjectSelector = input<boolean>(false);
 
-  // Feature flags
-  protected readonly showRoleSelector = this.featureFlagService.getBooleanFlag('role-selector', true);
-
   // Load all projects using toSignal with tap to set default
   protected readonly projects = toSignal(
     this.projectService.getProjects().pipe(