Make pinned message text clickable

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

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;
+    }
 }

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)?.() || '';
 }