inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-7666] Add error message when REST API fails for radio buttons (#7926)

Browse Source 
* [AAE-7666] Add error message when REST API fails for radio buttons

* [AAE-7666] remove not needed checks from unit test

* Remove redundant code

* move logic from html to component
This commit is contained in:
Tomasz Gnyp 2022-11-02 14:00:41 +01:00 committed by GitHub
parent b572e16b67
commit 0b0174ced4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.html
View File

@ -18,5 +18,5 @@
</mat-radio-button>
</mat-radio-group>
</div>
<error-widget [error]="field.validationSummary" ></error-widget>
<error-widget class="adf-radio-group-error-message" [error]="hasError()"></error-widget>
</div>

4
lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss
View File

@ -28,4 +28,8 @@
&-radio-button {
margin: 5px;
}
&-radio-group-error-message .adf-error-container {
margin-top: 5px;
}
}

25
lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.spec.ts
View File

@ -21,7 +21,7 @@ import { FormFieldModel, FormFieldOption, FormFieldTypes, FormModel, setupTestBe
import { FormCloudService } from '../../../services/form-cloud.service';
import { RadioButtonsCloudWidgetComponent } from './radio-buttons-cloud.widget';
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
import { of } from 'rxjs';
import { of, throwError } from 'rxjs';
describe('RadioButtonsCloudWidgetComponent', () => {
let fixture: ComponentFixture<RadioButtonsCloudWidgetComponent>;
@ -48,7 +48,6 @@ describe('RadioButtonsCloudWidgetComponent', () => {
beforeEach(() => {
formCloudService = TestBed.inject(FormCloudService);
spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of(restOption));
fixture = TestBed.createComponent(RadioButtonsCloudWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
@ -56,6 +55,7 @@ describe('RadioButtonsCloudWidgetComponent', () => {
});
it('should update form on values fetched', () => {
spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of(restOption));
const taskId = '<form-id>';
const fieldId = '<field-id>';
@ -70,7 +70,7 @@ describe('RadioButtonsCloudWidgetComponent', () => {
const field = widget.field;
spyOn(field, 'updateForm').and.stub();
widget.ngOnInit();
fixture.detectChanges();
expect(field.updateForm).toHaveBeenCalled();
});
@ -155,6 +155,7 @@ describe('RadioButtonsCloudWidgetComponent', () => {
});
it('should be able to set a Radio Button widget when rest option enabled', () => {
spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of(restOption));
widget.field = new FormFieldModel(new FormModel({}), {
id: 'radio-id',
name: 'radio-name-label',
@ -172,4 +173,22 @@ describe('RadioButtonsCloudWidgetComponent', () => {
expect(selectedOption.innerText).toBe('opt-name-1');
expect(widget.field.isValid).toBe(true);
});
it('should show error message if the restUrl failed to fetch options', () => {
spyOn(formCloudService, 'getRestWidgetData').and.returnValue(throwError('Failed to fetch options'));
widget.field.restUrl = 'https://fake-rest-url';
widget.field.optionType = 'rest';
widget.field.restIdProperty = 'name';
fixture.detectChanges();
const radioButtons = element.querySelector<HTMLInputElement>('mat-radio-group');
radioButtons.click();
fixture.detectChanges();
const errorMessage = element.querySelector('.adf-radio-group-error-message .adf-error-text');
const errorIcon = element.querySelector('.adf-radio-group-error-message .adf-error-icon');
expect(errorIcon.textContent).toBe('error_outline');
expect(errorMessage.textContent).toBe('FORM.FIELD.REST_API_FAILED');
});
});

26
lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.ts
View File

@ -18,10 +18,11 @@
/* eslint-disable @angular-eslint/component-selector */
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { WidgetComponent, FormService, LogService, FormFieldOption } from '@alfresco/adf-core';
import { WidgetComponent, FormService, LogService, FormFieldOption, ErrorMessageModel } from '@alfresco/adf-core';
import { FormCloudService } from '../../../services/form-cloud.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'radio-buttons-cloud-widget',
@ -43,11 +44,14 @@ import { takeUntil } from 'rxjs/operators';
export class RadioButtonsCloudWidgetComponent extends WidgetComponent implements OnInit {
typeId = 'RadioButtonsCloudWidgetComponent';
restApiError: ErrorMessageModel;
protected onDestroy$ = new Subject<boolean>();
constructor(public formService: FormService,
private formCloudService: FormCloudService,
private logService: LogService) {
private logService: LogService,
private translateService: TranslateService) {
super(formService);
}
@ -63,7 +67,10 @@ export class RadioButtonsCloudWidgetComponent extends WidgetComponent implements
.subscribe((result: FormFieldOption[]) => {
this.field.options = result;
this.field.updateForm();
}, (err) => this.handleError(err));
}, (err) => {
this.resetRestApiOptions();
this.handleError(err);
});
}
onOptionClick(optionSelected: any) {
@ -72,6 +79,7 @@ export class RadioButtonsCloudWidgetComponent extends WidgetComponent implements
}
handleError(error: any) {
this.restApiError = new ErrorMessageModel({ message: this.translateService.instant('FORM.FIELD.REST_API_FAILED', { hostname: this.getRestUrlHostName() }) });
this.logService.error(error);
}
@ -87,4 +95,16 @@ export class RadioButtonsCloudWidgetComponent extends WidgetComponent implements
}
return this.field.value === option.id;
}
resetRestApiOptions() {
this.field.options = [];
}
getRestUrlHostName(): string {
return new URL(this.field?.restUrl).hostname ?? this.field?.restUrl;
}
hasError(): ErrorMessageModel {
return this.restApiError || this.field.validationSummary;
}
}