Feature/3257 - Unassign transactions on report coverage change

front-end/src/app/app.component.ts

@@ -6,9 +6,10 @@ import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { SecondCommitteeAdminDialogComponent } from './shared/components/second-committee-admin-dialog/second-committee-admin-dialog.component';
 import { ButtonModule } from 'primeng/button';
 import { GlossaryComponent } from './shared/components/glossary/glossary.component';
-import { environment } from 'environments/environment';
+
 import { ConfirmDialogComponent } from './shared/components/confirm-dialog/confirm-dialog.component';
 import { CommitteeMemberService } from 'app/shared/services/committee-member.service';
+import { FEATURE_FLAGS } from 'environments/config/feature-flag.config';
 import { Store } from '@ngrx/store';
 import { singleClickEnableAction } from './store/single-click.actions';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -32,7 +33,7 @@ import { map } from 'rxjs';
 export class AppComponent {
   protected readonly elementRef = inject(ElementRef);
   readonly memberService = inject(CommitteeMemberService);
-  readonly showGlossary = environment.showGlossary;
+  readonly showGlossary = inject(FEATURE_FLAGS).showGlossary;
   private readonly store = inject(Store);
   private readonly router = inject(Router);
 

front-end/src/app/contacts/contact-list/contact-list.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder } from '@angular/forms';
 import { provideMockStore } from '@ngrx/store/testing';
-import { testContact, testMockStore } from 'app/shared/utils/unit-test.utils';
+import { testContact, testFeatureFlags, testMockStore } from 'app/shared/utils/unit-test.utils';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { DialogModule } from 'primeng/dialog';
@@ -20,6 +20,7 @@ import { MemoCodePipe } from 'app/shared/pipes/memo-code.pipe';
 import { FecDatePipe } from 'app/shared/pipes/fec-date.pipe';
 import { TransactionIdPipe } from 'app/shared/pipes/transaction-id.pipe';
 import { DefaultZeroPipe } from 'app/shared/pipes/default-zero.pipe';
+import { FEATURE_FLAGS } from 'environments/config/feature-flag.config';
 
 describe('ContactListComponent', () => {
   let component: ContactListComponent;
@@ -42,7 +43,7 @@ describe('ContactListComponent', () => {
   };
   let deletedContactService: DeletedContactService;
 
-  beforeEach(async () => {
+  async function setup(showRestoreDeletedContacts = true) {
     await TestBed.configureTestingModule({
       imports: [
         ToastModule,
@@ -74,20 +75,22 @@ describe('ContactListComponent', () => {
             snapshot: { params: { reportId: '99' } },
           },
         },
+        {
+          provide: FEATURE_FLAGS,
+          useValue: { ...testFeatureFlags(), showRestoreDeletedContacts },
+        },
       ],
     }).compileComponents();
-    deletedContactService = TestBed.inject(DeletedContactService);
-  });
 
-  beforeEach(() => {
+    deletedContactService = TestBed.inject(DeletedContactService);
     service = TestBed.inject(ContactService);
     fixture = TestBed.createComponent(ContactListComponent);
     component = fixture.componentInstance;
-  });
+  }
 
   describe('typical', () => {
-    beforeEach(() => {
-      component.showRestoreDeletedContacts = true;
+    beforeEach(async () => {
+      await setup();
       fixture.detectChanges();
     });
 
@@ -177,7 +180,6 @@ describe('ContactListComponent', () => {
 
     it('#restoreButton should be visible if there is a deleted contact', async () => {
       expect(component.restoreContactsButtonIsVisible).toBe(false);
-
       vi.spyOn(deletedContactService, 'getTableData').mockReturnValue(
         Promise.resolve({
           count: 1,
@@ -188,13 +190,11 @@ describe('ContactListComponent', () => {
         }),
       );
       await component.checkForDeletedContacts();
-
       expect(component.restoreContactsButtonIsVisible).toBe(true);
     });
 
     it('#restoreButton should not be visible if there are no deleted contacts', async () => {
       component.restoreContactsButtonIsVisible = true;
-
       vi.spyOn(deletedContactService, 'getTableData').mockReturnValue(
         Promise.resolve({
           count: 0,
@@ -204,25 +204,8 @@ describe('ContactListComponent', () => {
           results: [],
         }),
       );
-      await component.checkForDeletedContacts();
-
-      expect(component.restoreContactsButtonIsVisible).toBe(false);
-    });
-
-    it('Restore deleted contacts should not be visible when the feature flag is disabled', async () => {
-      component.showRestoreDeletedContacts = false;
 
-      vi.spyOn(deletedContactService, 'getTableData').mockReturnValue(
-        Promise.resolve({
-          count: 1,
-          next: '',
-          previous: '',
-          pageNumber: 1,
-          results: [contact],
-        }),
-      );
       await component.checkForDeletedContacts();
-
       expect(component.restoreContactsButtonIsVisible).toBe(false);
     });
 
@@ -244,8 +227,31 @@ describe('ContactListComponent', () => {
     });
   });
 
+  describe('show restore button is false', () => {
+    beforeEach(async () => {
+      await setup(false);
+      fixture.detectChanges();
+    });
+
+    it('Restore deleted contacts should not be visible when the feature flag is disabled', async () => {
+      vi.spyOn(deletedContactService, 'getTableData').mockReturnValue(
+        Promise.resolve({
+          count: 1,
+          next: '',
+          previous: '',
+          pageNumber: 1,
+          results: [contact],
+        }),
+      );
+
+      await component.checkForDeletedContacts();
+      expect(component.restoreContactsButtonIsVisible).toBe(false);
+    });
+  });
+
   describe('restoreContactsButtonIsVisible true', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
+      await setup();
       component.restoreContactsButtonIsVisible = true;
       fixture.detectChanges();
     });

front-end/src/app/contacts/contact-list/contact-list.component.ts

@@ -12,7 +12,7 @@ import { ContactService, DeletedContactService } from 'app/shared/services/conta
 import { SelectModule } from 'primeng/select';
 import { TableAction } from 'app/shared/components/table-actions-button/table-actions';
 import { RouterLink } from '@angular/router';
-import { environment } from 'environments/environment';
+import { FEATURE_FLAGS } from 'environments/config/feature-flag.config';
 
 @Component({
   selector: 'app-contact-list',
@@ -37,7 +37,7 @@ export class ContactListComponent extends TableListBaseComponent<Contact> {
   contactTypeLabels: LabelList = ContactTypeLabels;
   dialogContactTypeOptions: PrimeOptions = [];
 
-  showRestoreDeletedContacts = environment.showRestoreDeletedContacts;
+  showRestoreDeletedContacts = inject(FEATURE_FLAGS).showRestoreDeletedContacts;
   restoreContactsButtonIsVisible = false;
   searchTerm = '';
 

front-end/src/app/layout/header/header-links/default-header-links/default-header-links.component.html

@@ -1,6 +1,6 @@
 <ul class="flex">
   <li><a routerLink="/reports">Reports</a></li>
-  @if (showAllTransactionsPage) {
+  @if (enableUnassignedTransactions) {
     <li><a routerLink="/transactions">Transactions</a></li>
   }
   <li><a routerLink="/contacts">Contacts</a></li>

front-end/src/app/layout/header/header-links/default-header-links/default-header-links.component.ts

@@ -3,10 +3,10 @@ import { Component, inject } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { Form3Service } from 'app/shared/services/form-3.service';
 import { LoginService } from 'app/shared/services/login.service';
-import { environment } from 'environments/environment';
 import { PopoverModule } from 'primeng/popover';
 import { PopoverLinkDirective } from '../popover-link.directive';
 import { ElectionCycleStore } from 'app/tools/election-cycle/election-cycle.store';
+import { FEATURE_FLAGS } from 'environments/config/feature-flag.config';
 
 @Component({
   selector: 'app-default-header-links',
@@ -18,6 +18,7 @@ import { ElectionCycleStore } from 'app/tools/election-cycle/election-cycle.stor
 export class DefaultHeaderLinksComponent {
   readonly electionCycleStore = inject(ElectionCycleStore);
   readonly loginService = inject(LoginService);
-  readonly showAllTransactionsPage = environment.showAllTransactionsPage;
-  readonly showForm3 = environment.showForm3;
+  readonly featureFlags = inject(FEATURE_FLAGS);
+  readonly enableUnassignedTransactions = this.featureFlags.enableUnassignedTransactions;
+  readonly showForm3 = this.featureFlags.showForm3;
 }

front-end/src/app/layout/sidebar/report-sidebar/report-sidebar.component.ts

@@ -11,6 +11,7 @@ import { FecDatePipe } from 'app/shared/pipes/fec-date.pipe';
 import { PanelMenu } from 'primeng/panelmenu';
 import { isForm3Group, ReportTypes } from 'app/shared/models/reports/report.model';
 import type { BaseForm3 } from 'app/shared/models/reports/base-form-3';
+import { FEATURE_FLAGS } from 'environments/config/feature-flag.config';
 
 @Component({
   selector: 'app-report-sidebar',
@@ -24,14 +25,15 @@ export class ReportSidebarComponent {
   private readonly reportService = inject(ReportService);
   private readonly route = inject(ActivatedRoute);
   private readonly report = this.store.selectSignal(selectActiveReport);
+  private readonly manualReportVersion = inject(FEATURE_FLAGS).manualReportVersion;
 
   readonly items = computed(() => {
     this.navEnd();
     const data = collectRouteData(this.route.snapshot);
     if (!data) return [];
     const sidebarState = data['sidebarSection'] as ReportSidebarSection;
     const isEditable = this.reportService.isEditable(this.report());
-    return this.report().getMenuItems(sidebarState, isEditable);
+    return this.report().getMenuItems(sidebarState, isEditable, this.manualReportVersion);
   });
 
   readonly formLabel = computed(() => this.report().formLabel);

front-end/src/app/reports/f3-shared/create-shared-f3/create-shared-f3.component.html

@@ -12,7 +12,7 @@ <h1>{{ title() }}</h1>
 
   <h2>Report type</h2>
 
-  @if (isF3X() && userCanSetFilingFrequency) {
+  @if (isF3X() && featureFlags.userCanSetFilingFrequency) {
     <div class="field">
       <label for="filing_frequency">REPORTING FREQUENCY</label>
       <p-selectButton
@@ -96,25 +96,28 @@ <h2 class="m-0">Covering period</h2>
   <app-save-cancel (save)="submitForm($event)" (cancelForm)="router.navigateByUrl('/reports')" />
 </form>
 
-<app-dialog
-  [(visible)]="coverageDatesDialogVisible"
-  header="Can’t save report"
-  (reject)="onHide()"
-  tabindex="-1"
-  aria-labelledby="dialog-title"
->
-  <p class="mb-0">
-    Some transactions would now fall outside your new coverage dates. To fix this, delete those transactions.
-  </p>
-  <ng-container dialog-footer #dialogFooterRef>
-    <div class="flex justify-content-center">
-      <p-button
-        type="button"
-        label="Manage your transactions"
-        class="p-button-primary dialog-button"
-        [routerLink]="['/reports/transactions/report', reportId(), 'list']"
-        [autofocus]="true"
-      ></p-button>
-    </div>
-  </ng-container>
-</app-dialog>
+<!-- This can go away after unassigned transactions are no longer feature flagged -->
+@if (!featureFlags.enableUnassignedTransactions) {
+  <app-dialog
+    [(visible)]="coverageDatesDialogVisible"
+    header="Can’t save report"
+    (reject)="onHide()"
+    tabindex="-1"
+    aria-labelledby="dialog-title"
+  >
+    <p class="mb-0">
+      Some transactions would now fall outside your new coverage dates. To fix this, delete those transactions.
+    </p>
+    <ng-container dialog-footer #dialogFooterRef>
+      <div class="flex justify-content-center">
+        <p-button
+          type="button"
+          label="Manage your transactions"
+          class="p-button-primary dialog-button"
+          [routerLink]="['/reports/transactions/report', reportId(), 'list']"
+          [autofocus]="true"
+        ></p-button>
+      </div>
+    </ng-container>
+  </app-dialog>
+}