feat(ui): enhance components with optional inputs and shared types (#177)

- Add optional field inputs to data copilot component for selective parameter inclusion
- Refactor RSVP details component to always redirect to step 5 instead of modal
- Create shared ComponentSeverity and BadgeSeverity types to eliminate duplication
- Add conditional create group button visibility in committee dashboard based on permissions

LFXV2-799

Signed-off-by: Asitha de Silva <[email protected]>

Author: asithade

apps/lfx-one/src/app/layouts/main-layout/main-layout.component.html

@@ -19,7 +19,9 @@
     data-testid="mobile-sidebar-drawer">
     <ng-template #header>
       <div class="flex items-center gap-3">
-        <img src="/images/lfx-one-logo.svg" alt="LFX Logo" class="w-auto h-5" />
+        <a [routerLink]="['/']" class="flex items-center">
+          <img src="/images/lfx-one-logo.svg" alt="LFX Logo" class="w-auto h-5" />
+        </a>
       </div>
     </ng-template>
     <lfx-sidebar [items]="sidebarItems()" [footerItems]="sidebarFooterItems()" [showProjectSelector]="true" [mobile]="true"></lfx-sidebar>

apps/lfx-one/src/app/modules/committees/committee-dashboard/committee-dashboard.component.ts

@@ -12,6 +12,7 @@ import { SelectComponent } from '@components/select/select.component';
 import { COMMITTEE_LABEL } from '@lfx-one/shared/constants';
 import { Committee, ProjectContext } from '@lfx-one/shared/interfaces';
 import { CommitteeService } from '@services/committee.service';
+import { FeatureFlagService } from '@services/feature-flag.service';
 import { PersonaService } from '@services/persona.service';
 import { ProjectContextService } from '@services/project-context.service';
 import { MessageService } from 'primeng/api';
@@ -31,6 +32,7 @@ export class CommitteeDashboardComponent {
   private readonly projectContextService = inject(ProjectContextService);
   private readonly committeeService = inject(CommitteeService);
   private readonly personaService = inject(PersonaService);
+  private readonly featureFlagService = inject(FeatureFlagService);
   private readonly router = inject(Router);
   private readonly messageService = inject(MessageService);
 
@@ -53,6 +55,8 @@ export class CommitteeDashboardComponent {
 
   // Permission signals
   public isMaintainer: Signal<boolean>;
+  public isFoundationContext: Signal<boolean>;
+  public foundationCreateCommitteeFlag: Signal<boolean>;
   public canCreateGroup: Signal<boolean>;
 
   // Statistics calculations
@@ -67,7 +71,13 @@ export class CommitteeDashboardComponent {
 
     // Initialize permission checks
     this.isMaintainer = computed(() => this.personaService.currentPersona() === 'maintainer');
-    this.canCreateGroup = computed(() => this.isMaintainer());
+    this.isFoundationContext = computed(() => !this.projectContextService.selectedProject() && !!this.projectContextService.selectedFoundation());
+    this.foundationCreateCommitteeFlag = this.featureFlagService.getBooleanFlag('foundation-create-committee', false);
+    this.canCreateGroup = computed(() => {
+      const isMaintainerAndNotFoundation = this.isMaintainer() && !this.isFoundationContext();
+      const hasFeatureFlag = this.foundationCreateCommitteeFlag();
+      return isMaintainerAndNotFoundation || hasFeatureFlag;
+    });
 
     // Initialize state
     this.committeesLoading = signal<boolean>(true);

apps/lfx-one/src/app/modules/committees/committee-view/committee-view.component.ts

@@ -9,7 +9,7 @@ import { ButtonComponent } from '@components/button/button.component';
 import { CardComponent } from '@components/card/card.component';
 import { MenuComponent } from '@components/menu/menu.component';
 import { TagComponent } from '@components/tag/tag.component';
-import { Committee, CommitteeMember, COMMITTEE_CATEGORY_SEVERITY } from '@lfx-one/shared';
+import { Committee, COMMITTEE_CATEGORY_SEVERITY, CommitteeMember, ComponentSeverity } from '@lfx-one/shared';
 import { CommitteeService } from '@services/committee.service';
 import { ProjectContextService } from '@services/project-context.service';
 import { ConfirmationService, MenuItem, MessageService } from 'primeng/api';
@@ -59,7 +59,7 @@ export class CommitteeViewComponent {
   public formattedCreatedDate: Signal<string>;
   public formattedUpdatedDate: Signal<string>;
   public refresh: BehaviorSubject<void>;
-  public categorySeverity: Signal<'info' | 'success' | 'warn' | 'danger' | 'secondary' | 'contrast'>;
+  public categorySeverity: Signal<ComponentSeverity>;
 
   public constructor() {
     // Initialize all class variables

apps/lfx-one/src/app/modules/committees/components/committee-table/committee-table.component.ts

@@ -7,7 +7,7 @@ import { RouterLink } from '@angular/router';
 import { ButtonComponent } from '@components/button/button.component';
 import { CardComponent } from '@components/card/card.component';
 import { TagComponent } from '@components/tag/tag.component';
-import { Committee, COMMITTEE_CATEGORY_SEVERITY } from '@lfx-one/shared';
+import { Committee, COMMITTEE_CATEGORY_SEVERITY, ComponentSeverity } from '@lfx-one/shared';
 import { CommitteeService } from '@services/committee.service';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
@@ -47,7 +47,7 @@ export class CommitteeTableComponent {
   public readonly refresh = output<void>();
 
   // Helper method for category severity
-  public getCategorySeverity(category: string): 'info' | 'success' | 'warn' | 'danger' | 'secondary' | 'contrast' {
+  public getCategorySeverity(category: string): ComponentSeverity {
     return COMMITTEE_CATEGORY_SEVERITY[category] || 'secondary';
   }
 

apps/lfx-one/src/app/modules/committees/components/member-card/member-card.component.ts

@@ -7,7 +7,7 @@ import { AvatarComponent } from '@components/avatar/avatar.component';
 import { BadgeComponent } from '@components/badge/badge.component';
 import { ButtonComponent } from '@components/button/button.component';
 import { MenuComponent } from '@components/menu/menu.component';
-import { Committee, CommitteeMember } from '@lfx-one/shared/interfaces';
+import { BadgeSeverity, Committee, CommitteeMember } from '@lfx-one/shared';
 import { Tooltip } from 'primeng/tooltip';
 
 @Component({
@@ -45,15 +45,15 @@ export class MemberCardComponent {
     return 'M';
   });
 
-  public readonly roleBadgeSeverity = computed<'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast'>(() => {
+  public readonly roleBadgeSeverity = computed<BadgeSeverity>(() => {
     const role = this.member().role?.name?.toLowerCase();
     if (role === 'chair' || role === 'chairperson') return 'info';
     if (role === 'vice chair' || role === 'vice-chair') return 'success';
     if (role === 'secretary') return 'contrast';
     return 'secondary';
   });
 
-  public readonly votingStatusBadgeSeverity = computed<'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast'>(() => {
+  public readonly votingStatusBadgeSeverity = computed<BadgeSeverity>(() => {
     const status = this.member().voting?.status?.toLowerCase();
     if (status === 'voting') return 'success';
     if (status === 'non-voting') return 'warn';

apps/lfx-one/src/app/modules/dashboards/components/dashboard-meeting-card/dashboard-meeting-card.component.ts

@@ -10,6 +10,7 @@ import { TagComponent } from '@components/tag/tag.component';
 import {
   buildJoinUrlWithParams,
   canJoinMeeting,
+  ComponentSeverity,
   DEFAULT_MEETING_TYPE_CONFIG,
   Meeting,
   MEETING_TYPE_CONFIGS,
@@ -45,11 +46,11 @@ export class DashboardMeetingCardComponent {
     const config = type ? (MEETING_TYPE_CONFIGS[type] ?? DEFAULT_MEETING_TYPE_CONFIG) : DEFAULT_MEETING_TYPE_CONFIG;
 
     // Map text color to severity
-    let severity: 'info' | 'success' | 'warn' | 'danger' | 'secondary' | 'contrast' = 'secondary';
+    let severity: ComponentSeverity = 'secondary';
     if (config.textColor.includes('red')) severity = 'danger';
     else if (config.textColor.includes('blue')) severity = 'info';
     else if (config.textColor.includes('green')) severity = 'success';
-    else if (config.textColor.includes('purple')) severity = 'contrast';
+    else if (config.textColor.includes('purple')) severity = 'primary';
     else if (config.textColor.includes('amber')) severity = 'warn';
 
     return {

apps/lfx-one/src/app/modules/dashboards/components/foundation-health/foundation-health.component.html

@@ -15,7 +15,7 @@ <h2>{{ title() }}</h2>
           data-testid="foundation-health-filters"></lfx-filter-pills>
 
         <!-- Data Copilot Button -->
-        <lfx-data-copilot></lfx-data-copilot>
+        <lfx-data-copilot [includeOrganizationId]="false" [includeOrganizationName]="false"></lfx-data-copilot>
       </div>
     </div>
 

apps/lfx-one/src/app/modules/meetings/components/meeting-card/meeting-card.component.html

@@ -255,7 +255,7 @@ <h3 class="text-base font-medium text-gray-900 leading-tight tracking-tight" dat
             [meeting]="meeting()"
             [currentOccurrence]="currentOccurrence()"
             [pastMeeting]="pastMeeting()"
-            [showAddModal]="!pastMeeting()"
+            [showAddButton]="!pastMeeting()"
             [additionalRegistrantsCount]="additionalRegistrantsCount()">
           </lfx-meeting-rsvp-details>
         } @else if (!pastMeeting()) {

apps/lfx-one/src/app/modules/meetings/components/meeting-card/meeting-card.component.ts

@@ -4,8 +4,8 @@
 import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { Component, computed, effect, inject, Injector, input, OnInit, output, runInInjectionContext, signal, Signal, WritableSignal } from '@angular/core';
-import { Router } from '@angular/router';
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { Router } from '@angular/router';
 import {
   MeetingDeleteConfirmationComponent,
   MeetingDeleteResult,
@@ -24,6 +24,7 @@ import { environment } from '@environments/environment';
 import {
   buildJoinUrlWithParams,
   canJoinMeeting,
+  ComponentSeverity,
   DEFAULT_MEETING_TYPE_CONFIG,
   getCurrentOrNextOccurrence,
   Meeting,
@@ -120,7 +121,7 @@ export class MeetingCardComponent implements OnInit {
   public readonly enabledFeaturesCount: Signal<number> = this.initEnabledFeaturesCount();
   public readonly meetingTypeBadge: Signal<{
     badgeClass: string;
-    severity: 'info' | 'success' | 'warn' | 'danger' | 'secondary' | 'contrast';
+    severity: ComponentSeverity;
     icon?: string;
     text: string;
   } | null> = this.initMeetingTypeBadge();
@@ -558,7 +559,7 @@ export class MeetingCardComponent implements OnInit {
 
   private initMeetingTypeBadge(): Signal<{
     badgeClass: string;
-    severity: 'info' | 'success' | 'warn' | 'danger' | 'secondary' | 'contrast';
+    severity: ComponentSeverity;
     icon?: string;
     text: string;
   } | null> {
@@ -576,7 +577,7 @@ export class MeetingCardComponent implements OnInit {
         case 'marketing':
           return { badgeClass: 'bg-green-100 text-green-500', severity: 'success', icon: 'fa-light fa-chart-line-up', text: meetingType };
         case 'technical':
-          return { badgeClass: 'bg-purple-100 text-purple-500', severity: 'contrast', icon: 'fa-light fa-code', text: meetingType };
+          return { badgeClass: 'bg-purple-100 text-purple-500', severity: 'primary', icon: 'fa-light fa-code', text: meetingType };
         case 'legal':
           return { badgeClass: 'bg-amber-100 text-amber-500', severity: 'warn', icon: 'fa-light fa-scale-balanced', text: meetingType };
         default:

apps/lfx-one/src/app/modules/meetings/components/meeting-rsvp-details/meeting-rsvp-details.component.html

@@ -8,17 +8,7 @@
       <i class="fa-light fa-users text-xs"></i>
       <span>{{ pastMeeting() ? 'Attendees' : 'People Invited' }}</span>
     </div>
-    @if (showAddLink()) {
-      <lfx-button
-        icon="fa-light fa-user-plus text-xs"
-        label="Add"
-        size="small"
-        severity="secondary"
-        [attr.data-testid]="'add-participant-button'"
-        [routerLink]="editLink() || []">
-      </lfx-button>
-    }
-    @if (showAddModal()) {
+    @if (showAddButton()) {
       <lfx-button
         icon="fa-light fa-user-plus text-xs"
         label="Add"