Add FeatureData element

frontend/src/component/DiscordChannel.tsx

@@ -1,4 +1,4 @@
-import {Stack, Typography} from "@mui/material";
+import {Stack, Tooltip, Typography} from "@mui/material";
 import React, {useEffect, useState} from "react";
 import {Channel, fetchChannelDetails} from "../service/api";
 import {cache} from "../service/cache";
@@ -21,7 +21,9 @@ export function DiscordChannel({guildId, channelId}: DiscordChannelProps) {
         </Stack>;
     }
 
-    return <Stack direction="row" spacing={2} alignItems="center" height={'100%'}>
-        <Typography>{channel?.name}</Typography>
-    </Stack>;
+    return <Tooltip title={channelId} arrow placement="bottom-start">
+        <Stack direction="row" spacing={2} alignItems="center" height={'100%'}>
+            <Typography>{channel?.name}</Typography>
+        </Stack>
+    </Tooltip>;
 }

frontend/src/component/DiscordUserName.tsx

@@ -1,4 +1,4 @@
-import {Avatar, Stack, Typography} from "@mui/material";
+import {Avatar, Stack, Tooltip, Typography} from "@mui/material";
 import React, {useEffect, useState} from "react";
 import {fetchMemberDetails, MemberDetails} from "../service/api";
 import {getUserAvatar} from "../constants";
@@ -22,8 +22,10 @@ export function DiscordUserName({guildId, userId}: DiscordUsernameProps) {
         </Stack>;
     }
 
-    return <Stack direction="row" spacing={2} alignItems="center" height={'100%'}>
-        <Avatar src={getUserAvatar(member?.id, member?.user.avatar as string)} sx={{ width: 24, height: 24 }}/>
-        <Typography>{member?.nick ?? member?.user.username}</Typography>
-    </Stack>;
+    return <Tooltip title={userId} arrow placement="bottom-start">
+        <Stack direction="row" spacing={2} alignItems="center" height={'100%'}>
+            <Avatar src={getUserAvatar(member?.id, member?.user.avatar as string)} sx={{ width: 24, height: 24 }}/>
+            <Typography>{member?.nick ?? member?.user.username}</Typography>
+        </Stack>
+    </Tooltip>;
 }

frontend/src/component/FeatureData.tsx

@@ -0,0 +1,42 @@
+import {Feature, FeatureName} from "../service/api";
+import {
+    Stack,
+    Typography
+} from "@mui/material";
+import React from "react";
+import {DiscordChannel} from "./DiscordChannel";
+import {FeatureDataTable} from "./FeatureDataTable";
+
+function getCustomizedElement(feature: Feature, guildId: string) {
+    switch (feature.name) {
+        case FeatureName.poopName:
+        case FeatureName.mentions:
+            return <Typography>No data.</Typography>;
+        case FeatureName.joinLogs:
+        case FeatureName.modLogs:
+            return <FeatureDataTable data={{"Target channel": <DiscordChannel guildId={guildId} channelId={feature.data.value} />}} />;
+        case FeatureName.jellyfin:
+        case FeatureName.kavita:
+            return <FeatureDataTable data={{"Create instance channel": feature.data.create_instance_role}} />;
+        case FeatureName.emojiReact:
+            return <FeatureDataTable data={{
+                "Use builtin": feature.data.use_builtin.toString(),
+                "Mode": feature.data.mode.toString(),
+                "Process other bots messages": feature.data.process_other_bots.toString(),
+            }} />;
+        default:
+            return <Typography>Cannot render feature data (type: {feature.name})</Typography>;
+    }
+}
+
+export interface FeatureData {
+    feature: Feature,
+    guildId: string
+}
+
+export function FeatureData({feature, guildId}: FeatureData) {
+    return <Stack direction="column">
+        <Typography fontWeight="bold">Data: </Typography>
+        <Typography>{getCustomizedElement(feature, guildId)}</Typography>
+    </Stack>
+}

frontend/src/component/FeatureDataTable.tsx

@@ -0,0 +1,29 @@
+import {Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@mui/material";
+import React from "react";
+
+export interface FeatureDataTableProps {
+    data: Record<string, any>
+}
+
+export function FeatureDataTable({data}: FeatureDataTableProps) {
+    const headers = [];
+    const cells = [];
+
+    for (const [key, value] of Object.entries(data)) {
+        headers.push(<TableCell align="left">{key}</TableCell>);
+        cells.push(<TableCell align="left">{value}</TableCell>);
+    }
+
+    return <TableContainer component={Paper}>
+        <Table>
+            <TableHead>
+                <TableRow>
+                    {headers}
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                <TableRow>{cells}</TableRow>
+            </TableBody>
+        </Table>
+    </TableContainer>;
+}

frontend/src/page/admin/GuildDetails.tsx

@@ -25,6 +25,7 @@ import {useDebounce} from "use-debounce";
 import {DiscordUserName} from "../../component/DiscordUserName";
 import {formatRelativeTime} from "../../util";
 import {DiscordChannel} from "../../component/DiscordChannel";
+import {FeatureData} from "../../component/FeatureData";
 
 interface GuildDetailsDataProps {
     dataPromise: Promise<GuildDetailsDto>
@@ -52,7 +53,7 @@ function FeaturesPaper({dataPromise}: GuildDetailsDataProps) {
                     <Typography fontWeight="bold" display="inline">Enabled by: </Typography>
                     <DiscordUserName guildId={originalData.id} userId={f.enabledBy} />
                 </Stack>
-                <Typography fontWeight="bold">Data: </Typography><Typography>{JSON.stringify(f.data)}</Typography>
+                <FeatureData feature={f} guildId={originalData.id} />
             </AccordionDetails>
         </Accordion>;
     });
@@ -118,7 +119,7 @@ function ReminderDataPaper({id}: TagsDataPaperProps) {
 
     return <Stack direction="column">
         <Stack direction='row' spacing={{sm: 5}} sx={{p: '5px'}}>
-            <Typography variant='h5'>Tags</Typography>
+            <Typography variant='h5'>Reminders</Typography>
             <TextField id="tag-name-filter" label="Name..." variant="outlined" size='small' onChange={(e) => setSearchQuery(e.target.value)} />
         </Stack>
         <DataGrid rows={reminders?.data ?? []} columns={columns} paginationModel={paginationModel} onPaginationModelChange={setPaginationModel} paginationMode="server" rowCount={reminders?.total ?? -1} />

frontend/src/page/admin/Guilds.tsx

@@ -72,7 +72,7 @@ function Grid() {
                     <Tooltip title={params.value.join(', ')} arrow placement="bottom-start">
                         <Typography>{params.value.length}</Typography>
                     </Tooltip>
-                </GridCell>
+                </GridCell>;
             }
         },
         { field: 'tagsCount', headerName: 'Tags', minWidth: 100 },

frontend/src/service/api.ts

@@ -74,8 +74,18 @@ export interface Tag {
     authorId: boolean,
 }
 
+export enum FeatureName {
+    poopName = 'poop_name',
+    joinLogs = 'join_logs',
+    modLogs = 'mod_logs',
+    jellyfin = 'jellyfin',
+    mentions = 'mentions',
+    kavita = 'kavita',
+    emojiReact = 'emoji_react',
+}
+
 export interface Feature {
-    name: string,
+    name: FeatureName,
     data: any,
     enabledBy: string,
     enabledAt: string,

frontend/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2015",
     "lib": [
       "dom",
       "dom.iterable",