re base code

Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5
Issue-ID: SDC-1566
Signed-off-by: Michael Lando <ml636r@att.com>

1 files changed, 94 insertions, 73 deletions

diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
index fceb73b882..4cd33f3210 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html
@@ -2,7 +2,7 @@
     <loader data-display="isLoading"></loader>
     <div class="w-sdc-designer-canvas" data-ng-class="{sidebaractive: displayDesignerRightSidebar}">
         <palette current-component="currentComponent"
-                 is-view-only="isViewOnly"
+                 is-view-only="isViewOnly || isCanvasTagging"
                  is-loading="isLoading"></palette>
 
         <ng2-palette-popup-panel></ng2-palette-popup-panel>
@@ -19,86 +19,107 @@
 
     <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}"
-                         tooltips tooltip-side="top" tooltip-content="Not certified"></div>
+        <div ng-if="!selectedZoneInstance">
+
+            <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}}"
+                    ng-class="{'archive-component':selectedComponent.archived}">
+                        <div ng-if="isComponentInstanceSelected()"
+                            data-ng-class="{'non-certified':'CERTIFIED' !== selectedComponent.lifecycleState}"
+                            tooltips tooltip-side="top" tooltip-content="Not certified"></div>
+                    </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 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-tests-id="renameInstance"
+                    data-ng-if="!isViewOnly && isComponentInstanceSelected() && !selectedComponent.archived"
+                    data-ng-click="openUpdateModal()" id="editPencil"></div>
+
+                <div class="sprite e-sdc-small-icon-delete w-sdc-designer-delete-resource-icon"
+                    data-tests-id="deleteInstance"
+                    data-ng-if="!isViewOnly && isComponentInstanceSelected() && !selectedComponent.archived"
+                    data-ng-click="!isLoading && deleteSelectedComponentInstance()" title="Delete Resource Instance"></div>
             </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"
+                        data-tests-id="information-tab"
+                        data-ng-class="{'disabled': disabledTabs}">
+                    <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"
+                        data-ng-if="!isPNF() && !isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
+                        data-ng-class="{'disabled': disabledTabs}">
+                    <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() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? '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"
+                        data-ng-class="{'disabled': disabledTabs}">
+                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new"
+                        ng-class="selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'properties': 'inputs'"></div>
+                </button>
+                <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
+                        data-ui-sref="workspace.composition.artifacts"
+                        data-ng-if="!isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
+                        tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information Artifacts"
+                        data-ng-class="{'disabled': disabledTabs}">
+                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div>
+                </button>
+                <button data-ng-if="!selectedComponent.isService() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" 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"
+                        data-tests-id="requirements-and-capabilities"
+                        tooltip-content="Requirements and Capabilities"
+                        data-ng-class="{'disabled': disabledTabs}">
+                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div>
+                </button>
+                <button data-ng-if="selectedComponent.isService() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" 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"
+                        data-ng-class="{'disabled': disabledTabs}">
+                    <div class="i-sdc-designer-sidebar-tab-icon sprite-new api"></div>
+                </button>
 
-        <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"
-                    data-tests-id="information-tab"
-                    data-ng-class="{'disabled': disabledTabs}">
-                <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"
-                    data-ng-if="!isPNF() && !isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
-                    data-ng-class="{'disabled': disabledTabs}">
-                <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() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? '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"
-                    data-ng-class="{'disabled': disabledTabs}">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new"
-                     ng-class="selectedComponent.isResource() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy()) ? 'properties': 'inputs'"></div>
-            </button>
-            <button class="i-sdc-designer-sidebar-tab" data-ui-sref-active="active"
-                    data-ui-sref="workspace.composition.artifacts"
-                    data-ng-if="!isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())"
-                    tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Information Artifacts"
-                    data-ng-class="{'disabled': disabledTabs}">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new information-artifacts"></div>
-            </button>
-            <button data-ng-if="!selectedComponent.isService() || (isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" 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"
-                    data-tests-id="requirements-and-capabilities"
-                    tooltip-content="Requirements and Capabilities"
-                    data-ng-class="{'disabled': disabledTabs}">
-                <div class="i-sdc-designer-sidebar-tab-icon sprite-new relations"></div>
-            </button>
-            <button data-ng-if="selectedComponent.isService() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())" 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"
-                    data-ng-class="{'disabled': disabledTabs}">
-                <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>
 
         </div>
 
-        <div data-ui-view="" class="w-sdc-designer-sidebar-tab-content-view"></div>
+        <!-- Solution for now to support policies and groups working with Angular 2 components -->
+        <!-- isCertified not relevant for group or policy -->
+        <!-- (selectedZoneInstanceType === ZoneInstanceType.GROUP || selectedZoneInstanceType === ZoneInstanceType.POLICY) -->
+        <div ng-if="selectedZoneInstance">
+            
+            <ng2-composition-panel
+                [is-loading]="isLoading"
+                [is-view-only]="isViewOnly || isCanvasTagging"
+                [selected-zone-instance-name]="selectedZoneInstance.instanceData.name"
+                [selected-zone-instance-id]="selectedZoneInstance.instanceData.uniqueId"
+                [selected-zone-instance-type]="selectedZoneInstance.type"
+                [topology-template]="currentComponent"
+            >
+            </ng2-composition-panel>
+        </div>       
 
         <loader data-display="isLoadingRightPanel" relative="true" size="medium"></loader>