Merge pull request #1021 from rjmacarthy/feature/admin-user-link

website: Add link to user admin page in messages dropdown for admin users

website/public/locales/en/message.json

@@ -9,5 +9,6 @@
   "report_placeholder": "Why should this message be reviewed?",
   "report_title": "Report",
   "send_report": "Send",
-  "submit_labels": "Submit"
+  "submit_labels": "Submit",
+  "view_user": "View user"
 }

website/src/components/Messages/MessageTable.stories.tsx

@@ -1,3 +1,4 @@
+import { SessionProvider } from "next-auth/react";
 import React from "react";
 import { Message } from "src/types/Conversation";
 
@@ -18,7 +19,11 @@ const Template = ({
   enableLink: boolean;
   highlightLastMessage: boolean;
 }) => {
-  return <MessageTable messages={messages} enableLink={enableLink} highlightLastMessage={highlightLastMessage} />;
+  return (
+    <SessionProvider>
+      <MessageTable messages={messages} enableLink={enableLink} highlightLastMessage={highlightLastMessage} />;
+    </SessionProvider>
+  );
 };
 
 export const Default = Template.bind({});

website/src/components/Messages/MessageTableEntry.stories.tsx

@@ -1,3 +1,4 @@
+import { SessionProvider } from "next-auth/react";
 import React from "react";
 import { Message } from "src/types/Conversation";
 
@@ -10,7 +11,11 @@ export default {
 };
 
 const Template = ({ enabled, highlight, ...message }) => {
-  return <MessageTableEntry message={message as Message} enabled={enabled} highlight={highlight} />;
+  return (
+    <SessionProvider>
+      <MessageTableEntry message={message as Message} enabled={enabled} highlight={highlight} />;
+    </SessionProvider>
+  );
 };
 
 export const Default = Template.bind({});

website/src/components/Messages/MessageTableEntry.tsx

@@ -14,8 +14,9 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { boolean } from "boolean";
-import { ClipboardList, Flag, MessageSquare, MoreHorizontal } from "lucide-react";
+import { ClipboardList, Flag, MessageSquare, MoreHorizontal, User } from "lucide-react";
 import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { LabelMessagePopup } from "src/components/Messages/LabelPopup";
@@ -109,7 +110,7 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
             userEmoji={emojiState.user_emojis}
             onLabel={showLabelPopup}
             onReport={showReportPopup}
-            messageId={message.id}
+            message={message}
           />
           <LabelMessagePopup messageId={message.id} show={labelPopupOpen} onClose={closeLabelPopup} />
           <ReportPopup messageId={message.id} show={reportPopupOpen} onClose={closeReportPopup} />
@@ -142,16 +143,17 @@ const MessageActions = ({
   userEmoji,
   onLabel,
   onReport,
-  messageId,
+  message,
 }: {
   react: (emoji: string, state: boolean) => void;
   userEmoji: string[];
   onLabel: () => void;
   onReport: () => void;
-  messageId: string;
+  message: Message;
 }) => {
   const { t } = useTranslation("message");
-
+  const { data } = useSession() || {};
+  const role = data?.user?.role;
   return (
     <Menu>
       <MenuButton>
@@ -173,9 +175,17 @@ const MessageActions = ({
           {t("report_action")}
         </MenuItem>
         <MenuDivider />
-        <MenuItem as="a" href={`/messages/${messageId}`} target="_blank" icon={<MessageSquare />}>
+        <MenuItem as="a" href={`/messages/${message.id}`} target="_blank" icon={<MessageSquare />}>
           {t("open_new_tab_action")}
         </MenuItem>
+        {role === "admin" && (
+          <>
+            <MenuDivider />
+            <MenuItem as="a" href={`/admin/manage_user/${message.user_id}`} target="_blank" icon={<User />}>
+              {t("view_user")}
+            </MenuItem>
+          </>
+        )}
       </MenuList>
     </Menu>
   );

website/src/components/Messages/MessageWithChildren.stories.tsx

@@ -1,4 +1,6 @@
 import { rest } from "msw";
+import { SessionProvider } from "next-auth/react";
+
 import { MessageWithChildren } from "./MessageWithChildren";
 
 // eslint-disable-next-line import/no-anonymous-default-export
@@ -28,7 +30,11 @@ export default {
   },
 };
 
-const Template = (args) => <MessageWithChildren {...args} />;
+const Template = (args) => (
+  <SessionProvider>
+    <MessageWithChildren {...args} />;
+  </SessionProvider>
+);
 
 export const NoChildren = Template.bind({});
 NoChildren.args = {

website/src/types/Conversation.ts

@@ -18,6 +18,7 @@ export interface Message extends MessageEmojis {
   created_date: string; // iso date string
   parent_id: string;
   frontend_message_id?: string;
+  user_id: string;
 }
 
 export interface Conversation {