add a warning banner on 'replaced' images linking to the child image(s) that replace it

Author: twrichards

kahuna/public/js/components/gr-image-usage/gr-image-usage-list.html

@@ -13,7 +13,7 @@
             <span ng-if="usage.childUsageMetadata" ng-switch="usage.status">
                 <span ng-switch-when="derivative">Used to create</span>
                 <span ng-switch-when="replaced">Replaced with</span>
-                <a href="{{usage.childUsageMetadata.childMediaId}}" rel="noopener" target="_blank">{{usage.childUsageMetadata.childMediaId}}</a>
+                <a href="{{usage.childUsageMetadata.childMediaId}}">{{usage.childUsageMetadata.childMediaId}}</a>
                 (added by {{usage.childUsageMetadata.addedBy}}).
             </span>
 

kahuna/public/js/image/controller.js

@@ -159,6 +159,10 @@ image.controller('ImageCtrl', [
     ctrl.optimisedImageUri = optimisedImageUri;
     ctrl.lowResImageUri = lowResImageUri;
 
+    ctrl.maybeReplacedByMediaIds = image.data.usages.data
+    .filter(usage => usage.data.status === "replaced")
+    .map(usage => usage.data.childUsageMetadata.childMediaId);
+
     ctrl.singleImageList = ctrl.image ? new List([ctrl.image]) : new List([]);
 
     editsService.canUserEdit(ctrl.image).then(editable => {

kahuna/public/js/image/view.html

@@ -169,6 +169,11 @@
 
 <div class="image-holder" role="main" aria-label="Image view">
     <div class="easel">
+        <div class="warning" ng-if="ctrl.maybeReplacedByMediaIds.length > 0">
+            This image has been <strong>replaced</strong> by <span ng-repeat="mediaId in ctrl.maybeReplacedByMediaIds">
+                <a href="{{mediaId}}">{{mediaId}}</a>&nbsp;
+            </span>
+        </div>
         <div class="easel__canvas"
              ng-if="!ctrl.crop"
              draggable="true"

kahuna/public/stylesheets/main.css

@@ -884,6 +884,10 @@ textarea.ng-invalid {
 .warning--small {
   padding: 5px 10px;
 }
+.warning a{
+  color: black;
+  text-decoration: underline;
+}
 
 .full-error {
     margin-top: 3rem;
@@ -2007,6 +2011,10 @@ FIXME: what to do with touch devices
     vertical-align: middle;
     overflow: hidden;
 }
+.warning + .easel__canvas { /* when an easel__canvas follows a warning banner */
+  height: calc(100vh - 134px); /* viewport - (top-bar + warning) */
+  margin: 10px;
+}
 
 .easel__image-container {
     /*style rules also affect the cropper preview*/