[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>

19 files changed, 1061 insertions, 0 deletions

diff --git a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts
new file mode 100644
index 0000000000..3d8b6c3053
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view-model.ts
@@ -0,0 +1,73 @@
+'use strict';
+import {ValidationUtils, ModalType} from "app/utils";
+
+export interface IConfirmationModalModel {
+    title:string;
+    message:string;
+    showComment:boolean;
+    type:ModalType;
+}
+
+interface IConfirmationModalViewModelScope {
+    modalInstanceConfirmation:ng.ui.bootstrap.IModalServiceInstance;
+    confirmationModalModel:IConfirmationModalModel;
+    comment:any;
+    commentValidationPattern:RegExp;
+    editForm:ng.IFormController;
+    okButtonColor:string;
+    hideCancelButton:boolean;
+    ok():any;
+    cancel():void;
+}
+
+export class ConfirmationModalViewModel {
+
+    static '$inject' = ['$scope', '$uibModalInstance', 'confirmationModalModel', 'CommentValidationPattern', 'ValidationUtils'];
+
+    constructor(private $scope:IConfirmationModalViewModelScope,
+                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
+                confirmationModalModel:IConfirmationModalModel,
+                private CommentValidationPattern:RegExp,
+                private ValidationUtils:ValidationUtils) {
+
+        this.initScope(confirmationModalModel);
+    }
+
+    private initScope = (confirmationModalModel:IConfirmationModalModel):void => {
+        let self = this;
+        this.$scope.hideCancelButton = false;
+        this.$scope.modalInstanceConfirmation = this.$uibModalInstance;
+        this.$scope.confirmationModalModel = confirmationModalModel;
+        this.$scope.comment = {"text": ''};
+        this.$scope.commentValidationPattern = this.CommentValidationPattern;
+
+        this.$scope.ok = ():any => {
+            self.$uibModalInstance.close(this.ValidationUtils.stripAndSanitize(self.$scope.comment.text));
+        };
+
+        this.$scope.cancel = ():void => {
+            console.info('Cancel pressed on: ' + this.$scope.confirmationModalModel.title);
+            self.$uibModalInstance.dismiss();
+        };
+
+        // Set the OK button color according to modal type (standard, error, alert)
+        let _okButtonColor = 'blue'; // Default
+        switch (confirmationModalModel.type) {
+            case ModalType.STANDARD:
+                _okButtonColor = 'blue';
+                break;
+            case ModalType.ERROR:
+                _okButtonColor = 'red';
+                break;
+            case ModalType.ALERT:
+                this.$scope.hideCancelButton = true;
+                _okButtonColor = 'grey';
+                break;
+            default:
+                _okButtonColor = 'blue';
+                break;
+        }
+        this.$scope.okButtonColor = _okButtonColor;
+
+    }
+}
diff --git a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html
new file mode 100644
index 0000000000..09c27f8cd3
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal-view.html
@@ -0,0 +1,29 @@
+<sdc-modal modal="modalInstanceConfirmation" type="classic" class="w-sdc-modal-confirmation modal-type-{{confirmationModalModel.type}}" header="{{confirmationModalModel.title}}" show-close-button="true">
+    <form novalidate class="w-sdc-form" name="editForm">
+        <label class="i-sdc-form-label required w-sdc-modal-label" data-ng-bind-html="confirmationModalModel.message"></label>
+
+        <div class="i-sdc-form-item">
+            <textarea class="w-sdc-modal-body-comment"
+                      data-tests-id="checkindialog"
+                      autofocus="autofocus"
+                      data-ng-show="confirmationModalModel.showComment===true"
+                      data-ng-model="comment.text"
+                      placeholder="Comment..."
+                      maxlength="256"
+                      data-required
+                      name="comment1"
+                      data-ng-pattern="commentValidationPattern"
+                      data-ng-maxlength="256"></textarea>
+
+            <div class="input-error" data-ng-show="editForm.comment1.$dirty && editForm.comment1.$invalid">
+                <span ng-show="editForm.comment1.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                <span ng-show="editForm.comment1.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Comment' }"></span>
+            </div>
+        </div>
+    </form>
+    <div class="w-sdc-modal-footer classic">
+        <button class="tlv-btn {{okButtonColor}}" data-tests-id="OK" data-ng-click="ok()" data-ng-disabled="confirmationModalModel.showComment===true && (!comment.text || comment.text && comment.text.length===0)">OK</button>
+        <button class="tlv-btn grey" data-ng-if="hideCancelButton===false" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button>
+        <button class="tlv-btn blue add-property-add-another" data-ng-if="isNew" data-ng-click="saveAndAnother()" type="reset" data-ng-disabled="editForm.$invalid">Add Another</button>
+    </div>
+</sdc-modal>
diff --git a/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less
new file mode 100644
index 0000000000..666c41d5ed
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/confirmation-modal/confirmation-modal.less
@@ -0,0 +1,30 @@
+.w-sdc-modal-confirmation {
+    form.w-sdc-form{
+        padding: 0;
+    }
+
+    .w-sdc-modal-body-content {
+        .b_6;
+        word-break: break-word;
+
+    }
+    .w-sdc-modal-body {
+        height: auto;
+        /* padding: 47px 60px 20px 60px; */
+        border-bottom: none;
+    }
+    .w-sdc-modal-body-content {
+        padding: 0;
+    }
+    .w-sdc-modal-body-comment {
+        width: 430px;
+        height: 127px;
+        border: solid 1px @color_e;
+        margin: 20px 0 0 0;
+        padding: 15px;
+    }
+    .w-sdc-modal-label {
+        .m_14_r;
+        text-align: left;
+    }
+}
diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts
new file mode 100644
index 0000000000..f1fb56d0ff
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view-model.ts
@@ -0,0 +1,96 @@
+'use strict';
+import {IAppConfigurtaion, Component, AsdcComment} from "app/models";
+import {ValidationUtils} from "app/utils";
+
+export interface IEmailModalModel_Email {
+    to:string;
+    subject:string;
+    message:string;
+}
+
+export interface IEmailModalModel_Data {
+    component:Component;
+    stateUrl:string;
+}
+
+export interface IEmailModalModel {
+    title:string;
+    email:IEmailModalModel_Email;
+    data:IEmailModalModel_Data;
+}
+
+interface IEmailModalViewModelScope {
+    modalInstanceEmail:ng.ui.bootstrap.IModalServiceInstance;
+    emailModalModel:IEmailModalModel;
+    submitInProgress:boolean;
+    commentValidationPattern:RegExp;
+    isLoading:boolean;
+    submit():any;
+    cancel():void;
+    validateField(field:any):boolean;
+}
+
+export class EmailModalViewModel {
+
+    static '$inject' = ['$scope', '$filter', 'sdcConfig', '$uibModalInstance', 'emailModalModel', 'ValidationUtils', 'CommentValidationPattern'];
+
+    constructor(private $scope:IEmailModalViewModelScope,
+                private $filter:ng.IFilterService,
+                private sdcConfig:IAppConfigurtaion,
+                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
+                private emailModalModel:IEmailModalModel,
+                private ValidationUtils:ValidationUtils,
+                private CommentValidationPattern:RegExp) {
+
+        this.initScope(emailModalModel);
+    }
+
+    private initScope = (emailModalModel:IEmailModalModel):void => {
+        this.$scope.emailModalModel = emailModalModel;
+        this.$scope.submitInProgress = false;
+        this.$scope.commentValidationPattern = this.CommentValidationPattern;
+        this.$scope.modalInstanceEmail = this.$uibModalInstance;
+
+        this.$scope.submit = ():any => {
+
+            let onSuccess = (component:Component) => {
+                this.$scope.isLoading = false;
+                this.$scope.submitInProgress = false;
+                // showing the outlook modal according to the config json
+                if (this.sdcConfig.showOutlook) {
+                    let link:string = encodeURI(this.sdcConfig.api.baseUrl + "?folder=Ready_For_Testing");
+                    let outlook:string = this.$filter('translate')("EMAIL_OUTLOOK_MESSAGE", "{'to': '" + emailModalModel.email.to + "','subject': '" + emailModalModel.email.subject + "','message': '" + emailModalModel.email.message + "', 'entityNameAndVersion': '" + emailModalModel.email.subject + "','link': '" + link + "'}");
+                    window.location.href = outlook; // Open outlook with the email to send
+                }
+                this.$uibModalInstance.close(component); // Close the dialog
+            };
+
+            let onError = () => {
+                this.$scope.isLoading = false;
+                this.$scope.submitInProgress = false;
+                this.$uibModalInstance.close(); // Close the dialog
+            };
+
+            // Submit to server
+            // Prevent from user pressing multiple times on submit.
+            if (this.$scope.submitInProgress === false) {
+                this.$scope.isLoading = true;
+                this.$scope.submitInProgress = true;
+                let comment:AsdcComment = new AsdcComment();
+                comment.userRemarks = emailModalModel.email.message;
+                emailModalModel.data.component.changeLifecycleState(emailModalModel.data.stateUrl, comment).then(onSuccess, onError);
+            }
+        };
+
+        this.$scope.cancel = ():void => {
+            this.$uibModalInstance.dismiss();
+        };
+
+        this.$scope.validateField = (field:any):boolean => {
+            if (field && field.$dirty && field.$invalid) {
+                return true;
+            }
+            return false;
+        };
+    }
+}
diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html
new file mode 100644
index 0000000000..bf65428033
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/email-modal/email-modal-view.html
@@ -0,0 +1,77 @@
+<sdc-modal modal="modalInstanceEmail" type="classic" class="w-sdc-modal-email modal-type-standard" header="{{emailModalModel.title}}" show-close-button="true">
+    <loader data-display="isLoading"></loader>
+    <form novalidate class="w-sdc-form" name="editForm">
+
+            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.to)}">
+                <label class="i-sdc-form-label col-sm-2">To</label>
+                <div class="col-sm-10">
+                    <input class="i-sdc-form-input" type="text"
+                           data-ng-model="emailModalModel.email.to"
+                           data-ng-model-options="{ debounce: 500 }"
+                           data-ng-maxlength="255"
+                           data-required
+                           name="to"
+                           id="to"
+                           data-ng-disabled="true"
+                        />
+                </div>
+
+                <div class="input-error" data-ng-show="validateField(editForm.to)" alignToSelector="#to">
+                    <span ng-show="editForm.to.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'To' }"></span>
+                    <span ng-show="editForm.to.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span>
+                    <span ng-show="editForm.to.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                </div>
+
+            </div>
+
+            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.subject)}">
+                <label class="i-sdc-form-label col-sm-2">Subject</label>
+                <div class="col-sm-10">
+                    <input class="i-sdc-form-input" type="text"
+                           data-ng-model="emailModalModel.email.subject"
+                           data-ng-model-options="{ debounce: 500 }"
+                           data-ng-maxlength="255"
+                           data-required
+                           name="subject"
+                           data-ng-disabled="true"
+                        />
+                </div>
+
+                <div class="input-error" data-ng-show="validateField(editForm.subject)">
+                    <span ng-show="editForm.subject.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Subject' }"></span>
+                    <span ng-show="editForm.subject.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span>
+                    <span ng-show="editForm.subject.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                </div>
+
+            </div>
+
+            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.message)}">
+                <label class="i-sdc-form-label required col-sm-2">Message</label>
+                <div class="col-sm-10">
+                        <textarea class="w-sdc-modal-body-email"
+                                  data-ng-model="emailModalModel.email.message"
+                                  placeholder="{{'EMAIL_MODAL_MESSAGE' | translate }}"
+                                  data-required
+                                  name="message"
+                                  data-ng-pattern="commentValidationPattern"
+                                  maxlength="255"
+                                  data-tests-id="changeLifeCycleMessage"
+                                  data-ng-maxlength="255">
+                        </textarea>
+
+                    <div class="input-error" data-ng-show="validateField(editForm.message)">
+                        <span ng-show="editForm.message.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Message' }"></span>
+                        <span ng-show="editForm.message.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '255' }"></span>
+                        <span ng-show="editForm.message.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                    </div>
+                </div>
+
+            </div>
+
+    </form>
+
+    <div class="w-sdc-modal-footer classic">
+        <button class="tlv-btn blue" data-tests-id="OK" data-ng-click="submit()" data-ng-disabled="editForm.$invalid">OK</button>
+        <button class="tlv-btn grey" data-tests-id="Cancel" data-ng-click="cancel()" >Cancel</button>
+    </div>
+</sdc-modal>
diff --git a/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less b/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less
new file mode 100644
index 0000000000..471089fa1a
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/email-modal/email-modal.less
@@ -0,0 +1,57 @@
+.w-sdc-modal-email {
+
+    .w-sdc-modal-body {
+        border-bottom: none;
+    }
+
+    form.w-sdc-form{
+        padding: 0;
+
+        .i-sdc-form-item {
+            clear: both;
+            label {
+                min-height: 30px;
+                padding-top: 4px;
+            }
+
+            .col-sm-10 {
+                padding-right: 0;
+            }
+
+        }
+
+        .w-sdc-modal-body-email {
+            border-style: solid;
+            border-width: 1px;
+            border-color:  @color_e;
+            box-sizing: border-box;
+            width: 100%;
+            height: 127px;
+            margin-bottom: 20px;
+        }
+
+        label {.m_14_m; text-align: left;}
+        input {.m_14_r;}
+        textarea {.m_14_r;}
+        /* I made the subject and to fields as input (for future use), but for now they look like labels: */
+        input:disabled {
+            .bg_c;
+            border: none;
+        }
+    }
+
+    .w-sdc-modal-action {
+        background-color: @main_color_p;
+        padding: 0 13px 0 0;
+        height: 90px;
+        line-height: 65px;
+
+        button {width: 174px;}
+    }
+
+    .w-sdc-form .i-sdc-form-item label.required::before {
+        position: absolute;
+        left: -13px;
+    }
+
+}
diff --git a/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html b/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html
new file mode 100644
index 0000000000..41b1c6df1d
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/error-modal/error-403-view.html
@@ -0,0 +1,4 @@
+<div class="sdc-error-403-container" >
+    <div  class="sdc-error-403-container-title" translate="GENERAL_ERROR_403_TITLE"></div>
+    <div class="w-sdc-error-403-text w-sdc-form" translate="GENERAL_ERROR_403_DESCRIPTION" translate-values="{{ mailtoJson }}"></div>
+</div>
diff --git a/catalog-ui/src/app/view-models/modals/error-modal/error-view-model.ts b/catalog-ui/src/app/view-models/modals/error-modal/error-view-model.ts
new file mode 100644
index 0000000000..f622a6f53b
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/error-modal/error-view-model.ts
@@ -0,0 +1,19 @@
+'use strict';
+import {CookieService} from "app/services";
+
+interface IErrorViewModelScope {
+    mailto:string;
+}
+
+export class ErrorViewModel {
+
+    static ADMIN_EMAIL = 'dl-asdcaccessrequest@att.com';
+    static SUBJECT_PRFIEX = 'SDC Access Request for';
+
+    static '$inject' = ['$scope', 'Sdc.Services.CookieService', '$window'];
+
+    constructor($scope:IErrorViewModelScope, cookieService:CookieService, $window) {
+        let userDetails = cookieService.getFirstName() + ' ' + cookieService.getLastName() + ' (' + cookieService.getUserId() + ')';
+        $scope.mailto = ErrorViewModel.ADMIN_EMAIL + '?subject=' + $window.encodeURIComponent(ErrorViewModel.SUBJECT_PRFIEX + ' ' + userDetails);
+    }
+}
diff --git a/catalog-ui/src/app/view-models/modals/error-modal/error.less b/catalog-ui/src/app/view-models/modals/error-modal/error.less
new file mode 100644
index 0000000000..8297b5053d
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/error-modal/error.less
@@ -0,0 +1,13 @@
+.sdc-error-403-container {
+    .bg_n;
+    width: 700px;
+    height: 400px;
+    margin: auto;
+    margin-top: 196px;
+
+    .w-sdc-error-403-text {
+        .q_11;
+        margin-top: 20px;
+    }
+
+}
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-base-modal-model.ts b/catalog-ui/src/app/view-models/modals/message-modal/message-base-modal-model.ts
new file mode 100644
index 0000000000..3c9e75238a
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/message-modal/message-base-modal-model.ts
@@ -0,0 +1,43 @@
+'use strict';
+import {SEVERITY} from "app/utils";
+
+export interface IMessageModalModel {
+    title:string;
+    message:string;
+    severity:SEVERITY;
+}
+
+export interface IMessageModalViewModelScope extends ng.IScope {
+    footerButtons:Array<any>;
+    messageModalModel:IMessageModalModel;
+    modalInstanceError:ng.ui.bootstrap.IModalServiceInstance;
+    ok():void;
+}
+
+export class MessageModalViewModel {
+
+    constructor(private $baseScope:IMessageModalViewModelScope,
+                private $baseModalInstance:ng.ui.bootstrap.IModalServiceInstance,
+                private baseMessageModalModel:IMessageModalModel) {
+
+        this.initScope(baseMessageModalModel);
+    }
+
+    private initScope = (messageModalViewModel:IMessageModalModel):void => {
+
+        this.$baseScope.messageModalModel = messageModalViewModel;
+        this.$baseScope.modalInstanceError = this.$baseModalInstance;
+
+        this.$baseScope.ok = ():void => {
+            this.$baseModalInstance.close();
+        };
+
+        this.$baseScope.footerButtons = [
+            {
+                'name': 'OK',
+                'css': 'grey',
+                'callback': this.$baseScope.ok
+            }
+        ];
+    }
+}
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts
new file mode 100644
index 0000000000..053ea41ba3
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view-model.ts
@@ -0,0 +1,22 @@
+'use strict';
+import {IMessageModalModel, MessageModalViewModel, IMessageModalViewModelScope} from "../message-base-modal-model";
+
+export interface IClientMessageModalModel extends IMessageModalModel {
+}
+
+export interface IClientMessageModalViewModelScope extends IMessageModalViewModelScope {
+    clientMessageModalModel:IClientMessageModalModel;
+}
+
+export class ClientMessageModalViewModel extends MessageModalViewModel {
+
+    static '$inject' = ['$scope', '$uibModalInstance', 'clientMessageModalModel'];
+
+    constructor(private $scope:IClientMessageModalViewModelScope,
+                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
+                private clientMessageModalModel:IClientMessageModalModel) {
+
+        super($scope, $uibModalInstance, clientMessageModalModel);
+    }
+
+}
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html
new file mode 100644
index 0000000000..cfb0a35f69
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal-view.html
@@ -0,0 +1,16 @@
+<sdc-modal modal="modalInstanceError"
+           type="classic"
+           class="w-sdc-modal modal-type-alert"
+           header="{{messageModalModel.title}}"
+           buttons="footerButtons"
+           show-close-button="true">
+
+    <perfect-scrollbar include-padding="true">
+        <div class="w-sdc-modal-icon w-sdc-modal-icon-{{messageModalModel.severity}}"></div>
+        <div class="w-sdc-modal-caption">
+            <div ng-bind-html="messageModalModel.message" data-tests-id="message"></div>
+        </div>
+        <!--<div class="w-sdc-modal-body-content" data-ng-bind-html="messageModalModel.message"></div>-->
+    </perfect-scrollbar>
+
+</sdc-modal>
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal.less b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal.less
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/message-modal/message-client-modal/client-message-modal.less
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts
new file mode 100644
index 0000000000..5f1d5e7a92
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view-model.ts
@@ -0,0 +1,24 @@
+'use strict';
+import {IMessageModalModel, IMessageModalViewModelScope, MessageModalViewModel} from "../message-base-modal-model";
+
+export interface IServerMessageModalModel extends IMessageModalModel {
+    status:string;
+    messageId:string;
+}
+
+export interface IServerMessageModalViewModelScope extends IMessageModalViewModelScope {
+    serverMessageModalModel:IServerMessageModalModel;
+}
+
+export class ServerMessageModalViewModel extends MessageModalViewModel {
+
+    static '$inject' = ['$scope', '$uibModalInstance', 'serverMessageModalModel'];
+
+    constructor(private $scope:IServerMessageModalViewModelScope,
+                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
+                private serverMessageModalModel:IServerMessageModalModel) {
+
+        super($scope, $uibModalInstance, serverMessageModalModel);
+    }
+
+}
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html
new file mode 100644
index 0000000000..294dc76c4c
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal-view.html
@@ -0,0 +1,17 @@
+<sdc-modal modal="modalInstanceError"
+           type="classic"
+           class="w-sdc-modal modal-type-error"
+           header="{{messageModalModel.title}}"
+           buttons="footerButtons"
+           show-close-button="true">
+
+    <perfect-scrollbar include-padding="true">
+        <div class="w-sdc-modal-icon w-sdc-modal-icon-{{messageModalModel.severity}}"></div>
+        <div class="w-sdc-modal-caption">
+            <div>Error code: {{messageModalModel.messageId}}</div>
+            <div>Status code: {{messageModalModel.status}}</div>
+        </div>
+        <div class="w-sdc-modal-body-content" data-ng-bind-html="messageModalModel.message" data-tests-id="message"></div>
+    </perfect-scrollbar>
+
+</sdc-modal>
diff --git a/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal.less b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal.less
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/message-modal/message-server-modal/server-message-modal.less
diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts
new file mode 100644
index 0000000000..8e7e79c576
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts
@@ -0,0 +1,249 @@
+'use strict';
+import {ComponentType, CHANGE_COMPONENT_CSAR_VERSION_FLAG, SEVERITY, FileUtils, ModalsHandler, ComponentFactory} from "app/utils";
+import {OnboardingService, CacheService} from "app/services";
+import {Component, IComponent, IUser, IAppConfigurtaion, Resource} from "app/models";
+import {IServerMessageModalModel} from "../message-modal/message-server-modal/server-message-modal-view-model";
+import {Dictionary} from "app/utils";
+import * as _ from 'underscore';
+
+interface IOnboardingModalViewModelScope {
+    modalOnboarding:ng.ui.bootstrap.IModalServiceInstance;
+    componentsList:Array<IComponent>;
+    tableHeadersList:Array<any>;
+    selectedComponent:Component;
+    componentFromServer:Component;
+    reverse:boolean;
+    sortBy:string;
+    searchBind:string;
+    okButtonText:string;
+    isCsarComponentExists:boolean;
+    user:IUser;
+    isLoading:boolean;
+
+    //this is for UI paging
+    numberOfItemsToDisplay:number;
+    allItemsDisplayed:boolean;
+
+    doSelectComponent(component:Component):void;
+    doUpdateCsar():void;
+    doImportCsar():void;
+    sort(sortBy:string):void;
+    downloadCsar(packageId:string):void;
+    increaseNumItemsToDisplay():void;
+}
+
+export class OnboardingModalViewModel {
+
+    static '$inject' = [
+        '$scope',
+        '$filter',
+        '$state',
+        'sdcConfig',
+        '$uibModalInstance',
+        'Sdc.Services.OnboardingService',
+        'okButtonText',
+        'currentCsarUUID',
+        'Sdc.Services.CacheService',
+        'FileUtils',
+        'ComponentFactory',
+        'ModalsHandler'
+    ];
+
+    constructor(private $scope:IOnboardingModalViewModelScope,
+                private $filter:ng.IFilterService,
+                private $state:any,
+                private sdcConfig:IAppConfigurtaion,
+                private $uibModalInstance:ng.ui.bootstrap.IModalServiceInstance,
+                private onBoardingService:OnboardingService,
+                private okButtonText:string,
+                private currentCsarUUID:string,
+                private cacheService:CacheService,
+                private fileUtils:FileUtils,
+                private componentFactory:ComponentFactory,
+                private modalsHandler:ModalsHandler) {
+
+        this.init();
+    }
+
+    /**
+     * Called from controller constructor, this will call onboarding service to get list
+     * of "mini" components (empty components created from CSAR).
+     * The list is inserted to componentsList on $scope.
+     * And then call initScope method.
+     */
+    private init = ():void => {
+        this.initOnboardingComponentsList();
+    };
+
+    private initScope = ():void => {
+
+        this.initSortedTableScope();
+        this.initModalScope();
+        this.$scope.sortBy = "name"; // Default sort by
+        this.$scope.user = this.cacheService.get('user');
+        this.$scope.okButtonText = this.okButtonText;
+        this.$scope.numberOfItemsToDisplay = 0;
+        this.$scope.allItemsDisplayed = false;
+
+        // Dismiss the modal and pass the "mini" component to workspace general page
+        this.$scope.doImportCsar = ():void => {
+            this.$uibModalInstance.dismiss();
+            this.$state.go('workspace.general', {
+                type: ComponentType.RESOURCE.toLowerCase(),
+                componentCsar: this.$scope.selectedComponent
+            });
+        };
+
+        this.$scope.doUpdateCsar = ():void => {
+            // In case user select on update the checkin and submit for testing buttons (in general page) should be disabled.
+            // to do that we need to pass to workspace.general state parameter to know to disable the buttons.
+            this.$uibModalInstance.close();
+            // Change the component version to the CSAR version we want to update.
+            /*(<Resource>this.$scope.componentFromServer).csarVersion = (<Resource>this.$scope.selectedComponent).csarVersion;
+             let component:Components.Component = this.componentFactory.createComponent(this.$scope.componentFromServer);
+             this.$state.go('workspace.general', {vspComponent: component, disableButtons: true });*/
+            this.cacheService.set(CHANGE_COMPONENT_CSAR_VERSION_FLAG, (<Resource>this.$scope.selectedComponent).csarVersion);
+            this.$state.go('workspace.general', {
+                id: this.$scope.componentFromServer.uniqueId,
+                type: this.$scope.componentFromServer.componentType.toLowerCase(),
+                disableButtons: true
+            });
+        };
+
+        this.$scope.downloadCsar = (packageId:string):void => {
+            this.$scope.isLoading = true;
+            this.onBoardingService.downloadOnboardingCsar(packageId).then(
+                (file:any):void => {
+                    this.$scope.isLoading = false;
+                    if (file) {
+                        this.fileUtils.downloadFile(file, packageId + '.csar');
+                    }
+                }, ():void => {
+                    this.$scope.isLoading = false;
+                    var data:IServerMessageModalModel = {
+                        title: 'Download error',
+                        message: "Error downloading file",
+                        severity: SEVERITY.ERROR,
+                        messageId: "",
+                        status: ""
+                    };
+                    this.modalsHandler.openServerMessageModal(data);
+                }
+            );
+        };
+
+        this.$scope.increaseNumItemsToDisplay = ():void => {
+            this.$scope.numberOfItemsToDisplay = this.$scope.numberOfItemsToDisplay + 40;
+            if (this.$scope.componentsList) {
+                this.$scope.allItemsDisplayed = this.$scope.numberOfItemsToDisplay >= this.$scope.componentsList.length;
+            }
+        };
+
+        // When the user select a row, set the component as selectedComponent
+        this.$scope.doSelectComponent = (component:Component):void => {
+
+            if (this.$scope.selectedComponent === component) {
+                // Collapse the item
+                this.$scope.selectedComponent = undefined;
+                return;
+            }
+
+            this.$scope.isLoading = true;
+            this.$scope.componentFromServer = undefined;
+            this.$scope.selectedComponent = component;
+
+            let onSuccess = (componentFromServer:Component):void => {
+                this.$scope.isLoading = false;
+                if (componentFromServer) {
+                    this.$scope.componentFromServer = componentFromServer;
+                    this.$scope.isCsarComponentExists = true;
+                } else {
+                    this.$scope.componentFromServer = component;
+                    this.$scope.isCsarComponentExists = false;
+                }
+            };
+
+            let onError = ():void => {
+                this.$scope.isLoading = false;
+                this.$scope.componentFromServer = component;
+                this.$scope.isCsarComponentExists = false;
+            };
+
+            this.onBoardingService.getComponentFromCsarUuid((<Resource>component).csarUUID).then(onSuccess, onError);
+        };
+
+    };
+
+    private initSortedTableScope = ():void => {
+        this.$scope.tableHeadersList = [
+            {title: 'Name', property: 'name'},
+            {title: 'Vendor', property: 'vendorName'},
+            {title: 'Category', property: 'categories'},
+            {title: 'Version', property: 'csarVersion'},
+            {title: '#', property: 'importAndUpdate'}
+            //{title: 'Date', property: 'componentDate'}
+        ];
+
+        this.$scope.sort = (sortBy:string):void => {
+            this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
+            this.$scope.sortBy = sortBy;
+        };
+    };
+
+    private initModalScope = ():void => {
+        // Enable the modal directive to close
+        this.$scope.modalOnboarding = this.$uibModalInstance;
+    };
+
+    private initOnboardingComponentsList = ():void => {
+        let onSuccess = (onboardingResponse:Array<IComponent>):void => {
+            initMaxVersionOfItemsInList(onboardingResponse);
+
+            if (this.currentCsarUUID) {
+                //this.$scope.componentsList = this.$filter('filter')(this.$scope.componentsList, {csarUUID: this.currentCsarUUID});
+                this.$scope.componentsList = this.$filter('filter')(this.$scope.componentsList,
+                    (input):boolean => {
+                        return input.csarUUID === this.currentCsarUUID;
+                    }
+                );
+            }
+            this.initScope();
+        };
+
+        let onError = ():void => {
+            console.log("Error getting onboarding list");
+            this.initScope();
+        };
+
+        let initMaxVersionOfItemsInList = (onboardingResponse:Array<IComponent>):void => {
+            // Get only the latest version of each item
+            this.$scope.componentsList = [];
+
+            // Get all unique items from the list
+            let uniqueItems:Array<any> = _.uniq(onboardingResponse, false, (item:any):void=>{
+                return item.packageId;
+            });
+            
+            // Loop on all the items with unique packageId
+            _.each(uniqueItems, (item:any):void=> {
+                // Find all the items that has same packageId
+                let ItemsFound:Array<IComponent> = _.filter(onboardingResponse, (inListItem:any):any => {
+                    return inListItem.packageId === item.packageId;
+                });
+
+                // Loop on all the items with same packageId and find the max version.
+                let maxItem:any;
+                _.each(ItemsFound, (ItemFound:any):void=> {
+                    if (!maxItem) {
+                        maxItem = ItemFound;
+                    } else if (maxItem && parseInt(maxItem.csarVersion) < parseInt(ItemFound.csarVersion)) {
+                        maxItem = ItemFound;
+                    }
+                });
+                this.$scope.componentsList.push(maxItem);
+            });
+        };
+
+        this.onBoardingService.getOnboardingComponents().then(onSuccess, onError);
+    };
+}
diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html
new file mode 100644
index 0000000000..3657fad017
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view.html
@@ -0,0 +1,144 @@
+<sdc-modal modal="modalOnboarding" class="w-sdc-modal-onboarding w-sdc-classic-top-line-modal" buttons="footerButtons" header="Import VF" show-close-button="true">
+    <info-tooltip class="general-info-button" info-message-translate="ON_BOARDING_GENERAL_INFO "></info-tooltip>
+    <div class="title-wrapper">
+        <div>
+            <p class="sub-title">Select one of the software product component below:</p>
+        </div>
+
+        <div class="top-search">
+            <input type="text"
+                   class="search-text"
+                   placeholder="Search"
+                   data-ng-model="searchBind"
+                   data-tests-id="onboarding-search"
+                   ng-model-options="{ debounce: 500 }" />
+            <span class="w-sdc-search-icon magnification"></span>
+        </div>
+    </div>
+
+    <div class="table-container-flex">
+        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
+
+            <!-- Table headers -->
+            <div class="head flex-container">
+                <div class="table-header head-row hand flex-item" ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)" data-tests-id="{{header.title}}">{{header.title}}
+                    <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
+                </div>
+            </div>
+
+            <!-- Table body -->
+            <div class="body">
+                <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container" id="onboarding-modal-scrollbar-container">
+
+                    <!-- In case the component list is empty -->
+                    <div data-ng-if="!componentsList || componentsList.length===0" class="no-row-text">
+                        There are no software product component to display
+                    </div>
+
+                    <div infinite-scroll-disabled='allItemsDisplayed'  infinite-scroll="increaseNumItemsToDisplay()" infinite-scroll-container="'#onboarding-modal-scrollbar-container'">
+
+                    <!-- Loop on components list -->
+                    <div data-ng-repeat-start="component in componentsList | filter: searchBind | orderBy:sortBy:reverse | limitTo:numberOfItemsToDisplay track by $index"
+                         class="flex-container data-row"
+                         data-ng-class="{'selected': component === selectedComponent}"
+                         data-ng-click="doSelectComponent(component);"
+                         data-tests-id="csar-row"
+                         >
+
+                        <!-- Name -->
+                        <div class="table-col-general flex-item"  sdc-smart-tooltip>
+                            <span class="sprite table-arrow" data-ng-class="{'opened': component === selectedComponent}" data-tests-id="{{component.name}}"></span>
+                            {{component.name}}
+                        </div>
+
+                        <!-- Vendor -->
+                        <div class="table-col-general flex-item" data-tests-id="{{component.vendorName}}" sdc-smart-tooltip>
+                            {{component.vendorName}}
+                        </div>
+
+                        <!-- Category -->
+                        <div class="table-col-general flex-item"  sdc-smart-tooltip>
+                            {{component.categories[0].name}}&nbsp;{{component.categories[0].subcategories[0].name}}
+                        </div>
+
+                        <!-- Version -->
+                        <div class="table-col-general flex-item"  sdc-smart-tooltip>
+                            {{component.csarVersion}}
+                        </div>
+
+                        <!-- Import And Update -->
+                        <div class="table-col-general flex-item"  sdc-smart-tooltip></div>
+
+                    </div>
+
+                    <div data-ng-repeat-end="" data-ng-if="component===selectedComponent" class="item-opened">
+
+                        <div class="item-opened-description">
+                            <div class="item-opened-description-title">VSP Description:</div>
+                            {{component.description}}
+                        </div>
+
+                        <div class="item-opened-metadata1">
+                            <div data-ng-if="isCsarComponentExists===true">
+                                <div class="item-opened-metadata-title">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>
+                        </div>
+
+                        <div class="item-opened-metadata2">
+                            <div data-ng-if="isCsarComponentExists===true">
+                                <div class="item-opened-metadata-title">&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 data-ng-if="componentFromServer.lifecycleState==='NOT_CERTIFIED_CHECKOUT' && componentFromServer.lastUpdaterUserId !== user.userId">
+                                    <span class="note">Designers cannot update a VSP if the VF is checked out by another user.</span>
+                                </div>
+                                <div data-ng-if="componentFromServer.lifecycleState==='READY_FOR_CERTIFICATION'">
+                                    <span class="note">Designers cannot update a VSP if the VF is in Ready for testing state.</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="item-opened-metadata3">
+                            <info-tooltip class="info-button" info-message-translate="{{isCsarComponentExists?'ON_BOARDING_UPDATE_INFO':'ON_BOARDING_IMPORT_INFO'}}" direction="left"></info-tooltip>
+                        </div>
+
+                        <div class="item-opened-icon">
+                            <span data-ng-if="isCsarComponentExists!==true"
+                                 class="sprite-new import-file-btn"
+                                 data-ng-click="doImportCsar()"
+                                 uib-tooltip="Import VSP"
+                                 tooltip-class="uib-custom-tooltip"
+                                 tooltip-placement="bottom"
+                                 data-tests-id="import-csar"></span>
+
+                            <span data-ng-if="isCsarComponentExists===true"
+                                 class="sprite-new refresh-file-btn"
+                                 uib-tooltip="Update VSP"
+                                 tooltip-class="uib-custom-tooltip"
+                                 tooltip-placement="bottom"
+                                 data-ng-class="{'disabled': (componentFromServer.lifecycleState==='NOT_CERTIFIED_CHECKOUT' && componentFromServer.lastUpdaterUserId!==user.userId) || componentFromServer.lifecycleState==='READY_FOR_CERTIFICATION'}"
+                                 data-ng-click="doUpdateCsar()"
+                                 data-tests-id="update-csar"></span>
+
+                            <span data-ng-click="downloadCsar(component.packageId)"
+                                 class="sprite-new download-file-btn hand"
+                                 uib-tooltip="Download VSP"
+                                 tooltip-class="uib-custom-tooltip"
+                                 tooltip-placement="bottom"
+                                 data-tests-id="download-csar"></span>
+                        </div>
+                        <loader data-display="isLoading" relative="true" size="small"></loader>
+                    </div>
+                    </div>
+
+                </perfect-scrollbar>
+            </div><!-- End table body -->
+        </div><!-- End table -->
+    </div><!-- End table-container-flex -->
+    <div class="w-sdc-modal-footer classic"></div>
+
+</sdc-modal>
diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal.less b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal.less
new file mode 100644
index 0000000000..c745a86888
--- /dev/null
+++ b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal.less
@@ -0,0 +1,148 @@
+.w-sdc-modal-onboarding {
+
+    width: 100%;
+    display: inline-block;
+
+    .general-info-button{
+        position: relative;
+        top: -40px;
+        left: 86px;
+        float: left;
+    }
+
+    .title-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+
+        .sub-title {
+            .m_14_r;
+            float:left;
+        }
+    }
+
+    .w-sdc-classic-btn {
+        float: right;
+        margin-bottom: 10px;
+    }
+
+    .table{
+        height: 472px;
+        margin-bottom: 0;
+    }
+
+    .table-container-flex {
+        margin-top: 10px;
+
+        .table {
+            .body {
+                .data-row + div.item-opened {
+                    word-wrap: break-word;
+                    display: flex;
+                    justify-content: space-between;
+                    padding: 10px 0;
+
+                    .item-opened-description-title,
+                    .item-opened-metadata-title {
+                        .m_14_m;
+                    }
+
+                    .item-opened-description,
+                    .item-opened-metadata1,
+                    .item-opened-metadata2,
+                    .item-opened-metadata3 {
+                        .th { .m_14_m; }
+                        flex-basis: 0;
+                        overflow: hidden;
+                        padding: 5px 15px;
+                    }
+
+                    .item-opened-description,
+                    .item-opened-metadata3 {
+                        border-right: 1px solid @main_color_o;
+                    }
+
+                    .item-opened-metadata2 {
+                        word-break: break-word;
+                        .note {
+                            color: @func_color_q;
+                        }
+                    }
+
+                    .item-opened-icon {
+                        flex-basis: 0;
+                        overflow: hidden;
+                        padding: 5px 15px;
+                        align-self: center;
+                    }
+
+                    .item-opened-description {flex-grow: 25;}
+                    .item-opened-metadata1 {flex-grow: 25;}
+                    .item-opened-metadata2 {flex-grow: 30;}
+                    .item-opened-metadata3 {
+                        flex-grow: 10;
+                        .info-button{
+                            float: right;
+                        }
+                    }
+                    .item-opened-icon {flex-grow: 10;}
+                }
+            }
+        }
+
+        .flex-item:nth-child(1) {
+            flex-grow: 25;
+            .hand;
+            span.table-arrow {
+                margin-right: 7px;
+            }
+        }
+
+        .flex-item:nth-child(2) {flex-grow: 25;}
+        .flex-item:nth-child(3) {flex-grow: 30;}
+        .flex-item:nth-child(4) {flex-grow: 10; text-align: center; }
+        .flex-item:nth-child(5) {flex-grow: 10; }
+
+    }
+
+    .download-file-btn {
+        cursor: pointer;
+        margin-left: 4px;
+    }
+
+    .refresh-file-btn,
+    .import-file-btn {
+        cursor: pointer;
+        margin-left: 20px;
+    }
+
+    .top-search {
+        float: right;
+        position: relative;
+
+        input.search-text {
+            .border-radius(2px);
+            width: 245px;
+            height: 32px;
+            line-height: 32px;
+            border: 1px solid @main_color_o;
+            margin: 0;
+            outline: none;
+            text-indent: 10px;
+
+            &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */
+            &:-moz-placeholder { font-style: italic; } /* Firefox 18- */
+            &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */
+            &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */
+            &:-ms-input-placeholder { font-style: italic; } /* Edge */
+        }
+
+        .magnification {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+        }
+
+    }
+
+}