AAE-23287 migrate to storybook 8 (#9867)

* Fixed core unit test and excluded instable ones

* AAE-23287 migrate to storybook 8

---------

Co-authored-by: Vito Albano <vito.albano@hyland.com>

lib/process-services-cloud/.storybook/manager.js

@@ -1,6 +1,6 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import alfrescoTheme from '../../../.storybook/alfrescoTheme';
 
 addons.setConfig({
-  theme: alfrescoTheme,
+    theme: alfrescoTheme
 });

lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.stories.ts

@@ -15,24 +15,27 @@
  * limitations under the License.
  */
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { AppDetailsCloudComponent } from './app-details-cloud.component';
 import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
 import { AppListCloudModule } from '../app-list-cloud.module';
 import { fakeApplicationInstance } from '../mock/app-model.mock';
+import { importProvidersFrom } from '@angular/core';
 
 export default {
     component: AppDetailsCloudComponent,
     title: 'Process Services Cloud/App List Cloud/App Details Cloud',
     decorators: [
         moduleMetadata({
-            imports: [ProcessServicesCloudStoryModule, AppListCloudModule]
+            imports: [AppListCloudModule]
+        }),
+        applicationConfig({
+            providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]
         })
     ],
     argTypes: {
         applicationInstance: {
             control: 'object',
-            defaultValue: fakeApplicationInstance[0],
             table: {
                 type: { summary: 'ApplicationInstanceModel' }
             }
@@ -42,11 +45,14 @@ export default {
             description: 'Emitted when an app entry is clicked.',
             table: { category: 'Actions' }
         }
+    },
+    args: {
+        applicationInstance: fakeApplicationInstance[0]
     }
-} as Meta;
+} as Meta<AppDetailsCloudComponent>;
 
-const template: Story<AppDetailsCloudComponent> = (args: AppDetailsCloudComponent) => ({
+const template: StoryFn<AppDetailsCloudComponent> = (args) => ({
     props: args
 });
 
-export const appDetailsCloud = template.bind({});
+export const AppDetailsCloud = template.bind({});

lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.stories.ts

@@ -15,24 +15,27 @@
  * limitations under the License.
  */
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
 import { AppListCloudModule } from '../app-list-cloud.module';
 import { AppListCloudComponent } from './app-list-cloud.component';
+import { importProvidersFrom } from '@angular/core';
 
 export default {
     component: AppListCloudComponent,
     title: 'Process Services Cloud/App List Cloud/App List Cloud',
     decorators: [
         moduleMetadata({
-            imports: [ProcessServicesCloudStoryModule, AppListCloudModule]
+            imports: [AppListCloudModule]
+        }),
+        applicationConfig({
+            providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]
         })
     ],
     argTypes: {
         layoutType: {
             control: 'radio',
             options: ['GRID', 'LIST'],
-            defaultValue: 'GRID',
             description: 'Defines the layout of the apps.',
             table: {
                 type: { summary: 'string' },
@@ -44,11 +47,14 @@ export default {
             description: 'Emitted when an app entry is clicked.',
             table: { category: 'Actions' }
         }
+    },
+    args: {
+        layoutType: 'GRID'
     }
-} as Meta;
+} as Meta<AppListCloudComponent>;
 
-const template: Story<AppListCloudComponent> = (args) => ({
+const template: StoryFn<AppListCloudComponent> = (args) => ({
     props: args
 });
 
-export const appListCloud = template.bind({});
+export const AppListCloud = template.bind({});

lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.stories.ts

@@ -15,24 +15,27 @@
  * limitations under the License.
  */
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
 import { mockFilterProperty } from '../mock/date-range-filter.mock';
 import { ProcessCommonModule } from '../process-common.module';
 import { DateRangeFilterComponent } from './date-range-filter.component';
+import { importProvidersFrom } from '@angular/core';
 
 export default {
     component: DateRangeFilterComponent,
     title: 'Process Services Cloud/Process Common/Date Range Filter',
     decorators: [
         moduleMetadata({
-            imports: [ProcessServicesCloudStoryModule, ProcessCommonModule]
+            imports: [ProcessCommonModule]
+        }),
+        applicationConfig({
+            providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]
         })
     ],
     argTypes: {
         processFilterProperty: {
             control: 'object',
-            defaultValue: mockFilterProperty,
             table: {
                 type: { summary: 'ApplicationInstanceModel' }
             }
@@ -51,11 +54,14 @@ export default {
             action: 'dateTypeChange',
             table: { category: 'Actions' }
         }
+    },
+    args: {
+        processFilterProperty: mockFilterProperty
     }
-} as Meta;
+} as Meta<DateRangeFilterComponent>;
 
-const template: Story<DateRangeFilterComponent> = (args: DateRangeFilterComponent) => ({
+const template: StoryFn<DateRangeFilterComponent> = (args) => ({
     props: args
 });
 
-export const dateRangeFilter = template.bind({});
+export const DateRangeFilter = template.bind({});

lib/process-services-cloud/src/lib/common/mock/date-range-filter.mock.ts

@@ -26,7 +26,6 @@ export const mockFilterProperty = {
         _startTo: new Date().toISOString()
     },
     type: 'dateRange',
-    options: null,
     attributes: {
         dateType: 'createdDateType',
         from: '_startFrom',

lib/process-services-cloud/src/lib/form/components/form-cloud.component.ts

@@ -40,8 +40,8 @@ import { TaskDetailsCloudModel } from '../../task/start-task/models/task-details
 import { MatDialog } from '@angular/material/dialog';
 import { v4 as uuidGeneration } from 'uuid';
 import { FormCloudDisplayMode, FormCloudDisplayModeConfiguration } from '../../services/form-fields.interfaces';
-import { DisplayModeService } from '../public-api';
 import { FormCloudSpinnerService } from '../services/spinner/form-cloud-spinner.service';
+import { DisplayModeService } from '../services/display-mode.service';
 
 @Component({
     selector: 'adf-cloud-form',

lib/process-services-cloud/src/lib/form/components/form-definition-selector-cloud.component.stories.ts

@@ -15,28 +15,29 @@
  * limitations under the License.
  */
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { FormCloudModule } from '../form-cloud.module';
 import { FormDefinitionSelectorCloudComponent } from './form-definition-selector-cloud.component';
 import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
 import { FormDefinitionSelectorCloudService } from '../services/form-definition-selector-cloud.service';
 import { FormDefinitionSelectorCloudServiceMock } from '../mocks/form-definition-selector-cloud.service.mock';
+import { importProvidersFrom } from '@angular/core';
 
 export default {
     component: FormDefinitionSelectorCloudComponent,
     title: 'Process Services Cloud/Form Cloud/Form Definition Selector Cloud',
     decorators: [
         moduleMetadata({
-            imports: [ProcessServicesCloudStoryModule, FormCloudModule],
-            providers: [
-                { provide: FormDefinitionSelectorCloudService, useClass: FormDefinitionSelectorCloudServiceMock }
-            ]
+            imports: [FormCloudModule],
+            providers: [{ provide: FormDefinitionSelectorCloudService, useClass: FormDefinitionSelectorCloudServiceMock }]
+        }),
+        applicationConfig({
+            providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]
         })
     ],
     argTypes: {
         appName: {
             control: 'text',
-            defaultValue: '',
             description: 'Name of the application. If specified, this shows the users who have access to the app.',
             table: {
                 type: { summary: 'string' },
@@ -48,11 +49,14 @@ export default {
             description: 'Emitted when a form is selected.',
             table: { category: 'Actions' }
         }
+    },
+    args: {
+        appName: ''
     }
-} as Meta;
+} as Meta<FormDefinitionSelectorCloudComponent>;
 
-const template: Story<FormDefinitionSelectorCloudComponent> = (args: FormDefinitionSelectorCloudComponent) => ({
+const template: StoryFn<FormDefinitionSelectorCloudComponent> = (args) => ({
     props: args
 });
 
-export const formDefinitionSelectorCloud = template.bind({});
+export const FormDefinitionSelectorCloud = template.bind({});

lib/process-services-cloud/src/lib/group/components/group-cloud.component.stories.ts

@@ -15,29 +15,25 @@
  * limitations under the License.
  */
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { GroupCloudModule } from '../group-cloud.module';
 import { GroupCloudComponent } from './group-cloud.component';
 import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
 import { IdentityGroupService } from '../services/identity-group.service';
-import {
-    IdentityGroupServiceMock,
-    mockFoodGroups,
-    mockMeatChicken,
-    mockVegetableAubergine
-} from '../mock/group-cloud.mock';
-import { FormControl } from '@angular/forms';
-
-const defaultFormControl = new FormControl({ value: '', disabled: false });
+import { IdentityGroupServiceMock, mockFoodGroups, mockMeatChicken, mockVegetableAubergine } from '../mock/group-cloud.mock';
+import { importProvidersFrom } from '@angular/core';
 
 export default {
     component: GroupCloudComponent,
     title: 'Process Services Cloud/Group Cloud/Group Cloud',
     decorators: [
         moduleMetadata({
-            imports: [ProcessServicesCloudStoryModule, GroupCloudModule],
+            imports: [GroupCloudModule]
+        }),
+        applicationConfig({
             providers: [
-                { provide: IdentityGroupService, useClass: IdentityGroupServiceMock }
+                { provide: IdentityGroupService, useClass: IdentityGroupServiceMock },
+                importProvidersFrom(ProcessServicesCloudStoryModule)
             ]
         })
     ],
@@ -45,7 +41,6 @@ export default {
         appName: {
             control: 'text',
             description: 'Name of the application. If specified this shows the groups who have access to the app.',
-            defaultValue: 'app',
             table: {
                 type: { summary: 'string' }
             }
@@ -53,7 +48,6 @@ export default {
         title: {
             control: 'text',
             description: 'Title of the field.',
-            defaultValue: 'Groups',
             table: {
                 type: { summary: 'string' }
             }
@@ -62,7 +56,6 @@ export default {
             control: 'radio',
             options: ['single', 'multiple'],
             description: 'Group selection mode.',
-            defaultValue: 'single',
             table: {
                 type: { summary: 'ComponentSelectionMode' },
                 defaultValue: { summary: 'single' }
@@ -70,8 +63,8 @@ export default {
         },
         preSelectGroups: {
             control: 'object',
-            description: 'Array of groups to be pre-selected. This pre-selects all groups in multi selection mode and only the first group of the array in single selection mode.',
-            defaultValue: [],
+            description:
+                'Array of groups to be pre-selected. This pre-selects all groups in multi selection mode and only the first group of the array in single selection mode.',
             table: {
                 type: { summary: 'IdentityGroupModel[]' },
                 defaultValue: { summary: '[]' }
@@ -79,10 +72,10 @@ export default {
         },
         validate: {
             control: 'boolean',
-            description: 'This flag enables the validation on the preSelectGroups passed as input.\n\n'+
-            'In case the flag is true the components call the identity service to verify the validity of the information passed as input.\n\n'+
-            'Otherwise, no check will be done.',
-            defaultValue: false,
+            description:
+                'This flag enables the validation on the preSelectGroups passed as input.\n\n' +
+                'In case the flag is true the components call the identity service to verify the validity of the information passed as input.\n\n' +
+                'Otherwise, no check will be done.',
             table: {
                 type: { summary: 'boolean' },
                 defaultValue: { summary: 'false' }
@@ -91,7 +84,6 @@ export default {
         readOnly: {
             control: 'boolean',
             description: 'Show the info in readonly mode.',
-            defaultValue: false,
             table: {
                 type: { summary: 'boolean' },
                 defaultValue: { summary: 'false' }
@@ -100,7 +92,6 @@ export default {
         required: {
             control: 'boolean',
             description: 'Mark this field as required.',
-            defaultValue: false,
             table: {
                 type: { summary: 'boolean' },
                 defaultValue: { summary: 'false' }
@@ -109,7 +100,6 @@ export default {
         groupChipsCtrl: {
             control: 'object',
             description: 'FormControl to list of group.',
-            mapping: { default: defaultFormControl },
             table: {
                 type: { summary: 'FormControl' },
                 defaultValue: { summary: 'new FormControl({ value: \'\', disabled: false })' },
@@ -119,7 +109,6 @@ export default {
         searchGroupsControl: {
             control: 'object',
             description: 'FormControl to search the group.',
-            mapping: { default: defaultFormControl },
             table: {
                 type: { summary: 'FormControl' },
                 defaultValue: { summary: 'new FormControl({ value: \'\', disabled: false })' },
@@ -129,7 +118,6 @@ export default {
         roles: {
             control: 'object',
             description: 'Role names of the groups to be listed.',
-            defaultValue: [],
             table: {
                 type: { summary: 'string[]' },
                 defaultValue: { summary: '[]' }
@@ -155,38 +143,41 @@ export default {
             description: 'Emitted when an warning occurs.',
             table: { category: 'Actions' }
         }
+    },
+    args: {
+        appName: 'app',
+        title: 'Groups',
+        mode: 'single',
+        preSelectGroups: [],
+        validate: false,
+        readOnly: false,
+        required: false,
+        roles: []
     }
-} as Meta;
+} as Meta<GroupCloudComponent>;
 
-const template: Story<GroupCloudComponent> = (args: GroupCloudComponent) => ({
+const template: StoryFn<GroupCloudComponent> = (args) => ({
     props: args
 });
 
-export const defaultGroupCloud = template.bind({});
-defaultGroupCloud.args = {
-    groupChipsCtrl: 'default',
-    searchGroupsControl: 'default'
-};
+export const DefaultGroupCloud = template.bind({});
 
-export const validPreselectedGroups = template.bind({});
-validPreselectedGroups.args = {
-    ...defaultGroupCloud.args,
+export const ValidPreselectedGroups = template.bind({});
+ValidPreselectedGroups.args = {
     validate: true,
     mode: 'multiple',
     preSelectGroups: mockFoodGroups
 };
 
-export const mandatoryPreselectedGroups = template.bind({});
-mandatoryPreselectedGroups.args = {
-    ...defaultGroupCloud.args,
+export const MandatoryPreselectedGroups = template.bind({});
+MandatoryPreselectedGroups.args = {
     validate: true,
     mode: 'multiple',
     preSelectGroups: [mockVegetableAubergine, { ...mockMeatChicken, readonly: true }]
 };
 
-export const invalidPreselectedGroups = template.bind({});
-invalidPreselectedGroups.args = {
-    ...defaultGroupCloud.args,
+export const InvalidPreselectedGroups = template.bind({});
+InvalidPreselectedGroups.args = {
     validate: true,
     mode: 'multiple',
     preSelectGroups: [{ id: 'invalid-group', name: 'Invalid Group' }]

lib/process-services-cloud/src/lib/people/components/people-cloud.component.stories.ts

@@ -15,30 +15,25 @@
  * limitations under the License.
  */
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { PeopleCloudComponent } from './people-cloud.component';
 import { PeopleCloudModule } from '../people-cloud.module';
 import { ProcessServicesCloudStoryModule } from '../../testing/process-services-cloud-story.module';
 import { IdentityUserService } from '../services/identity-user.service';
-import {
-    IdentityUserServiceMock,
-    mockFoodUsers,
-    mockKielbasaSausage,
-    mockShepherdsPie,
-    mockYorkshirePudding
-} from '../mock/people-cloud.mock';
-import { FormControl } from '@angular/forms';
-
-const defaultFormControl = new FormControl({ value: '', disabled: false });
+import { IdentityUserServiceMock, mockFoodUsers, mockKielbasaSausage, mockShepherdsPie, mockYorkshirePudding } from '../mock/people-cloud.mock';
+import { importProvidersFrom } from '@angular/core';
 
 export default {
     component: PeopleCloudComponent,
     title: 'Process Services Cloud/People Cloud/People Cloud',
     decorators: [
         moduleMetadata({
-            imports: [ProcessServicesCloudStoryModule, PeopleCloudModule],
+            imports: [PeopleCloudModule]
+        }),
+        applicationConfig({
             providers: [
-                { provide: IdentityUserService, useClass: IdentityUserServiceMock }
+                { provide: IdentityUserService, useClass: IdentityUserServiceMock },
+                importProvidersFrom(ProcessServicesCloudStoryModule)
             ]
         })
     ],
@@ -46,7 +41,6 @@ export default {
         appName: {
             control: 'text',
             description: 'Name of the application. If specified, this shows the users who have access to the app.',
-            defaultValue: 'app',
             table: {
                 type: { summary: 'string' }
             }
@@ -55,7 +49,6 @@ export default {
             control: 'radio',
             options: ['single', 'multiple'],
             description: 'User selection mode.',
-            defaultValue: 'single',
             table: {
                 type: { summary: 'ComponentSelectionMode' },
                 defaultValue: { summary: 'single' }
@@ -64,7 +57,6 @@ export default {
         roles: {
             control: 'object',
             description: 'Role names of the users to be listed.',
-            defaultValue: [],
             table: {
                 type: { summary: 'string[]' },
                 defaultValue: { summary: '[]' }
@@ -72,10 +64,10 @@ export default {
         },
         validate: {
             control: 'boolean',
-            description: 'This flag enables the validation on the preSelectUsers passed as input.\n\n'+
-            'In case the flag is true the components call the identity service to verify the validity of the information passed as input.\n\n'+
-            'Otherwise, no check will be done.',
-            defaultValue: false,
+            description:
+                'This flag enables the validation on the preSelectUsers passed as input.\n\n' +
+                'In case the flag is true the components call the identity service to verify the validity of the information passed as input.\n\n' +
+                'Otherwise, no check will be done.',
             table: {
                 type: { summary: 'boolean' },
                 defaultValue: { summary: 'false' }
@@ -84,7 +76,6 @@ export default {
         readOnly: {
             control: 'boolean',
             description: 'Show the info in readonly mode.',
-            defaultValue: false,
             table: {
                 type: { summary: 'boolean' },
                 defaultValue: { summary: 'false' }
@@ -93,7 +84,6 @@ export default {
         required: {
             control: 'boolean',
             description: 'Mark this field as required.',
-            defaultValue: false,
             table: {
                 type: { summary: 'boolean' },
                 defaultValue: { summary: 'false' }
@@ -101,8 +91,8 @@ export default {
         },
         preSelectUsers: {
             control: 'object',
-            description: 'Array of users to be pre-selected. All users in the array are pre-selected in multi selection mode, but only the first user is pre-selected in single selection mode. Mandatory properties are: id, email, username',
-            defaultValue: [],
+            description:
+                'Array of users to be pre-selected. All users in the array are pre-selected in multi selection mode, but only the first user is pre-selected in single selection mode. Mandatory properties are: id, email, username',
             table: {
                 type: { summary: 'IdentityUserModel[]' },
                 defaultValue: { summary: '[]' }
@@ -111,7 +101,6 @@ export default {
         excludedUsers: {
             control: 'object',
             description: 'Array of users to be excluded. Mandatory properties are: id, email, username',
-            defaultValue: [],
             table: {
                 type: { summary: 'IdentityUserModel[]' },
                 defaultValue: { summary: '[]' }
@@ -120,7 +109,6 @@ export default {
         groupsRestriction: {
             control: 'object',
             description: 'Array of groups to restrict user searches. Mandatory property is group name',
-            defaultValue: [],
             table: {
                 type: { summary: 'string[]' },
                 defaultValue: { summary: '[]' }
@@ -129,7 +117,6 @@ export default {
         userChipsCtrl: {
             control: 'object',
             description: 'FormControl to list of users.',
-            mapping: { default: defaultFormControl },
             table: {
                 type: { summary: 'FormControl' },
                 defaultValue: { summary: 'new FormControl({ value: \'\', disabled: false })' },
@@ -139,7 +126,6 @@ export default {
         searchUserCtrl: {
             control: 'object',
             description: 'FormControl to search the user.',
-            mapping: { default: defaultFormControl },
             table: {
                 type: { summary: 'FormControl' },
                 defaultValue: { summary: 'new FormControl({ value: \'\', disabled: false })' },
@@ -173,60 +159,58 @@ export default {
             description: 'Emitted when an warning occurs.',
             table: { category: 'Actions' }
         }
+    },
+    args: {
+        appName: 'app',
+        mode: 'single',
+        roles: [],
+        validate: false,
+        readOnly: false,
+        required: false,
+        preSelectUsers: [],
+        excludedUsers: [],
+        groupsRestriction: []
     }
-} as Meta;
+} as Meta<PeopleCloudComponent>;
 
-const template: Story<PeopleCloudComponent> = (args: PeopleCloudComponent) => ({
+const template: StoryFn<PeopleCloudComponent> = args => ({
     props: args
 });
 
-export const defaultPeopleCloud = template.bind({});
-defaultPeopleCloud.args = {
-    userChipsCtrl: 'default',
-    searchUserCtrl: 'default'
-};
+export const DefaultPeopleCloud = template.bind({});
 
-export const validPreselectedUsers = template.bind({});
-validPreselectedUsers.args = {
-    ...defaultPeopleCloud.args,
+export const ValidPreselectedUsers = template.bind({});
+ValidPreselectedUsers.args = {
     validate: true,
     mode: 'multiple',
     preSelectUsers: mockFoodUsers
 };
 
-export const mandatoryPreselectedUsers = template.bind({});
-mandatoryPreselectedUsers.args = {
-    ...defaultPeopleCloud.args,
+export const MandatoryPreselectedUsers = template.bind({});
+MandatoryPreselectedUsers.args = {
     validate: true,
     mode: 'multiple',
     preSelectUsers: [{ ...mockKielbasaSausage, readonly: true }, mockShepherdsPie]
 };
 
-export const invalidPreselectedUsers = template.bind({});
-invalidPreselectedUsers.args = {
-    ...defaultPeopleCloud.args,
+export const InvalidPreselectedUsers = template.bind({});
+InvalidPreselectedUsers.args = {
     validate: true,
     mode: 'multiple',
     preSelectUsers: [{ id: 'invalid-user', username: 'Invalid User', firstName: 'Invalid', lastName: 'User', email: 'invalid@xyz.com' }]
 };
 
-export const excludedUsers = template.bind({});
-excludedUsers.args = {
-    ...defaultPeopleCloud.args,
-    excludedUsers: [
-        mockKielbasaSausage,
-        mockYorkshirePudding
-    ]
+export const ExcludedUsers = template.bind({});
+ExcludedUsers.args = {
+    excludedUsers: [mockKielbasaSausage, mockYorkshirePudding]
 };
 
-export const noUsers = template.bind({});
-noUsers.args = {
-    ...defaultPeopleCloud.args,
+export const NoUsers = template.bind({});
+NoUsers.args = {
     excludedUsers: mockFoodUsers
 };
 
-export const invalidOrEmptyAppName = template.bind({});
-invalidOrEmptyAppName.args = {
-    ...defaultPeopleCloud.args,
+export const InvalidOrEmptyAppName = template.bind({});
+InvalidOrEmptyAppName.args = {
     appName: null
 };

lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.stories.ts

@@ -15,20 +15,26 @@
  * limitations under the License.
  */
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { ProcessHeaderCloudModule } from '../process-header-cloud.module';
 import { ProcessServicesCloudStoryModule } from '../../../testing/process-services-cloud-story.module';
 import { ProcessHeaderCloudComponent } from './process-header-cloud.component';
 import { ProcessCloudServiceMock } from '../../mock/process-cloud.service.mock';
 import { ProcessCloudService } from '../../services/process-cloud.service';
+import { importProvidersFrom } from '@angular/core';
 
 export default {
     component: ProcessHeaderCloudComponent,
     title: 'Process Services Cloud/Process Cloud/Process Header Cloud/Process Header Cloud',
     decorators: [
         moduleMetadata({
-            imports: [ProcessServicesCloudStoryModule, ProcessHeaderCloudModule],
-            providers: [{ provide: ProcessCloudService, useClass: ProcessCloudServiceMock }]
+            imports: [ProcessHeaderCloudModule],
+        }),
+        applicationConfig({
+            providers: [
+                { provide: ProcessCloudService, useClass: ProcessCloudServiceMock },
+                importProvidersFrom(ProcessServicesCloudStoryModule)
+            ]
         })
     ],
     argTypes: {
@@ -49,32 +55,32 @@ export default {
             }
         }
     }
-} as Meta;
+} as Meta<ProcessHeaderCloudComponent>;
 
-const template: Story<ProcessHeaderCloudComponent> = (args: ProcessHeaderCloudComponent) => ({
+const template: StoryFn<ProcessHeaderCloudComponent> = (args) => ({
     props: args
 });
 
-export const defaultProcessHeaderCloud = template.bind({});
-defaultProcessHeaderCloud.args = {
+export const DefaultProcessHeaderCloud = template.bind({});
+DefaultProcessHeaderCloud.args = {
     appName: 'app',
     processInstanceId: 'mock-process-id'
 };
 
-export const noParentAndBusinessAndName = template.bind({});
-noParentAndBusinessAndName.args = {
+export const NoParentAndBusinessAndName = template.bind({});
+NoParentAndBusinessAndName.args = {
     appName: 'app-placeholders',
     processInstanceId: 'mock-process-id'
 };
 
-export const invalidOrMissingAppName = template.bind({});
-invalidOrMissingAppName.args = {
+export const InvalidOrMissingAppName = template.bind({});
+InvalidOrMissingAppName.args = {
     appName: undefined,
     processInstanceId: 'mock-process-id'
 };
 
-export const invalidOrMissingProcessInstanceID = template.bind({});
-invalidOrMissingProcessInstanceID.args = {
+export const InvalidOrMissingProcessInstanceID = template.bind({});
+InvalidOrMissingProcessInstanceID.args = {
     appName: 'app',
     processInstanceId: undefined
 };

lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.stories.ts

@@ -16,16 +16,20 @@
  */
 
 import { RichTextEditorModule } from './rich-text-editor.module';
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { ProcessServicesCloudStoryModule } from '../testing/process-services-cloud-story.module';
 import { RichTextEditorComponent } from './rich-text-editor.component';
+import { importProvidersFrom } from '@angular/core';
 
 export default {
     component: RichTextEditorComponent,
     title: 'Process Services Cloud/Rich Text Editor',
     decorators: [
         moduleMetadata({
-            imports: [ProcessServicesCloudStoryModule, RichTextEditorModule]
+            imports: [RichTextEditorModule]
+        }),
+        applicationConfig({
+            providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]
         })
     ],
     argTypes: {
@@ -37,9 +41,9 @@ export default {
             }
         }
     }
-} as Meta;
+} as Meta<RichTextEditorComponent>;
 
-const template: Story<RichTextEditorComponent> = (args: RichTextEditorComponent) => ({
+const template: StoryFn<RichTextEditorComponent> = (args) => ({
     props: args,
     template: `
     <adf-cloud-rich-text-editor [data]=data #editor>
@@ -50,8 +54,8 @@ const template: Story<RichTextEditorComponent> = (args: RichTextEditorComponent)
     `
 });
 
-export const defaultRichTextEditor = template.bind({});
-defaultRichTextEditor.args = {
+export const DefaultRichTextEditor = template.bind({});
+DefaultRichTextEditor.args = {
     data: {
         time: 1550476186479,
         blocks: [

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.stories.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { FormCloudService } from '../../../form/public-api';
 import { TaskCloudService } from '../../services/task-cloud.service';
 import { TaskFormModule } from '../task-form.module';
@@ -23,17 +23,23 @@ import { TaskFormCloudComponent } from './task-form-cloud.component';
 import { TaskCloudServiceMock } from '../../mock/task-cloud.service.mock';
 import { FormCloudServiceMock } from '../../../form/mocks/form-cloud.service.mock';
 import { ProcessServicesCloudStoryModule } from '../../../testing/process-services-cloud-story.module';
+import { importProvidersFrom } from '@angular/core';
 
 export default {
     component: TaskFormCloudComponent,
     title: 'Process Services Cloud/Task Cloud/Task Form/Task Form Cloud',
     decorators: [
         moduleMetadata({
-            imports: [ProcessServicesCloudStoryModule, TaskFormModule],
+            imports: [TaskFormModule],
             providers: [
                 { provide: TaskCloudService, useClass: TaskCloudServiceMock },
                 { provide: FormCloudService, useClass: FormCloudServiceMock }
             ]
+        }),
+        applicationConfig({
+            providers: [
+                importProvidersFrom(ProcessServicesCloudStoryModule)
+            ]
         })
     ],
     argTypes: {
@@ -148,26 +154,26 @@ export default {
             table: { category: 'Actions' }
         }
     }
-} as Meta;
+} as Meta<TaskFormCloudComponent>;
 
-const template: Story<TaskFormCloudComponent> = (args: TaskFormCloudComponent) => ({
+const template: StoryFn<TaskFormCloudComponent> = (args) => ({
     props: args
 });
 
-export const defaultTaskFormCloud = template.bind({});
-defaultTaskFormCloud.args = {
+export const DefaultTaskFormCloud = template.bind({});
+DefaultTaskFormCloud.args = {
     appName: 'app',
     taskId: 'mock-task-with-form'
 };
 
-export const invalidOrMissingApp = template.bind({});
-invalidOrMissingApp.args = {
-    ...defaultTaskFormCloud.args,
+export const InvalidOrMissingApp = template.bind({});
+InvalidOrMissingApp.args = {
+    ...DefaultTaskFormCloud.args,
     appName: undefined
 };
 
-export const invalidOrMissingTaskId = template.bind({});
-invalidOrMissingTaskId.args = {
-    ...defaultTaskFormCloud.args,
+export const InvalidOrMissingTaskId = template.bind({});
+InvalidOrMissingTaskId.args = {
+    ...DefaultTaskFormCloud.args,
     taskId: undefined
 };

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.stories.ts

@@ -15,22 +15,24 @@
  * limitations under the License.
  */
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { applicationConfig, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { TaskHeaderCloudModule } from '../task-header-cloud.module';
 import { TaskHeaderCloudComponent } from './task-header-cloud.component';
 import { TaskCloudService } from '../../services/task-cloud.service';
 import { TaskCloudServiceMock } from '../../mock/task-cloud.service.mock';
 import { ProcessServicesCloudStoryModule } from '../../../testing/process-services-cloud-story.module';
+import { importProvidersFrom } from '@angular/core';
 
 export default {
     component: TaskHeaderCloudComponent,
     title: 'Process Services Cloud/Task Cloud/Task Header Cloud/Task Header Cloud',
     decorators: [
         moduleMetadata({
-            imports: [ProcessServicesCloudStoryModule, TaskHeaderCloudModule],
-            providers: [
-                { provide: TaskCloudService, useClass: TaskCloudServiceMock }
-            ]
+            imports: [TaskHeaderCloudModule],
+            providers: [{ provide: TaskCloudService, useClass: TaskCloudServiceMock }]
+        }),
+        applicationConfig({
+            providers: [importProvidersFrom(ProcessServicesCloudStoryModule)]
         })
     ],
     argTypes: {
@@ -75,62 +77,62 @@ export default {
             table: { category: 'Actions' }
         }
     }
-} as Meta;
+} as Meta<TaskHeaderCloudComponent>;
 
-const template: Story<TaskHeaderCloudComponent> = (args: TaskHeaderCloudComponent) => ({
+const template: StoryFn<TaskHeaderCloudComponent> = (args) => ({
     props: args
 });
 
-export const assignedAndEditable = template.bind({});
-assignedAndEditable.args = {
+export const AssignedAndEditable = template.bind({});
+AssignedAndEditable.args = {
     appName: 'app',
     taskId: 'mock-assigned-task'
 };
 
-export const completedAndReadonly = template.bind({});
-completedAndReadonly.args = {
-    ...assignedAndEditable.args,
+export const CompletedAndReadonly = template.bind({});
+CompletedAndReadonly.args = {
+    ...AssignedAndEditable.args,
     taskId: 'mock-completed-task'
 };
 
-export const suspended = template.bind({});
-suspended.args = {
-    ...assignedAndEditable.args,
+export const Suspended = template.bind({});
+Suspended.args = {
+    ...AssignedAndEditable.args,
     taskId: 'mock-suspended-task'
 };
 
-export const withParentId = template.bind({});
-withParentId.args = {
-    ...assignedAndEditable.args,
+export const WithParentId = template.bind({});
+WithParentId.args = {
+    ...AssignedAndEditable.args,
     taskId: 'mock-parent-task-id'
 };
 
-export const withoutAssignee = template.bind({});
-withoutAssignee.args = {
-    ...assignedAndEditable.args,
+export const WithoutAssignee = template.bind({});
+WithoutAssignee.args = {
+    ...AssignedAndEditable.args,
     taskId: 'mock-created-task'
 };
 
-export const notClaimableByUser = template.bind({});
-notClaimableByUser.args = {
-    ...assignedAndEditable.args,
+export const NotClaimableByUser = template.bind({});
+NotClaimableByUser.args = {
+    ...AssignedAndEditable.args,
     taskId: 'mock-no-candidate-users'
 };
 
-export const taskNotClaimableByGroupUser = template.bind({});
-taskNotClaimableByGroupUser.args = {
-    ...assignedAndEditable.args,
+export const TaskNotClaimableByGroupUser = template.bind({});
+TaskNotClaimableByGroupUser.args = {
+    ...AssignedAndEditable.args,
     taskId: 'mock-no-candidate-groups'
 };
 
-export const invalidForMissingApp = template.bind({});
-invalidForMissingApp.args = {
-    ...assignedAndEditable.args,
+export const InvalidForMissingApp = template.bind({});
+InvalidForMissingApp.args = {
+    ...AssignedAndEditable.args,
     appName: undefined
 };
 
-export const invalidForMissingTaskId = template.bind({});
-invalidForMissingTaskId.args = {
-    ...assignedAndEditable.args,
+export const InvalidForMissingTaskId = template.bind({});
+InvalidForMissingTaskId.args = {
+    ...AssignedAndEditable.args,
     taskId: undefined
 };

lib/process-services-cloud/src/lib/testing/process-services-cloud-story.module.ts

@@ -17,20 +17,20 @@
 
 import { NgModule } from '@angular/core';
 import { AuthModule, CoreModule, provideTranslations } from '@alfresco/adf-core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateModule } from '@ngx-translate/core';
 import { ProcessServicesCloudModule } from '../process-services-cloud.module';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 @NgModule({
     imports: [
         AuthModule.forRoot(),
-        BrowserAnimationsModule,
         TranslateModule.forRoot(),
         CoreModule.forRoot(),
         ProcessServicesCloudModule.forRoot()
     ],
     providers: [
-        provideTranslations('adf-process-services-cloud', 'assets/adf-process-services-cloud')
+        provideTranslations('adf-process-services-cloud', 'assets/adf-process-services-cloud'),
+        provideAnimations()
     ]
 })
 export class ProcessServicesCloudStoryModule { }