fix: improve navigation (wundergraph#554)

pedraumcosta · Feb 19, 2024 · c56ce3c · c56ce3c
1 parent 44a8c7b
commit c56ce3c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/studio/src/components/layout/graph-layout.tsx b/studio/src/components/layout/graph-layout.tsx
@@ -47,6 +47,7 @@ import {
 import { PageHeader } from "./head";
 import { LayoutProps } from "./layout";
 import { NavLink, SideNav } from "./sidenav";
+import { Link } from "../ui/link";
 
 export interface GraphContextProps {
   graph: GetFederatedGraphByNameResponse["graph"];
@@ -298,8 +299,17 @@ export const GraphPageLayout = ({
   children,
   scrollRef,
 }: TitleLayoutProps) => {
+  const router = useRouter();
+
   const breadcrumb = (
-    <div className="-ml-2 flex flex-row items-center space-x-2 text-sm">
+    <div className="flex flex-row items-center space-x-2 text-sm">
+      <Link
+        className="text-muted-foreground hover:text-current"
+        href={`/${router.query.organizationSlug}`}
+      >
+        Home
+      </Link>
+      <span className="text-muted-foreground">/</span>
       <GraphSelect /> <span className="text-muted-foreground">/</span>
       {breadcrumbs?.map((b, i) => (
         <Fragment key={i}>

diff --git a/studio/src/components/layout/subgraph-layout.tsx b/studio/src/components/layout/subgraph-layout.tsx
@@ -35,6 +35,7 @@ import { LayoutProps } from "./layout";
 import { NavLink, SideNav } from "./sidenav";
 import { ChartBarIcon } from "@heroicons/react/24/outline";
 import { Badge } from "../ui/badge";
+import { Link } from "../ui/link";
 
 export interface SubgraphContextProps {
   subgraph: GetSubgraphByNameResponse["graph"];
@@ -227,8 +228,17 @@ export const SubgraphPageLayout = ({
   children,
   scrollRef,
 }: TitleLayoutProps) => {
+  const router = useRouter();
+
   const breadcrumb = (
-    <div className="-ml-2 flex flex-row items-center space-x-2 text-sm">
+    <div className="flex flex-row items-center space-x-2 text-sm">
+      <Link
+        className="text-muted-foreground hover:text-current"
+        href={`/${router.query.organizationSlug}`}
+      >
+        Home
+      </Link>
+      <span className="text-muted-foreground">/</span>
       <SubgraphSelect /> <span className="text-muted-foreground">/</span>
       {breadcrumbs?.map((b, i) => (
         <Fragment key={i}>

diff --git a/studio/src/components/subgraphs-table.tsx b/studio/src/components/subgraphs-table.tsx
@@ -326,6 +326,7 @@ const AddSubgraphUsers = ({
                 <Button
                   variant="ghost"
                   size="icon-sm"
+                  onClick={(e) => e.stopPropagation()}
                   disabled={
                     !isAdmin && !(creatorUserId && creatorUserId === user?.id)
                   }
@@ -419,14 +420,13 @@ export const SubgraphsTable = ({
               }
               return (
                 <TableRow
+                  onClick={() => router.push(path)}
                   key={name}
-                  className="group py-1 even:bg-secondary/20 hover:bg-secondary/40"
+                  className="group cursor-pointer py-1 even:bg-secondary/20 hover:bg-secondary/40"
                 >
                   <TableCell className="px-4 font-medium">{name}</TableCell>
-                  <TableCell className="px-4 text-muted-foreground hover:text-current">
-                    <Link target="_blank" rel="noreferrer" href={routingURL}>
-                      {routingURL}
-                    </Link>
+                  <TableCell className="px-4 text-muted-foreground">
+                    {routingURL}
                   </TableCell>
                   <TableCell className="px-4">
                     <div className="flex space-x-2">
@@ -457,23 +457,19 @@ export const SubgraphsTable = ({
                     <Tooltip delayDuration={200}>
                       <TooltipTrigger asChild>
                         <Button asChild variant="ghost" size="icon-sm">
-                          <Link href={analyticsPath}>
+                          <Link
+                            onClick={(e) => e.stopPropagation()}
+                            href={analyticsPath}
+                          >
                             <ChartBarIcon className="h-4 w-4" />
                           </Link>
                         </Button>
                       </TooltipTrigger>
                       <TooltipContent>Analytics</TooltipContent>
                     </Tooltip>
-                    <Tooltip delayDuration={200}>
-                      <TooltipTrigger asChild>
-                        <Button asChild variant="ghost" size="icon-sm">
-                          <Link href={path}>
-                            <EyeIcon className="h-4 w-4" />
-                          </Link>
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>View Subgraph</TooltipContent>
-                    </Tooltip>
+                    <Button variant="ghost" size="sm" className="table-action">
+                      View
+                    </Button>
                   </TableCell>
                 </TableRow>
               );