Files
supabase/apps/studio/components
Ivan Vasilov c5bf65b0b4 feat: Create FDW for S3 Vectors buckets (#40206)
* Fix childProps in Admonition so that they're added as a prop to the main div.

* Replace the admonition with Alert in Wrapper tab page to add a gap between childs.

* Add s3 vectors fdw.

* Minor fix to FormSection.

* Update the fdw mutations to support passing in options.

* Refactor the vector flow to create fdws.

* Revert cron description change.

* If the bucket can't be created, don't create a fdw.

* Update/delete the fdw when deleting a table or a bucket.

* Minor fixes.

* Clean up the delete modal.

* Handle edge cases when missing a wrapper.

* Remove the admonition in the create bucket modal.

* Fix the loading state when creating a bucket.

* Fix the createWrapper sheet to work with s3 vectors.

* Fix undefined wrapperMeta issue.

* Create the schema when installing a wrapper.

* Tiny cleanup.

* Clean up unneeded useState. Create a wrapper only if the all conditions are met.

* Fix all comments.

* Add s3 vectors for docs.

* Add a link and fix the file name for S3 Vectors in docs.

* Hide the table editor button if the wrapper instance is missing.

* Small fixes.
2025-11-12 11:00:38 +01:00
..

Writing components

Where to create your components

  • For components that declare the general structure and layout of a page:
    • /components/layouts/xxx
  • For components that are tightly coupled to a specific interface:
    • /components/interfaces/xxx
  • For components that are meant to be reusable across multiple pages:
    • /components/ui/xxx
  • Note: We're gradually moving files out of the to-be-cleaned folder into the respective folders as we refactor

Component structure

  • If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an index.tsx as an entry point
  • Otherwise it can just be a file on its own
  • For example:
    • components/ui
      - SampleComponentA
        - SampleComponentA.tsx
        - SampleComponentA.constants.ts
        - SampleComponentA.utils.ts
        - SampleComponentA.types.ts
        - index.ts
      - SampleComponentB.tsx
      

Template for building components


// Declare the prop types of your component
interface ComponentAProps {
  sampleProp: string
}

// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
  return <div>ComponentA: {sampleProp}</div>
}

export default ComponentA