Remove all usage of FC part 2

studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx

@@ -1,8 +1,9 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { IconChevronLeft } from 'ui'
+
 import { POLICY_MODAL_VIEWS } from 'components/interfaces/Auth/Policies'
 
-interface Props {
+interface PolicyEditorModalTitleProps {
   view: string
   schema: string
   table: string
@@ -10,13 +11,13 @@ interface Props {
   onSelectBackFromTemplates: () => void
 }
 
-const PolicyEditorModalTitle: FC<Props> = ({
+const PolicyEditorModalTitle = ({
   view,
   schema,
   table,
   isNewPolicy,
-  onSelectBackFromTemplates = () => {},
-}) => {
+  onSelectBackFromTemplates = noop,
+}: PolicyEditorModalTitleProps) => {
   const getTitle = () => {
     if (view === POLICY_MODAL_VIEWS.EDITOR || view === POLICY_MODAL_VIEWS.SELECTION) {
       return `${isNewPolicy ? 'Adding new policy to' : 'Editing policy from'} ${schema}.${table}`

studio/components/interfaces/BillingV2/AddNewPaymentMethodModal/AddPaymentMethodForm.tsx

@@ -1,9 +1,10 @@
-import { FC, useState } from 'react'
+import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'
+import { useState } from 'react'
 import { Button, Modal } from 'ui'
-import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js'
+
 import { useStore } from 'hooks'
 
-interface Props {
+interface AddPaymentMethodFormProps {
   returnUrl: string
   onCancel: () => void
   onConfirm: () => void
@@ -13,7 +14,7 @@ interface Props {
 // manually creating and attaching payment methods via the API
 // Small UX annoyance here, that the page will be refreshed
 
-const AddPaymentMethodForm: FC<Props> = ({ returnUrl, onCancel, onConfirm }) => {
+const AddPaymentMethodForm = ({ returnUrl, onCancel, onConfirm }: AddPaymentMethodFormProps) => {
   const { ui } = useStore()
   const stripe = useStripe()
   const elements = useElements()

studio/components/interfaces/BillingV2/InvoiceStatusBadge.tsx

@@ -1,9 +1,9 @@
-import { FC } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { Badge } from 'ui'
+
 import { InvoiceStatus } from './Invoices.types'
 
-interface Props {
+interface InvoiceStatusBadgeProps {
   status: InvoiceStatus
 }
 
@@ -33,7 +33,7 @@ export const invoiceStatusMapping: Record<InvoiceStatus, { label: string; badgeC
   },
 }
 
-const InvoiceStatusBadge: FC<Props> = ({ status }) => {
+const InvoiceStatusBadge = ({ status }: InvoiceStatusBadgeProps) => {
   const statusMapping = invoiceStatusMapping[status]
 
   return (

studio/components/interfaces/BillingV2/NoProjectsOnPaidOrgInfo.tsx

@@ -1,16 +1,16 @@
+import Link from 'next/link'
+import { IconInfo } from 'ui'
+
 import InformationBox from 'components/ui/InformationBox'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
-import Link from 'next/link'
-import { FC } from 'react'
 import { Organization } from 'types'
-import { IconInfo } from 'ui'
 
-interface Props {
+interface NoProjectsOnPaidOrgInfoProps {
   organization?: Organization
 }
 
-const NoProjectsOnPaidOrgInfo: FC<Props> = ({ organization }) => {
+const NoProjectsOnPaidOrgInfo = ({ organization }: NoProjectsOnPaidOrgInfoProps) => {
   const { data: allProjects } = useProjectsQuery({
     enabled: organization?.subscription_id !== undefined,
   })

studio/components/interfaces/BillingV2/SpendCapModal.tsx

@@ -1,14 +1,13 @@
-import { FC } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, IconHelpCircle, Modal } from 'ui'
 import Link from 'next/link'
+import { Button, IconHelpCircle, Modal } from 'ui'
 
-interface Props {
+interface SpendCapModalProps {
   visible: boolean
   onHide: () => void
 }
 
-const SpendCapModal: FC<Props> = ({ visible, onHide }) => {
+const SpendCapModal = ({ visible, onHide }: SpendCapModalProps) => {
   return (
     <Modal hideFooter visible={visible} size="xlarge" header="Spend cap" onCancel={() => onHide()}>
       <div className="py-4 space-y-4">

studio/components/interfaces/Database/Backups/PITR/PITRStatus.tsx

@@ -1,22 +1,25 @@
+import * as Tooltip from '@radix-ui/react-tooltip'
 import dayjs from 'dayjs'
-import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
 import { Button, IconAlertCircle } from 'ui'
-import * as Tooltip from '@radix-ui/react-tooltip'
 
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { FormPanel } from 'components/ui/Forms'
 import { useCheckPermissions, useStore } from 'hooks'
 import { Timezone } from './PITR.types'
-import { FormPanel } from 'components/ui/Forms'
 import TimezoneSelection from './TimezoneSelection'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
 
-interface Props {
+interface PITRStatusProps {
   selectedTimezone: Timezone
   onUpdateTimezone: (timezone: Timezone) => void
   onSetConfiguration: () => void
 }
 
-const PITRStatus: FC<Props> = ({ selectedTimezone, onUpdateTimezone, onSetConfiguration }) => {
+const PITRStatus = ({
+  selectedTimezone,
+  onUpdateTimezone,
+  onSetConfiguration,
+}: PITRStatusProps) => {
   const { backups } = useStore()
   const { earliestPhysicalBackupDateUnix, latestPhysicalBackupDateUnix } =
     backups?.configuration?.physicalBackupData ?? {}

studio/components/interfaces/Database/Backups/PITR/TimeInput.tsx

@@ -1,7 +1,7 @@
-import dayjs from 'dayjs'
-import { isNaN } from 'lodash'
-import { ChangeEvent, FC, useEffect, useState } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import dayjs from 'dayjs'
+import { isNaN, noop } from 'lodash'
+import { ChangeEvent, useEffect, useState } from 'react'
 import { IconClock } from 'ui'
 
 import { Time } from './PITR.types'
@@ -15,14 +15,14 @@ import { formatNumberToTwoDigits, formatTimeToTimeString } from './PITR.utils'
 
 // [Joshen] Potential extension, give option to toggle 24 hours or AM/PM
 
-interface Props {
+interface TimeInputProps {
   defaultTime?: Time
   minimumTime?: Time
   maximumTime?: Time
   onChange?: (time: Time) => void
 }
 
-const TimeInput: FC<Props> = ({ defaultTime, minimumTime, maximumTime, onChange = () => {} }) => {
+const TimeInput = ({ defaultTime, minimumTime, maximumTime, onChange = noop }: TimeInputProps) => {
   const [isFocused, setIsFocused] = useState(false)
   const [error, setError] = useState<string>()
   const [time, setTime] = useState<Time>(defaultTime || { h: 0, m: 0, s: 0 })

studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx

@@ -1,21 +1,21 @@
-import { FC, useState, FormEvent } from 'react'
-import { Listbox, IconSearch, IconGlobe } from 'ui'
+import { FormEvent, useState } from 'react'
+import { IconGlobe, IconSearch, Listbox } from 'ui'
 
 import { ALL_TIMEZONES } from './PITR.constants'
 
-interface Props {
+interface TimezoneSelectionProps {
   hideLabel?: boolean
   dropdownWidth?: string
   selectedTimezone: any
   onSelectTimezone: (timezone: any) => void
 }
 
-const TimezoneSelection: FC<Props> = ({
+const TimezoneSelection = ({
   hideLabel,
   dropdownWidth,
   selectedTimezone,
   onSelectTimezone,
-}) => {
+}: TimezoneSelectionProps) => {
   const [searchString, setSearchString] = useState<string>('')
 
   const timezoneOptions =

studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx

@@ -1,17 +1,17 @@
-import { FC, useEffect, useState } from 'react'
-import { Button, Input, Form, Modal, Listbox, IconPlus, IconDatabase } from 'ui'
 import type { PostgresExtension, PostgresSchema } from '@supabase/postgres-meta'
+import { useEffect, useState } from 'react'
+import { Button, Form, IconDatabase, IconPlus, Input, Listbox, Modal } from 'ui'
 
-import { useStore } from 'hooks'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { useStore } from 'hooks'
 
-interface Props {
+interface EnableExtensionModalProps {
   visible: boolean
   extension: PostgresExtension
   onCancel: () => void
 }
 
-const EnableExtensionModal: FC<Props> = ({ visible, extension, onCancel }) => {
+const EnableExtensionModal = ({ visible, extension, onCancel }: EnableExtensionModalProps) => {
   const { ui, meta } = useStore()
   const [defaultSchema, setDefaultSchema] = useState()
   const [fetchingSchemaInfo, setFetchingSchemaInfo] = useState(false)

studio/components/interfaces/Database/Extensions/ExtensionCard.tsx

@@ -1,18 +1,18 @@
-import { FC, useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import { Badge, IconLoader, Toggle } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { Badge, IconLoader, Toggle } from 'ui'
 
-import { useCheckPermissions, useStore } from 'hooks'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
-import EnableExtensionModal from './EnableExtensionModal'
+import { useCheckPermissions, useStore } from 'hooks'
 import { isResponseOk } from 'lib/common/fetch'
+import EnableExtensionModal from './EnableExtensionModal'
 
-interface Props {
+interface ExtensionCardProps {
   extension: any
 }
 
-const ExtensionCard: FC<Props> = ({ extension }) => {
+const ExtensionCard = ({ extension }: ExtensionCardProps) => {
   const { ui, meta } = useStore()
 
   const isOn = extension.installed_version !== null

studio/components/interfaces/Database/Extensions/Extensions.tsx

@@ -1,20 +1,18 @@
-import { FC, useEffect, useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import { partition, isNull } from 'lodash'
-import { Input, IconSearch, IconAlertCircle, Button, IconBookOpen } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { isNull, partition } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { Button, IconAlertCircle, IconBookOpen, IconSearch, Input } from 'ui'
 
-import { useStore, useCheckPermissions } from 'hooks'
 import { useParams } from 'common/hooks'
+import InformationBox from 'components/ui/InformationBox'
+import NoSearchResults from 'components/ui/NoSearchResults'
+import { useCheckPermissions, useStore } from 'hooks'
 import ExtensionCard from './ExtensionCard'
 import { HIDDEN_EXTENSIONS } from './Extensions.constants'
-import NoSearchResults from 'components/ui/NoSearchResults'
-import InformationBox from 'components/ui/InformationBox'
-import Link from 'next/link'
 
-interface Props {}
-
-const Extensions: FC<Props> = ({}) => {
+const Extensions = () => {
   const { meta } = useStore()
   const { filter } = useParams()
   const [filterString, setFilterString] = useState<string>('')

studio/components/interfaces/Database/Functions/CreateFunction.tsx

@@ -1,18 +1,18 @@
-import { FC, useEffect, useContext, createContext, FormEvent, useState } from 'react'
-import { isEmpty, mapValues, has, filter, keyBy, isUndefined, partition, isNull } from 'lodash'
-import { observer, useLocalObservable } from 'mobx-react-lite'
-import { Button, Input, SidePanel, IconTrash, Radio, IconPlus, Toggle, Modal, Listbox } from 'ui'
-import { Dictionary } from 'components/grid'
+import { filter, has, isEmpty, isNull, isUndefined, keyBy, mapValues, partition } from 'lodash'
 import { makeAutoObservable } from 'mobx'
+import { observer, useLocalObservable } from 'mobx-react-lite'
+import { FormEvent, createContext, useContext, useEffect, useState } from 'react'
+import { Button, IconPlus, IconTrash, Input, Listbox, Modal, Radio, SidePanel, Toggle } from 'ui'
 
-import { useStore } from 'hooks'
-import Panel from 'components/ui/Panel'
-import SqlEditor from 'components/ui/SqlEditor'
+import { Dictionary } from 'components/grid'
+import { Function } from 'components/interfaces/Functions/Functions.types'
 import { POSTGRES_DATA_TYPES } from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants'
 import ConfirmationModal from 'components/ui/ConfirmationModal'
+import Panel from 'components/ui/Panel'
+import SqlEditor from 'components/ui/SqlEditor'
+import { useStore } from 'hooks'
 import { isResponseOk } from 'lib/common/fetch'
 import { SupaResponse } from 'types'
-import { Function } from 'components/interfaces/Functions/Functions.types'
 
 // [Refactor] Remove local state, just use the Form component
 
@@ -287,13 +287,13 @@ function hasWhitespace(value: string) {
 
 const CreateFunctionContext = createContext<ICreateFunctionStore | null>(null)
 
-type CreateFunctionProps = {
+interface CreateFunctionProps {
   func: any
   visible: boolean
   setVisible: (value: boolean) => void
-} & any
+}
 
-const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible }) => {
+const CreateFunction = ({ func, visible, setVisible }: CreateFunctionProps) => {
   const { ui, meta } = useStore()
   const _localState = useLocalObservable(() => new CreateFunctionStore())
   _localState.meta = meta as any
@@ -469,7 +469,7 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
 
 export default observer(CreateFunction)
 
-const InputName: FC = observer(({}) => {
+const InputName = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
   return (
     <Input
@@ -491,11 +491,11 @@ const InputName: FC = observer(({}) => {
   )
 })
 
-type InputMultiArgumentsProps = {
+interface InputMultiArgumentsProps {
   readonly?: boolean
 }
 
-const InputMultiArguments: FC<InputMultiArgumentsProps> = observer(({ readonly }) => {
+const InputMultiArguments = observer(({ readonly }: InputMultiArgumentsProps) => {
   const _localState = useContext(CreateFunctionContext)
 
   function onAddArgument() {
@@ -542,14 +542,14 @@ const InputMultiArguments: FC<InputMultiArgumentsProps> = observer(({ readonly }
   )
 })
 
-type InputArgumentProps = {
+interface InputArgumentProps {
   idx: number
   name: string
   type: string
   error?: string
   readonly?: boolean
 }
-const InputArgument: FC<InputArgumentProps> = observer(({ idx, name, type, error, readonly }) => {
+const InputArgument = observer(({ idx, name, type, error, readonly }: InputArgumentProps) => {
   const _localState = useContext(CreateFunctionContext)
 
   function onNameChange(e: FormEvent<HTMLInputElement>) {
@@ -615,7 +615,7 @@ const InputArgument: FC<InputArgumentProps> = observer(({ idx, name, type, error
   )
 })
 
-const InputMultiConfigParams: FC = observer(({}) => {
+const InputMultiConfigParams = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
 
   function onAddArgument() {
@@ -656,13 +656,13 @@ const InputMultiConfigParams: FC = observer(({}) => {
   )
 })
 
-type InputConfigParamProps = {
+interface InputConfigParamProps {
   idx: number
   name: string
   value: string
   error?: { name?: string; value?: string }
 }
-const InputConfigParam: FC<InputConfigParamProps> = observer(({ idx, name, value, error }) => {
+const InputConfigParam = observer(({ idx, name, value, error }: InputConfigParamProps) => {
   const _localState = useContext(CreateFunctionContext)
 
   function onNameChange(e: FormEvent<HTMLInputElement>) {
@@ -718,7 +718,7 @@ const InputConfigParam: FC<InputConfigParamProps> = observer(({ idx, name, value
   )
 })
 
-const InputDefinition: FC = observer(({}) => {
+const InputDefinition = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
   return (
     <div className="space-y-4">
@@ -749,7 +749,7 @@ const InputDefinition: FC = observer(({}) => {
   )
 })
 
-const SelectSchema: FC = observer(({}) => {
+const SelectSchema = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
 
   return (
@@ -772,7 +772,7 @@ const SelectSchema: FC = observer(({}) => {
   )
 })
 
-const SelectLanguage: FC = observer(({}) => {
+const SelectLanguage = observer(({}) => {
   const { meta } = useStore()
   const _localState = useContext(CreateFunctionContext)
 
@@ -810,7 +810,7 @@ const SelectLanguage: FC = observer(({}) => {
   )
 })
 
-const SelectReturnType: FC = observer(({}) => {
+const SelectReturnType = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
 
   return (
@@ -843,7 +843,7 @@ const SelectReturnType: FC = observer(({}) => {
   )
 })
 
-const SelectBehavior: FC = observer(({}) => {
+const SelectBehavior = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
 
   return (
@@ -868,7 +868,7 @@ const SelectBehavior: FC = observer(({}) => {
   )
 })
 
-const RadioSecurity: FC = observer(({}) => {
+const RadioSecurity = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
 
   return (

studio/components/interfaces/Database/Functions/DeleteFunction.tsx

@@ -1,16 +1,17 @@
-import { FC, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { useStore } from 'hooks'
+import { useState } from 'react'
+
 import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import { useStore } from 'hooks'
 import { isResponseOk } from 'lib/common/fetch'
 
-type DeleteFunctionProps = {
+interface DeleteFunctionProps {
   func?: any
   visible: boolean
   setVisible: (value: boolean) => void
-} & any
+}
 
-const DeleteFunction: FC<DeleteFunctionProps> = ({ func, visible, setVisible }) => {
+const DeleteFunction = ({ func, visible, setVisible }: DeleteFunctionProps) => {
   const { ui, meta } = useStore()
   const [loading, setLoading] = useState(false)
   const { id, name, schema } = func ?? {}

studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx

@@ -3,26 +3,25 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { includes, noop } from 'lodash'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
-import { FC } from 'react'
+import { Button, Dropdown, IconEdit3, IconFileText, IconMoreVertical, IconTrash } from 'ui'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import Table from 'components/to-be-cleaned/Table'
 import { useCheckPermissions, useStore } from 'hooks'
-import { Button, Dropdown, IconEdit3, IconFileText, IconMoreVertical, IconTrash } from 'ui'
 
-interface Props {
+interface FunctionListProps {
   schema: string
   filterString: string
   editFunction: (fn: any) => void
   deleteFunction: (fn: any) => void
 }
 
-const FunctionList: FC<Props> = ({
+const FunctionList = ({
   schema,
   filterString,
   editFunction = noop,
   deleteFunction = noop,
-}) => {
+}: FunctionListProps) => {
   const { project: selectedProject } = useProjectContext()
   const router = useRouter()
   const { meta } = useStore()

studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx

@@ -1,27 +1,26 @@
-import { FC, useState } from 'react'
-import { uniqBy, map as lodashMap, includes } from 'lodash'
-import { Button, IconSearch, IconLoader, Input } from 'ui'
-import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PostgresFunction } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { includes, map as lodashMap, noop, uniqBy } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { Button, IconLoader, IconSearch, Input } from 'ui'
 
-import { useCheckPermissions, useStore } from 'hooks'
-import AlphaPreview from 'components/to-be-cleaned/AlphaPreview'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
+import { useCheckPermissions, useStore } from 'hooks'
 import SchemaTable from './SchemaTable'
 
-interface Props {
+interface FunctionsListProps {
   createFunction: () => void
   editFunction: (fn: PostgresFunction) => void
   deleteFunction: (fn: PostgresFunction) => void
 }
 
-const FunctionsList: FC<Props> = ({
-  createFunction = () => {},
-  editFunction = () => {},
-  deleteFunction = () => {},
-}) => {
+const FunctionsList = ({
+  createFunction = noop,
+  editFunction = noop,
+  deleteFunction = noop,
+}: FunctionsListProps) => {
   const { meta } = useStore()
   const [filterString, setFilterString] = useState<string>('')
 

studio/components/interfaces/Database/Functions/FunctionsList/SchemaTable.tsx

@@ -1,22 +1,22 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { observer } from 'mobx-react-lite'
 
 import Table from 'components/to-be-cleaned/Table'
 import FunctionList from './FunctionList'
 
-interface Props {
+interface SchemaTableProps {
   schema: string
   filterString: string
   editFunction: (fn: any) => void
   deleteFunction: (fn: any) => void
 }
 
-const SchemaTable: FC<Props> = ({
+const SchemaTable = ({
   schema,
   filterString,
-  editFunction = () => {},
-  deleteFunction = () => {},
-}) => {
+  editFunction = noop,
+  deleteFunction = noop,
+}: SchemaTableProps) => {
   return (
     <div key={schema} className="">
       <div className="sticky top-0 backdrop-blur backdrop-filter">

studio/components/interfaces/Database/Hooks/HooksList/SchemaTable.tsx

@@ -1,22 +1,22 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { observer } from 'mobx-react-lite'
 
 import Table from 'components/to-be-cleaned/Table'
 import HookList from './HookList'
 
-interface Props {
+interface SchemaTableProps {
   schema: string
   filterString: string
   editHook: (hook: any) => void
   deleteHook: (hook: any) => void
 }
 
-const SchemaTable: FC<Props> = ({
+const SchemaTable = ({
   schema,
   filterString,
-  editHook = () => {},
-  deleteHook = () => {},
-}) => {
+  editHook = noop,
+  deleteHook = noop,
+}: SchemaTableProps) => {
   return (
     <div key={schema} className="">
       <div className="sticky top-0 backdrop-blur backdrop-filter">

studio/components/interfaces/Database/Publications/PublicationsList.tsx

@@ -1,19 +1,20 @@
-import { FC, useState } from 'react'
-import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Button, Input, Toggle, IconSearch, IconAlertCircle } from 'ui'
+import { noop } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { Button, IconAlertCircle, IconSearch, Input, Toggle } from 'ui'
 
-import { useCheckPermissions, useStore } from 'hooks'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
 import Table from 'components/to-be-cleaned/Table'
-import NoSearchResults from 'components/ui/NoSearchResults'
 import InformationBox from 'components/ui/InformationBox'
+import NoSearchResults from 'components/ui/NoSearchResults'
+import { useCheckPermissions, useStore } from 'hooks'
 
-interface Props {
+interface PublicationsListProps {
   onSelectPublication: (id: number) => void
 }
 
-const PublicationsList: FC<Props> = ({ onSelectPublication = () => {} }) => {
+const PublicationsList = ({ onSelectPublication = noop }: PublicationsListProps) => {
   const { ui, meta } = useStore()
   const [filterString, setFilterString] = useState<string>('')
 

studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx

@@ -1,18 +1,18 @@
-import { FC, useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import { Badge, Toggle } from 'ui'
 import type { PostgresPublication, PostgresTable } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { Badge, Toggle } from 'ui'
 
-import { useCheckPermissions, useStore } from 'hooks'
 import Table from 'components/to-be-cleaned/Table'
+import { useCheckPermissions, useStore } from 'hooks'
 
-interface Props {
+interface PublicationsTableItemProps {
   table: PostgresTable
   selectedPublication: PostgresPublication
 }
 
-const PublicationsTableItem: FC<Props> = ({ table, selectedPublication }) => {
+const PublicationsTableItem = ({ table, selectedPublication }: PublicationsTableItemProps) => {
   const { ui, meta } = useStore()
   const enabledForAllTables = selectedPublication.tables == null
 

studio/components/interfaces/Database/Publications/PublicationsTables.tsx

@@ -1,21 +1,21 @@
-import { FC, useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import { Button, Input, IconChevronLeft, IconSearch, IconAlertCircle } from 'ui'
 import type { PostgresPublication } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { Button, IconAlertCircle, IconChevronLeft, IconSearch, Input } from 'ui'
 
+import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
+import Table from 'components/to-be-cleaned/Table'
+import InformationBox from 'components/ui/InformationBox'
 import { useCheckPermissions, useStore } from 'hooks'
 import PublicationsTableItem from './PublicationsTableItem'
-import Table from 'components/to-be-cleaned/Table'
-import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
-import InformationBox from 'components/ui/InformationBox'
 
-interface Props {
+interface PublicationsTablesProps {
   selectedPublication: PostgresPublication
   onSelectBack: () => void
 }
 
-const PublicationsTables: FC<Props> = ({ selectedPublication, onSelectBack }) => {
+const PublicationsTables = ({ selectedPublication, onSelectBack }: PublicationsTablesProps) => {
   const { meta } = useStore()
   const [filterString, setFilterString] = useState<string>('')
 

studio/components/interfaces/Database/Roles/CreateRolePanel.tsx

@@ -1,15 +1,17 @@
-import { FC, useRef, useState } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Form, IconHelpCircle, Input, SidePanel, Button, Toggle } from 'ui'
-import { ROLE_PERMISSIONS } from './Roles.constants'
-import { FormSection, FormSectionLabel, FormSectionContent } from 'components/ui/Forms'
+import { useRef, useState } from 'react'
+import { Button, Form, IconHelpCircle, Input, SidePanel, Toggle } from 'ui'
+
+import { FormSection, FormSectionContent, FormSectionLabel } from 'components/ui/Forms'
 import { useStore } from 'hooks'
-interface Props {
+import { ROLE_PERMISSIONS } from './Roles.constants'
+
+interface CreateRolePanelProps {
   visible: boolean
   onClose: () => void
 }
 
-const CreateRolePanel: FC<Props> = ({ visible, onClose }) => {
+const CreateRolePanel = ({ visible, onClose }: CreateRolePanelProps) => {
   const formId = 'create-new-role'
   const submitRef: any = useRef()
   const { ui, meta } = useStore()

studio/components/interfaces/Database/Roles/DeleteRoleModal.tsx

@@ -1,15 +1,16 @@
-import { FC, useState } from 'react'
-import { Modal } from 'ui'
 import { PostgresRole } from '@supabase/postgres-meta'
+import { useState } from 'react'
+import { Modal } from 'ui'
+
 import { useStore } from 'hooks'
 
-interface Props {
+interface DeleteRoleModalProps {
   role: PostgresRole
   visible: boolean
   onClose: () => void
 }
 
-const DeleteRoleModal: FC<Props> = ({ role, visible, onClose }) => {
+const DeleteRoleModal = ({ role, visible, onClose }: DeleteRoleModalProps) => {
   const { ui, meta } = useStore()
   const [isDeleting, setIsDeleting] = useState(false)
 

studio/components/interfaces/Database/Roles/RoleRow.tsx

@@ -1,28 +1,28 @@
-import { FC, useState } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PostgresRole } from '@supabase/postgres-meta'
+import { useState } from 'react'
 import {
   Button,
-  Form,
-  Dropdown,
-  IconChevronUp,
-  Toggle,
   Collapsible,
-  IconTrash,
+  Dropdown,
+  Form,
+  IconChevronUp,
   IconHelpCircle,
   IconMoreVertical,
+  IconTrash,
+  Toggle,
 } from 'ui'
 
 import { useStore } from 'hooks'
 import { ROLE_PERMISSIONS } from './Roles.constants'
 
-interface Props {
+interface RoleRowProps {
   role: PostgresRole
   disabled?: boolean
   onSelectDelete: (role: PostgresRole) => void
 }
 
-const RoleRow: FC<Props> = ({ role, disabled = false, onSelectDelete }) => {
+const RoleRow = ({ role, disabled = false, onSelectDelete }: RoleRowProps) => {
   const { ui, meta } = useStore()
   const [isExpanded, setIsExpanded] = useState(false)
 

studio/components/interfaces/Database/Tables/ColumnList.tsx

@@ -1,15 +1,16 @@
-import { FC, useState } from 'react'
-import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Input, Button, IconSearch, IconPlus, IconChevronLeft, IconEdit3, IconTrash } from 'ui'
 import type { PostgresTable } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { noop } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { Button, IconChevronLeft, IconEdit3, IconPlus, IconSearch, IconTrash, Input } from 'ui'
 
-import { useStore, useCheckPermissions } from 'hooks'
-import Table from 'components/to-be-cleaned/Table'
 import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
+import Table from 'components/to-be-cleaned/Table'
+import { useCheckPermissions, useStore } from 'hooks'
 
-interface Props {
+interface ColumnListProps {
   selectedTable: PostgresTable
   onSelectBack: () => void
   onAddColumn: () => void
@@ -17,13 +18,13 @@ interface Props {
   onDeleteColumn: (column: any) => void
 }
 
-const ColumnList: FC<Props> = ({
+const ColumnList = ({
   selectedTable,
-  onSelectBack = () => {},
-  onAddColumn = () => {},
-  onEditColumn = () => {},
-  onDeleteColumn = () => {},
-}) => {
+  onSelectBack = noop,
+  onAddColumn = noop,
+  onEditColumn = noop,
+  onDeleteColumn = noop,
+}: ColumnListProps) => {
   const { meta } = useStore()
   const [filterString, setFilterString] = useState<string>('')
   const columns =

studio/components/interfaces/Database/Tables/TableList.tsx

@@ -1,28 +1,28 @@
-import { FC, useState } from 'react'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import type { PostgresSchema, PostgresTable } from '@supabase/postgres-meta'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { noop, partition } from 'lodash'
 import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
 import {
   Button,
+  IconCheck,
+  IconColumns,
+  IconEdit3,
+  IconLock,
   IconPlus,
-  Input,
   IconSearch,
   IconTrash,
-  IconEdit3,
-  IconColumns,
+  Input,
   Listbox,
-  IconLock,
-  IconCheck,
 } from 'ui'
-import { partition } from 'lodash'
-import * as Tooltip from '@radix-ui/react-tooltip'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
 
-import { useStore, useCheckPermissions } from 'hooks'
-import Table from 'components/to-be-cleaned/Table'
 import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
-import type { PostgresTable, PostgresSchema } from '@supabase/postgres-meta'
+import Table from 'components/to-be-cleaned/Table'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { useCheckPermissions, useStore } from 'hooks'
 
-interface Props {
+interface TableListProps {
   selectedSchema: string
   onSelectSchema: (schema: string) => void
   onAddTable: () => void
@@ -31,14 +31,14 @@ interface Props {
   onOpenTable: (table: any) => void
 }
 
-const TableList: FC<Props> = ({
+const TableList = ({
   selectedSchema,
-  onSelectSchema = () => {},
-  onAddTable = () => {},
-  onEditTable = () => {},
-  onDeleteTable = () => {},
-  onOpenTable = () => {},
-}) => {
+  onSelectSchema = noop,
+  onAddTable = noop,
+  onEditTable = noop,
+  onDeleteTable = noop,
+  onOpenTable = noop,
+}: TableListProps) => {
   const { meta } = useStore()
   const { isLoading } = meta.tables
   const [filterString, setFilterString] = useState<string>('')

studio/components/interfaces/Database/Triggers/CreateTrigger.tsx

@@ -1,29 +1,29 @@
-import { FC, useEffect, createContext, useContext, useState } from 'react'
+import { Dictionary } from 'components/grid'
+import { has, isEmpty, mapValues, union, without } from 'lodash'
 import { makeAutoObservable } from 'mobx'
 import { observer, useLocalObservable } from 'mobx-react-lite'
-import { isEmpty, mapValues, has, without, union } from 'lodash'
+import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useState } from 'react'
+import SVG from 'react-inlinesvg'
 import {
-  Input,
-  SidePanel,
-  Checkbox,
-  Listbox,
-  IconPlayCircle,
-  IconPauseCircle,
-  IconTerminal,
   Badge,
   Button,
+  Checkbox,
+  IconPauseCircle,
+  IconPlayCircle,
+  IconTerminal,
+  Input,
+  Listbox,
   Modal,
+  SidePanel,
 } from 'ui'
-import { Dictionary } from 'components/grid'
-import { useRouter } from 'next/router'
-import SVG from 'react-inlinesvg'
 
-import ChooseFunctionForm from './ChooseFunctionForm'
+import ConfirmationModal from 'components/ui/ConfirmationModal'
 import FormEmptyBox from 'components/ui/FormBoxEmpty'
 import NoTableState from 'components/ui/States/NoTableState'
 import { useStore } from 'hooks'
 import { BASE_PATH } from 'lib/constants'
-import ConfirmationModal from 'components/ui/ConfirmationModal'
+import ChooseFunctionForm from './ChooseFunctionForm'
 
 class CreateTriggerFormState {
   id: number | undefined
@@ -249,13 +249,13 @@ function hasWhitespace(value: string) {
 
 const CreateTriggerContext = createContext<ICreateTriggerStore | null>(null)
 
-type CreateTriggerProps = {
+interface CreateTriggerProps {
   trigger?: any
   visible: boolean
   setVisible: (value: boolean) => void
-} & any
+}
 
-const CreateTrigger: FC<CreateTriggerProps> = ({ trigger, visible, setVisible }) => {
+const CreateTrigger = ({ trigger, visible, setVisible }: CreateTriggerProps) => {
   const { ui, meta } = useStore()
   const [isClosingPanel, setIsClosingPanel] = useState(false)
   const _localState = useLocalObservable(() => new CreateTriggerStore())
@@ -413,7 +413,7 @@ const CreateTrigger: FC<CreateTriggerProps> = ({ trigger, visible, setVisible })
 
 export default observer(CreateTrigger)
 
-const InputName: FC = observer(({}) => {
+const InputName = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
   return (
     <Input
@@ -435,7 +435,7 @@ const InputName: FC = observer(({}) => {
   )
 })
 
-const SelectEnabledMode: FC = observer(({}) => {
+const SelectEnabledMode = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
   return (
     <Listbox
@@ -508,7 +508,7 @@ const SelectEnabledMode: FC = observer(({}) => {
   )
 })
 
-const SelectOrientation: FC = observer(({}) => {
+const SelectOrientation = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
   return (
     <Listbox
@@ -537,7 +537,7 @@ const SelectOrientation: FC = observer(({}) => {
   )
 })
 
-const ListboxTable: FC = observer(({}) => {
+const ListboxTable = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
 
   return (
@@ -597,7 +597,7 @@ const ListboxTable: FC = observer(({}) => {
   )
 })
 
-const CheckboxEvents: FC = observer(({}) => {
+const CheckboxEvents = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
   return (
     // @ts-ignore
@@ -643,7 +643,7 @@ const CheckboxEvents: FC = observer(({}) => {
   )
 })
 
-const ListboxActivation: FC = observer(({}) => {
+const ListboxActivation = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
   return (
     <Listbox
@@ -699,7 +699,7 @@ const ListboxActivation: FC = observer(({}) => {
   )
 })
 
-const FunctionForm: FC = observer(({}) => {
+const FunctionForm = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
 
   return (
@@ -718,7 +718,7 @@ const FunctionForm: FC = observer(({}) => {
   )
 })
 
-const FunctionEmpty: FC = observer(({}) => {
+const FunctionEmpty = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
   return (
     <button
@@ -742,7 +742,7 @@ const FunctionEmpty: FC = observer(({}) => {
   )
 })
 
-const FunctionWithArguments: FC = observer(({}) => {
+const FunctionWithArguments = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
 
   return (

studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx

@@ -1,16 +1,17 @@
-import { FC, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { useStore } from 'hooks'
+import { useState } from 'react'
+
 import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import { useStore } from 'hooks'
 import { isResponseOk } from 'lib/common/fetch'
 
-type DeleteTriggerProps = {
+interface DeleteTriggerProps {
   trigger?: any
   visible: boolean
   setVisible: (value: boolean) => void
-} & any
+}
 
-const DeleteTrigger: FC<DeleteTriggerProps> = ({ store, trigger, visible, setVisible }) => {
+const DeleteTrigger = ({ trigger, visible, setVisible }: DeleteTriggerProps) => {
   const { ui, meta } = useStore()
   const [loading, setLoading] = useState(false)
   const { id, name, schema } = trigger ?? {}

studio/components/interfaces/Database/Triggers/TriggersList/SchemaTable.tsx

@@ -1,17 +1,16 @@
-import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import Table from 'components/to-be-cleaned/Table'
 import TriggerList from './TriggerList'
 
-interface Props {
+interface SchemaTableProps {
   filterString: string
   schema: string
   editTrigger: (trigger: any) => void
   deleteTrigger: (trigger: any) => void
 }
 
-const SchemaTable: FC<Props> = ({ filterString, schema, editTrigger, deleteTrigger }) => {
+const SchemaTable = ({ filterString, schema, editTrigger, deleteTrigger }: SchemaTableProps) => {
   return (
     <div key={schema} className="">
       <div className="sticky top-0 backdrop-blur backdrop-filter">

studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx

@@ -1,21 +1,20 @@
-import { FC } from 'react'
-import { includes } from 'lodash'
-import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Badge, Button, Dropdown, IconMoreVertical, IconTrash, IconEdit3 } from 'ui'
+import { includes } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { Badge, Button, Dropdown, IconEdit3, IconMoreVertical, IconTrash } from 'ui'
 
-import { useStore, useCheckPermissions } from 'hooks'
 import Table from 'components/to-be-cleaned/Table'
+import { useCheckPermissions, useStore } from 'hooks'
 
-interface Props {
+interface TriggerListProps {
   filterString: string
   schema: string
   editTrigger: (trigger: any) => void
   deleteTrigger: (trigger: any) => void
 }
 
-const TriggerList: FC<Props> = ({ filterString, schema, editTrigger, deleteTrigger }) => {
+const TriggerList = ({ filterString, schema, editTrigger, deleteTrigger }: TriggerListProps) => {
   const { meta } = useStore()
   const triggers = meta.triggers.list()
   const filteredTriggers = triggers.filter((x: any) =>

studio/components/interfaces/Database/Wrappers/InputField.tsx

@@ -1,15 +1,16 @@
 import Link from 'next/link'
-import { FC, useState } from 'react'
-import { Button, Input, IconHelpCircle, IconEye, IconEyeOff, IconLoader } from 'ui'
+import { useState } from 'react'
+import { Button, IconEye, IconEyeOff, IconHelpCircle, IconLoader, Input } from 'ui'
+
 import { ServerOption } from './Wrappers.types'
 
-interface Props {
+interface InputFieldProps {
   option: ServerOption
   loading: boolean
   error: any
 }
 
-const InputField: FC<Props> = ({ option, loading, error }) => {
+const InputField = ({ option, loading, error }: InputFieldProps) => {
   const [showHidden, setShowHidden] = useState(!option.hidden)
   if (option.isTextArea) {
     return (