1 files changed, 76 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/view-models/component-viewer/properties/product-properties-view.html b/catalog-ui/app/scripts/view-models/component-viewer/properties/product-properties-view.html
new file mode 100644
index 0000000000..8aeda603f8
--- /dev/null
+++ b/catalog-ui/app/scripts/view-models/component-viewer/properties/product-properties-view.html
@@ -0,0 +1,76 @@
+<div class="w-sdc-component-viewer-right-properties">
+
+    <h4 class="w-sdc-resource-viewer-right-title">General Information</h4>
+    <div class="w-sdc-resource-viewer-right-content-section">
+        <div class='sdc-resource-viewer-sidebar-section-content-column-1'>
+            <div class="sdc-resource-viewer-sidebar-section-content-item">
+                <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_TYPE"></span>
+                <span class="sdc-resource-viewer-sidebar-section-content-item-value" translate="GENERAL_LABEL_PRODUCT"></span>
+            </div>
+            <div class="sdc-resource-viewer-sidebar-section-content-item">
+                <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_VERSION"></span>
+                <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.version"></span>
+            </div>
+            <div class="sdc-resource-viewer-sidebar-section-content-item">
+                <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CATEGORY"></span>
+                <span class="sdc-resource-viewer-sidebar-section-content-item-value" tooltips tooltip-content="{{component.category}}" data-ng-bind="component.category"></span>
+            </div>
+            <div class="sdc-resource-viewer-sidebar-section-content-item">
+                <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CREATION_DATE"></span>
+                <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.creationDate | date: 'MM/dd/yyyy'"></span>
+            </div>
+            <div class="sdc-resource-viewer-sidebar-section-content-item">
+                <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_AUTHOR"></span>
+                <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.creatorFullName"></span>
+            </div>
+            <div class="sdc-resource-viewer-sidebar-section-content-item">
+                <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_CONTACT_ID"></span>
+                <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.contacts[0]"></span>
+            </div>
+            <div class="sdc-resource-viewer-sidebar-section-content-item">
+                <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_PROJECT_CODE"></span>
+                <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.projectCode"></span>
+            </div>
+            <div class="sdc-resource-viewer-sidebar-section-content-item">
+                <span class="sdc-resource-viewer-sidebar-section-content-item-label">Life Cycle Status:</span>
+                <span class="sdc-resource-viewer-sidebar-section-content-item-value">
+                    {{sdcMenu.LifeCycleStatuses[component.lifecycleState].text}}
+                </span>
+            </div>
+            <div class="sdc-resource-viewer-sidebar-section-content-item">
+                <span class="sdc-resource-viewer-sidebar-section-content-item-label">Distribution Status:</span>
+                <span class="sdc-resource-viewer-sidebar-section-content-item-value">
+                    {{sdcMenu.DistributionStatuses[component.distributionStatus].text}}
+                </span>
+            </div>
+        </div>
+        <div class='sdc-resource-viewer-sidebar-section-content-column-2'>
+            <div class="sdc-resource-viewer-sidebar-section-content-item description">
+                <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_DESCRIPTION"></span>
+                <span class="sdc-resource-viewer-sidebar-section-content-item-value" data-ng-bind="component.description"></span>
+            </div>
+            <div class="sdc-resource-viewer-sidebar-section-content-item" >
+                <span class="sdc-resource-viewer-sidebar-section-content-item-label" translate="GENERAL_LABEL_TAGS"></span>
+                    <span tooltips tooltip-content="{{component.tags.join(', ')}}" class="sdc-resource-viewer-sidebar-section-content-tags" data-ng-repeat="(tag, tagName) in component.tags">
+                        {{tagName}}{{$last ? '' : ','}}
+                    </span>
+            </div>
+        </div>
+    </div>
+    <h4 class="w-sdc-resource-viewer-right-title">Additional Information</h4>
+
+    <div class="sdc-properties-container w-sdc-resource-viewer-right-content-section">
+        <table class="w-sdc-resource-viewer-right-table" data-ng-show="additionalInformations.length">
+            <thead class="w-sdc-resource-viewer-right-table-head">
+                <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Key</th>
+                <th class="w-sdc-resource-viewer-right-table-head-cell cols-2">Value</th>
+            </thead>
+            <tbody>
+            <tr data-ng-repeat="additionalInformation in additionalInformations">
+                <td><span class="ellipsis-cols2" tooltips tooltip-content="{{additionalInformation.key}}">{{additionalInformation.key}}</span></td>
+                <td><span class="ellipsis-cols2" tooltips tooltip-content="{{additionalInformation.value}}">{{additionalInformation.value}}</span></td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</div>