Merge pull request #1998 from fecgov/release/sprint-43

Release/sprint 43

front-end/cypress/e2e/pages/loginPage.ts

@@ -72,6 +72,8 @@ function legacyLogin() {
   });
 
   cy.visit('/');
+  cy.get('#dropdownMenuButton').click();
+  cy.get('[data-test="debug-login-button"]').click();
   cy.get(fieldEmail).type(email);
   cy.get(fieldCommittee).type(committeeID);
   cy.get(fieldPassword).type(testPassword).type('{enter}');

front-end/package.json

@@ -39,7 +39,7 @@
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
     "class-transformer": "^0.5.1",
-    "fecfile-validate": "https://github.com/fecgov/fecfile-validate#2b8765a913034f90f1475394f5aea9a2fa349f50",
+    "fecfile-validate": "https://github.com/fecgov/fecfile-validate#0f8b966b623fbca644aebb2054fe4829eb0e0a93",
     "intl-tel-input": "^23.0.4",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",

front-end/src/app/committee/manage-committee/manage-committee.component.html

@@ -1,5 +1,5 @@
 <app-table
-  title="Existing Users"
+  title="Existing users"
   [items]="items"
   [totalItems]="totalItems"
   [loading]="loading"
@@ -18,10 +18,10 @@
   <ng-template #toolbar>
     <p-toolbar>
       <ng-template pTemplate="left">
-        <h1 class="m-0">Manage Users</h1>
+        <h1 class="m-0">Manage users</h1>
       </ng-template>
       <ng-template pTemplate="right">
-        <button (click)="addItem()" class="p-button" icon="pi pi-plus" label="Add User" pButton pRipple></button>
+        <button (click)="addItem()" class="add-button" icon="pi pi-plus" label="Add user" pButton pRipple></button>
       </ng-template>
     </p-toolbar>
   </ng-template>

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

@@ -18,7 +18,7 @@
   <ng-template #toolbar>
     <p-toolbar>
       <ng-template pTemplate="left">
-        <h1 class="m-0">Manage Contacts</h1>
+        <h1 class="m-0">Manage contacts</h1>
       </ng-template>
       <ng-template pTemplate="right">
         <button
@@ -53,7 +53,7 @@ <h1 class="m-0">Manage Contacts</h1>
     ></button>
   </ng-template>
   <ng-template #header>
-    <th id="buttons" role="columnheader" style="text-align: center">Delete</th>
+    <th id="actions" role="columnheader">Actions</th>
   </ng-template>
   <ng-template #body let-item>
     <td>
@@ -63,15 +63,15 @@ <h1 class="m-0">Manage Contacts</h1>
     <td>{{ item.candidate_id || item.committee_id }}</td>
     <td>{{ item.employer }}</td>
     <td>{{ item.occupation }}</td>
-    <td style="text-align: center">
-      <p-button
-        icon="pi pi-trash"
-        [text]="true"
-        [ngClass]="{ disabled: !canDeleteItem(item) }"
-        pTooltip="This contact can not be deleted because it has associated transactions or reports."
-        [tooltipDisabled]="canDeleteItem(item)"
-        (onClick)="canDeleteItem(item) && deleteItem(item)"
-      ></p-button>
+    <td>
+      <app-table-actions-button
+        [tableActions]="rowActions"
+        [actionItem]="item"
+        (tableActionClick)="onRowActionClick($event.action, $event.actionItem)"
+        buttonIcon="pi pi-ellipsis-v"
+        buttonStyleClass="flex justify-content-center p-button-rounded p-button-primary  p-button-text mr-2"
+        [buttonAriaLabel]="'edit ' + displayName(item)"
+      ></app-table-actions-button>
     </td>
   </ng-template>
 </app-table>

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

@@ -79,6 +79,14 @@ describe('ContactListComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should test TableAction behavior', () => {
+    const deleteAction = component.rowActions[1];
+    expect(deleteAction.isAvailable()).toBe(true);
+    expect(deleteAction.isEnabled(contact)).toBe(true);
+    contact.has_transaction_or_report = true;
+    expect(deleteAction.isEnabled(contact)).toBe(false);
+  });
+
   it('#addItem opens the dialog to add an item', () => {
     component.isNewItem = false;
     component.addItem();

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

@@ -1,5 +1,5 @@
 import { Component, ElementRef } from '@angular/core';
-import { TableListBaseComponent } from 'app/shared/components/table-list-base/table-list-base.component';
+import { TableAction, TableListBaseComponent } from 'app/shared/components/table-list-base/table-list-base.component';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { ListRestResponse } from 'app/shared/models/rest-api.model';
 import { LabelList, LabelUtils, PrimeOptions } from 'app/shared/utils/label.utils';
@@ -27,6 +27,16 @@ export class ContactListComponent extends TableListBaseComponent<Contact> {
     ContactTypes.INDIVIDUAL,
   ]);
 
+  public rowActions: TableAction[] = [
+    new TableAction('Edit', this.editItem.bind(this)),
+    new TableAction(
+      'Delete',
+      this.deleteItem.bind(this),
+      () => true,
+      (contact: Contact) => this.canDeleteItem(contact),
+    ),
+  ];
+
   sortableHeaders: { field: string; label: string }[] = [
     { field: 'sort_name', label: 'Name' },
     { field: 'type', label: 'Type' },

front-end/src/app/layout/banner/banner.component.scss

@@ -80,7 +80,7 @@
   font-family: karla, sans-serif;
   margin-bottom: 0;
   margin-top: 0;
-  font-size: 0.9rem;
+  font-size: 13px;
   line-height: 1.1;
 }
 
@@ -114,6 +114,7 @@
 
 .usa-banner__button-text {
   text-decoration: underline;
+  font-size: 13px;
 }
 
 .usa-banner__icon {

front-end/src/app/layout/footer/footer.component.scss

@@ -1,6 +1,5 @@
 .full-version {
   position: absolute;
-  bottom: 0;
   width: 100%;
 }
 
@@ -21,12 +20,18 @@ footer label {
 }
 
 #footer-lower {
-  height: 234px;
+  height: 300px;
   background-color: #164f85;
   padding: 5px;
   padding-left: 28px;
 }
 
+@media (min-width: 768px) {
+  #footer-lower {
+    height: 234px;
+  }
+}
+
 #fec-seal {
   height: 100px;
   width: 100px;

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

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light px-2 py-0">
-  <button class="seal-link navbar-brand">
+  <button class="seal-link navbar-brand pb-0">
     <img ngSrc="assets/img/seal-and-title.svg" class="seal-and-title mr-2" alt="FEC Seal" height="48" width="181" />
   </button>
   <button

front-end/src/app/layout/layout.component.html

@@ -33,7 +33,7 @@
   <!--  End Sidebar section -->
 
   <!-- Begin No Sidebar section -->
-  <div *ngIf="!layoutControls.showSidebar" class="content-offset">
+  <div *ngIf="!layoutControls.showSidebar" id="content-offset">
     <div class="container">
       <div class="header-container" *ngIf="layoutControls.showHeader">
         <app-header [headerStyle]="layoutControls.headerStyle"></app-header>
@@ -45,7 +45,7 @@
           </div>
         </div>
         <div class="grid">
-          <div class="col-12 router-outlet">
+          <div class="col-12 router-outlet p-0">
             <router-outlet></router-outlet>
           </div>
         </div>

front-end/src/app/layout/layout.component.scss

@@ -8,7 +8,7 @@
 }
 
 .header-container {
-  padding: 0 32px 5px 32px;
+  padding: 0 32px 64px 32px;
 }
 
 .row {
@@ -29,10 +29,6 @@ app-footer {
   min-height: 100vh;
 }
 
-.content-offset {
-  padding-bottom: 314px;
-}
-
 .sidebar-content-container {
   min-height: calc(100vh - 2rem);
   width: 100%;
@@ -41,7 +37,7 @@ app-footer {
 }
 
 .login-background {
-  background-color: #ece8e8;
+  background-color: #ffffff;
   max-height: 100vh;
 }
 

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, AfterViewChecked, RendererFactory2, Renderer2 } from '@angular/core';
 
 import { NavigationEnd, Router } from '@angular/router';
 import { DestroyerComponent } from 'app/shared/components/app-destroyer.component';
@@ -18,13 +18,34 @@ export enum BackgroundStyles {
   templateUrl: './layout.component.html',
   styleUrls: ['./layout.component.scss'],
 })
-export class LayoutComponent extends DestroyerComponent implements OnInit {
+export class LayoutComponent extends DestroyerComponent implements OnInit, AfterViewChecked {
   @ViewChild(FeedbackOverlayComponent) feedbackOverlay!: FeedbackOverlayComponent;
 
   layoutControls = new LayoutControls();
+  private renderer: Renderer2;
 
-  constructor(private router: Router) {
+  constructor(
+    private router: Router,
+    rendererFactory: RendererFactory2,
+  ) {
     super();
+    this.renderer = rendererFactory.createRenderer(null, null);
+  }
+  ngAfterViewChecked(): void {
+    this.updateContentOffset();
+  }
+
+  updateContentOffset() {
+    if (this.layoutControls.showSidebar) return;
+    const contentOffset = this.renderer.selectRootElement('#content-offset', true);
+    if (!contentOffset) return;
+    const height = contentOffset.offsetHeight;
+    let headerFooterOffset = window.innerWidth < 768 ? 332 : 265;
+    if (this.layoutControls.showUpperFooter) headerFooterOffset += 80;
+    const marginBottom = Math.max(64, window.innerHeight - height - headerFooterOffset);
+
+    // Apply the margin-bottom to the div
+    contentOffset.style.marginBottom = marginBottom + 'px';
   }
 
   ngOnInit(): void {

front-end/src/app/layout/sidebar/menus/f3x/f3x-menu.component.html

@@ -3,7 +3,7 @@
     <div class="col-12">
       <div class="title-2">REPORT PROGRESS</div>
       <div class="report-type">{{ formLabel }}</div>
-      <div class="sub-heading">{{ report_code | reportCodeLabel }}</div>
+      <div class="sub-heading">{{ subLabel }}</div>
       <div class="sub-heading">
         {{ coverage_from_date | fecDate }} — <wbr />
         {{ coverage_through_date | fecDate }}

front-end/src/app/layout/sidebar/menus/f3x/f3x-menu.component.ts

@@ -4,7 +4,6 @@ import { MenuItem } from 'primeng/api';
 import { Report } from '../../../../shared/models/report.model';
 import { ReportService } from '../../../../shared/services/report.service';
 import { ReportSidebarSection, SidebarState } from '../../sidebar.component';
-import { F3xReportCodes } from 'app/shared/utils/report-code.utils';
 import { AbstractMenuComponent } from '../abstract-menu.component';
 import { takeUntil } from 'rxjs';
 import { Form3X } from '../../../../shared/models/form-3x.model';
@@ -17,7 +16,7 @@ import { Router } from '@angular/router';
 })
 export class F3XMenuComponent extends AbstractMenuComponent implements OnInit {
   formLabel?: string;
-  report_code?: F3xReportCodes;
+  subLabel?: string;
   coverage_from_date?: Date;
   coverage_through_date?: Date;
 
@@ -31,7 +30,7 @@ export class F3XMenuComponent extends AbstractMenuComponent implements OnInit {
     if (!this.activeReport$) return;
     this.activeReport$.pipe(takeUntil(this.destroy$)).subscribe((report) => {
       this.formLabel = report?.formLabel;
-      this.report_code = (report as Form3X).report_code;
+      this.subLabel = report?.formSubLabel;
       this.coverage_from_date = (report as Form3X).coverage_from_date;
       this.coverage_through_date = (report as Form3X).coverage_through_date;
     });

front-end/src/app/login/login.module.ts

@@ -12,6 +12,7 @@ import { CheckboxModule } from 'primeng/checkbox';
 import { LoginRoutingModule } from './login-routing.module';
 import { InputTextModule } from 'primeng/inputtext';
 import { PasswordModule } from 'primeng/password';
+import { DialogModule } from 'primeng/dialog';
 
 @NgModule({
   declarations: [LoginComponent, DebugLoginComponent, SecurityNoticeComponent],
@@ -28,6 +29,7 @@ import { PasswordModule } from 'primeng/password';
     CheckboxModule,
     InputTextModule,
     PasswordModule,
+    DialogModule,
   ],
 })
 export class LoginModule {}