[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1 Signed-off-by: Michael Lando <ml636r@att.com>
author: Michael Lando <ml636r@att.com> 2017-06-09 03:19:04 +0300
committer: Michael Lando <ml636r@att.com> 2017-06-09 03:19:04 +0300
commit: ed64b5edff15e702493df21aa3230b81593e6133 (patch)
tree: a4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/app/scripts/view-models/workspace
parent: 280f8015d06af1f41a3ef12e8300801c7a5e0d54 (diff)
70 files changed, 0 insertions, 9462 deletions
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.html b/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.html
deleted file mode 100644
index 23c08f6ec6..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<div class="activity-log">
-
-    <div class="title-wrapper">
-        <div class="top-search">
-            <input type="text"
-                   class="search-text"
-                   placeholder="Search"
-                   data-ng-model="searchBind"
-                   data-tests-id="main-menu-input-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)">{{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">
-
-                    <!-- In case the logs are empty -->
-                    <div data-ng-if="!activityLog || activityLog.length===0" class="no-row-text">
-                        There are no logs to display
-                    </div>
-
-                    <!-- Loop on logs list -->
-                    <div data-ng-repeat="item in activityLog | filter: searchBind | orderBy:sortBy:reverse track by $index"
-                         data-ng-init="item.dateFormat = ( item.TIMESTAMP.replace(' UTC', '') | stringToDateFilter | date: 'MM/dd/yyyy':'UTC')+' | '+(item.TIMESTAMP.replace(' UTC', '') | stringToDateFilter | date: 'shortTime':'UTC' )"
-                         class="flex-container data-row"
-                         data-ng-class="{'selected': component === selectedComponent}"
-                         data-ng-click="doSelectComponent(component);"
-                        >
-
-                        <!-- Date -->
-                        <div class="table-col-general flex-item" sdc-smart-tooltip>
-                            {{item.dateFormat}}
-                        </div>
-
-                        <!-- Action -->
-                        <div class="table-col-general flex-item" sdc-smart-tooltip>
-                            {{item.ACTION}}
-                        </div>
-
-                        <!-- Comment -->
-                        <div class="table-col-general flex-item" sdc-smart-tooltip>
-                            {{item.COMMENT}}
-                        </div>
-
-                        <!-- Username -->
-                        <div class="table-col-general flex-item" sdc-smart-tooltip>
-                            {{item.MODIFIER}}
-                        </div>
-
-                        <!-- Status -->
-                        <div class="table-col-general flex-item" sdc-smart-tooltip>
-                            {{item.STATUS}}
-                            <span data-ng-class="{'success': item.STATUS>='200' && item.STATUS<='204','error': item.STATUS<'200' || item.STATUS>='300'}"></span>
-                        </div>
-
-                    </div>
-
-                </perfect-scrollbar>
-            </div><!-- End table body -->
-        </div><!-- End table -->
-    </div><!-- End table-container-flex -->
-
-</div>
-
-
-
-<!--<div ng-repeat="activityDate in  activityDateArray " class="w-sdc-component-viewer-right-activity-log" >
-    <div class="w-sdc-component-viewer-right-activity-log-date" >{{activityDate | date: 'longDate'}}</div>
-    <div ng-repeat="activity in activityLog[activityDate] | orderBy: '-TIMESTAMP'">
-        <div  class="w-sdc-component-viewer-right-activity-log-time">{{activity.TIMESTAMP.replace(" UTC", '') | stringToDateFilter | date: 'mediumTime':'UTC'}}</div>
-        <div class="w-sdc-component-viewer-right-activity-log-content">{{"Action: " + parseAction(activity.ACTION) + " Performed by: " + activity.MODIFIER + " Status: " + activity.STATUS}}</div>
-    </div>
-</div>-->
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.less b/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.less
deleted file mode 100644
index 61bb3e9f01..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.less
+++ /dev/null
@@ -1,83 +0,0 @@
-.activity-log {
-
-    margin-top: 30px;
-
-    .title-wrapper {
-        display: flex;
-        justify-content: flex-end;
-    }
-
-    .table-container-flex .table .body .scrollbar-container {
-        max-height: 448px;
-    }
-    
-    .view-mode {
-        background-color: @main_color_p;
-    }
-
-    .table{
-        height: 490px;
-        margin-bottom: 0;
-    }
-
-    .table-container-flex {
-        margin-top: 10px;
-
-        .flex-item:nth-child(1) { width: 200px; }
-        .flex-item:nth-child(2) { flex-grow: 20; }
-        .flex-item:nth-child(3) { flex-grow: 30; }
-        .flex-item:nth-child(4) { flex-grow: 20; }
-        .flex-item:nth-child(5) { width: 80px; }
-
-        .success {
-            position: absolute;
-            top: 11px;
-            right: 20px;
-            .sprite-new;
-            .sdc-success;
-        }
-
-        .error {
-            position: absolute;
-            top: 11px;
-            right: 20px;
-            .sprite-new;
-            .sdc-error;
-        }
-
-    }
-
-    .data-row {
-        position: relative;
-    }
-
-    .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;
-        }
-
-    }
-
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.ts
deleted file mode 100644
index 665d0c0ef6..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/activity-log/activity-log.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-
-    export interface IActivityLogViewModelScope extends IWorkspaceViewModelScope {
-        activityDateArray: Array<any>; //this is in order to sort the dates
-        activityLog: Array<Models.Activity>;
-        preVersion:string;
-
-        tableHeadersList: Array<any>;
-        reverse: boolean;
-        sortBy:string;
-        searchBind:string;
-
-        getActivityLog(uniqueId:string):void;
-        onVersionChanged(version:any) : void;
-        parseAction(action:string):string;
-        sort(sortBy:string): void;
-    }
-
-    export class ActivityLogViewModel {
-
-        static '$inject' = [
-            '$scope',
-            '$state',
-            'Sdc.Services.ActivityLogService'
-        ];
-
-        constructor(private $scope:IActivityLogViewModelScope,
-                    private $state:ng.ui.IStateService,
-                    private activityLogService:Services.ActivityLogService
-            ) {
-
-            this.initScope();
-            this.$scope.setValidState(true);
-            this.initSortedTableScope();
-            this.$scope.updateSelectedMenuItem();
-
-            // Set default sorting
-            this.$scope.sortBy = 'logDate';
-        }
-
-        private initScope():void {
-
-            this.$scope.preVersion = this.$scope.component.version;
-
-            this.$scope.onVersionChanged = (version:any):void => {
-                if (version.versionNumber != this.$scope.component.version) {
-                    this.$scope.isLoading = true;
-                    this.$scope.getActivityLog(version.versionId);
-                }
-            };
-
-            this.$scope.getActivityLog = (uniqueId:any):void => {
-
-                let onError = (response) => {
-                    this.$scope.isLoading = false;
-                    console.info('onFaild', response);
-
-                };
-
-                let onSuccess = (response:Array<Models.Activity>) => {
-                    this.$scope.activityLog = _.sortBy(response, function(o) { return o.TIMESTAMP; }); //response; //
-                    this.$scope.isLoading = false;
-                };
-
-                this.$scope.isLoading = true;
-                if (this.$scope.component.isResource()) {
-                    this.activityLogService.getActivityLogService('resources', uniqueId).then(onSuccess, onError);
-                }
-                if (this.$scope.component.isService()) {
-                    this.activityLogService.getActivityLogService('services', uniqueId).then(onSuccess, onError);
-                }
-
-            };
-
-            if (!this.$scope.activityLog || this.$scope.preVersion != this.$scope.component.version) {
-                this.$scope.getActivityLog(this.$scope.component.uniqueId);
-            }
-
-            this.$scope.parseAction = (action:string) => {
-                return action ? action.split(/(?=[A-Z])/).join(' ') : '';
-            };
-
-        }
-
-        private initSortedTableScope = ():void => {
-            this.$scope.tableHeadersList = [
-                {title: 'Date', property: 'logDate'},
-                {title: 'Action', property: 'logAction'},
-                {title: 'Comment', property: 'logComment'},
-                {title: 'Username', property: 'logUsername'},
-                {title: 'Status', property: 'logStatus'}
-            ];
-
-            this.$scope.sort = (sortBy:string):void => {
-                this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
-                this.$scope.sortBy = sortBy;
-            };
-        };
-
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view-model.ts
deleted file mode 100644
index 469da6a2e1..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view-model.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-
-    interface IAttributesViewModelScope extends IWorkspaceViewModelScope {
-        tableHeadersList: Array<any>;
-        reverse: boolean;
-        sortBy:string;
-
-        addOrUpdateAttribute(attribute?:Models.AttributeModel): void;
-        delete(attribute:Models.AttributeModel): void;
-        sort(sortBy:string): void;
-    }
-
-    export class AttributesViewModel {
-
-        static '$inject' = [
-            '$scope',
-            '$filter',
-            '$modal',
-            '$templateCache',
-            'ModalsHandler'
-        ];
-
-
-        constructor(private $scope:IAttributesViewModelScope,
-                    private $filter:ng.IFilterService,
-                    private $modal:ng.ui.bootstrap.IModalService,
-                    private $templateCache:ng.ITemplateCacheService,
-                    private ModalsHandler:Utils.ModalsHandler) {
-            this.initScope();
-            this.$scope.updateSelectedMenuItem();
-        }
-
-
-        private openEditAttributeModal = (attribute:Models.AttributeModel):void => {
-            let viewModelsHtmlBasePath:string = '/app/scripts/view-models/';
-
-            let modalOptions:ng.ui.bootstrap.IModalSettings = {
-                template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/attribute-form/attribute-form-view.html'),
-                controller: 'Sdc.ViewModels.AttributeFormViewModel',
-                size: 'sdc-md',
-                backdrop: 'static',
-                keyboard: false,
-                resolve: {
-                    attribute: ():Models.AttributeModel => {
-                        return attribute;
-                    },
-                    component: ():Models.Components.Component => {
-                        return <Models.Components.Component> this.$scope.component;
-                    }
-                }
-            };
-            this.$modal.open(modalOptions);
-        };
-
-        private initScope = ():void => {
-
-            //let self = this;
-            this.$scope.sortBy = 'name';
-            this.$scope.reverse = false;
-            this.$scope.setValidState(true);
-            this.$scope.tableHeadersList = [
-                {title: 'Name', property: 'name'},
-                {title: 'Type', property: 'type'},
-                {title: 'Default Value', property: 'defaultValue'}
-            ];
-            this.$scope.sort = (sortBy:string):void => {
-                this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
-                this.$scope.sortBy = sortBy;
-            };
-
-            this.$scope.addOrUpdateAttribute = (attribute?:Models.AttributeModel):void => {
-                this.openEditAttributeModal(attribute ? attribute : new Models.AttributeModel());
-            };
-
-            this.$scope.delete = (attribute:Models.AttributeModel):void => {
-
-                let onOk = ():void => {
-                    this.$scope.component.deleteAttribute(attribute.uniqueId);
-                };
-                let title:string = this.$filter('translate')("ATTRIBUTE_VIEW_DELETE_MODAL_TITLE");
-                let message:string = this.$filter('translate')("ATTRIBUTE_VIEW_DELETE_MODAL_TEXT", "{'name': '" + attribute.name + "'}");
-                this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
-            };
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view.html
deleted file mode 100644
index 59ba933a0a..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes-view.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<div class="workspace-attributes">
-    <div class="add-btn" data-tests-id="add-attribute-button" ng-if="!isViewMode()"
-         data-ng-class="{'disabled': isDisableMode()}" data-ng-click="addOrUpdateAttribute()" data-tests-id="add-attribute-button">Add</div>
-    <div class="table-container-flex">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <div class="head flex-container">
-                <div class="table-header head-row hand flex-item" data-ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}}
-                    <span data-ng-if="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
-                </div>
-                <div class="table-no-text-header head-row flex-item" ng-if="!isViewMode()"></div>
-                <!--div class="table-no-text-header head-row flex-item"></div-->
-            </div>
-
-            <div class="body">
-                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                    <div data-ng-if="component.attributes.length === 0" class="no-row-text"  data-ng-class="{'disabled': isDisableMode()}">
-                        There are no attributes to display <br>
-                        <span ng-if="!isViewMode()"> click <a data-ng-click="addOrUpdateAttribute()">here</a> to add one </span>
-
-                    </div>
-                    <div data-ng-repeat-start="attribute in component.attributes | orderBy:sortBy:reverse track by $index"
-                         class="flex-container data-row" data-ng-class="{'selected': attribute.selected}"
-                         data-ng-click="attribute.selected = !attribute.selected" data-tests-id="attributes-table-row">
-
-                        <div class="table-col-general flex-item text">
-                            <span class="sprite table-arrow" data-ng-class="{'opened': attribute.selected}"></span>
-                            <span  data-tests-id="{{attribute.name}}" tooltips tooltip-content="{{attribute.name}}">{{attribute.name}}</span>
-
-                        </div>
-
-                        <div class="table-col-general flex-item text" data-tests-id="{{attribute.type}}" data-ng-bind="attribute.type"></div>
-
-                        <div class="table-col-general flex-item text">
-                            <span tooltips tooltip-content="{{attribute.defaultValue}}" data-tests-id="{{attribute.defaultValue}}" data-ng-bind="attribute.defaultValue"></span>
-                        </div>
-
-                        <div class="table-btn-col flex-item" ng-if="!isViewMode()">
-                            <button class="table-edit-btn" data-tests-id="edit_{{attribute.name}}" data-ng-show="attribute.parentUniqueId==component.uniqueId"
-                                    data-ng-click="addOrUpdateAttribute(attribute); $event.stopPropagation();"  data-ng-class="{'disabled': isViewMode()}"> </button>
-                            <button class="table-delete-btn" data-tests-id="delete_{{attribute.name}}"  data-ng-show="attribute.parentUniqueId==component.uniqueId"
-                                    data-ng-click="delete(attribute); $event.stopPropagation();"  data-ng-class="{'disabled': isViewMode()}"> </button>
-                        </div>
-                    </div>
-                    <div data-ng-repeat-end="" data-ng-if="attribute.selected && attribute.description" class="item-opened" data-ng-bind="attribute.description">
-                    </div>
-                </perfect-scrollbar>
-            </div>
-
-        </div>
-    </div>
-
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes.less b/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes.less
deleted file mode 100644
index ffd28afce4..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/attributes/attributes.less
+++ /dev/null
@@ -1,54 +0,0 @@
-.workspace-attributes {
-
-    width: 93%;
-    display: inline-block;
-    .w-sdc-classic-btn {
-        float: right;
-        margin-bottom: 10px;
-    }
-
-    .table{
-        height:490px;
-        margin-bottom: 0;
-    }
-
-    .table-container-flex {
-        margin-top: 27px;
-
-        .text{
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            white-space: nowrap;
-        }
-
-        .flex-item:nth-child(1) {
-            flex-grow: 15;
-
-            .hand;
-            span.table-arrow {
-                margin-right: 7px;
-            }
-        }
-
-        .flex-item:nth-child(2) {
-            flex-grow: 6;
-        }
-
-        .flex-item:nth-child(3) {
-            flex-grow: 9;
-        }
-
-        .flex-item:nth-child(4) {
-            flex-grow: 3;
-            padding-top: 10px;
-        }
-
-        .flex-item:nth-child(5) {
-            flex-grow: 1;
-
-        }
-
-    }
-
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view-model.ts
deleted file mode 100644
index f8eeaf7f64..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view-model.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-
-    export interface ICompositionViewModelScope extends IWorkspaceViewModelScope {
-
-        currentComponent: Models.Components.Component;
-        selectedComponent: Models.Components.Component;
-        isLoading: boolean;
-        graphApi:any;
-        sharingService:Sdc.Services.SharingService;
-        sdcMenu:Models.IAppMenu;
-        version:string;
-        isViewOnly:boolean;
-        isLoadingRightPanel:boolean;
-        setComponent(component: Models.Components.Component);
-        isComponentInstanceSelected():boolean;
-        updateSelectedComponent(): void
-        openUpdateModal();
-        deleteSelectedComponentInstance():void;
-        onBackgroundClick():void;
-        setSelectedInstance(componentInstance: Models.ComponentsInstances.ComponentInstance): void;
-        printScreen():void;
-
-        cacheComponentsInstancesFullData: Models.Components.Component;
-    }
-
-    export class CompositionViewModel {
-
-        static '$inject' = [
-            '$scope',
-            '$log',
-            'sdcMenu',
-            'MenuHandler',
-            '$modal',
-            '$templateCache',
-            '$state',
-            'Sdc.Services.SharingService',
-            '$filter',
-            'Sdc.Services.CacheService',
-            'ComponentFactory',
-            'ChangeLifecycleStateHandler',
-            'LeftPaletteLoaderService',
-            'ModalsHandler',
-            'EventListenerService'
-        ];
-
-        constructor(private $scope:ICompositionViewModelScope,
-                    private $log: ng.ILogService,
-                    private sdcMenu:Models.IAppMenu,
-                    private MenuHandler: Utils.MenuHandler,
-                    private $modal:ng.ui.bootstrap.IModalService,
-                    private $templateCache:ng.ITemplateCacheService,
-                    private $state:ng.ui.IStateService,
-                    private sharingService:Services.SharingService,
-                    private $filter:ng.IFilterService,
-                    private cacheService:Services.CacheService,
-                    private ComponentFactory: Utils.ComponentFactory,
-                    private ChangeLifecycleStateHandler: Sdc.Utils.ChangeLifecycleStateHandler,
-                    private LeftPaletteLoaderService: Services.Components.LeftPaletteLoaderService,
-                    private ModalsHandler: Sdc.Utils.ModalsHandler,
-                    private eventListenerService:Services.EventListenerService) {
-
-            this.$scope.setValidState(true);
-            this.initScope();
-            this.$scope.updateSelectedMenuItem();
-            this.registerGraphEvents(this.$scope);
-        }
-        private cacheComponentsInstancesFullData: Array<Models.Components.Component>;
-
-        private initComponent = ():void => {
-
-            this.$scope.currentComponent = this.$scope.component;
-            this.$scope.selectedComponent = this.$scope.currentComponent;
-            this.updateUuidMap();
-            this.$scope.isViewOnly = this.$scope.isViewMode();
-        };
-        private registerGraphEvents = (scope:ICompositionViewModelScope):void => {
-
-            this.eventListenerService.registerObserverCallback(Utils.Constants.GRAPH_EVENTS.ON_NODE_SELECTED, scope.setSelectedInstance);
-            this.eventListenerService.registerObserverCallback(Utils.Constants.GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, scope.onBackgroundClick);
-
-        }
-        private openUpdateComponentInstanceNameModal = ():void => {
-
-            let viewModelsHtmlBasePath:string = '/app/scripts/view-models/';
-            let modalOptions:ng.ui.bootstrap.IModalSettings = {
-                template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/resource-instance-name-form/resource-instance-name-view.html'),
-                controller: 'Sdc.ViewModels.ResourceInstanceNameViewModel',
-                size: 'sdc-sm',
-                backdrop: 'static',
-                resolve: {
-                    component: ():Models.Components.Component => {
-                        return this.$scope.currentComponent;
-
-                    }
-                }
-            };
-
-            let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$modal.open(modalOptions);
-            modalInstance.result.then(():void => {
-                this.eventListenerService.notifyObservers(Utils.Constants.GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, this.$scope.currentComponent.selectedInstance);
-                //this.$scope.graphApi.updateNodeName(this.$scope.currentComponent.selectedInstance);
-            });
-        };
-
-        private removeSelectedComponentInstance = ():void => {
-            this.eventListenerService.notifyObservers(Utils.Constants.GRAPH_EVENTS.ON_DELETE_MULTIPLE_COMPONENTS);
-        };
-
-        private updateUuidMap = ():void => {
-            /**
-             * In case user press F5, the page is refreshed and this.sharingService.currentEntity will be undefined,
-             * but after loadService or loadResource this.sharingService.currentEntity will be defined.
-             * Need to update the uuidMap with the new resource or service.
-             */
-             this.sharingService.addUuidValue(this.$scope.currentComponent.uniqueId,this.$scope.currentComponent.uuid);
-        };
-
-        private initScope = ():void => {
-
-            this.$scope.sharingService = this.sharingService;
-            this.$scope.sdcMenu = this.sdcMenu;
-            this.$scope.isLoading = false;
-            this.$scope.isLoadingRightPanel = false;
-            this.$scope.graphApi = {};
-            this.$scope.version = this.cacheService.get('version');
-            this.initComponent();
-
-            this.cacheComponentsInstancesFullData = new Array<Models.Components.Component>();
-
-            this.$scope.isComponentInstanceSelected = ():boolean => {
-                return  this.$scope.currentComponent && this.$scope.currentComponent.selectedInstance  != undefined && this.$scope.currentComponent.selectedInstance != null;
-            };
-
-            this.$scope.updateSelectedComponent = (): void => {
-                if(this.$scope.currentComponent.selectedInstance){
-
-                    let componentParent = _.find(this.cacheComponentsInstancesFullData, (component) => {
-                       return component.uniqueId ===  this.$scope.currentComponent.selectedInstance.componentUid;
-                    });
-                    if(componentParent) {
-                        this.$scope.selectedComponent = componentParent;
-                    }
-                    else {
-                        try {
-                            let onSuccess = (component:Models.Components.Component) => {
-                                this.$scope.isLoadingRightPanel = false;
-                                this.$scope.selectedComponent = component;
-                                this.cacheComponentsInstancesFullData.push(component);
-                            };
-                            let onError = (component:Models.Components.Component) => {
-                                console.log("Error updating selected component");
-                                this.$scope.isLoadingRightPanel = false;
-                            };
-                            this.ComponentFactory.getComponentFromServer(this.$scope.currentComponent.selectedInstance.originType, this.$scope.currentComponent.selectedInstance.componentUid).then(onSuccess, onError);
-                        } catch(e){
-                            console.log("Error updating selected component", e);
-                            this.$scope.isLoadingRightPanel = false;
-                        }
-                    }
-                }
-                else {
-                    this.$scope.selectedComponent = this.$scope.currentComponent;
-                }
-            };
-
-            this.$scope.setSelectedInstance = (selectedComponent:Models.ComponentsInstances.ComponentInstance):void => {
-
-                this.$log.debug('composition-view-model::onNodeSelected:: with id: '+ selectedComponent.uniqueId);
-                this.$scope.currentComponent.setSelectedInstance(selectedComponent);
-                this.$scope.updateSelectedComponent();
-
-                if (this.$state.current.name === 'workspace.composition.api') {
-                    this.$state.go('workspace.composition.details');
-                }
-                if (this.$state.current.name === 'workspace.composition.relations' && this.$scope.currentComponent.isProduct()) {
-                    this.$state.go('workspace.composition.details');
-                }
-            };
-
-            this.$scope.onBackgroundClick = ():void => {
-                this.$scope.currentComponent.selectedInstance = null;
-                this.$scope.selectedComponent = this.$scope.currentComponent;
-
-                if (this.$state.current.name === 'workspace.composition.api') {
-                    this.$state.go('workspace.composition.details');
-                }
-            };
-
-            this.$scope.openUpdateModal = ():void => {
-                this.openUpdateComponentInstanceNameModal();
-            };
-
-            this.$scope.deleteSelectedComponentInstance = ():void => {
-                let state = "deleteInstance";
-                let onOk = ():void => {
-                    this.removeSelectedComponentInstance();
-                    //this.$scope.graphApi.deleteSelectedNodes();
-                };
-                let title:string =  this.$scope.sdcMenu.alertMessages[state].title;
-                let message:string =  this.$scope.sdcMenu.alertMessages[state].message.format([this.$scope.currentComponent.selectedInstance.name]);
-                this.ModalsHandler.openAlertModal(title, message).then(onOk);
-            };
-
-            this.$scope.setComponent = (component: Models.Components.Product):void => {
-                this.$scope.currentComponent = component;
-            }
-
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view.html
deleted file mode 100644
index 4efc74c31b..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition-view.html
+++ /dev/null
@@ -1,99 +0,0 @@
-<div class="workspace-composition">
-    <loader data-display="isLoading"></loader>
-    <div class="w-sdc-designer-canvas" data-ng-class="{sidebaractive: displayDesignerRightSidebar}" >
-        <palette components="leftPanelComponents"
-                 current-component="currentComponent"
-                 is-view-only="isViewOnly"
-                 is-loading="isLoading"></palette>
-
-        <composition-graph component="currentComponent" is-view-only="isViewOnly"></composition-graph>
-        <!--<graph-creator left-panel-components="leftPanelComponents"-->
-        <!--data-tests-id="canvas"-->
-        <!--on-instance-selected="setSelectedInstance(componentInstance)"-->
-        <!--on-background-click="onBackgroundClick()" current-component="currentComponent"-->
-        <!--api="graphApi" is-view-only="isViewOnly" is-loading="isLoading"></graph-creator>-->
-    </div>
-
-    <div class="w-sdc-designer-sidebar-toggle" data-ng-class="{'active': displayDesignerRightSidebar}"
-         data-ng-init="displayDesignerRightSidebar = true"
-         data-ng-click="displayDesignerRightSidebar = !displayDesignerRightSidebar">
-        <div class="w-sdc-designer-sidebar-toggle-icon sprite-new pointer menu-open-left"></div>
-    </div>
-
-    <div class="w-sdc-designer-sidebar" data-ng-class="{'view-mode':isViewOnly}">
-
-        <div class="w-sdc-designer-sidebar-head" data-tests-id="w-sdc-designer-sidebar-head">
-            <div class="w-sdc-designer-sidebar-logo-ph">
-                <div class="large {{selectedComponent.iconSprite}} {{selectedComponent.icon}}">
-                    <div ng-if="isComponentInstanceSelected()"
-                         data-ng-class="{'non-certified':'CERTIFIED' !== selectedComponent.lifecycleState, 'smaller-icon': selectedComponent.icon==='vl' || selectedComponent.icon==='cp'}"
-                         tooltips tooltip-side="top" tooltip-content="Not certified"></div>
-                </div>
-            </div>
-
-            <div class="w-sdc-designer-sidebar-logo">
-              <span class="w-sdc-designer-sidebar-logo-title" data-tests-id="selectedCompTitle" tooltips
-                    tooltip-class="tooltip-custom break-word-tooltip"
-                    tooltip-content="&#8203;{{isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName}}"
-                    data-ng-bind="isComponentInstanceSelected() ? currentComponent.selectedInstance.name : currentComponent.name | resourceName"></span>
-            </div>
-            <div class="sprite e-sdc-small-icon-pencil w-sdc-designer-update-resource-icon"
-                 data-ng-if="!isViewOnly && isComponentInstanceSelected()"
-                 data-ng-click="openUpdateModal()" id="editPencil"></div>
-
-            <div class="sprite e-sdc-small-icon-delete w-sdc-designer-delete-resource-icon"
-                 data-tests-id="e-sdc-small-icon-delete"
-                 data-ng-if="!isViewOnly && isComponentInstanceSelected()"
-                 data-ng-click="!isLoading && deleteSelectedComponentInstance()" title="Delete Resource Instance"></div>
-        </div>
-
-        <div class="w-sdc-designer-sidebar-tabs">
-            <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                    data-ui-sref="workspace.composition.details"
-                    tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new info"></div>
-            </button>
-            <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                    ui-sref="workspace.composition.structure"
-                    tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Composition">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new structure"></div>
-            </button>
-            <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                    data-ui-sref="workspace.composition.deployment"
-                    tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts"
-                    data-tests-id="deployment-artifact-tab">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new deployment-artifacts"></div>
-            </button>
-            <button tooltips tooltip-class="tooltip-custom tab-tooltip"
-                    tooltip-content="{{selectedComponent.isResource() ? 'Properties and Attributes': 'Inputs'}}"
-                    class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                    data-ui-sref="workspace.composition.properties"
-                    data-tests-id="properties-and-attributes-tab">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new"
-                     ng-class="selectedComponent.isResource() ? 'properties': 'inputs'"></div>
-            </button>
-            <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                    data-ui-sref="workspace.composition.artifacts"
-                    tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information Artifacts">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div>
-            </button>
-            <button data-ng-show="!selectedComponent.isService()" class="i-sdc-designer-sidebar-tab"
-                    data-ui-sref-active="active" ui-sref="workspace.composition.relations"
-                    tooltips tooltip-class="tooltip-custom tab-tooltip  tooltip-rightside"
-                    tooltip-content="Requirements and Capabilities">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div>
-            </button>
-            <button data-ng-show="selectedComponent.isService()" class="i-sdc-designer-sidebar-tab"
-                    data-ui-sref-active="active" ui-sref="workspace.composition.api" data-tests-id="tab-api"
-                    tooltips tooltip-class="tooltip-custom tab-tooltip tooltip-rightside" tooltip-content="API">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new api"></div>
-            </button>
-
-        </div>
-
-        <div data-ui-view="" class="w-sdc-designer-sidebar-tab-content-view"></div>
-
-        <loader data-display="isLoadingRightPanel" relative="true" size="medium"></loader>
-
-    </div>
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition.less b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition.less
deleted file mode 100644
index 4c4c0a87a5..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/composition.less
+++ /dev/null
@@ -1,864 +0,0 @@
-
-.composition{
-    .sdc-workspace-container{
-            .w-sdc-main-container{
-                .w-sdc-main-right-container{
-                    left:0;
-                    .sdc-workspace-top-bar {
-                        padding-left: 295px;
-                        .not-latest{
-                            left: 270px;
-                        }
-                    }
-                    .w-sdc-main-container-body-content{
-                        padding: 0 0 0 247px;
-                    }
-
-                    > div:first-child{
-                        padding: 0;
-                    }
-                }
-            }
-    }
-}
-
-.workspace-composition {
-    height:100%;
-    display: block;
-    text-align: left;
-    align-items: left;
-    padding: 0;
-
-
-
-    // ---------------------------------------------------------------------------------------------------
-    // Sidebar
-    // ---------------------------------------------------------------------------------------------------
-
-
-
-    .w-sdc-designer-sidebar-toggle {
-        background-color: @main_color_p;
-        border-left: 1px solid @main_color_o;
-        border-bottom: 1px solid @main_color_o;
-        height: 21px;
-        position: absolute;
-        right: 0;
-        top: 53px;
-        width: 17px;
-        transition: right 0.2s;
-        z-index: 10;
-        .box-shadow(-1px 1px 3px 0  @main_color_n);
-
-        &.active {
-            right: 302px;
-            .w-sdc-designer-sidebar-toggle-icon{
-                transform: rotate(180deg);
-            }
-        }
-
-    }
-
-    .w-sdc-designer-sidebar-toggle-icon {
-        margin-left: 6px;
-        margin-top: 6px;
-    }
-
-    .w-sdc-designer-sidebar {
-        background-color:@main_color_p ;
-        .noselect;
-        bottom: 0;
-        position: fixed;
-        right: -302px;
-        width: 302px;
-        top: 102px;
-        transition: right 0.2s;
-        z-index: 9;
-        .box-shadow(-7px -3px 6px -8px @main_color_n);
-
-    }
-
-    .w-sdc-designer-sidebar-toggle.active + .w-sdc-designer-sidebar {
-        right: 0;
-
-    }
-
-    .w-sdc-designer-sidebar-head {
-        padding: 36px 30px 30px 30px;
-        height: 120px;
-    }
-
-    .w-sdc-designer-sidebar-logo-ph {
-        display: inline-block;
-        vertical-align: middle;
-        line-height: 48px;
-        height: 48px;
-    }
-
-    .w-sdc-designer-sidebar-logo {
-        .g_6;
-        display: inline-block;
-        margin-left: 10px;
-        font-weight: 500;
-    }
-
-    .w-sdc-designer-sidebar-logo-title {
-        .s_16_r;
-        .selectable;
-        vertical-align: middle;
-        text-overflow: ellipsis;
-        max-width: 167px;
-        display: inline-block;
-        white-space: nowrap;
-        overflow: hidden;
-    }
-
-    .w-sdc-designer-update-resource-icon {
-        .hand;
-        position: absolute;
-        right: 20px;
-        top: 10px;
-    }
-
-    .w-sdc-designer-delete-resource-icon {
-        .hand;
-        position: absolute;
-        right: 40px;
-        top: 10px;
-    }
-
-    .w-sdc-designer-sidebar-tabs {
-        .bg_e;
-    }
-
-    .w-sdc-designer-sidebar-tabs::after {
-        clear: both;
-        content: '';
-        display: table;
-    }
-
-    .i-sdc-designer-sidebar-tab {
-        background-color: @main_color_p;
-        border: 1px solid @tlv_color_u;;
-        border-left: none;
-        display: inline-block;
-        float: left;
-        height: 36px;
-        padding-top: 9px;
-        text-align: center;
-        width: 50px;
-        .hand;
-
-        &:focus {
-            outline: none;
-        }
-        &.tab-disabled {
-            /* .disabled; */
-        }
-        &.active, &:hover:enabled {
-             background-color: @tlv_color_u;
-            .i-sdc-designer-sidebar-tab-icon {
-                opacity: 1;
-
-
-            }
-
-        }
-
-        div& {
-            padding-top: 0;
-        }
-        /*for tooltip on disabled buttons*/
-    }
-
-    .i-sdc-designer-sidebar-tab-icon {
-        margin-top: 5px ;
-      //  opacity: .4;
-    }
-
-    .w-sdc-designer-sidebar-tab-content {
-        .perfect-scrollbar;
-        height: 100%;
-    }
-
-    .w-sdc-designer-sidebar-tab-content-view {
-        position: absolute;
-        top: 156px;
-        bottom: 0px;
-        width: 100%;
-
-    }
-
-    .w-sdc-designer-sidebar-section {
-    }
-
-    .w-sdc-designer-sidebar-section-title {
-        .m_14_m;
-        background-color: @tlv_color_u;
-        .hand;
-        clear: both;
-        height: 32px;
-        line-height: 32px;
-        margin-top: 1px;
-        padding: 0 40px 0 20px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        position: relative;
-        width: 100%;
-        display: block;
-
-        &.expanded {
-            .w-sdc-designer-sidebar-section-title-icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
-
-    .w-sdc-designer-sidebar-section-title-text {
-        max-width: 240px;
-        display: inline-block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        position: relative;
-    }
-
-    .w-sdc-designer-sidebar-section-title-icon {
-        .hand;
-        .sprite-new;
-        .arrow-up;
-        right: 16px;
-        top: 10px;
-        transition: .3s all;
-        position: absolute;
-    }
-
-    .w-sdc-designer-sidebar-section-content {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .w-sdc-designer-sidebar-section-title + .w-sdc-designer-sidebar-section-content {
-        margin: 0 auto;
-    }
-
-    .w-sdc-designer-sidebar-section-title.expanded + .w-sdc-designer-sidebar-section-content {
-        margin: 0 auto 1px;
-
-    }
-
-    .i-sdc-designer-sidebar-section-content-item {
-        .b_7;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        //max-width: 250px;
-
-        &.description {
-            margin-top: 28px;
-            white-space: normal;
-            word-wrap: break-word;
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-tag {
-        .g_7;
-        .bg_c;
-        border-radius: 4px;
-        display: inline-block;
-        line-height: 25px;
-        margin: 0 4px 6px 0;
-        min-width: 50px;
-        padding: 0 9px;
-        text-align: center;
-        max-width: 280px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .w-sdc-designer-sidebar-section-footer {
-        margin-top: 10px;
-        text-align: center;
-        width: 100%;
-    }
-
-
-
-    .w-sdc-designer-sidebar-section-footer-action {
-        width: 180px;
-        margin-top: 10px;
-    }
-
-    //////////////////////Relationship
-    .w-sdc-designer-sidebar-section-requirements {
-        border-bottom: 1px solid @color_e;
-        margin: 0 13px 20px 13px;
-        padding: 15px 0 0;
-    }
-
-    .w-sdc-designer-sidebar-section-requirements-item {
-        margin-bottom: 20px;
-    }
-
-    .w-sdc-designer-sidebar-section-requirements-label {
-        display: inline-block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-        white-space: nowrap;
-        width: 102px;
-    }
-
-    .w-sdc-designer-sidebar-section-requirements-select {
-        border: 1px solid @color_e;
-        min-height: 30px;
-        padding: 4px 13px;
-        width: 168px;
-    }
-
-    //////////////////////Properties
-    .i-sdc-designer-sidebar-section-content-item-property-and-attribute {
-        .b_7;
-        border-bottom: 1px solid @color_e;
-        min-height: 72px;
-        padding: 15px 10px 10px 18px;
-        position: relative;
-
-        &:first-child {
-            //margin-top: -18px;
-        }
-
-        &:hover {
-            // .bg_c_hover;
-            .bg_c;
-            transition: all .3s;
-
-            .i-sdc-designer-sidebar-section-content-item-button {
-                display: block;
-            }
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-property-and-attribute-label {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 200px;
-        white-space: nowrap;
-        display: inline-block;
-        &:hover {
-            .a_7;
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-property-value {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 200px;
-        display: inline-block;
-        white-space: nowrap;
-
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-property-label-value {
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-button {
-        display: none;
-        position: absolute;
-        top: 25px;
-
-        &.update {
-            background-color: transparent;
-            border: 0;
-            right: 60px;
-        }
-
-        &.delete {
-            background-color: transparent;
-            border: 0;
-            right: 13px;
-        }
-
-        &.download {
-            background-color: transparent;
-            border: 0;
-            right: 35px;
-        }
-
-        &.download-env {
-            background-color: transparent;
-            border: 0;
-            right: 35px;
-            margin-top: 65px;
-        }
-
-        &.attach {
-            background-color: transparent;
-            border: 0;
-            right: 15px;
-        }
-    }
-
-    // ---------------------------------------------------------------------------------------------------
-    // Canvas
-    // ---------------------------------------------------------------------------------------------------
-    .w-sdc-designer-canvas {
-        height:100%;
-        .noselect;
-        .bg_c;
-        bottom: 0;
-        // position: fixed;
-        //right: 0;
-        //left: 240px;
-        //top: 94px;
-        .view-mode{
-            background-color: #f8f8f8;
-            border:0;
-        }
-    }
-
-    .w-sdc-designer-canvas.sidebaractive {
-        //right: 300px;
-    }
-
-    .w-sdc-designer-element {
-        .hand;
-        width: 200px;
-        height: 100px;
-        position: absolute;
-        text-align: center;
-        top: 50%;
-        margin-top: -200px;
-        left: 50%;
-        margin-left: -50px;
-    }
-
-    .w-sdc-designer-resource-label {
-        .q_7;
-    }
-
-    .w-sdc-designer-resource-label-indicator {
-        .bg_q;
-        border-radius: 50%;
-        display: inline-block;
-        height: 10px;
-        margin-right: 6px;
-        vertical-align: middle;
-        width: 10px;
-
-        &.valid {
-            .bg_l;
-        }
-
-        &.invalid {
-            .bg_h;
-        }
-    }
-
-    // ---------------------------------------------------------------------------------------------------
-    // Leftbar
-    // ---------------------------------------------------------------------------------------------------
-    .w-sdc-designer-leftbar {
-        background-color:  @main_color_p;
-        bottom: 0;
-        left: 0;
-        overflow-y: scroll;
-        overflow-x: hidden;
-        position: absolute;
-        top: 0;
-        width: 244px;
-        .box-shadow(7px -3px 6px -8px @main_color_n);
-
-    }
-
-    .w-sdc-designer-leftbar-title {
-
-        .p_16_m;
-        background-color:  @main_color_n;
-        line-height: 40px;
-        padding: 0 17px;
-    }
-
-    .w-sdc-designer-leftbar-title-count {
-        float: right;
-    }
-
-    .w-scd-diagram-container {
-       // left: 240px;
-        //right: 300px;
-    }
-
-    .w-sdc-designer-leftbar-search {
-        background-color:  @tlv_color_u;
-        padding: 10px;
-        white-space: nowrap;
-        position: relative;
-    }
-
-    .w-sdc-designer-leftbar-search-input {
-        border: 1px solid @color_e;
-        .border-radius(4px);
-        height: 30px;
-        margin: 0;
-        padding: 0px 28px 3px 10px;
-        vertical-align: 4px;
-        width: 100%;
-        outline: none;
-        font-style: italic;
-    }
-
-    .w-sdc-designer-leftbar-search-filter {
-
-    }
-
-    .i-sdc-designer-leftbar-section {
-        .hand;
-    }
-
-    .i-sdc-designer-leftbar-section-title {
-        .m_14_m;
-        background-color:  @tlv_color_u;
-        .hand;
-        clear: both;
-        height: 40px;
-        line-height: 40px;
-        margin-top: 1px;
-        padding: 0 10px;
-        position: relative;
-        text-transform: uppercase;
-        font-weight: bold;
-    }
-
-    .i-sdc-designer-leftbar-section-title-icon {
-        .hand;
-        .sprite-new;
-        .arrow-up;
-        width: 15px;
-        height: 9px;
-        position: absolute;
-        right: 13px;
-        top: 18px;
-        transition: .3s all;
-    }
-
-    .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-title-icon {
-        transform: rotate(180deg);
-        margin-right: 2px;
-    }
-
-    .i-sdc-designer-leftbar-section-content {
-        background-color:  @main_color_o;
-    }
-
-    .i-sdc-designer-leftbar-section-content-item {
-        background-color:  @main_color_p;
-        overflow: hidden;
-
-        &:hover {
-            background-color:  @main_color_p;
-        }
-
-        .cp{
-            margin: 6px;
-        }
-
-        .vl{
-            margin: 6px;
-        }
-    }
-
-    .i-sdc-designer-leftbar-section-content-subcat {
-        .m_14_m;
-        background-color:  @tlv_color_t;
-        line-height: 35px;
-        padding: 0 10px;
-        cursor: default;
-
-
-        &:hover {
-            background-color:  @func_color_r;
-        }
-
-
-    }
-
-    .i-sdc-designer-leftbar-section .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-item {
-        max-height: 0px;
-        margin: 0 auto;
-        transition: all .3s;
-    }
-
-    .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-item {
-        max-height: 64px;
-        margin: 0 auto 1px auto;
-        //  padding: 4px 13px;
-    }
-
-    .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-subcat {
-        margin: 0;
-    }
-
-    .i-sdc-designer-leftbar-section-content-item-icon-ph {
-        display: inline-block;
-        margin: 12px 0 12px 10px;
-        pointer-events: auto;
-
-        .non-certified {
-            position: relative;
-            left: 27px;
-            bottom: 6px;
-            .sprite;
-            .s-sdc-state-non-certified;
-            display: block;
-
-            &.smaller-icon {
-                bottom: 6px;
-                left: 13px;
-            }
-        }
-
-
-
-    }
-
-    .non-certified {
-        position: relative;
-        left: 43px;
-        bottom: 3px;
-        .sprite;
-        .s-sdc-state-non-certified;
-        display: block;
-
-        &.smaller-icon {
-            left: 35px;
-            bottom: -14px;
-        }
-    }
-    /*
-    .i-sdc-composition-leftbar-section-content-item-icon {
-        background-image: url('../../../styles/images/resource-icons/default.png');
-        // position: absolute;
-        right: 20px;
-        top: 10px;
-        height: 40px;
-        width: 40px;
-        background-size: 40px;
-    }
-    */
-
-    .i-sdc-designer-leftbar-section-content-item-info {
-        display: inline-block;
-        // margin-left: 10px;
-        //overflow: hidden;
-        // vertical-align: middle;
-        width: 160px;
-        padding: 0 0 0 10px;
-    }
-
-    .i-sdc-designer-leftbar-section-content-item-info-title {
-        .m_14_m;
-        line-height: 14px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        text-transform: uppercase;
-        max-width: 120px;
-        display: inline-block;
-        white-space: nowrap;
-        vertical-align: bottom;
-    }
-
-    .i-sdc-designer-leftbar-section-content-item-info-text {
-        .p_3;
-        line-height: 15px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        //margin: -1px 0 2px 0;
-    }
-
-    .i-sdc-designer-leftbar-section-content-item-info-text-link {
-        color: @color_s;
-        text-decoration: underline;
-        float: right;
-        position: absolute;
-        right: 17px;
-        // bottom: 5px;
-    }
-
-    // ---------------------------------------------------------------------------------------------------
-    // Form actions
-    // ---------------------------------------------------------------------------------------------------
-    .w-sdc-form-actions-container.add-property {
-        text-align: center;
-        width: 100%;
-        margin-top: 2px;
-        margin-bottom: 12px;
-
-        .w-sdc-form-action {
-            width: 245px;
-        }
-        .w-sdc-form-action.add-property-add-another {
-            .bg_a;
-            margin-left: 35px;
-        }
-        .w-sdc-form-action.add-property-done {
-            margin-left: 312px;
-        }
-        .w-sdc-form-action.save {
-            margin-left: 327px;
-            margin-bottom: 30px;
-        }
-
-    }
-
-    // ---------------------------------------------------------------------------------------------------
-    // Top menu
-    // ---------------------------------------------------------------------------------------------------
-    .w-sdc-header-menu {
-        padding: 25px 0;
-        text-align: center;
-        white-space: nowrap;
-    }
-
-    .i-sdc-header-menu-item {
-        cursor: pointer;
-        display: inline-block;
-        height: 43px;
-        min-width: 93px;
-        padding: 0 38px;
-        position: relative;
-        vertical-align: middle;
-
-        &::after {
-            border-right: 1px solid @color_m;
-            content: '';
-            display: block;
-            height: 43px;
-            right: 0;
-            position: absolute;
-            top: 0;
-            width: 2px;
-        }
-
-        &:first-child {
-            &::before {
-                border-right: 1px solid @color_m;
-                content: '';
-                display: block;
-                height: 43px;
-                left: 0;
-                position: absolute;
-                top: 0;
-                width: 2px;
-            }
-        }
-    }
-
-    .i-sdc-header-menu-item-icon {
-        display: inline-block;
-        height: 20px;
-        width: 28px;
-    }
-
-    .i-sdc-header-menu-item-label {
-        .g_1;
-        line-height: 18px;
-    }
-
-    // ---------------------------------------------------------------------------------------------------
-    // Canvas inline menu
-    // ---------------------------------------------------------------------------------------------------
-    .w-sdc-canvas-menu {
-        position: fixed;
-        z-index: 100;
-
-        border-style: solid;
-        border-width: 1px;
-        border-color: #d8d8d8;
-        box-sizing: border-box;
-        background-color: #ffffff;
-        box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1);
-        width: 91px;
-
-/*        &.vl-type-select{
-            width: 173px;
-        }
-*/
-
-        h3 {
-            color: @func_color_s;
-            font-size: 14px;
-            font-weight: bold;
-            margin: 0;
-            padding: 7px 11px;
-            border-bottom: 1px solid #e5e5e5;
-        }
-
-        .w-sdc-canvas-menu-content {
-            padding: 5px 5px;
-
-            &.vl-select{
-                border-bottom: #d8d8d8 solid 1px;
-                line-height: 15px;
-
-                .tlv-radio {
-                    padding: 3px 0px;
-
-                    .tlv-radio-label {
-                        padding: 3px 0px;
-
-                        &::before {
-                            margin-right: 10px;
-                        }
-                    }
-                }
-            }
-
-            .w-sdc-canvas-menu-content-update-button {
-                .sprite;
-                .sprite.e-sdc-small-icon-delete;
-                .hand;
-                position: absolute;
-                top: 15px;
-                right: 10px;
-            }
-            .w-sdc-canvas-menu-content-delete-button {
-                .sprite;
-                .sprite.e-sdc-small-icon-delete;
-                .hand;
-                margin: 0 8px 0 6px;
-            }
-        }
-
-        .w-sdc-canvas-menu-arrow {
-            //TODO: Missing image for small blue triangle.
-            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE1OTIzNDI1MENFQjExRTU4ODRERTI1MDM2REZCOUYzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE1OTIzNDI2MENFQjExRTU4ODRERTI1MDM2REZCOUYzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTU5MjM0MjMwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTU5MjM0MjQwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4gBXTlAAAAOElEQVR42mK0rp7NgASMgZgFiE/CBJjQJPcA8U4gNkdXAJMUAGJ+ZEVMaJIwAFfEhEUSRRFAgAEAVtgJyiLAPWAAAAAASUVORK5CYII=');
-            content: '';
-            display: block;
-            height: 21px;
-            position: absolute;
-            right: 12px;
-            top: -24px;
-            width: 184px;
-            background-repeat: no-repeat;
-            background-position: 175px 16px;
-        }
-
-    }
-}
-/*.right-tab-loader {
-    border: 16px solid #f3f3f3; !* Light grey *!
-    border-top: 16px solid #3498db; !* Blue *!
-    border-radius: 50%;
-    width: 120px;
-    height: 120px;
-    animation: spin 2s linear infinite;
-}*/
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
deleted file mode 100644
index 5bb5d2cbbd..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
+++ /dev/null
@@ -1,255 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-    import Resource = Sdc.Models.Components.Resource;
-
-   export interface IArtifactsViewModelScope extends ICompositionViewModelScope {
-        artifacts: Array<Models.ArtifactModel>;
-        artifactType: string;
-        downloadFile:Models.IFileDownload;
-        isLoading:boolean;
-
-        getTitle(): string;
-        addOrUpdate(artifact:Models.ArtifactModel): void;
-        delete(artifact:Models.ArtifactModel): void;
-        download(artifact:Models.ArtifactModel): void;
-        openEditEnvParametersModal(artifact:Models.ArtifactModel):void;
-        getEnvArtifact(heatArtifact:Models.ArtifactModel):any;
-        getEnvArtifactName(artifact:Models.ArtifactModel):string;
-        isLicenseArtifact(artifact:Models.ArtifactModel):boolean;
-        isVFiArtifact(artifact:Models.ArtifactModel):boolean;
-    }
-
-    export class ResourceArtifactsViewModel {
-
-        static '$inject' = [
-            '$scope',
-            '$filter',
-            '$modal',
-            '$templateCache',
-            '$state',
-            'sdcConfig',
-            'ArtifactsUtils',
-            'ModalsHandler',
-            'Sdc.Services.CacheService'
-        ];
-
-        constructor(private $scope:IArtifactsViewModelScope,
-                    private $filter:ng.IFilterService,
-                    private $modal:ng.ui.bootstrap.IModalService,
-                    private $templateCache:ng.ITemplateCacheService,
-                    private $state:any,
-                    private sdcConfig:Models.IAppConfigurtaion,
-                    private artifactsUtils:Sdc.Utils.ArtifactsUtils,
-                    private ModalsHandler: Utils.ModalsHandler,
-                    private cacheService:Services.CacheService) {
-
-            this.initScope();
-        }
-
-
-        private initArtifactArr = (artifactType:string):void => {
-            let artifacts:Array<Models.ArtifactModel> = [];
-
-            if (this.$scope.selectedComponent) {
-                if ('interface' == artifactType) {
-                    let interfaces = this.$scope.selectedComponent.interfaces;
-                    if (interfaces && interfaces.standard && interfaces.standard.operations) {
-
-                        angular.forEach(interfaces.standard.operations, (operation:any, interfaceName:string):void => {
-                            let item:Sdc.Models.ArtifactModel = <Sdc.Models.ArtifactModel>{};
-                            if (operation.implementation) {
-                                item = <Sdc.Models.ArtifactModel> operation.implementation;
-                            }
-                            item.artifactDisplayName = interfaceName;
-                            item.artifactLabel = interfaceName;
-                            item.mandatory = false;
-                            artifacts.push(item);
-                        });
-                    }
-                }else {
-                    //init normal artifacts, deployment or api artifacts
-                    let artifactsObj:Models.ArtifactGroupModel;
-                    switch (artifactType) {
-                        case "api":
-                            artifactsObj = (<Models.Components.Service>this.$scope.selectedComponent).serviceApiArtifacts;
-                            break;
-                        case "deployment":
-                            if (!this.$scope.isComponentInstanceSelected()) {
-                                artifactsObj = this.$scope.selectedComponent.deploymentArtifacts;
-                            } else {
-                                artifactsObj = this.$scope.currentComponent.selectedInstance.deploymentArtifacts;
-                            }
-                            break;
-                        default:
-                            artifactsObj = this.$scope.selectedComponent.artifacts;
-                            break;
-                    }
-                    _.forEach(artifactsObj, (artifact:Models.ArtifactModel, key) => {
-                        artifacts.push(artifact);
-                    });
-                }
-            }
-            this.$scope.artifacts = artifacts;
-        };
-
-        private openEditArtifactModal = (artifact:Models.ArtifactModel):void => {
-            let viewModelsHtmlBasePath:string = '/app/scripts/view-models/';
-
-            let modalOptions:ng.ui.bootstrap.IModalSettings = {
-                template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/artifact-form/artifact-form-view.html'),
-                controller: 'Sdc.ViewModels.ArtifactResourceFormViewModel',
-                size: 'sdc-md',
-                backdrop: 'static',
-                keyboard: false,
-                resolve: {
-                    artifact: ():Models.ArtifactModel => {
-                        return artifact;
-                    },
-                    component: (): Models.Components.Component => {
-                        return  this.$scope.currentComponent;
-                    }
-                }
-            };
-
-            let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$modal.open(modalOptions);
-            modalInstance
-                .result
-                .then(():void => {
-                    this.initArtifactArr(this.$scope.artifactType);
-                });
-        };
-
-        private initScope = ():void => {
-            let self = this;
-            this.$scope.isLoading= false;
-            this.$scope.artifactType = this.artifactsUtils.getArtifactTypeByState(this.$state.current.name);
-            this.initArtifactArr(this.$scope.artifactType);
-
-            this.$scope.getTitle = ():string => {
-                return this.artifactsUtils.getTitle(this.$scope.artifactType, this.$scope.selectedComponent);
-            };
-
-            let vfiArtifactTypes:any = this.cacheService.get('UIConfiguration').artifacts.deployment.resourceInstanceDeploymentArtifacts;
-
-            this.$scope.isVFiArtifact=(artifact:Models.ArtifactModel):boolean=>{
-                return vfiArtifactTypes[artifact.artifactType];
-            }
-
-            this.$scope.$watch('selectedComponent', (newResource:Models.Components.Component):void => {
-                if (newResource) {
-                    this.initArtifactArr(this.$scope.artifactType);
-                }
-            });
-
-
-            this.$scope.$watch('currentComponent.selectedInstance', (newInstance:Models.ComponentsInstances.ComponentInstance):void => {
-                if (newInstance) {
-                    this.initArtifactArr(this.$scope.artifactType);
-                }
-            });
-
-            this.$scope.addOrUpdate = (artifact:Models.ArtifactModel):void => {
-                this.artifactsUtils.setArtifactType(artifact, this.$scope.artifactType);
-                let artifactCopy = new Models.ArtifactModel(artifact);
-                this.openEditArtifactModal(artifactCopy);
-            };
-
-
-            this.$scope.delete = (artifact:Models.ArtifactModel):void => {
-
-                let onOk = ():void => {
-                    this.$scope.isLoading= true;
-                    this.artifactsUtils.removeArtifact(artifact, this.$scope.artifacts);
-
-                    let success = (responseArtifact:Models.ArtifactModel):void => {
-                        this.initArtifactArr(this.$scope.artifactType);
-                        this.$scope.isLoading= false;
-                    };
-
-                    let error =(error:any):void =>{
-                        console.log('Delete artifact returned error:', error);
-                        this.initArtifactArr(this.$scope.artifactType);
-                        this.$scope.isLoading= false;
-                    };
-                    if(this.$scope.isComponentInstanceSelected()){
-                        this.$scope.currentComponent.deleteInstanceArtifact(artifact.uniqueId, artifact.artifactLabel).then(success, error);
-                    }else{
-                        this.$scope.currentComponent.deleteArtifact(artifact.uniqueId, artifact.artifactLabel).then(success, error);//TODO simulate error (make sure error returns)
-                    }
-                };
-                let title: string = this.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TITLE");
-                let message: string = this.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TEXT", "{'name': '" + artifact.artifactDisplayName + "'}");
-                this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
-            };
-
-
-            this.$scope.getEnvArtifact = (heatArtifact:Models.ArtifactModel):any=>{
-                return _.find(this.$scope.artifacts, (item:Models.ArtifactModel)=>{
-                    return item.generatedFromId === heatArtifact.uniqueId;
-                });
-            };
-
-            this.$scope.getEnvArtifactName = (artifact:Models.ArtifactModel):string =>{
-                let envArtifact = this.$scope.getEnvArtifact(artifact);
-                if(envArtifact){
-                    return envArtifact.artifactDisplayName;
-                }
-            };
-
-            this.$scope.isLicenseArtifact = (artifact:Models.ArtifactModel) :boolean => {
-                let isLicense:boolean = false;
-                if(this.$scope.component.isResource() && (<Resource>this.$scope.component).isCsarComponent()) {
-                    isLicense = this.artifactsUtils.isLicenseType(artifact.artifactType);
-                }
-
-                return isLicense;
-            };
-
-            this.$scope.openEditEnvParametersModal = (artifact:Models.ArtifactModel):void => {
-
-                let modalOptions:ng.ui.bootstrap.IModalSettings = {
-                    template: this.$templateCache.get('/app/scripts/view-models/forms/env-parameters-form/env-parameters-form.html'),
-                    controller: 'Sdc.ViewModels.EnvParametersFormViewModel',
-                    size: 'sdc-md',
-                    backdrop: 'static',
-                    resolve: {
-                        artifact: ():Models.ArtifactModel => {
-                            return artifact;
-                        },
-                        component: (): Models.Components.Component => {
-                            return  this.$scope.currentComponent;
-                        }
-                    }
-                };
-
-                let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$modal.open(modalOptions);
-                modalInstance
-                    .result
-                    .then(():void => {
-                        this.initArtifactArr(this.$scope.artifactType);
-                    });
-            };
-
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html
deleted file mode 100644
index 8c0138964f..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content artifacts">
-    <div class="w-sdc-designer-sidebar-section">
-        <expand-collapse
-            expanded-selector=".w-sdc-designer-sidebar-section-content" class="w-sdc-designer-sidebar-section-title">
-            <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="getTitle()" tooltips tooltip-content="{{getTitle()}}"></span>
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div class="w-sdc-designer-sidebar-section-content" data-ng-hide="'deployment' == artifactType && !selectedComponent.isComplex()">
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <div class="i-sdc-designer-sidebar-section-content-item-artifact"
-                     data-ng-repeat="artifact in artifacts | orderBy: ['-mandatory', 'artifactDisplayName'] track by $index" data-ng-if="!isComponentInstanceSelected() || (isVFiArtifact(artifact)|| artifact.esId) && 'HEAT_ENV' !== artifact.artifactType">
-                    <span data-ng-if="isComponentInstanceSelected() && artifact.heatParameters.length" class="i-sdc-designer-sidebar-section-content-item-file-link"></span>
-                    <div class="i-sdc-designer-sidebar-section-content-item-artifact-details" data-ng-class="{'heat':artifact.isHEAT() && artifact.heatParameters.length}">
-                        <div class="i-sdc-designer-sidebar-section-content-item-artifact-filename" data-tests-id="artifactName"
-                             data-ng-class="{'hand enabled':!isComponentInstanceSelected() && artifact.heatParameters.length && !isViewMode()}"
-                             data-ng-bind="artifact.artifactName" tooltips tooltip-content="{{artifact.artifactName}}"
-                             data-ng-click="!isViewMode() && !isComponentInstanceSelected() && artifact.heatParameters.length && openEditEnvParametersModal(artifact)" data-ng-if="artifact.artifactName"></div>
-                        <div>
-                            <span class="i-sdc-designer-sidebar-section-content-item-artifact-details-name" data-tests-id="artifact_Display_Name-{{artifact.artifactDisplayName}}"
-                                  data-ng-class="{'hand enabled': (!isComponentInstanceSelected()||isVFiArtifact(artifact)) && !isViewMode() && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact)}"
-                                  data-ng-bind="artifact.artifactDisplayName" data-ng-click="!isViewMode() && !isLoading && (!isComponentInstanceSelected()||isVFiArtifact(artifact)) && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact) && addOrUpdate(artifact)"
-                                  tooltips tooltip-content="{{artifact.artifactDisplayName}}"></span>
-                            <div class="i-sdc-designer-sidebar-section-content-item-artifact-heat-env" ng-if="isComponentInstanceSelected() && artifact.heatParameters.length">
-                                <span class="enabled" data-ng-bind="getEnvArtifactName(artifact)" data-ng-click="!isViewMode() && addOrUpdate(getEnvArtifact(artifact))"></span>
-                                <download-artifact class="i-sdc-designer-sidebar-section-content-item-button download-env sprite e-sdc-small-download hand" artifact="getEnvArtifact(artifact)"
-                                                   component="currentComponent" instance="true"
-                                                   data-tests-id="download"></download-artifact>
-                            </div>
-                        </div>
-
-                        <div class="i-sdc-designer-sidebar-section-content-item-artifact-details-desc">
-                            <span class="i-sdc-designer-sidebar-section-content-item-artifact-details-desc-label" data-ng-show="artifact.description">Description:</span>{{artifact.description}}
-                        </div>
-                    </div>
-                    <button ng-if="!isViewMode() && artifact.esId && (!isComponentInstanceSelected()||isVFiArtifact(artifact)) && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact)" class="i-sdc-designer-sidebar-section-content-item-button delete sprite e-sdc-small-icon-delete"
-                            data-tests-id="delete" data-ng-click="delete(artifact)" type="button"></button>
-                    <button ng-if="!isViewMode() && isComponentInstanceSelected() && (getEnvArtifact(artifact)).heatParameters.length"
-                            class="i-sdc-designer-sidebar-section-content-item-button attach sprite e-sdc-small-icon-pad"
-                            data-ng-click="openEditEnvParametersModal(getEnvArtifact(artifact))" type="button"></button>
-                    <download-artifact ng-if="artifact.esId && 'deployment' != artifactType" class="i-sdc-designer-sidebar-section-content-item-button download sprite e-sdc-small-download hand"
-                                       artifact="artifact" component="selectedComponent" data-tests-id="download"></download-artifact>
-                    <download-artifact ng-if="artifact.esId && 'deployment' == artifactType" class="i-sdc-designer-sidebar-section-content-item-button download sprite e-sdc-small-download hand"
-                                       artifact="artifact" component="currentComponent" instance="isComponentInstanceSelected()" data-tests-id="download"></download-artifact>
-                    <button ng-if="!isViewMode() && !artifact.esId && artifactType==='deployment' && !isComponentInstanceSelected() && !artifact.isThirdParty()" class="i-sdc-designer-sidebar-section-content-item-button attach sprite e-sdc-small-icon-upload"
-                            data-ng-click="addOrUpdate(artifact)" type="button" data-tests-id="add_Artifact"></button>
-                </div>
-            </div>
-
-        </div>
-        <div class="w-sdc-designer-sidebar-section-footer" data-ng-if="!isViewMode() && artifactType!=='api' && (!isComponentInstanceSelected()||selectedComponent.resourceType=='VF') && !currentComponent.isProduct() && ('deployment' != artifactType || selectedComponent.isComplex())">
-            <button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" data-tests-id="add_Artifact_Button" data-ng-click="addOrUpdate({})" type="button">Add Artifact</button>
-        </div>
-    </div>
-</perfect-scrollbar>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less
deleted file mode 100644
index 5726ca66fc..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/artifacts/artifacts.less
+++ /dev/null
@@ -1,172 +0,0 @@
-.w-sdc-designer-sidebar-tab-content.artifacts {
-
-    .i-sdc-designer-sidebar-section-content-item-artifact.hand {
-        .hand;
-    }
-
-    .w-sdc-designer-sidebar-section-content {
-        padding: 0;
-    }
-    .w-sdc-designer-sidebar-section-title {
-        &.expanded {
-            margin-bottom: 0;
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-artifact-details {
-        display: inline-block;
-        margin-left: 5px;
-        vertical-align: middle;
-        width: 180px;
-        &.heat {
-            line-height: 18px;
-            width: 250px;
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-artifact-details-name {
-        .g_7;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width:220px;
-        display: inline-block;
-        //text-transform: capitalize;
-        &.enabled {
-            &:hover {
-                .a_7;
-            }
-        }
-
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-artifact-heat-env {
-        .g_7;
-        margin-top: 6px;
-        line-height: 42px;
-        padding-top: 10px;
-        border-top:1px solid #c8cdd1;
-        .enabled {
-            &:hover {
-                .hand;
-                .a_7;
-            }
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-artifact-filename {
-        .g_7;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: 225px;
-        display: inline-block;
-        .bold;
-        &.enabled {
-            &:hover {
-                .a_7;
-            }
-        }
-    }
-
-
-    .i-sdc-designer-sidebar-section-content-item-file-link{
-        border-left: 1px #848586 solid;
-        height: 58px;
-        margin-left: -11px;
-        margin-top: 11px;
-        border-top: 1px #848586 solid;
-        border-bottom: 1px #848586 solid;
-        width: 12px;
-        float: left;
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-artifact-details-desc {
-        display: none;
-        line-height: 16px;
-        word-wrap: break-word;
-        white-space: normal;
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-artifact-details-desc-label {
-        .b_3;
-    }
-
-
-    .i-sdc-designer-sidebar-section-content-item-artifact {
-        border-bottom: 1px solid #c8cdd1;
-        padding: 5px 10px 5px 18px;
-        position: relative;
-       // line-height: 36px;
-        min-height: 61px;
-        cursor: default;
-        display: flex;
-        align-items: center;
-
-
-        .i-sdc-designer-sidebar-section-content-item-button {
-            top: 20px;
-            line-height: 10px;
-        }
-
-        &:hover {
-            //background-color: @color_c;
-            .bg_c;
-            transition: all .3s;
-
-            .i-sdc-designer-sidebar-section-content-item-button {
-                display: block;
-
-            }
-
-        }
-    }
-
-}
-
-///////////////////Lifecycle Management
-.i-sdc-designer-sidebar-section-content-item-lm {
-    .b_7;
-    border-bottom: 1px solid @color_e;
-    cursor: pointer;
-    height: 65px;
-    padding: 22px 0;
-    position: relative;
-
-    &:hover {
-        .bg_c_hover;
-        margin-left: -10px;
-        margin-right: -10px;
-        padding: 22px 10px;
-
-        .i-sdc-designer-sidebar-section-content-item-lm-icon {
-            right: 16px;
-        }
-    }
-}
-
-.i-sdc-designer-sidebar-section-content-item-lm:first-child {
-    margin-top: -18px;
-}
-
-.i-sdc-designer-sidebar-section-content-item-lm-icon {
-    position: absolute;
-    right: 6px;
-
-    //TODO: Replace the icons.
-    &.icon-view {
-        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAJCAYAAAACTR1pAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdGMDNBRUJDMDkxNjExRTVCMjRBOEI5QzMxQTlBQjY4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdGMDNBRUJEMDkxNjExRTVCMjRBOEI5QzMxQTlBQjY4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0YwM0FFQkEwOTE2MTFFNUIyNEE4QjlDMzFBOUFCNjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0YwM0FFQkIwOTE2MTFFNUIyNEE4QjlDMzFBOUFCNjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4U2decAAABRUlEQVR42pyRPUvDUBSG39t2UyyaBgvWQZMqKoFq4lBH0U0UqXSxKPaPieCoWPAPKIgdjG1ohaghOrSR1iaLKMXpmnMhQVfPcLmc8zxwPhjnHFE4rx3eMO/w4rr4+vwQuZHRMcwqClaMVeRnplnEskg8O7/g96YJSZLgBz5+R0bKIAgC6IaBvdKukBP0HJ+cctu2cVCtQsrIUFUVlcp+LE6EItWIIVaIV9c3/PnRRqlcxkJeYV2vi+/hEO/9QSx6b56oEUMsOal6/TacQcXinCpaGE+n0QnljufFIuUoiAlZTk6iWFyD6zpoWi3RwvrmBlLJZCzRn3IUxBBLjlgO9e06T9ja3sGyrqPX66NtWQLWCgVks5Owmg1c1mpQ8vM4OqywP1s1w1PkpnJY0jTIsizy/sDHQ7sFmt0ITxJtlf33jj8CDADhB52tEX6ifAAAAABJRU5ErkJggg==');
-        height: 9px;
-        top: 29px;
-        width: 14px;
-    }
-
-    //TODO: Replace the icons.
-    &.icon-alert {
-        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANCAYAAAB2HjRBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhBM0YxQTBCMDkyMDExRTVBNzlCQUYxNEYwMDUwOTQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhBM0YxQTBDMDkyMDExRTVBNzlCQUYxNEYwMDUwOTQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEEzRjFBMDkwOTIwMTFFNUE3OUJBRjE0RjAwNTA5NDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEEzRjFBMEEwOTIwMTFFNUE3OUJBRjE0RjAwNTA5NDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7exgceAAAB5klEQVR42oySy2tTQRTGfzN3cpvbpFTaUlzUjeCuVFyJf4DuCl34wL/CrbpUunLnwpUuFFy48IFiwYWhpYuW+gCLrbWKBQumaRIba5ub3MccJ5WECCV44MDMme873/lmBhGhnZulcn/3/sfrO7J/45R017pT0xUS2bC93vy2LAOLt5DfCeUn14RD4h/ysbHRDii/8pyo7DmFiP7VZ4Rbu9KT3I7i+qJklp7ibQt2J6HeNOhXV/gv8tDcbaLtXYLJKeTcZfxqSPPzvGu6ID3J1Q8z0ny/hIkM5swF8qenUFUfwixHCtd7Kwez04jOgEmc+hq6tuZ8N9E6xG5U+Pn2kRxKLs7eE7tRc0XlToRM2sD+2sGmDiY+kWsSFG528Kr1Xgfjfn0n5uElvFrrzVqVDHqkiTKjxCsV9LBx08QkgcY/eZH+89Oqo+x9eumkwQaQaoPEKWpsHHN8ArItgLt5UdiG6736mFLxixyQt+bviik8QPuaNFRIkjqQRZ2YJDo6QWydjTRtOcGPPdJKgnlxFfN9fVmGNhecR4U3mLrL6nPTRTQHXZO5+4jyyI4Iqs99GJvgBiKjcySlj3897y6/kbreI4w0QS7ASxrsa4/cXkxkIzK5PKmNqRMw7NfdeczA+Fn1R4ABAPnMAeCjkgf5AAAAAElFTkSuQmCC');
-        height: 13px;
-        top: 27px;
-        width: 15px;
-    }
-
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts
deleted file mode 100644
index b28de8d331..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view-model.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../../../references"/>
-module Sdc.ViewModels {
-
-    'use strict';
-
-    export interface IEditResourceVersion {
-        allVersions: any;
-        changeVersion: string;
-    }
-
-    interface IDetailsViewModelScope extends ICompositionViewModelScope {
-        isLoading: boolean;
-        $parent: ICompositionViewModelScope;
-        expandedSection: Array<string>;
-        editForm:ng.IFormController;
-        editResourceVersion: IEditResourceVersion;
-
-        changeResourceVersion(): void;
-    }
-
-    export class DetailsViewModel {
-
-        static '$inject' = [
-            '$scope',
-            'LeftPaletteLoaderService',
-            'EventListenerService'
-
-        ];
-
-        constructor(private $scope:IDetailsViewModelScope,
-                    private LeftPaletteLoaderService:Services.Components.LeftPaletteLoaderService,
-                    private eventListenerService:Services.EventListenerService) {
-            this.initScope();
-        }
-
-        private clearSelectedVersion = ():void => {
-            this.$scope.editResourceVersion = {
-                allVersions: {},
-                changeVersion: null
-            };
-        };
-
-        private versioning:Function = (versionNumber:string):string => {
-            let version:Array<string> = versionNumber.split('.');
-            return '00000000'.slice(version[0].length) + version[0] + '.' + '00000000'.slice(version[1].length) + version[1];
-        };
-
-        private initEditResourceVersion = ():void => {
-            this.clearSelectedVersion();
-            this.$scope.editResourceVersion.allVersions[this.$scope.currentComponent.selectedInstance.componentVersion] = this.$scope.currentComponent.selectedInstance.componentUid;
-            _.merge(this.$scope.editResourceVersion.allVersions, angular.copy(this.$scope.selectedComponent.allVersions));
-            let sorted:any= _.sortBy(_.toPairs(this.$scope.editResourceVersion.allVersions), (item)=>{
-                return this.versioning(item[0]);
-            });
-            this.clearSelectedVersion();
-            _.forEach(sorted, (item)=> {
-                this.$scope.editResourceVersion.allVersions[item[0]]= item[1];
-            });
-
-            let highestVersion = _.last(Object.keys(this.$scope.selectedComponent.allVersions));
-
-            //TODO - ask ronny - what happend if the parent is not in the leftPalette  (instance of csar for example)
-            if (parseFloat(highestVersion) % 1) { //if highest is minor, make sure it is the latest checked in -
-                let latestVersionComponent:Models.Components.Component = _.find(this.LeftPaletteLoaderService.getFullDataComponentListWithVls(this.$scope.currentComponent.componentType), (component:Models.Components.Component) => { //latest checked in
-                    return (component.systemName === this.$scope.selectedComponent.systemName
-                    || component.uuid === this.$scope.selectedComponent.uuid);
-                });
-                let latestVersion:string = latestVersionComponent ? latestVersionComponent.version : highestVersion;
-
-                if (highestVersion != latestVersion) { //highest is checked out - remove from options
-                    this.$scope.editResourceVersion.allVersions = _.omit(this.$scope.editResourceVersion.allVersions, highestVersion);
-                }
-            }
-               this.$scope.editResourceVersion.changeVersion = this.$scope.currentComponent.selectedInstance.componentVersion;
-        };
-
-        private initScope = ():void => {
-            this.$scope.isLoading = false;
-            this.$scope.$parent.isLoading = false;
-            this.$scope.expandedSection = ['general', 'tags'];
-            //this.clearSelectedVersion();
-
-            this.$scope.$watch('selectedComponent', (component:Models.Components.Component) => {
-                if (this.$scope.isComponentInstanceSelected()) {
-                    this.initEditResourceVersion();
-                }
-            });
-
-            this.$scope.changeResourceVersion = ():void => {
-                this.$scope.isLoading = true;
-                this.$scope.$parent.isLoading = true;
-
-                let onSuccess = (component:Models.Components.Component)=> {
-                    this.$scope.isLoading = false;
-                    this.$scope.$parent.isLoading = false;
-                    this.$scope.setComponent(component);
-                    this.$scope.updateSelectedComponent();
-
-                    this.eventListenerService.notifyObservers(Sdc.Utils.Constants.GRAPH_EVENTS.ON_VERSION_CHANGED, this.$scope.currentComponent);
-                };
-
-                let onFailed = (error:any)=> {
-                    this.$scope.isLoading = false;
-                    this.$scope.$parent.isLoading = false;
-                    console.log(error);
-                };
-
-                let componentUid:string = this.$scope.editResourceVersion.allVersions[this.$scope.editResourceVersion.changeVersion];
-                this.$scope.currentComponent.changeComponentInstanceVersion(componentUid).then(onSuccess, onFailed);
-            };
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view.html
deleted file mode 100644
index 6ae462760c..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details-view.html
+++ /dev/null
@@ -1,129 +0,0 @@
-<perfect-scrollbar include-padding="true" class="w-sdc-designer-sidebar-tab-content details">
-
-    <div class="w-sdc-designer-sidebar-section">
-        <loader data-display="isLoading"></loader>
-        <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.general" class="w-sdc-designer-sidebar-section-title">
-
-            General Info
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div class="w-sdc-designer-sidebar-section-content general">
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Type:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value"  data-tests-id="rightTab_componentType" data-ng-bind="selectedComponent.componentType"></span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Resource Type:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-if="selectedComponent.isResource()" data-ng-bind="selectedComponent.resourceType"
-                      tooltips tooltip-content="&#8203;{{selectedComponent.resourceType | resourceTypeName}}"
-                      data-tests-id="rightTab_resourceType"></span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item">
-
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Version:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value"
-                      data-ng-if="!isComponentInstanceSelected() || selectedComponent.isVl()"  data-tests-id="rightTab_version" data-ng-bind="selectedComponent.version"></span>
-
-                <ng-form name="editForm" data-ng-if="isComponentInstanceSelected() && !selectedComponent.isVl()">
-                    <select data-ng-model="editResourceVersion.changeVersion" name="changeVersion" data-ng-disabled="$parent.isViewOnly"
-                            class="i-sdc-designer-sidebar-section-content-item-value i-sdc-form-select"
-                            data-ng-class="{'minor': (editResourceVersion.changeVersion)%1}"
-                            data-ng-change="changeResourceVersion()">
-                        <option class="select-instance-version" data-ng-class="{'minor': key%1}"
-                                ng-repeat="(key, value) in editResourceVersion.allVersions">{{key}}</option>
-                    </select></ng-form>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.categories && selectedComponent.categories[0]">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Category:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.categories[0].name"
-                        tooltips tooltip-content="&#8203;{{selectedComponent.categories[0].name}}"
-                        data-tests-id="rightTab_category"></span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.categories && selectedComponent.categories[0] && selectedComponent.categories[0].subcategories">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Sub Category:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.categories[0].subcategories[0].name"
-                      tooltips tooltip-content="&#8203;{{selectedComponent.categories[0].subcategories[0].name}}"
-                      data-tests-id="rightTab_subCategory"></span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Creation Date:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.creationDate | date: 'MM/dd/yyyy'"
-                      data-tests-id="rightTab_creationDate"></span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Author:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.creatorFullName"
-                      tooltips tooltip-content="&#8203;{{selectedComponent.creatorFullName}}"
-                      data-tests-id="rightTab_author">
-                </span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isService()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_PROJECT_CODE"></span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value"
-                      data-tests-id="rightTab_projectCode" data-ng-bind="selectedComponent.projectCode"></span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Vendor Name:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.vendorName"
-                      tooltips tooltip-content="&#8203;{{selectedComponent.vendorName}}"
-                      data-tests-id="rightTab_vendorName">
-                </span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-if="selectedComponent.isResource()">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Vendor Release:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.vendorRelease"
-                      tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="&#8203;{{selectedComponent.vendorRelease}}"
-                      data-tests-id="rightTab_vendorRelease">
-                </span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <span class="i-sdc-designer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CONTACT_ID"></span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value" data-ng-bind="selectedComponent.contactId"
-                      data-tests-id="rightTab_userId"></span>
-            </div>
-            <div class="i-sdc-designer-sidebar-section-content-item description">
-                <span class="i-sdc-designer-sidebar-section-content-item-label">Description:
-
-                    <span class="i-sdc-designer-sidebar-section-content-description-item-value" ellipsis="selectedComponent.description" max-chars="55"
-                          data-tests-id="rightTab_description"></span>
-                </span>
-            </div>
-
-        </div>
-    </div>
-
-    <div class="w-sdc-designer-sidebar-section additionalInformation">
-        <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.additionalInformation" class="w-sdc-designer-sidebar-section-title">
-            Additional Information
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div class="w-sdc-designer-sidebar-section-content additionalInformation">
-            <div class="i-sdc-designer-sidebar-section-content-item" data-ng-repeat="additionalInformation in selectedComponent.getAdditionalInformation() track by $index">
-                <span class="i-sdc-designer-sidebar-section-content-item-label additional-information" data-ng-bind="additionalInformation.key" tooltips tooltip-content="{{additionalInformation.key}}"></span>
-               <span class="i-sdc-designer-sidebar-section-content-item-label">:</span>
-                <span class="i-sdc-designer-sidebar-section-content-item-value additional-information" data-ng-bind="additionalInformation.value"
-                      tooltips tooltip-class="tooltip-custom break-word-tooltip" tooltip-content="{{additionalInformation.value}}"></span>
-            </div>
-        </div>
-    </div>
-
-
-    <div class="w-sdc-designer-sidebar-section tags">
-        <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.tags" class="w-sdc-designer-sidebar-section-title">
-            Tags
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div class="w-sdc-designer-sidebar-section-content tags">
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <span class="i-sdc-designer-sidebar-section-content-item-tag" data-ng-repeat="tag in selectedComponent.tags track by $index" data-ng-bind="tag"
-                data-tests-id="rightTab_tag" tooltips tooltip-content="{{tag}}"></span>
-            </div>
-        </div>
-    </div>
-    </div>
-
-</perfect-scrollbar>
-
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details.less b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details.less
deleted file mode 100644
index e88e130379..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/details/details.less
+++ /dev/null
@@ -1,68 +0,0 @@
-.w-sdc-designer-sidebar-tab-content.details {
-
-    .w-sdc-designer-sidebar-section-title + .w-sdc-designer-sidebar-section-content {
-        padding: 0 10px 0 18px;
-    }
-
-    .w-sdc-designer-sidebar-section-title.expanded + .w-sdc-designer-sidebar-section-content {
-        padding: 10px 10px 10px 18px;
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-label {
-        font-weight: bold;
-        &.additional-information{
-            max-width:100px;
-            display: inline-block;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            vertical-align: bottom;
-        }
-
-    }
-
-
-
-    .i-sdc-designer-sidebar-section-content-item-value {
-       // .hyphenate;
-        padding-left: 10px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        display: inline-block;
-        max-width: 160px;
-        vertical-align:bottom;
-        font-weight: normal;
-        &.additional-information{
-            max-width:160px;
-            display: inline-block;
-        }
-        &.i-sdc-form-select {
-            .b_1;
-            border: 1px solid @border_color_f;
-            width: 210px;
-            max-width: 210px;
-            padding-left: 4px;
-
-            .select-instance-version {
-                .b_1;
-                &.minor {
-                    .h_1;
-                }
-            }
-        }
-        &.minor {
-            .h_1;
-        }
-    }
-    .i-sdc-designer-sidebar-section-content-description-item-value{
-        max-width: none;
-        font-weight: normal;
-      }
-
-    .w-sdc-designer-sidebar-section.tags {
-        .i-sdc-designer-sidebar-section-content-item {
-            white-space: normal;
-        }
-    }
-
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts
deleted file mode 100644
index aef25c51ce..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view-model.ts
+++ /dev/null
@@ -1,228 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-
-    interface IResourcePropertiesAndAttributesViewModelScope extends ICompositionViewModelScope {
-        properties: Models.PropertiesGroup;
-        attributes: Models.AttributesGroup;
-        propertiesMessage: string;
-        addProperty(): void;
-        updateProperty(property:Models.PropertyModel): void;
-        deleteProperty(property:Models.PropertyModel): void;
-        viewAttribute(attribute:Models.AttributeModel): void;
-        groupNameByKey(key:string): string;
-        isPropertyOwner():boolean;
-    }
-
-    export class ResourcePropertiesViewModel {
-
-        static '$inject' = [
-            '$scope',
-            '$filter',
-            '$modal',
-            '$templateCache',
-            'ModalsHandler'
-        ];
-
-
-        constructor(private $scope:IResourcePropertiesAndAttributesViewModelScope,
-                    private $filter:ng.IFilterService,
-                    private $modal:ng.ui.bootstrap.IModalService,
-                    private $templateCache:ng.ITemplateCacheService,
-                    private ModalsHandler: Utils.ModalsHandler) {
-
-            this.initScope();
-        }
-
-        private initComponentProperties = ():void => {
-            let result:Models.PropertiesGroup = {};
-
-            if(this.$scope.selectedComponent){
-                this.$scope.propertiesMessage = undefined;
-                if(this.$scope.isComponentInstanceSelected()){
-                    if (this.$scope.currentComponent.selectedInstance.originType==='VF') {
-                        // Temporally fix to hide properties for VF (UI stack when there are many properties)
-                        this.$scope.propertiesMessage = "Note: properties for VF are disabled";
-                    } else {
-                        result[this.$scope.currentComponent.selectedInstance.uniqueId] = this.$scope.currentComponent.componentInstancesProperties[this.$scope.currentComponent.selectedInstance.uniqueId];
-                    }
-                }else if(this.$scope.currentComponent.isService()){
-                    // Temporally fix to hide properties for service (UI stack when there are many properties)
-                    //result = this.$scope.currentComponent.componentInstancesProperties;
-                    this.$scope.propertiesMessage = "Note: properties for service are disabled";
-                }else{
-                    let key = this.$scope.selectedComponent.uniqueId;
-                    result[key]= Array<Models.PropertyModel>();
-                    let derived = Array<Models.PropertyModel>();
-                    _.forEach(this.$scope.selectedComponent.properties, (property:Models.PropertyModel) => {
-                        if(key == property.parentUniqueId){
-                            result[key].push(property);
-                        }else{
-                            property.readonly = true;
-                            derived.push(property);
-                        }
-                    });
-                    if(derived.length){
-                        result['derived']= derived;
-                    }
-                }
-                this.$scope.properties = result;
-            }
-        };
-
-
-        private initComponentAttributes = ():void => {
-            let result:Models.AttributesGroup = {};
-
-            if(this.$scope.selectedComponent){
-                if(this.$scope.isComponentInstanceSelected()){
-                    result[this.$scope.currentComponent.selectedInstance.uniqueId] = this.$scope.currentComponent.componentInstancesAttributes[this.$scope.currentComponent.selectedInstance.uniqueId];
-                }else if(this.$scope.currentComponent.isService()){
-                    result = this.$scope.currentComponent.componentInstancesAttributes;
-                }
-                this.$scope.attributes = result;
-            }
-        };
-
-        private openEditPropertyModal = (property:Models.PropertyModel):void => {
-            let viewModelsHtmlBasePath:string = '/app/scripts/view-models/';
-
-            let modalOptions:ng.ui.bootstrap.IModalSettings = {
-                template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/property-form/property-form-view.html'),
-                controller: 'Sdc.ViewModels.PropertyFormViewModel',
-                size: 'sdc-l',
-                backdrop: 'static',
-                keyboard: false,
-                resolve: {
-                    property: ():Models.PropertyModel => {
-                        return property;
-                    },
-                    component: ():Models.Components.Component => {
-                        return this.$scope.currentComponent;
-                    },
-                    filteredProperties: ():Array<Models.PropertyModel> => {
-                        return this.$scope.selectedComponent.properties
-                    }
-                }
-            };
-
-
-            let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$modal.open(modalOptions);
-            modalInstance
-                .result
-                .then(():void => {
-                  //  this.initComponentProperties();
-                });
-        };
-
-        private openAttributeModal = (atrribute:Models.AttributeModel):void => {
-            let viewModelsHtmlBasePath:string = '/app/scripts/view-models/';
-
-            let modalOptions:ng.ui.bootstrap.IModalSettings = {
-                template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/attribute-form/attribute-form-view.html'),
-                controller: 'Sdc.ViewModels.AttributeFormViewModel',
-                size: 'sdc-md',
-                backdrop: 'static',
-                keyboard: false,
-                resolve: {
-                    attribute: ():Models.AttributeModel => {
-                        return atrribute;
-                    },
-                    component: ():Models.Components.Component => {
-                        return this.$scope.currentComponent;
-                    }
-                }
-            };
-            this.$modal.open(modalOptions);
-        };
-
-
-
-
-        private initScope = ():void => {
-            this.initComponentProperties();
-            this.initComponentAttributes();
-
-            this.$scope.$watchCollection('currentComponent.componentInstancesProperties', (newData:any):void => {
-                this.initComponentProperties();
-            });
-
-            this.$scope.$watchCollection('currentComponent.properties', (newData:any):void => {
-                this.initComponentProperties();
-            });
-
-            this.$scope.$watch('currentComponent.selectedInstance', (newInstance:Models.ComponentsInstances.ComponentInstance):void => {
-                if (angular.isDefined(newInstance)) {
-                    this.initComponentProperties();
-                    this.initComponentAttributes();
-                }
-            });
-
-            this.$scope.$watchCollection('currentComponent.componentInstancesAttributes', (newData:any):void => {
-                this.initComponentAttributes();
-            });
-
-            this.$scope.isPropertyOwner = ():boolean => {
-                return this.$scope.currentComponent && this.$scope.currentComponent.isResource() &&
-                    !this.$scope.isComponentInstanceSelected();
-            };
-
-            this.$scope.addProperty = ():void => {
-                let property = new Models.PropertyModel();
-                this.openEditPropertyModal(property);
-            };
-
-            this.$scope.updateProperty = (property:Models.PropertyModel):void => {
-                this.openEditPropertyModal(property);
-            };
-
-            this.$scope.deleteProperty = (property:Models.PropertyModel):void => {
-
-                let onOk = ():void => {
-                    this.$scope.currentComponent.deleteProperty(property.uniqueId);
-                };
-
-                let title:string =  this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TITLE");
-                let message:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TEXT", "{'name': '" + property.name + "'}");
-                this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
-            };
-
-            this.$scope.viewAttribute = (attribute:Models.AttributeModel):void => {
-                this.openAttributeModal(attribute);
-            };
-
-            this.$scope.groupNameByKey = (key:string):string => {
-                switch (key){
-                    case 'derived':
-                        return "Derived";
-
-                    case this.$scope.currentComponent.uniqueId:
-                        return this.$filter("resourceName")(this.$scope.currentComponent.name);
-
-                    default:
-                        return this.$filter("resourceName")((_.find(this.$scope.currentComponent.componentInstances, {uniqueId:key})).name);
-                }
-            };
-
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html
deleted file mode 100644
index 3022ee6e90..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties-view.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content properties">
-    <div class="w-sdc-designer-sidebar-section">
-
-        <!--expand-collapse data-ng-if="isPropertyOwner() && !currentComponent.properties.length" expanded-selector=".w-sdc-composition-sidebar-section-content.{{currentComponent.name}}"
-                         class="w-sdc-composition-sidebar-section-title">
-            <span class="w-sdc-composition-sidebar-section-title-text" tooltips tooltip-content="{{currentComponent.name | resourceName}}&nbsp;Properties"
-                data-ng-bind="(currentComponent.name | resourceName)+ ' Properties'"></span>
-            <div class="w-sdc-composition-sidebar-section-title-icon"></div>
-        </expand-collapse-->
-
-
-        <!--properties-->
-        <expand-collapse data-ng-repeat-start="(key, group) in properties"
-                         expanded-selector=".w-sdc-designer-sidebar-section-content.properties.{{$index}}" class="w-sdc-designer-sidebar-section-title">
-            <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="groupNameByKey(key) + ' Properties'"
-                  tooltips tooltip-content="{{groupNameByKey(key)}}&nbsp;Properties"></span>
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content properties {{$index}}"> <!--data-ng-show="isShowDetailsSection" -->
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute" data-tests-id="propertyRow"
-                     data-ng-repeat="property in group | orderBy: 'name' track by $index">
-                    <div>
-                        <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
-                              data-ng-class="{'hand enabled': !$parent.isViewOnly}"
-                              tooltips tooltip-content="{{property.name}}"
-                              data-ng-click="!$parent.isViewOnly && updateProperty(property)">{{property.name}}</span>
-                    </div>
-                    <div>
-                        <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="isPropertyOwner()"
-                              tooltips tooltip-content="{{property.defaultValue}}">{{property.defaultValue}}</span>
-                        <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="!isPropertyOwner()"
-                              tooltips tooltip-content="{{property.value}}">{{property.value}}</span>
-                    </div>
-                    <button class="i-sdc-designer-sidebar-section-content-item-button delete sprite e-sdc-small-icon-delete"
-                            data-ng-if="!$parent.isViewOnly&&(isPropertyOwner() && !property.readonly)"
-                            data-ng-click="deleteProperty(property)" type="button"></button>
-                </div>
-            </div>
-
-        </div>
-        <div class="w-sdc-designer-sidebar-section-footer">
-            <button class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue" data-ng-click="addProperty()" type="button" data-ng-if="!$parent.isViewOnly && isPropertyOwner()">
-                Add Property
-            </button>
-        </div>
-
-
-        <!--attributes-->
-        <expand-collapse data-ng-repeat-start="(key, group) in attributes"
-                         expanded-selector=".w-sdc-designer-sidebar-section-content.attributes.{{$index}}" class="w-sdc-designer-sidebar-section-title">
-            <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="groupNameByKey(key) + ' Attributes'"
-                  tooltips tooltip-content="{{groupNameByKey(key)}}&nbsp;Attributes"></span>
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div data-ng-repeat-end="" class="w-sdc-designer-sidebar-section-content attributes {{$index}}"> <!--data-ng-show="isShowDetailsSection" -->
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <div class="i-sdc-designer-sidebar-section-content-item-property-and-attribute"
-                     data-ng-repeat="attribute in group | orderBy: 'name' track by $index">
-                    <div>
-                        <span class="i-sdc-designer-sidebar-section-content-item-property-and-attribute-label"
-                              data-ng-class="{'hand enabled': !$parent.isViewOnly}"
-                              tooltips tooltip-content="{{attribute.name}}"
-                              data-ng-click="!$parent.isViewOnly && viewAttribute(attribute)"
-                              data-tests-id="{{attribute.name}}-attr">{{attribute.name}}</span>
-                    </div>
-                    <div>
-                        <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="isPropertyOwner()"
-                              tooltips tooltip-content="{{attribute.defaultValue}}">{{attribute.defaultValue}}</span>
-                        <span class="i-sdc-designer-sidebar-section-content-item-property-value" data-ng-if="!isPropertyOwner()"
-                              tooltips tooltip-content="{{attribute.value}}" data-tests-id="value-of-{{attribute.name}}">{{attribute.value}}</span>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-
-    </div>
-</perfect-scrollbar>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less
deleted file mode 100644
index 2ad87b9fca..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/properties-and-attributes/properties.less
+++ /dev/null
@@ -1,16 +0,0 @@
-.w-sdc-designer-sidebar-tab-content.properties {
-    .i-sdc-designer-sidebar-section-content-item-property-and-attribute-label{
-        font-weight: bold;
-    }
-    .i-sdc-designer-sidebar-section-content-item-button.update{
-        right: 17px;
-    }
-    .i-sdc-designer-sidebar-section-content-item-button.delete{
-        right: 35px;
-    }
-
-    .w-sdc-designer-sidebar-properties-disabled {
-        .s_14_m;
-        padding: 20px 20px;
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts
deleted file mode 100644
index 119a59d5af..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view-model.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../../../references"/>>
-module Sdc.ViewModels {
-    'use strict';
-
-    interface IRelationsViewModelScope extends ICompositionViewModelScope {
-        isLoading: boolean;
-        $parent: ICompositionViewModelScope;
-        getRelation(requirement:any): any;
-    }
-
-    export class RelationsViewModel {
-
-        static '$inject' = [
-            '$scope',
-            '$filter'
-        ];
-
-        constructor(private $scope:IRelationsViewModelScope,
-                    private $filter:ng.IFilterService) {
-            this.initScope();
-        }
-
-
-        private updateRC = ():void =>{
-            if(this.$scope.currentComponent) {
-                this.$scope.currentComponent.updateRequirementsCapabilities();
-            }
-        };
-
-        private initScope = ():void => {
-
-            this.$scope.isLoading = this.$scope.$parent.isLoading;
-
-            this.$scope.getRelation = (requirement:any):any => {
-
-                if(this.$scope.isComponentInstanceSelected() && this.$scope.currentComponent.componentInstancesRelations ) {
-                    let relationItem = _.filter(this.$scope.currentComponent.componentInstancesRelations, (relation:any) => {
-                        return relation.fromNode === this.$scope.currentComponent.selectedInstance.uniqueId &&
-                                _.some(relation.relationships, {'requirement': requirement.name,
-                                                                'requirementOwnerId': requirement.ownerId});
-                    });
-
-                    if (relationItem && relationItem.length) {
-                        return {
-                            type: requirement.relationship.split('.').pop(),
-                            requirementName: this.$filter('resourceName')(this.$scope.currentComponent.componentInstances[_.map
-                            (this.$scope.currentComponent.componentInstances, "uniqueId").indexOf(relationItem[0].toNode)].name)
-                        };
-                    }
-                }
-                return null;
-            };
-
-            if(!this.$scope.isComponentInstanceSelected()) {
-                this.$scope.$watch('currentComponent.componentInstances + currentComponent.componentInstancesRelations', ():void => {
-                    this.updateRC();
-                });
-                
-            }
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view.html
deleted file mode 100644
index 72eaae27cf..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations-view.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<perfect-scrollbar class="w-sdc-designer-sidebar-tab-content relations">
-
-    <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations">
-        <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.capabilities" class="w-sdc-designer-sidebar-section-title">
-            Capabilities
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div class="w-sdc-designer-sidebar-section-content capabilities">
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <div class="i-sdc-designer-sidebar-section-content-item-relations-group" data-ng-repeat="(key, value) in (isComponentInstanceSelected() ? currentComponent.selectedInstance.capabilities : selectedComponent.capabilities) track by $index">
-                    <div class="i-sdc-designer-sidebar-section-content-item-relations" data-ng-repeat="capability in value track by $index">
-                    <div class="i-sdc-designer-sidebar-section-content-item-relations-details">
-                        <div class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{capability.name}}&nbsp;
-                        <span ng-if="selectedComponent.isComplex() && capability.ownerName"
-                              class="i-sdc-designer-sidebar-section-content-item-relations-details-ownerName"
-                              tooltips tooltip-class="tooltip-custom break-word-tooltip"
-                              tooltip-content="{{capability.ownerName | resourceName}}">&nbsp;&nbsp;{{capability.ownerName | resourceName}}</span></div>
-                        <div class="i-sdc-designer-sidebar-section-content-item-relations-details-desc">{{capability.type}}</div>
-                    </div></div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="w-sdc-designer-sidebar-section w-sdc-designer-sidebar-section-relations">
-        <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content.requirements" class="w-sdc-designer-sidebar-section-title">
-            Requirements
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div class="w-sdc-designer-sidebar-section-content requirements">
-            <div class="i-sdc-designer-sidebar-section-content-item">
-                <div class="i-sdc-designer-sidebar-section-content-item-relations-group" data-ng-repeat="(key, value) in (isComponentInstanceSelected() ? currentComponent.selectedInstance.requirements : selectedComponent.requirements) track by $index">
-                    <div class="i-sdc-designer-sidebar-section-content-item-relations" data-ng-repeat="requirement in value track by $index">
-                    <div class="i-sdc-designer-sidebar-section-content-item-relations-details">
-                        <div class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{requirement.name}}&nbsp;
-                         <span ng-if="selectedComponent.isComplex() && requirement.ownerName"
-                               class="i-sdc-designer-sidebar-section-content-item-relations-details-ownerName"
-                               tooltips tooltip-class="tooltip-custom break-word-tooltip"
-                               tooltip-content="{{requirement.ownerName | resourceName}}">&nbsp;&nbsp;{{requirement.ownerName | resourceName}}</span></div>
-                        <div class="i-sdc-designer-sidebar-section-content-item-relations-details-desc">{{requirement.node}}
-                            <div data-ng-if="getRelation(requirement) != null">
-                                <div class="i-sdc-designer-sidebar-section-content-item-relations-details-indent-box"></div>
-                                <div class="i-sdc-designer-sidebar-section-content-item-relations-details-child">
-                                    <span class="i-sdc-designer-sidebar-section-content-item-relations-details-desc">{{getRelation(requirement).type}} <br/></span>
-                                    <span class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{getRelation(requirement).requirementName}}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div></div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-</perfect-scrollbar>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations.less b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations.less
deleted file mode 100644
index 212b9785e9..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/relations/relations.less
+++ /dev/null
@@ -1,116 +0,0 @@
-.w-sdc-designer-sidebar-tab-content.relations {
-
-    .w-sdc-designer-sidebar-section-content {
-        padding: 0;
-    }
-
-    .w-sdc-designer-sidebar-section-title {
-        &.expanded {
-            margin-bottom: 0;
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-relations {
-        border-bottom: 1px solid @color_e;
-        padding: 10px 10px 10px 18px;
-        position: relative;
-        cursor: default;
-
-        .i-sdc-designer-sidebar-section-content-item-button {
-            top: 15px;
-            line-height: 10px;
-        }
-
-        &:hover {
-            background-color: @color_c;
-
-            .i-sdc-designer-sidebar-section-content-item-button {
-                display: block;
-
-            }
-
-        }
-
-    }
-    .w-sdc-designer-sidebar-section-relations:not(:last-child) .i-sdc-designer-sidebar-section-content-item-relations-group:last-child .i-sdc-designer-sidebar-section-content-item-relations:last-child {
-        border-bottom: none;
-    }
-
-
-    .i-sdc-designer-sidebar-section-content-item-relations.hand {
-        .hand;
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-relations-group {
-        //border-bottom: 1px solid @color_e;
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-relations-details {
-        display: inline-block;
-        margin-left: 5px;
-        vertical-align: middle;
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-relations-details-name {
-        .b_1;
-        .bold;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        //width: 100%;
-        text-transform: capitalize;
-        max-width: 240px;
-        display: inline-block;
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-relations-details-ownerName {
-        .b_13;
-        font-weight:400;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-       &:before{
-           .sprite;
-           .arrow-left;
-           content: '';
-       }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-relations-details-desc {
-        .p_1;
-        line-height: 14px;
-        word-wrap: break-word;
-        white-space: normal;
-
-        .i-sdc-designer-sidebar-section-content-item-relations-details-indent-box{
-            border-left: 1px #848586 solid;
-            height: 40px;
-            margin-left: 2px;
-            margin-top: 5px;
-            border-bottom: 1px #848586 solid;
-            width: 25px;
-            float: left;
-        }
-        .i-sdc-designer-sidebar-section-content-item-relations-details-child{
-            margin-top: 30px;
-            float: left;
-            padding-left: 10px;
-            max-width: 230px;
-        }
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-relations-details-desc-label {
-        font-family: omnes-medium, sans-serif;
-    }
-
-    .i-sdc-designer-sidebar-section-content-item-relations-view {
-        position: absolute;
-        right: 0;
-        top: 22px;
-        display: none;
-    }
-
-}
-
-
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.html
deleted file mode 100644
index 2070041990..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<perfect-scrollbar include-padding="true" class="w-sdc-designer-sidebar-tab-content">
-
-    <div class="w-sdc-designer-sidebar-section">
-        <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content" class="w-sdc-designer-sidebar-section-title">
-            Composition
-            <div class="w-sdc-designer-sidebar-section-title-icon"></div>
-        </expand-collapse>
-
-        <div class="w-sdc-designer-sidebar-section-content" ng-show="selectedComponent.isComplex()">
-            <structure-tree component="selectedComponent"></structure-tree>
-        </div>
-    </div>
-</perfect-scrollbar>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.ts
deleted file mode 100644
index daeab7f2f3..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/composition/tabs/structure/structure-view.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-
-    interface IStructureViewModel extends ICompositionViewModelScope {}
-
-    export class StructureViewModel {
-        static '$inject' = [
-            '$scope'
-        ];
-
-        constructor(private $scope:IStructureViewModel) {
-        }
-    }
- }
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts
deleted file mode 100644
index 43511e2deb..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts
+++ /dev/null
@@ -1,253 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-    import Resource = Sdc.Models.Components.Resource;
-    import ArtifactModel = Sdc.Models.ArtifactModel;
-
-    interface IDeploymentArtifactsViewModelScope extends IWorkspaceViewModelScope {
-        tableHeadersList: Array<any>;
-        reverse: boolean;
-        sortBy:string;
-        artifacts: Array<Models.ArtifactModel>;
-        editForm:ng.IFormController;
-        isLoading:boolean;
-        artifactDescriptions:any;
-        updateInProgress:boolean;
-
-        addOrUpdate(artifact:Models.ArtifactModel): void;
-        update(artifact:Models.ArtifactModel): void;
-        delete(artifact:Models.ArtifactModel): void;
-        sort(sortBy:string): void;
-        noArtifactsToShow():boolean;
-        getValidationPattern(validationType:string, parameterType?:string):RegExp;
-        validateJson(json:string):boolean;
-        resetValue(parameter:any):void;
-        viewModeOrCsarComponent():boolean;
-        isLicenseArtifact(artifact:Models.ArtifactModel): boolean;
-
-    }
-
-    export class DeploymentArtifactsViewModel {
-
-        static '$inject' = [
-            '$scope',
-            '$filter',
-            '$modal',
-            '$templateCache',
-            'ValidationUtils',
-            'ArtifactsUtils',
-            'ModalsHandler'
-        ];
-
-        constructor(private $scope:IDeploymentArtifactsViewModelScope,
-                    private $filter:ng.IFilterService,
-                    private $modal:ng.ui.bootstrap.IModalService,
-                    private $templateCache:ng.ITemplateCacheService,
-                    private validationUtils:Sdc.Utils.ValidationUtils,
-                    private artifactsUtils:Sdc.Utils.ArtifactsUtils,
-                    private ModalsHandler:Utils.ModalsHandler) {
-            this.initScope();
-            this.$scope.updateSelectedMenuItem();
-        }
-
-        private initDescriptions = ():void => {
-            this.$scope.artifactDescriptions = {};
-            _.forEach(this.$scope.component.deploymentArtifacts, (artifact:Models.ArtifactModel):void => {
-                this.$scope.artifactDescriptions[artifact.artifactLabel] = artifact.description;
-            });
-        };
-
-
-        private setArtifact = (artifact:Models.ArtifactModel):void => {
-            if (artifact.heatParameters) {
-                artifact.heatParameters.forEach((parameter:any):void => {
-                    if (!parameter.currentValue && parameter.defaultValue) {
-                        parameter.currentValue = parameter.defaultValue;
-                    } else if ("" === parameter.currentValue) {
-                        parameter.currentValue = null;
-                    }
-                });
-            }
-            if (!artifact.description || !this.$scope.getValidationPattern('string').test(artifact.description)) {
-                artifact.description = this.$scope.artifactDescriptions[artifact.artifactLabel];
-            }
-        };
-
-        private updateAll = ():void => {
-            let artifacts:Array<Models.ArtifactModel> = [];
-            _.forEach(this.$scope.component.deploymentArtifacts, (artifact:Models.ArtifactModel):void => {
-                if (artifact.selected) {
-                    this.setArtifact(artifact);
-                    artifacts.push(artifact);
-                }
-            });
-            this.$scope.component.updateMultipleArtifacts(artifacts);
-        };
-
-
-        private initScope = ():void => {
-            let self = this;
-            this.$scope.isLoading = false;
-            this.$scope.updateInProgress = false;
-            this.initDescriptions();
-            this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.deploymentArtifacts);
-            this.$scope.setValidState(true);
-
-            this.$scope.tableHeadersList = [
-                {title: 'Name', property: 'artifactDisplayName'},
-                {title: 'Type', property: 'artifactType'},
-                {title: 'Deployment timeout', property: 'timeout'}
-            ];
-
-            this.$scope.isLicenseArtifact = (artifact:Models.ArtifactModel) :boolean => {
-                let isLicense:boolean = false;
-                if(this.$scope.component.isResource() && (<Resource>this.$scope.component).isCsarComponent()) {
-
-                   isLicense = this.artifactsUtils.isLicenseType(artifact.artifactType);
-                }
-
-                return isLicense;
-            };
-
-            this.$scope.sort = (sortBy:string):void => {
-                this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
-                this.$scope.sortBy = sortBy;
-            };
-
-            this.$scope.getValidationPattern = (validationType:string, parameterType?:string):RegExp => {
-                return this.validationUtils.getValidationPattern(validationType, parameterType);
-            };
-
-            this.$scope.validateJson = (json:string):boolean => {
-                if(!json){
-                    return true;
-                }
-                return this.validationUtils.validateJson(json);
-            };
-
-            this.$scope.viewModeOrCsarComponent = ():boolean => {
-              return this.$scope.isViewMode() || (this.$scope.component.isResource() && (<Resource>this.$scope.component).isCsarComponent());
-            };
-
-
-            this.$scope.addOrUpdate = (artifact:Models.ArtifactModel):void => {
-                artifact.artifactGroupType = 'DEPLOYMENT';
-                let artifactCopy = new Models.ArtifactModel(artifact);
-
-                let success = (response:any):void => {
-                    self.$scope.artifactDescriptions[artifactCopy.artifactLabel] = artifactCopy.description;
-                    self.$scope.artifacts = <ArtifactModel[]>_.values(self.$scope.component.deploymentArtifacts);
-                };
-
-                let error = (err:any):void =>{
-                    console.log(err);
-                    self.$scope.artifacts = <ArtifactModel[]>_.values(self.$scope.component.deploymentArtifacts);
-                };
-
-
-                this.ModalsHandler.openWizardArtifactModal(artifactCopy, self.$scope.component).then(success, error);
-            };
-
-            this.$scope.noArtifactsToShow = ():boolean => {
-                return !_.some(this.$scope.artifacts, 'esId');
-            };
-
-
-            this.$scope.resetValue = (parameter:any):void => {
-                if (!parameter.currentValue && parameter.defaultValue) {
-                    parameter.currentValue = parameter.defaultValue;
-                }
-                else if ('boolean' == parameter.type) {
-                    parameter.currentValue = parameter.currentValue.toUpperCase();
-                }
-            };
-
-
-            this.$scope.$watch('editForm.$valid', ():void => {
-                if (this.$scope.editForm) {
-                    //    this.$scope.setValidState(this.$scope.editForm.$valid);
-                }
-            });
-
-            this.$scope.update = (artifact:Models.ArtifactModel):void => {
-                if (false == this.$scope.isLoading) {
-                    if (artifact.selected && !this.$scope.isViewMode()) {
-                        this.$scope.isLoading = true;
-                        this.$scope.updateInProgress = true;
-                        let onSuccess = (responseArtifact:Models.ArtifactModel):void => {
-                            this.$scope.artifactDescriptions[responseArtifact.artifactLabel] = responseArtifact.description;
-                            this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.deploymentArtifacts);
-                            this.$scope.isLoading = false;
-                            artifact.selected = !artifact.selected;
-                            this.$scope.updateInProgress = false;
-                        };
-
-                        let onFailed = (error:any):void => {
-                            console.log('Delete artifact returned error:', error);
-                            this.$scope.isLoading = false;
-                            artifact.selected = !artifact.selected;
-                            this.$scope.updateInProgress = false;
-                        };
-
-                        this.setArtifact(artifact);
-                        this.$scope.component.addOrUpdateArtifact(artifact).then(onSuccess, onFailed);
-                    } else {
-                        artifact.selected = !artifact.selected;
-
-                    }
-                }
-            };
-
-            this.$scope.delete = (artifact:Models.ArtifactModel):void => {
-                let onOk = ():void => {
-                    this.$scope.isLoading = true;
-                    let onSuccess = ():void => {
-                        this.$scope.isLoading = false;
-                        this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.deploymentArtifacts);
-                    };
-
-                    let onFailed = (error:any):void => {
-                        this.$scope.isLoading = false;
-                        console.log('Delete artifact returned error:', error);
-                    };
-
-                    this.$scope.component.deleteArtifact(artifact.uniqueId, artifact.artifactLabel).then(onSuccess, onFailed);
-                };
-
-                let title:string = self.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TITLE");
-                let message:string = self.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TEXT", "{'name': '" + artifact.artifactDisplayName + "'}");
-                this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
-            };
-        };
-
-        public save = (callback:Function):void => {
-            this.updateAll();
-            this.$scope.setComponent(this.$scope.component);
-            callback(true);
-        };
-
-        public back = (callback:Function):void => {
-            this.$scope.setComponent(this.$scope.component);
-            callback(true);
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html
deleted file mode 100644
index 1547618134..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html
+++ /dev/null
@@ -1,149 +0,0 @@
-<div class="workspace-deployment-artifact">
-
-    <div data-tests-id="add-deployment-artifact-button" ng-if="!isViewMode()" data-ng-class="{'disabled': isDisableMode()}" data-tests-id="add-property-button" class="add-btn" data-ng-click="addOrUpdate({})">Add</div>
-
-    <div class="table-container-flex">
-
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <loader data-display="isLoading"></loader>
-            <div class="head flex-container">
-                <div class="table-header head-row hand flex-item" data-ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}}
-                    <span data-ng-if="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
-                </div>
-                <div class="table-no-text-header head-row flex-item"></div>
-            </div>
-
-            <form class="body" name="editForm">
-
-                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-
-                    <!-- Artifact row -->
-                    <div ng-if="noArtifactsToShow()" data-ng-class="{'disabled': isDisableMode()}" class="no-row-text" translate="DEPLOYMENT_ARTIFACT_NO_ARTIFACTS_TO_DISPLAY"></div>
-                    <div data-ng-repeat-start="artifact in artifacts | orderBy:sortBy:reverse track by $index"
-                         class="flex-container data-row"
-                         data-ng-class="{'selected': artifact.selected || undefined==artifact.selected && updateInProgress}"
-                         data-ng-if="artifact.esId">
-
-                        <div class="table-col-general flex-item"  data-ng-click="update(artifact)">
-
-                            <span class="sprite table-arrow" data-tests-id="{{artifact.artifactDisplayName}}" data-ng-class="{'opened': artifact.selected || undefined==artifact.selected && updateInProgress}"></span>
-                            {{artifact.artifactDisplayName}}
-                        </div>
-
-                        <div class="table-col-general flex-item" data-tests-id="{{artifact.artifactType}}">
-                            {{artifact.artifactType}}
-                        </div>
-                        <div class="table-col-general flex-item" data-tests-id="{{artifact.timeout}}">
-                            {{artifact.timeout? artifact.timeout:''}}
-                        </div>
-
-                        <div class="table-btn-col flex-item">
-                            <button class="table-edit-btn" data-tests-id="edit_{{artifact.artifactDisplayName}}"
-                                    data-ng-if="!isViewMode() && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact)" data-ng-click="addOrUpdate(artifact)"></button>
-                            <button class="table-delete-btn" data-tests-id="delete_{{artifact.artifactDisplayName}}"
-                                    data-ng-if="!isViewMode() && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact)" data-ng-click="delete(artifact)"> </button>
-                             <button class="table-download-btn" download-artifact  data-tests-id="download_{{artifact.artifactDisplayName}}"
-                                     data-ng-if="artifact.artifactName" component="component" artifact="artifact"></button>
-
-
-                        </div>
-                    </div>
-                    <div data-ng-repeat-end="" data-ng-if="artifact.selected || undefined==artifact.selected && updateInProgress" class="w-sdc-form item-opened">
-                        <!-- Artifact panel opened -->
-
-                        <!-- Description field -->
-                        <div class="w-sdc-form-item" ng-form="descriptionForm" data-ng-class="{error:(descriptionForm.$dirty && descriptionForm.$invalid)}">
-                            <label class="i-sdc-env-form-label required">Description</label>
-                                <textarea class="i-sdc-form-textarea {{$index}}" data-ng-class="{'view-mode': isViewMode()}"
-                                          data-ng-maxlength="256"
-                                          maxlength="256"
-                                          data-ng-required="true"
-                                          name="description"
-                                          data-ng-model="artifact.description"
-                                          data-ng-model-options="{ debounce: 200 }"
-                                          data-ng-pattern="getValidationPattern('string')"
-                                          ng-readonly="isViewMode()"
-                                          data-tests-id="description">
-                                </textarea>
-
-                            <div class="input-error" data-ng-show="descriptionForm.$dirty && descriptionForm.$invalid">
-                                <span ng-show="descriptionForm.$error.required" translate="ADD_ARTIFACT_ERROR_DESCRIPTION_REQUIRED"></span>
-                                <span ng-show="descriptionForm.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
-                                <span ng-show="descriptionForm.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                            </div>
-
-                        </div>
-
-                        <!-- Parameters in 2 columns -->
-                        <div class="w-sdc-form-columns-wrapper" data-ng-if="artifact.heatParameters">
-                            <!-- Left column -->
-                            <div class="w-sdc-form-column">
-                                <div class="i-sdc-form-item" ng-form="parameterForm"
-                                     data-ng-repeat="parameter in artifact.heatParameters.slice(0, artifact.heatParameters.length%2+artifact.heatParameters.length/2) track by $index">
-                                    <label class="i-sdc-env-form-label" data-ng-class="{required:parameter.defaultValue}" tooltip-side="top" sdc-smart-tooltip>{{parameter.name +' (' + parameter.type + ')'}}</label>
-                                    <span class="parameter-description" tooltips tooltip-side="top" tooltip-content="{{parameter.description}}">?</span>
-                                    <input class="i-sdc-form-input" data-ng-class="{error:(parameterForm.currentValue.$invalid),'view-mode': isViewMode() }"
-                                           data-ng-model-options="{ debounce: 200 }"
-                                           data-ng-model="parameter.currentValue"
-                                           type="text"
-                                           name="currentValue"
-                                           data-ng-pattern="getValidationPattern(parameter.type, 'heat')"
-                                           data-ng-required="parameter.defaultValue"
-                                           data-ng-change="'json'==parameter.type && parameterForm.currentValue.$setValidity('pattern', validateJson(parameter.currentValue))"
-                                           data-ng-blur="!parameterForm.currentValue.$error.pattern && resetValue(parameter)"
-                                        />
-
-                                    <div class="input-error" data-ng-show="parameterForm.currentValue.$invalid">
-                                        <span ng-show="parameterForm.currentValue.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Value'}"></span>
-                                        <span ng-show="parameterForm.currentValue.$error.pattern && parameter.type==='string'" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                                        <span ng-show="parameterForm.currentValue.$error.pattern && !(parameter.type==='string')" translate="VALIDATION_ERROR_TYPE" translate-values="{'type': '{{parameter.type}}'}"></span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Right column -->
-                            <div class="w-sdc-form-column">
-                                <div class="i-sdc-form-item" ng-form="parameterForm" data-ng-repeat="parameter in artifact.heatParameters.slice(artifact.heatParameters.length%2+artifact.heatParameters.length/2) track by $index">
-                                    <label class="i-sdc-env-form-label" data-ng-class="{required:parameter.defaultValue}" tooltip-side="top" sdc-smart-tooltip>{{parameter.name +' (' + parameter.type + ')'}}</label>
-                                    <span class="parameter-description" tooltips tooltip-side="top" tooltip-content="{{parameter.description}}">?</span>
-                                    <input class="i-sdc-form-input" data-ng-class="{error:(parameterForm.currentValue.$invalid), 'view-mode': isViewMode()}"
-                                           data-ng-model-options="{ debounce: 200 }"
-                                           data-ng-model="parameter.currentValue"
-                                           type="text"
-                                           name="currentValue"
-                                           data-ng-pattern="getValidationPattern(parameter.type, 'heat')"
-                                           data-ng-required="parameter.defaultValue"
-                                           data-ng-change="'json'==parameter.type && parameterForm.currentValue.$setValidity('pattern', validateJson(parameter.currentValue))"
-                                           data-ng-blur="!parameterForm.currentValue.$error.pattern && resetValue(parameter)"
-                                        />
-
-                                    <div class="input-error" data-ng-show="parameterForm.currentValue.$invalid">
-                                        <span ng-show="parameterForm.currentValue.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Value'}"></span>
-                                        <span ng-show="parameterForm.currentValue.$error.pattern && parameter.type==='string'" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                                        <span ng-show="parameterForm.currentValue.$error.pattern && !(parameter.type==='string')" translate="VALIDATION_ERROR_TYPE" translate-values="{'type': '{{parameter.type}}'}"></span>
-                                    </div>
-                                </div>
-                            </div>
-
-
-                        </div><!-- Close: Parameters in 2 columns -->
-                    </div><!-- Close: Artifact panel opened -->
-
-                    <!-- Add artifacts buttons -->
-                    <button class="add-button" data-ng-repeat="artifact in artifacts track by $index"
-                            type="button"
-                            data-ng-show="!artifact.esId"
-                            data-ng-if="!viewModeOrCsarComponent()"
-                            data-ng-class="{'disabled': isDisableMode() || component.isCsarComponent()}"
-                            data-tests-id="{{artifact.artifactDisplayName}} deployment_artifact"
-                            translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_HEAT"
-                            translate-values="{'name': '{{artifact.artifactDisplayName}}'}"
-                            data-ng-click="addOrUpdate(artifact)"></button>
-
-                    <!-- Top add button -->
-                    <button class="add-button" type="button" data-ng-if="!isViewMode()" data-ng-class="{'disabled': isDisableMode()}" translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_OTHER" data-ng-click="addOrUpdate({})"></button>
-                </perfect-scrollbar>
-            </form>
-        </div>
-    </div>
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less
deleted file mode 100644
index 9f90a47d5a..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts.less
+++ /dev/null
@@ -1,102 +0,0 @@
-.workspace-deployment-artifact {
-    width: 93%;
-    display: inline-block;
-    .table-container-flex .table .body .data-row + div.item-opened {
-        align-items: center;
-        padding: 10px 40px 10px 30px;
-    }
-
-    .w-sdc-classic-btn {
-        float: right;
-        margin-bottom: 10px;
-    }
-
-    .table {
-        height:490px;
-        margin-bottom: 0;
-    }
-
-    .parameter-description {
-        .circle(18px, @color_p);
-        content: '?';
-        line-height: 18px;
-        vertical-align: middle;
-        margin-left: 5px;
-        cursor: default;
-        display: inline-block;
-        position: absolute;
-        top: 16px;
-    }
-
-    .table-container-flex {
-
-        margin-top: 27px;
-
-        .flex-item:nth-child(1) {
-            flex-grow: 15;
-            .hand;
-            span.table-arrow {
-                margin-right: 7px;
-            }
-        }
-
-        .flex-item:nth-child(2) {
-            flex-grow: 6;
-        }
-
-        .flex-item:nth-child(3) {
-            flex-grow: 9;
-        }
-
-        .flex-item:nth-child(4) {
-            flex-grow: 3;
-            padding-top: 10px;
-        }
-    }
-    .w-sdc-form{
-        text-align: left;
-
-        .w-sdc-env-params{
-            border-top: 1px solid #cdcdcd;
-            margin: 25px 0 10px 0;
-        }
-
-        .i-sdc-form-textarea {
-            border: 1px solid @color_e;
-            min-height: 60px;
-            padding: 10px 13px;
-            width: 100%;
-            resize: none;
-
-        }
-
-        .w-sdc-form-item {
-            &.error {
-                .i-sdc-form-input,
-                .i-sdc-form-select,
-                .i-sdc-form-textarea {
-                    border-color: @color_h;
-                    outline: none;
-                    box-sizing: border-box;
-                }
-            }
-        }
-
-        .i-sdc-env-form-label{
-            font-family: @font-omnes-medium;
-            color: @main_color_m;
-            overflow: hidden;
-            max-width: 450px;
-            text-overflow: ellipsis;
-            display: inline-block;
-            white-space: nowrap;
-            margin-top: 14px;
-
-            &.required::before {
-                color: #f33;
-                content: '*';
-                margin-right: 4px;
-            }
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view-model.ts
deleted file mode 100644
index f8afc0b758..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view-model.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-
-    export interface IDeploymentViewModelScope extends IWorkspaceViewModelScope {
-
-        currentComponent: Models.Components.Component;
-        selectedComponent: Models.Components.Component;
-        isLoading: boolean;
-        sharingService:Sdc.Services.SharingService;
-        sdcMenu:Models.IAppMenu;
-        version:string;
-        isViewOnly:boolean;
-        tabs:Array<Models.Tab>;
-
-        setComponent(component: Models.Components.Component);
-        isComponentInstanceSelected():boolean;
-        updateSelectedComponent(): void
-        openUpdateModal();
-        deleteSelectedComponentInstance():void;
-        onBackgroundClick():void;
-        setSelectedInstance(componentInstance: Models.ComponentsInstances.ComponentInstance): void;
-        printScreen():void;
-
-    }
-
-    export class DeploymentViewModel {
-
-        static '$inject' = [
-            '$scope',
-            'sdcMenu',
-            'MenuHandler',
-            '$modal',
-            '$templateCache',
-            '$state',
-            'Sdc.Services.SharingService',
-            '$filter',
-            'Sdc.Services.CacheService',
-            'ComponentFactory',
-            'ChangeLifecycleStateHandler',
-            'LeftPaletteLoaderService',
-            'ModalsHandler'
-        ];
-
-        constructor(private $scope:IDeploymentViewModelScope,
-                    private sdcMenu:Models.IAppMenu,
-                    private MenuHandler: Utils.MenuHandler,
-                    private $modal:ng.ui.bootstrap.IModalService,
-                    private $templateCache:ng.ITemplateCacheService,
-                    private $state:ng.ui.IStateService,
-                    private sharingService:Services.SharingService,
-                    private $filter:ng.IFilterService,
-                    private cacheService:Services.CacheService,
-                    private ComponentFactory: Utils.ComponentFactory,
-                    private ChangeLifecycleStateHandler: Sdc.Utils.ChangeLifecycleStateHandler,
-                    private LeftPaletteLoaderService: Services.Components.LeftPaletteLoaderService,
-                    private ModalsHandler: Sdc.Utils.ModalsHandler) {
-
-            this.$scope.setValidState(true);
-            this.initScope();
-            this.$scope.updateSelectedMenuItem();
-        }
-
-
-        private initComponent = ():void => {
-
-            this.$scope.currentComponent = this.$scope.component;
-            this.$scope.selectedComponent = this.$scope.currentComponent;
-            this.updateUuidMap();
-            this.$scope.isViewOnly = this.$scope.isViewMode();
-        };
-
-
-        private updateUuidMap = ():void => {
-            /**
-             * In case user press F5, the page is refreshed and this.sharingService.currentEntity will be undefined,
-             * but after loadService or loadResource this.sharingService.currentEntity will be defined.
-             * Need to update the uuidMap with the new resource or service.
-             */
-            this.sharingService.addUuidValue(this.$scope.currentComponent.uniqueId,this.$scope.currentComponent.uuid);
-        };
-
-        private initRightTabs = ()=> {
-            if(this.$scope.currentComponent.groups){
-
-                let hierarchyTab = new Models.Tab('/app/scripts/view-models/tabs/hierarchy/hierarchy-view.html', 'Sdc.ViewModels.HierarchyViewModel', 'hierarchy', this.$scope.currentComponent, 'hierarchy');
-                this.$scope.tabs = Array<Models.Tab>();
-                this.$scope.tabs.push(hierarchyTab)
-            }
-
-        }
-        private initScope = ():void => {
-
-            this.$scope.sharingService = this.sharingService;
-            this.$scope.sdcMenu = this.sdcMenu;
-            this.$scope.isLoading = false;
-
-            this.$scope.version = this.cacheService.get('version');
-            this.initComponent();
-
-            this.$scope.setComponent = (component: Models.Components.Product):void => {
-                this.$scope.currentComponent = component;
-            }
-            
-            this.initRightTabs();
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view.html
deleted file mode 100644
index 9e26656f5f..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment-view.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="deployment-view">
-    <div class="w-sdc-deployment-canvas" data-ng-class="{sidebaractive: displayDesignerRightSidebar}">
-        <!--<module-graph data-tests-id="canvas" current-component="currentComponent" is-view-only="isViewOnly" is-loading="isLoading"></module-graph>-->
-        <deployment-graph component="currentComponent" is-view-only="isViewOnly"></deployment-graph>
-    </div>
-
-    <div class="w-sdc-deployment-right-bar">
-        <sdc-tabs tabs="tabs" is-view-only="isViewOnly"></sdc-tabs>
-    </div>
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment.less b/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment.less
deleted file mode 100644
index 0439ccd0fa..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/deployment/deployment.less
+++ /dev/null
@@ -1,33 +0,0 @@
-.deployment-view{
-
-    display: inline-block;
-    text-align: left;
-    align-items: left;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-
-    .w-sdc-deployment-canvas {
-        .noselect;
-        .bg_c;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-
-        .view-mode{
-            background-color: #f8f8f8;
-            border:0;
-        }
-    }
-
-    .w-sdc-deployment-right-bar {
-
-        .noselect;
-        bottom: 0;
-        position: absolute;
-        right: 0px;
-        transition: right 0.2s;
-        z-index: 10000;
-        top:  @action_nav_height;
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model.ts
deleted file mode 100644
index c0d6aba915..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view-model.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-
-    interface IDistributionStatusModalViewModelScope {
-        distribution:Models.Distribution;
-        status:string;
-        getStatusCount(distributionComponent:Array<Models.DistributionComponent>):any;
-        getUrlName(url:string):string;
-        modalDitributionStatus:ng.ui.bootstrap.IModalServiceInstance;
-        footerButtons: Array<any>;
-        close(): void;
-    }
-
-    export class DistributionStatusModalViewModel {
-
-        static '$inject' = ['$scope','$modalInstance', 'data'];
-
-        constructor(private $scope:IDistributionStatusModalViewModelScope,
-                    private $modalInstance:ng.ui.bootstrap.IModalServiceInstance,
-                    private data:any
-                    ) {
-            this.initScope();
-        }
-
-        private initScope = ():void => {
-            this.$scope.distribution = this.data.distribution;
-            this.$scope.status = this.data.status;
-            this.$scope.modalDitributionStatus = this.$modalInstance;
-
-            this.$scope.getUrlName = (url:string):string =>{
-                let urlName:string = _.last(url.split('/'));
-                return urlName;
-            };
-
-            this.$scope.close = ():void => {
-                this.$modalInstance.close();
-            };
-
-            this.$scope.footerButtons = [
-                {'name': 'Close', 'css': 'blue', 'callback': this.$scope.close }
-            ];
-
-        };
-
-
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html
deleted file mode 100644
index b3393e99e0..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html
+++ /dev/null
@@ -1,126 +0,0 @@
-<sdc-modal modal="modalDitributionStatus"  type="classic" class="w-sdc-classic-top-line-modal" buttons="footerButtons" header="Distribution by Status" show-close-button="true">
-
-    <div class="w-sdc-distribution-view">
-        <div class="w-sdc-distribution-view-header">
-
-        </div>
-
-
-        <perfect-scrollbar include-padding="true" class="w-sdc-distribution-view-content">
-            <div class="w-sdc-distribution-view-content-section w-sdc-distribute-parent-block">
-                <ul>
-                    <li  class="w-sdc-distribute-parent-block" >
-                        <div class="w-sdc-distribute-row w-sdc-distribute-row-extends extends">
-
-                            <div class="w-sdc-distribute-row-content">
-                                <div class="w-sdc-distribute-content">
-                                    <div class="title-section item-1">
-                                        <div class="title">Distribution ID</div>
-                                        <div data-ng-bind="distribution.distributionID"></div>
-                                    </div>
-                                    <div class="title-section item-2">
-                                        <div class="title" translate="DISTRIBUTION_VIEW_TITLE_USER_ID"></div>
-                                        <div data-ng-bind="distribution.userId"></div>
-                                    </div>
-                                    <div class="title-section item-3">
-                                        <div class="title">Time[UTC]:</div>
-                                        <div
-                                            data-ng-bind="distribution.timestamp | stringToDateFilter | date: 'MM/dd/yyyy h:mma':'UTC'"></div>
-                                    </div>
-                                    <div class="title-section item-4">
-                                        <span class="sprite-new status-icon" data-ng-class="distribution.deployementStatus"></span>
-                                        <span class="sprite-new" data-ng-bind="distribution.deployementStatus"></span>
-                                    </div>
-                                </div>
-                                <div class="w-sdc-distribute-status-block" data-ng-show="distribution.statusCount">
-                                    <div class="status-item-1">Status: {{status}} <span data-ng-bind="(distribution.distributionComponents | filter:status:true).length"
-                                                                                     class="blue-font"></span></div>
-
-                                </div>
-                            </div>
-                        </div>
-
-                        <ul class="w-sdc-distribute-components-block disable-hover">
-                            <li data-ng-repeat="(omfComponentID,omfComponentList) in distribution.distributionComponents | orderBy: '-timestamp' | filter:status:true | groupBy:'omfComponentID'"
-                                class="disable-hover">
-                                <div class="w-sdc-distribute-row omf-component-row w-sdc-distribute-row-extends "
-                                     data-ng-class="{'extends': omfComponentListExtends}">
-                                    <div class="w-sdc-distribution-arrow-btn" data-ng-click="omfComponentListExtends=!omfComponentListExtends"
-                                         ng-class="{'extends': omfComponentListExtends}"
-                                         data-ng-init="omfComponentListExtends=false"
-                                         ></div>
-                                    <div class="w-sdc-distribute-status-block">
-                                        <div class="status-item-1">{{omfComponentID}} <span class="blue-font">{{omfComponentList.length}}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div data-ng-show="omfComponentListExtends"
-                                     class="w-sdc-distribute-omfComponent-block disable-hover">
-                                    <div class="w-sdc-distribute-row-extends disable-hover">
-                                        <div class="disable-hover">
-                                            <div class="w-sdc-distribute-row omfComponent-table-head">
-                                                <div class="title item-1">Component ID</div>
-                                                <div class="title item-2">Artifact Name</div>
-                                                <div class="title item-3">URL</div>
-                                                <div class="title item-4">Time(UTC)</div>
-                                                <div class="title item-5">Status</div>
-                                            </div>
-
-                                            <div class="w-sdc-distribute-row omfComponent-table-row"
-                                                 data-ng-repeat-start="(url,urlList) in omfComponentList | orderBy: '-timestamp' |  groupBy:'url'"
-                                                 data-ng-class="urlListExtends?'extends row-{{$index}}':'row-{{$index}}'" >
-                                                <div class="w-sdc-distribute-cell item-1">
-                                                    <div class="w-sdc-distribution-arrow-btn" data-ng-click="urlListExtends=!urlListExtends"
-                                                         data-ng-class="{'extends': urlListExtends}"
-                                                         data-ng-init="urlListListExtends=false"
-                                                         ></div>
-                                                    {{urlList[0].omfComponentID}}
-                                                </div>
-                                                <div class="w-sdc-distribute-cell item-2" sdc-smart-tooltip>
-                                                    {{getUrlName(urlList[0].url)}}
-                                                </div>
-                                                <div class="w-sdc-distribute-cell item-3 disable-hover">
-                                                    <div sdc-smart-tooltip class="distribution-url">{{urlList[0].url}}</div>
-                                                    <div sdc-smart-tooltip title="Copy url" clipboard text="urlList[0].url"
-                                                         class="sprite-new link-btn copy-link disable-hover"></div>
-                                                </div>
-                                                <div class="w-sdc-distribute-cell item-4"><span
-                                                    data-ng-bind="urlList[0].timestamp  | date: 'MM/dd/yyyy h:mma':'UTC'"></span>
-                                                </div>
-                                                <div class="w-sdc-distribute-cell item-5">{{urlList[0].status}}</div>
-                                            </div>
-
-
-                                            <div data-ng-repeat-end data-ng-show="urlListExtends" class="disable-hover">
-                                                <div class="w-sdc-distribute-row extends disable-hover">
-                                                    <ul data-ng-show="urlListExtends"
-                                                        class="w-sdc-distribute-url-block disable-hover">
-                                                        <li data-ng-repeat="distributionComponent in urlList | orderBy: '-timestamp'"
-                                                            class="disable-hover">
-                                                        <span
-                                                            data-ng-bind="distributionComponent.timestamp | date: 'MM/dd/yyyy h:mma':'UTC'"
-                                                            class="disable-hover"></span>
-                                                        <span
-                                                            class="disable-hover">{{distributionComponent.status}}</span>
-                                                           <span
-                                                               class="disable-hover reason" data-ng-show="distributionComponent.status == 'NOT_NOTIFIED'">Reason: Component has determined artifact is not needed.</span>
-                                                          <span
-                                                              class="disable-hover reason" data-ng-show="distributionComponent.errorReason">Reason: {{distributionComponent.errorReason}}</span>
-                                                        </li>
-                                                    </ul>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </li>
-                        </ul>
-                    </li>
-                </ul>
-            </div>
-
-        </perfect-scrollbar>
-    </div>
-
-
-</sdc-modal>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less
deleted file mode 100644
index 02321b6e2f..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal.less
+++ /dev/null
@@ -1,33 +0,0 @@
-.w-sdc-classic-top-line-modal {
-
-    .w-sdc-modal-head {
-     //   border-bottom: none;
-    }
-    .w-sdc-distribution-view {
-
-        .w-sdc-distribution-view-content {
-            height: 500px;
-        }
-
-        .w-sdc-distribution-view-content-section {
-
-            .w-sdc-distribute-parent-block {
-                .w-sdc-distribute-components-block {
-
-                    .omf-component-row {
-                        .w-sdc-distribute-status-block {
-                            margin-left: 0;
-                        }
-
-                    }
-                    div {
-                        padding-left: 0;
-                    }
-                }
-
-            }
-
-        }
-    }
-}
-
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view-model.ts
deleted file mode 100644
index 219585fc3d..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view-model.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../references"/>
-
-module Sdc.ViewModels {
-    'use strict';
-
-    interface IDistributionViewModel extends IWorkspaceViewModelScope{
-        modalDistribution:ng.ui.bootstrap.IModalServiceInstance;
-        service: Models.Components.Service;
-        distributions : Array<Models.Distribution>;
-        showComponents(distribution:Models.Distribution): void;
-        markAsDeployed(distribution:Models.Distribution): void;
-        getStatusCount(distributionComponent:Array<Models.DistributionComponent>):any;
-        initDistributions():void;
-        getUrlName(url:string):string;
-        close(): void;
-        openDisributionStatusModal:Function;
-    }
-
-    export class DistributionViewModel{
-
-        static '$inject' = [
-            '$scope',
-            'ModalsHandler'
-
-        ];
-
-        constructor(
-            private $scope:IDistributionViewModel,
-             private ModalsHandler: Sdc.Utils.ModalsHandler
-        ){
-            this.initScope();
-            this.$scope.setValidState(true);
-            this.$scope.updateSelectedMenuItem();
-        }
-
-        private initScope = (): void => {
-            this.$scope.service = <Models.Components.Service>this.$scope.component;
-
-
-            // Open Distribution status modal
-            this.$scope.openDisributionStatusModal = (distribution: Models.Distribution,status:string):void => {
-                this.ModalsHandler.openDistributionStatusModal(distribution,status).then(()=>{
-                    // OK
-                }, ()=>{
-                    // ERROR
-                });
-            };
-
-
-            this.$scope.showComponents = (distribution: Models.Distribution): void => {
-                let onError = (response) => {
-                    console.info('onError showComponents',response);
-                };
-                let onSuccess = (distributionComponents: Array<Models.DistributionComponent>) => {
-                    distribution.distributionComponents = distributionComponents;
-                    distribution.statusCount = this.$scope.getStatusCount(distribution.distributionComponents);
-                   // distribution.components = this.aggregateDistributionComponent(distributionComponents);;
-                };
-                this.$scope.service.getDistributionsComponent(distribution.distributionID).then(onSuccess, onError);
-            };
-
-            this.$scope.getStatusCount = (distributionComponent:Array<Models.DistributionComponent>):any => {
-                return _.countBy(distributionComponent, 'status')
-            };
-
-            this.$scope.getUrlName = (url:string):string =>{
-                let urlName:string = _.last(url.split('/'));
-                return urlName;
-            };
-
-            this.$scope.markAsDeployed = (distribution: Models.Distribution): void => {
-                let onError = (response) => {
-                    console.info('onError markAsDeployed',response);
-                };
-                let onSuccess = (result: any) => {
-                    distribution.deployementStatus = 'Deployed';
-                };
-                this.$scope.service.markAsDeployed(distribution.distributionID).then(onSuccess, onError);
-
-            };
-
-            this.$scope.initDistributions = (): void => {
-                let onError = (response) => {
-                    console.info('onError initDistributions',response);
-                };
-                let onSuccess = (distributions: Array<Models.Distribution>) => {
-                    this.$scope.distributions = distributions;
-                };
-                this.$scope.service.getDistributionsList().then(onSuccess, onError);
-            };
-
-            this.$scope.initDistributions();
-
-        };
-
-
-        private aggregateDistributionComponent = (distributionComponents:Array<Models.DistributionComponent>):any =>{
-            let aggregateDistributions:Utils.Dictionary<string,Utils.Dictionary<string,Array<Models.DistributionComponent>>> = new Utils.Dictionary<string,Utils.Dictionary<string,Array<Models.DistributionComponent>>>();
-            let tempAggregateDistributions:any= _.groupBy(distributionComponents,'omfComponentID');
-            let aa = new Utils.Dictionary<string,Array<Models.DistributionComponent>>();
-
-            let tempAggregate:any;
-            _.forEach(tempAggregateDistributions,(distributionComponents:Array<Models.DistributionComponent>,omfComponentID:string)=>{
-
-               let urls:any = _.groupBy(distributionComponents,'url');
-                aggregateDistributions.setValue(omfComponentID,urls);
-               // aggregateDistributions[omfComponentID] = ;
-
-            });
-            console.log(aggregateDistributions);
-            return aggregateDistributions;
-        };
-
-
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view.html
deleted file mode 100644
index 1ab0f1e111..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution-view.html
+++ /dev/null
@@ -1,171 +0,0 @@
-<div class="w-sdc-distribution-view">
-    <div class="w-sdc-distribution-view-header">
-        <div class="w-sdc-distribution-view-title">DISTRIBUTION <span data-ng-bind="'[' + distributions.length +']'"
-                                                                      class="blue-font"></span></div>
-        <div class="header-spacer"></div>
-        <div class="top-search">
-            <input type="text"
-                   class="search-text"
-                   data-tests-id="searchTextbox"
-                   placeholder="Search"
-                   data-ng-model="searchBind"
-                   data-tests-id="main-menu-input-search"
-                   ng-model-options="{ debounce: 500 }"/>
-            <span class="w-sdc-search-icon magnification"></span>
-        </div>
-        <div class="sprite-new refresh-btn" data-tests-id="refreshButton" data-ng-click="initDistributions()" sdc-smart-tooltip=""
-             title="Refresh"></div>
-    </div>
-
-
-    <perfect-scrollbar include-padding="true" class="w-sdc-distribution-view-content">
-        <div class="w-sdc-distribution-view-content-section" data-tests-id="ditributionTable">
-            <ul>
-                <li data-ng-repeat="item in distributions | orderBy: '-timestamp' | filter:searchBind"
-                    data-ng-init="item.dateFormat = ( item.timestamp | stringToDateFilter | date: 'MM/dd/yyyy h:mma':'UTC' )"
-                    class="w-sdc-distribute-parent-block" data-tests-id="record_{{$index}}" data-ng-class="{'extends': item.showDetails}">
-                    <div class="w-sdc-distribute-row w-sdc-distribute-row-extends"
-                         data-ng-class="{'extends': item.showDetails  && item.distributionComponents.length}">
-                        <div class="w-sdc-distribution-arrow-btn" data-tests-id="ShowRecordButton_{{$index}}" data-ng-click="showComponents(item); item.showDetails=!item.showDetails"
-                             data-ng-class="{'extends': item.showDetails}"
-                             ></div>
-                        <div class="w-sdc-distribute-row-content">
-                            <div class="w-sdc-distribute-content">
-                                <div class="title-section item-1">
-                                    <div class="title">Distribution ID</div>
-                                    <div data-ng-bind="item.distributionID"></div>
-                                </div>
-                                <div class="title-section item-2">
-                                    <div class="title" translate="DISTRIBUTION_VIEW_TITLE_USER_ID"></div>
-                                    <div data-ng-bind="item.userId"></div>
-                                </div>
-                                <div class="title-section item-3">
-                                    <div class="title">Time[UTC]:</div>
-                                    <div
-                                        data-ng-bind="item.dateFormat"></div>
-                                </div>
-                                <div class="title-section item-4">
-                                    <span class="sprite-new status-icon" data-ng-class="item.deployementStatus"></span>
-                                    <span class="sprite-new" data-ng-bind="item.deployementStatus"></span>
-                                </div>
-                                <div>
-                                    <div class="sprite-new distribution-bth item-5"
-                                         data-ng-class="{'disable':item.deployementStatus==='Deployed'}"
-                                         data-ng-click="(item.deployementStatus==='Deployed') || markAsDeployed(item)"></div>
-                                </div>
-                            </div>
-                            <div class="w-sdc-distribute-status-block" data-ng-show="item.statusCount">
-                                <div class="status-item-1">Total Artifacts:<span data-ng-bind="(item.statusCount.NOT_NOTIFIED || 0) + (item.statusCount.NOTIFIED || 0) "
-                                                                       class="blue-font" data-tests-id="totalArtifacts_{{$index}}"></span></div>
-                                <div class="status-item-2 " ><sapn class="link" data-ng-click="openDisributionStatusModal(item,'NOTIFIED')">Notified:</sapn><span
-                                    data-ng-bind="item.statusCount.NOTIFIED || 0" class="blue-font" data-tests-id="notified_{{$index}}"></span></div>
-                                <div class="status-item-3 link" ><sapn class="link" data-ng-click="openDisributionStatusModal(item,'DOWNLOAD_OK')">Downloaded:</sapn><span
-                                    data-ng-bind="item.statusCount.DOWNLOAD_OK || 0" class="blue-font" data-tests-id="downloaded_{{$index}}"></span></div>
-                                <div class="status-item-4 link"><sapn class="link" data-ng-click="openDisributionStatusModal(item,'DEPLOY_OK')">Deployed:</sapn><span
-                                    data-ng-bind="item.statusCount.DEPLOY_OK || 0" class="blue-font" data-tests-id="deployed_{{$index}}" ></span><span
-                                    data-ng-class="{'deployed':(item.statusCount.DEPLOY_OK > 0)}"></span></div>
-                                <div class="status-item-5 link" ><sapn class="link" data-ng-click="openDisributionStatusModal(item,'NOT_NOTIFIED')">Not Notified:</sapn><span
-                                    data-ng-bind="item.statusCount.NOT_NOTIFIED || 0" class="blue-font" data-tests-id="NotNotified_{{$index}}"></span></div>
-                                <div class="status-item-6"><sapn class="link" data-ng-click="openDisributionStatusModal(item,'DOWNLOAD_ERROR')" >Errors:</sapn><span
-                                    data-ng-bind="item.statusCount.DOWNLOAD_ERROR || 0" class="red-font "></span><span
-                                    data-ng-class="{'error':(item.statusCount.DOWNLOAD_ERROR > 0)}" data-tests-id="errors_{{$index}}"></span></div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <ul data-ng-show="item.showDetails && item.distributionComponents.length"
-                        class="w-sdc-distribute-components-block disable-hover">
-
-                        <li data-ng-repeat="(omfComponentID,omfComponentList) in item.distributionComponents | orderBy: '-timestamp' | filter:searchBind | groupBy:'omfComponentID' "
-                            class="disable-hover"
-                            data-ng-init="statusCount = getStatusCount(omfComponentList);">
-                            <div class="w-sdc-distribute-row omf-component-row w-sdc-distribute-row-extends"
-                                 data-ng-class="{'extends': omfComponentListExtends}">
-                                <div class="w-sdc-distribution-arrow-btn" data-ng-click="omfComponentListExtends=!omfComponentListExtends"
-                                     ng-class="{'extends': omfComponentListExtends}"
-                                     data-ng-init="omfComponentListExtends=false"
-                                     ></div>
-                                <div class="w-sdc-distribute-status-block">
-                                    <div class="status-item-1">{{omfComponentID}} <span class="blue-font">{{(statusCount.NOT_NOTIFIED || 0) + (statusCount.NOTIFIED || 0) }}</span>
-                                    </div>
-                                    <div class="status-item-2">Notified:<span data-ng-bind="statusCount.NOTIFIED || 0"
-                                                                              class="blue-font"></span></div>
-                                    <div class="status-item-3">Downloaded:<span
-                                        data-ng-bind="statusCount.DOWNLOAD_OK || 0" class="blue-font"></span></div>
-                                    <div class="status-item-4">Deployed:<span data-ng-bind="statusCount.DEPLOY_OK || 0"
-                                                                              class="blue-font"></span><span
-                                        data-ng-class="{'deployed':(statusCount.DEPLOY_OK > 0)}"></span></div>
-                                    <div class="status-item-5">Not Notified:<span
-                                        data-ng-bind="statusCount.NOT_NOTIFIED || 0" class="blue-font"></span></div>
-                                    <div class="status-item-6">Errors:<span
-                                        data-ng-bind="statusCount.DOWNLOAD_ERROR || 0" class="red-font"></span><span
-                                        data-ng-class="{'error':(statusCount.DOWNLOAD_ERROR > 0)}"></span></div>
-                                </div>
-                            </div>
-                            <div data-ng-show="omfComponentListExtends"
-                                 class="w-sdc-distribute-omfComponent-block disable-hover">
-                                <div class="w-sdc-distribute-row-extends disable-hover">
-                                    <div class="disable-hover">
-                                        <div class="w-sdc-distribute-row omfComponent-table-head">
-                                            <div class="title item-1">Component ID</div>
-                                            <div class="title item-2">Artifact Name</div>
-                                            <div class="title item-3">URL</div>
-                                            <div class="title item-4">Time(UTC)</div>
-                                            <div class="title item-5">Status</div>
-                                        </div>
-
-                                        <div class="w-sdc-distribute-row omfComponent-table-row"
-                                             data-ng-repeat-start="(url,urlList) in omfComponentList | orderBy: '-timestamp' |  groupBy:'url'"
-                                             data-ng-class="urlListExtends?'extends row-{{$index}}':'row-{{$index}}'">
-                                            <div class="w-sdc-distribute-cell item-1">
-                                                <div class="w-sdc-distribution-arrow-btn" data-ng-click="urlListExtends=!urlListExtends"
-                                                     data-ng-class="{'extends': urlListExtends}"
-                                                     data-ng-init="urlListListExtends=false"
-                                                     ></div>
-                                                {{urlList[0].omfComponentID}}
-                                            </div>
-                                            <div class="w-sdc-distribute-cell item-2" sdc-smart-tooltip>
-                                                {{getUrlName(urlList[0].url)}}
-                                            </div>
-                                            <div class="w-sdc-distribute-cell item-3 disable-hover">
-                                                <div sdc-smart-tooltip class="distribution-url">{{urlList[0].url}}</div>
-                                                <div sdc-smart-tooltip title="Copy url" clipboard text="urlList[0].url"
-                                                     class="sprite-new link-btn copy-link disable-hover"></div>
-                                            </div>
-                                            <div class="w-sdc-distribute-cell item-4"><span
-                                                data-ng-bind="urlList[0].timestamp  | date: 'MM/dd/yyyy h:mma':'UTC'"></span>
-                                            </div>
-                                            <div class="w-sdc-distribute-cell item-5">{{urlList[0].status}}</div>
-                                        </div>
-
-
-                                        <div data-ng-repeat-end data-ng-show="urlListExtends" class="disable-hover" >
-                                            <div class="w-sdc-distribute-row extends disable-hover">
-                                                <ul data-ng-show="urlListExtends"
-                                                    class="w-sdc-distribute-url-block disable-hover">
-                                                    <li data-ng-repeat="distributionComponent in urlList | orderBy: '-timestamp'"
-                                                        class="disable-hover">
-                                                        <span
-                                                            data-ng-bind="distributionComponent.timestamp | date: 'MM/dd/yyyy h:mma':'UTC'"
-                                                            class="disable-hover"></span>
-                                                        <span
-                                                            class="disable-hover">{{distributionComponent.status}}</span>
-                                                           <span
-                                                               class="disable-hover reason" data-ng-show="distributionComponent.status == 'NOT_NOTIFIED'">Reason: Component has determined artifact is not needed.</span>
-                                                          <span
-                                                              class="disable-hover reason" data-ng-show="distributionComponent.errorReason">Reason: {{distributionComponent.errorReason}}</span>
-                                                    </li>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                </li>
-            </ul>
-        </div>
-
-    </perfect-scrollbar>
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution.less b/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution.less
deleted file mode 100644
index 8ad8c1793e..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/distribution/distribution.less
+++ /dev/null
@@ -1,361 +0,0 @@
-
-.w-sdc-distribution-view {
-    text-align: left;
-
-    .g_1;
-    min-height: 500px;
-
-    .w-sdc-distribution-view-distributed-green-text {
-        .l_9;
-        .bold;
-    }
-    .w-sdc-distribution-view-distributed-error-red-text {
-        .h_9;
-        .bold;
-    }
-
-    .bg_c;
-    vertical-align: top;
-    padding: 30px 10px;
-    width: 100%;
-
-    .w-sdc-distribution-view-header {
-        display: flex;
-        -webkit-justify-content: space-between;
-        margin: 0 25px 5px 40px;
-
-        .header-spacer {
-            flex-grow: 5;
-        }
-    }
-
-    .top-search {
-        position: relative;
-        input {
-            &.search-text {
-                height: 26px;
-                line-height: 26px;
-                margin: 0 18px 4px 20px;
-                padding-right: 25px;
-            }
-
-        }
-        .magnification {
-            top: 8px;
-            right: 25px;
-        }
-    }
-
-    .w-sdc-distribution-view-content {
-        .perfect-scrollbar;
-        padding: 0 25px 0 0px;
-        margin-bottom: 25px;
-        height: 700px;
-        overflow: hidden;
-        position: relative;
-
-    }
-
-    .w-sdc-distribution-view-title {
-        .s_14_r;
-
-        line-height: 30px;
-
-        span {
-            padding-left: 5px;
-        }
-    }
-
-    .blue-font {
-        .a_14_m;
-
-    }
-
-    .red-font {
-        .q_14_m;
-    }
-
-    .w-sdc-distribution-view-block {
-        div {
-            display: inline-block;
-        }
-    }
-
-    .w-sdc-distribution-view-content-section {
-        ul {
-            list-style-type: none;
-        }
-
-        .distribution-bth {
-            .hand;
-            &.disabled {
-                cursor: none;
-            }
-        }
-
-        .copy-link {
-            padding-right: 19px;
-            margin-left: 8px;
-            cursor: pointer;
-
-        }
-
-        .w-sdc-distribute-row-extends {
-            border-Left: solid 4px transparent;
-            &.extends {
-                border-left: solid 4px @main_color_c;
-                border-bottom: 1px solid @border_color_f;
-                margin-bottom: 10px;
-            }
-        }
-        .w-sdc-distribute-parent-block {
-            border: 1px solid @main_color_o;;
-            width: 100%;
-            margin-bottom: 6px;
-
-            .status-icon {
-                vertical-align: middle;
-                margin-bottom: 4px;
-            }
-
-            &.extends {
-                background-color: @tlv_color_t;
-            }
-
-            :not(.disable-hover):hover {
-                background-color: @tlv_color_u;
-            }
-
-            .title-section {
-                display: inline-block;
-                margin-right: 10px;
-                flex-basis: 0;
-            }
-
-            .title {
-                .l_12_m;
-                font-weight: bold;
-            }
-            .w-sdc-distribute-content {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-left: 10px;
-            }
-
-            .w-sdc-distribution-arrow-btn {
-                .sprite-new;
-                .arrow-up-small;
-                margin: 0 6px;
-            }
-            .extends.w-sdc-distribution-arrow-btn {
-                -webkit-transform: rotate(180deg);
-                -ms-transform: rotate(180deg);
-                transform: rotate(180deg);
-            }
-
-            .w-sdc-distribute-row {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-
-                .w-sdc-distribute-row-content {
-                    margin: 15px 31px 10px 0;
-                    width: 100%;
-                    .w-sdc-distribute-status-block {
-                        border-top: solid 1px @main_color_o;
-                    }
-                    .item-1 {
-                        flex-grow: 2;
-                    }
-                    .item-2 {
-                        flex-grow: 1;
-                    }
-                    .item-3 {
-                        flex-grow: 1;
-                    }
-                    .item-4 {
-                        flex-grow: 1;
-                    }
-                    .item-5 {
-                        flex-grow: 1;
-                    }
-                }
-            }
-
-            .w-sdc-distribute-status-block {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin: 10px 5px 0 5px;
-                padding: 5px 5px 0 5px;;
-                width: 100%;
-                div {
-                    border-left: 1px solid @main_color_o;
-                    padding: 0 12px;
-                }
-
-                .link {
-                    .a_14_m;
-                    cursor: pointer;
-                    &:hover{
-                        text-decoration: underline;
-                        .b_14_m;
-                    }
-                }
-
-                span {
-                    padding: 2px;
-                }
-
-                .deployed {
-                    margin-left: 10px;
-                    .sprite-new;
-                    .success-circle-small;
-                }
-
-                .error {
-                    .q_14_m;
-                    margin-left: 10px;
-                    .sprite-new;
-                    .error-icon;
-                }
-
-                .status-item-1 {
-                    border-left: 0;
-                }
-
-                .status-item-6 {
-                    flex-grow: 1;
-                    border-left: none;
-                    text-align: right;
-                }
-            }
-
-            .w-sdc-distribute-components-block {
-                padding: 0;
-                padding-bottom: 5px;
-                list-style-type: none;
-
-                li {
-                    margin: 5px 2px;
-                }
-
-                .omf-component-row {
-                    border: 1px solid @border_color_f;
-                    padding-left: 3px;
-                    background-color: white;
-                    margin: 0 30px;
-                    &.extends {
-                        padding-left: 0;
-                        border-Left: solid 4px @main_color_c;
-
-                    }
-
-                    .w-sdc-distribute-status-block {
-                        margin: 5px;
-                        padding: 5px;
-                    }
-
-                    .blue-font {
-                        .a_16_m;
-
-                    }
-
-                    &:hover {
-                        background-color: @tlv_color_u;
-                    }
-
-                }
-
-            }
-
-            .w-sdc-distribute-omfComponent-block {
-                background-color: white;
-                margin: 0 30px;
-                padding: 8px 10px;
-                border: 1px solid @border_color_f;
-
-                .omfComponent-table-head {
-                    margin-bottom: 5px;
-                    background-color: @tlv_color_u;
-                    .title {
-                        padding: 6px 10px;
-                        border-left: 1px solid @border_color_f;
-                        &:first-child {
-                            border: none;
-                        }
-                    }
-                }
-
-                .omfComponent-table-row {
-                    border-bottom: 1px solid @border_color_f;
-                    &.row-0 {
-                        border-top: 1px solid @border_color_f;
-                    }
-                    .w-sdc-distribute-cell {
-                        padding: 10px;
-                        border-left: 1px solid @border_color_f;
-                        &:last-child {
-                            border-right: 1px solid @border_color_f;
-                        }
-                        &.item-5 {
-                            .m_14_m;
-                        }
-                    }
-                }
-
-                .distribution-url {
-
-                }
-
-                .w-sdc-distribute-row.extends {
-                    border-Left: solid 4px @main_color_c;
-                    .item-1 {
-                        border: none;
-                    }
-
-                }
-
-                .item-1 {
-                    width: 20%;
-                }
-                .item-2 {
-                    width: 20%;
-                }
-
-                .item-3 {
-                    width: 24%;
-                    display: flex;
-                }
-
-                .item-4 {
-                    width: 18%;
-                }
-
-                .item-5 {
-                    width: 18%;
-                }
-            }
-
-            .w-sdc-distribute-url-block {
-
-                padding: 10px 15px;
-                border: none;
-                border-right: 1px solid @border_color_f;
-                border-bottom: 1px solid @border_color_f;
-                width: 100%;
-                li {
-                    border: none;
-                    span {
-                        padding-right: 30px;
-                        .m_12_r;
-                    }
-                }
-
-            }
-        }
-
-    }
-}
-
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view-model.ts
deleted file mode 100644
index f613648596..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view-model.ts
+++ /dev/null
@@ -1,379 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-
-    'use strict';
-    import Resource = Sdc.Models.Components.Resource;
-    import ISubCategory = Sdc.Models.ISubCategory;
-    import IMainCategory = Sdc.Models.IMainCategory;
-    import ResourceType = Sdc.Utils.Constants.ResourceType;
-
-    export class Validation {
-        validationPattern:RegExp;
-        contactIdValidationPattern:RegExp;
-        tagValidationPattern:RegExp;
-        vendorValidationPattern:RegExp;
-        commentValidationPattern:RegExp;
-        projectCodeValidationPattern:RegExp;
-    }
-
-    export interface IGeneralScope extends IWorkspaceViewModelScope {
-        validation:Validation;
-        editForm:ng.IFormController;
-        categories: Array<IMainCategory>;
-        latestCategoryId: string;
-        latestVendorName: string;
-        importedFileExtension:any;
-        isCreate:boolean;
-        isShowFileBrowse:boolean;
-        isShowOnboardingSelectionBrowse:boolean;
-        importedToscaBrowseFileText:string;
-        importCsarProgressKey:string;
-        browseFileLabel:string;
-
-
-        onToscaFileChange():void
-        validateField(field:any):boolean;
-        validateName(isInit:boolean): void;
-        calculateUnique(mainCategory:string, subCategory:string):string; // Build unique string from main and sub category
-        onVendorNameChange(oldVendorName:string): void;
-        convertCategoryStringToOneArray(category:string, subcategory:string):Array<Models.IMainCategory>;
-        onCategoryChange():void;
-        openOnBoardingModal():void;
-        initCategoreis():void;
-    }
-
-    export class GeneralViewModel {
-
-        static '$inject' = [
-            '$scope',
-            'Sdc.Services.CacheService',
-            'ValidationPattern',
-            'ContactIdValidationPattern',
-            'TagValidationPattern',
-            'VendorValidationPattern',
-            'CommentValidationPattern',
-            'ValidationUtils',
-            'sdcConfig',
-            'ProjectCodeValidationPattern',
-            '$state',
-            'ModalsHandler',
-            'EventListenerService',
-            'Notification',
-            'Sdc.Services.ProgressService',
-            '$interval',
-            '$filter',
-            '$timeout'
-        ];
-
-        constructor(private $scope:IGeneralScope,
-                    private cacheService:Services.CacheService,
-                    private ValidationPattern:RegExp,
-                    private ContactIdValidationPattern:RegExp,
-                    private TagValidationPattern:RegExp,
-                    private VendorValidationPattern:RegExp,
-                    private CommentValidationPattern:RegExp,
-                    private ValidationUtils:Sdc.Utils.ValidationUtils,
-                    private sdcConfig:Models.IAppConfigurtaion,
-                    private ProjectCodeValidationPattern:RegExp,
-                    private $state:ng.ui.IStateService,
-                    private ModalsHandler: Sdc.Utils.ModalsHandler,
-                    private EventListenerService:Services.EventListenerService,
-                    private Notification:any,
-                    private progressService:Sdc.Services.ProgressService,
-                    protected $interval:any,
-                    private $filter:ng.IFilterService,
-                    private $timeout:ng.ITimeoutService
-            ){
-
-            this.registerToSuccessSaveEvent();
-            this.initScopeValidation();
-            this.initScopeMethods();
-            this.initScope();
-            this.$scope.updateSelectedMenuItem();
-        }
-
-        private registerToSuccessSaveEvent = ():void => {
-            // Register to save success to show notification to user.
-            this.EventListenerService.registerObserverCallback(Utils.Constants.EVENTS.ON_WORKSPACE_SAVE_BUTTON_SUCCESS, this.showSuccessNotificationMessage);
-
-        };
-
-        private showSuccessNotificationMessage = ():void => {
-            // In case we import CSAR. Notify user when import VF was finished.
-            this.Notification.success({
-                message: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_FINISHED_DESCRIPTION"),
-                title: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_FINISHED_TITLE")
-            });
-
-            //set the form Pristine after save to reset the unsaved changes (whit for dom  reload)
-            this.$timeout(()=> {
-                if(this.$scope.editForm) {
-                    this.$scope.editForm.$setPristine();
-                }
-            }, 500);
-
-        };
-
-
-
-        private initScopeValidation = ():void => {
-            this.$scope.validation = new Validation();
-            this.$scope.validation.validationPattern = this.ValidationPattern;
-            this.$scope.validation.contactIdValidationPattern = this.ContactIdValidationPattern;
-            this.$scope.validation.tagValidationPattern = this.TagValidationPattern;
-            this.$scope.validation.vendorValidationPattern = this.VendorValidationPattern;
-            this.$scope.validation.commentValidationPattern = this.CommentValidationPattern;
-            this.$scope.validation.projectCodeValidationPattern = this.ProjectCodeValidationPattern;
-        };
-
-        private initScope = ():void => {
-
-            // Work around to change the csar version
-            if (this.cacheService.get(Utils.Constants.CHANGE_COMPONENT_CSAR_VERSION_FLAG)) {
-                (<Resource>this.$scope.component).csarVersion = this.cacheService.get(Utils.Constants.CHANGE_COMPONENT_CSAR_VERSION_FLAG);
-            }
-
-            this.$scope.importedToscaBrowseFileText = this.$scope.component.name + " (" + (<Resource>this.$scope.component).csarVersion + ")";
-            this.$scope.importCsarProgressKey = "importCsarProgressKey";
-            this.$scope.browseFileLabel = this.$scope.component.isResource() && (<Resource>this.$scope.component).resourceType===ResourceType.VF? "Upload file" : "Upload VFC";
-            this.$scope.progressService = this.progressService;
-
-            // Workaround to short vendor name to 25 chars
-            // onboarding send 27 chars, and the validation pattern is 25 chars.
-            if (this.$scope.component.vendorName){
-                this.$scope.component.vendorName = this.$scope.component.vendorName.substr(0, 25);
-            }
-
-            // Init UIModel
-            this.$scope.component.tags = _.without(this.$scope.component.tags, this.$scope.component.name);
-
-            // Init categories
-            this.$scope.initCategoreis();
-
-            // Init the decision if to show file browse.
-            this.$scope.isShowFileBrowse = false;
-            if (this.$scope.component.isResource()){
-                let resource:Sdc.Models.Components.Resource = <Sdc.Models.Components.Resource>this.$scope.component;
-                console.log(resource.name + ": " + resource.csarUUID);
-                if (resource.importedFile){ // Component has imported file.
-                    this.$scope.isShowFileBrowse = true;
-                }
-                if (this.$scope.isEditMode() && resource.resourceType== ResourceType.VF && !resource.csarUUID){
-                    this.$scope.isShowFileBrowse = true;
-                }
-            };
-
-            // Init the decision if to show onboarding
-            this.$scope.isShowOnboardingSelectionBrowse = false;
-            if (this.$scope.component.isResource() &&
-                this.$scope.isEditMode() &&
-                (<Resource>this.$scope.component).resourceType== ResourceType.VF &&
-                (<Resource>this.$scope.component).csarUUID) {
-                    this.$scope.isShowOnboardingSelectionBrowse = true;
-            }
-
-            //init file extensions based on the file that was imported.
-            if (this.$scope.component.isResource() && (<Resource>this.$scope.component).importedFile){
-                let fileName:string = (<Resource>this.$scope.component).importedFile.filename;
-                let fileExtension:string  = fileName.split(".").pop();
-                if (this.sdcConfig.csarFileExtension.indexOf(fileExtension.toLowerCase()) !== -1){
-                    this.$scope.importedFileExtension = this.sdcConfig.csarFileExtension;
-                    (<Resource>this.$scope.component).importedFile.filetype="csar";
-                } else if (this.sdcConfig.toscaFileExtension.indexOf(fileExtension.toLowerCase()) !== -1){
-                    (<Resource>this.$scope.component).importedFile.filetype="yaml";
-                    this.$scope.importedFileExtension = this.sdcConfig.toscaFileExtension;
-                }
-            }else if(this.$scope.isEditMode()&& (<Resource>this.$scope.component).resourceType === ResourceType.VF){
-                this.$scope.importedFileExtension = this.sdcConfig.csarFileExtension;
-                //(<Resource>this.$scope.component).importedFile.filetype="csar";
-            }
-
-            this.$scope.setValidState(true);
-
-            this.$scope.calculateUnique = (mainCategory:string, subCategory:string):string => {
-                let uniqueId:string = mainCategory;
-                if (subCategory) {
-                    uniqueId += "_#_" + subCategory; // Set the select category combobox to show the selected category.
-                }
-                return uniqueId;
-            };
-
-            //TODO remove this after handling contact in UI
-            if(this.$scope.component.isProduct() && this.$scope.isCreateMode()){
-                (<Models.Components.Product>this.$scope.component).contacts = [];
-                (<Models.Components.Product>this.$scope.component).contacts.push(this.cacheService.get("user").userId);
-            }else if(this.$scope.isCreateMode()){
-                this.$scope.component.contactId = this.cacheService.get("user").userId;
-            }
-
-        };
-
-        // Convert category string MainCategory_#_SubCategory to Array with one item (like the server except)
-        private convertCategoryStringToOneArray = ():Array<Models.IMainCategory> => {
-            let tmp = this.$scope.component.selectedCategory.split("_#_");
-            let mainCategory = tmp[0];
-            let subCategory = tmp[1];
-
-            // Find the selected category and add the relevant sub category.
-            let selectedMainCategory:IMainCategory = <Models.IMainCategory>_.find(this.$scope.categories, function (item) {
-                return item["name"] === mainCategory;
-
-            });
-
-            let mainCategoryClone = angular.copy(selectedMainCategory);
-            if (subCategory) {
-                let selectedSubcategory = <Models.ISubCategory>_.find(selectedMainCategory.subcategories, function (item) {
-                    return item["name"] === subCategory;
-                });
-                mainCategoryClone['subcategories'] = [angular.copy(selectedSubcategory)];
-            }
-            let tmpSelected = <Models.IMainCategory> mainCategoryClone;
-
-            let result:Array<Models.IMainCategory> = [];
-            result.push(tmpSelected);
-
-            return result;
-        };
-
-        private updateComponentNameInBreadcrumbs = ():void => {
-            //update breadcrum after changing name
-            this.$scope.breadcrumbsModel[1].updateSelectedMenuItemText(this.$scope.component.getComponentSubType() + ': ' + this.$scope.component.name);
-            this.$scope.updateMenuComponentName(this.$scope.component.name);
-        };
-
-        private initScopeMethods = ():void => {
-
-            this.$scope.initCategoreis = ():void => {
-                if (this.$scope.componentType === Utils.Constants.ComponentType.RESOURCE) {
-                    this.$scope.categories = this.cacheService.get('resourceCategories');
-
-                }
-                if (this.$scope.componentType === Utils.Constants.ComponentType.SERVICE) {
-                    this.$scope.categories = this.cacheService.get('serviceCategories');
-                }
-            }
-
-            this.$scope.validateField = (field:any):boolean => {
-                if (field && field.$dirty && field.$invalid) {
-                    return true;
-                }
-                return false;
-            };
-
-            this.$scope.openOnBoardingModal=():void => {
-                let csarUUID = (<Resource>this.$scope.component).csarUUID;
-                this.ModalsHandler.openOnboadrdingModal('Update', csarUUID).then(()=>{
-                    // OK
-                    this.$scope.uploadFileChangedInGeneralTab();
-                }, ()=>{
-                    // ERROR
-                });
-            };
-
-            this.$scope.validateName = (isInit:boolean):void => {
-                if (isInit === undefined) {
-                    isInit = false;
-                }
-
-                let name = this.$scope.component.name;
-                if (!name || name === "") {
-                    if (this.$scope.editForm
-                        && this.$scope.editForm["componentName"]
-                        && this.$scope.editForm["componentName"].$error) {
-
-                        // Clear the error name already exists
-                        this.$scope.editForm["componentName"].$setValidity('nameExist', true);
-                    }
-
-                    return;
-                }
-                //?????????????????????????
-                let subtype:string = Utils.Constants.ComponentType.RESOURCE == this.$scope.componentType ? this.$scope.component.getComponentSubType() : undefined;
-
-                let onFailed = (response) => {
-                    //console.info('onFaild', response);
-                    //this.$scope.isLoading = false;
-                };
-
-                let onSuccess = (validation:Models.IValidate) => {
-                    this.$scope.editForm["componentName"].$setValidity('nameExist', validation.isValid);
-                    if(validation.isValid){
-                        //update breadcrumb after changing name
-                        this.updateComponentNameInBreadcrumbs();
-                    }
-                };
-
-                if (isInit) {
-                    // When page is init after update
-                    if (this.$scope.component.name !== this.$scope.originComponent.name) {
-                        if (!(this.$scope.componentType===Utils.Constants.ComponentType.RESOURCE && (<Resource>this.$scope.component).csarUUID!==undefined)
-                        ){
-                            this.$scope.component.validateName(name, subtype).then(onSuccess, onFailed);
-                        }
-                    }
-                } else {
-                    // Validating on change (has debounce)
-                    if (this.$scope.editForm
-                        && this.$scope.editForm["componentName"]
-                        && this.$scope.editForm["componentName"].$error
-                        && !this.$scope.editForm["componentName"].$error.pattern
-                        && this.$scope.component.name !== this.$scope.originComponent.name
-                    ) {
-                        if (!(this.$scope.componentType===Utils.Constants.ComponentType.RESOURCE && (<Resource>this.$scope.component).csarUUID!==undefined)
-                        ){
-                            this.$scope.component.validateName(name, subtype).then(onSuccess, onFailed);
-                        }
-                    } else if (this.$scope.component.name === this.$scope.originComponent.name) {
-                        // Clear the error
-                        this.$scope.editForm["componentName"].$setValidity('nameExist', true);
-                    }
-                }
-            };
-
-            this.$scope.$watchCollection('component.name', (newData:any):void => {
-                this.$scope.validateName(false);
-            });
-
-            // Notify the parent if this step valid or not.
-            this.$scope.$watch("editForm.$valid", (newVal, oldVal) => {
-                this.$scope.setValidState(newVal);
-            });
-
-            this.$scope.$watch("editForm.$dirty", (newVal, oldVal) => {
-                if (newVal!==oldVal) {
-                    this.$state.current.data.unsavedChanges = newVal && !this.$scope.isCreateMode();
-                }
-            });
-
-            this.$scope.onCategoryChange = ():void => {
-                this.$scope.component.categories = this.convertCategoryStringToOneArray();
-                this.$scope.component.icon = Utils.Constants.DEFAULT_ICON;
-            };
-
-            this.$scope.onVendorNameChange = (oldVendorName:string):void => {
-                if (this.$scope.component.icon === oldVendorName) {
-                    this.$scope.component.icon = Utils.Constants.DEFAULT_ICON;
-                }
-            };
-        };
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view.html
deleted file mode 100644
index 1c1d4fedad..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/general/general-view.html
+++ /dev/null
@@ -1,307 +0,0 @@
-<div include-padding="true" class="sdc-workspace-general-step">
-
-    <form novalidate class="w-sdc-form" name="editForm">
-
-        <div class="w-sdc-form-section-container">
-
-            <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
-            <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
-                <label class="i-sdc-form-label required">{{browseFileLabel}}</label>
-                <file-upload id="fileUploadElement"
-                             class="i-sdc-form-input"
-                             element-name="fileElement"
-                             element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')}} || {{isViewMode()}}"
-                             form-element="editForm"
-                             file-model="component.importedFile"
-                             on-file-changed-in-directive="uploadFileChangedInGeneralTab"
-                             extensions="{{importedFileExtension}}"
-                             default-text="'Browse to select file'"
-                             data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload>
-            </div>
-
-            <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
-            <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse">
-                <label class="i-sdc-form-label required">Select VSP</label>
-                <div class="i-sdc-form-file-upload i-sdc-form-input">
-                    <span class="i-sdc-form-file-name" data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText}}</span>
-                    <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
-                    <input type="button" name="fileElement"/>
-                    <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-tests-id="browseButton">Browse</div>
-                </div>
-            </div>
-
-            <div class="input-error-file-upload" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
-                <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
-                <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
-                <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
-                <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
-                <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
-            </div>
-            <!--------------------- IMPORT TOSCA FILE -------------------->
-
-            <div class="w-sdc-form-columns-wrapper">
-
-                <div class="w-sdc-form-column">
-
-                <!--------------------- NAME -------------------->
-                <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
-                    <label class="i-sdc-form-label required">Name</label>
-                    <input class="i-sdc-form-input"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           name="componentName"
-                           data-ng-init="isCreateMode() && validateName(true)"
-                           data-ng-maxlength="{{component.isProduct()?'25':'50'}}"
-                           maxlength="{{component.isProduct()?'25':'50'}}"
-                           data-ng-minlength="{{component.isProduct()?'4':'0'}}"
-                           minlength="{{component.isProduct()?'4':'0'}}"
-                           data-ng-model="component.name"
-                           type="text"
-                           data-required
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-pattern="validation.validationPattern"
-                           data-ng-disabled="component.isAlreadyCertified()"
-                           data-tests-id="name"
-                           autofocus
-                           ng-readonly="isViewMode()"
-                        />
-
-                    <div class="input-error" data-ng-show="validateField(editForm.componentName)">
-                        <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
-                        <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
-                        <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
-                        <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
-                        <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                    </div>
-                </div>
-                <!--------------------- NAME -------------------->
-
-                <!--------------------- FULL NAME -------------------->
-                <div ng-if="component.isProduct()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.fullName)}">
-                    <label class="i-sdc-form-label required">Full Name</label>
-                    <input class="i-sdc-form-input"
-                           name="fullName"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-change="validateName()"
-                           data-ng-maxlength="100"
-                           maxlength="100"
-                           data-ng-minlength="4"
-                           minlength="4"
-                           data-ng-model="component.fullName"
-                           type="text"
-                           data-required
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-pattern="validation.commentValidationPattern"
-                           data-tests-id="fullName"
-                           autofocus
-                           ng-readonly="isViewMode()"
-                        />
-
-                    <div class="input-error" data-ng-show="validateField(editForm.fullName)">
-                        <span ng-show="editForm.fullName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
-                        <span ng-show="editForm.fullName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
-                        <span ng-show="editForm.fullName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
-                        <span ng-show="editForm.fullName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
-                        <span ng-show="editForm.fullName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                    </div>
-                </div>
-                <!--------------------- NAME -------------------->
-
-                <!--------------------- DESCRIPTION -------------------->
-                <div class="i-sdc-form-item"
-                     data-ng-class="{'error': validateField(editForm.description)}">
-                    <label class="i-sdc-form-label required">Description</label>
-                    <textarea class="description"
-                              name="description"
-                              data-ng-class="{'view-mode': isViewMode()}"
-                              data-ng-maxlength="1024"
-                              data-required
-                              data-ng-model="component.description"
-                              data-ng-model-options="{ debounce: 500 }"
-                              data-ng-pattern="validation.commentValidationPattern"
-                              maxlength="1024"
-                              data-tests-id="description"></textarea>
-                    <!-- placeholder="Description here..." -->
-
-                    <div class="input-error" data-ng-show="validateField(editForm.description)">
-                        <span ng-show="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"></span>
-                        <span ng-show="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"></span>
-                        <span ng-show="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                    </div>
-                </div>
-                <!--------------------- DESCRIPTION -------------------->
-
-                <!--------------------- CATEGORIES -------------------->
-                <div class="i-sdc-form-item"
-                     data-ng-class="{'error': validateField(editForm.category)}"
-                     data-ng-if="!component.isProduct()">
-                    <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
-                    <label class="i-sdc-form-label required">Category</label>
-                    <select class="i-sdc-form-select"
-                            data-required
-                            name="category"
-                            data-ng-class="{'view-mode': isViewMode()}"
-                            data-ng-change="onCategoryChange()"
-                            data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='')"
-                            data-ng-model="component.selectedCategory"
-                            data-tests-id="selectGeneralCategory"
-                        >
-                        <option value="">Select category</option>
-                        <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
-                            <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
-                                    data-ng-selected="component.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
-                                    data-tests-id="{{subCategory.name}}"
-                                    value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
-
-                            </option>
-                        </optgroup>
-                        <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
-                                data-ng-selected="component.selectedCategory===mainCategory.name"
-                                value="{{mainCategory.name}}"
-                                data-tests-id="{{mainCategory.name}}">{{mainCategory.name}}</option>
-                    </select>
-
-                    <div class="input-error" data-ng-show="validateField(editForm.category)">
-                        <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
-                    </div>
-                </div>
-                <!--------------------- CATEGORIES -------------------->
-
-                <!--------------------- PROJECT CODE -------------------->
-                <div class="i-sdc-form-item"  data-ng-if="!component.isResource()"
-                     data-ng-class="{'error': validateField(editForm.projectCode)}">
-                    <label class="i-sdc-form-label required" translate="GENERAL_LABEL_PROJECT_CODE"></label>
-                    <input class="i-sdc-form-input" type="text"
-                           data-ng-model="component.projectCode"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-maxlength="128"
-                           data-required
-                           name="projectCode"
-                           data-ng-pattern="validation.projectCodeValidationPattern"
-                           maxlength="50"
-                           data-tests-id="projectCode"
-                        />
-
-                    <div class="input-error" data-ng-show="validateField(editForm.projectCode)">
-                        <span ng-show="editForm.projectCode.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED"></span>
-                        <span ng-show="editForm.projectCode.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID"></span>
-                    </div>
-                </div>
-
-                <!--------------------- VENDOR NAME -------------------->
-                <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
-                    <label class="i-sdc-form-label required">Vendor</label>
-                    <input class="i-sdc-form-input" type="text"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-model="component.vendorName"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-maxlength="25"
-                           data-required
-                           ng-click="oldValue = component.vendorName"
-                           name="vendorName"
-                           data-ng-change="onVendorNameChange(oldValue)"
-                           data-ng-pattern="validation.vendorValidationPattern"
-                           maxlength="25"
-                           data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')"
-                           data-tests-id="vendorName"
-                        />
-
-                    <div class="input-error" data-ng-show="validateField(editForm.vendorName)">
-                        <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span>
-                        <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
-                        <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                    </div>
-
-                </div>
-
-                <!--------------------- VENDOR NAME -------------------->
-
-                <!--------------------- VENDOR RELEASE -------------------->
-                <div ng-if="component.isResource()"
-                     class="i-sdc-form-item"
-                     data-ng-class="{'error': validateField(editForm.vendorRelease)}">
-                    <label class="i-sdc-form-label required">Vendor Release</label>
-                    <input class="i-sdc-form-input" type="text"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-model="component.vendorRelease"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-maxlength="25"
-                           data-required
-                           name="vendorRelease"
-                           data-ng-pattern="validation.vendorValidationPattern"
-                           maxlength="25"
-                           data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''"
-                           data-tests-id="vendorRelease"
-                        />
-
-                    <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)">
-                        <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span>
-                        <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '128' }"></span>
-                        <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                    </div>
-                </div>
-                <!--------------------- VENDOR RELEASE -------------------->
-
-
-
-            </div><!-- Close w-sdc-form-column -->
-
-                <div class="w-sdc-form-column">
-
-                <!--------------------- RESOURCE TAGS -------------------->
-                <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
-                    <label class="i-sdc-form-label">Tags</label>
-
-                    <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
-                              sdc-disabled="isViewMode()"
-                              tags="component.tags"
-                              pattern="validation.tagValidationPattern"
-                              special-tag="component.name"></sdc-tags>
-
-                    <div class="input-error" data-ng-show="validateField(editForm.tags)">
-                        <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                        <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
-                    </div>
-                </div>
-                <!--------------------- RESOURCE TAGS -------------------->
-
-                <!--------------------- CONTACT ID -------------------->
-                <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
-                    <label class="i-sdc-form-label " data-ng-class="{'required':!component.isProduct()}" translate="GENERAL_LABEL_CONTACT_ID"></label>
-                    <input class="i-sdc-form-input" type="text" data-ng-if="!component.isProduct()"
-                           data-ng-model="component.contactId"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-required="!component.isProduct()"
-                           name="contactId"
-                           data-ng-pattern="validation.contactIdValidationPattern"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-tests-id="userId"
-                           maxlength="50"
-                        />
-                    <input class="i-sdc-form-input" type="text" data-ng-if="component.isProduct()"
-                           data-ng-model="component.contacts[0]"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-required="!component.isProduct()"
-                           name="contactId"
-                           data-ng-pattern="validation.contactIdValidationPattern"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-tests-id="userId"
-                           maxlength="50"
-                    />
-
-                    <div class="input-error" data-ng-show="validateField(editForm.contactId)">
-                        <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
-                        <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
-                    </div>
-                </div>
-                <!--------------------- CONTACT ID -------------------->
-
-
-                </div><!-- Close w-sdc-form-column -->
-            </div>
-
-        </div><!-- Close w-sdc-form-section-container -->
-
-    </form>
-
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/general/general.less b/catalog-ui/app/scripts/view-models/workspace/tabs/general/general.less
deleted file mode 100644
index 1861d02e98..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/general/general.less
+++ /dev/null
@@ -1,64 +0,0 @@
-.sdc-workspace-general-step {
-
-    .w-sdc-form {
-        padding: 0;
-
-        .i-sdc-form-file-upload{
-            input[type="button"] {
-                cursor: pointer;
-                display: block;
-                filter: alpha(opacity=0);
-                width: 100px;
-                height: 30px;
-                opacity: 0;
-                position: absolute;
-                right: 0;
-                text-align: right;
-                top: 0;
-            }
-
-            .file-upload-browse-btn {
-                .noselect;
-                .bg_n;
-                padding: 4px 6px;
-                cursor: pointer;
-                z-index: 999;
-                width: 100px;
-                height: 28px;
-                text-align: center;
-
-                &.disabled {
-                    cursor: default;
-                }
-            }
-        }
-
-        .w-sdc-form-section-container {
-            text-align: center;
-        }
-
-        .i-sdc-form-item {
-            &.upload {
-                margin-top: 0;
-                width: auto;
-                padding: 10px;
-            }
-        }
-
-        .template-desc {
-            border: 1px dashed @border_color_f;
-            height: 130px;
-            overflow: hidden;
-            padding: 10px 6px 6px 6px;
-            margin-top: 10px;
-        }
-
-        .sdc-tag .tag {
-            max-width: 225px;
-        }
-
-    }
-
-}
-
-
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view-model.ts
deleted file mode 100644
index a591641d0a..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view-model.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/**
- * Created by obarda on 4/4/2016.
- */
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-
-    export interface IIconsScope extends IWorkspaceViewModelScope {
-        icons : Array<string>;
-        iconSprite: string;
-        setComponentIcon(iconSrc:string): void;
-    }
-
-    export class IconsViewModel {
-
-        static '$inject' = [
-            '$scope',
-            'Sdc.Services.AvailableIconsService',
-            'ComponentFactory',
-            '$state'
-        ];
-
-        constructor(private $scope:IIconsScope,
-                    private availableIconsService:Services.AvailableIconsService,
-                    private ComponentFactory:Sdc.Utils.ComponentFactory,
-                    private $state:ng.ui.IStateService) {
-
-
-            this.initScope();
-            this.initIcons();
-            this.$scope.updateSelectedMenuItem();
-            this.$scope.iconSprite = this.$scope.component.iconSprite;
-
-            if (this.$scope.component.isResource()) {
-                this.initVendor();
-            }
-        }
-
-        private initialIcon:string = this.$scope.component.icon;
-        private initIcons = ():void => {
-
-            // For subcategories that where created by admin, there is no icons
-            this.$scope.icons = new Array<string>();
-            if (this.$scope.component.categories && this.$scope.component.categories.length > 0) {
-
-                _.forEach(this.$scope.component.categories, (category:Models.IMainCategory):void => {
-                    if (category.icons) {
-                        this.$scope.icons = this.$scope.icons.concat(category.icons);
-                    }
-                    if (category.subcategories) {
-                        _.forEach(category.subcategories, (subcategory:Models.ISubCategory):void => {
-                            if (subcategory.icons) {
-                                this.$scope.icons = this.$scope.icons.concat(subcategory.icons);
-                            }
-                        });
-                    }
-                });
-            }
-
-            if (this.$scope.component.isResource()) {
-                let resourceType:string = this.$scope.component.getComponentSubType();
-                if (resourceType === 'VL') {
-                    this.$scope.icons = ['vl'];
-                }
-                if (resourceType === 'CP') {
-                    this.$scope.icons = ['cp'];
-                }
-            }
-
-            if (this.$scope.icons.length === 0) {
-                this.$scope.icons = this.availableIconsService.getIcons(this.$scope.component.componentType);
-            }
-            //we always add the defual icon to the list
-            this.$scope.icons.push('defaulticon');
-        };
-
-        private initVendor = ():void => {
-            let vendors:Array<string> = this.availableIconsService.getIcons(this.$scope.component.componentType).slice(5, 19);
-            let vendorName = this.$scope.component.vendorName.toLowerCase();
-            if ('at&t' === vendorName) {
-                vendorName = 'att';
-            }
-            if ('nokia' === vendorName) {
-                vendorName = 'nokiasiemens';
-            }
-
-            let vendor:string = _.find(vendors, (vendor:string)=> {
-                return vendor.replace(/[_]/g, '').toLowerCase() === vendorName;
-            });
-
-            if (vendor && this.$scope.icons.indexOf(vendor) === -1) {
-                this.$scope.icons.push(vendor);
-            }
-        };
-
-        private initScope():void {
-            this.$scope.icons = [];
-            this.$scope.setValidState(true);
-            //if(this.$scope.component.icon === Utils.Constants.DEFAULT_ICON){
-            //    //this.$scope.setValidState(false);
-            //}
-
-            this.$scope.setComponentIcon = (iconSrc:string):void => {
-                this.$state.current.data.unsavedChanges = !this.$scope.isViewMode() && (iconSrc != this.initialIcon);
-                this.$scope.component.icon = iconSrc;
-                // this.$scope.setValidState(true);
-            };
-
-        }
-
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view.html
deleted file mode 100644
index aac14e0e84..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons-view.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="workspace-icons">
-
-    <form novalidate class="w-sdc-form" name="iconForm">
-        <label class="i-sdc-form-label icons-label required">Icons</label>
-        <div class="selected-icon-container" data-ng-class="{'view-mode': isViewMode()}">
-            <div class="i-sdc-form-item-suggested-icon large selected-icon {{iconSprite}} {{component.icon}}"
-                 data-ng-class="{ 'disable': isViewMode() }"
-                 ng-model="component.icon"
-                 tooltips tooltip-content='{{component.icon | translate}}'
-                >
-            </div>
-        </div>
-        <div data-ng-class="{'view-mode': isViewMode()}" class="icons-text">Select one of the icons below for the asset</div>
-        <div class="i-sdc-form-item suggested-icons-container" data-ng-class="{'view-mode no-pointer-events' : isViewMode()}">
-            <div class ="suggested-icon-wrapper" ng-class="component.icon==='{{iconSrc}}' ? 'selected' : '' "  data-ng-repeat="iconSrc in icons track by $index">
-                <div class="i-sdc-form-item-suggested-icon large {{iconSprite}} {{iconSrc}}" data-ng-class="component.isAlreadyCertified() ||  isViewMode() ? 'disable':'hand'"
-                     ng-model="component.icon"
-                     data-tests-id="{{iconSrc}} iconBox"
-                     data-ng-click="!component.isAlreadyCertified() && setComponentIcon(iconSrc)"
-                     tooltips tooltip-content='{{iconSrc | translate}}'
-                    >
-                </div>
-            </div>
-        </div>
-    </form>
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons.less b/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons.less
deleted file mode 100644
index 65f946f395..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/icons/icons.less
+++ /dev/null
@@ -1,65 +0,0 @@
-.workspace-icons {
-
-    width: 89%;
-    display: inline-block;
-    text-align: center;
-    align-items: center;
-
-    .w-sdc-form {
-        padding-top: 0px;
-        padding-bottom:  0px;
-        .selected-icon-container {
-            text-align: left;
-            border: 1px solid #cfcfcf;
-            clear: both;
-            margin-bottom: 30px;
-            padding: 2px 0px 5px 5px;
-            .selected-icon {
-                margin: 8px 5px 0px 6px;
-            }
-        }
-
-        .suggested-icons-container {
-            text-align: left;
-            border: 1px solid #cfcfcf;
-            clear: both;
-            padding: 2px 0px 5px 5px;
-            height: 340px;
-            margin-bottom: 0px;
-
-            .suggested-icon-wrapper {
-                margin: 8px 5px 0px 6px;
-                display: inline-block;
-
-                &.selected {
-                    border: 2px solid @main_color_a;
-                    border-radius: 35px;
-                    display: inline-block;
-                    line-height: 0px;
-                    padding: 3px;
-                }
-
-            }
-            .suggested-icon {
-                // margin: 8px 5px 0px 6px;
-                display: inline-block;
-                &.disable{
-                    opacity: 0.4;
-                }
-            }
-        }
-
-        .icons-label {
-            float: left;
-        }
-
-        .icons-text {
-            text-align: left;
-            line-height: 32px;
-            padding-left: 10px;
-            width: 100%;
-            border: 1px solid #cfcfcf;
-            border-bottom: none;
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts
deleted file mode 100644
index 3a048c1879..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-    import ArtifactModel = Sdc.Models.ArtifactModel;
-
-    export interface IInformationArtifactsScope extends IWorkspaceViewModelScope {
-        artifacts: Array<Models.ArtifactModel>;
-        tableHeadersList: Array<any>;
-        artifactType: string;
-        isResourceInstance:boolean;
-        downloadFile:Models.IFileDownload;
-        isLoading:boolean;
-        sortBy:string;
-        reverse:boolean;
-
-        getTitle(): string;
-        addOrUpdate(artifact:Models.ArtifactModel): void;
-        delete(artifact:Models.ArtifactModel): void;
-        download(artifact:Models.ArtifactModel): void;
-        clickArtifactName(artifact:any):void;
-        openEditEnvParametersModal(artifactResource:Models.ArtifactModel):void;
-        sort(sortBy:string): void;
-        showNoArtifactMessage():boolean;
-    }
-
-    export class InformationArtifactsViewModel {
-
-        static '$inject' = [
-            '$scope',
-            '$filter',
-            '$modal',
-            '$templateCache',
-            'Sdc.Services.SharingService',
-            '$state',
-            'sdcConfig',
-            'ModalsHandler'
-        ];
-
-        constructor(private $scope:IInformationArtifactsScope,
-                    private $filter:ng.IFilterService,
-                    private $modal:ng.ui.bootstrap.IModalService,
-                    private $templateCache:ng.ITemplateCacheService,
-                    private sharingService:Sdc.Services.SharingService,
-                    private $state:any,
-                    private sdcConfig:Models.IAppConfigurtaion,
-                    private ModalsHandler:Utils.ModalsHandler) {
-            this.initScope();
-            this.$scope.updateSelectedMenuItem();
-        }
-
-
-        private getMappedObjects():any {
-            return {
-                normal: this.$scope.component.artifacts
-            };
-        }
-
-        private initScope = ():void => {
-            let self = this;
-            this.$scope.isLoading = false;
-            this.$scope.sortBy = 'artifactDisplayName';
-            this.$scope.reverse = false;
-            this.$scope.setValidState(true);
-            this.$scope.artifactType = 'normal';
-            this.$scope.getTitle = ():string => {
-                return this.$filter("resourceName")(this.$scope.component.name) + ' Artifacts';
-
-            };
-
-            this.$scope.tableHeadersList = [
-                {title: 'Name', property: 'artifactDisplayName'},
-                {title: 'Type', property: 'artifactType'}
-            ];
-
-            this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.artifacts);
-            this.$scope.sort = (sortBy:string):void => {
-                this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
-                this.$scope.sortBy = sortBy;
-            };
-
-
-            this.$scope.addOrUpdate = (artifact:Models.ArtifactModel):void => {
-                artifact.artifactGroupType = 'INFORMATIONAL';
-                this.ModalsHandler.openWizardArtifactModal(artifact, this.$scope.component).then(() => {
-                    this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.artifacts);
-                });
-            };
-
-            this.$scope.showNoArtifactMessage = ():boolean => {
-                let artifacts:any = [];
-                artifacts = _.filter(this.$scope.artifacts, (artifact:Models.ArtifactModel)=> {
-                    return artifact.esId;
-                });
-
-                if (artifacts.length === 0) {
-                    return true;
-                }
-                return false;
-            };
-
-            this.$scope.delete = (artifact:Models.ArtifactModel):void => {
-
-                let onOk = ():void => {
-                    this.$scope.isLoading = true;
-                    let onSuccess = ():void => {
-                        this.$scope.isLoading = false;
-                        this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.artifacts);
-                    };
-
-                    let onFailed = (error:any):void => {
-                        console.log('Delete artifact returned error:', error);
-                        this.$scope.isLoading = false;
-                    };
-
-                    this.$scope.component.deleteArtifact(artifact.uniqueId, artifact.artifactLabel).then(onSuccess, onFailed);
-                };
-
-                let title:string = this.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TITLE");
-                let message:string = this.$filter('translate')("ARTIFACT_VIEW_DELETE_MODAL_TEXT", "{'name': '" + artifact.artifactDisplayName + "'}");
-                this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
-            };
-
-            this.$scope.clickArtifactName = (artifact:any) => {
-                if (!artifact.esId) {
-                    this.$scope.addOrUpdate(artifact);
-                }
-
-            };
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view.html
deleted file mode 100644
index 790117b2fd..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts-view.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<div class="workspace-information-artifact">
-    <div data-tests-id="add-information-artifact-button"  ng-if="!isViewMode()"
-         data-ng-class="{'disabled': isDisableMode()}"
-         data-tests-id="addGrey" class="add-btn" data-ng-click="addOrUpdate({})" type="button">Add </div>
-    <div class="table-container-flex">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <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)">{{header.title}}
-                    <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
-                </div>
-                <div class="table-no-text-header head-row flex-item"></div>
-            </div>
-            <div class="body">
-                <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                    <div data-ng-if="showNoArtifactMessage()" class="no-row-text" data-ng-class="{'disabled': isDisableMode()}">
-                        There are no information artifacts to display
-                    </div>
-                    <div data-ng-repeat-start="artifact in artifacts| orderBy:sortBy:reverse track by $index" data-tests-id="InformationalArtifactRow"
-                         class="flex-container data-row"
-                         data-ng-class="{'selected': artifact.selected}"
-                         data-ng-if="artifact.esId">
-
-                        <div class="table-col-general flex-item"  data-ng-click="artifact.selected = !artifact.selected">
-                            <span class="sprite table-arrow" data-ng-class="{'opened': artifact.selected}" data-tests-id="{{artifact.artifactDisplayName}}"></span>
-                            {{artifact.artifactDisplayName}}
-                        </div>
-
-                        <div class="table-col-general flex-item"  data-ng-click="artifact.selected = !artifact.selected" data-tests-id="{{artifact.artifactType}}">
-                            {{artifact.artifactType}}
-                        </div>
-
-                        <div class="table-btn-col flex-item">
-                            <button class="table-edit-btn" data-tests-id="edit_{{artifact.artifactDisplayName}}"  data-ng-if="!isViewMode() && !artifact.isThirdParty()"  data-ng-click="addOrUpdate(artifact)" data-ng-class="{'disabled': isDisableMode()}"></button>
-                            <button class="table-delete-btn" data-tests-id="delete_{{artifact.artifactDisplayName}}" data-ng-if="!isViewMode() && !artifact.isThirdParty()"  data-ng-click="delete(artifact)" data-ng-class="{'disabled': isDisableMode()}"> </button>
-                            <button class="table-download-btn" download-artifact  data-tests-id="download_{{artifact.artifactDisplayName}}"
-                                    data-ng-if="artifact.artifactName" component="component" artifact="artifact"></button>
-                        </div>
-                    </div>
-                    <div data-ng-repeat-end="" data-ng-if="artifact.selected" class="item-opened" data-tests-id="{{artifact.artifactDisplayName}}Description" data-ng-bind="artifact.description"></div>
-                    <button class="add-button" data-ng-repeat="artifact in artifacts track by $index"
-                            data-ng-show="!artifact.esId"
-                            data-tests-id="{{artifact.artifactDisplayName}}"
-                            ng-if="!isViewMode()"
-                            data-ng-class="{'disabled': isDisableMode()}"
-                            translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_HEAT"
-                            translate-values="{'name': '{{artifact.artifactDisplayName}}'}"
-                            data-ng-click="addOrUpdate(artifact)"></button>
-                    <button class="add-button"
-                            ng-if="!isViewMode()"
-                            data-ng-class="{'disabled': isDisableMode()}"
-                            translate="DEPLOYMENT_ARTIFACT_BUTTON_ADD_OTHER"
-                            data-ng-click="addOrUpdate({})"></button>
-                </perfect-scrollbar>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts.less b/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts.less
deleted file mode 100644
index d3fe14d945..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/information-artifacts/information-artifacts.less
+++ /dev/null
@@ -1,47 +0,0 @@
-.workspace-information-artifact {
-    width: 93%;
-    display: inline-block;
-    .w-sdc-classic-btn {
-        float: right;
-        margin-bottom: 10px;
-    }
-
-    .table{
-        height: 490px;
-        margin-bottom: 0;
-    }
-
-    .table-container-flex {
-        margin-top: 27px;
-
-        .item-opened{
-            word-wrap: break-word;
-        }
-
-
-        .flex-item:nth-child(1) {
-            flex-grow: 15;
-            .hand;
-            span.table-arrow {
-                margin-right: 7px;
-            }
-        }
-
-        .flex-item:nth-child(2) {
-            flex-grow: 6;
-        }
-
-        .flex-item:nth-child(3) {
-            flex-grow: 3;
-            padding-top: 10px;
-        }
-
-        .flex-item:nth-child(4) {
-            flex-grow: 1;
-        }
-
-    }
-
-}
-
-
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/inputs.less b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/inputs.less
deleted file mode 100644
index 76a82c69ee..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/inputs.less
+++ /dev/null
@@ -1,286 +0,0 @@
-.workspace-inputs {
-
-    .sdc-workspace-container .w-sdc-main-right-container .w-sdc-main-container-body-content {
-        padding: 25px 8% 0px 8%;
-    }
-
-    width: 100%;
-    display: flex;
-
-    .text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        padding-left: 15px;
-    }
-
-    .title-text {
-        color: @main_color_m;
-        .f-type._13_m;
-        .bold;
-    }
-
-    .title-blue-text {
-        color: @main_color_a;
-        .f-type._13_m;
-
-        &.property-name-text {
-            padding-right: 13px;
-            border-right: 1px solid rgba(120, 136, 148, 0.26);
-            flex-grow: 1;
-        }
-    }
-
-    .instance-name-text {
-        flex-grow: 1;
-    }
-
-    ng-include {
-        width: 45%;
-    }
-
-    .w-sdc-inputs-search {
-        padding: 10px 20px 20px 0;
-        white-space: nowrap;
-        position: relative;
-        width: 60%;
-        height: 64px;
-
-        .inputs-search-icon {
-            top: 9px;
-            right: 11px;
-        }
-
-        .magnification-white {
-            .sprite-new;
-            .search-white-icon;
-            .hand;
-        }
-
-        .search-icon-container {
-            width: 35px;
-            height: 30px;
-            background-color: @main_color_a;
-            white-space: nowrap;
-            float: right;
-            position: relative;
-            bottom: 31px;
-            right: 1px;
-            border-radius: 0px 4px 4px 0px;
-            .hand
-        }
-    }
-
-    .total-inputs-count {
-        width: 100%;
-        font-weight: bold;
-        text-align: left;
-    }
-
-    .new-input-button {
-        margin: 9px 0 0 0;
-    }
-
-    .w-sdc-inputs-search-input {
-        border: 1px solid @color_e;
-        .border-radius(4px);
-        height: 32px;
-        margin: 0;
-        padding: 0px 28px 3px 10px;
-        vertical-align: 4px;
-        width: 100%;
-        outline: none;
-        font-style: italic;
-    }
-
-    .w-sdc-classic-btn {
-        float: right;
-        margin-bottom: 10px;
-    }
-
-    .prop-to-input-button {
-        position: absolute;
-        top: 50%;
-        margin-right: -20px;
-        margin-bottom: -10px;
-
-    }
-
-    .property-row {
-        border-bottom: 1px solid @border_color_d;
-        padding-left: 10px;
-        .property-name-container {
-            display: flex;
-            flex-grow: 4;
-        }
-
-        .type-schema-container {
-            flex-grow: 1;
-            border-left: 1px solid @border_color_d;
-            text-align: left;
-            line-height: 30px;
-            text-transform: capitalize;
-            width: 10px;
-        }
-
-    }
-
-    .table-container-flex {
-
-        .flex-item {
-            line-height: 22px;
-        }
-        .expand-collapse-table-row {
-
-            &.expanded {
-                .flex-container {
-                    .expand-collapse-inputs-table-icon {
-                        transform: rotate(180deg);
-                        left: 0px;
-                    }
-                }
-            }
-
-            .data-row {
-                background: @tlv_color_u;
-                .hand;
-                align-items: center;
-                padding: 0 12px;
-                margin: 1px 0px 1px 0px;
-                min-height: 40px;
-            }
-
-            .data-row:hover {
-                .bg_j;
-            }
-
-            .input-row {
-                padding-left: 45px;
-                background: @tlv_color_t;
-                border: @main_color_o solid 1px;
-                align-items: center;
-                .hand;
-                margin: 1px 0px 1px 0px;
-
-                &.service-input-row {
-                    background: @tlv_color_u;
-                    &.new-input {
-                        background: @tlv_color_v;
-                    }
-                }
-                &.selected {
-                    background-color: @tlv_color_v;
-                }
-                .flex-item {
-                    min-height: 60px;
-                    padding: 0 15px;
-                }
-                .input-check-box {
-                    padding-right: 10px;
-                    margin-top: 9px;
-                }
-                &>.title-text{
-                    text-align: start;
-                    padding: 4px 0 0 35px;
-                }
-
-                .expand-collapse-inputs-table-icon{
-                    margin-top: 15px;
-                }
-
-            }
-
-            .input-row:hover {
-                .bg_j;
-            }
-
-
-        }
-    }
-
-    .table {
-        height: 640px;
-        margin-bottom: 0;
-        clear: both;
-
-        .empty-row {
-            padding: 3px;
-        }
-
-        .flex-item {
-            line-height: 22px;
-        }
-
-        .table-header {
-
-            line-height: 14px;
-            background-color: @main_color_a;
-            color: @main_color_p;
-            text-align: left;
-            padding: 7px 5px 7px 10px;
-            .f-type._14_m;
-        }
-        .head {
-            background-color: #e6e6e6;
-        }
-
-        .property-row:hover{
-            background-color: @func_color_r;
-        }
-
-        .body {
-            .scrollbar-container {
-                .perfect-scrollbar;
-                max-height: 610px;
-            }
-
-            .expand-collapse-inputs-table-icon {
-                .hand;
-                .sprite-new;
-                .arrow-up;
-                transition: .3s all;
-                position: relative;
-                left: 8px;
-                border: none !important;
-                padding: 0px 10px 0px 10px;
-            }
-
-            .table-col-text {
-                margin-left: 14px;
-            }
-        }
-    }
-
-    .inputs-header {
-        width: 100%;
-        position: relative;
-        bottom: 31px;
-    }
-
-    .inputs-tables-container {
-        width: 100%;
-        min-width: 100%;
-        display: flex;
-    }
-
-    .inputs-button-container {
-        width: 8%;
-        min-width: 8%;
-        display: flex;
-
-        .right-arrow-btn {
-            .sprite-new;
-            .blue-right-arrow-circle;
-            margin: auto;
-            cursor: pointer;
-        }
-    }
-
-    .table-container-flex {
-        margin-top: 27px;
-        width: 46%;
-        min-width: 46%;
-        display: inline-block;
-        float: left;
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts
deleted file mode 100644
index 2dc1b1d9ff..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-    import Dictionary = Sdc.Utils.Dictionary;
-    import InputModel = Sdc.Models.InputModel;
-
-    export interface IInputsViewModelScope extends IWorkspaceViewModelScope {
-        InstanceInputsProperties:Models.InstanceInputsPropertiesMapData; //this is tha map object that hold the selected inputs and the inputs we already used
-        vfInstancesList: Array<Models.ComponentsInstances.ComponentInstance>;
-        component:Models.Components.Resource;
-
-        onArrowPressed():void;
-        getInputPropertiesForInstance(instanceId:string, instance:Models.ComponentsInstances.ComponentInstance): ng.IPromise<boolean> ;
-        loadInputPropertiesForInstance(instanceId:string, input:Models.InputModel): ng.IPromise<boolean> ;
-        loadInputInputs(input:Models.InputModel): ng.IPromise<boolean>;
-    }
-
-    export class ResourceInputsViewModel {
-
-        static '$inject' = [
-            '$scope',
-            '$q'
-        ];
-
-        constructor(private $scope:IInputsViewModelScope, private $q: ng.IQService) {
-            this.initScope();
-        }
-
-        private initScope = (): void => {
-
-            this.$scope.InstanceInputsProperties = new Models.InstanceInputsPropertiesMapData();
-            this.$scope.vfInstancesList = this.$scope.component.componentInstances;
-
-            // Need to cast all inputs to InputModel for the search to work
-            let tmpInputs:Array<Models.InputModel> = new Array<Models.InputModel>();
-            _.each(this.$scope.component.inputs, (input):void => {
-                tmpInputs.push(new Models.InputModel(input));
-            });
-            this.$scope.component.inputs = tmpInputs;
-            // This function is not supported for resource
-            //this.$scope.component.getComponentInputs();
-
-            /*
-             * When clicking on instance input in the left or right table, this function will load all properties of the selected input
-             */
-            this.$scope.getInputPropertiesForInstance = (instanceId:string, instance:Models.ComponentsInstances.ComponentInstance): ng.IPromise<boolean> => {
-                let deferred = this.$q.defer();
-                instance.properties = this.$scope.component.componentInstancesProperties[instanceId];
-                deferred.resolve(true);
-                return deferred.promise;
-            };
-
-            /*
-             * When clicking on input in the right table, this function will load all inputs of the selected input
-             */
-            this.$scope.loadInputInputs = (input:Models.InputModel): ng.IPromise<boolean> => {
-                let deferred = this.$q.defer();
-
-                let onSuccess = () => { deferred.resolve(true); };
-                let onError = () => { deferred.resolve(false); };
-
-                if(!input.inputs) {
-                    this.$scope.component.getResourceInputInputs(input.uniqueId).then(onSuccess, onError);
-                } else {
-                    deferred.resolve(true);
-                }
-                return deferred.promise;
-            };
-
-            /*
-             * When clicking on instance input in the left or right table, this function will load all properties of the selected input
-             */
-            this.$scope.loadInputPropertiesForInstance = (instanceId:string, input:Models.InputModel): ng.IPromise<boolean> => {
-                let deferred = this.$q.defer();
-
-                let onSuccess = (properties:Array<Models.PropertyModel>) => {
-                    input.properties = properties;
-                    deferred.resolve(true);
-                };
-
-                let onError = () => {
-                    deferred.resolve(false)
-                };
-
-                if(!input.properties) {
-                    this.$scope.component.getComponentInstanceInputProperties(instanceId, input.uniqueId).then(onSuccess, onError);
-                } else {
-                    deferred.resolve(true);
-                }
-                return deferred.promise;
-            };
-
-            /*
-             * When pressing the arrow, we create service inputs from the inputs selected
-             */
-            this.$scope.onArrowPressed = ():void => {
-                let onSuccess = (inputsCreated: Array<Models.InputModel>) => {
-
-                    //disabled  all the inputs in the left table
-                    _.forEach(this.$scope.InstanceInputsProperties, (properties:Array<Models.PropertyModel>) => {
-                        _.forEach(properties, (property:Models.PropertyModel) => {
-                            property.isAlreadySelected = true;
-                        });
-                    });
-
-                    // Adding color to the new inputs (right table)
-                    _.forEach(inputsCreated, (input) => {
-                        input.isNew = true;
-                    });
-
-                    // Removing color to the new inputs (right table)
-                    setTimeout(() => {
-                        _.forEach(inputsCreated, (input) => {
-                            input.isNew = false;
-                        });
-                        this.$scope.$apply();
-                    }, 3000);
-                };
-
-                this.$scope.component.createInputsFormInstances(this.$scope.InstanceInputsProperties).then(onSuccess);
-            };
-
-        }
-
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view.html
deleted file mode 100644
index 7cdf5a2fa4..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view.html
+++ /dev/null
@@ -1,136 +0,0 @@
-<div class="workspace-inputs">
-    <div class="table-container-flex">
-        <div class="w-sdc-inputs-search pull-left hideme">
-            <input type="text" class="w-sdc-inputs-search-input" placeholder="Search"/>
-            <div class="search-icon-container">
-                <span class="w-sdc-search-icon inputs-search-icon magnification-white"></span>
-            </div>
-        </div>
-        <div class="table">
-            <div class="table-header">VFC instances inputs</div>
-            <div class="body">
-                <div class="table-loader" ng-class="{'tlv-loader large loader': isLoading}"></div>
-                <perfect-scrollbar scroll-y-margin-offset="0" class="scrollbar-container">
-
-                    <expand-collapse expanded-selector=".vf-instance-list.{{$index}}"
-                                     class="expand-collapse-table-row"
-                                     load-data-function="getInputPropertiesForInstance(instance.uniqueId, instance)"
-                                     is-close-on-init="true"
-                                     data-ng-repeat-start="instance in vfInstancesList track by $index">
-                        <div class="flex-container data-row">
-                            <div class="expand-collapse-inputs-table-icon"></div>
-                            <div class="table-col-general flex-item text">
-                                <span class="title-text">{{instance.name}}</span>
-                            </div>
-                        </div>
-
-                    </expand-collapse>
-
-                    <div data-ng-repeat-end="" class="vf-instance-list {{$index}}">
-
-                        <div class="empty-row" ng-if="instance.properties.length===0">No properties to display</div>
-
-                        <div ng-repeat="property in instance.properties track by $index">
-                            <div class="property-row flex-container">
-                                <div class="flex-item text property-name-container">
-                                    <span class="title-blue-text property-name-text">{{property.name}}</span>
-                                    <span class="text instance-name-text">{{property.name}}</span>
-                                </div>
-                                <div class="type-schema-container">
-                                    <div class="text">
-                                        <span>{{property.type}}</span>
-                                    </div>
-                                </div>
-                                <div class="type-schema-container">
-                                    <div class="text">
-                                        <span>{{property.schema.property.type}} </span>
-                                    </div>
-                                </div>
-                                <!--<sdc-checkbox
-                                    class="type-schema-container input-check-box"
-                                    disabled ="property.isAlreadySelected"
-                                    sdc-checklist-model="InstanceInputsProperties[instance.uniqueId]"
-                                    sdc-checklist-value="property"
-                                    data-ng-click="$event.stopPropagation()"></sdc-checkbox>-->
-                            </div>
-                        </div>
-
-                    </div>
-
-                </perfect-scrollbar>
-            </div>
-        </div>
-    </div>
-
-    <div class="inputs-button-container pull-left">
-        <!--<div ng-click="onArrowPressed()" class="right-arrow-btn"></div>-->
-    </div>
-
-    <div class="table-container-flex">
-        <div class="w-sdc-inputs-search pull-left">
-            <input type="text" class="w-sdc-inputs-search-input" data-ng-model="search.filterTerm" placeholder="Search" data-ng-model-options="{debounce: 200}"/>
-            <div class="search-icon-container">
-                <span class="w-sdc-search-icon inputs-search-icon magnification-white"></span>
-            </div>
-        </div>
-        <div class="table">
-            <div class="body">
-                <div class="table-header">Resource instance inputs</div>
-                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                    <expand-collapse expanded-selector=".resource-inputs.{{$index}}"
-                                     class="expand-collapse-table-row"
-                                     load-data-function="loadInputPropertiesForInstance(resourceInput.uniqueId, resourceInput)"
-                                     is-close-on-init="true"
-                                     data-ng-repeat-start="resourceInput in component.inputs | filter:search track by $index ">
-                        <div class="input-row service-input-row">
-                            <div class="title-text">{{resourceInput.name}}</div>
-                            <div class="flex-container" ng-class="resourceInput.isNew ? 'new-input': 'service-input-row'">
-                                <div class="expand-collapse-inputs-table-icon"></div>
-                                <div class="flex-item">
-                                    <div>
-                                        <span class="title-text">Description:</span>
-                                        <span>{{resourceInput.description}}</span>
-                                    </div>
-                                </div>
-                                <div class="flex-item ">
-                                    <div class="text">
-                                        <span class="title-text">VF Instance:</span>
-                                        <span>{{resourceInput.name}}</span>
-                                    </div>
-                                    <div class="text">
-                                        <span class="title-text">Type:</span>
-                                        <span>{{resourceInput.type}} </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </expand-collapse>
-
-                    <div data-ng-repeat-end="" class="input-inputs-list resource-inputs {{$index}}">
-                        <div class="empty-row" ng-if="resourceInput.properties.length===0">No properties to display</div>
-                        <div ng-repeat="property in resourceInput.properties track by $index">
-                            <div class="property-row flex-container">
-                                <div class="flex-item text property-name-container">
-                                            <span
-                                                class="title-blue-text property-name-text">{{property.name}}</span>
-                                    <span class="text instance-name-text">{{property.name}}</span>
-                                </div>
-                                <div class="type-schema-container">
-                                    <div class="text">
-                                        <span>{{property.type}}</span>
-                                    </div>
-                                </div>
-                                <div class="type-schema-container">
-                                    <div class="text">
-                                        <span>{{property.schema.property.type}} </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                </perfect-scrollbar>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less
deleted file mode 100644
index ebb32fbdb2..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/resource-input/resource-inputs.less
+++ /dev/null
@@ -1,9 +0,0 @@
-.workspace-inputs {
-
-    .property-row {
-        .input-check-box {
-            text-align: center;
-        }
-    }
-
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts
deleted file mode 100644
index 6c8391720a..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts
+++ /dev/null
@@ -1,246 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-    import IAngularEvent = angular.IAngularEvent;
-    import ComponentInstance = Sdc.Models.ComponentsInstances.ComponentInstance;
-
-
-    interface IServiceInputsViewModelScope extends IWorkspaceViewModelScope {
-
-        vfInstancesList: Array<ComponentInstance>;
-        selectedInputs:Array<Models.InputModel>;
-        instanceInputsMap:Models.InstancesInputsMapData; //this is tha map object that hold the selected inputs and the inputs we already used
-        component:Models.Components.Service;
-        sdcMenu:Models.IAppMenu;
-
-        onArrowPressed():void;
-        loadComponentInputs(): void;
-        loadInstanceInputs(instance:ComponentInstance): ng.IPromise<boolean> ;
-        loadInputPropertiesForInstance(instanceId:string, input:Models.InputModel): ng.IPromise<boolean> ;
-        loadInputInputs(input:Models.InputModel): ng.IPromise<boolean>;
-        deleteInput(input:Models.InputModel):void
-    }
-
-    export class ServiceInputsViewModel {
-
-        static '$inject' = [
-            '$scope',
-            '$q',
-            'ModalsHandler'
-        ];
-
-        constructor(private $scope:IServiceInputsViewModelScope,
-                    private $q: ng.IQService,
-                    private ModalsHandler: Sdc.Utils.ModalsHandler) {
-            this.initScope();
-        }
-
-        /*
-         * When loading the screen again, we need to disabled the inputs that already created on the service,
-         * we do that by comparing the service input name, to the instance name + '_' + the resource instance input name.
-         */
-        private disableEnableSelectedInputs = (instance: ComponentInstance): void => {
-
-            let alreadySelectedInput = new Array<Models.InputModel>();
-            _.forEach(instance.inputs, (input:Models.InputModel) => {
-                let expectedServiceInputName =  instance.normalizedName + '_' + input.name;
-                let inputAlreadyInService: Models.InputModel = _.find(this.$scope.component.inputs, (serviceInput: Models.InputModel) => {
-                    return serviceInput.name === expectedServiceInputName;
-                });
-                if(inputAlreadyInService) {
-                    input.isAlreadySelected = true;
-                    alreadySelectedInput.push(input);
-                } else {
-                    input.isAlreadySelected = false;
-                }
-            });
-            this.$scope.instanceInputsMap[instance.uniqueId] = alreadySelectedInput;
-        };
-
-        private initScope = (): void => {
-
-            this.$scope.instanceInputsMap = new Models.InstancesInputsMapData();
-            this.$scope.isLoading = true;
-            this.$scope.selectedInputs = new Array<Models.InputModel>();
-
-            // Why do we need this? we call this later.
-            //this.$scope.component.getComponentInputs();
-
-            let onSuccess = (componentInstances:Array<ComponentInstance>) => {
-                console.log("component instances loaded: ", componentInstances);
-                this.$scope.vfInstancesList = componentInstances;
-                this.$scope.isLoading = false;
-            };
-
-            //This function will get al component instance for the left table - in future the instances will be filter according to search text
-            this.$scope.component.getComponentInstancesFilteredByInputsAndProperties().then(onSuccess);
-
-            // This function will get the service inputs for the right table
-            this.$scope.component.getComponentInputs();
-
-
-            /*
-             * When clicking on instance in the left table, this function will load all instance inputs
-             */
-            this.$scope.loadInstanceInputs = (instance:ComponentInstance): ng.IPromise<boolean> => {
-                let deferred = this.$q.defer();
-
-                let onSuccess = (inputs:Array<Models.InputModel>) => {
-                    instance.inputs = inputs;
-                    this.disableEnableSelectedInputs(instance);
-                    deferred.resolve(true);
-                };
-
-                let onError = () => {
-                    deferred.resolve(false);
-                };
-
-                if(!instance.inputs) {
-                    this.$scope.component.getComponentInstanceInputs(instance.uniqueId, instance.componentUid).then(onSuccess, onError);
-                    this.disableEnableSelectedInputs(instance);
-                } else {
-                    deferred.resolve(true);
-                }
-                return deferred.promise;
-            };
-
-            /*
-             * When clicking on instance input in the left or right table, this function will load all properties of the selected input
-             */
-            this.$scope.loadInputPropertiesForInstance = (instanceId:string, input:Models.InputModel): ng.IPromise<boolean> => {
-                let deferred = this.$q.defer();
-
-                let onSuccess = (properties:Array<Models.PropertyModel>) => {
-                    input.properties = properties;
-                    deferred.resolve(true);
-                };
-
-                let onError = () => {
-                    deferred.resolve(false)
-                };
-
-                if(!input.properties) {
-                    this.$scope.component.getComponentInstanceInputProperties(instanceId, input.uniqueId).then(onSuccess, onError);
-                } else {
-                    deferred.resolve(true);
-                }
-                return deferred.promise;
-            };
-
-            /*
-             * When clicking on input in the right table, this function will load all inputs of the selected input
-             */
-            this.$scope.loadInputInputs = (input:Models.InputModel): ng.IPromise<boolean> => {
-                let deferred = this.$q.defer();
-
-                let onSuccess = () => { deferred.resolve(true); };
-                let onError = () => { deferred.resolve(false); };
-
-                if(!input.inputs) { // Caching, if exists do not get it.
-                    this.$scope.component.getServiceInputInputs(input.uniqueId).then(onSuccess, onError);
-                } else {
-                    deferred.resolve(true);
-                }
-                return deferred.promise;
-            };
-
-            /*
-             * When pressing the arrow, we create service inputs from the inputs selected
-             */
-            this.$scope.onArrowPressed = ():void => {
-                let onSuccess = (inputsCreated: Array<Models.InputModel>) => {
-
-                    //disabled all the inputs in the left table
-                    _.forEach(this.$scope.instanceInputsMap, (inputs:Array<Models.InputModel>, instanceId:string) => {
-                        _.forEach(inputs, (input:Models.InputModel) => {
-                            input.isAlreadySelected = true;
-                        });
-                    });
-
-                    this.addColorToItems(inputsCreated);
-                };
-
-               this.$scope.component.createInputsFormInstances(this.$scope.instanceInputsMap).then(onSuccess);
-            };
-
-            this.$scope.deleteInput = (input: Models.InputModel):void => {
-
-                var onDelete = ():void => {
-                    var onSuccess = (deletedInput: Models.InputModel, componentInstanceId:string):void => {
-                        // Remove from component.inputs the deleted input (service inputs)
-                        var remainingServiceInputs:Array<Models.InputModel> = _.filter(this.$scope.component.inputs, (input:Models.InputModel):boolean => {
-                            return input.uniqueId !== deletedInput.uniqueId;
-                        });
-                        this.$scope.component.inputs = remainingServiceInputs;
-
-                        // Find the instance that contains the deleted input, and set disable|enable the deleted input
-                        var deletedInputComponentInstance:ComponentInstance = _.find(this.$scope.vfInstancesList, (instanceWithChildToDelete:ComponentInstance):boolean => {
-                            return instanceWithChildToDelete.uniqueId === componentInstanceId;
-                        });
-                        this.disableEnableSelectedInputs(deletedInputComponentInstance);
-                    };
-
-                    var onFailed = (error:any) : void => {
-                        console.log("Error deleting input");
-                    };
-
-                    this.addColorToItems([input]);
-
-                    // Get service inputs of input (so after delete we will know the component instance)
-                    this.$scope.loadInputInputs(input).then((result:boolean):void=>{
-                        if (result && input.inputs.length>0) {
-                            var componentInstanceId:string = input.inputs[0].componentInstanceId;
-                            this.$scope.component.deleteServiceInput(input.uniqueId).then((deletedInput: Models.InputModel):void => {
-                                onSuccess(deletedInput, componentInstanceId);
-                            }, onFailed);
-                        }
-                    });
-                };
-
-                // Get confirmation modal text from menu.json
-                var state = "deleteInput";
-                var title:string = this.$scope.sdcMenu.alertMessages[state].title;
-                var message:string = this.$scope.sdcMenu.alertMessages[state].message.format([input.name]);
-
-                // Open confirmation modal
-                this.ModalsHandler.openAlertModal(title, message).then(onDelete);
-            }
-        };
-
-        private addColorToItems = (inputsCreated:Array<Models.InputModel>):void => {
-
-            // Adding color to the new inputs (right table)
-            _.forEach(inputsCreated, (input) => {
-                input.isNew = true;
-            });
-
-            // Removing color to the new inputs (right table)
-            setTimeout(() => {
-                _.forEach(inputsCreated, (input) => {
-                    input.isNew = false;
-                });
-                this.$scope.$apply();
-            }, 3000);
-        };
-
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view.html
deleted file mode 100644
index bf15a70322..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs-view.html
+++ /dev/null
@@ -1,205 +0,0 @@
-<div class="workspace-inputs">
-    <div class="table-container-flex">
-        <div class="w-sdc-inputs-search pull-left hideme">
-            <input type="text" class="w-sdc-inputs-search-input" placeholder="Search"/>
-            <div class="search-icon-container">
-                <span class="w-sdc-search-icon inputs-search-icon magnification-white"></span>
-            </div>
-        </div>
-        <div class="table">
-            <div class="table-header">Resource instance inputs</div>
-            <div class="body">
-                <div class="table-loader" ng-class="{'tlv-loader large loader': isLoading}"></div>
-                <perfect-scrollbar scroll-y-margin-offset="0" class="scrollbar-container">
-
-                    <expand-collapse expanded-selector=".vf-instance-list.{{$index}}"
-                                     class="expand-collapse-table-row"
-                                     load-data-function="loadInstanceInputs(instance)"
-                                     is-close-on-init="true"
-                                     data-ng-repeat-start="instance in vfInstancesList track by $index">
-                        <div class="flex-container data-row">
-                            <div class="expand-collapse-inputs-table-icon"></div>
-                            <div class="table-col-general flex-item text" data-tests-id="inputs-vf-instance-{{$index}}">
-                                <span class="title-text">{{instance.name}}</span>
-                            </div>
-                        </div>
-
-                    </expand-collapse>
-
-                    <div data-ng-repeat-end="" class="vf-instance-list {{$index}}">
-
-                        <expand-collapse expanded-selector=".input-list.{{$parent.$index}}-{{$index}}"
-                                         class="expand-collapse-table-row"
-                                         load-data-function="loadInputPropertiesForInstance(instance.uniqueId, input)"
-                                         is-close-on-init="true"
-                                         data-ng-repeat-start="input in instance.inputs track by $index">
-                            <div class="input-row" ng-class="{'selected': selectedInput.uniqueId === input.uniqueId}">
-                                <div class="title-text">{{input.name}}</div>
-                                <div class="flex-container">
-                                    <div class="expand-collapse-inputs-table-icon"></div>
-                                    <div class="flex-item">
-
-                                        <div>
-                                            <span class="title-text">Description:</span>
-                                            <span tooltips tooltip-content="{{input.description}}">{{input.description}}</span>
-                                        </div>
-                                    </div>
-                                    <div class="flex-item ">
-                                        <div class="text">
-                                            <span class="title-text">VF Instance:</span>
-                                            <span tooltips tooltip-content="{{instance.name}}">{{instance.name}}</span>
-                                        </div>
-                                        <div class="text">
-                                            <span class="title-text">Type:</span>
-                                            <span tooltips tooltip-content="{{input.type}}">{{input.type}} </span>
-                                        </div>
-                                    </div>
-                                    <sdc-checkbox
-                                        class="input-check-box"
-                                        disabled ="input.isAlreadySelected || isViewMode()"
-                                        sdc-checklist-model="instanceInputsMap[instance.uniqueId]"
-                                        sdc-checklist-value="input"
-                                        data-tests-id="inputs-checkbox-{{$index}}"
-                                        data-ng-click=" $event.stopPropagation()"></sdc-checkbox>
-                                </div>
-                            </div>
-
-
-                        </expand-collapse>
-
-                        <div data-ng-repeat-end="" class="input-list {{$parent.$index}}-{{$index}}">
-                            <div class="empty-row" ng-if="input.properties.length===0">No properties to display</div>
-
-                            <div ng-repeat="property in input.properties track by $index">
-                                <div class="property-row flex-container">
-                                    <div class="flex-item text property-name-container">
-                                        <span class="title-blue-text property-name-text" tooltips tooltip-content="{{property.name}}">{{property.name}}</span>
-                                        <span class="text instance-name-text" tooltips tooltip-content="{{property.name}}">{{property.name}}</span>
-                                    </div>
-                                    <div class="type-schema-container">
-                                        <div class="text">
-                                            <span tooltips tooltip-content="{{property.type}}">{{property.type}}</span>
-                                        </div>
-                                    </div>
-                                    <div class="type-schema-container">
-                                        <div class="text">
-                                            <span tooltips tooltip-content="{{property.schema.property.type}}">{{property.schema.property.type}} </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </perfect-scrollbar>
-            </div>
-        </div>
-    </div>
-
-    <div class="inputs-button-container pull-left">
-        <div ng-click="onArrowPressed()" class="right-arrow-btn" data-tests-id="add-inputs-to-service-button"></div>
-    </div>
-
-    <div class="table-container-flex">
-        <div class="w-sdc-inputs-search pull-left">
-            <input type="text" class="w-sdc-inputs-search-input" data-ng-model="search.filterTerm" placeholder="Search" data-ng-model-options="{debounce: 200}"/>
-            <div class="search-icon-container">
-                <span class="w-sdc-search-icon inputs-search-icon magnification-white"></span>
-            </div>
-        </div>
-        <div class="table">
-            <div class="body">
-                <div class="table-header">Service Inputs</div>
-                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                    <expand-collapse expanded-selector=".service-inputs.{{$index}}"
-                                     class="expand-collapse-table-row"
-                                     load-data-function="loadInputInputs(serviceInput)"
-                                     is-close-on-init="true"
-                                     data-ng-repeat-start="serviceInput in component.inputs | filter:search track by $index ">
-                        <div class="input-row service-input-row " data-tests-id="service-input-{{$index}}" ng-class="serviceInput.isNew ? 'new-input': ''">
-                            <div class="title-text">{{serviceInput.name}}</div>
-                            <div class="flex-container">
-                                <div class="expand-collapse-inputs-table-icon"></div>
-                                <div class="flex-item">
-                                    <div>
-                                        <span class="title-text">Description:</span>
-                                        <span tooltips tooltip-content="{{serviceInput.description}}">{{serviceInput.description}}</span>
-                                    </div>
-                                </div>
-                                <div class="flex-item ">
-                                    <div class="text">
-                                        <span class="title-text">VF Instance:</span>
-                                        <span tooltips tooltip-content="{{serviceInput.name}}">{{serviceInput.name}}</span>
-                                    </div>
-                                    <div class="text">
-                                        <span class="title-text">Type:</span>
-                                        <span tooltips tooltip-content="{{serviceInput.type}}">{{serviceInput.type}} </span>
-                                    </div>
-                                </div>
-                                <div class="delete">
-                                    <span class="sprite-new delete-icon remove-input-icon"
-                                          data-ng-class="{'disabled': isViewMode()}"
-                                          data-ng-click="deleteInput(serviceInput); $event.stopPropagation();"
-                                          data-tests-id="delete-input-{{$index}}"></span>
-                                </div>
-                            </div>
-                        </div>
-                    </expand-collapse>
-
-                    <div data-ng-repeat-end="" class="service-inputs {{$index}}">
-                        <expand-collapse expanded-selector=".input-inputs-list.{{$parent.$index}}-{{$index}}"
-                                         class="expand-collapse-table-row"
-                                         load-data-function="loadInputPropertiesForInstance(input.componentInstanceId, input)"
-                                         is-close-on-init="true"
-                                         data-ng-repeat-start="input in serviceInput.inputs track by $index">
-                            <div class="input-row">
-                                <div class="title-text">{{input.name}}</div>
-                                <div class="flex-container">
-                                    <div class="expand-collapse-inputs-table-icon"></div>
-                                    <div class="flex-item">
-                                        <div>
-                                            <span class="title-text">Description:</span>
-                                            <span tooltips tooltip-content="{{input.description}}">{{input.description}}</span>
-                                        </div>
-                                    </div>
-                                    <div class="flex-item ">
-                                        <div class="text">
-                                            <span class="title-text">VF Instance:</span>
-                                            <span tooltips tooltip-content="{{instance.componentInstanceName}}">{{instance.componentInstanceName}}</span>
-                                        </div>
-                                        <div class="text">
-                                            <span class="title-text">Type:</span>
-                                            <span tooltips tooltip-content="{{input.type}}">{{input.type}} </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </expand-collapse>
-
-                        <div data-ng-repeat-end="" class="input-inputs-list {{$parent.$index}}-{{$index}}">
-                            <div class="empty-row" ng-if="input.properties.length===0">No properties to display</div>
-                            <div ng-repeat="property in input.properties track by $index">
-                                <div class="property-row flex-container">
-                                    <div class="flex-item text property-name-container">
-                                                <span
-                                                    class="title-blue-text property-name-text" tooltips tooltips-content="{{property.name}}">{{property.name}}</span>
-                                        <span class="text instance-name-text" tooltips tooltips-content="{{property.name}}">{{property.name}}</span>
-                                    </div>
-                                    <div class="type-schema-container">
-                                        <div class="text">
-                                            <span tooltips tooltips-content="{{property.type}}">{{property.type}}</span>
-                                        </div>
-                                    </div>
-                                    <div class="type-schema-container">
-                                        <div class="text">
-                                            <span tooltips tooltips-content="{{property.schema.property.type}}">{{property.schema.property.type}} </span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </perfect-scrollbar>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs.less b/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs.less
deleted file mode 100644
index 11e613b56e..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/inputs/service-input/service-inputs.less
+++ /dev/null
@@ -1,54 +0,0 @@
-.workspace-inputs {
-
-    .service-inputs-view {
-
-        .table-container-flex {
-            width:100% !important;
-        }
-
-        .table-loader {
-            position: relative;
-            top:215px;
-        }
-
-    }
-
-    .infinite-scroll {
-
-        overflow-y: scroll;
-        overflow-x: hidden;
-        max-height: 400px;
-    }
-
-    .class_with_css_props_leading_to_a_scroll {
-        height: 100%;
-        overflow-y: auto;
-    }
-
-    .table-container-flex {
-        .expand-collapse-table-row {
-            .service-input-row {
-                padding-left: 15px;
-                border: none;
-                border-bottom: rgba(120, 136, 148, 0.26) solid 1px;
-
-               .delete {
-                    width: 50px;
-                    padding: 0;
-                    position: relative;
-                }
-
-                .remove-input-icon {
-                    position: absolute;
-                    top: 12px;
-                    right: 18px;
-                }
-
-                .remove-input-icon:hover {
-                    .delete-icon-hover;
-                }
-            }
-        }
-    }
-
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts
deleted file mode 100644
index 2fab118378..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-
-    export interface IManagementWorkflowViewModelScope extends IWorkspaceViewModelScope {
-        vendorModel:VendorModel;
-    }
-
-    export class VendorModel {
-        artifacts: Models.ArtifactGroupModel;
-        serviceID: string;
-        readonly: boolean;
-        sessionID: string;
-        requestID: string;
-        diagramType: string;
-        participants:Array<participant>;
-
-        constructor(artifacts: Models.ArtifactGroupModel, serviceID:string, readonly:boolean, sessionID:string,
-                    requestID:string, diagramType:string, participants:Array<participant>){
-            this.artifacts = artifacts;
-            this.serviceID = serviceID;
-            this.readonly = readonly;
-            this.sessionID = sessionID;
-            this.requestID = requestID;
-            this.diagramType = diagramType;
-            this.participants = participants;
-        }
-    }
-
-    export class ManagementWorkflowViewModel {
-
-        static '$inject' = [
-            '$scope',
-            'uuid4'
-        ];
-
-        constructor(private $scope:IManagementWorkflowViewModelScope,
-                    private uuid4:any) {
-
-            this.initScope();
-            this.$scope.updateSelectedMenuItem();
-        }
-
-
-        private static getParticipants():Array<participant> {
-            return [
-                {
-                    "id": "1",
-                    "name": "Customer"},
-                {
-                    "id": "2",
-                    "name": "CCD"
-                },
-                {
-                    "id": "3",
-                    "name": "Infrastructure"
-                },
-                {
-                    "id": "4",
-                    "name": "MSO"
-                },
-                {
-                    "id": "5",
-                    "name": "SDN-C"
-                },
-                {
-                    "id": "6",
-                    "name": "A&AI"
-                },
-                {
-                    "id": "7",
-                    "name": "APP-C"
-                },
-                {
-                    "id": "8",
-                    "name": "Cloud"
-                },
-                {
-                    "id": "9",
-                    "name": "DCAE"
-                },
-                {
-                    "id": "10",
-                    "name": "ALTS"
-                },
-                {
-                    "id": "11",
-                    "name": "VF"
-                }
-            ]
-        }
-
-
-        private initScope():void {
-            this.$scope.vendorModel = new VendorModel(
-                this.$scope.component.artifacts.filteredByType(Utils.Constants.ArtifactType.THIRD_PARTY_RESERVED_TYPES.WORKFLOW),
-                this.$scope.component.uniqueId,
-                this.$scope.isViewMode(),
-                this.$scope.user.userId,
-                this.uuid4.generate(),
-                Utils.Constants.ArtifactType.THIRD_PARTY_RESERVED_TYPES.WORKFLOW,
-                ManagementWorkflowViewModel.getParticipants()
-            );
-
-            this.$scope.thirdParty = true;
-            this.$scope.setValidState(true);
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view.html
deleted file mode 100644
index bd196daec8..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/management-workflow/management-workflow-view.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="workspace-management-workflow">
-    <punch-out name="'sequence-diagram'" data="vendorModel"  user="user" on-event="onVendorEvent"></punch-out>
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts
deleted file mode 100644
index 064f1c5896..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-
-    export interface INetworkCallFlowViewModelScope extends IWorkspaceViewModelScope {
-        vendorMessageModel:VendorModel;
-    }
-
-    export class participant {
-        name:string;
-        id:string;
-
-        constructor(instance:Models.ComponentsInstances.ComponentInstance){
-            this.name = instance.name;
-            this.id = instance.uniqueId;
-        }
-    }
-
-
-    export class NetworkCallFlowViewModel {
-
-        static '$inject' = [
-            '$scope',
-             'uuid4'
-        ];
-
-        constructor(private $scope:INetworkCallFlowViewModelScope,
-                    private uuid4:any) {
-
-            this.initScope();
-            this.$scope.updateSelectedMenuItem();
-        }
-
-        private getVFParticipantsFromInstances(instances:Array<Models.ComponentsInstances.ComponentInstance>):Array<participant> {
-            let participants = [];
-            _.forEach(instances,(instance)=> {
-                if(Utils.Constants.ResourceType.VF == instance.originType){
-                    participants.push(new participant(instance));
-                }
-            });
-            return participants;
-        }
-
-
-        private initScope():void {
-            this.$scope.vendorMessageModel = new VendorModel(
-                this.$scope.component.artifacts.filteredByType(Utils.Constants.ArtifactType.THIRD_PARTY_RESERVED_TYPES.NETWORK_CALL_FLOW),
-                this.$scope.component.uniqueId,
-                this.$scope.isViewMode(),
-                this.$scope.user.userId,
-                this.uuid4.generate(),
-                Utils.Constants.ArtifactType.THIRD_PARTY_RESERVED_TYPES.NETWORK_CALL_FLOW,
-                this.getVFParticipantsFromInstances(this.$scope.component.componentInstances)
-            );
-
-            this.$scope.thirdParty = true;
-            this.$scope.setValidState(true);
-        }
-
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html
deleted file mode 100644
index 6ce3e8e2b7..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="workspace-network-call-flow">
-    <punch-out name="'sequence-diagram'" data="vendorMessageModel"  user="user" on-event="onVendorEvent"></punch-out>
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts
deleted file mode 100644
index faf77a5215..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view-model.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/**
- * Created by obarda on 4/7/2016.
- */
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-
-    export interface IProductHierarchyScope extends IWorkspaceViewModelScope {
-
-        categoriesOptions: Array<Models.IMainCategory>;
-        product:Models.Components.Product;
-        isLoading:boolean;
-        showDropDown:boolean;
-
-        onInputTextClicked():void;
-        onGroupSelected(category: Models.IMainCategory, subcategory: Models.ISubCategory, group: Models.IGroup):void;
-        clickOutside():void;
-        deleteGroup(uniqueId:string):void;
-    }
-
-    export class ProductHierarchyViewModel {
-
-        static '$inject' = [
-            '$scope',
-            'Sdc.Services.CacheService',
-            'ComponentFactory',
-            '$state'
-        ];
-
-        constructor(private $scope:IProductHierarchyScope,
-                    private cacheService:Sdc.Services.CacheService,
-                    private ComponentFactory: Sdc.Utils.ComponentFactory,
-                    private $state:ng.ui.IStateService) {
-
-
-            this.$scope.product = <Models.Components.Product>this.$scope.getComponent();
-            this.$scope.setValidState(true);
-            this.initScope();
-            this.$scope.updateSelectedMenuItem();
-        }
-
-        private initCategories = () => {
-            this.$scope.categoriesOptions = angular.copy(this.cacheService.get('productCategories'));
-            let selectedGroup:Array<Models.IGroup>  = [];
-            _.forEach(this.$scope.product.categories, (category: Models.IMainCategory) => {
-                _.forEach(category.subcategories, (subcategory:Models.ISubCategory) => {
-                    selectedGroup = selectedGroup.concat(subcategory.groupings);
-                });
-            });
-            _.forEach(this.$scope.categoriesOptions, (category: Models.IMainCategory) => {
-                _.forEach(category.subcategories, (subcategory:Models.ISubCategory) => {
-                    _.forEach(subcategory.groupings, (group:Models.ISubCategory) => {
-                        let componentGroup:Models.IGroup = _.find(selectedGroup, (componentGroupObj) => {
-                            return componentGroupObj.uniqueId == group.uniqueId;
-                        });
-                        if(componentGroup){
-                            group.isDisabled = true;
-                        }
-                    });
-                });
-            });
-        };
-
-        private setFormValidation = ():void => {
-            //if(!this.$scope.product.categories || this.$scope.product.categories.length === 0){
-            //    this.$scope.setValidState(false);
-            //}
-            //else{
-                this.$scope.setValidState(true);
-           // }
-
-        };
-
-        private initScope = ():void => {
-            this.$scope.isLoading= false;
-            this.$scope.showDropDown =false;
-            this.initCategories();
-            this.setFormValidation();
-
-            this.$scope.onGroupSelected = (category: Models.IMainCategory, subcategory: Models.ISubCategory, group: Models.IGroup):void => {
-                this.$scope.product.addGroup(category, subcategory, group);
-                this.$state.current.data.unsavedChanges = !this.$scope.isViewMode();
-                group.isDisabled = true;
-                this.$scope.showDropDown = false;
-                this.setFormValidation();
-            };
-
-            this.$scope.onInputTextClicked = ():void => {//just edit the component in place, no pop up nor server update ?
-                this.$scope.showDropDown = !this.$scope.showDropDown;
-            };
-
-            this.$scope.clickOutside = (): any => {
-                this.$scope.showDropDown = false;
-            };
-
-            this.$scope.deleteGroup = (uniqueId:string) : void => {
-                //delete group from component
-                this.$scope.product.deleteGroup(uniqueId);
-                this.$state.current.data.unsavedChanges = !this.$scope.isViewMode();
-                this.setFormValidation();
-                //enabled group
-                _.forEach(this.$scope.categoriesOptions, (category: Models.IMainCategory) => {
-                    _.forEach(category.subcategories, (subcategory:Models.ISubCategory) => {
-                        let groupObj:Models.IGroup = _.find (subcategory.groupings, (group) => {
-                            return group.uniqueId === uniqueId;
-                        });
-                        if(groupObj){
-                            groupObj.isDisabled = false;
-                        }
-                    });
-                });
-            }
-        };
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html
deleted file mode 100644
index 2335ad7c74..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy-view.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<div class="workspace-hierarchy">
-    <div class="dropdown-container"  clicked-outside="{onClickedOutside: 'clickOutside()', clickedOutsideEnable: 'true'}" >
-        <input placeholder="Add Group" data-ng-click="onInputTextClicked()" class="dropdown-input-text"  data-ng-model="search.filterTerms" data-ng-disabled="isViewMode()"  data-ng-class="{'view-mode': isViewMode()}" data-ng-model-options="{debounce: 200}"/>
-        <div data-ng-class="{'show': showDropDown}" class="dropdown-content" >
-            <perfect-scrollbar scroll-y-margin-offset="0" include-padding="false" class="scrollbar-container">
-                <div ng-repeat="category in categoriesOptions track by $index">
-                    <div ng-repeat="subcategory in category.subcategories track by $index">
-                        <div class="dropdown-option" ng-show="!category.filteredGroup || category.filteredGroup.length > 0">
-                            <div class="category-container">
-                                <div class="category">{{category.name}}</div>
-                                <div class="subcategory">{{subcategory.name}}</div>
-                            </div>
-                            <div class="groupings-container">
-                                <div ng-init="group.filterTerms = group.name + ' ' + category.name + ' ' + subcategory.name"
-                                     ng-repeat="group in (category.filteredGroup = (subcategory.groupings  | filter:search )) track by $index">
-                                    <div class="group" data-ng-disabled="group.isDisabled" data-ng-class="{'disabled-group': group.isDisabled}" ng-click="onGroupSelected(category, subcategory, group)">
-                                        <span >{{group.name}}</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </perfect-scrollbar>
-        </div>
-    </div>
-    <div class="hierarchy-groups-container no-border-top" data-ng-class="{'view-mode': isViewMode()}">
-        <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-            <div ng-if="!product.categories.length ||  product.categories.length === 0" class="no-groups-text" translate="NEW_PRODUCT_NO_CATEGORIES_TO_DISPLAY"></div>
-            <div ng-repeat="category in product.categories track by $index">
-                <div ng-repeat="subcategory in category.subcategories track by $index">
-                    <div class="group-tag" ng-repeat="group in subcategory.groupings track by $index"
-                         data-ng-init="tooltip = '<b>' + category.name + '</b><br />' + subcategory.name">
-                        <sdc-tag sdc-disable="isViewMode()" data-on-delete="deleteGroup(uniqueId)" data-tag-data="{tag: group.name, tooltip: tooltip, id: group.uniqueId }"></sdc-tag>
-                    </div>
-                </div>
-            </div>
-        </perfect-scrollbar>
-    </div>
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less b/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less
deleted file mode 100644
index c992558ed2..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/product-hierarchy/product-hierarchy.less
+++ /dev/null
@@ -1,130 +0,0 @@
-.workspace-hierarchy {
-    display: inline-block;
-    width: 93%;
-
-    .scrollbar-container{
-        max-height:400px;
-        .perfect-scrollbar;
-    }
-
-    .dropdown-container {
-        position: relative;
-        display: inline-block;
-        width: 100%;
-
-        &:after{
-            top: 47%;
-            right: 1%;
-            border: solid transparent;
-            content: " ";
-            height: 0;
-            width: 0;
-            position: absolute;
-            pointer-events: none;
-            border-color: rgba(0, 0, 0, 0);
-            border-top-color: black;
-            border-width: 4px;
-            margin-left: -4px;
-        }
-
-        .dropdown-input-text {
-            width: 100%;
-            padding: 4px 10px;
-        }
-
-        .dropdown-content {
-            .perfect-scrollbar;
-            border: 1px solid #d8d8d8;
-            display: none;
-            position: absolute;
-            overflow: hidden;
-            width: 100%;
-            .bg_c;
-            max-height: 400px;
-            z-index: 999999;
-
-            .dropdown-option {
-                border-bottom: 1px solid #d8d8d8;
-                display: inline-block;
-                width: 100%;
-            }
-
-            .category-container{
-                width: 250px;
-                float: left;
-                padding-left: 5px;
-
-                .category {
-                    .bold;
-                    padding: 3px 3px 2px 3px;
-                    &:after{
-                        .sprite;
-                        .arrow-left;
-                        content: '';
-                        margin-left: 5px;
-                        transform: rotate(180deg);
-                    }
-                }
-                .subcategory {
-                    padding-left: 3px;
-                }
-            }
-
-            .groupings-container{
-                display: inline-block;
-                width: 424px;
-                border-left: 1px solid #d8d8d8;
-                min-height: 55px;
-                .group{
-                    padding: 3px 3px 3px 10px;
-                    &:hover{
-                        .hand;
-                        .bg_n;
-                    }
-                    &.disabled-group {
-                        opacity: 0.5;
-                        &:hover{
-                            cursor: auto;
-                            .bg_c;
-                        }
-                    }
-                }
-            }
-
-            .seperator {
-                height: 1px;
-                width: 100%;
-                .bg_j;
-                margin: 5px 0px;
-            }
-        }
-        .show {
-            display: block;
-        }
-    }
-
-    .hierarchy-groups-container{
-        .b_9;
-        width: 100%;
-        border: 1px solid #d8d8d8;
-        height: 425px;
-        padding: 15px;
-        text-align: center;
-
-        .scrollbar-container {
-            z-index: 0;
-        }
-
-        .no-group-text{
-            text-align: center;
-            margin-top:25px;
-            a {
-                cursor: pointer;
-            }
-        }
-        .group-tag{
-            display: inline-block;
-            float: left;
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view-model.ts
deleted file mode 100644
index 9b824bfca9..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view-model.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-
-    interface IPropertiesViewModelScope extends IWorkspaceViewModelScope {
-        tableHeadersList: Array<any>;
-        reverse: boolean;
-        sortBy:string;
-        filteredProperties:any;
-
-        addOrUpdateProperty(property?:Models.PropertyModel): void;
-        delete(property:Models.PropertyModel): void;
-        sort(sortBy:string): void;
-    }
-
-    export class PropertiesViewModel {
-
-        static '$inject' = [
-            '$scope',
-            '$filter',
-            '$modal',
-            '$templateCache',
-            'ModalsHandler'
-        ];
-
-
-        constructor(private $scope:IPropertiesViewModelScope,
-                    private $filter:ng.IFilterService,
-                    private $modal:ng.ui.bootstrap.IModalService,
-                    private $templateCache:ng.ITemplateCacheService,
-                    private ModalsHandler:Utils.ModalsHandler) {
-            this.initScope();
-            this.$scope.updateSelectedMenuItem();
-        }
-
-
-        private openEditPropertyModal = (property:Models.PropertyModel):void => {
-            let viewModelsHtmlBasePath:string = '/app/scripts/view-models/';
-
-            let modalOptions:ng.ui.bootstrap.IModalSettings = {
-                template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/property-form/property-form-view.html'),
-                controller: 'Sdc.ViewModels.PropertyFormViewModel',
-                size: 'sdc-l',
-                backdrop: 'static',
-                keyboard: false,
-                resolve: {
-                    property: ():Models.PropertyModel => {
-                        return property;
-                    },
-                    component: ():Models.Components.Component => {
-                        return <Models.Components.Component> this.$scope.component;
-                    },
-                    filteredProperties: ():Array<Models.PropertyModel> => {
-                        return this.$scope.filteredProperties.properties;
-                    }
-                }
-            };
-            this.$modal.open(modalOptions);
-        };
-
-        private initScope = ():void => {
-
-            //let self = this;
-            this.$scope.filteredProperties={properties:[]};
-            this.$scope.sortBy = 'name';
-            this.$scope.reverse = false;
-            this.$scope.setValidState(true);
-            this.$scope.tableHeadersList = [
-                {title: 'Name', property: 'name'},
-                {title: 'Type', property: 'type'},
-                {title: 'Schema', property: 'schema.property.type'},
-                {title: 'Description', property: 'description'},
-            ];
-            this.$scope.sort = (sortBy:string):void => {
-                this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
-                this.$scope.sortBy = sortBy;
-            };
-
-
-            this.$scope.addOrUpdateProperty = (property?:Models.PropertyModel):void => {
-                this.openEditPropertyModal(property ? property : new Models.PropertyModel());
-            };
-
-            this.$scope.delete = (property:Models.PropertyModel):void => {
-
-                let onOk = ():void => {
-                    this.$scope.component.deleteProperty(property.uniqueId);
-                };
-                let title:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TITLE");
-                let message:string = this.$filter('translate')("PROPERTY_VIEW_DELETE_MODAL_TEXT", "{'name': '" + property.name + "'}");
-                this.ModalsHandler.openConfirmationModal(title, message, false).then(onOk);
-            };
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view.html
deleted file mode 100644
index e9a4c3879d..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties-view.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<div class="workspace-properties">
-    <div id="left-top-bar">
-        <span id="properties-count">Total Properties: {{component.properties.length}}</span>
-        <input id="search-by-name" type="search" placeholder="Search"  data-ng-model-options="{debounce: 200}" data-ng-model="filterTerms"/>
-        <span class="sprite magnification-glass search-button"></span>
-    </div>
-    <div class="add-btn" data-tests-id="addGrey" ng-if="!isViewMode()"
-         data-ng-class="{'disabled': isDisableMode()}" data-ng-click="addOrUpdateProperty()">Add Property</div>
-    <div class="table-container-flex">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <div class="head flex-container">
-                <div class="table-header head-row hand flex-item" data-ng-repeat="header in tableHeadersList track by $index" data-ng-click="sort(header.property)">{{header.title}}
-                    <span data-ng-if="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
-                </div>
-                <div class="table-no-text-header head-row flex-item" ng-if="!isViewMode()"><span class="delete-col-header"></span></div>
-                <!--div class="table-no-text-header head-row flex-item"></div-->
-            </div>
-
-            <div class="body">
-                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                    <div data-ng-if="component.properties.length === 0" class="no-row-text"  data-ng-class="{'disabled': isDisableMode()}">
-                        There are no properties to display <br>
-                        <span ng-if="!isViewMode()"> click <a data-ng-click="addOrUpdateProperty()">here</a> to add one </span>
-
-                    </div>
-                    <div data-ng-repeat="property in filteredProperties.properties=(component.properties | orderBy:sortBy:reverse | filter: {filterTerm:filterTerms}) track by $index"
-                         data-tests-id="propertyRow" data-ng-class="{'selected': property.selected}"
-                         class="flex-container data-row">
-
-                        <div class="table-col-general flex-item text">
-                            <a  data-tests-id="{{property.name}}"
-                                   tooltips tooltip-content="{{property.name}}"
-                                   data-ng-click="addOrUpdateProperty(property); $event.stopPropagation();"
-                                   data-ng-class="{'disabled': isViewMode()}">{{property.name}}</a>
-
-                        </div>
-
-                        <div class="table-col-general flex-item text"
-                             data-tests-id="{{property.type}}"
-                             tooltips tooltip-content="{{property.type}}"
-                             data-ng-bind="property.type">
-                        </div>
-                        <div class="table-col-general flex-item text"
-                             data-tests-id="{{property.schema.property.type}}"
-                             tooltips tooltip-content="{{property.schema.property.type}}"
-                             data-ng-bind="property.schema.property.type">
-                        </div>
-                        <div class="table-col-general flex-item text">
-                            <span tooltips tooltip-content="{{property.description}}" data-tests-id="{{property.description}}" data-ng-bind="property.description"></span>
-                        </div>
-                        <div class="table-btn-col flex-item" ng-if="!isViewMode()">
-                            <button class="table-delete-btn" data-tests-id="delete_{{property.name}}"  data-ng-if="property.parentUniqueId==component.uniqueId"
-                                    data-ng-click="delete(property); $event.stopPropagation();"  data-ng-class="{'disabled': isViewMode()}"> </button>
-                        </div>
-                    </div>
-                </perfect-scrollbar>
-            </div>
-
-        </div>
-    </div>
-
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties.less b/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties.less
deleted file mode 100644
index 3e8d6c3fbd..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/properties/properties.less
+++ /dev/null
@@ -1,115 +0,0 @@
-.workspace-properties {
-
-    width: 93%;
-    display: inline-block;
-
-    #left-top-bar{
-        float: left;
-        width: 155px;
-        ::-webkit-input-placeholder {
-            font-style: italic;
-        }
-        :-moz-placeholder {
-            font-style: italic;
-        }
-        ::-moz-placeholder {
-            font-style: italic;
-        }
-        :-ms-input-placeholder {
-            font-style: italic;
-        }
-
-        #properties-count{
-            font-weight: bold;
-            float: left;
-        }
-
-        #search-by-name{
-            -webkit-border-radius: 2px;
-            -moz-border-radius: 2px;
-            border-radius: 2px;
-            width: 245px;
-            height: 32px;
-            line-height: 32px;
-            border: 1px solid @main_color_o;
-            text-indent: 10px;
-        }
-
-        .search-button{
-            .hand;
-            cursor: pointer;
-            float: right;
-            position: relative;
-            top: -22px;
-            right: -80px;
-        }
-    }
-
-    .add-btn {
-        margin: 36px 0 0 0;
-    }
-
-    .delete-col-header{
-        .sprite;
-        .sprite.e-sdc-small-icon-delete;
-    }
-
-    .w-sdc-classic-btn {
-        float: right;
-        margin-bottom: 10px;
-    }
-
-    .table{
-        height:490px;
-        margin-bottom: 0;
-    }
-
-    .data-row{
-        .table-delete-btn{
-            display: none !important;
-        }
-        &:hover{
-            .table-delete-btn{
-                display: inline-block !important;
-            }
-        }
-    }
-
-    .table-container-flex {
-        margin-top: 27px;
-
-        .text{
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            white-space: nowrap;
-        }
-
-        .flex-item:nth-child(1) {
-            flex-grow: 15;
-            a{
-                .hand
-            }
-        }
-
-        .flex-item:nth-child(2) {
-            flex-grow: 6;
-        }
-
-        .flex-item:nth-child(3) {
-            flex-grow: 6;
-        }
-
-        .flex-item:nth-child(4) {
-            flex-grow: 20;
-
-        }
-        .flex-item:nth-child(5) {
-            flex-grow: 3;
-            padding-top: 10px;
-        }
-
-
-    }
-
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts
deleted file mode 100644
index 97a117e8b7..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/**
- * Created by rcohen on 9/22/2016.
- */
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-    import tree = d3.layout.tree;
-
-    export class SortTableDefined {
-        reverse:boolean;
-        sortByField:string;
-    }
-
-    interface IReqAndCapabilitiesViewModelScope extends IWorkspaceViewModelScope {
-        requirementsTableHeadersList: Array<any>;
-        capabilitiesTableHeadersList: Array<any>;
-        capabilityPropertiesTableHeadersList: Array<any>;
-        requirementsSortTableDefined: SortTableDefined;
-        capabilitiesSortTableDefined: SortTableDefined;
-        propertiesSortTableDefined: SortTableDefined;
-        requirements:Array<Models.Requirement>;
-        capabilities:Array<Models.Capability>;
-        mode:string;
-        filteredProperties:Array<Array<Models.PropertyModel>>;
-        searchText:string;
-
-        sort(sortBy:string, sortByTableDefined:SortTableDefined):void;
-        updateProperty(property:Models.PropertyModel, indexInFilteredProperties:number):void;
-        allCapabilitiesSelected(selected:boolean):void;
-    }
-
-    export class ReqAndCapabilitiesViewModel {
-
-        static '$inject' = [
-            '$scope',
-            '$filter',
-            '$modal',
-            '$templateCache',
-            'ModalsHandler'
-        ];
-
-
-        constructor(private $scope:IReqAndCapabilitiesViewModelScope,
-                    private $filter:ng.IFilterService,
-                    private $modal:ng.ui.bootstrap.IModalService,
-                    private $templateCache:ng.ITemplateCacheService) {
-            this.initScope();
-            this.$scope.updateSelectedMenuItem();
-        }
-
-
-        private openEditPropertyModal = (property:Models.PropertyModel, indexInFilteredProperties:number):void => {
-            let viewModelsHtmlBasePath:string = '/app/scripts/view-models/';
-            //...because there is not be api
-            _.forEach(this.$scope.filteredProperties[indexInFilteredProperties],(prop:Models.PropertyModel)=>{
-                prop.readonly = true;
-            });
-            let modalOptions:ng.ui.bootstrap.IModalSettings = {
-                template: this.$templateCache.get(viewModelsHtmlBasePath + 'forms/property-form/property-form-view.html'),
-                controller: 'Sdc.ViewModels.PropertyFormViewModel',
-                size: 'sdc-l',
-                backdrop: 'static',
-                keyboard: false,
-                resolve: {
-                    property: ():Models.PropertyModel => {
-                        return property;
-                    },
-                    component: ():Models.Components.Component => {
-                        return <Models.Components.Component> this.$scope.component;
-                    },
-                    filteredProperties: ():Array<Models.PropertyModel> => {
-                        return this.$scope.filteredProperties[indexInFilteredProperties];
-                    }
-                }
-            };
-            this.$modal.open(modalOptions);
-        };
-
-        private initScope = ():void => {
-
-            this.$scope.requirementsSortTableDefined = {
-                reverse: false,
-                sortByField: 'name'
-            };
-            this.$scope.capabilitiesSortTableDefined = {
-                reverse: false,
-                sortByField: 'name'
-            };
-            this.$scope.propertiesSortTableDefined = {
-                reverse: false,
-                sortByField: 'name'
-            };
-
-            this.$scope.setValidState(true);
-            this.$scope.requirementsTableHeadersList = [
-                {title: 'Name', property: 'name'},
-                {title: 'Capability', property: 'capability'},
-                {title: 'Node', property: 'node'},
-                {title: 'Relationship', property: 'relationship'},
-                {title: 'Connected To', property: ''},
-                {title: 'Occurrences', property: ''}
-            ];
-            this.$scope.capabilitiesTableHeadersList = [
-                {title: 'Name', property: 'name'},
-                {title: 'Type', property: 'type'},
-                {title: 'Description', property: ''},
-                {title: 'Valid Source', property: ''},
-                {title: 'Occurrences', property: ''}
-            ];
-            this.$scope.capabilityPropertiesTableHeadersList = [
-                {title: 'Name', property: 'name'},
-                {title: 'Type', property: 'type'},
-                {title: 'Schema', property: 'schema.property.type'},
-                {title: 'Description', property: 'description'},
-            ];
-            this.$scope.filteredProperties=[];
-
-            this.$scope.mode='requirements';
-            this.$scope.requirements=[];
-            _.forEach(this.$scope.component.requirements,(req:Array<Models.Requirement>,capName)=>{
-                this.$scope.requirements=this.$scope.requirements.concat(req);
-            });
-
-            this.$scope.capabilities=[];
-            _.forEach(this.$scope.component.capabilities,(cap:Array<Models.Capability>,capName)=>{
-                this.$scope.capabilities=this.$scope.capabilities.concat(cap);
-            });
-
-            this.$scope.sort = (sortBy:string, sortByTableDefined:SortTableDefined):void => {
-                sortByTableDefined.reverse = (sortByTableDefined.sortByField === sortBy) ? !sortByTableDefined.reverse : false;
-                sortByTableDefined.sortByField = sortBy;
-            };
-
-            this.$scope.updateProperty = (property:Models.PropertyModel, indexInFilteredProperties:number):void => {
-                this.openEditPropertyModal(property, indexInFilteredProperties);
-            };
-
-            this.$scope.allCapabilitiesSelected = (selected:boolean):void => {
-                _.forEach(this.$scope.capabilities,(cap:Models.Capability)=>{
-                    cap.selected = selected;
-                });
-            };
-        }
-    }
-}
-
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html
deleted file mode 100644
index 047768689a..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view.html
+++ /dev/null
@@ -1,144 +0,0 @@
-<div class="workspace-req-and-cap">
-    <div class="tabs">
-        <button data-tests-id="req-tab" data-ng-click="mode='requirements';filterTerms='';" class="tlv-btn" data-ng-class="{'selected':mode=='requirements'}">Requirements({{requirements.length||'0'}})</button>
-        <button data-tests-id="cap-tab" data-ng-click="mode='capabilities';filterTerms='';" class="tlv-btn" data-ng-class="{'selected':mode=='capabilities'}">Capabilities({{capabilities.length||'0'}})</button>
-    </div>
-    <div class="expand-collapse-buttons" data-ng-if="mode=='capabilities'">
-        <span class="sprite-new expand-all" data-ng-click="allCapabilitiesSelected(true)"></span>
-        <span class="sprite-new collapse-all" data-ng-click="allCapabilitiesSelected(false)"></span>
-    </div>
-    <div class="search">
-        <input id="search-box" data-tests-id="search-box"  type="search" placeholder="Search" data-ng-model-options="{debounce: 200}" data-ng-model="filterTerms"/>
-        <div class="search-icon-container">
-            <span class="search-icon sprite-new search-white-icon"></span>
-        </div>
-    </div>
-    <div class="table-container-flex requirements-table" data-ng-if="mode=='requirements'">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <div class="head flex-container">
-                <div class="table-header head-row hand flex-item" data-ng-repeat="header in requirementsTableHeadersList track by $index" data-ng-click="sort(header.property, requirementsSortTableDefined)">{{header.title}}
-                    <span data-ng-if="requirementsSortTableDefined.sortByField === header.property" class="table-header-sort-arrow" data-ng-class="{'down': requirementsSortTableDefined.reverse, 'up':!requirementsSortTableDefined.reverse}"> </span>
-                </div>
-            </div>
-
-            <div class="body">
-                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                    <div data-ng-if="requirements.length === 0" class="no-row-text">
-                        There are no requirements to display
-
-                    </div>
-                    <div data-ng-repeat="req in requirements | orderBy:requirementsSortTableDefined.sortByField:requirementsSortTableDefined.reverse | filter: {filterTerm:filterTerms} track by $index"
-                         class="flex-container data-row" data-tests-id="reqRow">
-
-                        <div class="table-col-general flex-item text">
-                            <span  data-tests-id="{{req.name}}" tooltips tooltip-content="{{req.name}}">{{req.name}}</span>
-                        </div>
-                        <div class="table-col-general flex-item text">
-                            <span  data-tests-id="{{req.capability}}" tooltips tooltip-content="{{req.capability}}">{{req.capability.substring("tosca.capabilities.".length)}}</span>
-                        </div>
-                        <div class="table-col-general flex-item text">
-                            <span  data-tests-id="{{req.node}}" tooltips tooltip-content="{{req.node}}">{{req.node.substring("tosca.nodes.".length)}}</span>
-                        </div>
-                        <div class="table-col-general flex-item text">
-                            <span  data-tests-id="{{req.relationship}}" tooltips tooltip-content="{{req.relationship}}">{{req.relationship.substring("tosca.relationships.".length)}}</span>
-                        </div>
-                        <div class="table-col-general flex-item text" data-tests-id="{{}}" data-ng-bind=""></div>
-                        <div class="table-col-general flex-item text">
-                            <span  data-tests-id="{{req.minOccurrences}},{{req.maxOccurrences}}" tooltips tooltip-content="{{req.minOccurrences}},{{req.maxOccurrences}}">{{req.minOccurrences}},{{req.maxOccurrences}}</span>
-                        </div>
-                    </div>
-                </perfect-scrollbar>
-            </div>
-
-        </div>
-    </div>
-    <div class="table-container-flex capabilities-table" data-ng-if="mode=='capabilities'">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <div class="head flex-container">
-                <div class="table-header head-row hand flex-item" data-ng-repeat="header in capabilitiesTableHeadersList track by $index" data-ng-click="sort(header.property, capabilitiesSortTableDefined)">{{header.title}}
-                    <span data-ng-if="capabilitiesSortTableDefined.sortByField === header.property" class="table-header-sort-arrow" data-ng-class="{'down': capabilitiesSortTableDefined.reverse, 'up':!capabilitiesSortTableDefined.reverse}"> </span>
-                </div>
-            </div>
-
-            <div class="body">
-                <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                    <div data-ng-if="capabilities.length === 0" class="no-row-text">
-                        There are no capabilities to display
-
-                    </div>
-                    <div data-ng-repeat-start="capability in capabilities | orderBy:capabilitiesSortTableDefined.sortByField:capabilitiesSortTableDefined.reverse | filter: {filterTerm:filterTerms} track by $index"
-                         class="flex-container data-row" data-ng-class="{'selected': capability.selected}"
-                         data-ng-click="capability.selected = !capability.selected" data-tests-id="capabilities-table-row">
-
-                        <div class="table-col-general flex-item text">
-                            <span class="sprite-new arrow-up-small" data-ng-class="{'opened': capability.selected}"></span>
-                            <span  data-tests-id="{{capability.name}}" tooltips tooltip-content="{{capability.name}}">{{capability.name}}</span>
-                        </div>
-                        <div class="table-col-general flex-item text">
-                            <span  data-tests-id="{{capability.type}}" tooltips tooltip-content="{{capability.type}}">{{capability.type.substring("tosca.capabilities.".length)}}</span>
-                        </div>
-
-                        <div class="table-col-general flex-item text">
-                            <span  data-tests-id="{{capability.description}}" tooltips tooltip-content="{{capability.description}}">{{capability.description}}</span>
-                        </div>
-
-                        <div class="table-col-general flex-item text">
-                            <span  data-tests-id="{{capability.validSourceTypes.join(',')}}" tooltips tooltip-content="{{capability.validSourceTypes.join(',')}}">{{capability.validSourceTypes.join(',')}}</span>
-                        </div>
-
-                        <div class="table-col-general flex-item text">
-                            <span  data-tests-id="{{capability.minOccurrences}},{{capability.maxOccurrences}}" tooltips tooltip-content="{{capability.minOccurrences}},{{capability.maxOccurrences}}">{{capability.minOccurrences}},{{capability.maxOccurrences}}</span>
-                        </div>
-                    </div>
-                    <div data-ng-repeat-end="" data-ng-if="capability.selected" class="item-opened">
-                        <p class="properties-title">Properties</p>
-                        <div class="table-container-flex properties-table">
-                            <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-                                <div class="head flex-container">
-                                    <div class="table-header head-row hand flex-item" data-ng-repeat="header in capabilityPropertiesTableHeadersList track by $index" data-ng-click="sort(header.property, propertiesSortTableDefined)">{{header.title}}
-                                        <span data-ng-if="propertiesSortTableDefined.sortByField === header.property" class="table-header-sort-arrow" data-ng-class="{'down': propertiesSortTableDefined.reverse, 'up':!propertiesSortTableDefined.reverse}"> </span>
-                                    </div>
-                                </div>
-
-                                <div class="body">
-                                        <div data-ng-if="capability.properties.length === 0" class="no-row-text">
-                                            There are no properties to display
-                                        </div>
-                                        <div data-ng-repeat="property in filteredProperties[$parent.$index]=(capability.properties | orderBy:propertiesSortTableDefined.sortByField:propertiesSortTableDefined.reverse) track by $index"
-                                             data-tests-id="propertyRow"
-                                             class="flex-container data-row">
-
-                                            <div class="table-col-general flex-item text">
-                                                <a  data-tests-id="{{property.name}}"
-                                                    tooltips tooltip-content="{{property.name}}"
-                                                    data-ng-click="updateProperty(property, $parent.$index); $event.stopPropagation();"
-                                                    data-ng-class="{'disabled': isViewMode()}">{{property.name}}</a>
-
-                                            </div>
-
-                                            <div class="table-col-general flex-item text"
-                                                 data-tests-id="{{property.type}}"
-                                                 tooltips tooltip-content="{{property.type}}"
-                                                 data-ng-bind="property.type">
-                                            </div>
-                                            <div class="table-col-general flex-item text"
-                                                 data-tests-id="{{property.schema.property.type}}"
-                                                 tooltips tooltip-content="{{property.schema.property.type}}"
-                                                 data-ng-bind="property.schema.property.type">
-                                            </div>
-                                            <div class="table-col-general flex-item text">
-                                                <span tooltips tooltip-content="{{property.description}}" data-tests-id="{{property.description}}" data-ng-bind="property.description"></span>
-                                            </div>
-                                        </div>
-                                </div>
-
-                            </div>
-                        </div>
-                    </div>
-                </perfect-scrollbar>
-            </div>
-
-        </div>
-    </div>
-</div>
-
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less b/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less
deleted file mode 100644
index 9b52fad411..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less
+++ /dev/null
@@ -1,196 +0,0 @@
-.workspace-req-and-cap {
-
-    width: 93%;
-    display: inline-block;
-
-    .tabs{
-        float: left;
-        position: relative;
-        top: 6px;
-        button{
-            float: left;
-            width: 233px;
-            height: 38px;
-            background-color: @tlv_color_t;
-            border: 1px solid @main_color_o;
-            color: black;
-            &:nth-child(1){
-                border-radius: 10px 0 0 0;
-            }
-            &:nth-child(2){
-                border-radius: 0 10px 0 0;
-            }
-            &.selected{
-                background-color: @main_color_a;
-                border: 1px solid @main_color_a;
-                color: white;
-            }
-        }
-    }
-    .search{
-        margin-bottom: 12px;
-        float: right;
-        ::-webkit-input-placeholder {
-            font-style: italic;
-        }
-        :-moz-placeholder {
-            font-style: italic;
-        }
-        ::-moz-placeholder {
-            font-style: italic;
-        }
-        :-ms-input-placeholder {
-            font-style: italic;
-        }
-        #search-box{
-             -webkit-border-radius: 2px 0 0 2px;
-             -moz-border-radius: 2px 0 0 2px;
-             border-radius: 2px 0 0 2px;
-             width: 213px;
-             height: 32px;
-             line-height: 32px;
-             border: 1px solid @main_color_o;
-             text-indent: 10px;
-             float: left;
-        }
-        .search-icon-container{
-            background-color: @main_color_a;
-            height: 32px;
-            width: 32px;
-            border-radius: 0 2px 2px 0;
-            float: left;
-            .search-icon{
-                position: relative;
-                top: 9px;
-            }
-        }
-    }
-    .expand-collapse-buttons{
-        float: right;
-        width: 44px;
-        margin-left: 11px;
-        margin-top: 10px;
-        span{
-            vertical-align: bottom;
-            .hand;
-        }
-    }
-
-
-
-    .table{
-        height:490px;
-        margin-bottom: 0;
-    }
-
-    .arrow-up-small{
-        &.opened{
-            .arrow-up-small-hover;
-        }
-    }
-
-    .item-opened{
-        background-color: @tlv_color_t;
-    }
-
-    .properties-title{
-        margin:0;
-        font-weight: bold;
-    }
-
-    .table-container-flex {
-        margin-top: 10px;
-
-        .text{
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            white-space: nowrap;
-        }
-
-        &.requirements-table{
-            border-top: 4px solid @main_color_a;
-            .flex-item:nth-child(1) {
-                flex-grow: 20;
-            }
-
-            .flex-item:nth-child(2) {
-                flex-grow: 20;
-            }
-
-            .flex-item:nth-child(3) {
-                flex-grow: 20;
-            }
-
-            .flex-item:nth-child(4) {
-                flex-grow: 20;
-            }
-
-            .flex-item:nth-child(5) {
-                flex-grow: 20;
-            }
-
-            .flex-item:nth-child(6) {
-                flex-grow: 20;
-            }
-        }
-
-        &.capabilities-table{
-            border-top: 4px solid @main_color_a;
-            .selected{
-                .flex-item:nth-child(1) {
-                    border-left: 4px solid @main_color_a;
-                    padding-right: 11px;
-                }
-            }
-            .flex-item:nth-child(1) {
-                flex-grow: 10;
-            }
-
-            .flex-item:nth-child(2) {
-                flex-grow: 10;
-            }
-
-            .flex-item:nth-child(3) {
-                flex-grow: 10;
-            }
-
-            .flex-item:nth-child(4) {
-                flex-grow: 10;
-            }
-
-            .flex-item:nth-child(5) {
-                flex-grow: 10;
-            }
-
-        }
-
-        &.properties-table{
-            .table{
-                height: auto;
-            }
-
-            .flex-item:nth-child(1) {
-                flex-grow: 15;
-                a{
-                    .hand
-                }
-            }
-
-            .flex-item:nth-child(2) {
-                flex-grow: 6;
-            }
-
-            .flex-item:nth-child(3) {
-                flex-grow: 6;
-            }
-
-            .flex-item:nth-child(4) {
-                flex-grow: 20;
-
-            }
-        }
-
-    }
-
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts
deleted file mode 100644
index 1e6bc04924..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/// <reference path="../../../../references"/>
-module Sdc.ViewModels {
-    'use strict';
-    import ArtifactModel = Sdc.Models.ArtifactModel;
-
-    export interface IToscaArtifactsScope extends IWorkspaceViewModelScope {
-        artifacts: Array<Models.ArtifactModel>;
-        tableHeadersList: Array<any>;
-        artifactType: string;
-        downloadFile:Models.IFileDownload;
-        isLoading:boolean;
-        sortBy:string;
-        reverse:boolean;
-
-        getTitle(): string;
-        download(artifact:Models.ArtifactModel): void;
-        sort(sortBy:string): void;
-        showNoArtifactMessage():boolean;
-    }
-
-    export class ToscaArtifactsViewModel {
-
-        static '$inject' = [
-            '$scope',
-            '$filter'
-        ];
-
-        constructor(private $scope:IToscaArtifactsScope,
-                    private $filter:ng.IFilterService) {
-            this.initScope();
-            this.$scope.updateSelectedMenuItem();
-        }
-
-        private initScope = ():void => {
-            let self = this;
-            this.$scope.isLoading = false;
-            this.$scope.sortBy = 'artifactDisplayName';
-            this.$scope.reverse = false;
-            this.$scope.setValidState(true);
-            this.$scope.artifactType = 'normal';
-            this.$scope.getTitle = ():string => {
-                return this.$filter("resourceName")(this.$scope.component.name) + ' Artifacts';
-
-            };
-
-            this.$scope.tableHeadersList = [
-                {title: 'Name', property: 'artifactDisplayName'},
-                {title: 'Type', property: 'artifactType'}
-            ];
-
-            this.$scope.artifacts = <ArtifactModel[]>_.values(this.$scope.component.toscaArtifacts);
-            this.$scope.sort = (sortBy:string):void => {
-                this.$scope.reverse = (this.$scope.sortBy === sortBy) ? !this.$scope.reverse : false;
-                this.$scope.sortBy = sortBy;
-            };
-
-
-
-            this.$scope.showNoArtifactMessage = ():boolean => {
-                if (this.$scope.artifacts.length === 0) {
-                    return true;
-                }
-                return false;
-            };
-
-        }
-    }
-}
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html b/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html
deleted file mode 100644
index 947b37db93..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<div class="workspace-tosca-artifact">
-    <div class="table-container-flex">
-        <div class="table" data-ng-class="{'view-mode': isViewMode()}">
-            <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)">{{header.title}}
-                    <span data-ng-show="sortBy === header.property" class="table-header-sort-arrow" data-ng-class="{'down': reverse, 'up':!reverse}"> </span>
-                </div>
-                <div class="table-no-text-header head-row flex-item"></div>
-            </div>
-            <div class="body">
-                <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
-                    <div data-ng-if="showNoArtifactMessage()" class="no-row-text" data-ng-class="{'disabled': isDisableMode()}">
-                        There are no TOSCA artifacts to display
-                    </div>
-                    <div data-ng-repeat-start="artifact in artifacts| orderBy:sortBy:reverse track by $index"
-                         class="flex-container data-row"
-                         data-ng-class="{'selected': artifact.selected}">
-
-                        <div class="table-col-general flex-item"  data-ng-click="artifact.selected = !artifact.selected">
-                            <span class="sprite table-arrow" data-ng-class="{'opened': artifact.selected}" data-tests-id="{{artifact.artifactDisplayName}}"></span>
-                            {{artifact.artifactDisplayName}}
-                        </div>
-
-                        <div class="table-col-general flex-item"  data-ng-click="artifact.selected = !artifact.selected" data-tests-id="{{artifact.artifactType}}">
-                            {{artifact.artifactType}}
-                        </div>
-
-                        <div class="table-btn-col flex-item download-icon-container">
-                            <button class="table-download-btn tosca" download-artifact  data-tests-id="download_{{artifact.artifactDisplayName}}"
-                                    data-ng-if="artifact.artifactName" component="component" artifact="artifact" show-loader="true"></button>
-                        </div>
-                    </div>
-                    <div data-ng-repeat-end="" data-ng-if="artifact.selected" class="item-opened">
-                        <div><span class="details-title">Label:</span> {{artifact.artifactLabel}}</div>
-                        <div><span class="details-title">UUID:</span> {{artifact.uniqueId}}</div>
-                        <div><span class="details-title">Description:</span> {{artifact.description}}</div>
-
-
-                    </div>
-
-                </perfect-scrollbar>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less b/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less
deleted file mode 100644
index f792bb8c53..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less
+++ /dev/null
@@ -1,74 +0,0 @@
-.workspace-tosca-artifact {
-    width: 93%;
-    display: inline-block;
-    .w-sdc-classic-btn {
-        float: right;
-        margin-bottom: 10px;
-    }
-
-    .details-title{
-        font-weight: bold;
-        margin-right: 5px;
-    }
-
-    .table{
-        height: 490px;
-        margin-bottom: 0;
-    }
-
-
-    .table-container-flex {
-        margin-top: 27px;
-
-        .item-opened{
-            word-wrap: break-word;
-        }
-
-
-        .flex-item:nth-child(1) {
-            flex-grow: 15;
-            .hand;
-            span.table-arrow {
-                margin-right: 7px;
-            }
-        }
-
-        .flex-item:nth-child(2) {
-            flex-grow: 6;
-        }
-
-        .flex-item:nth-child(3) {
-            flex-grow: 1;
-        }
-
-
-
-
-        .table-download-btn{
-            &.tosca{
-                margin-left: 0;
-                margin-top: 8px;
-            }
-        }
-
-        .download-icon-container{
-            position: relative;
-
-            .loader{
-                left: 60%;
-                top: 45px;
-                border: none;
-                background-color: transparent;
-                height: 0px;
-                width: 63px;
-                outline: none;
-
-            }
-        }
-
-
-    }
-
-}
-
-
diff --git a/catalog-ui/app/scripts/view-models/workspace/workspace-view-model.ts b/catalog-ui/app/scripts/view-models/workspace/workspace-view-model.ts
deleted file mode 100644
index a8523f24f5..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/workspace-view-model.ts
+++ /dev/null
@@ -1,703 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-/**
- * Created by obarda on 3/30/2016.
- */
-/// <reference path="../../references"/>
-module Sdc.ViewModels {
-
-    'use strict';
-    import Resource = Sdc.Models.Components.Resource;
-    import ResourceType = Sdc.Utils.Constants.ResourceType;
-
-    export interface IWorkspaceViewModelScope extends ng.IScope {
-
-        isLoading: boolean;
-        isCreateProgress: boolean;
-        component: Models.Components.Component;
-        originComponent: Models.Components.Component;
-        componentType: string;
-        importFile: any;
-        leftBarTabs: Utils.MenuItemGroup;
-        isNew: boolean;
-        isFromImport: boolean;
-        isValidForm: boolean;
-        mode: Utils.Constants.WorkspaceMode;
-        breadcrumbsModel: Array<Utils.MenuItemGroup>;
-        sdcMenu: Models.IAppMenu;
-        changeLifecycleStateButtons: any;
-        version: string;
-        versionsList: Array<any>;
-        changeVersion: any;
-        isComposition: boolean;
-        isDeployment: boolean;
-        $state: ng.ui.IStateService;
-        user: Models.IUserProperties;
-        thirdParty: boolean;
-        disabledButtons: boolean;
-        menuComponentTitle: string;
-        progressService: Sdc.Services.ProgressService;
-        progressMessage: string;
-        // leftPanelComponents:Array<Models.Components.Component>; //this is in order to load the left panel once, and not wait long time when moving to composition
-
-        showChangeStateButton(): boolean;
-        getComponent(): Sdc.Models.Components.Component;
-        setComponent(component: Sdc.Models.Components.Component): void;
-        onMenuItemPressed(state: string): ng.IPromise<boolean>;
-        save(): ng.IPromise<boolean>;
-        setValidState(isValid: boolean): void;
-        revert(): void;
-        changeLifecycleState(state: string): void;
-        enabledTabs(): void
-        isDesigner(): boolean;
-        isViewMode(): boolean;
-        isEditMode(): boolean;
-        isCreateMode(): boolean;
-        isDisableMode(): boolean;
-        showFullIcons(): boolean;
-        goToBreadcrumbHome(): void;
-        onVersionChanged(selectedId: string): void;
-        getLatestVersion(): void;
-        getStatus(): string;
-        showLifecycleIcon(): boolean;
-        updateSelectedMenuItem(): void;
-        uploadFileChangedInGeneralTab(): void;
-        updateMenuComponentName(ComponentName: string): void;
-    }
-
-    export class WorkspaceViewModel {
-
-        static '$inject' = [
-            '$scope',
-            'injectComponent',
-            'ComponentFactory',
-            '$state',
-            'sdcMenu',
-            '$q',
-            'MenuHandler',
-            'Sdc.Services.CacheService',
-            'ChangeLifecycleStateHandler',
-            'ModalsHandler',
-            'LeftPaletteLoaderService',
-            '$filter',
-            'EventListenerService',
-            'Sdc.Services.EntityService',
-            'Notification',
-            '$stateParams',
-            'Sdc.Services.ProgressService'
-        ];
-
-        constructor(private $scope: IWorkspaceViewModelScope,
-                    private injectComponent: Models.Components.Component,
-                    private ComponentFactory: Utils.ComponentFactory,
-                    private $state: ng.ui.IStateService,
-                    private sdcMenu: Models.IAppMenu,
-                    private $q: ng.IQService,
-                    private MenuHandler: Utils.MenuHandler,
-                    private cacheService: Services.CacheService,
-                    private ChangeLifecycleStateHandler: Sdc.Utils.ChangeLifecycleStateHandler,
-                    private ModalsHandler: Sdc.Utils.ModalsHandler,
-                    private LeftPaletteLoaderService: Services.Components.LeftPaletteLoaderService,
-                    private $filter: ng.IFilterService,
-                    private EventListenerService: Services.EventListenerService,
-                    private EntityService: Sdc.Services.EntityService,
-                    private Notification: any,
-                    private $stateParams: any,
-                    private progressService: Sdc.Services.ProgressService) {
-
-            this.initScope();
-            this.initAfterScope();
-        }
-
-        private role: string;
-        private components: Array<Models.Components.Component>;
-
-        private initViewMode = (): Utils.Constants.WorkspaceMode => {
-            let mode = Utils.Constants.WorkspaceMode.VIEW;
-
-            if (!this.$state.params['id']) {   //&& !this.$state.params['vspComponent']
-                mode = Utils.Constants.WorkspaceMode.CREATE;
-            } else {
-                if (this.$scope.component.lifecycleState === Utils.Constants.ComponentState.NOT_CERTIFIED_CHECKOUT &&
-                    this.$scope.component.lastUpdaterUserId === this.cacheService.get("user").userId) {
-                    if (this.$scope.component.isProduct() && this.role == Utils.Constants.Role.PRODUCT_MANAGER) {
-                        mode = Utils.Constants.WorkspaceMode.EDIT;
-                    }
-                    if ((this.$scope.component.isService() || this.$scope.component.isResource()) && this.role == Utils.Constants.Role.DESIGNER) {
-                        mode = Utils.Constants.WorkspaceMode.EDIT;
-                    }
-                }
-            }
-            return mode;
-        };
-
-        private initChangeLifecycleStateButtons = (): void => {
-            let state = this.$scope.component.isService() && (Utils.Constants.Role.OPS == this.role || Utils.Constants.Role.GOVERNOR == this.role) ? this.$scope.component.distributionStatus : this.$scope.component.lifecycleState;
-            this.$scope.changeLifecycleStateButtons = this.sdcMenu.roles[this.role].changeLifecycleStateButtons[state];
-        };
-
-        private isNeedSave = (): boolean => {
-            if (this.$scope.isEditMode() && //this is a workaround for onboarding - we need to get the artifact in order to avoid saving the vf when moving from their tabs
-                (this.$state.current.name === Utils.Constants.States.WORKSPACE_MANAGEMENT_WORKFLOW || this.$state.current.name === Utils.Constants.States.WORKSPACE_NETWORK_CALL_FLOW)) {
-                return true;
-            }
-            return this.$scope.isEditMode() &&
-                this.$state.current.data && this.$state.current.data.unsavedChanges;
-        };
-
-        private initScope = (): void => {
-
-            this.$scope.component = this.injectComponent;
-            this.$scope.menuComponentTitle = this.$scope.component.name;
-            this.$scope.disabledButtons = false;
-            this.$scope.originComponent = this.ComponentFactory.createComponent(this.$scope.component);
-            this.$scope.componentType = this.$scope.component.componentType;
-            this.$scope.version = this.cacheService.get('version');
-            this.$scope.user = this.cacheService.get("user");
-            this.role = this.$scope.user.role;
-            this.$scope.mode = this.initViewMode();
-            this.$scope.isValidForm = true;
-            this.initChangeLifecycleStateButtons();
-            this.initVersionObject();
-            this.$scope.$state = this.$state;
-            this.$scope.isLoading = false;
-            this.$scope.isComposition = (this.$state.current.name.indexOf(Utils.Constants.States.WORKSPACE_COMPOSITION) > -1);
-            this.$scope.isDeployment = (this.$state.current.name.indexOf(Utils.Constants.States.WORKSPACE_DEPLOYMENT) > -1);
-            this.$scope.progressService = this.progressService;
-
-            this.$scope.getComponent = (): Sdc.Models.Components.Component => {
-                return this.$scope.component;
-            };
-
-            this.$scope.updateMenuComponentName = (ComponentName: string): void => {
-                this.$scope.menuComponentTitle = ComponentName;
-            };
-
-            this.$scope.sdcMenu = this.sdcMenu;
-            // Will be called from each step after save to update the resource.
-            this.$scope.setComponent = (component: Sdc.Models.Components.Component): void => {
-                this.$scope.component = component;
-            };
-
-            this.$scope.uploadFileChangedInGeneralTab = (): void => {
-                // In case user select browse file, and in update mode, need to disable submit for testing and checkin buttons.
-                if (this.$scope.isEditMode() && this.$scope.component.isResource() && (<Resource>this.$scope.component).resourceType == ResourceType.VF) {
-                    this.$scope.disabledButtons = true;
-                }
-            };
-
-            this.$scope.onMenuItemPressed = (state: string): ng.IPromise<boolean> => {
-                let deferred = this.$q.defer();
-                if (this.isNeedSave()) {
-                    if (this.$scope.isValidForm) {
-                        let onSuccess = (): void => {
-                            this.$state.go(state, {
-                                id: this.$scope.component.uniqueId,
-                                type: this.$scope.component.componentType.toLowerCase(),
-                                components: this.components
-                            });
-                            deferred.resolve(true);
-                        };
-                        this.$scope.save().then(onSuccess);
-                    } else {
-                        console.log('form is not valid');
-                        deferred.reject(false);
-                    }
-                } else {
-                    this.$state.go(state, {
-                        id: this.$scope.component.uniqueId,
-                        type: this.$scope.component.componentType.toLowerCase(),
-                        components: this.components
-                    });
-                    deferred.resolve(true);
-                }
-                return deferred.promise;
-            };
-
-            this.$scope.setValidState = (isValid: boolean): void => {
-                this.$scope.isValidForm = isValid;
-            };
-
-            this.$scope.onVersionChanged = (selectedId: string): void => {
-                this.$scope.isLoading = true;
-                if (this.$state.current.data && this.$state.current.data.unsavedChanges) {
-                    this.$scope.changeVersion.selectedVersion = _.find(this.$scope.versionsList, {versionId: this.$scope.component.uniqueId});
-                }
-                this.$state.go(this.$state.current.name, {
-                    id: selectedId,
-                    type: this.$scope.componentType.toLowerCase(),
-                    mode: Utils.Constants.WorkspaceMode.VIEW,
-                    components: this.$state.params['components']
-                });
-
-            };
-
-            this.$scope.getLatestVersion = (): void => {
-                this.$scope.onVersionChanged(_.first(this.$scope.versionsList).versionId);
-            };
-
-            this.$scope.save = (state?: string): ng.IPromise<boolean> => {
-                this.EventListenerService.notifyObservers(Utils.Constants.EVENTS.ON_WORKSPACE_SAVE_BUTTON_CLICK);
-
-                this.progressService.initCreateComponentProgress(this.$scope.component.uniqueId);
-
-                let deferred = this.$q.defer();
-                let modalInstance: ng.ui.bootstrap.IModalServiceInstance;
-
-                let onFailed = () => {
-                    this.EventListenerService.notifyObservers(Utils.Constants.EVENTS.ON_WORKSPACE_SAVE_BUTTON_ERROR);
-                    this.progressService.deleteProgressValue(this.$scope.component.uniqueId);
-                    modalInstance && modalInstance.close();  // Close the modal in case it is opened.
-                    this.$scope.isCreateProgress = false;
-                    this.$scope.isLoading = false; // stop the progress.
-
-                    this.$scope.setValidState(true);  // Set the form valid (if sent form is valid, the error from server).
-                    if (!this.$scope.isCreateMode()) {
-                        this.$scope.component = this.$scope.originComponent; // Set the component back to the original.
-                        this.enableMenuItems();  // Enable the menu items (left tabs), so user can press on them.
-                        this.$scope.disabledButtons = false;  // Enable "submit for testing" & checking buttons.
-                    }
-
-                    deferred.reject(false);
-                };
-
-                let onSuccessCreate = (component: Models.Components.Component) => {
-
-                    this.EventListenerService.notifyObservers(Utils.Constants.EVENTS.ON_WORKSPACE_SAVE_BUTTON_SUCCESS);
-                    this.progressService.deleteProgressValue(this.$scope.component.uniqueId);
-                    //update components for breadcrumbs
-                    this.components.unshift(component);
-                    this.$state.go(Utils.Constants.States.WORKSPACE_GENERAL, {
-                        id: component.uniqueId,
-                        type: component.componentType.toLowerCase(),
-                        components: this.components
-                    });
-
-                    deferred.resolve(true);
-                };
-
-                let onSuccessUpdate = (component: Models.Components.Component) => {
-                    this.$scope.isCreateProgress = false;
-                    this.$scope.disabledButtons = false;
-                    this.EventListenerService.notifyObservers(Utils.Constants.EVENTS.ON_WORKSPACE_SAVE_BUTTON_SUCCESS);
-                    this.progressService.deleteProgressValue(this.$scope.component.uniqueId);
-
-                    // Stop the circle loader.
-                    this.$scope.isLoading = false;
-
-                    component.tags = _.reject(component.tags, (item)=> {
-                        return item === component.name
-                    });
-
-                    // Update the components
-                    this.$scope.component = component;
-                    this.$scope.originComponent = this.ComponentFactory.createComponent(this.$scope.component);
-
-                    //update components for breadcrumbs
-                    this.components.unshift(component);
-
-                    // Enable left tags
-                    this.$scope.enabledTabs();
-
-
-                    if (this.$state.current.data) {
-                        this.$state.current.data.unsavedChanges = false;
-                    }
-
-                    deferred.resolve(true);
-                };
-
-                if (this.$scope.isCreateMode()) {
-                    this.$scope.progressMessage = "Creating Asset...";
-                    // CREATE MODE
-                    this.$scope.isCreateProgress = true;
-
-                    // Start creating the component
-                    this.ComponentFactory.createComponentOnServer(this.$scope.component).then(onSuccessCreate, onFailed);
-
-                    // In case we import CSAR. Notify user that import VF will take long time (the create is performed in the background).
-                    if (this.$scope.component.isResource() && (<Resource>this.$scope.component).csarUUID) {
-                        this.Notification.info({
-                            message: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_TAKES_LONG_TIME_DESCRIPTION"),
-                            title: this.$filter('translate')("IMPORT_VF_MESSAGE_CREATE_TAKES_LONG_TIME_TITLE")
-                        });
-                    }
-                } else {
-                    // UPDATE MODE
-                    this.$scope.isCreateProgress = true;
-                    this.$scope.progressMessage = "Updating Asset...";
-                    this.disableMenuItems();
-
-
-                    // Work around to change the csar version
-                    if (this.cacheService.get(Utils.Constants.CHANGE_COMPONENT_CSAR_VERSION_FLAG)) {
-                        (<Resource>this.$scope.component).csarVersion = this.cacheService.get(Utils.Constants.CHANGE_COMPONENT_CSAR_VERSION_FLAG);
-                        this.cacheService.remove(Utils.Constants.CHANGE_COMPONENT_CSAR_VERSION_FLAG);
-                    }
-
-                    this.$scope.component.updateComponent().then(onSuccessUpdate, onFailed);
-                }
-                return deferred.promise;
-            };
-
-            this.$scope.revert = (): void => {
-                //in state of import file leave the file in place
-                if (this.$scope.component.isResource() && (<Resource>this.$scope.component).importedFile) {
-                    let tempFile: Sdc.Directives.FileUploadModel = (<Resource>this.$scope.component).importedFile;
-                    this.$scope.component = this.ComponentFactory.createComponent(this.$scope.originComponent);
-                    (<Resource>this.$scope.component).importedFile = tempFile;
-                } else {
-                    this.$scope.component = this.ComponentFactory.createComponent(this.$scope.originComponent);
-                }
-
-            };
-
-            this.$scope.changeLifecycleState = (state: string): void => {
-                if (this.isNeedSave() && state !== 'deleteVersion') {
-                    this.$scope.save().then(() => {
-                        changeLifecycleState(state);
-                    })
-                } else {
-                    changeLifecycleState(state);
-                }
-            };
-
-            let defaultActionAfterChangeLifecycleState = (): void => {
-                if (this.$state.current.data && this.$state.current.data.unsavedChanges) {
-                    this.$state.current.data.unsavedChanges = false;
-                }
-                this.$state.go('dashboard');
-            };
-
-            let changeLifecycleState = (state: string) => {
-                if ('monitor' === state) {
-                    this.$state.go('workspace.distribution');
-                    return;
-                }
-
-                let data = this.$scope.changeLifecycleStateButtons[state];
-                let onSuccess = (component: Models.Components.Component): void => {
-                    //Updating the component from server response
-
-                    //the server returns only metaData (small component) except checkout (Full component)  ,so we update only the statuses of distribution & lifecycle
-                    this.$scope.component.lifecycleState = component.lifecycleState;
-                    this.$scope.component.distributionStatus = component.distributionStatus;
-
-                    switch (data.url) {
-                        case 'lifecycleState/CHECKOUT':
-                            // only checkOut get the full component from server
-                            this.$scope.component = component;
-                            // Work around to change the csar version
-                            if (this.cacheService.get(Utils.Constants.CHANGE_COMPONENT_CSAR_VERSION_FLAG)) {
-                                (<Resource>this.$scope.component).csarVersion = this.cacheService.get(Utils.Constants.CHANGE_COMPONENT_CSAR_VERSION_FLAG);
-                            }
-
-                            //when checking out a minor version uuid remains
-                            let bcComponent: Sdc.Models.Components.Component = _.find(this.components, (item) => {
-                                return item.uuid === component.uuid;
-                            });
-                            if (bcComponent) {
-                                this.components[this.components.indexOf(bcComponent)] = component;
-                            } else {
-                                //when checking out a major(certified) version
-                                this.components.unshift(component);
-                            }
-
-                            this.$state.go(this.$state.current.name, {
-                                id: component.uniqueId,
-                                type: component.componentType.toLowerCase(),
-                                components: this.components
-                            });
-                            this.Notification.success({
-                                message: this.$filter('translate')("CHECKOUT_SUCCESS_MESSAGE_TEXT"),
-                                title: this.$filter('translate')("CHECKOUT_SUCCESS_MESSAGE_TITLE")
-                            });
-                            break;
-                        case 'lifecycleState/CHECKIN':
-                            defaultActionAfterChangeLifecycleState();
-                            this.Notification.success({
-                                message: this.$filter('translate')("CHECKIN_SUCCESS_MESSAGE_TEXT"),
-                                title: this.$filter('translate')("CHECKIN_SUCCESS_MESSAGE_TITLE")
-                            });
-                            break;
-                        case 'lifecycleState/UNDOCHECKOUT':
-                            defaultActionAfterChangeLifecycleState();
-                            this.Notification.success({
-                                message: this.$filter('translate')("DELETE_SUCCESS_MESSAGE_TEXT"),
-                                title: this.$filter('translate')("DELETE_SUCCESS_MESSAGE_TITLE")
-                            });
-                            break;
-                        case 'lifecycleState/certificationRequest':
-                            defaultActionAfterChangeLifecycleState();
-                            this.Notification.success({
-                                message: this.$filter('translate')("SUBMIT_FOR_TESTING_SUCCESS_MESSAGE_TEXT"),
-                                title: this.$filter('translate')("SUBMIT_FOR_TESTING_SUCCESS_MESSAGE_TITLE")
-                            });
-                            break;
-                        //Tester Role
-                        case 'lifecycleState/failCertification':
-                            defaultActionAfterChangeLifecycleState();
-                            this.Notification.success({
-                                message: this.$filter('translate')("REJECT_SUCCESS_MESSAGE_TEXT"),
-                                title: this.$filter('translate')("REJECT_SUCCESS_MESSAGE_TITLE")
-                            });
-                            break;
-                        case 'lifecycleState/certify':
-                            defaultActionAfterChangeLifecycleState();
-                            this.Notification.success({
-                                message: this.$filter('translate')("ACCEPT_TESTING_SUCCESS_MESSAGE_TEXT"),
-                                title: this.$filter('translate')("ACCEPT_TESTING_SUCCESS_MESSAGE_TITLE")
-                            });
-                            break;
-                        //DE203504 Bug Fix Start
-                        case 'lifecycleState/startCertification':
-                            this.initChangeLifecycleStateButtons();
-                            this.Notification.success({
-                                message: this.$filter('translate')("START_TESTING_SUCCESS_MESSAGE_TEXT"),
-                                title: this.$filter('translate')("START_TESTING_SUCCESS_MESSAGE_TITLE")
-                            });
-                            break;
-                        case  'lifecycleState/cancelCertification':
-                            this.initChangeLifecycleStateButtons();
-                            this.Notification.success({
-                                message: this.$filter('translate')("CANCEL_TESTING_SUCCESS_MESSAGE_TEXT"),
-                                title: this.$filter('translate')("CANCEL_TESTING_SUCCESS_MESSAGE_TITLE")
-                            });
-                            break;
-                        //Ops Role
-                        case  'distribution/PROD/activate':
-                            this.initChangeLifecycleStateButtons();
-                            this.Notification.success({
-                                message: this.$filter('translate')("DISTRIBUTE_SUCCESS_MESSAGE_TEXT"),
-                                title: this.$filter('translate')("DISTRIBUTE_SUCCESS_MESSAGE_TITLE")
-                            });
-                            break;
-                        //Governor Role
-                        case  'distribution-state/reject':
-                            this.initChangeLifecycleStateButtons();
-                            this.Notification.success({
-                                message: this.$filter('translate')("REJECT_SUCCESS_MESSAGE_TEXT"),
-                                title: this.$filter('translate')("REJECT_SUCCESS_MESSAGE_TITLE")
-                            });
-                            break;
-                        case  'distribution-state/approve':
-                            this.initChangeLifecycleStateButtons();
-                            this.$state.go('catalog');
-                            this.Notification.success({
-                                message: this.$filter('translate')("APPROVE_SUCCESS_MESSAGE_TEXT"),
-                                title: this.$filter('translate')("APPROVE_SUCCESS_MESSAGE_TITLE")
-                            });
-                            break;
-                        //DE203504 Bug Fix End
-
-                        default :
-                            defaultActionAfterChangeLifecycleState();
-
-                    }
-                    if (data.url != 'lifecycleState/CHECKOUT') {
-                        this.$scope.isLoading = false;
-                    }
-                };
-                //this.$scope.isLoading = true;
-                this.ChangeLifecycleStateHandler.changeLifecycleState(this.$scope.component, data, this.$scope, onSuccess);
-            };
-
-            this.$scope.enabledTabs = (): void => {
-                this.$scope.leftBarTabs.menuItems.forEach((item: Utils.MenuItem) => {
-                    item.isDisabled = false;
-                });
-            };
-
-            this.$scope.isViewMode = (): boolean => {
-                return this.$scope.mode === Utils.Constants.WorkspaceMode.VIEW;
-            };
-
-            this.$scope.isDesigner = (): boolean => {
-                return this.role == Utils.Constants.Role.DESIGNER;
-            };
-
-            this.$scope.isDisableMode = (): boolean => {
-                return this.$scope.mode === Utils.Constants.WorkspaceMode.VIEW && this.$scope.component.lifecycleState === Utils.Constants.ComponentState.NOT_CERTIFIED_CHECKIN;
-            };
-
-            this.$scope.showFullIcons = (): boolean => {
-                //we show revert and save icons only in general\icon view
-                return this.$state.current.name === Utils.Constants.States.WORKSPACE_GENERAL ||
-                    this.$state.current.name === Utils.Constants.States.WORKSPACE_ICONS;
-            };
-
-            this.$scope.isCreateMode = (): boolean => {
-                return this.$scope.mode === Utils.Constants.WorkspaceMode.CREATE;
-            };
-
-            this.$scope.isEditMode = (): boolean => {
-                return this.$scope.mode === Utils.Constants.WorkspaceMode.EDIT;
-            };
-
-            this.$scope.goToBreadcrumbHome = (): void => {
-                let bcHome: Sdc.Utils.MenuItemGroup = this.$scope.breadcrumbsModel[0];
-                this.$state.go(bcHome.menuItems[bcHome.selectedIndex].state);
-            };
-
-            this.$scope.showLifecycleIcon = (): boolean => {
-                return this.role == Utils.Constants.Role.DESIGNER ||
-                    this.role == Utils.Constants.Role.PRODUCT_MANAGER;
-            };
-
-            this.$scope.getStatus = (): string => {
-                if (this.$scope.isCreateMode()) {
-                    return 'IN DESIGN';
-                }
-
-                return this.$scope.component.getStatus(this.sdcMenu);
-            };
-
-            this.initMenuItems();
-
-            this.$scope.showChangeStateButton = (): boolean => {
-                let result: boolean = true;
-                if (!this.$scope.component.isLatestVersion() && Utils.Constants.Role.OPS != this.role && Utils.Constants.Role.GOVERNOR != this.role) {
-                    result = false;
-                }
-                if (this.role === Utils.Constants.Role.PRODUCT_MANAGER && !this.$scope.component.isProduct()) {
-                    result = false;
-                }
-                if ((this.role === Utils.Constants.Role.DESIGNER || this.role === Utils.Constants.Role.TESTER)
-                    && this.$scope.component.isProduct()) {
-                    result = false;
-                }
-                if (Utils.Constants.ComponentState.NOT_CERTIFIED_CHECKOUT === this.$scope.component.lifecycleState && this.$scope.isViewMode()) {
-                    result = false;
-                }
-                if (Utils.Constants.ComponentState.CERTIFIED != this.$scope.component.lifecycleState &&
-                    (Utils.Constants.Role.OPS == this.role || Utils.Constants.Role.GOVERNOR == this.role)) {
-                    result = false;
-                }
-                return result;
-            };
-
-            this.$scope.updateSelectedMenuItem = (): void => {
-                let selectedItem: Sdc.Utils.MenuItem = _.find(this.$scope.leftBarTabs.menuItems, (item: Sdc.Utils.MenuItem) => {
-                    return item.state === this.$state.current.name;
-                });
-                this.$scope.leftBarTabs.selectedIndex = selectedItem ? this.$scope.leftBarTabs.menuItems.indexOf(selectedItem) : 0;
-            };
-
-            this.$scope.$watch('$state.current.name', (newVal: string): void => {
-                if (newVal) {
-                    this.$scope.isComposition = (newVal.indexOf(Utils.Constants.States.WORKSPACE_COMPOSITION) > -1);
-                    this.$scope.isDeployment = (newVal.indexOf(Utils.Constants.States.WORKSPACE_DEPLOYMENT) > -1);
-                }
-            });
-        };
-
-        private initAfterScope = (): void => {
-            // In case user select csar from the onboarding modal, need to disable checkout and submit for testing.
-            if (this.$state.params['disableButtons'] === true) {
-                this.$scope.uploadFileChangedInGeneralTab();
-            }
-        };
-
-        private initVersionObject = (): void => {
-            this.$scope.versionsList = (this.$scope.component.getAllVersionsAsSortedArray()).reverse();
-            this.$scope.changeVersion = {selectedVersion: _.find(this.$scope.versionsList, {versionId: this.$scope.component.uniqueId})};
-        };
-
-        private getNewComponentBreadcrumbItem = (): Utils.MenuItem => {
-            let text = "";
-            if (this.$scope.component.isResource() && (<Resource>this.$scope.component).isCsarComponent()) {
-                text = this.$scope.component.getComponentSubType() + ': ' + this.$scope.component.name;
-            } else {
-                text = 'Create new ' + this.$state.params['type'];
-            }
-            return new Utils.MenuItem(text, null, Utils.Constants.States.WORKSPACE_GENERAL, 'goToState', [this.$state.params]);
-        };
-
-        private updateMenuItemByRole = (menuItems: Array<Utils.MenuItem>, role: string) => {
-            let tempMenuItems: Array<Utils.MenuItem> = new Array<Utils.MenuItem>();
-            menuItems.forEach((item: Utils.MenuItem) => {
-                //remove item if role is disabled
-                if (!(item.disabledRoles && item.disabledRoles.indexOf(role) > -1)) {
-                    tempMenuItems.push(item);
-                }
-            });
-            return tempMenuItems;
-        };
-
-        private initBreadcrumbs = () => {
-            this.components = this.cacheService.get('breadcrumbsComponents');
-            let breadcrumbsComponentsLvl = this.MenuHandler.generateBreadcrumbsModelFromComponents(this.components, this.$scope.component);
-
-            if (this.$scope.isCreateMode()) {
-                let createItem = this.getNewComponentBreadcrumbItem();
-                if (!breadcrumbsComponentsLvl.menuItems) {
-                    breadcrumbsComponentsLvl.menuItems = [];
-                }
-                breadcrumbsComponentsLvl.menuItems.unshift(createItem);
-                breadcrumbsComponentsLvl.selectedIndex = 0;
-            }
-
-            this.$scope.breadcrumbsModel = [breadcrumbsComponentsLvl, this.$scope.leftBarTabs];
-        };
-
-        private initMenuItems() {
-
-            let inCreateMode = this.$scope.isCreateMode();
-            this.$scope.leftBarTabs = new Utils.MenuItemGroup();
-            this.$scope.leftBarTabs.menuItems = this.updateMenuItemByRole(this.sdcMenu.component_workspace_menu_option[this.$scope.component.getComponentSubType()], this.role);
-
-            this.$scope.leftBarTabs.menuItems.forEach((item: Utils.MenuItem) => {
-                item.params = [item.state];
-                item.callback = this.$scope.onMenuItemPressed;
-                item.isDisabled = (inCreateMode && Utils.Constants.States.WORKSPACE_GENERAL != item.state) ||
-                    (Utils.Constants.States.WORKSPACE_DEPLOYMENT === item.state && this.$scope.component.groups.length === 0 && this.$scope.component.isResource());
-            });
-
-            if (this.cacheService.get('breadcrumbsComponents')) {
-                this.initBreadcrumbs();
-            } else {
-                let onSuccess = (components: Array<Models.Components.Component>) => {
-                    this.cacheService.set('breadcrumbsComponents', components);
-                    this.initBreadcrumbs();
-                };
-                this.EntityService.getCatalog().then(onSuccess); //getAllComponents() doesnt return components from catalog
-            }
-        }
-
-        private disableMenuItems() {
-            this.$scope.leftBarTabs.menuItems.forEach((item: Utils.MenuItem) => {
-                item.params = [item.state];
-                item.callback = this.$scope.onMenuItemPressed;
-                item.isDisabled = (Utils.Constants.States.WORKSPACE_GENERAL != item.state);
-            });
-        }
-
-        private enableMenuItems() {
-            this.$scope.leftBarTabs.menuItems.forEach((item: Utils.MenuItem) => {
-                item.params = [item.state];
-                item.callback = this.$scope.onMenuItemPressed;
-                item.isDisabled = false;
-            });
-        }
-
-    }
-}
-
-
diff --git a/catalog-ui/app/scripts/view-models/workspace/workspace-view.html b/catalog-ui/app/scripts/view-models/workspace/workspace-view.html
deleted file mode 100644
index 118f7474be..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/workspace-view.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<div class="sdc-workspace-container">
-    <loader data-display="isLoading"></loader>
-
-    <!-- HEADER -->
-<!--
-    <ecomp-header menu-data="menuItems" version="{{version}}"></ecomp-header>
--->
-
-    <div class="w-sdc-main-container">
-
-        <div class="w-sdc-left-sidebar" data-ng-if="!isComposition">
-            <div class="i-sdc-left-sidebar-item">
-                <expand-collapse-menu-box menu-items-group="leftBarTabs" menu-title="{{menuComponentTitle}}" parent-scope="this"> </expand-collapse-menu-box>
-            </div>
-        </div>
-
-        <div include-padding="true" class="w-sdc-main-right-container" data-ng-class="{'composition':isComposition}">
-
-        <!--<div class="w-sdc-main-right-container" data-ng-class="{'composition':isComposition}">-->
-            <loader data-display="isCreateProgress" relative="true"></loader>
-
-            <div class="sdc-workspace-top-bar">
-                <div class="version-container">
-
-
-                <span data-ng-if="!isCreateMode() && !component.isLatestVersion()" class="not-latest"></span>
-                <select class="version-selector" data-ng-if="!isCreateMode()" data-tests-id="versionHeader" data-ng-model="changeVersion.selectedVersion"
-                        ng-options="'V'+version.versionNumber for version in versionsList" data-ng-change="onVersionChanged(changeVersion.selectedVersion.versionId)">
-                </select>
-                </div>
-
-                <div class="lifecycle-state">
-                    <div data-ng-show="showLifecycleIcon()" class="lifecycle-state-icon" data-ng-class="{'in-design-status-icon': isCreateMode(), '{{sdcMenu.LifeCycleStatuses[component.lifecycleState].icon}}': !isCreateMode()}"></div>
-                    <span class="lifecycle-state-text" data-tests-id="formlifecyclestate">{{getStatus()}}</span>
-                </div>
-
-
-                <div class="progress-container" >
-                    <top-progress class="general-view-top-progress" progress-value="progressService.getProgressValue(component.uniqueId)" progress-message="progressMessage"></top-progress>
-                </div>
-
-                <div class="sdc-workspace-top-bar-buttons">
-
-                    <span ng-if="!isCreateMode() && !component.isLatestVersion() && !showChangeStateButton()">Switch to the&nbsp;<a ng-click="getLatestVersion()">latest version</a></span>
-
-                    <button ng-if="isDesigner() && !isCreateMode()"
-                            data-ng-class="{'disabled' :!isValidForm || isDisableMode() || isViewMode()}"
-                            ng-click="save()"
-                            class="tlv-btn blue"
-                            data-tests-id="create/save"
-                            data-ng-show="showFullIcons()"
-                            sdc-smart-tooltip="">Update</button>
-
-                    <button ng-repeat="(key,button) in changeLifecycleStateButtons"
-                            ng-click="changeLifecycleState(key)"
-                            ng-if="showChangeStateButton() && key != 'deleteVersion'"
-                            data-ng-disabled="isCreateMode() || button.disabled || disabledButtons || !isValidForm"
-                            class="change-lifecycle-state-btn tlv-btn"
-                            ng-class="$first ? 'outline green' : 'grey'"
-                            data-tests-id="{{button.text  | testsId}}">
-                            {{button.text}}
-                        </button>
-
-                    <button ng-if="!isViewMode() && isCreateMode()" data-ng-disabled="!isValidForm || isDisableMode() || isLoading" ng-click="save()" class="tlv-btn outline green" data-tests-id="create/save">Create</button>
-
-                    <span data-ng-if="isDesigner() && !isCreateMode() && component.lifecycleState === 'NOT_CERTIFIED_CHECKOUT'" sdc-smart-tooltip=""
-                        data-ng-class="{'disabled' : !isValidForm || isDisableMode() || isViewMode()}" ng-click="changeLifecycleState('deleteVersion')"
-                        class="sprite-new delete-btn" data-tests-id="delete_version" sdc-smart-tooltip="">Delete</span>
-
-                    <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode()}"  ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert"
-                          data-ng-show="showFullIcons()" sdc-smart-tooltip="">Revert</span>
-
-                    <span  data-ng-if="isComposition && !component.isProduct()" class="sprite-new print-screen-btn" entity="component" print-graph-screen data-tests-id="printScreen"></span>
-                    <span class="delimiter"></span>
-                    <span class="sprite-new x-btn" data-ng-click="goToBreadcrumbHome()" sdc-smart-tooltip="">Close</span>
-
-                </div>
-            </div>
-
-            <div data-ng-if="component.creationDate && (!isComposition && !isDeployment)" class="sdc-asset-creation-info"><b>Created:</b>&nbsp;{{component.creationDate | date:'MM/dd/yyyy'}},&nbsp;{{component.creatorFullName}}&nbsp;|&nbsp;<b>Modifed:</b>&nbsp;{{component.lastUpdateDate | date:'MM/dd/yyyy'}}&nbsp;|&nbsp;<b>UUID:</b>&nbsp;{{component.uuid}}<b>&nbsp;Invariant UUID:</b>&nbsp;{{component.invariantUUID}}</div>
-
-            <div class="w-sdc-main-container-body-content" data-ng-class="{'third-party':thirdParty}" data-ui-view></div>
-        </div>
-    </div>
-    <top-nav search-bind="search.filterTerm" hide-search="true" menu-model="breadcrumbsModel" version="{{version}}"></top-nav>
-</div>
diff --git a/catalog-ui/app/scripts/view-models/workspace/workspace.less b/catalog-ui/app/scripts/view-models/workspace/workspace.less
deleted file mode 100644
index d8bff1b634..0000000000
--- a/catalog-ui/app/scripts/view-models/workspace/workspace.less
+++ /dev/null
@@ -1,144 +0,0 @@
-.sdc-workspace-container {
-  .bg_p;
-
-  .add-btn {
-    .f-color.a;
-    .f-type._12_m;
-    .hand;
-    float: right;
-    margin-bottom: 15px;
-
-    &:before {
-      .sprite-new;
-      .plus-icon;
-      margin-right: 5px;
-      content: "";
-
-    }
-    &:hover {
-      .f-color.b;
-      &:before {
-        .sprite-new;
-        .plus-icon-hover;
-      }
-    }
-
-  }
-  .w-sdc-left-sidebar {
-    padding: 3px 3px 0px 0px;
-    background-color: @main_color_p;
-    box-shadow: 7px -3px 6px -8px @main_color_n;
-    z-index: 2;
-  }
-
-  .sdc-asset-creation-info {
-    .n_12_r;
-    float: right;
-    margin: 8px 20px 0 0;
-  }
-
-  .w-sdc-main-right-container {
-
-    padding: 0px 0px 0px 0px;
-    background-color: @main_color_p;
-    z-index: 1;
-
-    .sdc-workspace-top-bar {
-      height: @action_nav_height;
-      padding: 12px 10px 0px 50px;
-      border-bottom: 1px solid @main_color_o;
-      display: flex;
-      justify-content: space-between;
-
-      .version-container {
-
-      }
-
-      .progress-container {
-        flex-grow: 4;
-        z-index: 10000000;
-
-        .general-view-top-progress {
-          width: 30%;
-          margin: 0 auto;
-        }
-      }
-
-      .not-latest {
-        position: absolute;
-        left: 24px;
-        top: 20px;
-        .sprite-new;
-        .asdc-warning;
-      }
-
-      .sdc-workspace-top-bar-buttons {
-
-        > button, > span:not(.delimiter) {
-          margin-right: 10px;
-          vertical-align: middle;
-          .hand;
-
-          &.sprite-new {
-            text-indent: 100%;
-          }
-          &.disabled, &:hover.disabled {
-            pointer-events: none;
-          }
-        }
-        .delimiter {
-          height: 32px;
-          width: 1px;
-          background-color: #959595;
-          display: inline-block;
-          vertical-align: middle;
-          margin-right: 20px;
-        }
-
-      }
-
-      .lifecycle-state {
-        padding: 7px 0 0 10px;
-        margin: 2px 0 7px 10px;
-        border-left: 1px solid @main_color_o;
-        line-height: 15px;
-        font-family: @font-omnes-medium;
-        color: @main_color_m;
-
-        .lifecycle-state-icon {
-          .sprite-new;
-        }
-        .lifecycle-state-text {
-
-          font-weight: bold;
-          text-transform: uppercase;
-          vertical-align: top;
-          padding: 3px;
-        }
-      }
-
-      .version-selector {
-        // float:left;
-        background-color: transparent;
-        border: none;
-        margin-top: 6px;
-      }
-    }
-    .w-sdc-main-container-body-content {
-      height:100%;
-
-      text-align: center;
-      align-items: center;
-      padding: 40px 14% 20px 14%;
-      &.third-party {
-        text-align: left;
-        padding: 0;
-        position: absolute;
-        top: @action_nav_height;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-    }
-  }
-}
author	Michael Lando <ml636r@att.com>	2017-06-09 03:19:04 +0300
committer	Michael Lando <ml636r@att.com>	2017-06-09 03:19:04 +0300
commit	ed64b5edff15e702493df21aa3230b81593e6133 (patch)
tree	a4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/app/scripts/view-models/workspace
parent	280f8015d06af1f41a3ef12e8300801c7a5e0d54 (diff)