[ACA-3358] Show user friendly error templates when there are no applications/processDefinitions (#5746)

* * Added empty template on start process component

* * Removed errorMessageId

* * Added unit tests to recent changes

* * Added doc

* * fixed comments

* * Used showError notification

* * After rebase

* * Fixed failing e2e

* * Fixed comments

lib/core/templates/empty-content/empty-content.component.html

@@ -1,5 +1,5 @@
 <div class="adf-empty-content">
-    <mat-icon class="adf-empty-content__icon">{{ icon }}</mat-icon>
+    <adf-icon class="adf-empty-content__icon" [value]="icon"></adf-icon>
     <div class="adf-empty-content__title">{{ title | translate }}</div>
     <div class="adf-empty-content__subtitle">{{ subtitle | translate }}</div>
     <ng-content></ng-content>

lib/core/templates/empty-content/empty-content.component.scss

@@ -4,6 +4,7 @@
 
     $config: mat-typography-config();
     $foreground: map-get($theme, foreground);
+    $adf-empty-content-icon-opacity: 0.6;
 
     .adf-empty-content {
         color: mat-color($foreground, text, 0.54);
@@ -12,9 +13,11 @@
         align-items: center;
 
         &__icon {
-            font-size: mat-font-size($config, display-3);
-            height: mat-font-size($config, display-3) !important;
-            width: mat-font-size($config, display-3) !important;
+            .mat-icon {
+                font-size: mat-font-size($config, display-3);
+                height: mat-font-size($config, display-3) !important;
+                width: mat-font-size($config, display-3) !important;
+            }
         }
 
         &__title {
@@ -35,4 +38,8 @@
             text-align: center;
         }
     }
+
+    .adf-icon {
+        opacity: $adf-empty-content-icon-opacity;
+    }
 }

lib/core/templates/template.module.ts

@@ -21,12 +21,14 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MaterialModule } from '../material.module';
 import { ErrorContentComponent } from './error-content/error-content.component';
 import { EmptyContentComponent } from './empty-content/empty-content.component';
+import { IconModule } from '../icon/icon.module';
 
 @NgModule({
     imports: [
         CommonModule,
         MaterialModule,
-        TranslateModule
+        TranslateModule,
+        IconModule
     ],
     declarations: [
         ErrorContentComponent,