[ADF-3162] Setting component - Should be able to render the providers passed as input (#3464)

* Be able to change the available providers values * Add deprecated tag * add default providers * Fix empty OAuth and selected providers Improve the documentation * Fix BPM guard to check SSO condition * Add the oauthConfig again * SSO or Basic otpion auth setting change * fix host settings sso/basic add login documentation * remove test string * fix auth guard test * dispose upload emitter test events * remove space * exclude failing test
2025-10-08 14:51:32 +00:00 · 2018-06-12 17:52:36 +01:00
parent 9221d1d0d0
commit 476b5864bf
22 changed files with 413 additions and 470 deletions
--- a/lib/core/settings/host-settings.component.html
+++ b/lib/core/settings/host-settings.component.html
@@ -4,19 +4,31 @@
    </mat-toolbar>
    <mat-card class="adf-setting-card">
        <form id="host-form" [formGroup]="form" (submit)="onSubmit(form.value)">
-            <mat-form-field>
-                <mat-select placeholder="Provider" [formControl]="providers">
-                    <mat-option *ngFor="let provider of providersValues" [value]="provider.value">
-                        {{ provider.title }}
+
+            <mat-form-field floatLabel="{{'CORE.HOST_SETTINGS.PROVIDER' | translate }}" *ngIf="showSelectProviders">
+                <mat-select  id="adf-provider-selector" placeholder="Provider" [formControl]="providersControl">
+                    <mat-option *ngFor="let provider of providers" [value]="provider">
+                        {{ provider }}
                    </mat-option>
                </mat-select>
            </mat-form-field>

+            <div class="adf-authentication-type">
+                <label> {{'CORE.HOST_SETTINGS.TYPE-AUTH' | translate }} : </label>
+                <mat-radio-group formControlName="authType" >
+                <mat-radio-button value="BASIC">{{'CORE.HOST_SETTINGS.BASIC' | translate }}
+                </mat-radio-button>
+                <mat-radio-button value="OAUTH">{{'CORE.HOST_SETTINGS.SSO' | translate }}
+                </mat-radio-button>
+            </mat-radio-group>
+            </div>
+
            <ng-container *ngIf="isALL() || isECM()">
                <mat-card-content>
-                    <mat-form-field class="full-width" floatLabel="{{'CORE.HOST_SETTINGS.CS-HOST' | translate }}" >
+                    <mat-form-field class="full-width" floatLabel="{{'CORE.HOST_SETTINGS.CS-HOST' | translate }}">
                        <mat-label>{{'CORE.HOST_SETTINGS.CS-HOST' | translate }}</mat-label>
-                        <input matInput [formControl]="ecmHost" data-automation-id="ecmHost" type="text" tabindex="2" id="ecmHost" placeholder="http(s)://host|ip:port(/path)">
+                        <input matInput [formControl]="ecmHost" data-automation-id="ecmHost" type="text" tabindex="2"
+                               id="ecmHost" placeholder="http(s)://host|ip:port(/path)">
                        <mat-error *ngIf="ecmHost.hasError('pattern')">
                            {{ 'CORE.HOST_SETTINGS.NOT_VALID'| translate }}
                        </mat-error>
@@ -28,11 +40,12 @@
                </mat-card-content>
            </ng-container>

-            <ng-container *ngIf="isALL() || isOAUTH() || isBPM()">
+            <ng-container *ngIf="isALL() || isBPM()">
                <mat-card-content>
                    <mat-form-field class="full-width" floatLabel="{{'CORE.HOST_SETTINGS.BP-HOST' | translate }}">
                        <mat-label>{{'CORE.HOST_SETTINGS.BP-HOST' | translate }}</mat-label>
-                        <input matInput [formControl]="bpmHost" data-automation-id="bpmHost" type="text" tabindex="2" id="bpmHost" placeholder="http(s)://host|ip:port(/path)">
+                        <input matInput [formControl]="bpmHost" data-automation-id="bpmHost" type="text" tabindex="2"
+                               id="bpmHost" placeholder="http(s)://host|ip:port(/path)">
                        <mat-error *ngIf="bpmHost.hasError('pattern')">
                            {{ 'CORE.HOST_SETTINGS.NOT_VALID'| translate }}
                        </mat-error>
@@ -40,55 +53,68 @@
                            {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
                        </mat-error>
                    </mat-form-field>
-                    <ng-container *ngIf="isOAUTH()">
-                    <div formGroupName="oauthConfig">
-                        <mat-form-field class="full-width" floatLabel="Auth Host">
-                            <mat-label>Auth Host</mat-label>
-                            <input matInput name="host" id="oauthHost" formControlName="host" placeholder="http(s)://host|ip:port(/path)" >
-                            <mat-error *ngIf="host.hasError('pattern')">
-                                {{ 'CORE.HOST_SETTINGS.NOT_VALID'| translate }}
-                            </mat-error>
-                            <mat-error *ngIf="host.hasError('required')">
-                                {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
-                            </mat-error>
-                        </mat-form-field>
-                        <mat-form-field class="full-width" floatLabel="Client Id">
-                            <mat-label>{{ 'CORE.HOST_SETTINGS.CLIENT'| translate }}d</mat-label>
-                            <input matInput name="clientId" id="clientId" formControlName="clientId" placeholder="Client Id">
-                            <mat-error *ngIf="clientId.hasError('required')">
-                                {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
-                            </mat-error>
-                        </mat-form-field>
-
-                        <mat-form-field class="full-width" floatLabel="Scope">
-                            <mat-label>{{ 'CORE.HOST_SETTINGS.SCOPE'| translate }}</mat-label>
-                            <input matInput name="{{ 'CORE.HOST_SETTINGS.SCOPE'| translate }}" formControlName="scope" placeholder="Scope Id">
-                            <mat-error *ngIf="scope.hasError('required')">
-                                {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
-                            </mat-error>
-                        </mat-form-field>
-
-                        <label for="silentLogin">{{ 'CORE.HOST_SETTINGS.SILENT'| translate }}</label>
-                        <mat-slide-toggle class="full-width" name="silentLogin" [color]="'primary'" formControlName="silentLogin">
-                        </mat-slide-toggle>
-
-                        <mat-form-field class="full-width" floatLabel="Redirect Uri">
-                            <mat-label>{{ 'CORE.HOST_SETTINGS.REDIRECT'| translate }}</mat-label>
-                            <input matInput placeholder="{{ 'CORE.HOST_SETTINGS.REDIRECT'| translate }}" name="redirectUri" formControlName="redirectUri">
-                            <mat-error *ngIf="redirectUri.hasError('required')">
-                                {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
-                            </mat-error>
-                        </mat-form-field>
-                    </div>
-                    </ng-container>
                </mat-card-content>
            </ng-container>
+
+            <ng-container *ngIf="isOAUTH()">
+                <div formGroupName="oauthConfig">
+                    <mat-form-field class="full-width" floatLabel="Auth Host">
+                        <mat-label>Auth Host</mat-label>
+                        <input matInput name="host" id="oauthHost" formControlName="host"
+                               placeholder="http(s)://host|ip:port(/path)">
+                        <mat-error *ngIf="host.hasError('pattern')">
+                            {{ 'CORE.HOST_SETTINGS.NOT_VALID'| translate }}
+                        </mat-error>
+                        <mat-error *ngIf="host.hasError('required')">
+                            {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field class="full-width" floatLabel="Client Id">
+                        <mat-label>{{ 'CORE.HOST_SETTINGS.CLIENT'| translate }}d</mat-label>
+                        <input matInput name="clientId" id="clientId" formControlName="clientId"
+                               placeholder="Client Id">
+                        <mat-error *ngIf="clientId.hasError('required')">
+                            {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field class="full-width" floatLabel="Scope">
+                        <mat-label>{{ 'CORE.HOST_SETTINGS.SCOPE'| translate }}</mat-label>
+                        <input matInput name="{{ 'CORE.HOST_SETTINGS.SCOPE'| translate }}"
+                               formControlName="scope" placeholder="Scope Id">
+                        <mat-error *ngIf="scope.hasError('required')">
+                            {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
+                        </mat-error>
+                    </mat-form-field>
+
+                    <label for="silentLogin">{{ 'CORE.HOST_SETTINGS.SILENT'| translate }}</label>
+                    <mat-slide-toggle class="full-width" name="silentLogin" [color]="'primary'"
+                                      formControlName="silentLogin">
+                    </mat-slide-toggle>
+
+                    <label for="implicitFlow">{{ 'CORE.HOST_SETTINGS.IMPLICIT-FLOW'| translate }}</label>
+                    <mat-slide-toggle class="full-width" name="implicitFlow" [color]="'primary'"
+                                      formControlName="implicitFlow">
+                    </mat-slide-toggle>
+
+
+                    <mat-form-field class="full-width" floatLabel="Redirect Uri">
+                        <mat-label>{{ 'CORE.HOST_SETTINGS.REDIRECT'| translate }}</mat-label>
+                        <input matInput placeholder="{{ 'CORE.HOST_SETTINGS.REDIRECT'| translate }}"
+                               name="redirectUri" formControlName="redirectUri">
+                        <mat-error *ngIf="redirectUri.hasError('required')">
+                            {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
+                        </mat-error>
+                    </mat-form-field>
+                </div>
+            </ng-container>
            <mat-card-actions class="adf-actions">
                <button mat-button (click)="onCancel()" color="primary">
                    {{'CORE.HOST_SETTINGS.BACK' | translate }}
                </button>
-                <button type="submit" id="host-button" tabindex="4" class="adf-login-button" mat-raised-button color="primary" data-automation-id="host-button"
-                    [disabled]="!form.valid">
+                <button type="submit" id="host-button" tabindex="4" class="adf-login-button" mat-raised-button
+                        color="primary" data-automation-id="host-button"
+                        [disabled]="!form.valid">
                    {{'CORE.HOST_SETTINGS.APPLY' | translate }}
                </button>
            </mat-card-actions>
--- a/lib/core/settings/host-settings.component.scss
+++ b/lib/core/settings/host-settings.component.scss
@@ -5,6 +5,11 @@
        height: 100%;
        align-items: center;

+        .adf-authentication-type{
+            margin-bottom: 20px;
+            margin-top: 10px;
+        }
+
        .adf-setting-container {
            width: 800px;
            display: table;
@@ -13,10 +18,6 @@
            border-spacing: 0;
        }

-        .full-width {
-            width: 100%;
-        }
-
        .adf-setting-card-padding {
            width: 50%;
            display: table-cell;
@@ -34,6 +35,10 @@
            display: flex;
            justify-content: flex-end;
        }
+
+        .full-width {
+            width: 100%;
+        }
    }

 }
--- a/lib/core/settings/host-settings.component.spec.ts
+++ b/lib/core/settings/host-settings.component.spec.ts
@@ -43,6 +43,53 @@ describe('HostSettingsComponent', () => {
        fixture.destroy();
    });

+    describe('Providers', () => {
+
+        beforeEach(() => {
+            userPreferences.providers = 'ECM';
+            userPreferences.authType = 'OAUTH';
+            userPreferences.oauthConfig = {
+                host: 'http://localhost:6543',
+                redirectUri: '/',
+                silentLogin: false,
+                implicitFlow: true,
+                clientId: 'activiti',
+                scope: 'openid',
+                secret: ''
+            };
+            fixture.detectChanges();
+        });
+
+        afterEach(() => {
+            fixture.destroy();
+        });
+
+        it('should not show the providers select box if you hav eine porovider', (done) => {
+            component.providers = ['BPM'];
+            component.ngOnInit();
+
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                expect(element.querySelector('#adf-provider-selector')).toBeNull();
+                done();
+            });
+        });
+
+        it('should show the providers select box if you hav eine porovider', (done) => {
+            component.providers = ['BPM', 'ECM'];
+            component.ngOnInit();
+
+            fixture.detectChanges();
+
+            fixture.whenStable().then(() => {
+                expect(element.querySelector('#adf-provider-selector')).not.toBeNull();
+                done();
+            });
+        });
+
+    });
+
    describe('BPM ', () => {

        let ecmUrlInput;
@@ -75,7 +122,7 @@ describe('HostSettingsComponent', () => {
            bpmUrlInput.dispatchEvent(new Event('input'));
        });

-        it('should have an invalid form when the inserted is wrong', (done) => {
+        it('should have an invalid form when the inserted url is wrong', (done) => {
            const url = 'wrong';

            component.form.statusChanges.subscribe((status: string) => {
@@ -217,11 +264,13 @@ describe('HostSettingsComponent', () => {
    describe('OAUTH ', () => {

        let bpmUrlInput;
+        let ecmUrlInput;
        let oauthHostUrlInput;
        let clientIdInput;

        beforeEach(() => {
-            userPreferences.providers = 'OAUTH';
+            userPreferences.providers = 'ALL';
+            userPreferences.authType = 'OAUTH';
            userPreferences.oauthConfig = {
                host: 'http://localhost:6543',
                redirectUri: '/',
@@ -233,6 +282,7 @@ describe('HostSettingsComponent', () => {
            };
            fixture.detectChanges();
            bpmUrlInput = element.querySelector('#bpmHost');
+            ecmUrlInput = element.querySelector('#ecmHost');
            oauthHostUrlInput = element.querySelector('#oauthHost');
            clientIdInput = element.querySelector('#clientId');
        });
@@ -241,14 +291,18 @@ describe('HostSettingsComponent', () => {
            fixture.destroy();
        });

-        it('should have a valid form when the BPM is correct', (done) => {
+        it('should have a valid form when the urls are correct', (done) => {
            const urlBpm = 'http://localhost:9999/bpm';
+            const urlEcm = 'http://localhost:9999/bpm';

            component.form.statusChanges.subscribe((status: string) => {
                expect(status).toEqual('VALID');
                done();
            });

+            ecmUrlInput.value = urlEcm;
+            ecmUrlInput.dispatchEvent(new Event('input'));
+
            bpmUrlInput.value = urlBpm;
            bpmUrlInput.dispatchEvent(new Event('input'));
        });
--- a/lib/core/settings/host-settings.component.ts
+++ b/lib/core/settings/host-settings.component.ts
@@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { Component, EventEmitter, Output, ViewEncapsulation, OnInit } from '@angular/core';
+import { Component, EventEmitter, Output, ViewEncapsulation, OnInit, Input } from '@angular/core';
 import { Validators, FormGroup, FormBuilder, AbstractControl, FormControl } from '@angular/forms';
 import { UserPreferencesService } from '../services/user-preferences.service';

@@ -32,12 +32,10 @@ export class HostSettingsComponent implements OnInit {

    HOST_REGEX: string = '^(http|https):\/\/.*[^/]$';

-    providersValues = [
-        { title: 'ECM and BPM', value: 'ALL' },
-        { title: 'BPM', value: 'BPM' },
-        { title: 'ECM', value: 'ECM' },
-        { title: 'OAUTH', value: 'OAUTH' }
-    ];
+    @Input()
+    providers: string[] = ['BPM', 'ECM', 'ALL'];
+
+    showSelectProviders = true;

    form: FormGroup;

@@ -45,7 +43,9 @@ export class HostSettingsComponent implements OnInit {
    @Output()
    error = new EventEmitter<string>();

-    /** Emitted when the ecm host URL is changed. */
+    /** Emitted when the ecm host URL is changed.
+     * @deprecated in 2.4.0
+     */
    @Output()
    ecmHostChange = new EventEmitter<string>();

@@ -55,33 +55,54 @@ export class HostSettingsComponent implements OnInit {
    @Output()
    success = new EventEmitter<boolean>();

-    /** Emitted when the bpm host URL is changed. */
+    /** Emitted when the bpm host URL is changed.
+     * @deprecated in 2.4.0
+     */
    @Output()
    bpmHostChange = new EventEmitter<string>();

-    constructor(
-        private fb: FormBuilder,
-        private userPreference: UserPreferencesService) {
+    constructor(private formBuilder: FormBuilder,
+                private userPreference: UserPreferencesService) {
    }

    ngOnInit() {
+        if (this.providers.length === 1) {
+            this.showSelectProviders = false;
+        }

        let providerSelected = this.userPreference.providers;

-        this.form = this.fb.group({
-            providers: [providerSelected, Validators.required]
+        let authType = 'BASIC';
+        if (this.userPreference.authType === 'OAUTH') {
+            authType = this.userPreference.authType;
+        }
+
+        this.form = this.formBuilder.group({
+            providersControl: [providerSelected, Validators.required],
+            authType: authType
        });

        this.addFormGroups();

-        this.providers.valueChanges.subscribe( () => {
+        if (this.userPreference.authType === 'OAUTH') {
+            this.addOAuthFormGroup();
+        }
+
+        this.form.get('authType').valueChanges.subscribe((value) => {
+            if (value === 'BASIC') {
+                this.form.removeControl('oauthConfig');
+            } else {
+                this.addOAuthFormGroup();
+            }
+        });
+
+        this.providersControl.valueChanges.subscribe(() => {
            this.removeFormGroups();
            this.addFormGroups();
-        }) ;
+        });
    }

    private removeFormGroups() {
-        this.form.removeControl('oauthConfig');
        this.form.removeControl('bpmHost');
        this.form.removeControl('ecmHost');
    }
@@ -89,14 +110,11 @@ export class HostSettingsComponent implements OnInit {
    private addFormGroups() {
        this.addBPMFormControl();
        this.addECMFormControl();
-        this.addOAuthFormGroup();
    }

    private addOAuthFormGroup() {
-        if (this.isOAUTH() && !this.oauthConfig) {
-            const oauthFormGroup = this.createOAuthFormGroup();
-            this.form.addControl('oauthConfig', oauthFormGroup);
-        }
+        const oauthFormGroup = this.createOAuthFormGroup();
+        this.form.addControl('oauthConfig', oauthFormGroup);
    }

    private addBPMFormControl() {
@@ -114,26 +132,28 @@ export class HostSettingsComponent implements OnInit {
    }

    private createOAuthFormGroup(): AbstractControl {
-        const oAuthConfig = this.userPreference.oauthConfig;
-        if (oAuthConfig) {
-            return this.fb.group({
-                host: [oAuthConfig.host, [Validators.required, Validators.pattern(this.HOST_REGEX)]],
-                clientId: [oAuthConfig.clientId, Validators.required],
-                redirectUri: [oAuthConfig.redirectUri, Validators.required],
-                scope: [oAuthConfig.scope, Validators.required],
-                secret: oAuthConfig.secret,
-                silentLogin: oAuthConfig.silentLogin,
-                implicitFlow: oAuthConfig.implicitFlow
-            });
+        let oAuthConfig: any = {};
+        if (this.userPreference.authType === 'OAUTH') {
+            oAuthConfig = this.userPreference.oauthConfig;
        }
+
+        return this.formBuilder.group({
+            host: [oAuthConfig.host, [Validators.required, Validators.pattern(this.HOST_REGEX)]],
+            clientId: [oAuthConfig.clientId, Validators.required],
+            redirectUri: [oAuthConfig.redirectUri, Validators.required],
+            scope: [oAuthConfig.scope, Validators.required],
+            secret: oAuthConfig.secret,
+            silentLogin: oAuthConfig.silentLogin,
+            implicitFlow: oAuthConfig.implicitFlow
+        });
    }

    private createBPMFormControl(): AbstractControl {
-        return new FormControl (this.userPreference.bpmHost, [Validators.required, Validators.pattern(this.HOST_REGEX)]);
+        return new FormControl(this.userPreference.bpmHost, [Validators.required, Validators.pattern(this.HOST_REGEX)]);
    }

    private createECMFormControl(): AbstractControl {
-        return new FormControl (this.userPreference.ecmHost, [Validators.required, Validators.pattern(this.HOST_REGEX)]);
+        return new FormControl(this.userPreference.ecmHost, [Validators.required, Validators.pattern(this.HOST_REGEX)]);
    }

    onCancel() {
@@ -141,7 +161,8 @@ export class HostSettingsComponent implements OnInit {
    }

    onSubmit(values: any) {
-        this.userPreference.providers = values.providers;
+        this.userPreference.providers = values.providersControl;
+
        if (this.isBPM()) {
            this.saveBPMValues(values);
        } else if (this.isECM()) {
@@ -149,15 +170,19 @@ export class HostSettingsComponent implements OnInit {
        } else if (this.isALL()) {
            this.saveECMValues(values);
            this.saveBPMValues(values);
-        } else if (this.isOAUTH()) {
+        }
+
+        if (this.isOAUTH()) {
            this.saveOAuthValues(values);
        }
+
+        this.userPreference.authType = values.authType;
+
        this.success.emit(true);
    }

    private saveOAuthValues(values: any) {
        this.userPreference.oauthConfig = values.oauthConfig;
-        this.userPreference.bpmHost = values.bpmHost;
    }

    private saveBPMValues(values: any) {
@@ -169,23 +194,23 @@ export class HostSettingsComponent implements OnInit {
    }

    isBPM(): boolean {
-        return this.providers.value === 'BPM';
+        return this.providersControl.value === 'BPM';
    }

    isECM(): boolean {
-        return this.providers.value === 'ECM';
+        return this.providersControl.value === 'ECM';
    }

    isALL(): boolean {
-        return this.providers.value === 'ALL';
+        return this.providersControl.value === 'ALL';
    }

    isOAUTH(): boolean {
-        return this.providers.value === 'OAUTH';
+        return this.form.get('authType').value === 'OAUTH';
    }

-    get providers(): AbstractControl {
-        return this.form.get('providers');
+    get providersControl(): AbstractControl {
+        return this.form.get('providersControl');
    }

    get bpmHost(): AbstractControl {