fix: improve import + migrate 4 components to OnPush strategy

ui/src/app/shared/action/action.component.ts

@@ -1,22 +1,22 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { Router } from '@angular/router';
+import { Action } from 'app/model/action.model';
+import { AllKeys } from 'app/model/keys.model';
+import { Parameter } from 'app/model/parameter.model';
+import { Pipeline } from 'app/model/pipeline.model';
+import { Project } from 'app/model/project.model';
+import { Requirement } from 'app/model/requirement.model';
+import { Stage } from 'app/model/stage.model';
 import { WorkerModel } from 'app/model/worker-model.model';
 import { ActionService } from 'app/service/action/action.service';
 import { WorkerModelService } from 'app/service/services.module';
+import { ActionEvent } from 'app/shared/action/action.event.model';
+import { StepEvent } from 'app/shared/action/step/step.event';
+import { ParameterEvent } from 'app/shared/parameter/parameter.event.model';
+import { RequirementEvent } from 'app/shared/requirements/requirement.event.model';
+import { SharedService } from 'app/shared/shared.service';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { DragulaService } from 'ng2-dragula';
-import { Action } from '../../model/action.model';
-import { AllKeys } from '../../model/keys.model';
-import { Parameter } from '../../model/parameter.model';
-import { Pipeline } from '../../model/pipeline.model';
-import { Project } from '../../model/project.model';
-import { Requirement } from '../../model/requirement.model';
-import { Stage } from '../../model/stage.model';
-import { ParameterEvent } from '../parameter/parameter.event.model';
-import { RequirementEvent } from '../requirements/requirement.event.model';
-import { SharedService } from '../shared.service';
-import { ActionEvent } from './action.event.model';
-import { StepEvent } from './step/step.event';
 
 @Component({
     selector: 'app-action',

ui/src/app/shared/action/step/form/step.form.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
-import { Action } from '../../../../model/action.model';
-import { StepEvent } from '../step.event';
+import { Action } from 'app/model/action.model';
+import { StepEvent } from 'app/shared/action/step/step.event';
 
 @Component({
     selector: 'app-action-step-form',

ui/src/app/shared/action/step/step.component.ts

@@ -1,8 +1,8 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Action } from '../../../model/action.model';
-import { AllKeys } from '../../../model/keys.model';
-import { Parameter } from '../../../model/parameter.model';
-import { StepEvent } from './step.event';
+import { Action } from 'app/model/action.model';
+import { AllKeys } from 'app/model/keys.model';
+import { Parameter } from 'app/model/parameter.model';
+import { StepEvent } from 'app/shared/action/step/step.event';
 
 @Component({
     selector: 'app-action-step',

ui/src/app/shared/audit/list/audit.list.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { AuditWorkflow } from 'app/model/audit.model';
+import { Item } from 'app/shared/diff/list/diff.list.component';
 import { Column, ColumnType } from 'app/shared/table/data-table.component';
-import { AuditWorkflow } from '../../../model/audit.model';
-import { Item } from '../../diff/list/diff.list.component';
 
 @Component({
     selector: 'app-audit-list',

ui/src/app/shared/button/delete/delete.button.ts

@@ -1,9 +1,10 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
     selector: 'app-delete-button',
     templateUrl: './delete.html',
-    styleUrls: ['./delete.scss']
+    styleUrls: ['./delete.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DeleteButtonComponent {
     @Input() loading = false;

ui/src/app/shared/chart/chart.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import {GraphConfiguration} from '../../model/graph.model';
+import { GraphConfiguration } from 'app/model/graph.model';
 
 @Component({
     selector: 'app-chart',

ui/src/app/shared/commit/commit.list.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
-import { Commit } from '../../model/repositories.model';
-import { Table } from '../table/table';
+import { Commit } from 'app/model/repositories.model';
+import { Table } from 'app/shared/table/table';
 
 @Component({
     selector: 'app-commit-list',

ui/src/app/shared/diff/diff.ts

@@ -1,6 +1,7 @@
-import { WorkflowTemplate } from '../../model/workflow-template.model';
-import { Base64 } from '../../shared/base64.utils';
-import { Item } from './list/diff.list.component';
+import { WorkflowTemplate } from 'app/model/workflow-template.model';
+import { Base64 } from 'app/shared/base64.utils';
+import { Item } from 'app/shared/diff/list/diff.list.component';
+
 
 export function calculateWorkflowTemplateDiff(before: WorkflowTemplate, after: WorkflowTemplate): Array<Item> {
     let beforeTemplate: any;

ui/src/app/shared/diff/item/diff.item.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { ThemeStore } from 'app/service/theme/theme.store';
+import { AutoUnsubscribe } from 'app/shared/decorator/autoUnsubscribe';
 import * as JsDiff from 'diff';
 import { Subscription } from 'rxjs';
-import { ThemeStore } from '../../../service/services.module';
-import { AutoUnsubscribe } from '../../../shared/decorator/autoUnsubscribe';
 
 export class Mode {
     static UNIFIED = 'unified';

ui/src/app/shared/diff/list/diff.list.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { Mode } from '../item/diff.item.component';
+import { Mode } from 'app/shared/diff/item/diff.item.component';
 
 export class Item {
     name: string;

ui/src/app/shared/favorite-cards/favorite-cards.component.ts

@@ -1,10 +1,10 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Store } from '@ngxs/store';
+import { Bookmark } from 'app/model/bookmark.model';
+import { NavbarProjectData } from 'app/model/navbar.model';
 import { UpdateFavoriteProject } from 'app/store/project.action';
 import { UpdateFavoriteWorkflow } from 'app/store/workflow.action';
 import { finalize } from 'rxjs/operators';
-import { Bookmark } from '../../model/bookmark.model';
-import { NavbarProjectData } from '../../model/navbar.model';
 
 @Component({
     selector: 'app-favorite-cards',

ui/src/app/shared/group/form/group.form.component.ts

@@ -1,10 +1,11 @@
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {Group} from '../../../model/group.model';
 
 @Component({
     selector: 'app-group-form',
     templateUrl: './group.form.html',
-    styleUrls: ['./group.form.scss']
+    styleUrls: ['./group.form.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GroupFormComponent {
     @Input() group: Group;

ui/src/app/shared/keys/form/keys.form.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Key, KeyType } from 'app/model/keys.model';
+import { KeyEvent } from 'app/shared/keys/key.event';
 import cloneDeep from 'lodash-es/cloneDeep';
-import { Key, KeyType } from '../../../model/keys.model';
-import { KeyEvent } from '../key.event';
 
 @Component({
     selector: 'app-keys-form',

ui/src/app/shared/keys/key.event.ts

@@ -1,4 +1,5 @@
-import {Key} from '../../model/keys.model';
+import { Key } from 'app/model/keys.model';
+
 export class KeyEvent {
     type: string;
     key: Key;

ui/src/app/shared/keys/list/keys.list.component.ts

@@ -1,9 +1,9 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Key } from '../../../model/keys.model';
-import { PermissionValue } from '../../../model/permission.model';
-import { Warning } from '../../../model/warning.model';
-import { Table } from '../../table/table';
-import { KeyEvent } from '../key.event';
+import { Key } from 'app/model/keys.model';
+import { PermissionValue } from 'app/model/permission.model';
+import { Warning } from 'app/model/warning.model';
+import { KeyEvent } from 'app/shared/keys/key.event';
+import { Table } from 'app/shared/table/table';
 
 @Component({
     selector: 'app-keys-list',

ui/src/app/shared/labels/edit/labels.edit.component.ts

@@ -1,12 +1,12 @@
 import { Component, Input, ViewChild } from '@angular/core';
 import { Store } from '@ngxs/store';
+import { PermissionValue } from 'app/model/permission.model';
+import { Label, Project } from 'app/model/project.model';
 import { SaveLabelsInProject } from 'app/store/project.action';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { ModalTemplate, SuiModalService, TemplateModalConfig } from 'ng2-semantic-ui';
 import { ActiveModal } from 'ng2-semantic-ui/dist';
 import { finalize } from 'rxjs/operators';
-import { PermissionValue } from '../../../model/permission.model';
-import { Label, Project } from '../../../model/project.model';
 
 @Component({
     selector: 'app-labels-edit',

ui/src/app/shared/parameter/description-popup/description.popup.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import {Parameter} from '../../../model/parameter.model';
+import { Parameter } from 'app/model/parameter.model';
 
 @Component({
     selector: 'app-parameter-description',

ui/src/app/shared/parameter/form/parameter.form.ts

@@ -1,10 +1,10 @@
 import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { AllKeys } from '../../../model/keys.model';
-import { Parameter } from '../../../model/parameter.model';
-import { Project } from '../../../model/project.model';
-import { ParameterService } from '../../../service/parameter/parameter.service';
-import { SharedService } from '../../shared.service';
-import { ParameterEvent } from '../parameter.event.model';
+import { AllKeys } from 'app/model/keys.model';
+import { Parameter } from 'app/model/parameter.model';
+import { Project } from 'app/model/project.model';
+import { ParameterService } from 'app/service/parameter/parameter.service';
+import { ParameterEvent } from 'app/shared/parameter/parameter.event.model';
+import { SharedService } from 'app/shared/shared.service';
 
 @Component({
     selector: 'app-parameter-form',

ui/src/app/shared/parameter/list/parameter.component.ts

@@ -1,11 +1,11 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { AllKeys } from '../../../model/keys.model';
-import { Parameter } from '../../../model/parameter.model';
-import { Project } from '../../../model/project.model';
-import { ParameterService } from '../../../service/parameter/parameter.service';
-import { SharedService } from '../../shared.service';
-import { Table } from '../../table/table';
-import { ParameterEvent } from '../parameter.event.model';
+import { AllKeys } from 'app/model/keys.model';
+import { Parameter } from 'app/model/parameter.model';
+import { Project } from 'app/model/project.model';
+import { ParameterService } from 'app/service/parameter/parameter.service';
+import { ParameterEvent } from 'app/shared/parameter/parameter.event.model';
+import { SharedService } from 'app/shared/shared.service';
+import { Table } from 'app/shared/table/table';
 
 @Component({
     selector: 'app-parameter-list',

ui/src/app/shared/permission/form/permission.form.component.ts

@@ -1,9 +1,9 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
+import { Group, GroupPermission } from 'app/model/group.model';
+import { GroupService } from 'app/service/group/group.service';
+import { PermissionEvent } from 'app/shared/permission/permission.event.model';
+import { PermissionService } from 'app/shared/permission/permission.service';
 import {first} from 'rxjs/operators';
-import {Group, GroupPermission} from '../../../model/group.model';
-import {GroupService} from '../../../service/group/group.service';
-import {PermissionEvent} from '../permission.event.model';
-import {PermissionService} from '../permission.service';
 
 @Component({
     selector: 'app-permission-form',

ui/src/app/shared/permission/list/permission.list.component.ts

@@ -1,9 +1,9 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { GroupPermission } from '../../../model/group.model';
-import { Table } from '../../table/table';
-import { PermissionEvent } from '../permission.event.model';
-import { PermissionService } from '../permission.service';
+import { GroupPermission } from 'app/model/group.model';
+import { PermissionEvent } from 'app/shared/permission/permission.event.model';
+import { PermissionService } from 'app/shared/permission/permission.service';
+import { Table } from 'app/shared/table/table';
 
 @Component({
     selector: 'app-permission-list',

ui/src/app/shared/permission/permission.event.model.ts

@@ -1,5 +1,5 @@
-import {Environment} from '../../model/environment.model';
-import {GroupPermission} from '../../model/group.model';
+import { Environment } from 'app/model/environment.model';
+import { GroupPermission } from 'app/model/group.model';
 
 export class PermissionEvent {
     type: string;

ui/src/app/shared/prerequisites/form/prerequisites.form.component.ts

@@ -1,6 +1,6 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {Prerequisite} from '../../../model/prerequisite.model';
-import {PrerequisiteEvent} from '../prerequisite.event.model';
+import { Prerequisite } from 'app/model/prerequisite.model';
+import { PrerequisiteEvent } from 'app/shared/prerequisites/prerequisite.event.model';
 
 @Component({
     selector: 'app-prerequisites-form',

ui/src/app/shared/prerequisites/list/prerequisites.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Prerequisite } from '../../../model/prerequisite.model';
-import { Table } from '../../table/table';
-import { PrerequisiteEvent } from '../prerequisite.event.model';
+import { Prerequisite } from 'app/model/prerequisite.model';
+import { PrerequisiteEvent } from 'app/shared/prerequisites/prerequisite.event.model';
+import { Table } from 'app/shared/table/table';
 
 @Component({
     selector: 'app-prerequisites-list',

ui/src/app/shared/prerequisites/prerequisite.event.model.ts

@@ -1,4 +1,4 @@
-import {Prerequisite} from '../../model/prerequisite.model';
+import { Prerequisite } from 'app/model/prerequisite.model';
 
 export class PrerequisiteEvent {
     type: string;

ui/src/app/shared/project-breadcrumb/project-breadcrumb.component.ts

@@ -1,8 +1,8 @@
 import {Component, Input} from '@angular/core';
-import {Action} from '../../model/action.model';
-import {Application} from '../../model/application.model';
-import {Pipeline} from '../../model/pipeline.model';
-import {Project} from '../../model/project.model';
+import { Action } from 'app/model/action.model';
+import { Application } from 'app/model/application.model';
+import { Pipeline } from 'app/model/pipeline.model';
+import { Project } from 'app/model/project.model';
 
 @Component({
     selector: 'app-project-breadcrumb',

ui/src/app/shared/repomanager/from/repomanager.form.component.ts

@@ -1,17 +1,17 @@
 import { Component, Input, ViewChild } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Store } from '@ngxs/store';
+import { Project } from 'app/model/project.model';
+import { RepoManagerService } from 'app/service/repomanager/project.repomanager.service';
+import { WarningModalComponent } from 'app/shared/modal/warning/warning.component';
+import { ToastService } from 'app/shared/toast/ToastService';
 import {
     CallbackRepositoryManagerBasicAuthInProject,
     CallbackRepositoryManagerInProject,
     ConnectRepositoryManagerInProject
 } from 'app/store/project.action';
 import { ProjectState, ProjectStateModel } from 'app/store/project.state';
 import { finalize, flatMap } from 'rxjs/operators';
-import { Project } from '../../../model/project.model';
-import { RepoManagerService } from '../../../service/repomanager/project.repomanager.service';
-import { WarningModalComponent } from '../../modal/warning/warning.component';
-import { ToastService } from '../../toast/ToastService';
 
 @Component({
     selector: 'app-repomanager-form',

ui/src/app/shared/requirements/form/requirements.form.component.ts

@@ -4,9 +4,9 @@ import { SharedInfraGroupName } from 'app/model/group.model';
 import { Requirement } from 'app/model/requirement.model';
 import { WorkerModel } from 'app/model/worker-model.model';
 import { RequirementStore } from 'app/service/requirement/requirement.store';
+import { RequirementEvent } from 'app/shared/requirements/requirement.event.model';
 import { SemanticModalComponent } from 'ng-semantic/ng-semantic';
 import { first } from 'rxjs/operators';
-import { RequirementEvent } from '../requirement.event.model';
 
 export const OSArchitecture = 'os-architecture';
 

ui/src/app/shared/requirements/list/requirements.list.component.ts

@@ -1,11 +1,11 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { SharedInfraGroupName } from 'app/model/group.model';
+import { Requirement } from 'app/model/requirement.model';
+import { WorkerModel } from 'app/model/worker-model.model';
+import { RequirementStore } from 'app/service/requirement/requirement.store';
+import { RequirementEvent } from 'app/shared/requirements/requirement.event.model';
+import { Table } from 'app/shared/table/table';
 import { first } from 'rxjs/operators';
-import { Requirement } from '../../../model/requirement.model';
-import { WorkerModel } from '../../../model/worker-model.model';
-import { RequirementStore } from '../../../service/requirement/requirement.store';
-import { Table } from '../../table/table';
-import { RequirementEvent } from '../requirement.event.model';
 
 export const OSArchitecture = 'os-architecture';
 

ui/src/app/shared/requirements/requirement.event.model.ts

@@ -1,4 +1,4 @@
-import {Requirement} from '../../model/requirement.model';
+import { Requirement } from 'app/model/requirement.model';
 
 export class RequirementEvent {
     type: string;