Remove all usage of FC part 1

studio/components/README.md

@@ -29,16 +29,15 @@
 ## Template for building components
 
 ```ts
-import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
 
 // Declare the prop types of your component
-interface Props {
+interface ComponentAProps {
   sampleProp: string
 }
 
 // Name your component accordingly
-const ComponentA: FC<Props> = ({ sampleProp }) => {
+const ComponentA = ({ sampleProp }: ComponentAProps) => {
   return <div>ComponentA: {sampleProp}</div>
 }
 

studio/components/grid/components/common/BlockKeys.tsx

@@ -1,5 +1,5 @@
 import { useClickedOutside } from 'hooks'
-import { FC, useRef, useEffect, useCallback, KeyboardEvent, ReactNode } from 'react'
+import { KeyboardEvent, ReactNode, useCallback, useEffect, useRef } from 'react'
 
 interface BlockKeysProps {
   value: string | null
@@ -13,7 +13,7 @@ interface BlockKeysProps {
  * We use this with cell editor to allow editor component to handle keys.
  * Example: press enter to add newline on textEditor
  */
-export const BlockKeys: FC<BlockKeysProps> = ({ value, children, onEscape, onEnter }) => {
+export const BlockKeys = ({ value, children, onEscape, onEnter }: BlockKeysProps) => {
   const ref = useRef(null)
   const isClickedOutside = useClickedOutside(ref)
 

studio/components/grid/components/common/DropdownControl.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { PropsWithChildren } from 'react'
 import { Dropdown } from 'ui'
 
 interface DropdownControlProps {
@@ -15,7 +15,7 @@ interface DropdownControlProps {
   isNested?: boolean
 }
 
-export const DropdownControl: FC<DropdownControlProps> = (p) => {
+export const DropdownControl = (p: PropsWithChildren<DropdownControlProps>) => {
   const { className, children, side, align, isNested } = p
   return (
     <Dropdown
@@ -30,7 +30,7 @@ export const DropdownControl: FC<DropdownControlProps> = (p) => {
   )
 }
 
-const DropdownItems: FC<DropdownControlProps> = ({ options, onSelect }) => {
+const DropdownItems = ({ options, onSelect }: DropdownControlProps) => {
   return (
     <div className="dropdown-control" style={{ maxHeight: '30vh' }}>
       {options.length == 0 && <p className="dropdown-control__empty-text">No more items</p>}

studio/components/grid/components/common/EmptyValue.tsx

@@ -1,11 +1,3 @@
-import * as React from 'react'
-
-type EmptyValueProps = {}
-
-export const EmptyValue: React.FC<EmptyValueProps> = ({}) => {
-  return (
-    <span className="sb-grid-empty-value" style={{ opacity: 0.5 }}>
-      EMPTY
-    </span>
-  )
+export const EmptyValue = () => {
+  return <span className="sb-grid-empty-value opacity-50">EMPTY</span>
 }

studio/components/grid/components/common/MonacoEditor.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import Editor from '@monaco-editor/react'
 
 type MonacoEditorProps = {
@@ -10,14 +9,14 @@ type MonacoEditorProps = {
   onMount?: (editor: any) => void
 }
 
-export const MonacoEditor: React.FC<MonacoEditorProps> = ({
+export const MonacoEditor = ({
   width,
   height,
   value,
   language,
   onChange,
   onMount,
-}) => {
+}: MonacoEditorProps) => {
   function handleEditorOnMount(editor: any) {
     // add margin above first line
     editor.changeViewZones((accessor: any) => {

studio/components/grid/components/common/NullValue.tsx

@@ -1,11 +1,3 @@
-import * as React from 'react'
-
-type NullValueProps = {}
-
-export const NullValue: React.FC<NullValueProps> = ({}) => {
-  return (
-    <span className="null-value" style={{ opacity: 0.5 }}>
-      NULL
-    </span>
-  )
+export const NullValue = () => {
+  return <span className="null-value opacity-50">NULL</span>
 }

studio/components/grid/components/grid/AddColumn.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
 import { CalculatedColumn } from '@supabase/react-data-grid'
 import { Button, IconPlus } from 'ui'
+
 import { ADD_COLUMN_KEY } from '../../constants'
 import { useTrackedState } from '../../store'
 import { DefaultFormatter } from '../formatter'
@@ -17,13 +17,7 @@ export const AddColumn: CalculatedColumn<any, any> = {
   isLastFrozenColumn: false,
   rowGroup: false,
   headerRenderer(props) {
-    return (
-      <AddColumnHeader
-        aria-label="Add New Row"
-        value={props.allRowsSelected}
-        onChange={props.onAllRowsSelectionChange}
-      />
-    )
+    return <AddColumnHeader aria-label="Add New Row" />
   },
   formatter: DefaultFormatter,
 }
@@ -33,12 +27,7 @@ type SharedInputProps = Pick<
   'disabled' | 'tabIndex' | 'onClick' | 'aria-label' | 'aria-labelledby'
 >
 
-interface AddColumnHeaderProps extends SharedInputProps {
-  value: boolean
-  onChange: (value: boolean, isShiftClick: boolean) => void
-}
-
-const AddColumnHeader: React.FC<AddColumnHeaderProps> = () => {
+const AddColumnHeader = ({}: SharedInputProps) => {
   const state = useTrackedState()
   const { onAddColumn } = state
   return (

studio/components/grid/components/menu/ColumnMenu.tsx

@@ -1,23 +1,24 @@
-import { CalculatedColumn } from '@supabase/react-data-grid'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import { CalculatedColumn } from '@supabase/react-data-grid'
 import {
   Button,
+  Divider,
   Dropdown,
   IconChevronDown,
-  Divider,
   IconEdit,
-  IconTrash,
   IconLock,
+  IconTrash,
   IconUnlock,
 } from 'ui'
+
 import { useDispatch, useTrackedState } from '../../store'
 
-type ColumnMenuProps = {
+interface ColumnMenuProps {
   column: CalculatedColumn<any, unknown>
   isEncrypted?: boolean
 }
 
-const ColumnMenu: React.FC<ColumnMenuProps> = ({ column, isEncrypted }) => {
+const ColumnMenu = ({ column, isEncrypted }: ColumnMenuProps) => {
   const state = useTrackedState()
   const dispatch = useDispatch()
   const { onEditColumn: onEditColumnFunc, onDeleteColumn: onDeleteColumnFunc } = state

studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx

@@ -1,17 +1,18 @@
-import { BASE_PATH } from 'lib/constants'
-import { FC, useState } from 'react'
+import { useState } from 'react'
 import ReactMarkdown from 'react-markdown'
-import { Button, Input, InputNumber, Toggle, Listbox, IconEye, IconEyeOff } from 'ui'
+import { Button, IconEye, IconEyeOff, Input, InputNumber, Listbox, Toggle } from 'ui'
+
+import { BASE_PATH } from 'lib/constants'
 import { Enum } from './AuthProvidersForm.types'
 
-interface Props {
+interface FormFieldProps {
   name: string
   properties: any
   formValues: any
   disabled?: boolean
 }
 
-const FormField: FC<Props> = ({ name, properties, formValues, disabled = false }) => {
+const FormField = ({ name, properties, formValues, disabled = false }: FormFieldProps) => {
   const [hidden, setHidden] = useState(!!properties.isSecret)
 
   if (properties.show && !properties.show.matches.includes(formValues[properties.show.key]))

studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx

@@ -1,20 +1,20 @@
-import ReactMarkdown from 'react-markdown'
-import { FC, useState, useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
-import { Input, Form } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useEffect, useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import { Form, Input } from 'ui'
 
-import { useStore, useCheckPermissions } from 'hooks'
-import { FormSchema } from 'types'
-import { FormActions, FormSection, FormSectionContent, FormSectionLabel } from 'components/ui/Forms'
 import CodeEditor from 'components/ui/CodeEditor'
+import { FormActions, FormSection, FormSectionContent, FormSectionLabel } from 'components/ui/Forms'
 import InformationBox from 'components/ui/InformationBox'
+import { useCheckPermissions, useStore } from 'hooks'
+import { FormSchema } from 'types'
 
-interface Props {
+interface TemplateEditorProps {
   template: FormSchema
 }
 
-const TemplateEditor: FC<Props> = ({ template }) => {
+const TemplateEditor = ({ template }: TemplateEditorProps) => {
   const { ui, authConfig } = useStore()
   const [bodyValue, setBodyValue] = useState('')
 

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

@@ -1,25 +1,25 @@
-import { useState, FC } from 'react'
-import { isEmpty } from 'lodash'
-import { IconHelpCircle } from 'ui'
-import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
-import { useStore } from 'hooks'
+import type { PostgresRole, PostgresTable } from '@supabase/postgres-meta'
 import { useParams } from 'common/hooks'
 import { PolicyEditorModal, PolicyTableRow } from 'components/interfaces/Auth/Policies'
-import type { PostgresRole, PostgresTable } from '@supabase/postgres-meta'
+import { useStore } from 'hooks'
+import { isEmpty } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { IconHelpCircle } from 'ui'
 
-import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
 import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
+import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
 import InformationBox from 'components/ui/InformationBox'
 
-interface Props {
+interface PoliciesProps {
   tables: PostgresTable[]
   hasTables: boolean
   isLocked: boolean
 }
 
-const Policies: FC<Props> = ({ tables, hasTables, isLocked }) => {
+const Policies = ({ tables, hasTables, isLocked }: PoliciesProps) => {
   const router = useRouter()
   const { ref } = useParams()
 

studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyAllowedOperation.tsx

@@ -1,12 +1,15 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { Radio } from 'ui'
 
-interface Props {
+interface PolicyAllowedOperationProps {
   operation: string
   onSelectOperation: (operation: string) => void
 }
 
-const PolicyAllowedOperation: FC<Props> = ({ operation = '', onSelectOperation }) => {
+const PolicyAllowedOperation = ({
+  operation = '',
+  onSelectOperation = noop,
+}: PolicyAllowedOperationProps) => {
   return (
     <div className="flex justify-between space-x-12">
       <div className="flex w-1/3 flex-col space-y-2">

studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx

@@ -1,11 +1,12 @@
-import { FC, useEffect } from 'react'
-import { IconHelpCircle } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import { noop } from 'lodash'
+import { useEffect } from 'react'
+import { IconHelpCircle } from 'ui'
 
-import { usePrevious } from 'hooks'
 import SqlEditor from 'components/ui/SqlEditor'
+import { usePrevious } from 'hooks'
 
-interface Props {
+interface PolicyDefinitionProps {
   operation: string
   definition: string
   check: string
@@ -13,13 +14,13 @@ interface Props {
   onUpdatePolicyCheck: (check: string | undefined) => void
 }
 
-const PolicyDefinition: FC<Props> = ({
+const PolicyDefinition = ({
   operation = '',
   definition = '',
   check = '',
-  onUpdatePolicyUsing,
-  onUpdatePolicyCheck,
-}) => {
+  onUpdatePolicyUsing = noop,
+  onUpdatePolicyCheck = noop,
+}: PolicyDefinitionProps) => {
   const showUsing = (operation: string) =>
     ['SELECT', 'UPDATE', 'DELETE', 'ALL'].includes(operation) || !operation
   const showCheck = (operation: string) => ['INSERT', 'UPDATE', 'ALL'].includes(operation)

studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx

@@ -1,13 +1,17 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { Button, IconExternalLink } from 'ui'
 
-interface Props {
+interface PolicyEditorFooterProps {
   showTemplates: boolean
   onViewTemplates: () => void
   onReviewPolicy: () => void
 }
 
-const PolicyEditorFooter: FC<Props> = ({ showTemplates, onViewTemplates, onReviewPolicy }) => (
+const PolicyEditorFooter = ({
+  showTemplates,
+  onViewTemplates = noop,
+  onReviewPolicy = noop,
+}: PolicyEditorFooterProps) => (
   <div className="flex justify-between items-center border-t px-6 py-4 dark:border-dark">
     <a
       href="https://supabase.com/docs/learn/auth-deep-dive/auth-policies"

studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx

@@ -1,13 +1,12 @@
-import { FC } from 'react'
 import { Input } from 'ui'
 
-interface Props {
+interface PolicyNameProps {
   name: string
   limit?: number
   onUpdatePolicyName: (name: string) => void
 }
 
-const PolicyName: FC<Props> = ({ name = '', limit = 100, onUpdatePolicyName }) => {
+const PolicyName = ({ name = '', limit = 100, onUpdatePolicyName }: PolicyNameProps) => {
   return (
     <div className="flex space-x-12">
       <div className="flex w-1/3 flex-col space-y-2">

studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx

@@ -1,15 +1,14 @@
-import { FC } from 'react'
 import type { PostgresRole } from '@supabase/postgres-meta'
 
 import MultiSelect from 'components/ui/MultiSelect'
 
-interface Props {
+interface PolicyRolesProps {
   roles: PostgresRole[]
   selectedRoles: string[]
   onUpdateSelectedRoles: (roles: string[]) => void
 }
 
-const PolicyRoles: FC<Props> = ({ roles, selectedRoles, onUpdateSelectedRoles }) => {
+const PolicyRoles = ({ roles, selectedRoles, onUpdateSelectedRoles }: PolicyRolesProps) => {
   // @ts-ignore
   const formattedRoles = roles.map((role) => {
     return {

studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx

@@ -1,17 +1,16 @@
-import { FC } from 'react'
+import type { PostgresRole } from '@supabase/postgres-meta'
 import { Modal } from 'ui'
 
-import PolicyName from './PolicyName'
-import PolicyDefinition from './PolicyDefinition'
 import PolicyAllowedOperation from './PolicyAllowedOperation'
-import PolicyRoles from './PolicyRoles'
+import PolicyDefinition from './PolicyDefinition'
 import PolicyEditorFooter from './PolicyEditorFooter'
-import type { PostgresRole } from '@supabase/postgres-meta'
+import PolicyName from './PolicyName'
+import PolicyRoles from './PolicyRoles'
 
 // Exposed for StoragePoliciesEditor.js
 export { PolicyName, PolicyRoles }
 
-interface Props {
+interface PolicyEditorProps {
   isNewPolicy: boolean
   roles: PostgresRole[]
   policyFormFields: any
@@ -20,14 +19,14 @@ interface Props {
   onReviewPolicy: () => void
 }
 
-const PolicyEditor: FC<Props> = ({
+const PolicyEditor = ({
   isNewPolicy = true,
   roles = [],
   policyFormFields = {},
   onUpdatePolicyFormFields = () => {},
   onViewTemplates = () => {},
   onReviewPolicy = () => {},
-}) => {
+}: PolicyEditorProps) => {
   const operation = policyFormFields?.command ?? ''
   const definition = policyFormFields?.definition ?? ''
   const check = policyFormFields?.check ?? ''

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

@@ -1,31 +1,30 @@
-import { Modal } from 'ui'
-import { FC, useState, useEffect } from 'react'
-import { isEmpty } from 'lodash'
 import type { PostgresRole } from '@supabase/postgres-meta'
+import { isEmpty, noop } from 'lodash'
+import { useEffect, useState } from 'react'
+import { Modal } from 'ui'
 
+import ConfirmationModal from 'components/ui/ConfirmationModal'
 import { useStore } from 'hooks'
-import PolicyEditorModalTitle from './PolicyEditorModalTitle'
-import { getGeneralPolicyTemplates } from './PolicyEditorModal.constants'
-
-import PolicyEditor from '../PolicyEditor'
-import PolicyReview from '../PolicyReview'
-import PolicyTemplates from '../PolicyTemplates'
-import PolicySelection from '../PolicySelection'
-import {
-  createSQLPolicy,
-  createPayloadForCreatePolicy,
-  createPayloadForUpdatePolicy,
-} from '../Policies.utils'
 import { POLICY_MODAL_VIEWS } from '../Policies.constants'
 import {
   PolicyFormField,
   PostgresPolicyCreatePayload,
   PostgresPolicyUpdatePayload,
 } from '../Policies.types'
+import {
+  createPayloadForCreatePolicy,
+  createPayloadForUpdatePolicy,
+  createSQLPolicy,
+} from '../Policies.utils'
+import PolicyEditor from '../PolicyEditor'
+import PolicyReview from '../PolicyReview'
+import PolicySelection from '../PolicySelection'
+import PolicyTemplates from '../PolicyTemplates'
 import { PolicyTemplate } from '../PolicyTemplates/PolicyTemplates.constants'
-import ConfirmationModal from 'components/ui/ConfirmationModal'
+import { getGeneralPolicyTemplates } from './PolicyEditorModal.constants'
+import PolicyEditorModalTitle from './PolicyEditorModalTitle'
 
-interface Props {
+interface PolicyEditorModalProps {
   visible: boolean
   roles?: PostgresRole[]
   schema: string
@@ -37,17 +36,17 @@ interface Props {
   onSaveSuccess: () => void
 }
 
-const PolicyEditorModal: FC<Props> = ({
+const PolicyEditorModal = ({
   visible = false,
   roles = [],
   schema = '',
   table = '',
   selectedPolicyToEdit = {},
-  onSelectCancel = () => {},
-  onCreatePolicy = () => {},
-  onUpdatePolicy = () => {},
-  onSaveSuccess = () => {},
-}) => {
+  onSelectCancel = noop,
+  onCreatePolicy = () => false,
+  onUpdatePolicy = () => false,
+  onSaveSuccess = noop,
+}: PolicyEditorModalProps) => {
   const { ui } = useStore()
 
   const newPolicyTemplate: PolicyFormField = {

studio/components/interfaces/Auth/Policies/PolicyReview.tsx

@@ -1,20 +1,20 @@
-import { Button, Modal } from 'ui'
-import { isEmpty } from 'lodash'
-import { FC, useState } from 'react'
 import SqlEditor from 'components/ui/SqlEditor'
+import { isEmpty, noop } from 'lodash'
+import { useState } from 'react'
+import { Button, Modal } from 'ui'
 import { PolicyForReview } from './Policies.types'
 
-interface Props {
+interface PolicyReviewProps {
   policy: PolicyForReview
   onSelectBack: () => void
   onSelectSave: () => void
 }
 
-const PolicyReview: FC<Props> = ({
+const PolicyReview = ({
   policy = {},
-  onSelectBack = () => {},
-  onSelectSave = () => {},
-}) => {
+  onSelectBack = noop,
+  onSelectSave = noop,
+}: PolicyReviewProps) => {
   const [isSaving, setIsSaving] = useState(false)
   const onSavePolicy = () => {
     setIsSaving(true)

studio/components/interfaces/Auth/Policies/PolicySelection.tsx

@@ -1,18 +1,19 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { IconEdit, IconGrid, Modal } from 'ui'
+
 import CardButton from 'components/ui/CardButton'
 
-interface Props {
+interface PolicySelectionProps {
   description: string
   onViewTemplates: () => void
   onViewEditor: () => void
 }
 
-const PolicySelection: FC<Props> = ({
+const PolicySelection = ({
   description = '',
-  onViewTemplates = () => {},
-  onViewEditor = () => {},
-}) => {
+  onViewTemplates = noop,
+  onViewEditor = noop,
+}: PolicySelectionProps) => {
   return (
     <Modal.Content>
       <div className="space-y-6 py-8">

studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx

@@ -1,23 +1,23 @@
-import { FC } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, Dropdown, IconEdit, IconTrash, IconMoreVertical } from 'ui'
 import type { PostgresPolicy } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { noop } from 'lodash'
+import { Button, Dropdown, IconEdit, IconMoreVertical, IconTrash } from 'ui'
 
-import { useCheckPermissions } from 'hooks'
 import Panel from 'components/ui/Panel'
+import { useCheckPermissions } from 'hooks'
 
-interface Props {
+interface PolicyRowProps {
   policy: PostgresPolicy
   onSelectEditPolicy: (policy: PostgresPolicy) => void
   onSelectDeletePolicy: (policy: PostgresPolicy) => void
 }
 
-const PolicyRow: FC<Props> = ({
+const PolicyRow = ({
   policy,
-  onSelectEditPolicy = () => {},
-  onSelectDeletePolicy = () => {},
-}) => {
+  onSelectEditPolicy = noop,
+  onSelectDeletePolicy = noop,
+}: PolicyRowProps) => {
   const canUpdatePolicies = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'policies')
 
   return (

studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx

@@ -1,25 +1,26 @@
-import Link from 'next/link'
-import { FC } from 'react'
-import { useRouter } from 'next/router'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Badge, Button, IconLock } from 'ui'
 import type { PostgresTable } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { noop } from 'lodash'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Badge, Button, IconLock } from 'ui'
+
 import { useCheckPermissions } from 'hooks'
 
-interface Props {
+interface PolicyTableRowHeaderProps {
   table: PostgresTable
   isLocked: boolean
   onSelectToggleRLS: (table: PostgresTable) => void
   onSelectCreatePolicy: (table: PostgresTable) => void
 }
 
-const PolicyTableRowHeader: FC<Props> = ({
+const PolicyTableRowHeader = ({
   table,
   isLocked,
-  onSelectToggleRLS = () => {},
-  onSelectCreatePolicy = () => {},
-}) => {
+  onSelectToggleRLS = noop,
+  onSelectCreatePolicy = noop,
+}: PolicyTableRowHeaderProps) => {
   const router = useRouter()
   const { ref } = router.query
   const canToggleRLS = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'tables')

studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx

@@ -1,13 +1,14 @@
-import { FC } from 'react'
-import type { PostgresTable, PostgresPolicy } from '@supabase/postgres-meta'
+import type { PostgresPolicy, PostgresTable } from '@supabase/postgres-meta'
+import { noop } from 'lodash'
 import { observer } from 'mobx-react-lite'
-import { useStore } from 'hooks'
-import PolicyTableRowHeader from './PolicyTableRowHeader'
-import PolicyRow from './PolicyRow'
-import Panel from 'components/ui/Panel'
 import { Alert } from 'ui'
 
-interface Props {
+import Panel from 'components/ui/Panel'
+import { useStore } from 'hooks'
+import PolicyRow from './PolicyRow'
+import PolicyTableRowHeader from './PolicyTableRowHeader'
+
+interface PolicyTableRowProps {
   table: PostgresTable
   isLocked: boolean
   onSelectToggleRLS: (table: PostgresTable) => void
@@ -16,14 +17,14 @@ interface Props {
   onSelectDeletePolicy: (policy: PostgresPolicy) => void
 }
 
-const PolicyTableRow: FC<Props> = ({
+const PolicyTableRow = ({
   table,
   isLocked,
-  onSelectToggleRLS = () => {},
-  onSelectCreatePolicy = () => {},
-  onSelectEditPolicy = () => {},
-  onSelectDeletePolicy = () => {},
-}) => {
+  onSelectToggleRLS = noop,
+  onSelectCreatePolicy = noop,
+  onSelectEditPolicy = noop,
+  onSelectDeletePolicy = noop,
+}: PolicyTableRowProps) => {
   const { meta } = useStore()
   const policies = meta.policies.list(
     (policy: PostgresPolicy) => policy.schema === table.schema && policy.table === table.name

studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx

@@ -1,13 +1,12 @@
-import { FC } from 'react'
-import { isEmpty } from 'lodash'
 import SqlEditor from 'components/ui/SqlEditor'
+import { isEmpty } from 'lodash'
 import { PolicyTemplate } from './PolicyTemplates.constants'
 
-interface Props {
+interface TemplatePreviewProps {
   selectedTemplate: PolicyTemplate
 }
 
-const TemplatePreview: FC<Props> = ({ selectedTemplate }) => {
+const TemplatePreview = ({ selectedTemplate }: TemplatePreviewProps) => {
   const { id, templateName, description, statement } = selectedTemplate
   return (
     <div className="space-y-8" style={{ width: '70%' }}>

studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx

@@ -1,20 +1,21 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { Menu } from 'ui'
+
 import { PolicyTemplate } from './PolicyTemplates.constants'
 
-interface Props {
+interface TemplatesListProps {
   templates: PolicyTemplate[]
   templatesNote: string
   selectedTemplate: PolicyTemplate
   setSelectedTemplate: (template: PolicyTemplate) => void
 }
 
-const TemplatesList: FC<Props> = ({
+const TemplatesList = ({
   templates = [],
   templatesNote = '',
   selectedTemplate,
-  setSelectedTemplate = () => {},
-}) => (
+  setSelectedTemplate = noop,
+}: TemplatesListProps) => (
   <div className="flex flex-col justify-between border-r dark:border-dark" style={{ width: '30%' }}>
     <div
       className="hide-scrollbar  divide-border-primary space-y-0 divide-y divide-solid overflow-y-auto"

studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx

@@ -1,22 +1,22 @@
+import { isEmpty, noop } from 'lodash'
+import { useState } from 'react'
 import { Button } from 'ui'
-import { FC, useState } from 'react'
-import { isEmpty } from 'lodash'
 
-import TemplatesList from './TemplatesList'
-import TemplatePreview from './TemplatePreview'
 import { PolicyTemplate } from './PolicyTemplates.constants'
+import TemplatePreview from './TemplatePreview'
+import TemplatesList from './TemplatesList'
 
-interface Props {
+interface PolicyTemplatesProps {
   templates: PolicyTemplate[]
   templatesNote: string
   onUseTemplate: (template: PolicyTemplate) => void
 }
 
-const PolicyTemplates: FC<Props> = ({
+const PolicyTemplates = ({
   templates = [],
   templatesNote = '',
-  onUseTemplate = () => {},
-}) => {
+  onUseTemplate = noop,
+}: PolicyTemplatesProps) => {
   const [selectedTemplate, setSelectedTemplate] = useState(templates[0])
   return (
     <div>

studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx

@@ -1,18 +1,18 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { observer } from 'mobx-react-lite'
 import { Button, IconGlobe, IconTrash } from 'ui'
 
+import { HorizontalShimmerWithIcon } from 'components/ui/Shimmers'
+import { EmptyListState } from 'components/ui/States'
 import { useStore } from 'hooks'
 import ValueContainer from './ValueContainer'
-import { EmptyListState } from 'components/ui/States'
-import { HorizontalShimmerWithIcon } from 'components/ui/Shimmers'
 
-interface Props {
+interface RedirectUrlListProps {
   canUpdate: boolean
   onSelectUrlToDelete: (url: string) => void
 }
 
-const RedirectUrlList: FC<Props> = ({ canUpdate, onSelectUrlToDelete }) => {
+const RedirectUrlList = ({ canUpdate, onSelectUrlToDelete = noop }: RedirectUrlListProps) => {
   const { authConfig } = useStore()
 
   const URI_ALLOW_LIST_ARRAY = authConfig.config.URI_ALLOW_LIST

studio/components/interfaces/Auth/RedirectUrls/ValueContainer.tsx

@@ -1,10 +1,6 @@
-import { FC, ReactNode } from 'react'
+import { PropsWithChildren } from 'react'
 
-interface Props {
-  children: ReactNode
-}
-
-const ValueContainer: FC<Props> = ({ children }) => (
+const ValueContainer = ({ children }: PropsWithChildren<{}>) => (
   <div
     className="
       bg-scale-100 dark:bg-scale-300 border-scale-500 text-scale-1200 flex items-center 

studio/components/interfaces/Auth/Users/UsersListItem.tsx

@@ -1,20 +1,19 @@
-import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
 import { Badge } from 'ui'
 
-import Table from 'components/to-be-cleaned/Table'
 import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+import Table from 'components/to-be-cleaned/Table'
 import UserDropdown from './UserDropdown'
-import { getDateFromIsoString } from './Users.utils'
 import { User } from './Users.types'
+import { getDateFromIsoString } from './Users.utils'
 
-interface Props {
+interface UserListItemProps {
   user: User
   canRemoveUser: boolean
   canRemoveMFAFactors: boolean
 }
 
-const UserListItem: FC<Props> = ({ user, canRemoveUser, canRemoveMFAFactors }) => {
+const UserListItem = ({ user, canRemoveUser, canRemoveMFAFactors }: UserListItemProps) => {
   const isUserConfirmed = user.email_confirmed_at || user.phone_confirmed_at
   const createdAt = getDateFromIsoString(user.created_at)
   const lastSignedIn = getDateFromIsoString(user.last_sign_in_at)

studio/components/interfaces/BillingV2/Invoices.tsx

@@ -1,22 +1,21 @@
-import { FC, useState, useEffect } from 'react'
-import { Button, Loading, IconFileText, IconDownload, IconChevronLeft, IconChevronRight } from 'ui'
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { Button, IconChevronLeft, IconChevronRight, IconDownload, IconFileText, Loading } from 'ui'
 
-import { useStore } from 'hooks'
-import { API_URL } from 'lib/constants'
-import { get, head } from 'lib/common/fetch'
 import Table from 'components/to-be-cleaned/Table'
-
+import { useStore } from 'hooks'
+import { get, head } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
 import InvoiceStatusBadge from './InvoiceStatusBadge'
 import { Invoice, InvoiceStatus } from './Invoices.types'
 
 const PAGE_LIMIT = 10
 
-interface Props {
+interface InvoicesProps {
   projectRef: string
 }
 
-const Invoices: FC<Props> = ({ projectRef }) => {
+const Invoices = ({ projectRef }: InvoicesProps) => {
   const { ui } = useStore()
   const [loading, setLoading] = useState<any>(false)