From 8d47ea63c2aeb2e31798d10dfd7d430da878fa8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 24 Jun 2021 10:40:30 +0200
Subject: [PATCH] Make pinned message text clickable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/messages/_TextualEvent.scss |  5 ++++
 src/{TextForEvent.ts => TextForEvent.tsx} | 34 ++++++++++++++++++++---
 2 files changed, 35 insertions(+), 4 deletions(-)
 rename src/{TextForEvent.ts => TextForEvent.tsx} (96%)

diff --git a/res/css/views/messages/_TextualEvent.scss b/res/css/views/messages/_TextualEvent.scss
index be7565b3c5..e87fed90de 100644
--- a/res/css/views/messages/_TextualEvent.scss
+++ b/res/css/views/messages/_TextualEvent.scss
@@ -17,4 +17,9 @@ limitations under the License.
 .mx_TextualEvent {
     opacity: 0.5;
     overflow-y: hidden;
+
+    a {
+        color: $accent-color;
+        cursor: pointer;
+    }
 }
diff --git a/src/TextForEvent.ts b/src/TextForEvent.tsx
similarity index 96%
rename from src/TextForEvent.ts
rename to src/TextForEvent.tsx
index 649c53664e..ee9bd53250 100644
--- a/src/TextForEvent.ts
+++ b/src/TextForEvent.tsx
@@ -13,6 +13,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
+import React from 'react';
 import {MatrixClientPeg} from './MatrixClientPeg';
 import { _t } from './languageHandler';
 import * as Roles from './Roles';
@@ -20,6 +22,10 @@ import {isValid3pidInvite} from "./RoomInvite";
 import SettingsStore from "./settings/SettingsStore";
 import {ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES} from "./mjolnir/BanList";
 import {WIDGET_LAYOUT_EVENT_TYPE} from "./stores/widgets/WidgetLayoutStore";
+import { RightPanelPhases } from './stores/RightPanelStorePhases';
+import { Action } from './dispatcher/actions';
+import defaultDispatcher from './dispatcher/dispatcher';
+import { SetRightPanelPhasePayload } from './dispatcher/payloads/SetRightPanelPhasePayload';
 
 // These functions are frequently used just to check whether an event has
 // any text to display at all. For this reason they return deferred values
@@ -466,9 +472,29 @@ function textForPowerEvent(event): () => string | null {
     });
 }
 
-function textForPinnedEvent(event): () => string | null {
+function textForPinnedEvent(event): () => JSX.Element | null {
+    if (!SettingsStore.getValue("feature_pinning")) return null;
+
     const senderName = event.sender ? event.sender.name : event.getSender();
-    return () => _t("%(senderName)s changed the pinned messages for the room.", {senderName});
+    const onPinnedMessagesClick = () => {
+        defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+            action: Action.SetRightPanelPhase,
+            phase: RightPanelPhases.PinnedMessages,
+            allowClose: false,
+        });
+    }
+
+    return () => (
+        <span>
+            {
+                _t(
+                    "%(senderName)s changed the <a>pinned messages</a> for the room.",
+                    { senderName },
+                    { "a": (sub) => <a onClick={onPinnedMessagesClick}> { sub } </a> },
+                )
+            }
+        </span>
+    );
 }
 
 function textForWidgetEvent(event): () => string | null {
@@ -594,7 +620,7 @@ function textForMjolnirEvent(event): () => string | null {
 }
 
 interface IHandlers {
-    [type: string]: (ev: any) => (() => string | null);
+    [type: string]: (ev: any) => (() => string | JSX.Element | null);
 }
 
 const handlers: IHandlers = {
@@ -635,7 +661,7 @@ export function hasText(ev): boolean {
     return Boolean(handler?.(ev));
 }
 
-export function textForEvent(ev): string {
+export function textForEvent(ev): string | JSX.Element {
     const handler = (ev.isState() ? stateHandlers : handlers)[ev.getType()];
     return handler?.(ev)?.() || '';
 }