From 0bca6607a97e96fac4947dc35cd486f2efb78334 Mon Sep 17 00:00:00 2001
From: siva kumar <siva.kumar@muraai.com>
Date: Wed, 7 Aug 2019 04:07:32 +0530
Subject: [PATCH] [ADF-4793] The filters don't work on community-edition [ Use
 local storage for community version ] (#4973)

* * Use local storage for community version.

* * Created a communityModule.

* * Updated unit tests the recent changes

* * Updated documents.

* * Modified process/task filters doc.
---
 demo-shell/src/app/app.module.ts              |  29 ++---
 demo-shell/src/app/app.routes.ts              |  36 +-----
 .../community/community-cloud.component.ts    |   2 +-
 .../cloud/community/community.module.ts       |  97 ++++++++++++++++
 .../cloud-settings.component.html             |   0
 .../cloud-settings.component.scss             |   0
 .../{ => shared}/cloud-settings.component.ts  |   2 +-
 .../cloud/shared/cloud.shared.module.ts       |  37 ++++++
 .../edit-process-filter-cloud.component.md    |   4 +
 .../edit-task-filter-cloud.component.md       |   4 +
 .../process-filters-cloud.component.md        |   6 +
 .../task-filters-cloud.component.md           |   6 +
 .../local-preference-cloud.service.md         |  51 +++++++++
 .../services/process-filter-cloud.service.md  |  44 +++++++-
 .../services/task-filter-cloud.service.md     |  44 +++++++-
 .../services/user-preference-cloud.service.md |  50 +++++++++
 .../src/lib/process-services-cloud.module.ts  |  12 +-
 ...dit-process-filter-cloud.component.spec.ts |   8 +-
 .../process-filters-cloud.component.spec.ts   |  46 +++++++-
 .../process-filter-cloud.service.spec.ts      |  65 +++++++++--
 .../services/process-filter-cloud.service.ts  |  10 +-
 .../src/lib/services/cloud-token.service.ts   |  23 ++++
 .../local-preference-cloud.service.ts         | 105 ++++++++++++++++++
 .../services/preference-cloud.interface.ts    |  28 +++++
 .../src/lib/services/public-api.ts            |   5 +-
 ... => user-preference-cloud.service.spec.ts} |   2 +-
 ...ce.ts => user-preference-cloud.service.ts} |   7 +-
 .../edit-task-filter-cloud.component.scss     |   2 +-
 .../edit-task-filter-cloud.component.spec.ts  |   9 +-
 .../task-filters-cloud.component.spec.ts      |  47 +++++++-
 .../task-filter-cloud.service.spec.ts         |  65 +++++++++--
 .../services/task-filter-cloud.service.ts     |  25 +++--
 package-lock.json                             |   2 +-
 33 files changed, 759 insertions(+), 114 deletions(-)
 create mode 100644 demo-shell/src/app/components/cloud/community/community.module.ts
 rename demo-shell/src/app/components/cloud/{ => shared}/cloud-settings.component.html (100%)
 rename demo-shell/src/app/components/cloud/{ => shared}/cloud-settings.component.scss (100%)
 rename demo-shell/src/app/components/cloud/{ => shared}/cloud-settings.component.ts (97%)
 create mode 100644 demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts
 create mode 100644 docs/process-services-cloud/services/local-preference-cloud.service.md
 create mode 100644 docs/process-services-cloud/services/user-preference-cloud.service.md
 create mode 100644 lib/process-services-cloud/src/lib/services/cloud-token.service.ts
 create mode 100644 lib/process-services-cloud/src/lib/services/local-preference-cloud.service.ts
 create mode 100644 lib/process-services-cloud/src/lib/services/preference-cloud.interface.ts
 rename lib/process-services-cloud/src/lib/services/{user-preference.cloud.service.spec.ts => user-preference-cloud.service.spec.ts} (99%)
 rename lib/process-services-cloud/src/lib/services/{user-preference.cloud.service.ts => user-preference-cloud.service.ts} (96%)

diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts
index a789607957..c6658996eb 100644
--- a/demo-shell/src/app/app.module.ts
+++ b/demo-shell/src/app/app.module.ts
@@ -79,18 +79,15 @@ import { CloudBreadcrumbsComponent } from './components/cloud/cloud-breadcrumb-c
 import { CloudFiltersDemoComponent } from './components/cloud/cloud-filters-demo.component';
 import { TemplateDemoComponent } from './components/template-list/template-demo.component';
 import { PeopleGroupCloudDemoComponent } from './components/cloud/people-groups-cloud-demo.component';
-import { CloudSettingsComponent } from './components/cloud/cloud-settings.component';
 import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component';
 import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component';
-import { CommunityCloudComponent } from './components/cloud/community/community-cloud.component';
-import { CommunityTasksCloudDemoComponent } from './components/cloud/community/community-task-cloud.component';
-import { CommunityCloudFiltersDemoComponent } from './components/cloud/community/community-filters.component';
-import { CommunityStartProcessCloudDemoComponent } from './components/cloud/community/community-start-process-cloud.component';
-import { CommunityStartTaskCloudDemoComponent } from './components/cloud/community/community-start-task-cloud.component';
-import { CommunityProcessDetailsCloudDemoComponent } from './components/cloud/community/community-process-details-cloud.component';
-import { CommunityProcessesCloudDemoComponent } from './components/cloud/community/community-processes-cloud.component';
-import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/community/community-task-details-cloud.component';
 import { environment } from '../environments/environment';
+import { AppCloudSharedModule } from './components/cloud/shared/cloud.shared.module';
+import {
+    UserPreferenceCloudService,
+    PROCESS_FILTERS_SERVICE_TOKEN,
+    TASK_FILTERS_SERVICE_TOKEN
+} from '@alfresco/adf-process-services-cloud';
 
 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
@@ -146,6 +143,7 @@ registerLocaleData(localeSv);
         ExtensionsModule.forRoot(),
         ThemePickerModule,
         ChartsModule,
+        AppCloudSharedModule,
         MonacoEditorModule.forRoot()
     ],
     declarations: [
@@ -189,24 +187,17 @@ registerLocaleData(localeSv);
         CloudFiltersDemoComponent,
         TemplateDemoComponent,
         PeopleGroupCloudDemoComponent,
-        CloudSettingsComponent,
         ConfirmDialogExampleComponent,
         FormCloudDemoComponent,
-        ConfirmDialogExampleComponent,
-        CommunityCloudComponent,
-        CommunityTasksCloudDemoComponent,
-        CommunityCloudFiltersDemoComponent,
-        CommunityProcessesCloudDemoComponent,
-        CommunityStartProcessCloudDemoComponent,
-        CommunityStartTaskCloudDemoComponent,
-        CommunityProcessDetailsCloudDemoComponent,
-        CommunityTaskDetailsCloudDemoComponent
+        ConfirmDialogExampleComponent
     ],
     providers: [
         {
             provide: HTTP_INTERCEPTORS, useClass:
             AuthBearerInterceptor, multi: true
         },
+        { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService },
+        { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService },
         { provide: AppConfigService, useClass: DebugAppConfigService }, // not use this service in production
         {
             provide: TRANSLATION_PROVIDER,
diff --git a/demo-shell/src/app/app.routes.ts b/demo-shell/src/app/app.routes.ts
index 188e58e1c9..a79b824203 100644
--- a/demo-shell/src/app/app.routes.ts
+++ b/demo-shell/src/app/app.routes.ts
@@ -57,14 +57,6 @@ import { ProcessDetailsCloudDemoComponent } from './components/cloud/process-det
 import { TemplateDemoComponent } from './components/template-list/template-demo.component';
 import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component';
 import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component';
-import { CommunityTasksCloudDemoComponent } from './components/cloud/community/community-task-cloud.component';
-import { CommunityCloudComponent } from './components/cloud/community/community-cloud.component';
-import { CommunityStartProcessCloudDemoComponent } from './components/cloud/community/community-start-process-cloud.component';
-import { CommunityStartTaskCloudDemoComponent } from './components/cloud/community/community-start-task-cloud.component';
-import { CommunityProcessDetailsCloudDemoComponent } from './components/cloud/community/community-process-details-cloud.component';
-import { CommunityProcessesCloudDemoComponent } from './components/cloud/community/community-processes-cloud.component';
-import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/community/community-task-details-cloud.component';
-
 export const appRoutes: Routes = [
     { path: 'login', loadChildren: 'app/components/login/login.module#AppLoginModule' },
     { path: 'logout', component: LogoutComponent },
@@ -186,33 +178,7 @@ export const appRoutes: Routes = [
                     },
                     {
                         path: 'community',
-                        component: CommunityCloudComponent,
-                        children: [
-                            {
-                                path: 'tasks',
-                                component: CommunityTasksCloudDemoComponent
-                            },
-                            {
-                                path: 'processes',
-                                component: CommunityProcessesCloudDemoComponent
-                            },
-                            {
-                                path: 'start-task',
-                                component: CommunityStartTaskCloudDemoComponent
-                            },
-                            {
-                                path: 'start-process',
-                                component: CommunityStartProcessCloudDemoComponent
-                            },
-                            {
-                                path: 'task-details/:taskId',
-                                component: CommunityTaskDetailsCloudDemoComponent
-                            },
-                            {
-                                path: 'process-details/:processInstanceId',
-                                component: CommunityProcessDetailsCloudDemoComponent
-                            }
-                        ]
+                        loadChildren: 'app/components/cloud/community/community.module#AppCommunityModule'
                     },
                     {
                         path: ':appName',
diff --git a/demo-shell/src/app/components/cloud/community/community-cloud.component.ts b/demo-shell/src/app/components/cloud/community/community-cloud.component.ts
index 6303699344..40f92e73b4 100644
--- a/demo-shell/src/app/components/cloud/community/community-cloud.component.ts
+++ b/demo-shell/src/app/components/cloud/community/community-cloud.component.ts
@@ -29,7 +29,7 @@ import { CloudLayoutService } from '../services/cloud-layout.service';
         height: 100% !important;
       }
       `],
-      encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None
 })
 export class CommunityCloudComponent  {
 
diff --git a/demo-shell/src/app/components/cloud/community/community.module.ts b/demo-shell/src/app/components/cloud/community/community.module.ts
new file mode 100644
index 0000000000..6b10e6b435
--- /dev/null
+++ b/demo-shell/src/app/components/cloud/community/community.module.ts
@@ -0,0 +1,97 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import {
+    ProcessServicesCloudModule,
+    LocalPreferenceCloudService,
+    PROCESS_FILTERS_SERVICE_TOKEN,
+    TASK_FILTERS_SERVICE_TOKEN
+} from '@alfresco/adf-process-services-cloud';
+
+import { CommunityCloudComponent } from './community-cloud.component';
+import { CommunityTasksCloudDemoComponent } from './community-task-cloud.component';
+import { CommunityCloudFiltersDemoComponent } from './community-filters.component';
+import { CommunityProcessesCloudDemoComponent } from './community-processes-cloud.component';
+import { CommunityStartProcessCloudDemoComponent } from './community-start-process-cloud.component';
+import { CommunityStartTaskCloudDemoComponent } from './community-start-task-cloud.component';
+import { CommunityProcessDetailsCloudDemoComponent } from './community-process-details-cloud.component';
+import { CommunityTaskDetailsCloudDemoComponent } from './community-task-details-cloud.component';
+import { AppCloudSharedModule } from '../shared/cloud.shared.module';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: CommunityCloudComponent,
+        children: [
+            {
+                path: 'tasks',
+                component: CommunityTasksCloudDemoComponent
+            },
+            {
+                path: 'processes',
+                component: CommunityProcessesCloudDemoComponent
+            },
+            {
+                path: 'start-task',
+                component: CommunityStartTaskCloudDemoComponent
+            },
+            {
+                path: 'start-process',
+                component: CommunityStartProcessCloudDemoComponent
+            },
+            {
+                path: 'task-details/:taskId',
+                component: CommunityTaskDetailsCloudDemoComponent
+            },
+            {
+                path: 'process-details/:processInstanceId',
+                component: CommunityProcessDetailsCloudDemoComponent
+            }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        ProcessServicesCloudModule,
+        RouterModule.forChild(routes),
+        AppCloudSharedModule,
+        FlexLayoutModule
+    ],
+    declarations: [
+        CommunityCloudComponent,
+        CommunityTasksCloudDemoComponent,
+        CommunityCloudFiltersDemoComponent,
+        CommunityProcessesCloudDemoComponent,
+        CommunityStartProcessCloudDemoComponent,
+        CommunityStartTaskCloudDemoComponent,
+        CommunityProcessDetailsCloudDemoComponent,
+        CommunityTaskDetailsCloudDemoComponent
+    ],
+    providers: [
+        { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService },
+        { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+    ]
+})
+export class AppCommunityModule {}
diff --git a/demo-shell/src/app/components/cloud/cloud-settings.component.html b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
similarity index 100%
rename from demo-shell/src/app/components/cloud/cloud-settings.component.html
rename to demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
diff --git a/demo-shell/src/app/components/cloud/cloud-settings.component.scss b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
similarity index 100%
rename from demo-shell/src/app/components/cloud/cloud-settings.component.scss
rename to demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
diff --git a/demo-shell/src/app/components/cloud/cloud-settings.component.ts b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts
similarity index 97%
rename from demo-shell/src/app/components/cloud/cloud-settings.component.ts
rename to demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts
index 46d9d2c0fb..d21e308386 100644
--- a/demo-shell/src/app/components/cloud/cloud-settings.component.ts
+++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CloudLayoutService } from './services/cloud-layout.service';
+import { CloudLayoutService } from '../services/cloud-layout.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
diff --git a/demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts b/demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts
new file mode 100644
index 0000000000..a67fc6e948
--- /dev/null
+++ b/demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts
@@ -0,0 +1,37 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CloudSettingsComponent } from './cloud-settings.component';
+import { MatDialogModule, MatInputModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
+import { CoreModule } from '@alfresco/adf-core';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        MatDialogModule,
+        MatInputModule,
+        MatSelectModule,
+        MatSlideToggleModule
+    ],
+    declarations: [ CloudSettingsComponent ],
+    exports: [ CommonModule, CloudSettingsComponent]
+})
+
+export class AppCloudSharedModule {}
diff --git a/docs/process-services-cloud/components/edit-process-filter-cloud.component.md b/docs/process-services-cloud/components/edit-process-filter-cloud.component.md
index 0844cb1d6e..cfb5f121f9 100644
--- a/docs/process-services-cloud/components/edit-process-filter-cloud.component.md
+++ b/docs/process-services-cloud/components/edit-process-filter-cloud.component.md
@@ -212,3 +212,7 @@ Users can save a filter if they make any changes to it in an application using t
 ## See also
 
 -   [Edit task filter cloud component](edit-task-filter-cloud.component.md)
+-   [Process Filter Cloud Service](../services/process-filter-cloud.service.md)
+-   [Local preference Cloud Service](../services/local-preference-cloud.service.md)
+-   [User preference Cloud Service](../services/user-preference-cloud.service.md)
+
diff --git a/docs/process-services-cloud/components/edit-task-filter-cloud.component.md b/docs/process-services-cloud/components/edit-task-filter-cloud.component.md
index be1245e0a8..5ae00fe8bd 100644
--- a/docs/process-services-cloud/components/edit-task-filter-cloud.component.md
+++ b/docs/process-services-cloud/components/edit-task-filter-cloud.component.md
@@ -212,3 +212,7 @@ Users can save a filter if they make any changes to it in an application using t
 ## See also
 
 -   [Edit process filter cloud component](edit-process-filter-cloud.component.md)
+-   [Task filters Cloud Service](../services/task-filter-cloud.service.md)
+-   [Local preference Cloud Service](../services/local-preference-cloud.service.md)
+-   [User preference Cloud Service](../services/user-preference-cloud.service.md)
+
diff --git a/docs/process-services-cloud/components/process-filters-cloud.component.md b/docs/process-services-cloud/components/process-filters-cloud.component.md
index d09a1fe44f..39baa07bda 100644
--- a/docs/process-services-cloud/components/process-filters-cloud.component.md
+++ b/docs/process-services-cloud/components/process-filters-cloud.component.md
@@ -35,3 +35,9 @@ Lists all available process filters and allows to select a filter.
 | error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when any error occurs while loading the filters |
 | filterClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessFilterCloudModel`](../../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts)`>` | Emitted when a filter is selected/clicked |
 | success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when filters are loaded successfully |
+
+## See also
+
+-   [Process Filter Cloud Service](./services/process-filter-cloud.service.md)
+-   [Local preference Cloud Service](./services/local-preference-cloud.service.md)
+-   [User preference Cloud Service](./services/user-preference-cloud.service.md)
diff --git a/docs/process-services-cloud/components/task-filters-cloud.component.md b/docs/process-services-cloud/components/task-filters-cloud.component.md
index 6f8b40826e..81fb84ef55 100644
--- a/docs/process-services-cloud/components/task-filters-cloud.component.md
+++ b/docs/process-services-cloud/components/task-filters-cloud.component.md
@@ -54,3 +54,9 @@ as the value of `filterParam` as shown in the table below:
 | name | string | The name of the task filter, lowercase is checked |
 | key | string | The key of the task filter |
 | index | string | The zero-based position of the filter in the array. |
+
+## See also
+
+-   [Task filter Cloud Service](../services/task-filter-cloud.service.md)
+-   [Local preference Cloud Service](../services/local-preference-cloud.service.md)
+-   [User preference Cloud Service](../services/user-preference-cloud.service.md)
diff --git a/docs/process-services-cloud/services/local-preference-cloud.service.md b/docs/process-services-cloud/services/local-preference-cloud.service.md
new file mode 100644
index 0000000000..1ca461d0c0
--- /dev/null
+++ b/docs/process-services-cloud/services/local-preference-cloud.service.md
@@ -0,0 +1,51 @@
+---
+Title: Local Preference Cloud Service
+Added: v3.4.0
+Status: Experimental
+Last reviewed: 2019-08-06
+---
+
+# [Local Preference Cloud Service](../../../lib/process-services-cloud/src/lib/services/local-preference-cloud.service.ts "Defined in local-preference-cloud.service.ts")
+
+Manages Local Storage preferences. 
+
+## Class members
+
+### Methods
+
+-   **createPreference**(appName: `string`, key: `string`, newPreference: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Creates local preference.
+    -   _appName:_ `string`  - Name of the target app 
+    -   _key:_ `string`  - Key of the target preference
+    -   _newPreference:_ `any`  - 
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of created local preferences
+-   **deletePreference**(key: `string`, preferences: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Deletes local preference by given preference key.
+    -   _key:_ `string`  - Key of the target preference
+    -   _preferences:_ `any`  - Details of updated preferences
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of preferences without deleted preference
+-   **getPreferenceByKey**(appName: `string`, key: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Gets local preference.
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - Key of the target preference
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of local preference
+-   **getPreferences**(appName: `string`, key: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Gets local preferences
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - (Optional) (Optional) (Optional) (Optional) 
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - List of local preferences
+-   **prepareLocalPreferenceResponse**(key: `string`): `any`<br/>
+
+    -   _key:_ `string`  - 
+    -   **Returns** `any` - 
+
+-   **updatePreference**(appName: `string`, key: `string`, updatedPreference: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Updates local preference.
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - Key of the target preference
+    -   _updatedPreference:_ `any`  - Details of updated preference
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of updated local preferences
+
+## See also
+
+-   [User preference Cloud Service](user-preference-cloud.service.md)
diff --git a/docs/process-services-cloud/services/process-filter-cloud.service.md b/docs/process-services-cloud/services/process-filter-cloud.service.md
index 56ec9a45ef..b9c38e2c3f 100644
--- a/docs/process-services-cloud/services/process-filter-cloud.service.md
+++ b/docs/process-services-cloud/services/process-filter-cloud.service.md
@@ -35,13 +35,47 @@ Manage Process Filters, which are pre-configured Process Instance queries.
     -   _updatedFilter:_ [`ProcessFilterCloudModel`](../../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts)  - 
     -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`ProcessFilterCloudModel`](../../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts)`[]>` - Observable of process instance filters with updated filter
 
-## Details
+## Inject Preference service
 
-The methods of this service generally return an instance of
-[`ProcessFilterCloudModel`](../../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts) or an array of instances.
+Token: [`PROCESS_FILTERS_SERVICE_TOKEN`](../../../lib/process-services-cloud/src/lib/services/cloud-token.service.ts)
+A DI token that maps to the dependency to be injected.
 
-You can use the returned filters to get matching process instances for the process app, 
-such as 'Running', 'Completed', 'All', etc.
+[Process Filter Cloud Service](../../../lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.ts "Defined in process-filter-cloud.service.ts")
+is by default injected with the [Local Preference Cloud Service](../../process-services-cloud/services/local-preference-cloud.service.md)
+
+```ts
+import { NgModule } from '@angular/core';
+import { LocalPreferenceCloudService, PROCESS_FILTERS_SERVICE_TOKEN } from '@alfresco/adf-process-services-cloud';
+
+@NgModule({
+    imports: [
+        ...Import Required Modules
+    ],
+    providers: [
+        { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+    ]
+})
+export class ExampleModule {}
+
+```
+
+If you would like to inject the [User Preference Cloud Service](../../process-services-cloud/services/user-preference-cloud.service.md), you can inject the service like below shown 
+
+```ts
+import { NgModule } from '@angular/core';
+import { UserPreferenceCloudService, PROCESS_FILTERS_SERVICE_TOKEN } from '@alfresco/adf-process-services-cloud';
+
+@NgModule({
+    imports: [
+        ...Import Required Modules
+    ],
+    providers: [
+        { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService }
+    ]
+})
+export class ExampleModule {}
+
+```
 
 ## See also
 
diff --git a/docs/process-services-cloud/services/task-filter-cloud.service.md b/docs/process-services-cloud/services/task-filter-cloud.service.md
index 782e38e053..2ae43bc229 100644
--- a/docs/process-services-cloud/services/task-filter-cloud.service.md
+++ b/docs/process-services-cloud/services/task-filter-cloud.service.md
@@ -7,7 +7,7 @@ Last reviewed: 2019-01-09
 
 # [Task Filter Cloud Service](../../../lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.ts "Defined in task-filter-cloud.service.ts")
 
-Manages task filters. 
+Manages task filters.
 
 ## Class members
 
@@ -53,6 +53,48 @@ this.taskFilterService.getTaskListFilters(appName).subscribe( (filters: TaskFilt
 
 These filters can now be used to get matching task instances for the process app.
 
+## Inject Preference service
+
+Token: [`TASK_FILTERS_SERVICE_TOKEN`](../../../lib/process-services-cloud/src/lib/services/cloud-token.service.ts)
+A DI token that maps to the dependency to be injected.
+
+[Task Filter Cloud Service](../../../lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.ts "Defined in task-filter-cloud.service.ts")
+is by default injected with the [Local Preference Cloud Service](../../process-services-cloud/services/local-preference-cloud.service.md)
+
+```ts
+import { NgModule } from '@angular/core';
+import { LocalPreferenceCloudService, TASK_FILTERS_SERVICE_TOKEN } from '@alfresco/adf-process-services-cloud';
+
+@NgModule({
+    imports: [
+        ...Import Required Modules
+    ],
+    providers: [
+        { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+    ]
+})
+export class ExampleModule {}
+
+```
+
+If you would like to inject the [UserPreferenceCloudService](../../process-services-cloud/services/user-preference-cloud.service.md),  you can inject the service like below shown 
+
+```ts
+import { NgModule } from '@angular/core';
+import { UserPreferenceCloudService, TASK_FILTERS_SERVICE_TOKEN } from '@alfresco/adf-process-services-cloud';
+
+@NgModule({
+    imports: [
+        ...Import Required Modules
+    ],
+    providers: [
+        { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService }
+    ]
+})
+export class ExampleModule {}
+
+```
+
 ## See also
 
 -   [Task filter service](../../process-services/services/task-filter.service.md)
diff --git a/docs/process-services-cloud/services/user-preference-cloud.service.md b/docs/process-services-cloud/services/user-preference-cloud.service.md
new file mode 100644
index 0000000000..8f9ae4c8a8
--- /dev/null
+++ b/docs/process-services-cloud/services/user-preference-cloud.service.md
@@ -0,0 +1,50 @@
+---
+Title: User Preference Cloud Service
+Added: v3.4.0
+Status: Experimental
+Last reviewed: 2019-08-06
+---
+
+# [User Preference Cloud Service](../../../lib/process-services-cloud/src/lib/services/user-preference-cloud.service.ts "Defined in user-preference-cloud.service.ts")
+
+Manages user preferences. 
+
+## Class members
+
+### Methods
+
+-   **createPreference**(appName: `string`, key: `string`, newPreference: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Creates user preference.
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - Key of the target preference
+    -   _newPreference:_ `any`  - 
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of created user preferences
+-   **deletePreference**(appName: `string`, key: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Deletes user preference by given preference key.
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - Key of the target preference
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of delete operation status
+-   **getBasePath**(appName: `string`): `string`<br/>
+
+    -   _appName:_ `string`  - 
+    -   **Returns** `string` - 
+
+-   **getPreferenceByKey**(appName: `string`, key: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Gets user preference.
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - Key of the target preference
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of user preference
+-   **getPreferences**(appName: `string`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Gets user preferences
+    -   _appName:_ `string`  - Name of the target app
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - List of user preferences
+-   **updatePreference**(appName: `string`, key: `string`, updatedPreference: `any`): [`Observable`](http://reactivex.io/documentation/observable.html)`<any>`<br/>
+    Updates user preference.
+    -   _appName:_ `string`  - Name of the target app
+    -   _key:_ `string`  - Key of the target preference
+    -   _updatedPreference:_ `any`  - Details of updated preference
+    -   **Returns** [`Observable`](http://reactivex.io/documentation/observable.html)`<any>` - Observable of updated user preferences
+
+## See also
+
+-   [Local preference Cloud Service](local-preference-cloud.service.md)
\ No newline at end of file
diff --git a/lib/process-services-cloud/src/lib/process-services-cloud.module.ts b/lib/process-services-cloud/src/lib/process-services-cloud.module.ts
index c16fb19b41..c9d71bc41f 100644
--- a/lib/process-services-cloud/src/lib/process-services-cloud.module.ts
+++ b/lib/process-services-cloud/src/lib/process-services-cloud.module.ts
@@ -24,7 +24,12 @@ import { GroupCloudModule } from './group/group-cloud.module';
 import { FormCloudModule } from './form/form-cloud.module';
 import { TaskFormModule } from './task/task-form/task-form.module';
 import { BaseCloudService } from './services/base-cloud.service';
-import { UserPreferenceCloudService } from './services/user-preference.cloud.service';
+import { UserPreferenceCloudService } from './services/user-preference-cloud.service';
+import {
+    LocalPreferenceCloudService,
+    PROCESS_FILTERS_SERVICE_TOKEN,
+    TASK_FILTERS_SERVICE_TOKEN
+} from './services/public-api';
 
 @NgModule({
     imports: [
@@ -46,7 +51,10 @@ import { UserPreferenceCloudService } from './services/user-preference.cloud.ser
             }
         },
         BaseCloudService,
-        UserPreferenceCloudService
+        UserPreferenceCloudService,
+        LocalPreferenceCloudService,
+        { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService },
+        { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
     ],
     exports: [
         AppListCloudModule,
diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts
index 15133efc2a..804ce7ae2b 100644
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts
@@ -32,7 +32,8 @@ import { AppsProcessCloudService } from '../../../app/services/apps-process-clou
 import { fakeApplicationInstance } from './../../../app/mock/app-model.mock';
 import moment from 'moment-es6';
 import { AbstractControl } from '@angular/forms';
-import { UserPreferenceCloudService } from '../../../services/user-preference.cloud.service';
+import { PROCESS_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
 
 describe('EditProcessFilterCloudComponent', () => {
     let component: EditProcessFilterCloudComponent;
@@ -56,7 +57,10 @@ describe('EditProcessFilterCloudComponent', () => {
 
     setupTestBed({
         imports: [ProcessServiceCloudTestingModule, ProcessFiltersCloudModule],
-        providers: [MatDialog, UserPreferenceCloudService]
+        providers: [
+            MatDialog,
+            { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+        ]
     });
 
     beforeEach(() => {
diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts
index 161f3e0f53..813b13996a 100644
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts
@@ -26,7 +26,9 @@ import { By } from '@angular/platform-browser';
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
 import { ProcessFiltersCloudModule } from '../process-filters-cloud.module';
 import { FilterParamsModel } from '../../../task/task-filters/models/filter-cloud.model';
-import { UserPreferenceCloudService } from '../../../services/user-preference.cloud.service';
+import { PROCESS_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
+import { UserPreferenceCloudService } from '../../../services/user-preference-cloud.service';
 
 describe('ProcessFiltersCloudComponent', () => {
 
@@ -76,7 +78,10 @@ describe('ProcessFiltersCloudComponent', () => {
 
     setupTestBed({
         imports: [ProcessServiceCloudTestingModule, ProcessFiltersCloudModule],
-        providers: [ProcessFilterCloudService, UserPreferenceCloudService]
+        providers: [
+            ProcessFilterCloudService,
+            { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+        ]
     });
 
     beforeEach(() => {
@@ -86,6 +91,14 @@ describe('ProcessFiltersCloudComponent', () => {
         processFilterService = TestBed.get(ProcessFilterCloudService);
     });
 
+    it('should create ProcessFiltersCloudComponent instance', () => {
+        expect(component instanceof ProcessFiltersCloudComponent).toBeDefined();
+    });
+
+    it('should be able to use LocalPreferenceCloudService', () => {
+        expect(processFilterService.preferenceService instanceof LocalPreferenceCloudService).toBeTruthy();
+    });
+
     it('should attach specific icon for each filter if hasIcon is true', async(() => {
         spyOn(processFilterService, 'getProcessFilters').and.returnValue(fakeGlobalFilterObservable);
         const change = new SimpleChange(undefined, 'my-app-1', true);
@@ -353,3 +366,32 @@ describe('ProcessFiltersCloudComponent', () => {
         expect(component.getCurrentFilter()).toBe(filter);
     });
 });
+
+describe('Set UserPreferenceService', () => {
+
+    let processFilterService: ProcessFilterCloudService;
+    let component: ProcessFiltersCloudComponent;
+    let fixture: ComponentFixture<ProcessFiltersCloudComponent>;
+
+    setupTestBed({
+        imports: [ProcessServiceCloudTestingModule, ProcessFiltersCloudModule],
+        providers: [
+            ProcessFilterCloudService,
+            { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService }
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ProcessFiltersCloudComponent);
+        component = fixture.componentInstance;
+        processFilterService = TestBed.get(ProcessFilterCloudService);
+    });
+
+    it('should create ProcessFiltersCloudComponent instance', () => {
+        expect(component instanceof ProcessFiltersCloudComponent).toBeDefined();
+    });
+
+    it('should able to inject UserPreferenceCloudService when you override with user preferece service', () => {
+        expect(processFilterService.preferenceService instanceof UserPreferenceCloudService).toBeTruthy();
+    });
+});
diff --git a/lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.spec.ts b/lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.spec.ts
index 10926dab12..408f366424 100644
--- a/lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.spec.ts
+++ b/lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.spec.ts
@@ -19,7 +19,6 @@ import { async, TestBed } from '@angular/core/testing';
 import { setupTestBed, CoreModule, IdentityUserService } from '@alfresco/adf-core';
 import { of } from 'rxjs';
 import { ProcessFilterCloudService } from './process-filter-cloud.service';
-import { UserPreferenceCloudService } from '../../../services/user-preference.cloud.service';
 import {
     fakeProcessCloudFilterEntries,
     fakeProcessCloudFilters,
@@ -27,10 +26,14 @@ import {
     fakeProcessCloudFilterWithDifferentEntries,
     fakeProcessFilter
 } from '../mock/process-filters.cloud.mock';
+import { PreferenceCloudServiceInterface } from '../../../services/preference-cloud.interface';
+import { PROCESS_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
+import { UserPreferenceCloudService } from '../../../services/user-preference-cloud.service';
 
-describe('Process Filter Cloud Service', () => {
+describe('ProcessFilterCloudService', () => {
     let service: ProcessFilterCloudService;
-    let userPreferenceCloudService: UserPreferenceCloudService;
+    let preferenceCloudService: PreferenceCloudServiceInterface;
     let identityUserService: IdentityUserService;
     let getPreferencesSpy: jasmine.Spy;
     let getPreferenceByKeySpy: jasmine.Spy;
@@ -44,17 +47,22 @@ describe('Process Filter Cloud Service', () => {
         imports: [
             CoreModule.forRoot()
         ],
-        providers: [ProcessFilterCloudService, UserPreferenceCloudService, IdentityUserService]
+        providers: [
+            ProcessFilterCloudService,
+            IdentityUserService,
+            LocalPreferenceCloudService,
+            { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+        ]
     });
 
     beforeEach(async(() => {
         service = TestBed.get(ProcessFilterCloudService);
-        userPreferenceCloudService = TestBed.get(UserPreferenceCloudService);
+        preferenceCloudService = service.preferenceService;
         identityUserService = TestBed.get(IdentityUserService);
-        createPreferenceSpy = spyOn(userPreferenceCloudService, 'createPreference').and.returnValue(of(fakeProcessCloudFilters));
-        updatePreferenceSpy = spyOn(userPreferenceCloudService, 'updatePreference').and.returnValue(of(fakeProcessCloudFilters));
-        getPreferenceByKeySpy = spyOn(userPreferenceCloudService, 'getPreferenceByKey').and.returnValue(of(fakeProcessCloudFilters));
-        getPreferencesSpy = spyOn(userPreferenceCloudService, 'getPreferences').and.returnValue(of(fakeProcessCloudFilterEntries));
+        createPreferenceSpy = spyOn(preferenceCloudService, 'createPreference').and.returnValue(of(fakeProcessCloudFilters));
+        updatePreferenceSpy = spyOn(preferenceCloudService, 'updatePreference').and.returnValue(of(fakeProcessCloudFilters));
+        getPreferenceByKeySpy = spyOn(preferenceCloudService, 'getPreferenceByKey').and.returnValue(of(fakeProcessCloudFilters));
+        getPreferencesSpy = spyOn(preferenceCloudService, 'getPreferences').and.returnValue(of(fakeProcessCloudFilterEntries));
         getCurrentUserInfoSpy = spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(identityUserMock);
     }));
 
@@ -62,6 +70,10 @@ describe('Process Filter Cloud Service', () => {
         expect(service).toBeDefined();
     });
 
+    it('should be able to use LocalPreferenceCloudService', () => {
+        expect(preferenceCloudService instanceof LocalPreferenceCloudService).toBeTruthy();
+    });
+
     it('should create processfilter key by using appName and the username', (done) => {
         service.getProcessFilters('mock-appName').subscribe((res: any) => {
             expect(res).toBeDefined();
@@ -208,3 +220,38 @@ describe('Process Filter Cloud Service', () => {
         expect(updatePreferenceSpy).toHaveBeenCalled();
     });
 });
+
+describe('Inject [UserPreferenceCloudService] into the ProcessFilterCloudService', () => {
+    let service: ProcessFilterCloudService;
+    let preferenceCloudService: PreferenceCloudServiceInterface;
+    let identityUserService: IdentityUserService;
+
+    const identityUserMock = { username: 'mock-username', firstName: 'fake-identity-first-name', lastName: 'fake-identity-last-name', email: 'fakeIdentity@email.com' };
+
+    setupTestBed({
+        imports: [
+            CoreModule.forRoot()
+        ],
+        providers: [
+            ProcessFilterCloudService,
+            IdentityUserService,
+            UserPreferenceCloudService,
+            { provide: PROCESS_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService }
+        ]
+    });
+
+    beforeEach(async(() => {
+        service = TestBed.get(ProcessFilterCloudService);
+        preferenceCloudService = service.preferenceService;
+        identityUserService = TestBed.get(IdentityUserService);
+        spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(identityUserMock);
+    }));
+
+    it('should create ProcessFilterCloudService instance', () => {
+        expect(service).toBeDefined();
+    });
+
+    it('should be able to inject UserPreferenceCloudService when you override with user preferece service', () => {
+        expect(preferenceCloudService instanceof UserPreferenceCloudService).toBeTruthy();
+    });
+});
diff --git a/lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.ts b/lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.ts
index 23a69e2d7c..6e4a0977b7 100644
--- a/lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.ts
+++ b/lib/process-services-cloud/src/lib/process/process-filters/services/process-filter-cloud.service.ts
@@ -16,12 +16,12 @@
  */
 
 import { IdentityUserService, IdentityUserModel } from '@alfresco/adf-core';
-import { Injectable } from '@angular/core';
+import { Injectable, Inject } from '@angular/core';
 import { Observable, of, BehaviorSubject, throwError } from 'rxjs';
 import { ProcessFilterCloudModel } from '../models/process-filter-cloud.model';
-import { UserPreferenceCloudService } from '../../../services/public-api';
 import { switchMap, map, catchError } from 'rxjs/operators';
-
+import { PROCESS_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { PreferenceCloudServiceInterface } from '../../../services/preference-cloud.interface';
 @Injectable()
 export class ProcessFilterCloudService {
 
@@ -29,7 +29,7 @@ export class ProcessFilterCloudService {
     filters$: Observable<ProcessFilterCloudModel[]>;
 
     constructor(
-        private preferenceService: UserPreferenceCloudService,
+        @Inject(PROCESS_FILTERS_SERVICE_TOKEN) public preferenceService: PreferenceCloudServiceInterface,
         private identityUserService: IdentityUserService) {
         this.filtersSubject = new BehaviorSubject([]);
         this.filters$ = this.filtersSubject.asObservable();
@@ -42,7 +42,7 @@ export class ProcessFilterCloudService {
      */
     private createDefaultFilters(appName: string) {
         const key: string = this.prepareKey(appName);
-        this.preferenceService.getPreferences(appName).pipe(
+        this.preferenceService.getPreferences(appName, key).pipe(
             switchMap((response: any) => {
                 const preferences = (response && response.list && response.list.entries) ? response.list.entries : [];
                 if (!this.hasPreferences(preferences)) {
diff --git a/lib/process-services-cloud/src/lib/services/cloud-token.service.ts b/lib/process-services-cloud/src/lib/services/cloud-token.service.ts
new file mode 100644
index 0000000000..4ea10d25ce
--- /dev/null
+++ b/lib/process-services-cloud/src/lib/services/cloud-token.service.ts
@@ -0,0 +1,23 @@
+/*!
+ * @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 { InjectionToken } from '@angular/core';
+import { PreferenceCloudServiceInterface } from './preference-cloud.interface';
+
+export const PROCESS_FILTERS_SERVICE_TOKEN = new InjectionToken<PreferenceCloudServiceInterface>('proccess-filters-cloud');
+
+export const TASK_FILTERS_SERVICE_TOKEN = new InjectionToken<PreferenceCloudServiceInterface>('task-filters-cloud');
diff --git a/lib/process-services-cloud/src/lib/services/local-preference-cloud.service.ts b/lib/process-services-cloud/src/lib/services/local-preference-cloud.service.ts
new file mode 100644
index 0000000000..1ad60f524e
--- /dev/null
+++ b/lib/process-services-cloud/src/lib/services/local-preference-cloud.service.ts
@@ -0,0 +1,105 @@
+/*!
+ * @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 { Injectable } from '@angular/core';
+import { PreferenceCloudServiceInterface } from './preference-cloud.interface';
+import { StorageService } from '@alfresco/adf-core';
+import { Observable, of } from 'rxjs';
+
+@Injectable()
+export class LocalPreferenceCloudService implements PreferenceCloudServiceInterface {
+
+  constructor(private storage: StorageService) { }
+
+    /**
+     * Gets local preferences
+     * @param appName Name of the target app
+     * @returns List of local preferences
+     */
+    getPreferences(appName: string, key: string): Observable<any> {
+        if (key || key === '') {
+            return of(this.prepareLocalPreferenceResponse(key));
+        }
+    }
+
+    /**
+     * Gets local preference.
+     * @param appName Name of the target app
+     * @param key Key of the target preference
+     * @returns Observable of local preference
+     */
+    getPreferenceByKey(appName: string, key: string): Observable<any> {
+        return of(JSON.parse(this.storage.getItem(key)) || []);
+    }
+
+    /**
+     * Creates local preference.
+     * @param appName Name of the target app
+     * @param key Key of the target preference
+     * @newPreference Details of new local preference
+     * @returns Observable of created local preferences
+     */
+    createPreference(appName: string, key: string, newPreference: any): Observable<any> {
+        const storedFilters = JSON.parse(this.storage.getItem(key) || '[]');
+        storedFilters.push(...newPreference);
+        this.storage.setItem(key, JSON.stringify(storedFilters));
+        return of(storedFilters);
+    }
+
+    /**
+     * Updates local preference.
+     * @param appName Name of the target app
+     * @param key Key of the target preference
+     * @param updatedPreference Details of updated preference
+     * @returns Observable of updated local preferences
+     */
+    updatePreference(appName: string, key: string, updatedPreference: any): Observable<any> {
+        if (key) {
+            this.storage.setItem(key, JSON.stringify(updatedPreference));
+            return of(updatedPreference);
+        }
+    }
+
+    /**
+     * Deletes local preference by given preference key.
+     * @param appName Name of the target app
+     * @param key Key of the target preference
+     * @param preferences Details of updated preferences
+     * @returns Observable of preferences without deleted preference
+     */
+    deletePreference(key: string, preferences: any): Observable<any> {
+        if (key) {
+            this.storage.setItem(key, JSON.stringify(preferences));
+            return of(preferences);
+        }
+    }
+
+    prepareLocalPreferenceResponse(key: string): any {
+        return {
+            'list': {
+                'entries': [
+                    {
+                        'entry': {
+                            'key': key,
+                            'value': this.storage.getItem(key) || '[]'
+                        }
+                    }
+                ]
+            }
+        };
+    }
+}
diff --git a/lib/process-services-cloud/src/lib/services/preference-cloud.interface.ts b/lib/process-services-cloud/src/lib/services/preference-cloud.interface.ts
new file mode 100644
index 0000000000..c7c567cc06
--- /dev/null
+++ b/lib/process-services-cloud/src/lib/services/preference-cloud.interface.ts
@@ -0,0 +1,28 @@
+/*!
+ * @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 { Observable } from 'rxjs';
+
+export interface PreferenceCloudServiceInterface {
+
+    getPreferences(appName: string, key?: string): Observable<any>;
+    getPreferenceByKey(appName: string, key: string): Observable<any>;
+    createPreference(appName: string, key: string, newPreference: any): Observable<any>;
+    updatePreference(appName: string, key: string, updatedPreference: any): Observable<any>;
+    deletePreference(appName: string, key: any): Observable<any>;
+
+}
diff --git a/lib/process-services-cloud/src/lib/services/public-api.ts b/lib/process-services-cloud/src/lib/services/public-api.ts
index ec722bb702..4cdb2c0031 100644
--- a/lib/process-services-cloud/src/lib/services/public-api.ts
+++ b/lib/process-services-cloud/src/lib/services/public-api.ts
@@ -15,4 +15,7 @@
  * limitations under the License.
  */
 
-export * from './user-preference.cloud.service';
+export * from './user-preference-cloud.service';
+export * from './local-preference-cloud.service';
+export * from './cloud-token.service';
+export * from './preference-cloud.interface';
diff --git a/lib/process-services-cloud/src/lib/services/user-preference.cloud.service.spec.ts b/lib/process-services-cloud/src/lib/services/user-preference-cloud.service.spec.ts
similarity index 99%
rename from lib/process-services-cloud/src/lib/services/user-preference.cloud.service.spec.ts
rename to lib/process-services-cloud/src/lib/services/user-preference-cloud.service.spec.ts
index 0896cfa643..6fb4c9d5a6 100644
--- a/lib/process-services-cloud/src/lib/services/user-preference.cloud.service.spec.ts
+++ b/lib/process-services-cloud/src/lib/services/user-preference-cloud.service.spec.ts
@@ -17,7 +17,7 @@
 
 import { TestBed, async } from '@angular/core/testing';
 
-import { UserPreferenceCloudService } from './user-preference.cloud.service';
+import { UserPreferenceCloudService } from './user-preference-cloud.service';
 import { setupTestBed, CoreModule, AlfrescoApiServiceMock, AppConfigService, LogService, AlfrescoApiService } from '@alfresco/adf-core';
 import { mockPreferences, getMockPreference, createMockPreference, updateMockPreference } from '../mock/user-preference.mock';
 
diff --git a/lib/process-services-cloud/src/lib/services/user-preference.cloud.service.ts b/lib/process-services-cloud/src/lib/services/user-preference-cloud.service.ts
similarity index 96%
rename from lib/process-services-cloud/src/lib/services/user-preference.cloud.service.ts
rename to lib/process-services-cloud/src/lib/services/user-preference-cloud.service.ts
index 64079992e9..9eaa7502e6 100644
--- a/lib/process-services-cloud/src/lib/services/user-preference.cloud.service.ts
+++ b/lib/process-services-cloud/src/lib/services/user-preference-cloud.service.ts
@@ -16,13 +16,14 @@
  */
 
 import { Injectable } from '@angular/core';
-import { BaseCloudService } from './base-cloud.service';
+import { PreferenceCloudServiceInterface } from './preference-cloud.interface';
 import { AlfrescoApiService, AppConfigService, LogService } from '@alfresco/adf-core';
 import { from, throwError, Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
+import { BaseCloudService } from './base-cloud.service';
 
 @Injectable()
-export class UserPreferenceCloudService extends BaseCloudService {
+export class UserPreferenceCloudService extends BaseCloudService implements PreferenceCloudServiceInterface {
 
   contentTypes = ['application/json'];
   accepts = ['application/json'];
@@ -58,7 +59,7 @@ export class UserPreferenceCloudService extends BaseCloudService {
    * Gets user preference.
    * @param appName Name of the target app
    * @param key Key of the target preference
-   * @returns Observable of user preferences
+   * @returns Observable of user preference
    */
   getPreferenceByKey(appName: string, key: string): Observable<any> {
     if (appName || appName === '') {
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.scss
index 5736c4b188..8bf1426c27 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.scss
@@ -36,7 +36,7 @@
     }
 
     .adf {
-        &-cloud-edit-process-filter-loading-margin {
+        &-cloud-edit-task-filter-loading-margin {
             margin-left: calc((100% - 100px) / 2);
             margin-right: calc((100% - 100px) / 2);
         }
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.spec.ts
index 95b057dec4..f72d84ec42 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.spec.ts
@@ -22,14 +22,14 @@ import { By } from '@angular/platform-browser';
 import { setupTestBed } from '@alfresco/adf-core';
 import { MatDialog } from '@angular/material';
 import { of } from 'rxjs';
-
+import { TASK_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
 import { AppsProcessCloudService } from '../../../app/services/apps-process-cloud.service';
 import { fakeApplicationInstance } from '../../../app/mock/app-model.mock';
 import { TaskFiltersCloudModule } from '../task-filters-cloud.module';
 import { EditTaskFilterCloudComponent } from './edit-task-filter-cloud.component';
 import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
-import { UserPreferenceCloudService } from '../../../services/user-preference.cloud.service';
 import { TaskFilterDialogCloudComponent } from './task-filter-dialog-cloud.component';
 import { fakeFilter, fakeAllTaskFilter } from '../mock/task-filters-cloud.mock';
 import { AbstractControl } from '@angular/forms';
@@ -46,7 +46,10 @@ describe('EditTaskFilterCloudComponent', () => {
 
     setupTestBed({
         imports: [ProcessServiceCloudTestingModule, TaskFiltersCloudModule],
-        providers: [MatDialog, UserPreferenceCloudService]
+        providers: [
+            MatDialog,
+            { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+        ]
     });
 
     beforeEach(() => {
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts
index b2e75e1eed..9f907f23e8 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts
@@ -19,6 +19,8 @@ import { SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { setupTestBed } from '@alfresco/adf-core';
 import { from, Observable } from 'rxjs';
+import { TASK_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
 import { FilterParamsModel } from '../models/filter-cloud.model';
 import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
 import { TaskFiltersCloudComponent } from './task-filters-cloud.component';
@@ -26,7 +28,7 @@ import { By } from '@angular/platform-browser';
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
 import { TaskFiltersCloudModule } from '../task-filters-cloud.module';
 import { fakeGlobalFilter } from '../mock/task-filters-cloud.mock';
-import { UserPreferenceCloudService } from '../../../services/user-preference.cloud.service';
+import { UserPreferenceCloudService } from '../../../services/user-preference-cloud.service';
 
 describe('TaskFiltersCloudComponent', () => {
 
@@ -53,7 +55,10 @@ describe('TaskFiltersCloudComponent', () => {
 
     setupTestBed({
         imports: [ProcessServiceCloudTestingModule, TaskFiltersCloudModule],
-        providers: [TaskFilterCloudService, UserPreferenceCloudService]
+        providers: [
+            TaskFilterCloudService,
+            { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }
+        ]
     });
 
     beforeEach(() => {
@@ -63,6 +68,14 @@ describe('TaskFiltersCloudComponent', () => {
         taskFilterService = TestBed.get(TaskFilterCloudService);
     });
 
+    it('should create TaskFiltersCloudComponent instance', () => {
+        expect(component instanceof TaskFiltersCloudComponent).toBeDefined();
+    });
+
+    it('should be able to use LocalPreferenceCloudService', () => {
+        expect(taskFilterService.preferenceService instanceof LocalPreferenceCloudService).toBeTruthy();
+    });
+
     it('should attach specific icon for each filter if hasIcon is true', async(() => {
         spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable);
         const change = new SimpleChange(undefined, 'my-app-1', true);
@@ -329,3 +342,33 @@ describe('TaskFiltersCloudComponent', () => {
         expect(component.getCurrentFilter()).toBe(fakeGlobalFilter[0]);
     });
 });
+
+describe('Set UserPreferenceService', () => {
+
+    let component: TaskFiltersCloudComponent;
+    let taskFilterService: TaskFilterCloudService;
+    let fixture: ComponentFixture<TaskFiltersCloudComponent>;
+
+    setupTestBed({
+        imports: [ProcessServiceCloudTestingModule, TaskFiltersCloudModule],
+        providers: [
+            TaskFilterCloudService,
+            { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService }
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TaskFiltersCloudComponent);
+        component = fixture.componentInstance;
+
+        taskFilterService = TestBed.get(TaskFilterCloudService);
+    });
+
+    it('should create TaskFiltersCloudComponent instance', () => {
+        expect(component instanceof TaskFiltersCloudComponent).toBeDefined();
+    });
+
+    it('should be able to inject UserPreferenceCloudService when you override with user preferece service', () => {
+        expect(taskFilterService.preferenceService instanceof UserPreferenceCloudService).toBeTruthy();
+    });
+});
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.spec.ts b/lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.spec.ts
index 1458e2a3fd..54216a0276 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.spec.ts
@@ -17,8 +17,9 @@
 import { async, TestBed } from '@angular/core/testing';
 import { setupTestBed, CoreModule, IdentityUserService } from '@alfresco/adf-core';
 import { of } from 'rxjs';
+import { TASK_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
+import { LocalPreferenceCloudService } from '../../../services/local-preference-cloud.service';
 import { TaskFilterCloudService } from './task-filter-cloud.service';
-import { UserPreferenceCloudService } from '../../../services/user-preference.cloud.service';
 import {
     fakeTaskCloudPreferenceList,
     fakeTaskCloudFilters,
@@ -26,10 +27,12 @@ import {
     fakePreferenceWithNoTaskFilterPreference,
     fakeTaskFilter
 } from '../mock/task-filters-cloud.mock';
+import { UserPreferenceCloudService } from '../../../services/user-preference-cloud.service';
+import { PreferenceCloudServiceInterface } from '../../../services/preference-cloud.interface';
 
-describe('Task Filter Cloud Service', () => {
+describe('TaskFilterCloudService', () => {
     let service: TaskFilterCloudService;
-    let userPreferenceCloudService: UserPreferenceCloudService;
+    let preferenceCloudService: PreferenceCloudServiceInterface;
     let identityUserService: IdentityUserService;
     let getPreferencesSpy: jasmine.Spy;
     let getPreferenceByKeySpy: jasmine.Spy;
@@ -43,17 +46,22 @@ describe('Task Filter Cloud Service', () => {
         imports: [
             CoreModule.forRoot()
         ],
-        providers: [TaskFilterCloudService, UserPreferenceCloudService, IdentityUserService]
+        providers: [
+            TaskFilterCloudService,
+            LocalPreferenceCloudService,
+            { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService },
+            IdentityUserService
+        ]
     });
 
     beforeEach(async(() => {
         service = TestBed.get(TaskFilterCloudService);
-        userPreferenceCloudService = TestBed.get(UserPreferenceCloudService);
+        preferenceCloudService = service.preferenceService;
         identityUserService = TestBed.get(IdentityUserService);
-        createPreferenceSpy = spyOn(userPreferenceCloudService, 'createPreference').and.returnValue(of(fakeTaskCloudFilters));
-        updatePreferenceSpy = spyOn(userPreferenceCloudService, 'updatePreference').and.returnValue(of(fakeTaskCloudFilters));
-        getPreferencesSpy = spyOn(userPreferenceCloudService, 'getPreferences').and.returnValue(of(fakeTaskCloudPreferenceList));
-        getPreferenceByKeySpy = spyOn(userPreferenceCloudService, 'getPreferenceByKey').and.returnValue(of(fakeTaskCloudFilters));
+        createPreferenceSpy = spyOn(preferenceCloudService, 'createPreference').and.returnValue(of(fakeTaskCloudFilters));
+        updatePreferenceSpy = spyOn(preferenceCloudService, 'updatePreference').and.returnValue(of(fakeTaskCloudFilters));
+        getPreferencesSpy = spyOn(preferenceCloudService, 'getPreferences').and.returnValue(of(fakeTaskCloudPreferenceList));
+        getPreferenceByKeySpy = spyOn(preferenceCloudService, 'getPreferenceByKey').and.returnValue(of(fakeTaskCloudFilters));
         getCurrentUserInfoSpy = spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(identityUserMock);
     }));
 
@@ -61,6 +69,10 @@ describe('Task Filter Cloud Service', () => {
         expect(service).toBeDefined();
     });
 
+    it('should be able to use LocalPreferenceCloudService', () => {
+        expect(preferenceCloudService instanceof LocalPreferenceCloudService).toBeTruthy();
+    });
+
     it('should create task filter key by using appName and the username', (done) => {
         service.getTaskListFilters('fakeAppName').subscribe((res: any) => {
             expect(res).toBeDefined();
@@ -208,3 +220,38 @@ describe('Task Filter Cloud Service', () => {
         expect(updatePreferenceSpy).toHaveBeenCalled();
     });
 });
+
+describe('Inject [UserPreferenceCloudService] into the TaskFilterCloudService', () => {
+    let service: TaskFilterCloudService;
+    let preferenceCloudService: PreferenceCloudServiceInterface;
+    let identityUserService: IdentityUserService;
+
+    const identityUserMock = { username: 'fakeusername', firstName: 'fake-identity-first-name', lastName: 'fake-identity-last-name', email: 'fakeIdentity@email.com' };
+
+    setupTestBed({
+        imports: [
+            CoreModule.forRoot()
+        ],
+        providers: [
+            TaskFilterCloudService,
+            LocalPreferenceCloudService,
+            { provide: TASK_FILTERS_SERVICE_TOKEN, useClass: UserPreferenceCloudService },
+            IdentityUserService
+        ]
+    });
+
+    beforeEach(async(() => {
+        service = TestBed.get(TaskFilterCloudService);
+        preferenceCloudService = service.preferenceService;
+        identityUserService = TestBed.get(IdentityUserService);
+        spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(identityUserMock);
+    }));
+
+    it('should create TaskFilterCloudService instance', () => {
+        expect(service).toBeDefined();
+    });
+
+    it('should be able to inject UserPreferenceCloudService when you override with user preferece service', () => {
+        expect(preferenceCloudService instanceof UserPreferenceCloudService).toBeTruthy();
+    });
+});
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.ts b/lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.ts
index b66e572876..416752137b 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.ts
+++ b/lib/process-services-cloud/src/lib/task/task-filters/services/task-filter-cloud.service.ts
@@ -16,20 +16,23 @@
  */
 
 import { IdentityUserService, IdentityUserModel } from '@alfresco/adf-core';
-import { Injectable } from '@angular/core';
+import { Injectable, Inject } from '@angular/core';
 import { Observable, of, BehaviorSubject, throwError } from 'rxjs';
 import { TaskFilterCloudModel } from '../models/filter-cloud.model';
-import { UserPreferenceCloudService } from '../../../services/public-api';
 import { switchMap, map, catchError } from 'rxjs/operators';
+import { PreferenceCloudServiceInterface } from '../../../services/preference-cloud.interface';
+import { TASK_FILTERS_SERVICE_TOKEN } from '../../../services/cloud-token.service';
 
 @Injectable()
 export class TaskFilterCloudService {
-
     private filtersSubject: BehaviorSubject<TaskFilterCloudModel[]>;
     filters$: Observable<TaskFilterCloudModel[]>;
 
-    constructor( private identityUserService: IdentityUserService,
-                 private preferenceService: UserPreferenceCloudService) {
+    constructor(
+        private identityUserService: IdentityUserService,
+        @Inject(TASK_FILTERS_SERVICE_TOKEN)
+        public preferenceService: PreferenceCloudServiceInterface
+    ) {
         this.filtersSubject = new BehaviorSubject([]);
         this.filters$ = this.filtersSubject.asObservable();
     }
@@ -41,7 +44,7 @@ export class TaskFilterCloudService {
      */
     private createDefaultFilters(appName: string) {
         const key: string = this.prepareKey(appName);
-        this.preferenceService.getPreferences(appName).pipe(
+        this.preferenceService.getPreferences(appName, key).pipe(
             switchMap((response: any) => {
                 const preferences = (response && response.list && response.list.entries) ? response.list.entries : [];
                 if (!this.hasPreferences(preferences)) {
@@ -116,7 +119,7 @@ export class TaskFilterCloudService {
      * @param id ID of the task
      * @returns Details of the task filter
      */
-    getTaskFilterById(appName: string, id: string): any {
+    getTaskFilterById(appName: string, id: string): Observable<TaskFilterCloudModel> {
         const key: string = this.prepareKey(appName);
         return this.getTaskFiltersByKey(appName, key).pipe(
             switchMap((filters: TaskFilterCloudModel[]) => {
@@ -140,7 +143,7 @@ export class TaskFilterCloudService {
      * @param filter The new filter to add
      * @returns Observable of task instance filters with newly added filter
      */
-    addFilter(newFilter: TaskFilterCloudModel) {
+    addFilter(newFilter: TaskFilterCloudModel): Observable<TaskFilterCloudModel[]> {
         const key: string = this.prepareKey(newFilter.appName);
         return this.getTaskFiltersByKey(newFilter.appName, key).pipe(
             switchMap((filters: TaskFilterCloudModel[]) => {
@@ -177,7 +180,7 @@ export class TaskFilterCloudService {
                 } else {
                     const itemIndex = filters.findIndex((filter: TaskFilterCloudModel) => filter.id === updatedFilter.id);
                     filters[itemIndex] = updatedFilter;
-                    return this.updateProcessFilters(updatedFilter.appName, key, filters);
+                    return this.updateTaskFilters(updatedFilter.appName, key, filters);
                 }
             }),
             map((updatedFilters: TaskFilterCloudModel[]) => {
@@ -199,7 +202,7 @@ export class TaskFilterCloudService {
             switchMap((filters: any) => {
                 if (filters && filters.length > 0) {
                     filters = filters.filter((filter: TaskFilterCloudModel) => filter.id !== deletedFilter.id);
-                    return this.updateProcessFilters(deletedFilter.appName, key, filters);
+                    return this.updateTaskFilters(deletedFilter.appName, key, filters);
                 }
             }),
             map((filters: TaskFilterCloudModel[]) => {
@@ -217,7 +220,7 @@ export class TaskFilterCloudService {
      * @param filters Details of update filter
      * @returns Observable of updated task filters
      */
-    private updateProcessFilters(appName: string, key: string, filters: TaskFilterCloudModel[]): Observable<TaskFilterCloudModel[]> {
+    private updateTaskFilters(appName: string, key: string, filters: TaskFilterCloudModel[]): Observable<TaskFilterCloudModel[]> {
         return this.preferenceService.updatePreference(appName, key, filters);
     }
 
diff --git a/package-lock.json b/package-lock.json
index 1e99bf16e3..ab143d2c00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18930,4 +18930,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file