Repository: supabase/supabase
File: apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails.tsx (TypeScript)

Code before:
      />
    </>
  )
}

interface VectorBucketTableExamplesDialogProps {
  index: VectorBucketIndex
}

const VectorBucketTableExamplesDialog = ({ index }: VectorBucketTableExamplesDialogProps) => {
  const metadataKeys = index.metadataConfiguration?.nonFilterableMetadataKeys ?? []
  const [language, setLanguage] = useState<'javascript' | 'sql'>('javascript')
  const [showLanguage, setShowLanguage] = useState(false)

  const updateLanguage = (value: 'javascript' | 'sql') => {
    setLanguage(value)
    setShowLanguage(false)
  }

  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button type="default" icon={<ListPlus size={12} className="text-foreground-lighter" />}>
          Insert vectors
        </Button>
      </SheetTrigger>
      <SheetContent tabIndex={undefined}>
        <div className="flex flex-col h-full" tabIndex={-1}>
          <SheetHeader>
            <SheetTitle>
              Insert vectors into{' '}
              <code className="text-code-inline !text-sm">{index.indexName}</code>
            </SheetTitle>
            {/* <SheetDescription>
              Insert vectors into <code className="text-code-inline">{index.vectorBucketName}</code>
            </SheetDescription> */}
          </SheetHeader>

          <div className="overflow-auto flex-grow">
            <VectorBucketIndexExamples
              bucketName={index.vectorBucketName}
              indexName={index.indexName}
              dimension={index.dimension}
              metadataKeys={metadataKeys}
              language={language}
              onLanguageChange={updateLanguage}
              showLanguage={showLanguage}
              onShowLanguageChange={setShowLanguage}
            />
          </div>
        </div>

Review comment (refactor):
Ideally we can detect when some data has been added to this table, then move this button to the dropdown menu, @ivasilov.

In other words: _Insert vectors_ is a “quick start” helper and should move away when less relevant.

We can be imprecise here. If it’s not possible to know when data is added, perhaps we can act on something else, like table queried or somehow else touched.

Code after:
      />
    </>
  )
}

interface VectorBucketTableExamplesDialogProps {
  index: VectorBucketIndex
}

const VectorBucketTableExamplesDialog = ({ index }: VectorBucketTableExamplesDialogProps) => {
  const metadataKeys = index.metadataConfiguration?.nonFilterableMetadataKeys ?? []
  const [language, setLanguage] = useState<'javascript' | 'sql'>('javascript')
  const [showLanguage, setShowLanguage] = useState(false)

  const updateLanguage = (value: 'javascript' | 'sql') => {
    setLanguage(value)
    setShowLanguage(false)
  }

  return (
    <Sheet>
      {/* Move into overflow menu after vectors added */}
      <SheetTrigger asChild>
        <Button type="default" icon={<ListPlus size={12} className="text-foreground-lighter" />}>
          Insert vectors
        </Button>
      </SheetTrigger>
      <SheetContent tabIndex={undefined}>
        <div className="flex flex-col h-full" tabIndex={-1}>
          <SheetHeader>
            <SheetTitle>
              Insert vectors into{' '}
              <code className="text-code-inline !text-sm">{index.indexName}</code>
            </SheetTitle>
          </SheetHeader>

          <div className="overflow-auto flex-grow">
            <VectorBucketIndexExamples
              bucketName={index.vectorBucketName}
              indexName={index.indexName}
              dimension={index.dimension}
              metadataKeys={metadataKeys}
              language={language}
              onLanguageChange={updateLanguage}
              showLanguage={showLanguage}
              onShowLanguageChange={setShowLanguage}
            />
          </div>
        </div>
      </SheetContent>
    </Sheet>