Files
supabase/apps/studio/components
Jordi Enric 03665dfdcd Log Drains UI (#28044)
* add main log drain form and navigation

* fix submit and select

* add mutation and update form

* fix submit issue

* fix issues with validation

* fix typeerrs

* add log drain table

* update create log drain mutation

* add delete log drain mutation

* update get log drains query

* fix new log drain click in cards

* add delete mutation

* add delete log drain

* refactor gzip switch

* refactor radiogroup to use formfield

* add headers form

* fix validation, custom headers errors

* refactor to support update in form

* format

* add log drains to nav

* update api spec and list logdrains query

* wire backend

* fix datadog region values

* make api input password

* fix url elastic

* fix typerr

* rm unnecessary value setter

* fix state issue log drains update form

* Add default values setting in useEffect to fix form issues

* format

* Update LogDrains table header width to 250px

* add upgrade plan card when free plan

* fix dumb if statement

* fix the freaking headers

* fix upgrade to team state

* fix plan check and loading state

* disable type update

* Add link to documentation in Log Drains settings

* show add destination only after empty state

* fix bug with inputs not resetting

* add gzip tooltip

* rm command

* defaultValue to value

* add defaultValue

* rm consolelog

* rm anys
2024-08-01 22:03:10 +02:00
..
2024-07-30 21:34:28 +08:00
2024-08-01 22:03:10 +02:00
2024-08-01 22:03:10 +02:00
2024-07-26 11:40:55 +02:00
2024-07-30 21:34:28 +08: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