[AAE-10457] Storybook User Info module (#7814)

* [AAE-10457] Storybook add User Info stories

* [AAE-10457] Storybook delete unnecessary code from authentication service mock

* [AAE-10457] Storybook base all of the stories on template

* [AAE-10457] Storybook add missed licence in service mock file

* [AAE-10457] Storybook add component stories decorator for proper User Info alignment

* [AAE-10457] Storybook add documentation table for stories

* [AAE-10457] Storybook fix bug in browser console

* [AAE-10457] Storybook delete unnecessary code from authentication mock service

* [AAE-10457] Storybook change stories names

* [AAE-10457] Storybook change module imports

* [AAE-10457] Change mock services names

* [AAE-10457] Change models path to relative

* [AAE-10457] Change user avatar and delete unnecessary images

* [AAE-10457] Insert missing semicolon

lib/core/src/lib/userinfo/components/mocks/authentication.service.mock.ts

@@ -0,0 +1,76 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Inject, Injectable } from '@angular/core';
+import { ReplaySubject } from 'rxjs';
+import { AlfrescoApiService } from './../../../services/alfresco-api.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthenticationServiceMock {
+    onLogin: ReplaySubject<any> = new ReplaySubject<any>(1);
+
+    onLogout: ReplaySubject<any> = new ReplaySubject<any>(1);
+
+    constructor(
+        private alfrescoApi: AlfrescoApiService,
+        @Inject('MODE') public loginMode: string
+    ) {}
+
+    isLoggedIn(): boolean {
+        return true;
+    }
+
+    isLoggedInWith(provider: string): boolean {
+        if (provider === 'BPM') {
+            return this.isBpmLoggedIn();
+        } else if (provider === 'ECM') {
+            return this.isEcmLoggedIn();
+        } else {
+            return this.isLoggedIn();
+        }
+    }
+
+    isKerberosEnabled(): boolean {
+        return this.loginMode === 'all';
+    }
+
+    isOauth(): boolean {
+        return this.loginMode === 'default' || this.loginMode === 'defaultEcm';
+    }
+
+    isECMProvider(): boolean {
+        return this.alfrescoApi.getInstance().isEcmConfiguration();
+    }
+
+    isBPMProvider(): boolean {
+        return this.alfrescoApi.getInstance().isBpmConfiguration();
+    }
+
+    isALLProvider(): boolean {
+        return this.loginMode === 'all';
+    }
+
+    isEcmLoggedIn(): boolean {
+        return this.loginMode === 'ecm' || this.loginMode === 'defaultEcm';
+    }
+
+    isBpmLoggedIn(): boolean {
+        return this.loginMode === 'bpm';
+    }
+}

lib/core/src/lib/userinfo/components/mocks/user.service.mock.ts

@@ -0,0 +1,76 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+    BpmUserModel,
+    EcmUserModel,
+    IdentityUserModel
+} from './../../../models';
+import { of } from 'rxjs';
+
+export class PeopleContentServiceMock {
+    private fakeEcmUser = new EcmUserModel({
+        firstName: 'John',
+        lastName: 'Ecm',
+        avatarId: 'fake-avatar-id',
+        email: 'john.ecm@gmail.com',
+        jobTitle: 'Product Manager'
+    });
+
+    getCurrentUserInfo = () => of(this.fakeEcmUser);
+
+    getUserProfileImage = () => './assets/images/alfresco-logo.svg';
+}
+
+export class EcmUserServiceMock {
+    private fakeEcmUser = new EcmUserModel({
+        firstName: 'John',
+        lastName: 'Ecm',
+        avatarId: 'fake-avatar-id',
+        email: 'john.ecm@gmail.com',
+        jobTitle: 'Product Manager'
+    });
+
+    getCurrentUserInfo = () => of(this.fakeEcmUser);
+
+    getUserProfileImage = () => './assets/images/alfresco-logo.svg';
+}
+
+export class BpmUserServiceMock {
+    private fakeBpmUser = new BpmUserModel({
+        email: 'john.bpm@gmail.com',
+        firstName: 'John',
+        lastName: 'Bpm',
+        pictureId: 12,
+        tenantName: 'Name of Tenant'
+    });
+
+    getCurrentUserInfo = () => of(this.fakeBpmUser);
+
+    getCurrentUserProfileImage = () => './assets/images/alfresco-logo.svg';
+}
+
+export class IdentityUserServiceMock {
+    private fakeIdentityUser = {
+        familyName: 'Identity',
+        givenName: 'John',
+        email: 'john.identity@gmail.com',
+        username: 'johnyIdentity99'
+    };
+
+    getCurrentUserInfo = (): IdentityUserModel => this.fakeIdentityUser;
+}

lib/core/src/lib/userinfo/components/user-info.component.stories.ts

@@ -0,0 +1,202 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+    Meta,
+    moduleMetadata,
+    Story,
+    componentWrapperDecorator
+} from '@storybook/angular';
+import { CoreStoryModule } from '../../testing/core.story.module';
+import { UserInfoComponent } from './user-info.component';
+import { UserInfoModule } from '../userinfo.module';
+import { PeopleContentService } from './../../services/people-content.service';
+import { BpmUserService } from './../../services/bpm-user.service';
+import { IdentityUserService } from './../../services/identity-user.service';
+import { AuthenticationService } from './../../services/authentication.service';
+import { AuthenticationServiceMock } from './mocks/authentication.service.mock';
+import {
+    BpmUserServiceMock,
+    IdentityUserServiceMock,
+    PeopleContentServiceMock
+} from './mocks/user.service.mock';
+
+export default {
+    component: UserInfoComponent,
+    title: 'Core/User Info/User Info',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, UserInfoModule],
+            providers: [
+                {
+                    provide: PeopleContentService,
+                    useClass: PeopleContentServiceMock
+                },
+                {
+                    provide: BpmUserService,
+                    useClass: BpmUserServiceMock
+                },
+                {
+                    provide: IdentityUserService,
+                    useClass: IdentityUserServiceMock
+                },
+                {
+                    provide: AuthenticationService,
+                    useClass: AuthenticationServiceMock
+                }
+            ]
+        }),
+        componentWrapperDecorator(
+            (story) =>
+                `<div style="height: 100vh; display: flex; align-items: center; justify-content: center;">
+                    ${story}
+                </div>`
+        )
+    ],
+    argTypes: {
+        menuPositionX: {
+            description:
+                'Material Angular menu horizontal position in regard to User Info',
+            control: 'radio',
+            options: ['before', 'after'],
+            defaultValue: 'after',
+            table: {
+                type: { summary: 'MenuPositionX' },
+                defaultValue: { summary: 'after' }
+            }
+        },
+        menuPositionY: {
+            description:
+                'Material Angular menu vertical position in regard to User Info',
+            control: 'radio',
+            options: ['above', 'below'],
+            defaultValue: 'below',
+            table: {
+                type: { summary: 'MenuPositionY' },
+                defaultValue: { summary: 'below' }
+            }
+        },
+        showName: {
+            description:
+                'Determines if name should be shown next to user avatar',
+            control: 'boolean',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: true }
+            }
+        },
+        namePosition: {
+            description: 'User name position in regard to avatar',
+            control: 'radio',
+            options: ['left', 'right'],
+            defaultValue: 'right',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'right' }
+            }
+        },
+        ecmBackgroundImage: {
+            description: 'Menu background banner image for ACS users',
+            control: {
+                disable: true
+            },
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: './assets/images/ecm-background.png' }
+            }
+        },
+        bpmBackgroundImage: {
+            description: 'Menu background banner image for APS users',
+            control: {
+                disable: true
+            },
+            table: {
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: './assets/images/bpm-background.png'
+                }
+            }
+        }
+    }
+} as Meta;
+
+const template: Story<UserInfoComponent> = (args: UserInfoComponent) => ({
+    props: args
+});
+
+export const LoginWithSSO = template.bind({});
+LoginWithSSO.decorators = [
+    moduleMetadata({
+        providers: [
+            {
+                provide: 'MODE',
+                useValue: 'default'
+            }
+        ]
+    })
+];
+
+export const LoginWithSSOAndACS = template.bind({});
+LoginWithSSOAndACS.decorators = [
+    moduleMetadata({
+        providers: [
+            {
+                provide: 'MODE',
+                useValue: 'defaultEcm'
+            }
+        ]
+    })
+];
+
+export const LoginWithAPSAndACS = template.bind({});
+LoginWithAPSAndACS.decorators = [
+    moduleMetadata({
+        providers: [
+            {
+                provide: 'MODE',
+                useValue: 'all'
+            }
+        ]
+    })
+];
+
+export const LoginWithACS = template.bind({});
+LoginWithACS.decorators = [
+    moduleMetadata({
+        providers: [
+            {
+                provide: 'MODE',
+                useValue: 'ecm'
+            }
+        ]
+    })
+];
+
+export const LoginWithAPS = template.bind({});
+LoginWithAPS.decorators = [
+    moduleMetadata({
+        providers: [
+            {
+                provide: 'MODE',
+                useValue: 'bpm'
+            }
+        ]
+    })
+];

lib/core/src/lib/userinfo/userinfo.module.ts

@@ -18,15 +18,20 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
-
-import { MaterialModule } from '../material.module';
 import { PipeModule } from '../pipes/pipe.module';
 import { UserInfoComponent } from './components/user-info.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
 
 @NgModule({
     imports: [
         CommonModule,
-        MaterialModule,
+        MatButtonModule,
+        MatMenuModule,
+        MatTabsModule,
+        MatCardModule,
         TranslateModule,
         PipeModule
     ],