From 631a3336657c60ad0f77f6afb350d4686814a3fd Mon Sep 17 00:00:00 2001
From: Hugues Chocart <chocart.hugues@icloud.com>
Date: Thu, 16 May 2024 17:06:00 -0300
Subject: [PATCH] fix: exernal user display (#319)

---
 .../components/analytics/AnalyticsCard.tsx    | 18 +++++-----
 .../frontend/components/analytics/BarList.tsx | 10 +++---
 packages/frontend/pages/analytics.tsx         | 33 ++++++++++++++++---
 packages/frontend/pages/users/index.tsx       | 13 ++++++--
 4 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/packages/frontend/components/analytics/AnalyticsCard.tsx b/packages/frontend/components/analytics/AnalyticsCard.tsx
index 5870da32..1a25e154 100644
--- a/packages/frontend/components/analytics/AnalyticsCard.tsx
+++ b/packages/frontend/components/analytics/AnalyticsCard.tsx
@@ -1,13 +1,15 @@
 import ErrorBoundary from "@/components/blocks/ErrorBoundary"
 import { Card, Text } from "@mantine/core"
 
-const AnalyticsCard = ({ title, children }) => (
-  <Card withBorder>
-    <Text c="dimmed" tt="uppercase" fw={700} fz="xs">
-      {title}
-    </Text>
-    <ErrorBoundary>{children}</ErrorBoundary>
-  </Card>
-)
+function AnalyticsCard({ title, children }) {
+  return (
+    <Card withBorder style={{ "&:children": { maxWidth: "100%" } }}>
+      <Text c="dimmed" tt="uppercase" fw={700} fz="xs">
+        {title}
+      </Text>
+      <ErrorBoundary>{children}</ErrorBoundary>
+    </Card>
+  )
+}
 
 export default AnalyticsCard
diff --git a/packages/frontend/components/analytics/BarList.tsx b/packages/frontend/components/analytics/BarList.tsx
index b111f8c3..98c7ae3c 100644
--- a/packages/frontend/components/analytics/BarList.tsx
+++ b/packages/frontend/components/analytics/BarList.tsx
@@ -19,12 +19,12 @@ type BarListProps = {
 
 // A table of progress bars, with the progress value the proportion relative to the total
 // and the second column the value of the bar
-const BarList = ({
+function BarList({
   data,
   columns,
   customMetric,
   filterZero = true,
-}: BarListProps) => {
+}: BarListProps) {
   const dataColumns = columns.filter((col) => !col.bar && col.key)
   const main = dataColumns.find((col) => col.main) || dataColumns[0]
   const mainTotal = data.reduce((acc, item) => acc + (item[main.key] || 0), 0)
@@ -63,6 +63,8 @@ const BarList = ({
       )}
 
       <Table
+        layout="fixed"
+        w="100%"
         cellPadding={0}
         horizontalSpacing={0}
         withRowBorders={false}
@@ -131,9 +133,7 @@ const BarList = ({
                     </Table.Td>
                   ) : (
                     <Table.Td key={i}>
-                      <Text>
-                        {render ? render(item[key], item) : item[key]}
-                      </Text>
+                      {render ? render(item[key], item) : item[key]}
                     </Table.Td>
                   ),
                 )}
diff --git a/packages/frontend/pages/analytics.tsx b/packages/frontend/pages/analytics.tsx
index b8234bac..be774fa1 100644
--- a/packages/frontend/pages/analytics.tsx
+++ b/packages/frontend/pages/analytics.tsx
@@ -15,6 +15,7 @@ import {
   useRunsUsageByDay,
 } from "@/utils/dataHooks"
 import {
+  Anchor,
   Center,
   Container,
   Group,
@@ -22,6 +23,7 @@ import {
   SegmentedControl,
   SimpleGrid,
   Stack,
+  Text,
   Title,
 } from "@mantine/core"
 import { useLocalStorage } from "@mantine/hooks"
@@ -132,10 +134,33 @@ export default function Analytics() {
                   columns={[
                     {
                       name: "User",
-                      render: (u, row) => (
-                        <Group my={-4} gap="sm">
-                          <AppUserAvatar size={30} user={row} />
-                          {formatAppUser(row)}
+                      render: (_, user) => (
+                        <Group
+                          my={-4}
+                          gap="sm"
+                          wrap="nowrap"
+                          style={{
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                          }}
+                        >
+                          <AppUserAvatar size={30} user={user} />
+                          <Text
+                            style={{
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                            }}
+                            size="sm"
+                            px="md"
+                          >
+                            <Anchor
+                              c="inherit"
+                              underline="never"
+                              href={`/users/${user.id}`}
+                            >
+                              {formatAppUser(user)}
+                            </Anchor>
+                          </Text>
                         </Group>
                       ),
                     },
diff --git a/packages/frontend/pages/users/index.tsx b/packages/frontend/pages/users/index.tsx
index 4d5855cf..b7c0e1a6 100644
--- a/packages/frontend/pages/users/index.tsx
+++ b/packages/frontend/pages/users/index.tsx
@@ -25,9 +25,18 @@ const columns = [
       const user = props.row.original
 
       return (
-        <Group gap={8}>
+        <Group gap={8} wrap="nowrap">
           <AppUserAvatar size={30} user={user} />
-          <Text fw={500}>{formatAppUser(user)}</Text>
+          <Text
+            style={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+            size="sm"
+            fw={500}
+          >
+            {formatAppUser(user)}
+          </Text>
         </Group>
       )
     },