From c8593c23e6a60dfac11114cd4db44bea0154d65c Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 12 Dec 2018 11:59:08 +0100
Subject: [PATCH] show correct createDate for variants, only show contextual
 variant status, only show context variant urls, add variant log colors

---
 .../content/umbcontentnodeinfo.directive.js   | 89 ++++++++++---------
 .../content/umb-content-node-info.html        | 23 ++---
 2 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js
index 31e847f0f6..232e31daee 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbcontentnodeinfo.directive.js
@@ -10,6 +10,8 @@
             var auditTrailLoaded = false;
             var labels = {};
             scope.publishStatus = [];
+            scope.currentVariant = null;
+            scope.currentUrls = [];
 
             scope.disableTemplates = Umbraco.Sys.ServerVariables.features.disabledFeatures.disableTemplates;
             scope.allowChangeDocumentType = false;
@@ -17,6 +19,18 @@
 
             function onInit() {
 
+                // set currentVariant
+                scope.currentVariant = _.find(scope.node.variants, (v) => v.active);
+
+                // find the urls for the currently selected language
+                if(scope.node.variants.length > 1) {
+                    // nodes with variants
+                    scope.currentUrls =  _.filter(scope.node.urls, (url) => scope.currentVariant.language.culture === url.culture);
+                } else {
+                    // invariant nodes
+                    scope.currentUrls =  scope.node.urls;
+                }
+
                 // if there are any infinite editors open we are in infinite editing
                 scope.isInfiniteMode = editorService.getNumberOfEditors() > 0 ? true : false;
 
@@ -50,7 +64,7 @@
                         labels.unsavedChanges = data[5];
                         labels.doctypeChangeWarning = data[6];
 
-                        setNodePublishStatus(scope.node);
+                        setNodePublishStatus();
 
                     });
 
@@ -58,6 +72,9 @@
                     "id": scope.node.id
                 };
 
+                // make sure dates are formatted to the user's locale
+                formatDatesToLocal();
+
                 // get available templates
                 scope.availableTemplates = scope.node.allowedTemplates;
 
@@ -221,12 +238,13 @@
 
             function setAuditTrailLogTypeColor(auditTrail) {
                 angular.forEach(auditTrail, function (item) {
-
                     switch (item.logType) {
                         case "Publish":
+                        case "PublishVariant":
                             item.logTypeColor = "success";
                             break;
                         case "Unpublish":
+                        case "UnpublishVariant":
                         case "Delete":
                             item.logTypeColor = "danger";
                             break;
@@ -236,51 +254,40 @@
                 });
             }
 
-            function setNodePublishStatus(node) {
+            function setNodePublishStatus() {
 
-                scope.publishStatus = [];
+                scope.status = {};
 
                 // deleted node
-                if (node.trashed === true) {
-                    scope.publishStatus.push({
-                        label: labels.deleted,
-                        color: "danger"
-                    });
+                if (scope.node.trashed === true) {
+                    scope.status.color = "danger";
                     return;
                 }
 
-                if (node.variants) {
-                    for (var i = 0; i < node.variants.length; i++) {
-
-                        var variant = node.variants[i];
-
-                        var status = {
-                            culture: variant.language ? variant.language.culture : null
-                        };
-
-                        if (variant.state === "NotCreated") {
-                            status.label = labels.notCreated;
-                            status.color = "gray";
-                        }
-                        else if (variant.state === "Draft") {
-                            // draft node
-                            status.label = labels.unpublished;
-                            status.color = "gray";
-                        }
-                        else if (variant.state === "Published") {
-                            // published node
-                            status.label = labels.published;
-                            status.color = "success";
-                        }
-                        else if (variant.state === "PublishedPendingChanges") {
-                            // published node with pending changes
-                            status.label = labels.publishedPendingChanges;
-                            status.color = "success";
-                        }
-                        
-                        scope.publishStatus.push(status);
-                    }
+                // variant status
+                if (scope.currentVariant.state === "NotCreated") {
+                    // not created
+                    scope.status.color = "gray";
                 }
+                else if (scope.currentVariant.state === "Draft") {
+                    // draft node
+                    scope.status.color = "gray";
+                }
+                else if (scope.currentVariant.state === "Published") {
+                    // published node
+                    scope.status.color = "success";
+                }
+                else if (scope.currentVariant.state === "PublishedPendingChanges") {
+                    // published node with pending changes
+                    scope.status.color = "success";
+                }
+            }
+
+            function formatDatesToLocal() {
+                // get current backoffice user and format dates
+                userService.getCurrentUser().then(function (currentUser) {
+                    scope.currentVariant.createDateFormatted = dateHelper.getLocalDate(scope.currentVariant.createDate, currentUser.locale, 'LLL');
+                });
             }
 
             // load audit trail and redirects when on the info tab
@@ -306,7 +313,7 @@
                     auditTrailLoaded = false;
                     loadAuditTrail();
                     loadRedirectUrls();
-                    setNodePublishStatus(scope.node);
+                    setNodePublishStatus();
                 }
             });
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html
index 429cceb4d9..e880fc0f4e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-content-node-info.html
@@ -2,21 +2,19 @@
 
     <div class="umb-package-details__main-content">
 
-        <umb-box ng-if="node.urls" data-element="node-info-urls">
+        <umb-box ng-if="currentUrls" data-element="node-info-urls">
             <umb-box-header title-key="general_links"></umb-box-header>
             <umb-box-content class="block-form">
                 <ul class="nav nav-stacked" style="margin-bottom: 0;">
-                    <li ng-repeat="url in node.urls">
+                    <li ng-repeat="url in currentUrls">
                         <span ng-if="url.isUrl">
                             <a href="{{url.text}}" target="_blank">
                                 <i class="icon icon-window-popin"></i>
                                 <span>{{url.text}}</span>
                             </a>
-                            <span ng-if="url.culture" style="font-size: 13px; color: #cccccc; margin-left: 20px;">{{url.culture}}</span>
                         </span>
                         <div ng-if="!url.isUrl" style="margin-top: 4px;">
                             <span>{{url.text}}</span>
-                            <span ng-if="url.culture" style="font-size: 13px; color: #cccccc; margin-left: 20px;">{{url.culture}}</span>
                         </div>
                     </li>
                 </ul>
@@ -62,8 +60,9 @@
                     <umb-load-indicator ng-show="loadingAuditTrail"></umb-load-indicator>
 
                     <div ng-show="auditTrail.length === 0" style="padding: 10px;">
-                        <umb-empty-state position="center"
-                                         size="small">
+                        <umb-empty-state 
+                            position="center"
+                            size="small">
                             <localize key="content_noChanges"></localize>
                         </umb-empty-state>
                     </div>
@@ -96,7 +95,6 @@
                                     class="history-item__badge"
                                     size="xs"
                                     color="{{item.logTypeColor}}">
-
                                     <localize key="auditTrails_small{{ item.logType }}">{{ item.logType }}</localize>
                                 </umb-badge>
                                 <span>
@@ -130,16 +128,13 @@
             <umb-box-content class="block-form">
 
                 <umb-control-group data-element="node-info-status" label="@general_status">
-                    <div ng-repeat="status in publishStatus" style="margin-bottom: 5px;">
-                        <span ng-show="status.culture"><em>{{status.culture}}: </em></span>
-                        <umb-badge size="xs" color="{{status.color}}">
-                            {{status.label}}
-                        </umb-badge>
-                    </div>
+                    <umb-badge size="xs" color="{{status.color}}">
+                        <umb-variant-state variant="currentVariant"></umb-variant-state>
+                    </umb-badge>
                 </umb-control-group>
 
                 <umb-control-group ng-show="node.id !== 0" data-element="node-info-create-date" label="@template_createdDate">
-                    {{node.createDateFormatted}} <localize key="general_by">by</localize> {{ node.owner.name }}
+                    {{currentVariant.createDateFormatted}}
                 </umb-control-group>
 
                 <umb-control-group data-element="node-info-document-type" label="@content_documentType">