Remove observer calls for pages and components that no longer use mobx stores (#21934)

* Final replacements of ui setNotification with toast

* Rip out UiStore

* Rip out UiStore

* Shift files under authConfigSchema to components/Auth

* Rip out use of observers

* Remove observer calls for pages and components that no longer use mobx stores

apps/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx

@@ -1,5 +1,4 @@
 import { useIsFeatureEnabled, useSelectedOrganization, useSelectedProject, withAuth } from 'hooks'
-import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 import { PropsWithChildren } from 'react'
 import { generateSettingsMenu } from './SettingsMenu.utils'
@@ -57,4 +56,4 @@ const SettingsLayout = ({ title, children }: PropsWithChildren<SettingsLayoutPro
   )
 }
 
-export default withAuth(observer(SettingsLayout))
+export default withAuth(SettingsLayout)

apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx

@@ -1,11 +1,19 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useParams } from 'common'
 import { partition } from 'lodash'
 import { Plus } from 'lucide-react'
-import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 import { useMemo, useState } from 'react'
 import toast from 'react-hot-toast'
+
+import { useParams } from 'common'
+import { untitledSnippetTitle } from 'components/interfaces/SQLEditor/SQLEditor.constants'
+import { createSqlSnippetSkeleton } from 'components/interfaces/SQLEditor/SQLEditor.utils'
+import { useContentDeleteMutation } from 'data/content/content-delete-mutation'
+import { SqlSnippet, useSqlSnippetsQuery } from 'data/content/sql-snippets-query'
+import { useCheckPermissions, useSelectedProject } from 'hooks'
+import { uuidv4 } from 'lib/helpers'
+import { useProfile } from 'lib/profile'
+import { useSnippets, useSqlEditorStateSnapshot } from 'state/sql-editor'
 import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
@@ -17,6 +25,7 @@ import {
   Tooltip_Shadcn_,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import {
   InnerSideBarEmptyPanel,
   InnerSideBarFilterSearchInput,
@@ -28,20 +37,10 @@ import {
   InnerSideMenuItem,
   InnerSideMenuSeparator,
 } from 'ui-patterns/InnerSideMenu'
-
-import { untitledSnippetTitle } from 'components/interfaces/SQLEditor/SQLEditor.constants'
-import { createSqlSnippetSkeleton } from 'components/interfaces/SQLEditor/SQLEditor.utils'
-import { useContentDeleteMutation } from 'data/content/content-delete-mutation'
-import { SqlSnippet, useSqlSnippetsQuery } from 'data/content/sql-snippets-query'
-import { useCheckPermissions, useSelectedProject } from 'hooks'
-import { uuidv4 } from 'lib/helpers'
-import { useProfile } from 'lib/profile'
-import { useSnippets, useSqlEditorStateSnapshot } from 'state/sql-editor'
-import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import QueryItem from './QueryItem'
 import { selectItemsInRange } from './SQLEditorLayout.utils'
 
-const SideBarContent = observer(() => {
+const SideBarContent = () => {
   const { ref, id: activeId } = useParams()
   const router = useRouter()
   const { profile } = useProfile()
@@ -381,6 +380,6 @@ const SideBarContent = observer(() => {
       </ConfirmationModal>
     </>
   )
-})
+}
 
 export default SideBarContent

apps/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx

@@ -1,6 +1,5 @@
-import { useTheme } from 'next-themes'
 import { BASE_PATH } from 'lib/constants'
-import { observer } from 'mobx-react-lite'
+import { useTheme } from 'next-themes'
 import Image from 'next/legacy/image'
 import Link from 'next/link'
 import { PropsWithChildren } from 'react'
@@ -60,4 +59,4 @@ const ForgotPasswordLayout = ({
   )
 }
 
-export default observer(ForgotPasswordLayout)
+export default ForgotPasswordLayout

apps/studio/components/layouts/StorageLayout/StorageMenu.tsx

@@ -1,19 +1,10 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useParams } from 'common'
-import { observer } from 'mobx-react-lite'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import {
-  AlertDescription_Shadcn_,
-  AlertTitle_Shadcn_,
-  Alert_Shadcn_,
-  Button,
-  IconEdit,
-  Menu,
-} from 'ui'
 
+import { useParams } from 'common'
 import CreateBucketModal from 'components/interfaces/Storage/CreateBucketModal'
 import EditBucketModal from 'components/interfaces/Storage/EditBucketModal'
 import type { StorageBucket } from 'components/interfaces/Storage/Storage.types'
@@ -22,6 +13,14 @@ import { EmptyBucketModal } from 'components/to-be-cleaned/Storage/EmptyBucketMo
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useBucketsQuery } from 'data/storage/buckets-query'
 import { useCheckPermissions, useSelectedProject } from 'hooks'
+import {
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
+  Button,
+  IconEdit,
+  Menu,
+} from 'ui'
 import BucketRow from './BucketRow'
 
 const StorageMenu = () => {
@@ -183,4 +182,4 @@ const StorageMenu = () => {
   )
 }
 
-export default observer(StorageMenu)
+export default StorageMenu

apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx

@@ -1,5 +1,4 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { observer } from 'mobx-react-lite'
 import { PropsWithChildren, useMemo } from 'react'
 
 import NoPermission from 'components/ui/NoPermission'
@@ -34,4 +33,4 @@ const TableEditorLayout = ({ children }: PropsWithChildren<{}>) => {
   )
 }
 
-export default observer(TableEditorLayout)
+export default TableEditorLayout

apps/studio/components/to-be-cleaned/Reports/EditReportModal.tsx

@@ -3,9 +3,9 @@ import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
-import { Input, Modal } from 'ui'
 
 import { useProjectContentStore } from 'stores/projectContentStore'
+import { Input, Modal } from 'ui'
 
 const EditModal = () => {
   const router = useRouter()

apps/studio/components/to-be-cleaned/Storage/StorageExplorer/ItemContextMenu.tsx

@@ -1,13 +1,13 @@
-import { observer } from 'mobx-react-lite'
-import { Menu, Item, Separator, Submenu } from 'react-contexify'
-import 'react-contexify/dist/ReactContexify.css'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { IconClipboard, IconEdit, IconMove, IconDownload, IconTrash2, IconChevronRight } from 'ui'
+import { noop } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { Item, Menu, Separator, Submenu } from 'react-contexify'
+import 'react-contexify/dist/ReactContexify.css'
 
 import { useCheckPermissions } from 'hooks'
-import { URL_EXPIRY_DURATION } from '../Storage.constants'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
-import { noop } from 'lodash'
+import { IconChevronRight, IconClipboard, IconDownload, IconEdit, IconMove, IconTrash2 } from 'ui'
+import { URL_EXPIRY_DURATION } from '../Storage.constants'
 
 interface ItemContextMenuProps {
   id: string

apps/studio/components/ui/PageTelemetry.tsx

@@ -1,5 +1,4 @@
 import { useIsLoggedIn, useParams, useTelemetryProps } from 'common'
-import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 import { PropsWithChildren, useEffect } from 'react'
 
@@ -87,4 +86,4 @@ const PageTelemetry = ({ children }: PropsWithChildren<{}>) => {
   return <>{children}</>
 }
 
-export default observer(PageTelemetry)
+export default PageTelemetry

apps/studio/pages/500.tsx

@@ -1,12 +1,11 @@
 import { NextPage } from 'next'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
+import { useTheme } from 'next-themes'
 import Image from 'next/legacy/image'
-import { Button } from 'ui'
-import { observer } from 'mobx-react-lite'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 import { useSignOut } from 'lib/auth'
-import { useTheme } from 'next-themes'
+import { Button } from 'ui'
 
 const Error500: NextPage = () => {
   const router = useRouter()
@@ -64,4 +63,4 @@ const Error500: NextPage = () => {
   )
 }
 
-export default observer(Error500)
+export default Error500

apps/studio/pages/account/me.tsx

@@ -1,10 +1,8 @@
-import { observer } from 'mobx-react-lite'
-
 import {
   AccountInformation,
   AnalyticsSettings,
-  ThemeSettingsOld,
   ThemeSettings,
+  ThemeSettingsOld,
 } from 'components/interfaces/Account/Preferences'
 import { ProfileInformation } from 'components/interfaces/Account/Preferences/ProfileInformation'
 import { AccountLayout } from 'components/layouts'
@@ -39,7 +37,7 @@ User.getLayout = (page) => (
 
 export default User
 
-const ProfileCard = observer(() => {
+const ProfileCard = () => {
   const profileUpdateEnabled = useIsFeatureEnabled('profile:update')
 
   const { profile, error, isLoading, isError, isSuccess } = useProfile()
@@ -78,4 +76,4 @@ const ProfileCard = observer(() => {
       </section>
     </article>
   )
-})
+}

apps/studio/pages/new/index.tsx

@@ -2,7 +2,6 @@ import HCaptcha from '@hcaptcha/react-hcaptcha'
 import { Elements } from '@stripe/react-stripe-js'
 import { loadStripe } from '@stripe/stripe-js'
 import { useTheme } from 'next-themes'
-import { observer } from 'mobx-react-lite'
 import { useCallback, useEffect, useState } from 'react'
 
 import { NewOrgForm } from 'components/interfaces/Organization'
@@ -110,4 +109,4 @@ Wizard.getLayout = (page) => (
   </WizardLayout>
 )
 
-export default observer(Wizard)
+export default Wizard

apps/studio/pages/project/[ref]/api/graphiql.tsx

@@ -1,11 +1,10 @@
 import '@graphiql/react/dist/style.css'
 import { createGraphiQLFetcher, Fetcher } from '@graphiql/toolkit'
-import { useParams } from 'common'
-import { observer } from 'mobx-react-lite'
 import { useTheme } from 'next-themes'
 import { useMemo } from 'react'
 import toast from 'react-hot-toast'
 
+import { useParams } from 'common'
 import ExtensionCard from 'components/interfaces/Database/Extensions/ExtensionCard'
 import GraphiQL from 'components/interfaces/GraphQL/GraphiQL'
 import { DocsLayout } from 'components/layouts'
@@ -111,4 +110,5 @@ const GraphiQLPage: NextPageWithLayout = () => {
 }
 
 GraphiQLPage.getLayout = (page) => <DocsLayout title="GraphiQL">{page}</DocsLayout>
-export default observer(GraphiQLPage)
+
+export default GraphiQLPage

apps/studio/pages/project/[ref]/auth/index.tsx

@@ -1,5 +1,3 @@
-import { observer } from 'mobx-react-lite'
-
 import { AuthLayout } from 'components/layouts'
 import type { NextPageWithLayout } from 'types'
 
@@ -9,4 +7,4 @@ const Authentication: NextPageWithLayout = () => {
 
 Authentication.getLayout = (page) => <AuthLayout title="Authentication">{page}</AuthLayout>
 
-export default observer(Authentication)
+export default Authentication

apps/studio/pages/project/[ref]/functions/[functionSlug]/logs.tsx

@@ -1,9 +1,8 @@
-import { observer } from 'mobx-react-lite'
-import type { NextPageWithLayout } from 'types'
 import { useParams } from 'common/hooks'
 import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
 import FunctionsLayout from 'components/layouts/FunctionsLayout'
 import { useEdgeFunctionQuery } from 'data/edge-functions/edge-function-query'
+import type { NextPageWithLayout } from 'types'
 
 export const LogPage: NextPageWithLayout = () => {
   const { ref, functionSlug } = useParams()
@@ -26,4 +25,4 @@ export const LogPage: NextPageWithLayout = () => {
 
 LogPage.getLayout = (page) => <FunctionsLayout>{page}</FunctionsLayout>
 
-export default observer(LogPage)
+export default LogPage

apps/studio/pages/project/[ref]/reports/storage.tsx

@@ -1,30 +1,28 @@
-import { observer } from 'mobx-react-lite'
-import type { NextPageWithLayout } from 'types'
-import { ReportsLayout } from 'components/layouts'
+import { useParams } from 'common'
+import ReportHeader from 'components/interfaces/Reports/ReportHeader'
+import ReportPadding from 'components/interfaces/Reports/ReportPadding'
+import ReportWidget from 'components/interfaces/Reports/ReportWidget'
 import {
   PRESET_CONFIG,
   REPORTS_DATEPICKER_HELPERS,
 } from 'components/interfaces/Reports/Reports.constants'
-import ReportWidget from 'components/interfaces/Reports/ReportWidget'
 import { queriesFactory } from 'components/interfaces/Reports/Reports.utils'
 import {
   CacheHitRateChartRenderer,
   TopCacheMissesRenderer,
 } from 'components/interfaces/Reports/renderers/StorageRenderers'
-import { useEffect, useMemo } from 'react'
-import ReportHeader from 'components/interfaces/Reports/ReportHeader'
 import { DatePickerToFrom, LogsEndpointParams } from 'components/interfaces/Settings/Logs'
-import { useParams } from 'common'
-import ShimmerLine from 'components/ui/ShimmerLine'
-import ReportPadding from 'components/interfaces/Reports/ReportPadding'
 import DatePickers from 'components/interfaces/Settings/Logs/Logs.DatePickers'
+import { ReportsLayout } from 'components/layouts'
+import ShimmerLine from 'components/ui/ShimmerLine'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { useSelectedOrganization } from 'hooks'
+import { useEffect, useMemo } from 'react'
+import type { NextPageWithLayout } from 'types'
 
 export const StorageReport: NextPageWithLayout = () => {
-  const { ref: projectRef } = useParams()
-  const organization = useSelectedOrganization()
   const report = useStorageReport()
+  const organization = useSelectedOrganization()
 
   const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: organization?.slug })
   const plan = subscription?.plan
@@ -123,4 +121,4 @@ const useStorageReport = () => {
 
 StorageReport.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
 
-export default observer(StorageReport)
+export default StorageReport

apps/studio/pages/project/[ref]/settings/database.tsx

@@ -4,7 +4,6 @@ import {
   NetworkRestrictions,
 } from 'components/interfaces/Settings/Database'
 import { SettingsLayout } from 'components/layouts'
-import { observer } from 'mobx-react-lite'
 import type { NextPageWithLayout } from 'types'
 
 import BannedIPs from 'components/interfaces/Settings/Database/BannedIPs'
@@ -40,4 +39,4 @@ const ProjectSettings: NextPageWithLayout = () => {
 
 ProjectSettings.getLayout = (page) => <SettingsLayout title="Database">{page}</SettingsLayout>
 
-export default observer(ProjectSettings)
+export default ProjectSettings

apps/studio/pages/project/[ref]/settings/index.tsx

@@ -1,5 +1,3 @@
-import { observer } from 'mobx-react-lite'
-
 import { SettingsLayout } from 'components/layouts'
 import type { NextPageWithLayout } from 'types'
 
@@ -9,4 +7,4 @@ const Settings: NextPageWithLayout = () => {
 
 Settings.getLayout = (page) => <SettingsLayout>{page}</SettingsLayout>
 
-export default observer(Settings)
+export default Settings

apps/studio/pages/project/[ref]/sql/quickstarts.tsx

@@ -1,7 +1,6 @@
-import { observer } from 'mobx-react-lite'
-import type { NextPageWithLayout } from 'types'
-import { SQLEditorLayout } from 'components/layouts'
 import SQLQuickstarts from 'components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts'
+import { SQLEditorLayout } from 'components/layouts'
+import type { NextPageWithLayout } from 'types'
 
 const SqlEditorWelcome: NextPageWithLayout = () => {
   return <SQLQuickstarts />
@@ -9,4 +8,4 @@ const SqlEditorWelcome: NextPageWithLayout = () => {
 
 SqlEditorWelcome.getLayout = (page) => <SQLEditorLayout title="Quickstarts">{page}</SQLEditorLayout>
 
-export default observer(SqlEditorWelcome)
+export default SqlEditorWelcome

apps/studio/pages/project/[ref]/sql/templates.tsx

@@ -1,7 +1,6 @@
-import { observer } from 'mobx-react-lite'
-import type { NextPageWithLayout } from 'types'
-import { SQLEditorLayout } from 'components/layouts'
 import SQLTemplates from 'components/interfaces/SQLEditor/SQLTemplates/SQLTemplates'
+import { SQLEditorLayout } from 'components/layouts'
+import type { NextPageWithLayout } from 'types'
 
 const SqlEditorWelcome: NextPageWithLayout = () => {
   return <SQLTemplates />
@@ -9,4 +8,4 @@ const SqlEditorWelcome: NextPageWithLayout = () => {
 
 SqlEditorWelcome.getLayout = (page) => <SQLEditorLayout title="SQL">{page}</SQLEditorLayout>
 
-export default observer(SqlEditorWelcome)
+export default SqlEditorWelcome

apps/studio/pages/project/_/[[...routeSlug]].tsx

@@ -1,4 +1,3 @@
-import { observer } from 'mobx-react-lite'
 import { NextPage } from 'next'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -65,4 +64,4 @@ const GenericProjectPage: NextPage = () => {
   )
 }
 
-export default withAuth(observer(GenericProjectPage))
+export default withAuth(GenericProjectPage)

apps/studio/pages/support/new.tsx

@@ -1,15 +1,14 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { observer } from 'mobx-react-lite'
 import Link from 'next/link'
 import { useState } from 'react'
 import SVG from 'react-inlinesvg'
-import { Button, IconLoader, IconTool } from 'ui'
 
 import Success from 'components/interfaces/Support/Success'
 import SupportForm from 'components/interfaces/Support/SupportForm'
 import { usePlatformStatusQuery } from 'data/platform/platform-status-query'
 import { withAuth } from 'hooks'
 import { BASE_PATH } from 'lib/constants'
+import { Button, IconLoader, IconTool } from 'ui'
 
 const SupportPage = () => {
   const [sentCategory, setSentCategory] = useState<string>()
@@ -94,4 +93,4 @@ const SupportPage = () => {
   )
 }
 
-export default withAuth(observer(SupportPage), { useHighestAAL: false })
+export default withAuth(SupportPage, { useHighestAAL: false })