Repository: supabase/supabase
File: apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx (TypeScript)

Code before:
  const analyticsBuckets = buckets.filter((bucket) =>
    filterString.length === 0 ? true : bucket.id.toLowerCase().includes(filterString.toLowerCase())
  )

  const handleBucketNavigation = (
    bucketId: string,
    event: React.MouseEvent | React.KeyboardEvent
  ) => {
    const url = `/project/${ref}/storage/analytics/buckets/${encodeURIComponent(bucketId)}`
    if (event.metaKey || event.ctrlKey) {
      window.open(`${BASE_PATH}${url}`, '_blank')
    } else {
      router.push(url)
    }
  }

  return (
    <ScaffoldSection isFullWidth>
      <Admonition
        type="note"
        layout="horizontal"
        className="-mt-4 mb-8 [&>div]:!translate-y-0 [&>svg]:!translate-y-1"
        title="Private alpha"
        actions={
          <Button asChild type="default" icon={<ExternalLink />}>
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://github.com/orgs/supabase/discussions/40116"
            >
              Share feedback
            </a>
          </Button>
        }
      >
        <p className="!leading-normal !mb-0 text-balance">
          Analytics buckets are now in private alpha. Expect rapid changes, limited features, and
          possible breaking updates. Please share feedback as we refine the experience and expand
          access.
        </p>
      </Admonition>

      {!isLoadingBuckets &&
      buckets.filter((bucket) => !('type' in bucket) || bucket.type === 'ANALYTICS').length ===
        0 ? (
        <EmptyBucketState bucketType="analytics" />
      ) : (
        <div className="flex flex-col gap-y-4">
          <ScaffoldHeader className="py-0">
            <ScaffoldSectionTitle>Buckets</ScaffoldSectionTitle>
          </ScaffoldHeader>

Review comment (suggestion):
unrelated but i feel like this should be handled by `Link` - will look into this

Code after:
import { Admonition, TimestampInfo } from 'ui-patterns'
import { Input } from 'ui-patterns/DataInputs/Input'
import { EmptyBucketState } from '../EmptyBucketState'
import { CreateAnalyticsBucketModal } from './CreateAnalyticsBucketModal'

export const AnalyticsBuckets = () => {
  const { ref } = useParams()
  const router = useRouter()

  const [filterString, setFilterString] = useState('')

  const { data: buckets = [], isLoading: isLoadingBuckets } = useAnalyticsBucketsQuery({
    projectRef: ref,
  })

  const analyticsBuckets = buckets.filter((bucket) =>
    filterString.length === 0 ? true : bucket.id.toLowerCase().includes(filterString.toLowerCase())
  )

  const handleBucketNavigation = (
    bucketId: string,
    event: React.MouseEvent | React.KeyboardEvent
  ) => {
    const url = `/project/${ref}/storage/analytics/buckets/${encodeURIComponent(bucketId)}`
    if (event.metaKey || event.ctrlKey) {
      window.open(`${BASE_PATH}${url}`, '_blank')
    } else {
      router.push(url)
    }
  }

  return (
    <ScaffoldSection isFullWidth>
      <Admonition showIcon={false} type="tip" className="relative mb-6 overflow-hidden">
        <div className="absolute -inset-16 z-0 opacity-50">
          <img
            src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
            alt="Supabase Grafana"
            className="w-full h-full object-cover object-right hidden dark:block"
          />
          <img
            src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
            alt="Supabase Grafana"
            className="w-full h-full object-cover object-right dark:hidden"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-background-alternative to-transparent" />
        </div>

        <div className="relative z-10 flex flex-col md:flex-row md:items-center gap-y-2 md:gap-x-8 justify-between px-2 py-1">
          <div className="flex flex-col gap-y-0.5">
            <div className="flex flex-col gap-y-2 items-start">