feat: user names are now clickable (#757)

lunary-ai · Feb 10, 2025 · 958110b · 958110b
1 parent d359142
commit 958110b
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 25 deletions.
diff --git a/bun.lock b/bun.lock
@@ -710,7 +710,7 @@
 
     "combined-stream": ["[email protected]", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
 
-    "commander": ["[email protected].1", "", {}, "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA=="],
+    "commander": ["[email protected].0", "", {}, "sha512-zP4jEKbe8SHzKJYQmq8Y9gYjtO/POJLgIdKgV7B9qNmABVFVc+ctqSX6iXh4mCpJfRBOabiZ2YKPg8ciDw6C+Q=="],
 
     "compromise": ["[email protected]", "", { "dependencies": { "efrt": "2.7.0", "grad-school": "0.0.5", "suffix-thumb": "5.0.2" } }, "sha512-QdbJwronwxeqb7a5KFK/+Y5YieZ4PE1f7ai0vU58Pp4jih+soDCBMuKVbhDEPQ+6+vI3vSiG4UAAjTAXLJw1Qw=="],
 
@@ -1250,7 +1250,7 @@
 
     "postgres": ["[email protected]", "", {}, "sha512-cDWgoah1Gez9rN3H4165peY9qfpEo+SA61oQv65O3cRUE1pOEoJWwddwcqKE8XZYjbblOJlYDlLV4h67HrEVDg=="],
 
-    "posthog-js": ["posthog-js@1.215.6", "", { "dependencies": { "core-js": "^3.38.1", "fflate": "^0.4.8", "preact": "^10.19.3", "web-vitals": "^4.2.0" } }, "sha512-OWfLYXaGNZDfKnNo9h2jifV1rsqhSfZzHw6/W6IOSk8Cq2nidIPUm89mutk7zbzPPmnVTV8eqPCfhFaoHZZKLw=="],
+    "posthog-js": ["posthog-js@1.216.1", "", { "dependencies": { "core-js": "^3.38.1", "fflate": "^0.4.8", "preact": "^10.19.3", "web-vitals": "^4.2.0" } }, "sha512-ZJxSfA1caZHxVTHfL8rNqwGGUq1JEgKq2/dIwnJ9hHaiv6ALAbc8Rm7Zda8SpTqKk/pEcwrdwY3LYAj2FF3K8w=="],
 
     "preact": ["[email protected]", "", {}, "sha512-jLdZDb+Q+odkHJ+MpW/9U5cODzqnB+fy2EiHSZES7ldV5LK7yjlVzTp7R8Xy6W6y75kfK8iWYtFVH7lvjwrCMA=="],
 
@@ -1478,7 +1478,7 @@
 
     "tween-functions": ["[email protected]", "", {}, "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA=="],
 
-    "type-fest": ["[email protected].0", "", {}, "sha512-Qcg88ZJsJvRcUijtD6supagRSDf0y1FPZh4NroJpwRkoPYj6gGNidREwTgDuC0Pmq0PVAAzL8C8BZW7xhx5Q4A=="],
+    "type-fest": ["[email protected].1", "", {}, "sha512-6kSc32kT0rbwxD6QL1CYe8IqdzN/J/ILMrNK+HMQCKH3insCDRY/3ITb0vcBss0a3t72fzh2YSzj8ko1HgwT3g=="],
 
     "type-is": ["[email protected]", "", { "dependencies": { "media-typer": "0.3.0", "mime-types": "~2.1.24" } }, "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g=="],
 
@@ -1574,7 +1574,7 @@
 
     "@aws-crypto/util/@smithy/util-utf8": ["@smithy/[email protected]", "", { "dependencies": { "@smithy/util-buffer-from": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A=="],
 
-    "@grpc/proto-loader/long": ["long@5.2.4", "", {}, "sha512-qtzLbJE8hq7VabR3mISmVGtoXP8KGc2Z/AT8OuqlYD7JTR3oqrgwdjnk07wpj1twXxYmgDXgoKVWUG/fReSzHg=="],
+    "@grpc/proto-loader/long": ["long@5.3.0", "", {}, "sha512-5vvY5yF1zF/kXk+L94FRiTDa1Znom46UjPCH6/XbSvS8zBKMFBHTJk8KDMqJ+2J6QezQFi7k1k8v21ClJYHPaw=="],
 
     "@ibm-cloud/watsonx-ai/@types/node": ["@types/[email protected]", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-UIksWtThob6ZVSyxcOqCLOUNg/dyO1Qvx4McgeuhrEtHTLFTf7BBhEazaE4K806FGTPtzd/2sE90qn4fVr7cyw=="],
 
@@ -1644,7 +1644,7 @@
 
     "prop-types/react-is": ["[email protected]", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
-    "protobufjs/long": ["long@5.2.4", "", {}, "sha512-qtzLbJE8hq7VabR3mISmVGtoXP8KGc2Z/AT8OuqlYD7JTR3oqrgwdjnk07wpj1twXxYmgDXgoKVWUG/fReSzHg=="],
+    "protobufjs/long": ["long@5.3.0", "", {}, "sha512-5vvY5yF1zF/kXk+L94FRiTDa1Znom46UjPCH6/XbSvS8zBKMFBHTJk8KDMqJ+2J6QezQFi7k1k8v21ClJYHPaw=="],
 
     "raw-body/http-errors": ["[email protected]", "", { "dependencies": { "depd": "2.0.0", "inherits": "2.0.4", "setprototypeof": "1.2.0", "statuses": "2.0.1", "toidentifier": "1.0.1" } }, "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ=="],
 
@@ -1658,8 +1658,6 @@
 
     "simple-swizzle/is-arrayish": ["[email protected]", "", {}, "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="],
 
-    "swagger-jsdoc/commander": ["[email protected]", "", {}, "sha512-zP4jEKbe8SHzKJYQmq8Y9gYjtO/POJLgIdKgV7B9qNmABVFVc+ctqSX6iXh4mCpJfRBOabiZ2YKPg8ciDw6C+Q=="],
-
     "wrap-ansi/ansi-styles": ["[email protected]", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
     "z-schema/commander": ["[email protected]", "", {}, "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug=="],

diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "build:frontend": "bun --filter './packages/frontend' build",
     "migrate:db": "bun --filter './packages/backend' migrate:db",
     "dev": "bun --elide-lines 0 --filter '*' dev ",
-    "test": "bun --filter './packages/e2e' test"
+    "test": "bun --filter './packages/e2e' test",
+    "clean": "rm -rf bun.lock & rm -rf node_modules &&  rm -rf packages/frontend/node_modules && rm -rf packages/backend/node_modules && rm -rf packages/frontend/.next && rm -rf packages/e2e/node_modules"
   },
   "workspaces": [
     "packages/*"

diff --git a/packages/frontend/components/blocks/AppUserAvatar/index.tsx b/packages/frontend/components/blocks/AppUserAvatar/index.tsx
@@ -17,31 +17,32 @@ const colors = [
   "green",
 ];
 
-function AppUserAvatar({
-  user,
-  size = "md",
-  withName = false,
-  maw,
-}: {
+interface AppUserAvatarProps {
   user: any;
   size?: any;
   withName?: boolean;
   maw?: string;
-}) {
-  // use user.id (int) as seed for random color
-  const color = colors[user?.id % colors.length];
+  withLink?: boolean;
+}
 
+function AppUserAvatar({
+  user,
+  size = "md",
+  withName = false,
+  maw,
+  withLink = false,
+}: AppUserAvatarProps) {
   if (!user) return null;
 
+  // Use user.id as a seed for the random color
+  const color = colors[user.id % colors.length];
   const nameOrEmail = formatAppUser(user);
 
-  return (
-    <Group gap="xs" wrap="nowrap" maw={maw ? maw : "auto"}>
-      <Anchor className={styles.anchor} href={`/users/${user.id}`} miw="25px">
-        <Avatar lh={0.4} radius="xl" color={color} size={size}>
-          {nameOrEmail?.slice(0, 2)?.toUpperCase()}
-        </Avatar>
-      </Anchor>
+  const content = (
+    <Group gap="xs" wrap="nowrap" maw={maw || "auto"}>
+      <Avatar lh={0.4} radius="xl" color={color} size={size}>
+        {nameOrEmail?.slice(0, 2)?.toUpperCase()}
+      </Avatar>
       {withName && (
         <Text
           style={{
@@ -57,6 +58,24 @@ function AppUserAvatar({
       )}
     </Group>
   );
+
+  // If withLink is true, wrap the whole element in an Anchor.
+  // Otherwise, simply return the content.
+  return withLink ? (
+    <Anchor
+      href={`/users/${user.id}`}
+      className={styles.anchor}
+      style={{
+        textDecoration: "none",
+        color: "black",
+        display: "inline-block",
+      }}
+    >
+      {content}
+    </Anchor>
+  ) : (
+    content
+  );
 }
 
 export default memo(AppUserAvatar);
diff --git a/packages/frontend/components/blocks/RunInputOutput.tsx b/packages/frontend/components/blocks/RunInputOutput.tsx
@@ -379,7 +379,12 @@ export default function RunInputOutput({
                         name="User"
                         value={run.user}
                         render={(user) => (
-                          <AppUserAvatar size="sm" user={user} withName />
+                          <AppUserAvatar
+                            size="sm"
+                            user={user}
+                            withName
+                            withLink
+                          />
                         )}
                       />
                     )}