Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

9 files changed, 629 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html
new file mode 100644
index 0000000000..127531bfab
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.html
@@ -0,0 +1,18 @@
+<form>
+    <div>
+        <div class="comment-modal-text" [innerHTML]="message"></div>
+        <sdc-textarea #comment1
+                      [(value)]="comment.text"
+                      placeHolder="{{'CONFIRMATION_MODAL_PLACEHOLDER' | translate }}"
+                      [required]="true"
+                      name="comment1"
+                      testId="checkindialog"
+                      [maxLength]="256">
+        </sdc-textarea>
+        <sdc-validation [validateElement]="comment1" (validityChanged)="onValidityChange($event)">
+            <sdc-required-validator message="{{ 'VALIDATION_ERROR_REQUIRED' | translate:{'field': 'Comment' } }}"></sdc-required-validator>
+            <sdc-regex-validator message="{{ 'VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED' | translate}}"
+                                 [pattern]="commentValidationPattern"></sdc-regex-validator>
+        </sdc-validation>
+    </div>
+</form>
diff --git a/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts
new file mode 100644
index 0000000000..c66f60b5e7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.component.ts
@@ -0,0 +1,25 @@
+/**
+ * Created by rc2122 on 5/31/2018.
+ */
+import { Component, Input } from "@angular/core";
+import { ValidationConfiguration } from "app/models";
+import { Subject } from "rxjs/Subject";
+
+@Component({
+    selector: 'comment-modal',
+    templateUrl: './comment-modal.component.html',
+    styleUrls: ['./comment-modal.less']
+})
+
+export class CommentModalComponent {
+
+    @Input() message:string;
+    onValidationChange: Subject<boolean> = new Subject();
+    //@Input() showComment:boolean;
+    private comment = {"text": ''};
+    private commentValidationPattern = ValidationConfiguration.validation.validationPatterns.comment;
+
+    private onValidityChange = (isValid: boolean):void => {
+        this.onValidationChange.next(isValid);
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less
new file mode 100644
index 0000000000..8e20e81115
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/comment-modal/comment-modal.less
@@ -0,0 +1,3 @@
+.comment-modal-text {
+  padding-bottom: 5px;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/modals/modals.module.ts b/catalog-ui/src/app/ng2/components/modals/modals.module.ts
new file mode 100644
index 0000000000..5aa7f08b60
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/modals.module.ts
@@ -0,0 +1,29 @@
+/**
+ * Created by rc2122 on 5/24/2018.
+ */
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { CommentModalComponent } from 'app/ng2/components/modals/comment-modal/comment-modal.component';
+import { PopoverModule } from 'app/ng2/components/ui/popover/popover.module';
+import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
+import { SdcUiComponentsModule } from 'onap-ui-angular';
+import { OnboardingService } from '../../services/onboarding.service';
+import { ImportVSPService } from './onboarding-modal/import-vsp.service';
+import { OnboardingModalComponent } from './onboarding-modal/onboarding-modal.component';
+
+@NgModule({
+    declarations: [CommentModalComponent, OnboardingModalComponent],
+    imports: [TranslateModule,
+        SdcUiComponentsModule,
+        CommonModule,
+        PopoverModule,
+        NgxDatatableModule],
+    exports: [CommentModalComponent, OnboardingModalComponent],
+    entryComponents: [CommentModalComponent, OnboardingModalComponent],
+    providers: [OnboardingService, ImportVSPService],
+    bootstrap: []
+})
+
+export class ModalsModule {
+}
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts
new file mode 100644
index 0000000000..8e7364660f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/import-vsp.service.ts
@@ -0,0 +1,36 @@
+import { Injectable, Inject } from "@angular/core";
+import { OnboardingModalComponent } from "./onboarding-modal.component";
+import { SdcUiServices, SdcUiCommon } from "onap-ui-angular";
+import { Observable, Subject } from "rxjs";
+import { CHANGE_COMPONENT_CSAR_VERSION_FLAG } from "../../../../utils/constants";
+import { CacheService } from "../../../services/cache.service";
+
+
+@Injectable()
+export class ImportVSPService {
+
+    constructor(private modalService: SdcUiServices.ModalService,
+                private cacheService:CacheService,
+                @Inject("$state") private $state:ng.ui.IStateService){
+
+    }
+    
+    openOnboardingModal(csarUUID?: string, csarVersion?: string): Observable<any> {
+        var subject = new Subject<any>();
+        const onboardingModalConfig = {
+            size: SdcUiCommon.ModalSize.xlarge,
+            title: 'Import VSP',      
+            type: SdcUiCommon.ModalType.custom,
+            testId: 'sampleTestIdModal1',
+        } as SdcUiCommon.IModalConfig;
+        const onboardingModalInstance = this.modalService.openCustomModal(onboardingModalConfig, OnboardingModalComponent, {currentCsarUUID: csarUUID, currentCsarVersion: csarVersion});
+        onboardingModalInstance.innerModalContent.instance.closeModalEvent.subscribe(
+            (result: any) => {
+                subject.next(result);
+                onboardingModalInstance.closeModal(); 
+            }, (err) =>{}
+        )
+        return subject.asObservable();
+    }
+}
+   
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html
new file mode 100644
index 0000000000..6ba1f428a1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.html
@@ -0,0 +1,106 @@
+<div class="onboarding-modal">
+    <div class="search-wrapper">
+        <span class="sub-title-wrapper">
+            <svg-icon class="info-button" 
+                (click) = "openPopover($event, 'ON_BOARDING_GENERAL_INFO')"
+                [name]="'info-circle-o'" [mode]="'primary'"
+                [size]="'medium'"></svg-icon>
+            <span class="sub-title">{{ 'ON_BOARDING_MODAL_SUB_TITLE' | translate }}</span>
+        </span>
+        <span class="sdc-filter-bar-wrapper">
+            <sdc-filter-bar
+                [placeHolder]="'Search'"
+                (keyup)="updateFilter($event)"
+                [testId]="'onboarding-search'">
+            </sdc-filter-bar>
+        </span>   
+    </div>
+    <div class="datatable-components-wapper">
+    <ngx-datatable #componentsMetadataTable 
+        columnMode="flex" 
+        [headerHeight]="40"  
+        [rowHeight]="35" 
+        [rows]="componentsMetadataList"
+        [sorts]="[{prop: 'name', dir: 'asc'}]"
+        (select)='onSelectComponent($event)' 
+        [selectionType]="'single'">
+        <ngx-datatable-row-detail [rowHeight]="undefiend">
+            <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template  >
+                <div class="onboarding-components-details">
+                    <span class="row-details-description">
+                        <div>
+                            <div class="th">VSP Description:</div>
+                            <div>{{row.description}}</div>
+                        </div>
+                    </span>
+                    <span class="row-details-metadata1">
+                        <div *ngIf="isCsarComponentExists">
+                            <div class="th">VF'S Meta Data:</div>
+                            <div><span class="th">Name:</span>{{componentFromServer.name}}</div>
+                            <div><span class="th">Lifecycle:</span>{{componentFromServer.lifecycleState}}</div>
+                            <div><span class="th">Creator:</span>{{componentFromServer.creatorFullName}}</div>
+                        </div>
+                    </span>
+                    <span class="row-details-metadata2">
+                        <div *ngIf="isCsarComponentExists">
+                            <div class="th">&nbsp;</div>
+                            <div><span class="th">UUID:</span> {{componentFromServer.uuid}}</div>
+                            <div><span class="th">Version:</span> {{componentFromServer.version}}</div>
+                            <div><span class="th">Modifier:</span> {{componentFromServer.lastUpdaterFullName}}</div>
+                            <div *ngIf="checkNotCertified()">
+                                <span class="note">Designers cannot update a VSP if the VF is <br>checked out by another user.</span>
+                            </div>
+                        </div>
+                    </span>
+                    <span class="row-details-metadata3">
+                        <svg-icon class="info-button" 
+                        (click) = "openPopover($event, isCsarComponentExists ? 'ON_BOARDING_UPDATE_INFO' : 'ON_BOARDING_IMPORT_INFO')"
+                        [name]="'info-circle-o'" [mode]="'primary'"
+                        [size]="'medium'"></svg-icon>
+                    </span>
+                    <span class="row-details-icon">
+                        <div>
+                            <sdc-button class="import-update-file-btn"
+                            [text]="isCsarComponentExists ? 'Update VSP' : 'Import VSP'"
+                            [testId]="isCsarComponentExists ? 'update-csar' : 'import-csar'"
+                            [type]="'primary'"
+                            [icon_name]="isCsarComponentExists ? 'sync-o' : 'alert-triangle-o'"
+                            [icon_position]="'left'"
+                            [icon_mode] = "'white'"
+                            [size] = "'medium'"
+                            (click)="importOrUpdateCsar()"
+                            [disabled]="checkNotCertified()"
+                          >
+                        </sdc-button>
+                            <svg-icon class="download-file-btn" sdc-tooltip [tooltip-text]="'Download-csar'"
+                                [mode]="'primary'"  [clickable]="true" [name]="'download-o'" 
+                                [testId]="'download-csar'" [size]="'medium'" (click)="downloadCsar(row.packageId)">
+                            </svg-icon>
+                        </div>
+                    </span>     
+                </div>
+                <sdc-loader [global]="false" [active]="isLoad" [size]="'small'"[relative]="true"></sdc-loader>
+            </ng-template>
+        </ngx-datatable-row-detail>
+        <ngx-datatable-column *ngFor="let column of columns" [ngSwitch]="column.prop" [resizeable]="false" [draggable]="false" name={{column.name}}
+            [flexGrow]="column.flexGrow">
+            <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchCase="'name'">
+                <span data-tests-id="csar-row" class="sprite table-arrow" [ngClass]="{'opened': selectedComponent && row.packageId === selectedComponent.packageId}"></span>
+                    {{row[column.prop]}}
+            </ng-template>
+            <ng-template  ngx-datatable-cell-template let-row="row" *ngSwitchCase="'categories'">
+                <span *ngIf="row[column.prop][0]">
+                    {{row[column.prop][0].name}}&nbsp;
+                    <span *ngIf="row[column.prop][0].subcategories[0]">{{row[column.prop][0].subcategories[0].name}}</span>
+                </span> 
+            </ng-template>
+            <ng-template ngx-datatable-cell-template let-row="row" *ngSwitchDefault>
+                {{row[column.prop]}}
+            </ng-template>
+        </ngx-datatable-column>
+    </ngx-datatable>
+</div>
+</div>
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less
new file mode 100644
index 0000000000..2e4abda35e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.less
@@ -0,0 +1,97 @@
+@import "../../../../../assets/styles/variables";
+@import "../../../../../assets/styles/mixins";
+
+
+.onboarding-components-details{
+    display: flex;
+}
+.row-details-description,
+.row-details-metadata1,
+.row-details-metadata2,
+.row-details-metadata3{
+    .th { .m_14_m; }
+    flex-basis: 0;
+    overflow: hidden;
+    padding: 5px 15px;
+    white-space: normal;
+}
+.row-details-description,
+.row-details-metadata3 {
+    border-right: 1px solid @main_color_o;
+}
+
+.row-details-icon {
+    flex-basis: 0;
+    overflow: hidden;
+    padding: 5px 10px;
+    align-self: center;
+}
+
+.row-details-description {
+    flex-grow: 19;
+}
+.row-details-metadata1 {
+    flex-grow: 26.5;
+}
+.row-details-metadata2 {
+    flex-grow: 35;
+    .note {
+        color: @func_color_q;
+    }
+}
+.row-details-metadata3 {
+    flex-grow: 8;  
+}
+.info-button{
+    cursor: pointer;
+    float: right;
+}
+.row-details-icon {
+    flex-grow: 18; 
+}
+.download-file-btn {
+    cursor: pointer;
+    margin-left: 6px;
+}
+
+.import-update-file-btn {
+    cursor: pointer;
+}
+.sprite.table-arrow{
+    margin-right: 7px;
+}
+.search-wrapper {
+    .sdc-filter-bar-wrapper {
+      flex: 0 0 30%;
+    }
+    .sub-title-wrapper {
+        flex: 0 0 70%;
+        font-size: 15px;
+        line-height: 35px;
+        font-family: OpenSans-Regular, sans-serif;
+        align-items: center;
+        display: inline-flex;
+        .sub-title{
+            padding-left: 5px;
+        }
+    }
+    display: flex;
+    margin-top: 15px;
+    margin-bottom: 10px;
+  }
+
+  :host ::ng-deep {
+    .datatable-row-detail{
+        width: 1120px;
+    }
+    .datatable-body-row {
+        cursor: pointer;
+    }
+  }
+
+
+
+
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts
new file mode 100644
index 0000000000..565398b6ad
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.spec.ts
@@ -0,0 +1,122 @@
+import {async, ComponentFixture, TestBed} from "@angular/core/testing";
+import { NO_ERRORS_SCHEMA} from "@angular/core";
+import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper";
+
+import {Observable} from "rxjs/Observable";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import {SdcUiServices, SdcUiCommon} from "onap-ui-angular";
+import 'rxjs/add/observable/of';
+import {OnboardingService} from "../../../services/onboarding.service";
+import {TranslateService} from "../../../shared/translator/translate.service";
+import {CacheService} from "../../../services/cache.service";
+import {FileUtilsService} from "../../../services/file-utils.service";
+import {onboardingModalVSPMock, onboardingModalUniqueVSPMock, vspFromServerMock} from "../../../../../jest/mocks/onboarding-vsp.mock";
+import {OnboardingModalComponent} from "./onboarding-modal.component";
+import {TranslatePipe} from "../../../shared/translator/translate.pipe";
+
+describe('onboarding modal component', () => {
+
+    let fixture: ComponentFixture<OnboardingModalComponent>;
+    let onboardingServiceMock: Partial<OnboardingService>;
+    let translateServiceMock: Partial<TranslateService>;
+    let cacheServiceMock: Partial<CacheService>;
+    let fileUtilsServiceMock: Partial<FileUtilsService>;
+    let popoverServiceMock: Partial<SdcUiServices.PopoverService>;
+    let loaderServiceMock: Partial<SdcUiServices.LoaderService>;
+
+    beforeEach(
+        async(() => {
+
+            onboardingServiceMock = {
+                getOnboardingComponents: jest.fn().mockImplementation(()=>  Observable.of(onboardingModalUniqueVSPMock)),
+                getComponentFromCsarUuid: jest.fn().mockImplementation(()=>  Observable.of(vspFromServerMock))
+            };
+
+            cacheServiceMock = {
+                set: jest.fn()
+            };
+
+            loaderServiceMock = {
+                activate: jest.fn(),
+                deactivate: jest.fn()
+            }
+
+
+            const configure: ConfigureFn = testBed => {
+                testBed.configureTestingModule({
+                    declarations: [OnboardingModalComponent, TranslatePipe],
+                    imports: [NgxDatatableModule],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        { provide: OnboardingService, useValue: onboardingServiceMock },
+                        { provide: TranslateService, useValue: translateServiceMock },
+                        { provide: CacheService, useValue: cacheServiceMock },
+                        { provide: FileUtilsService, useValue: fileUtilsServiceMock },
+                        { provide: SdcUiServices.PopoverService, useValue: popoverServiceMock },
+                        { provide: SdcUiServices.LoaderService, useValue: loaderServiceMock }
+                    ],
+                });
+            };
+            configureTests(configure).then(testBed => {
+                fixture = testBed.createComponent(OnboardingModalComponent);
+            });
+        })
+    );
+
+    /*it('should match current snapshot of onboarding modal component', () => {
+        expect(fixture).toMatchSnapshot();
+    });*/
+
+    it('should see exactly 2 vsp in onboarding modal and call initOnboardingComponentsList', () => {
+        fixture.componentInstance.initOnboardingComponentsList();
+        expect(fixture.componentInstance.componentsMetadataList.length).toBe(2);
+    });
+
+    it('should see exactly 1 vsp in onboarding modal and call initOnboardingComponentsList', () => {
+        fixture.componentInstance.currentCsarUUID = "6348841e79a64871ba064ce340a968a4";
+        fixture.componentInstance.initOnboardingComponentsList();
+        expect(fixture.componentInstance.componentsMetadataList.length).toBe(1);
+    });
+
+    it('when get a list of vsp initMaxVersionOfItemsInList will return a list with unique items with the latest versions for each packageId', () => {
+        onboardingServiceMock.getOnboardingComponents = jest.fn().mockImplementation(() => Observable.of(onboardingModalVSPMock));
+        fixture.componentInstance.initOnboardingComponentsList();
+        expect(fixture.componentInstance.componentsMetadataList.length).toBe(2);
+    });
+
+    it('should filter out 1 vsp when searching and call updateFilter function', () => {
+        fixture.componentInstance.initOnboardingComponentsList();
+        let event = {
+            target : {
+                value : 'test new vsp'
+            }
+        }
+
+        expect(fixture.componentInstance.componentsMetadataList.length).toBe(2);
+        fixture.componentInstance.updateFilter(event);
+        expect(fixture.componentInstance.componentsMetadataList.length).toBe(1);
+    });
+
+    it('When select the selected vsp the row details closed and call onSelectComponent function', () => {
+        fixture.componentInstance.initOnboardingComponentsList();
+        fixture.componentInstance.onSelectComponent({selected: []});
+        expect(fixture.componentInstance.selectedComponent).toEqual(undefined);
+        expect(fixture.componentInstance.componentFromServer).toEqual(undefined);
+    });
+
+    it('When select vsp a row with its details will be opened and call onSelectComponent function', () => {
+        fixture.componentInstance.initOnboardingComponentsList();
+        fixture.componentInstance.onSelectComponent({selected: onboardingModalVSPMock});
+        expect(fixture.componentInstance.selectedComponent).not.toEqual(null);
+        expect(fixture.componentInstance.componentFromServer).not.toEqual(undefined);
+        expect(fixture.componentInstance.isCsarComponentExists).toEqual(true);
+    });
+    it('When select new vsp a row with import and download buttons will be opened and call onSelectComponent function', () => {
+        fixture.componentInstance.initOnboardingComponentsList();
+        onboardingServiceMock.getComponentFromCsarUuid.mockImplementation(() => Observable.of(undefined));
+        fixture.componentInstance.onSelectComponent({selected: onboardingModalVSPMock});
+        expect(fixture.componentInstance.selectedComponent).not.toEqual(null);
+        expect(fixture.componentInstance.componentFromServer).toEqual(undefined);
+        expect(fixture.componentInstance.isCsarComponentExists).toEqual(false);
+    });
+});
diff --git a/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts
new file mode 100644
index 0000000000..2e41716e0b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modals/onboarding-modal/onboarding-modal.component.ts
@@ -0,0 +1,193 @@
+/**
+ * Created by rc2122 on 6/3/2018.
+ */
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import * as _ from 'lodash';
+import { SdcUiServices } from 'onap-ui-angular';
+import { ComponentMetadata, IComponentMetadata } from '../../../../models/component-metadata';
+import { IUserProperties } from '../../../../models/user';
+
+import { Resource } from '../../../../models/components/resource';
+import { ComponentType } from '../../../../utils/constants';
+import { CacheService } from '../../../services/cache.service';
+import { FileUtilsService } from '../../../services/file-utils.service';
+import { OnboardingService } from '../../../services/onboarding.service';
+import { TranslateService } from '../../../shared/translator/translate.service';
+
+export interface ImportVSPdata {
+    componentCsar: Resource;
+    previousComponent?: Resource;
+    type: string;
+}
+
+// tslint:disable-next-line:interface-name
+export interface IPoint {
+    x: number;
+    y: number;
+}
+
+@Component({
+    selector: 'onboarding-modal',
+    templateUrl: './onboarding-modal.component.html',
+    styleUrls: ['onboarding-modal.component.less', '../../../../../assets/styles/table-style.less']
+})
+export class OnboardingModalComponent implements OnInit {
+    @Input() currentCsarUUID: string;
+    @Input() currentCsarVersion: string;
+    @ViewChild('componentsMetadataTable') table: any;
+    @Output() closeModalEvent: EventEmitter<ImportVSPdata> = new EventEmitter<ImportVSPdata>();
+
+    private columns = [
+        {name: 'Name', prop: 'name', flexGrow: 22},
+        {name: 'Vendor', prop: 'vendorName', flexGrow: 26},
+        {name: 'Category', prop: 'categories', flexGrow: 33},
+        {name: 'Version', prop: 'csarVersion', flexGrow: 10},
+        {name: 'Type', prop: 'resourceType', flexGrow: 10},
+        {name: '#', prop: '', flexGrow: 20}
+    ];
+    private componentsMetadataList: IComponentMetadata[] = [];
+    private temp: IComponentMetadata[] = [];
+    private componentFromServer: ComponentMetadata;
+    private isCsarComponentExists: boolean = false;
+    private selectedComponent: ComponentMetadata;
+    private isLoading: boolean;
+    private user: IUserProperties;
+
+    constructor(private onBoardingService: OnboardingService,
+                private translateService: TranslateService,
+                private cacheService: CacheService,
+                private fileUtilsService: FileUtilsService,
+                private popoverService: SdcUiServices.PopoverService,
+                private loaderService: SdcUiServices.LoaderService) {
+    }
+
+    public ngOnInit(): void {
+        this.initOnboardingComponentsList();
+        this.user = this.cacheService.get('user');
+    }
+
+    initMaxVersionOfItemsInList = (onboardingResponse: IComponentMetadata[]): void => {
+        // Get only the latest version of each item
+        this.componentsMetadataList = [];
+
+        // group all items according to packageId
+        const groupByPackageIdItems = _.groupBy(onboardingResponse, 'packageId');
+        // Loop on all the groups and push to componentsMetadataList the max version for each package
+        _.each(groupByPackageIdItems, (items: any): void => {
+            let maxItem: any = items[0];
+            items.forEach((item) => {
+                if (parseFloat(maxItem.csarVersion) < parseFloat(item.csarVersion)) {
+                    maxItem = item;
+                }
+            });
+            if (maxItem) {
+                this.componentsMetadataList.push(maxItem);
+            }
+        });
+    }
+
+    onSelectComponent({selected}) {
+        this.table.rowDetail.collapseAllRows();
+        if (selected[0] === this.selectedComponent) {
+            this.selectedComponent = undefined;
+            this.componentFromServer = undefined;
+            this.table.rowDetail.toggleExpandRow(null);
+            return;
+        }
+        this.isLoading = true;
+        this.componentFromServer = undefined;
+        this.selectedComponent = selected[0];
+        this.onBoardingService.getComponentFromCsarUuid(this.selectedComponent.csarUUID).subscribe(
+            (componentFromServer: ComponentMetadata) => {
+                this.isLoading = false;
+                if (componentFromServer) {
+                    this.componentFromServer = componentFromServer;
+                    this.populateRowDetails(true);
+                } else {
+                    this.populateRowDetails(false);
+                }
+            }, (error) => {
+                this.isLoading = false;
+                this.populateRowDetails(false);
+            });
+    }
+
+    populateRowDetails(isCsarComponentExists: boolean) {
+        this.isCsarComponentExists = isCsarComponentExists;
+        this.table.rowDetail.toggleExpandRow(this.selectedComponent);
+    }
+
+    importOrUpdateCsar = (): void => {
+        const selectedComponentConverted = this.onBoardingService.convertMetaDataToComponent(this.selectedComponent);
+        const componentFromServerConverted = this.componentFromServer ?
+            this.onBoardingService.convertMetaDataToComponent(this.componentFromServer) : undefined;
+        const importVSPdata: ImportVSPdata = {
+            componentCsar: selectedComponentConverted,
+            previousComponent: componentFromServerConverted,
+            type: ComponentType.RESOURCE.toLowerCase()
+        };
+        this.closeModalEvent.emit(importVSPdata);
+    }
+
+    downloadCsar = (packageId: string): void => {
+        this.isLoading = true;
+        this.onBoardingService.downloadOnboardingCsar(packageId).subscribe(
+            (file: any): void => {
+                this.isLoading = false;
+                if (file.body) {
+                    this.fileUtilsService.downloadFile(file.body, packageId + '.csar');
+                }
+            }, (): void => {
+                this.isLoading = false;
+            }
+        );
+    }
+
+    updateFilter(event) {
+        const val = event.target.value.toLowerCase();
+
+        // filter our data
+        const temp = this.temp.filter((componentMetadata: ComponentMetadata) => {
+            return !val ||
+                (componentMetadata.name && componentMetadata.name.toLowerCase().indexOf(val) !== -1) ||
+                (componentMetadata.vendorName && componentMetadata.vendorName.toLowerCase().indexOf(val) !== -1) ||
+                (componentMetadata.categories[0] && componentMetadata.categories[0].name.toLowerCase().indexOf(val) !== -1) ||
+                (componentMetadata.categories[0] && componentMetadata.categories[0].subcategories[0] && componentMetadata.categories[0].subcategories[0].name.toLowerCase().indexOf(val) !== -1) ||
+                (componentMetadata.csarVersion && componentMetadata.csarVersion.toLowerCase().indexOf(val) !== -1) ||
+                (componentMetadata.description && componentMetadata.description.toLowerCase().indexOf(val) !== -1);
+        });
+
+        // update the rows
+        this.componentsMetadataList = temp;
+    }
+
+    checkNotCertified = (): boolean => {
+        return this.componentFromServer && this.componentFromServer.lifecycleState === 'NOT_CERTIFIED_CHECKOUT' &&
+            this.componentFromServer.lastUpdaterUserId !== this.user.userId;
+    }
+
+    openPopover = ($event: any, popoverContent): void => {
+        this.popoverService.createPopOver('', this.translateService.translate(popoverContent), {
+            x: $event.pageX,
+            y: $event.pageY
+        }, 'bottom');
+    }
+
+    private initOnboardingComponentsList = (): void => {
+        this.loaderService.activate();
+        this.onBoardingService.getOnboardingComponents().subscribe(
+            (onboardingResponse: IComponentMetadata[]) => {
+                this.loaderService.deactivate();
+                if (this.currentCsarUUID) {
+                    onboardingResponse = _.filter(onboardingResponse, (input): boolean => {
+                        return (input as ComponentMetadata).csarUUID === this.currentCsarUUID;
+                    });
+                }
+                this.initMaxVersionOfItemsInList(onboardingResponse);
+                this.temp = [...this.componentsMetadataList];
+            }, (error) => {
+                this.loaderService.deactivate();
+            }
+        );
+    }
+}