From 6cadc8056988e0243c75a6e2911242ce5ce35416 Mon Sep 17 00:00:00 2001
From: shaan1337 <sniper111@gmail.com>
Date: Mon, 20 Mar 2023 14:19:15 +0400
Subject: [PATCH] Update UI to handle redacted events

---
 src/js/modules/streams/templates/templates.js             | 8 ++++----
 src/js/modules/streams/views/streams.item.event.tpl.html  | 6 +++++-
 src/js/modules/streams/views/streams.item.events.tpl.html | 5 ++++-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/js/modules/streams/templates/templates.js b/src/js/modules/streams/templates/templates.js
index 88ed7c34..f1a0f5f0 100644
--- a/src/js/modules/streams/templates/templates.js
+++ b/src/js/modules/streams/templates/templates.js
@@ -30,9 +30,9 @@ try {
 }
 module.run(['$templateCache', function($templateCache) {
   $templateCache.put('streams.item.event.tpl.html',
-    '<header class=page-header><h2 class=page-title>{{ evt.title }} <small ng-if=isNotTheSame>Link from {{ evt.positionEventNumber + \'@\' + evt.positionStreamId }}</small></h2><ul class=page-nav><li class=page-nav__item><a ng-if=evt ui-sref="^.addStreamEvent({ fromEvent: evt })">Add New Like This</a></li><li class=page-nav__item><a ui-sref=^.events>Back</a></li></ul></header><ul class=page-nav style="padding:0rem 0rem 2rem 0rem !important"><li class=page-nav__item><button ng-disabled=!prev ui-sref=".({streamId: evt.streamId, eventNumber: evt.positionEventNumber - 1})">prev</button></li><li class=page-nav__item><button ng-disabled=!next ui-sref=".({streamId: evt.streamId, eventNumber: evt.positionEventNumber + 1})">next</button></li></ul><br><table><thead><tr><th>No</th><th>Stream</th><th>Type</th><th>Timestamp</th></tr></thead><tbody ng-hide=hasEvent><tr><td colspan=5><em>Event does not exist for stream: {{streamId}}</em></td></tr></tbody><tbody ng-show=hasEvent><tr><td>{{ evt.eventNumber }}</td><td><a ui-sref="^.events({streamId: evt.streamId})">{{ evt.streamId }}</a></td><td>{{ evt.eventType }}</td><td>{{ evt.updated | date:\'yyyy-MM-dd HH:mm:ss\'}}</td></tr><tr ng-if="evt.isJson || evt.isMetaData || evt.isLinkMetaData"><td colspan=4><div ng-if=evt.isJson><strong>Data</strong><pre>\n' +
+    '<header class=page-header><h2 class=page-title>{{ evt.title }} <small ng-if=isNotTheSame>Link from {{ evt.positionEventNumber + \'@\' + evt.positionStreamId }}</small></h2><ul class=page-nav><li class=page-nav__item><a ng-if=evt ui-sref="^.addStreamEvent({ fromEvent: evt })">Add New Like This</a></li><li class=page-nav__item><a ui-sref=^.events>Back</a></li></ul></header><ul class=page-nav style="padding:0rem 0rem 2rem 0rem !important"><li class=page-nav__item><button ng-disabled=!prev ui-sref=".({streamId: evt.streamId, eventNumber: evt.positionEventNumber - 1})">prev</button></li><li class=page-nav__item><button ng-disabled=!next ui-sref=".({streamId: evt.streamId, eventNumber: evt.positionEventNumber + 1})">next</button></li></ul><br><table><thead><tr><th>No</th><th>Stream</th><th>Type</th><th>Timestamp</th></tr></thead><tbody ng-hide=hasEvent><tr><td colspan=5><em>Event does not exist for stream: {{streamId}}</em></td></tr></tbody><tbody ng-show=hasEvent><tr><td>{{ evt.eventNumber }}</td><td><a ui-sref="^.events({streamId: evt.streamId})">{{ evt.streamId }}</a></td><td>{{ evt.eventType }}</td><td>{{ evt.updated | date:\'yyyy-MM-dd HH:mm:ss\'}}</td></tr><tr ng-if="evt.isJson || evt.isMetaData || evt.isLinkMetaData"><td colspan=4><div ng-if=evt.isJson><strong>Data</strong><pre ng-if=!evt.isRedacted>\n' +
     '{{ evt.data }}\n' +
-    '				</pre></div><div ng-if=evt.isMetaData><strong>Metadata</strong><pre>\n' +
+    '				</pre><span class=note--warning ng-if=evt.isRedacted>This event\'s data was redacted</span></div><div ng-if=evt.isMetaData><strong>Metadata</strong><pre>\n' +
     '{{ evt.metaData }}\n' +
     '				</pre></div><div ng-if=evt.isLinkMetaData><strong>Link metadata</strong><pre>\n' +
     '{{ evt.content.linkMetaData }}\n' +
@@ -48,9 +48,9 @@ try {
 }
 module.run(['$templateCache', function($templateCache) {
   $templateCache.put('streams.item.events.tpl.html',
-    '<table><thead><tr><th>Event #</th><th>Name</th><th>Type</th><th>Created Date</th><th></th></tr></thead><tbody ng-repeat="event in streams track by $index"><tr ng-class="{ \'invalid\': !event.streamId }"><td><a ng-if=event.streamId ui-sref="^.event({streamId: event.streamId, eventNumber: event.eventNumber})">{{ event.positionEventNumber }}</a><text ng-if=!event.streamId>{{ event.positionEventNumber }}</text></td><td><a ng-if=event.streamId ui-sref="^.event({streamId: event.streamId, eventNumber: event.eventNumber})">{{ event.title }}</a><text ng-if=!event.streamId>{{ event.title }}</text></td><td>{{ event.eventType }}</td><td>{{ event.updated | date:\'yyyy-MM-dd HH:mm:ss\'}}</td><td><a ng-click="toggleJson($event, event)" style="cursor: pointer;" ng-if="event.isJson || event.isLinkMetaData || event.isMetaData">JSON</a></td></tr><tr ng-show=event.showJson><td colspan=5><div ng-if=event.isJson><strong>Data</strong><pre>\n' +
+    '<table><thead><tr><th>Event #</th><th>Name</th><th>Type</th><th>Created Date</th><th></th></tr></thead><tbody ng-repeat="event in streams track by $index"><tr ng-class="{ \'invalid\': !event.streamId }"><td><a ng-if=event.streamId ui-sref="^.event({streamId: event.streamId, eventNumber: event.eventNumber})">{{ event.positionEventNumber }}</a><text ng-if=!event.streamId>{{ event.positionEventNumber }}</text></td><td><a ng-if=event.streamId ui-sref="^.event({streamId: event.streamId, eventNumber: event.eventNumber})">{{ event.title }}</a><text ng-if=!event.streamId>{{ event.title }}</text></td><td>{{ event.eventType }}</td><td>{{ event.updated | date:\'yyyy-MM-dd HH:mm:ss\'}}</td><td><a ng-click="toggleJson($event, event)" style="cursor: pointer;" ng-if="event.isJson || event.isLinkMetaData || event.isMetaData">JSON</a></td></tr><tr ng-show=event.showJson><td colspan=5><div ng-if=event.isJson><strong>Data</strong><pre ng-if=!event.isRedacted>\n' +
     '{{ event.data }}					\n' +
-    '					</pre></div><div ng-if=event.metaData><strong>Metadata</strong><pre>\n' +
+    '					</pre><span class=note--warning ng-if=event.isRedacted>This event\'s data was redacted</span></div><div ng-if=event.metaData><strong>Metadata</strong><pre>\n' +
     '{{ event.metaData }}					\n' +
     '					</pre></div><div ng-if=event.isLinkMetaData><strong>Link metadata</strong><pre>\n' +
     '{{ event.linkMetaData }}					\n' +
diff --git a/src/js/modules/streams/views/streams.item.event.tpl.html b/src/js/modules/streams/views/streams.item.event.tpl.html
index 6c75b072..72bf9d5e 100644
--- a/src/js/modules/streams/views/streams.item.event.tpl.html
+++ b/src/js/modules/streams/views/streams.item.event.tpl.html
@@ -49,9 +49,13 @@ <h2 class="page-title">
 		<tr ng-if="evt.isJson || evt.isMetaData || evt.isLinkMetaData">
 			<td colspan="4">
 				<div ng-if="evt.isJson">
-				<strong>Data</strong><pre>
+				<strong>Data</strong>
+				<pre ng-if="!evt.isRedacted">
 {{ evt.data }}
 				</pre>
+				<span class="note--warning" ng-if="evt.isRedacted">
+This event's data was redacted
+				</span>
 				</div>
 				<div ng-if="evt.isMetaData">
 				<strong>Metadata</strong><pre>
diff --git a/src/js/modules/streams/views/streams.item.events.tpl.html b/src/js/modules/streams/views/streams.item.events.tpl.html
index 728cc5dd..84614cb0 100644
--- a/src/js/modules/streams/views/streams.item.events.tpl.html
+++ b/src/js/modules/streams/views/streams.item.events.tpl.html
@@ -30,9 +30,12 @@
 			<td colspan="5">
 				<div ng-if="event.isJson">
 					<strong>Data</strong>
-					<pre>
+					<pre ng-if="!event.isRedacted">
 {{ event.data }}					
 					</pre>
+					<span class="note--warning" ng-if="event.isRedacted">
+						This event's data was redacted
+					</span>
 				</div>
 				<div ng-if="event.metaData">
 					<strong>Metadata</strong>