Skip to content

Commit

Permalink
Merge branch 'feat-NAC-317-use-angular-material-instead-of-hyland-ui-…
Browse files Browse the repository at this point in the history
…elements' of https://github.com/nuxeo/nuxeo-admin-console-ui into feat-NAC-317-use-angular-material-instead-of-hyland-ui-elements
  • Loading branch information
madhurkulshrestha-hyland committed Nov 11, 2024
2 parents 3642382 + 791bbbb commit b318ed4
Show file tree
Hide file tree
Showing 47 changed files with 280 additions and 409 deletions.
97 changes: 61 additions & 36 deletions nuxeo-admin-console-web/angular-app/src/app/app.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,47 +6,48 @@ import { PersistenceService } from "./shared/services/persistence.service";
import { WarningComponent } from "./features/warning/warning.component";
import { CommonService } from "./shared/services/common.service";
import { EventEmitter } from "@angular/core";
import { provideMockStore, MockStore } from '@ngrx/store/testing';
import { AuthStateInterface } from './auth/types/authState.interface';
import { UserInterface } from './shared/types/user.interface';
import { APP_CONSTANTS } from './app.constants';
import { By } from '@angular/platform-browser';
import { authActions } from './auth/store/actions';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { provideMockStore, MockStore } from "@ngrx/store/testing";
import { AuthStateInterface } from "./auth/types/authState.interface";
import { UserInterface } from "./shared/types/user.interface";
import { APP_CONSTANTS } from "./app.constants";
import { By } from "@angular/platform-browser";
import { authActions } from "./auth/store/actions";
import { ActivatedRoute, RouterModule } from "@angular/router";
import { BaseLayoutModule } from "./layouts/base-layout/base-layout.module";
import { BaseLayoutComponent } from "./layouts/base-layout/components/base-layout.component"
import { BaseLayoutComponent } from "./layouts/base-layout/components/base-layout.component";
import { HeaderBarComponent } from "./layouts/header-bar/header-bar.component";
import { MenuBarComponent } from "./layouts/menu-bar/menu-bar.component";
import { MatListModule } from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from "@angular/material/list";
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatToolbarModule } from "@angular/material/toolbar";
import { MatIconModule } from "@angular/material/icon";

describe("AppComponent", () => {
let component: AppComponent;
let fixture: ComponentFixture<AppComponent>;
const mockActivatedRoute = {
snapshot: {
paramMap: {
get: () => 'Administrator'
}
}
get: () => "Administrator",
},
},
};

let store: MockStore<{ auth: AuthStateInterface }>;
const initialAuthState: AuthStateInterface = {
isSubmitting: false,
currentUser: {
id: 'Administrator',
id: "Administrator",
isAdministrator: true,
properties: {
firstName: "nco",
lastName: "admin",
email: "[email protected]",
username: "Administrator"
}
username: "Administrator",
},
} as UserInterface,
isLoading: false,
validationErrors: null
validationErrors: null,
};

class persistenceServiceStub {
Expand All @@ -63,11 +64,24 @@ describe("AppComponent", () => {
loadApp = new EventEmitter<boolean>();
}


beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [AppComponent, BaseLayoutComponent, HeaderBarComponent, MenuBarComponent],
imports: [CommonModule, MatDialogModule, BaseLayoutModule, RouterModule, MatToolbarModule, MatListModule, MatSidenavModule],
declarations: [
AppComponent,
BaseLayoutComponent,
HeaderBarComponent,
MenuBarComponent,
],
imports: [
CommonModule,
MatDialogModule,
BaseLayoutModule,
RouterModule,
MatToolbarModule,
MatListModule,
MatSidenavModule,
MatIconModule,
],
providers: [
{ provide: PersistenceService, useClass: persistenceServiceStub },
{ provide: CommonService, useClass: commonServiceStub },
Expand All @@ -87,10 +101,12 @@ describe("AppComponent", () => {

describe("ngOnInit", () => {
it("should initiate JS client and subscribe to currentUser$", () => {
spyOn(component['nuxeoJsClientService'], 'initiateJSClient');
spyOn(component.currentUser$, 'subscribe').and.callThrough();
spyOn(component["nuxeoJsClientService"], "initiateJSClient");
spyOn(component.currentUser$, "subscribe").and.callThrough();
component.ngOnInit();
expect(component['nuxeoJsClientService'].initiateJSClient).toHaveBeenCalledWith(component.baseUrl);
expect(
component["nuxeoJsClientService"].initiateJSClient
).toHaveBeenCalledWith(component.baseUrl);
expect(component.currentUser$.subscribe).toHaveBeenCalled();
});

Expand All @@ -99,7 +115,10 @@ describe("AppComponent", () => {
spyOn(component.persistenceService, "get").and.returnValue(null);
component.ngOnInit();
expect(component.persistenceService.get).toHaveBeenCalled();
expect(component.dialogService.open).toHaveBeenCalledWith(WarningComponent, { disableClose: true });
expect(component.dialogService.open).toHaveBeenCalledWith(
WarningComponent,
{ disableClose: true, hasBackdrop: true }
);
});

it("should not open the warning dialog if warning preference is set", () => {
Expand Down Expand Up @@ -139,33 +158,39 @@ describe("AppComponent", () => {
expect(store.dispatch).toHaveBeenCalledWith(authActions.signOut());
});
});


describe("DOM", () => {
it("should display unauthorized message if currentUser is not administrator", () => {
store.setState({
auth: {
...initialAuthState, currentUser: {
id: 'Administrator', isAdministrator: false, properties: {
...initialAuthState,
currentUser: {
id: "Administrator",
isAdministrator: false,
properties: {
firstName: "nco",
lastName: "admin",
email: "[email protected]",
username: "Administrator"
}
}
}
username: "Administrator",
},
},
},
});
fixture.detectChanges();
const unauthorizedMessage = fixture.debugElement.query(By.css('.unauthorized'));
const unauthorizedMessage = fixture.debugElement.query(
By.css(".unauthorized")
);
expect(unauthorizedMessage).toBeTruthy();
expect(unauthorizedMessage.nativeElement.textContent).toContain(APP_CONSTANTS.UNAUTHORIZED_MESSAGE);
expect(unauthorizedMessage.nativeElement.textContent).toContain(
APP_CONSTANTS.UNAUTHORIZED_MESSAGE
);
});

it("should display base-layout if loadApp is true and currentUser is administrator", () => {
component.loadApp = true;
fixture.detectChanges();
const baseLayout = fixture.debugElement.query(By.css('base-layout'));
const baseLayout = fixture.debugElement.query(By.css("base-layout"));
expect(baseLayout).toBeTruthy();
});
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { MatFormFieldModule } from "@angular/material/form-field";
import { MatInputModule } from "@angular/material/input";
import { BulkActionMonitoringComponent } from "./components/bulk-action-monitoring/bulk-action-monitoring.component";
import { MatTooltipModule } from "@angular/material/tooltip";
import {MatSnackBar, MatSnackBarRef, MatSnackBarModule} from '@angular/material/snack-bar';
import { MatSnackBarModule } from "@angular/material/snack-bar";
import { MatTableModule } from "@angular/material/table";

@NgModule({
Expand All @@ -35,7 +35,7 @@ import { MatTableModule } from "@angular/material/table";
MatCardModule,
MatTooltipModule,
MatSnackBarModule,
MatTableModule
MatTableModule,
],
})
export class BulkActionMonitoringModule {}
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
<div class="bulk-action-form-container">
<form [formGroup]="bulkActionMonitoringForm" (ngSubmit)="onBulkActionFormSubmit()" class="bulk-action-form">
<p id="requiredField"> {{ GENERIC_LABELS.REQUIRED_FIELD_INDICATOR }}</p>
<p id="label">{{ BULK_ACTION_LABELS.BULK_ACTION_ID }}<span class="required-indicator">*</span></p>
<p id="label">{{ BULK_ACTION_LABELS.BULK_ACTION_ID }}<span class="required-indicator">*</span></p>
<mat-form-field appearance="outline" class="input-field">
<!-- <mat-label>{{ BULK_ACTION_LABELS.BULK_ACTION_ID }}</mat-label> -->
<input matInput placeholder="{{ BULK_ACTION_LABELS.BULK_ACTION_ID }}" type="text"
formControlName="bulkActionId" id="bulkActionId" required />
<mat-error *ngIf="bulkActionMonitoringForm?.get('bulkActionId')?.invalid">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,8 @@
}
.required-indicator {
color: rgb(218, 21, 0);
// font-size: 24px;
font-family: "Open Sans", sans-serif;
// font-weight: 50;
padding-left: 2px;
font-family: "Open Sans", sans-serif;
padding-left: 2px;
}
#label {
line-height: 1;
Expand All @@ -37,4 +35,4 @@
font-weight: 550;
letter-spacing: normal;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@ describe("BulkActionMonitoringFormComponent", () => {
component.showBulkActionErrorModal(error);
expect(mockDialog.open).toHaveBeenCalledWith(ErrorModalComponent, {
disableClose: true,
hasBackdrop: true,
height: MODAL_DIMENSIONS.HEIGHT,
width: MODAL_DIMENSIONS.WIDTH,
data: { error },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ export class BulkActionMonitoringFormComponent implements OnInit, OnDestroy {
);
this.errorDialogRef = this.dialogService.open(ErrorModalComponent, {
disableClose: true,
hasBackdrop: true,
height: MODAL_DIMENSIONS.HEIGHT,
width: MODAL_DIMENSIONS.WIDTH,
data: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@

&__info {
height: 220px;
// width: 16%;
p {
font-weight: 550;
}
Expand All @@ -33,27 +32,6 @@
width: 75%;
height: 220px;
}

mat-card.mat-mdc-card {
border-radius: 12px;
border: 1px solid #d1d5db;
box-shadow: none;
padding: 25px;
}

.mat-mdc-card-content {
width: 100%;
height: 100%;
padding: 0;
}
}

::ng-deep .hy-content-list__custom-cell {
max-height: none !important;
height: auto;
}
::ng-deep .hy-content-list__virtual-scroll-viewport {
height: 90% !important;
}

@media (max-width: 1024px) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule } from "@angular/material/card";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { BulkActionMonitoringDetailsComponent } from "./bulk-action-monitoring-details.component";
import { HyContentListModule } from "@hyland/ui";
import { MatTableModule } from '@angular/material/table';

describe("BulkActionMonitoringDetailsComponent", () => {
let component: BulkActionMonitoringDetailsComponent;
Expand All @@ -12,7 +12,7 @@ describe("BulkActionMonitoringDetailsComponent", () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [BulkActionMonitoringDetailsComponent],
imports: [MatCardModule, HyContentListModule, NoopAnimationsModule],
imports: [MatCardModule, NoopAnimationsModule, MatTableModule],
}).compileComponents();

fixture = TestBed.createComponent(BulkActionMonitoringDetailsComponent);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import { BulkActionMonitoringDetailsComponent } from "./bulk-action-monitoring-d
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { BulkActionMonitoringResultComponent } from "./bulk-action-monitoring-result.component";
import { provideMockStore } from "@ngrx/store/testing";
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTableModule } from '@angular/material/table';

describe("BulkActionMonitoringResultComponent", () => {
let component: BulkActionMonitoringResultComponent;
Expand Down Expand Up @@ -34,7 +38,6 @@ describe("BulkActionMonitoringResultComponent", () => {
};

beforeEach(async () => {
// const toastServiceSpy = jasmine.createSpyObj("HyToastService", ["success"]);
await TestBed.configureTestingModule({
declarations: [
BulkActionMonitoringResultComponent,
Expand All @@ -43,10 +46,13 @@ describe("BulkActionMonitoringResultComponent", () => {
],
imports: [
MatCardModule,
MatSnackBarModule,
MatIconModule,
MatTooltipModule,
MatTableModule,
NoopAnimationsModule,
],
providers: [
// { provide: HyToastService, useValue: toastServiceSpy },
provideMockStore({ initialState }),
],
}).compileComponents();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
<ng-template #runningState>
<span class="action-status">{{getRunningStatusText()}}</span>
</ng-template>
<mat-icon class="info-icon" aria-hidden="false" [matTooltip]="getTooltipText()"
matTooltipPosition="above" tabindex="0">info</mat-icon>
<mat-icon class="info-icon" aria-hidden="false" [matTooltip]="getTooltipText()" matTooltipPosition="above"
tabindex="0">info</mat-icon>
</p>

<button mat-stroked-button (click)="onRefresh()" aria-label="Refresh">
Expand All @@ -21,5 +21,4 @@
<p>{{statusText}}
{{bulkActionSummary.submitted | date:
'MMMM d, yyyy'}}</p>

</div>
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.bulk-action-summary {
margin-top: 30px;

&__header {
display: flex;
flex-direction: row;
Expand All @@ -13,8 +12,6 @@
width: auto;
}
}


.action-name {
font-weight: 550;
font-size: 20px;
Expand All @@ -38,22 +35,17 @@
border-color: #6b7280;
}
}


}

mat-icon {
font-size: 16px;
}



@media (max-width: 962px) {
.bulk-action-summary__header {
flex-direction: column;
align-items: flex-start;
padding-top: 10px;

button {
margin-left: 0;
margin-top: 6px;
Expand Down
Loading

0 comments on commit b318ed4

Please sign in to comment.