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

Code before:

        <DialogSectionSeparator />

        <Form_Shadcn_ {...form}>
          <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
            <DialogSection className="flex flex-col gap-y-4">
              <FormField_Shadcn_
                key="name"
                name="name"
                control={form.control}
                render={({ field }) => (
                  <FormItemLayout
                    name="name"
                    label="Bucket name"
                    labelOptional="Cannot be changed after creation"
                    description="Must be between 3–63 characters. Only lowercase letters, numbers, dots, and hyphens are allowed."
                  >
                    <FormControl_Shadcn_>
                      <Input_Shadcn_
                        id="name"
                        data-1p-ignore
                        data-lpignore="true"
                        data-form-type="other"
                        data-bwignore
                        {...field}
                        placeholder="Enter bucket name"
                      />
                    </FormControl_Shadcn_>
                  </FormItemLayout>
                )}
              />

              {wrappersExtenstionNeedsUpgrading ? (
                <Admonition
                  type="warning"
                  title="Wrappers extension must be updated for Iceberg Wrapper support"
                >
                  <p className="prose max-w-full text-sm !leading-normal">
                    Update the <code className="text-xs">wrappers</code> extension by disabling and
                    enabling it in{' '}
                    <InlineLink href={`/project/${ref}/database/extensions?filter=wrappers`}>
                      database extensions
                    </InlineLink>{' '}
                    before creating an Analytics bucket.{' '}
                    <InlineLink href={`${DOCS_URL}/guides/database/extensions/wrappers/iceberg`}>
                      Learn more
                    </InlineLink>
                    .
                  </p>
                </Admonition>
              ) : (

Review comment (suggestion):
Now handled in the underlying `Button` component, which (by default) sets the `tabIndex` in the same way; based on the `disabled` state.

Code after:
    } catch (error: any) {
      toast.error(`Failed to create bucket: ${error.message}`)
    }
  }

  const handleClose = () => {
    form.reset()
    setVisible(false)
  }

  return (
    <Dialog
      open={visible}
      onOpenChange={(open) => {
        if (!open) handleClose()
      }}
    >
      <DialogTrigger asChild>
        <ButtonTooltip
          block
          size={buttonSize}
          type={buttonType}
          className={buttonClassName}
          icon={<Plus size={14} />}
          disabled={isDisabled}
          style={{ justifyContent: 'start' }}
          onClick={() => setVisible(true)}
          tooltip={{
            content: {
              side: tooltip?.content?.side || 'bottom',
              className: cn(!icebergCatalogEnabled ? 'w-72 text-center' : ''),
              text: !icebergCatalogEnabled
                ? 'Analytics buckets are not enabled for your project. Please contact support to enable it.'
                : !canCreateBuckets
                  ? 'You need additional permissions to create buckets'
                  : buckets.length >= 2
                    ? 'Bucket limit reached'
                    : tooltip?.content?.text,
            },
          }}
        >
          New bucket
        </ButtonTooltip>
      </DialogTrigger>

      <DialogContent size="large" aria-describedby={undefined}>
        <DialogHeader>
          <DialogTitle>Create {config.singularName} bucket</DialogTitle>
        </DialogHeader>

        <DialogSectionSeparator />