feat(studio): clearer table row actions (supabase#40170)

* files

* TableLink component

* triggers

* shared style instead

* remove bold

* revert medium on trigger

Author: dnywh

apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx

@@ -4,8 +4,8 @@ import { Copy, Edit, Edit2, FileText, MoreVertical, Trash } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
-import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useDatabaseFunctionsQuery } from 'data/database-functions/database-functions-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
@@ -109,15 +109,19 @@ const FunctionList = ({
             <TableCell className="truncate">
               <Button
                 type="text"
-                className="text-foreground text-sm p-0 hover:bg-transparent"
+                className="text-link-table-cell text-sm p-0 hover:bg-transparent title"
                 onClick={() => editFunction(x)}
+                title={x.name}
               >
                 {x.name}
               </Button>
             </TableCell>
             <TableCell className="table-cell">
-              <p title={x.argument_types} className="truncate text-foreground-light">
-                {x.argument_types || '-'}
+              <p
+                title={x.argument_types}
+                className={`truncate ${x.argument_types ? 'text-foreground-light' : 'text-foreground-muted'}`}
+              >
+                {x.argument_types || '–'}
               </p>
             </TableCell>
             <TableCell className="table-cell">

apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx

@@ -2,11 +2,11 @@ import { PostgresTrigger } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { includes, sortBy } from 'lodash'
 import { Check, Copy, Edit, Edit2, MoreVertical, Trash, X } from 'lucide-react'
+import Link from 'next/link'
 
 import { useParams } from 'common'
 import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { InlineLink } from 'components/ui/InlineLink'
 import { useDatabaseTriggersQuery } from 'data/database-triggers/database-triggers-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
@@ -22,9 +22,6 @@ import {
   DropdownMenuTrigger,
   TableCell,
   TableRow,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
 } from 'ui'
 import { generateTriggerCreateSQL } from './TriggerList.utils'
 
@@ -100,28 +97,24 @@ export const TriggerList = ({
       {_triggers.map((x) => (
         <TableRow key={x.id}>
           <TableCell className="space-x-2">
-            <Tooltip>
-              <TooltipTrigger
-                onClick={() => editTrigger(x)}
-                className="cursor-pointer text-foreground truncate max-w-48 inline-block"
-              >
-                {x.name}
-              </TooltipTrigger>
-              <TooltipContent side="bottom" align="center">
-                {x.name}
-              </TooltipContent>
-            </Tooltip>
+            <Button
+              type="text"
+              onClick={() => editTrigger(x)}
+              title={x.name}
+              className="text-link-table-cell text-left text-sm min-w-0 p-0 hover:bg-transparent font-medium max-w-48 title"
+            >
+              {x.name}
+            </Button>
           </TableCell>
 
           <TableCell className="break-all">
             {x.table_id ? (
-              <InlineLink
-                title={x.table}
+              <Link
                 href={`/project/${projectRef}/editor/${x.table_id}`}
-                className="truncate block max-w-40"
+                className="text-link-table-cell block max-w-40 text-foreground-light"
               >
                 {x.table}
-              </InlineLink>
+              </Link>
             ) : (
               <p title={x.table} className="truncate">
                 {x.table}
@@ -131,13 +124,12 @@ export const TriggerList = ({
 
           <TableCell className="space-x-2">
             {x.function_name ? (
-              <InlineLink
-                title={x.function_name}
+              <Link
                 href={`/project/${projectRef}/database/functions?search=${x.function_name}&schema=${x.function_schema}`}
-                className="truncate block max-w-40"
+                className="text-link-table-cell block max-w-40 text-foreground-light"
               >
                 {x.function_name}
-              </InlineLink>
+              </Link>
             ) : (
               <p className="truncate text-foreground-light">-</p>
             )}

apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx

@@ -113,7 +113,13 @@ export const AnalyticsBuckets = () => {
                   {analyticsBuckets.map((bucket) => (
                     <TableRow key={bucket.id}>
                       <TableCell>
-                        <p className="text-foreground">{bucket.id}</p>
+                        <Link
+                          href={`/project/${ref}/storage/analytics/buckets/${encodeURIComponent(bucket.id)}`}
+                          title={bucket.id}
+                          className="text-link-table-cell"
+                        >
+                          {bucket.id}
+                        </Link>
                       </TableCell>
 
                       <TableCell>

apps/studio/components/interfaces/Storage/FilesBuckets/BucketTable.tsx

@@ -99,9 +99,13 @@ export const BucketTableRow = ({
     <BucketTableRow key={bucket.id}>
       <BucketTableCell>
         <div className="flex items-center gap-2">
-          <p title={bucket.id} className="text-foreground truncate max-w-[240px]">
+          <Link
+            href={`/project/${projectRef}/storage/files/buckets/${encodeURIComponent(bucket.id)}`}
+            title={bucket.id}
+            className="text-link-table-cell"
+          >
             {bucket.id}
-          </p>
+          </Link>
           {bucket.public && <Badge variant="warning">Public</Badge>}
         </div>
       </BucketTableCell>

apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx

@@ -127,7 +127,15 @@ export const VectorsBuckets = () => {
 
                     return (
                       <TableRow key={id}>
-                        <TableCell>{name}</TableCell>
+                        <TableCell>
+                          <Link
+                            href={`/project/${projectRef}/storage/vectors/buckets/${encodeURIComponent(name)}`}
+                            title={name}
+                            className="text-link-table-cell"
+                          >
+                            {name}
+                          </Link>
+                        </TableCell>
                         <TableCell>
                           <p className="text-foreground-light">
                             <TimestampInfo

apps/studio/styles/typography.scss

@@ -74,4 +74,8 @@
   .text-link {
     @apply text-foreground-light underline underline-offset-4 decoration-inherit hover:decoration-foreground transition-colors hover:text-foreground;
   }
+
+  .text-link-table-cell {
+    @apply truncate cursor-pointer underline underline-offset-4 decoration-foreground-muted/50 hover:decoration-foreground-lighter/80 transition-colors duration-100;
+  }
 }