From 948a2390fe09d688cf08c059b3d7bc7685496aa8 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 12 Mar 2024 12:56:56 +0800 Subject: [PATCH] Final replacements of ui setNotification with toast (#21885) * 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 --- apps/studio/components/README.md | 4 +- .../interfaces/App/RouteValidationWrapper.tsx | 3 +- .../AuthProvidersForm/AuthProvidersForm.tsx | 5 +- .../Auth}/AuthProvidersFormValidation.tsx | 2 +- .../Auth}/AuthTemplatesValidation.tsx | 10 +- .../Auth/EmailTemplates/EmailTemplates.tsx | 13 +- .../Publications/PublicationsTableItem.tsx | 9 +- .../Database/Schemas/SchemaGraph.tsx | 9 +- .../interfaces/Database/Tables/ColumnList.tsx | 3 +- .../interfaces/Database/Tables/TableList.tsx | 5 +- .../Database/Wrappers/CreateWrapper.tsx | 11 +- .../Database/Wrappers/EditWrapper.tsx | 5 +- .../interfaces/Database/Wrappers/Wrappers.tsx | 5 +- .../Wrappers/WrappersDisabledState.tsx | 7 +- .../Database/Wrappers/WrappersDropdown.tsx | 9 +- .../interfaces/Home/ProjectUsageSection.tsx | 12 +- .../Subscription/PlanUpdateSidePanel.tsx | 2 +- .../GeneralSettings/GeneralSettings.tsx | 7 +- .../OrganizationDeletePanel.tsx | 30 ++-- .../TeamSettings/MemberActions.tsx | 3 +- .../Organization/TeamSettings/MembersView.tsx | 3 +- .../interfaces/SQLEditor/SQLEditor.tsx | 11 +- .../SQLEditor/SQLTemplates/SQLQuickstarts.tsx | 7 +- .../SQLEditor/SQLTemplates/SQLTemplates.tsx | 11 +- .../Settings/API/PostgrestConfig.tsx | 3 +- .../CustomDomainActivate.tsx | 17 +- .../CustomDomainConfig/CustomDomainDelete.tsx | 7 +- .../CustomDomainConfig/CustomDomainVerify.tsx | 47 +++--- .../CustomDomainsConfigureHostname.tsx | 7 +- .../Infrastructure/RestartServerButton.tsx | 3 +- .../Vault/Keys/EncryptionKeysManagement.tsx | 3 +- .../Vault/Secrets/SecretsManagement.tsx | 7 +- .../interfaces/Settings/Vault/VaultToggle.tsx | 3 +- .../SidePanelEditor/SidePanelEditor.tsx | 38 ++--- .../TableGridEditor/TableDefinition.tsx | 9 +- .../TableGridEditor/TableGridEditor.tsx | 5 +- .../layouts/DatabaseLayout/DatabaseLayout.tsx | 3 +- .../layouts/DocsLayout/DocsLayout.tsx | 3 +- .../components/layouts/FunctionsLayout.tsx | 7 +- .../LayoutHeader/BreadcrumbsView.tsx | 3 +- .../components/layouts/WizardLayout.tsx | 7 +- apps/studio/components/ui/ToastLoader.tsx | 27 ++++ apps/studio/hooks/index.ts | 3 +- apps/studio/hooks/misc/useStore.tsx | 68 -------- ...lorerStore.ts => StorageExplorerStore.tsx} | 149 +++++++++--------- apps/studio/pages/README.md | 9 +- apps/studio/pages/_app.tsx | 72 ++++----- .../pages/project/[ref]/reports/index.tsx | 6 +- apps/studio/pages/project/[ref]/sql/[id].tsx | 3 +- .../[ref]/storage/buckets/[bucketId].tsx | 3 +- .../pages/project/[ref]/storage/index.tsx | 4 +- apps/studio/stores/README.md | 23 --- apps/studio/stores/UiStore.ts | 22 --- apps/studio/stores/authConfig/schema/index.ts | 2 - apps/studio/tests/helpers.tsx | 17 +- 55 files changed, 309 insertions(+), 457 deletions(-) rename apps/studio/{stores/authConfig/schema/AuthProviders => components/interfaces/Auth}/AuthProvidersFormValidation.tsx (99%) rename apps/studio/{stores/authConfig/schema/AuthProviders => components/interfaces/Auth}/AuthTemplatesValidation.tsx (96%) create mode 100644 apps/studio/components/ui/ToastLoader.tsx delete mode 100644 apps/studio/hooks/misc/useStore.tsx rename apps/studio/localStores/storageExplorer/{StorageExplorerStore.ts => StorageExplorerStore.tsx} (95%) delete mode 100644 apps/studio/stores/README.md delete mode 100644 apps/studio/stores/UiStore.ts delete mode 100644 apps/studio/stores/authConfig/schema/index.ts diff --git a/apps/studio/components/README.md b/apps/studio/components/README.md index e98e5723878..c5d618a74b1 100644 --- a/apps/studio/components/README.md +++ b/apps/studio/components/README.md @@ -29,7 +29,6 @@ ## Template for building components ```ts -import { observer } from 'mobx-react-lite' // Declare the prop types of your component interface ComponentAProps { @@ -41,6 +40,5 @@ const ComponentA = ({ sampleProp }: ComponentAProps) => { return
ComponentA: {sampleProp}
} -// Observer is so that components listen to mobx store changes -export default observer(ComponentA) +export default ComponentA ``` diff --git a/apps/studio/components/interfaces/App/RouteValidationWrapper.tsx b/apps/studio/components/interfaces/App/RouteValidationWrapper.tsx index a6ff31026b9..c8b4f76f0e9 100644 --- a/apps/studio/components/interfaces/App/RouteValidationWrapper.tsx +++ b/apps/studio/components/interfaces/App/RouteValidationWrapper.tsx @@ -1,4 +1,3 @@ -import { observer } from 'mobx-react-lite' import { useRouter } from 'next/router' import { PropsWithChildren, useEffect } from 'react' import toast from 'react-hot-toast' @@ -125,4 +124,4 @@ const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => { return <>{children} } -export default observer(RouteValidationWrapper) +export default RouteValidationWrapper diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthProvidersForm.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthProvidersForm.tsx index 64b5d52fac7..1329e50d50f 100644 --- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthProvidersForm.tsx +++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthProvidersForm.tsx @@ -1,10 +1,9 @@ import { useParams } from 'common' -import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, IconAlertCircle } from 'ui' - import { FormHeader } from 'components/ui/Forms' import { HorizontalShimmerWithIcon } from 'components/ui/Shimmers' import { useAuthConfigQuery } from 'data/auth/auth-config-query' -import { PROVIDERS_SCHEMAS } from 'stores/authConfig/schema' +import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, IconAlertCircle } from 'ui' +import { PROVIDERS_SCHEMAS } from '../AuthProvidersFormValidation' import { ProviderCollapsibleClasses } from './AuthProvidersForm.constants' import ProviderForm from './ProviderForm' diff --git a/apps/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersFormValidation.tsx similarity index 99% rename from apps/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx rename to apps/studio/components/interfaces/Auth/AuthProvidersFormValidation.tsx index 67081ca67ec..fd8186c108b 100644 --- a/apps/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx +++ b/apps/studio/components/interfaces/Auth/AuthProvidersFormValidation.tsx @@ -1331,7 +1331,7 @@ const EXTERNAL_PROVIDER_ZOOM = { }, } -export const PROVIDER_SAML = { +const PROVIDER_SAML = { $schema: JSON_SCHEMA_VERSION, type: 'object', title: 'SAML 2.0', diff --git a/apps/studio/stores/authConfig/schema/AuthProviders/AuthTemplatesValidation.tsx b/apps/studio/components/interfaces/Auth/AuthTemplatesValidation.tsx similarity index 96% rename from apps/studio/stores/authConfig/schema/AuthProviders/AuthTemplatesValidation.tsx rename to apps/studio/components/interfaces/Auth/AuthTemplatesValidation.tsx index 466aa4945e5..bd35698a3f4 100644 --- a/apps/studio/stores/authConfig/schema/AuthProviders/AuthTemplatesValidation.tsx +++ b/apps/studio/components/interfaces/Auth/AuthTemplatesValidation.tsx @@ -3,7 +3,7 @@ import { object, string } from 'yup' const JSON_SCHEMA_VERSION = 'http://json-schema.org/draft-07/schema#' -export const CONFIRMATION: FormSchema = { +const CONFIRMATION: FormSchema = { $schema: JSON_SCHEMA_VERSION, id: 'CONFIRMATION', type: 'object', @@ -37,7 +37,7 @@ export const CONFIRMATION: FormSchema = { }, } -export const INVITE: FormSchema = { +const INVITE: FormSchema = { $schema: JSON_SCHEMA_VERSION, id: 'INVITE', type: 'object', @@ -71,7 +71,7 @@ export const INVITE: FormSchema = { }, } -export const MAGIC_LINK: FormSchema = { +const MAGIC_LINK: FormSchema = { $schema: JSON_SCHEMA_VERSION, id: 'MAGIC_LINK', type: 'object', @@ -105,7 +105,7 @@ export const MAGIC_LINK: FormSchema = { }, } -export const EMAIL_CHANGE: FormSchema = { +const EMAIL_CHANGE: FormSchema = { $schema: JSON_SCHEMA_VERSION, id: 'EMAIL_CHANGE', type: 'object', @@ -140,7 +140,7 @@ export const EMAIL_CHANGE: FormSchema = { }, } -export const RECOVERY: FormSchema = { +const RECOVERY: FormSchema = { $schema: JSON_SCHEMA_VERSION, id: 'RECOVERY', type: 'object', diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx index 1669498136a..b343f29a1d9 100644 --- a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx +++ b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx @@ -1,3 +1,7 @@ +import { useParams } from 'common' +import { FormHeader, FormPanel } from 'components/ui/Forms' +import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' +import { useAuthConfigQuery } from 'data/auth/auth-config-query' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, @@ -7,14 +11,9 @@ import { IconExternalLink, Tabs, } from 'ui' - -import { useParams } from 'common' -import { FormHeader, FormPanel } from 'components/ui/Forms' -import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' -import { useAuthConfigQuery } from 'data/auth/auth-config-query' -import { TEMPLATES_SCHEMAS } from 'stores/authConfig/schema' -import TemplateEditor from './TemplateEditor' +import { TEMPLATES_SCHEMAS } from '../AuthTemplatesValidation' import EmailRateLimitsAlert from '../EmailRateLimitsAlert' +import TemplateEditor from './TemplateEditor' const EmailTemplates = () => { const { ref: projectRef } = useParams() diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx index f26737450d6..08aa8acb6dc 100644 --- a/apps/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx +++ b/apps/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx @@ -1,13 +1,12 @@ 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 Table from 'components/to-be-cleaned/Table' -import { useCheckPermissions } from 'hooks' -import { useDatabasePublicationUpdateMutation } from 'data/database-publications/database-publications-update-mutation' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' +import Table from 'components/to-be-cleaned/Table' +import { useDatabasePublicationUpdateMutation } from 'data/database-publications/database-publications-update-mutation' +import { useCheckPermissions } from 'hooks' import toast from 'react-hot-toast' interface PublicationsTableItemProps { @@ -100,4 +99,4 @@ const PublicationsTableItem = ({ table, selectedPublication }: PublicationsTable ) } -export default observer(PublicationsTableItem) +export default PublicationsTableItem diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx index d647e2c85de..94cf095b80d 100644 --- a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx +++ b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx @@ -1,6 +1,7 @@ import dagre from '@dagrejs/dagre' +import type { PostgresTable } from '@supabase/postgres-meta' import { uniqBy } from 'lodash' -import { observer } from 'mobx-react-lite' +import { useTheme } from 'next-themes' import { useEffect, useMemo } from 'react' import ReactFlow, { Background, @@ -12,12 +13,10 @@ import ReactFlow, { ReactFlowProvider, useReactFlow, } from 'reactflow' +import 'reactflow/dist/style.css' -import type { PostgresTable } from '@supabase/postgres-meta' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import { useTablesQuery } from 'data/tables/tables-query' -import { useTheme } from 'next-themes' -import 'reactflow/dist/style.css' import { IconLoader } from 'ui' import { TABLE_NODE_ROW_HEIGHT, TABLE_NODE_WIDTH, TableNode } from 'ui-patterns/SchemaTableNode' import SchemaGraphLegend from './SchemaGraphLegend' @@ -306,4 +305,4 @@ const SchemaGraph = ({ schema }: { schema: string }) => { ) } -export default observer(SchemaGraph) +export default SchemaGraph diff --git a/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx b/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx index 4fda9433feb..233c86b56c0 100644 --- a/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx +++ b/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx @@ -2,7 +2,6 @@ import * as Tooltip from '@radix-ui/react-tooltip' 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, @@ -245,4 +244,4 @@ const ColumnList = ({ ) } -export default observer(ColumnList) +export default ColumnList diff --git a/apps/studio/components/interfaces/Database/Tables/TableList.tsx b/apps/studio/components/interfaces/Database/Tables/TableList.tsx index b21f5122ef3..4d14ce53614 100644 --- a/apps/studio/components/interfaces/Database/Tables/TableList.tsx +++ b/apps/studio/components/interfaces/Database/Tables/TableList.tsx @@ -1,7 +1,7 @@ import * as Tooltip from '@radix-ui/react-tooltip' import { PermissionAction } from '@supabase/shared-types/out/constants' import { noop, partition } from 'lodash' -import { observer } from 'mobx-react-lite' +import { useRouter } from 'next/router' import { useState } from 'react' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' @@ -14,7 +14,6 @@ import { useSchemasQuery } from 'data/database/schemas-query' import { useTablesQuery } from 'data/tables/tables-query' import { useCheckPermissions } from 'hooks' import { EXCLUDED_SCHEMAS } from 'lib/constants/schemas' -import { useRouter } from 'next/router' import { useTableEditorStateSnapshot } from 'state/table-editor' import { Button, @@ -361,4 +360,4 @@ const TableList = ({ ) } -export default observer(TableList) +export default TableList diff --git a/apps/studio/components/interfaces/Database/Wrappers/CreateWrapper.tsx b/apps/studio/components/interfaces/Database/Wrappers/CreateWrapper.tsx index 213f4584017..cfd602e31fb 100644 --- a/apps/studio/components/interfaces/Database/Wrappers/CreateWrapper.tsx +++ b/apps/studio/components/interfaces/Database/Wrappers/CreateWrapper.tsx @@ -1,30 +1,29 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { useQueryClient } from '@tanstack/react-query' -import { useParams } from 'common' import { isEmpty } from 'lodash' -import { observer } from 'mobx-react-lite' import Link from 'next/link' import { useRouter } from 'next/router' import { useState } from 'react' import toast from 'react-hot-toast' -import { Button, Form, IconArrowLeft, IconEdit, IconExternalLink, IconTrash, Input } from 'ui' +import { useParams } from 'common' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import { FormActions, FormPanel, - FormsContainer, FormSection, FormSectionContent, FormSectionLabel, + FormsContainer, } from 'components/ui/Forms' import { invalidateSchemasQuery } from 'data/database/schemas-query' import { useFDWCreateMutation } from 'data/fdw/fdw-create-mutation' import { useCheckPermissions } from 'hooks' +import { Button, Form, IconArrowLeft, IconEdit, IconExternalLink, IconTrash, Input } from 'ui' import InputField from './InputField' +import WrapperTableEditor from './WrapperTableEditor' import { WRAPPERS } from './Wrappers.constants' import { makeValidateRequired } from './Wrappers.utils' -import WrapperTableEditor from './WrapperTableEditor' const CreateWrapper = () => { const formId = 'create-wrapper-form' @@ -286,4 +285,4 @@ const CreateWrapper = () => { ) } -export default observer(CreateWrapper) +export default CreateWrapper diff --git a/apps/studio/components/interfaces/Database/Wrappers/EditWrapper.tsx b/apps/studio/components/interfaces/Database/Wrappers/EditWrapper.tsx index 0ee190c7073..05f94168637 100644 --- a/apps/studio/components/interfaces/Database/Wrappers/EditWrapper.tsx +++ b/apps/studio/components/interfaces/Database/Wrappers/EditWrapper.tsx @@ -1,13 +1,12 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { useQueryClient } from '@tanstack/react-query' -import { useParams } from 'common' import { isEmpty } from 'lodash' -import { observer } from 'mobx-react-lite' import Link from 'next/link' import { useRouter } from 'next/router' import { useEffect, useState } from 'react' import toast from 'react-hot-toast' +import { useParams } from 'common' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import { FormActions, @@ -411,4 +410,4 @@ const EditWrapper = () => { ) } -export default observer(EditWrapper) +export default EditWrapper diff --git a/apps/studio/components/interfaces/Database/Wrappers/Wrappers.tsx b/apps/studio/components/interfaces/Database/Wrappers/Wrappers.tsx index 2e45d6b489f..bc5f3358a6d 100644 --- a/apps/studio/components/interfaces/Database/Wrappers/Wrappers.tsx +++ b/apps/studio/components/interfaces/Database/Wrappers/Wrappers.tsx @@ -1,13 +1,12 @@ import { groupBy } from 'lodash' -import { observer } from 'mobx-react-lite' import Link from 'next/link' import { useState } from 'react' -import { Button, IconExternalLink } from 'ui' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query' import { FDW, useFDWsQuery } from 'data/fdw/fdws-query' +import { Button, IconExternalLink } from 'ui' import DeleteWrapperModal from './DeleteWrapperModal' import WrapperRow from './WrapperRow' import { WRAPPERS } from './Wrappers.constants' @@ -117,4 +116,4 @@ const Wrappers = () => { ) } -export default observer(Wrappers) +export default Wrappers diff --git a/apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx b/apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx index b27faa1da8d..a7cc80093fa 100644 --- a/apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx +++ b/apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx @@ -1,18 +1,17 @@ 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 { useTheme } from 'next-themes' import Link from 'next/link' import { useState } from 'react' import toast from 'react-hot-toast' -import { Button, IconExternalLink } from 'ui' +import { useParams } from 'common' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import { useDatabaseExtensionEnableMutation } from 'data/database-extensions/database-extension-enable-mutation' import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query' import { useCheckPermissions } from 'hooks' import { BASE_PATH } from 'lib/constants' +import { Button, IconExternalLink } from 'ui' const WrappersDisabledState = () => { const { ref } = useParams() @@ -176,4 +175,4 @@ const WrappersDisabledState = () => { ) } -export default observer(WrappersDisabledState) +export default WrappersDisabledState diff --git a/apps/studio/components/interfaces/Database/Wrappers/WrappersDropdown.tsx b/apps/studio/components/interfaces/Database/Wrappers/WrappersDropdown.tsx index b5b21c2a9cd..b17bf615381 100644 --- a/apps/studio/components/interfaces/Database/Wrappers/WrappersDropdown.tsx +++ b/apps/studio/components/interfaces/Database/Wrappers/WrappersDropdown.tsx @@ -1,9 +1,11 @@ import * as Tooltip from '@radix-ui/react-tooltip' import { PermissionAction } from '@supabase/shared-types/out/constants' -import { observer } from 'mobx-react-lite' import Image from 'next/legacy/image' import Link from 'next/link' import { Fragment } from 'react' + +import { useParams } from 'common' +import { useCheckPermissions } from 'hooks' import { Button, DropdownMenu, @@ -13,9 +15,6 @@ import { DropdownMenuTrigger, IconPlus, } from 'ui' - -import { useParams } from 'common/hooks' -import { useCheckPermissions } from 'hooks' import { WRAPPERS } from './Wrappers.constants' interface WrapperDropdownProps { @@ -85,4 +84,4 @@ const WrapperDropdown = ({ buttonText = 'Add wrapper', align = 'end' }: WrapperD ) } -export default observer(WrapperDropdown) +export default WrapperDropdown diff --git a/apps/studio/components/interfaces/Home/ProjectUsageSection.tsx b/apps/studio/components/interfaces/Home/ProjectUsageSection.tsx index 1f089979f4c..3324b8d12e7 100644 --- a/apps/studio/components/interfaces/Home/ProjectUsageSection.tsx +++ b/apps/studio/components/interfaces/Home/ProjectUsageSection.tsx @@ -1,16 +1,15 @@ -import { observer } from 'mobx-react-lite' -import { IconAlertCircle } from 'ui' +import dayjs from 'dayjs' import { NewProjectPanel } from 'components/interfaces/Home' import { ProjectUsageLoadingState } from 'components/layouts/ProjectLayout/LoadingState' import InformationBox from 'components/ui/InformationBox' import { useProjectLogRequestsCountQuery } from 'data/analytics/project-log-requests-count-query' import { useProjectLogStatsQuery } from 'data/analytics/project-log-stats-query' -import ProjectUsage from './ProjectUsage' import { useSelectedProject } from 'hooks' -import dayjs from 'dayjs' +import { IconAlertCircle } from 'ui' +import ProjectUsage from './ProjectUsage' -const ProjectUsageSection = observer(() => { +const ProjectUsageSection = () => { const project = useSelectedProject() const { @@ -54,5 +53,6 @@ const ProjectUsageSection = observer(() => { )} ) -}) +} + export default ProjectUsageSection diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx index 12c5349d50c..19c588edb2c 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx @@ -17,7 +17,7 @@ import { useOrgPlansQuery } from 'data/subscriptions/org-plans-query' import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' import { useOrgSubscriptionUpdateMutation } from 'data/subscriptions/org-subscription-update-mutation' import type { OrgPlan, SubscriptionTier } from 'data/subscriptions/types' -import { useCheckPermissions, useSelectedOrganization, useStore } from 'hooks' +import { useCheckPermissions, useSelectedOrganization } from 'hooks' import { PRICING_TIER_PRODUCT_IDS } from 'lib/constants' import { formatCurrency } from 'lib/helpers' import Telemetry from 'lib/telemetry' diff --git a/apps/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx b/apps/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx index 47ac6753cae..be3ffa5c8ce 100644 --- a/apps/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx +++ b/apps/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx @@ -1,11 +1,10 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { useQueryClient } from '@tanstack/react-query' -import { useParams } from 'common' -import { observer } from 'mobx-react-lite' import Link from 'next/link' import { useEffect, useState } from 'react' import toast from 'react-hot-toast' +import { useParams } from 'common' import NoProjectsOnPaidOrgInfo from 'components/interfaces/Billing/NoProjectsOnPaidOrgInfo' import { ScaffoldContainerLegacy } from 'components/layouts/Scaffold' import { @@ -23,8 +22,8 @@ import { Collapsible, Form, IconChevronRight, Input, Toggle, cn } from 'ui' import OrganizationDeletePanel from './OrganizationDeletePanel' const GeneralSettings = () => { - const queryClient = useQueryClient() const { slug } = useParams() + const queryClient = useQueryClient() const [open, setOpen] = useState(false) const selectedOrganization = useSelectedOrganization() const { name, opt_in_tags } = selectedOrganization ?? {} @@ -199,4 +198,4 @@ const GeneralSettings = () => { ) } -export default observer(GeneralSettings) +export default GeneralSettings diff --git a/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx b/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx index 5d52aa2cf04..87a6ec5ee8e 100644 --- a/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx +++ b/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx @@ -1,10 +1,9 @@ -import { observer } from 'mobx-react-lite' -import { Alert } from 'ui' - import Panel from 'components/ui/Panel' +import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_ } from 'ui' +import { CriticalIcon } from 'ui-patterns/Icons/StatusIcons' import DeleteOrganizationButton from './DeleteOrganizationButton' -const OrganizationDeletePanel = observer(() => { +const OrganizationDeletePanel = () => { return ( { } > - - Deleting this organization will also remove its projects - - } - > -

+ + + + Deleting this organization will also remove its projects + + Make sure you have made a backup if you want to keep your data -

+ - + ) -}) +} export default OrganizationDeletePanel diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx index 0f16818ff06..3d0dc8ea63a 100644 --- a/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx +++ b/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx @@ -1,6 +1,5 @@ import * as Tooltip from '@radix-ui/react-tooltip' import { PermissionAction } from '@supabase/shared-types/out/constants' -import { observer } from 'mobx-react-lite' import { useState } from 'react' import toast from 'react-hot-toast' @@ -208,4 +207,4 @@ const MemberActions = ({ member, roles }: MemberActionsProps) => { ) } -export default observer(MemberActions) +export default MemberActions diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx index 9371ce689ef..6f8723786c6 100644 --- a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx +++ b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx @@ -1,5 +1,4 @@ import * as Tooltip from '@radix-ui/react-tooltip' -import { observer } from 'mobx-react-lite' import Image from 'next/legacy/image' import { Fragment, useState } from 'react' import toast from 'react-hot-toast' @@ -408,4 +407,4 @@ const MembersView = ({ searchString }: MembersViewProps) => { ) } -export default observer(MembersView) +export default MembersView diff --git a/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx b/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx index bb3badbfefb..eaea903d658 100644 --- a/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx +++ b/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx @@ -18,13 +18,7 @@ import { useExecuteSqlMutation } from 'data/sql/execute-sql-mutation' import { useFormatQueryMutation } from 'data/sql/format-sql-query' import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' import { isError } from 'data/utils/error-check' -import { - useFlag, - useLocalStorageQuery, - useSelectedOrganization, - useSelectedProject, - useStore, -} from 'hooks' +import { useFlag, useLocalStorageQuery, useSelectedOrganization, useSelectedProject } from 'hooks' import { BASE_PATH, IS_PLATFORM, LOCAL_STORAGE_KEYS, OPT_IN_TAGS } from 'lib/constants' import { uuidv4 } from 'lib/helpers' import { useProfile } from 'lib/profile' @@ -89,7 +83,6 @@ export function useSqlEditor() { } const SQLEditor = () => { - const { ui } = useStore() const { ref, id: urlId } = useParams() const router = useRouter() const telemetryProps = useTelemetryProps() @@ -398,7 +391,7 @@ const SQLEditor = () => { toast.error(`Failed to create new query: ${error.message}`) } }, - [profile?.id, project?.id, ref, router, snap, ui] + [profile?.id, project?.id, ref, router, snap] ) const updateEditorWithCheckForDiff = ({ diff --git a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts.tsx b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts.tsx index 6ae77372afb..514e6dc662d 100644 --- a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts.tsx +++ b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts.tsx @@ -1,10 +1,9 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' -import { useParams, useTelemetryProps } from 'common' import { partition } from 'lodash' -import { observer } from 'mobx-react-lite' import { useRouter } from 'next/router' import toast from 'react-hot-toast' +import { useParams, useTelemetryProps } from 'common' import { SQL_TEMPLATES } from 'components/interfaces/SQLEditor/SQLEditor.queries' import type { SqlSnippet } from 'data/content/sql-snippets-query' import { useCheckPermissions, useSelectedProject } from 'hooks' @@ -15,7 +14,7 @@ import { useSqlEditorStateSnapshot } from 'state/sql-editor' import { createSqlSnippetSkeleton } from '../SQLEditor.utils' import SQLCard from './SQLCard' -const SQLQuickstarts = observer(() => { +const SQLQuickstarts = () => { const { ref } = useParams() const router = useRouter() const { profile } = useProfile() @@ -90,6 +89,6 @@ const SQLQuickstarts = observer(() => { ) -}) +} export default SQLQuickstarts diff --git a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx index 124733d20b7..8d2a5aae453 100644 --- a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx +++ b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx @@ -1,14 +1,13 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { partition } from 'lodash' -import { observer } from 'mobx-react-lite' -import toast from 'react-hot-toast' -import { useTelemetryProps } from 'common' import { useRouter } from 'next/router' +import toast from 'react-hot-toast' +import { useTelemetryProps } from 'common' import { SQL_TEMPLATES } from 'components/interfaces/SQLEditor/SQLEditor.queries' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import type { SqlSnippet } from 'data/content/sql-snippets-query' -import { useCheckPermissions, useStore } from 'hooks' +import { useCheckPermissions } from 'hooks' import { uuidv4 } from 'lib/helpers' import { useProfile } from 'lib/profile' import Telemetry from 'lib/telemetry' @@ -16,7 +15,7 @@ import { useSqlEditorStateSnapshot } from 'state/sql-editor' import { createSqlSnippetSkeleton } from '../SQLEditor.utils' import SQLCard from './SQLCard' -const SQLTemplates = observer(() => { +const SQLTemplates = () => { const router = useRouter() const { profile } = useProfile() const { project } = useProjectContext() @@ -89,6 +88,6 @@ const SQLTemplates = observer(() => { ) -}) +} export default SQLTemplates diff --git a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx index 9da616d53fd..6d2110204b1 100644 --- a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx +++ b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx @@ -1,6 +1,5 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { indexOf } from 'lodash' -import { observer } from 'mobx-react-lite' import { useEffect } from 'react' import toast from 'react-hot-toast' @@ -188,4 +187,4 @@ const PostgrestConfig = () => { ) } -export default observer(PostgrestConfig) +export default PostgrestConfig diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainActivate.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainActivate.tsx index 8f97e9792f8..74959f2a485 100644 --- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainActivate.tsx +++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainActivate.tsx @@ -1,7 +1,13 @@ -import { observer } from 'mobx-react-lite' import Link from 'next/link' import { useState } from 'react' import toast from 'react-hot-toast' + +import Panel from 'components/ui/Panel' +import { useProjectApiQuery } from 'data/config/project-api-query' +import { useCheckCNAMERecordMutation } from 'data/custom-domains/check-cname-mutation' +import { useCustomDomainActivateMutation } from 'data/custom-domains/custom-domains-activate-mutation' +import { useCustomDomainDeleteMutation } from 'data/custom-domains/custom-domains-delete-mutation' +import type { CustomDomainResponse } from 'data/custom-domains/custom-domains-query' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, @@ -13,13 +19,6 @@ import { } from 'ui' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' -import Panel from 'components/ui/Panel' -import { useProjectApiQuery } from 'data/config/project-api-query' -import { useCheckCNAMERecordMutation } from 'data/custom-domains/check-cname-mutation' -import { useCustomDomainActivateMutation } from 'data/custom-domains/custom-domains-activate-mutation' -import { useCustomDomainDeleteMutation } from 'data/custom-domains/custom-domains-delete-mutation' -import type { CustomDomainResponse } from 'data/custom-domains/custom-domains-query' - export type CustomDomainActivateProps = { projectRef?: string customDomain: CustomDomainResponse @@ -167,4 +166,4 @@ const CustomDomainActivate = ({ projectRef, customDomain }: CustomDomainActivate ) } -export default observer(CustomDomainActivate) +export default CustomDomainActivate diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx index a943eb10a4c..1a2d7f2d5ed 100644 --- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx +++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx @@ -1,13 +1,12 @@ -import { observer } from 'mobx-react-lite' import Link from 'next/link' import { useState } from 'react' import toast from 'react-hot-toast' -import { Button, IconExternalLink, IconTrash } from 'ui' -import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog' import Panel from 'components/ui/Panel' import { useCustomDomainDeleteMutation } from 'data/custom-domains/custom-domains-delete-mutation' import type { CustomDomainResponse } from 'data/custom-domains/custom-domains-query' +import { Button, IconExternalLink, IconTrash } from 'ui' +import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog' export type CustomDomainDeleteProps = { projectRef?: string @@ -88,4 +87,4 @@ const CustomDomainDelete = ({ projectRef, customDomain }: CustomDomainDeleteProp ) } -export default observer(CustomDomainDelete) +export default CustomDomainDelete diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx index bd2083d96b0..8e3c84d0bbe 100644 --- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx +++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx @@ -1,8 +1,12 @@ -import { observer } from 'mobx-react-lite' import Link from 'next/link' import { useState } from 'react' + +import Panel from 'components/ui/Panel' +import type { ProjectApiResponse } from 'data/config/project-api-query' +import { useCustomDomainDeleteMutation } from 'data/custom-domains/custom-domains-delete-mutation' +import type { CustomDomainResponse } from 'data/custom-domains/custom-domains-query' +import { useCustomDomainReverifyMutation } from 'data/custom-domains/custom-domains-reverify-mutation' import { - Alert, AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, @@ -12,12 +16,7 @@ import { IconHelpCircle, IconRefreshCw, } from 'ui' - -import Panel from 'components/ui/Panel' -import type { ProjectApiResponse } from 'data/config/project-api-query' -import { useCustomDomainDeleteMutation } from 'data/custom-domains/custom-domains-delete-mutation' -import type { CustomDomainResponse } from 'data/custom-domains/custom-domains-query' -import { useCustomDomainReverifyMutation } from 'data/custom-domains/custom-domains-reverify-mutation' +import { WarningIcon } from 'ui-patterns/Icons/StatusIcons' import DNSRecord from './DNSRecord' export type CustomDomainVerifyProps = { @@ -120,21 +119,27 @@ const CustomDomainVerify = ({ projectRef, customDomain, settings }: CustomDomain {hasCAAErrors && ( - - Please add a CAA record allowing "digicert.com" to issue certificates for{' '} - {customDomain.hostname}. For example:{' '} - 0 issue "digicert.com" - + + + + Certificate Authority Authentication (CAA) error + + + Please add a CAA record allowing "digicert.com" to issue certificates for{' '} + {customDomain.hostname}. For example:{' '} + 0 issue "digicert.com" + + )} {customDomain.ssl.status === 'validation_timed_out' ? ( - - Please click "Verify" again to retry the validation of the records - + + + Validation timed out + + Please click "Verify" again to retry the validation of the records + + ) : (
@@ -242,4 +247,4 @@ const CustomDomainVerify = ({ projectRef, customDomain, settings }: CustomDomain ) } -export default observer(CustomDomainVerify) +export default CustomDomainVerify diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx index 379cfe4c432..d781187b989 100644 --- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx +++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx @@ -1,10 +1,8 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' -import { useParams } from 'common' -import { observer } from 'mobx-react-lite' import Link from 'next/link' -import { Button, Form, IconExternalLink, Input } from 'ui' import * as yup from 'yup' +import { useParams } from 'common' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import { FormActions, @@ -17,6 +15,7 @@ import { useProjectApiQuery } from 'data/config/project-api-query' import { useCheckCNAMERecordMutation } from 'data/custom-domains/check-cname-mutation' import { useCustomDomainCreateMutation } from 'data/custom-domains/custom-domains-create-mutation' import { useCheckPermissions } from 'hooks' +import { Button, Form, IconExternalLink, Input } from 'ui' const schema = yup.object({ domain: yup.string().required('A value for your custom domain is required'), @@ -131,4 +130,4 @@ const CustomDomainsConfigureHostname = () => { ) } -export default observer(CustomDomainsConfigureHostname) +export default CustomDomainsConfigureHostname diff --git a/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx b/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx index 51208880e0a..8eb59429c5b 100644 --- a/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx +++ b/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx @@ -1,7 +1,6 @@ import * as Tooltip from '@radix-ui/react-tooltip' import { PermissionAction } from '@supabase/shared-types/out/constants' import { useQueryClient } from '@tanstack/react-query' -import { observer } from 'mobx-react-lite' import { useRouter } from 'next/router' import { useState } from 'react' import toast from 'react-hot-toast' @@ -175,4 +174,4 @@ const RestartServerButton = () => { ) } -export default observer(RestartServerButton) +export default RestartServerButton diff --git a/apps/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeysManagement.tsx b/apps/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeysManagement.tsx index 3c6282419dd..1704d357e3b 100644 --- a/apps/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeysManagement.tsx +++ b/apps/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeysManagement.tsx @@ -2,7 +2,6 @@ import * as Tooltip from '@radix-ui/react-tooltip' import { PermissionAction } from '@supabase/shared-types/out/constants' import dayjs from 'dayjs' import { sortBy } from 'lodash' -import { observer } from 'mobx-react-lite' import Link from 'next/link' import { Fragment, useEffect, useState } from 'react' import toast from 'react-hot-toast' @@ -383,4 +382,4 @@ const EncryptionKeysManagement = () => { ) } -export default observer(EncryptionKeysManagement) +export default EncryptionKeysManagement diff --git a/apps/studio/components/interfaces/Settings/Vault/Secrets/SecretsManagement.tsx b/apps/studio/components/interfaces/Settings/Vault/Secrets/SecretsManagement.tsx index 30c62774ddd..99ffbf7048f 100644 --- a/apps/studio/components/interfaces/Settings/Vault/Secrets/SecretsManagement.tsx +++ b/apps/studio/components/interfaces/Settings/Vault/Secrets/SecretsManagement.tsx @@ -1,17 +1,16 @@ import * as Tooltip from '@radix-ui/react-tooltip' import { PermissionAction } from '@supabase/shared-types/out/constants' -import { useParams } from 'common' import { sortBy } from 'lodash' -import { observer } from 'mobx-react-lite' import Link from 'next/link' import { Fragment, useEffect, useState } from 'react' -import { Button, IconExternalLink, IconLoader, IconSearch, IconX, Input, Listbox } from 'ui' +import { useParams } from 'common' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import Divider from 'components/ui/Divider' import { useVaultSecretsQuery } from 'data/vault/vault-secrets-query' import { useCheckPermissions } from 'hooks' import type { VaultSecret } from 'types' +import { Button, IconExternalLink, IconLoader, IconSearch, IconX, Input, Listbox } from 'ui' import AddNewSecretModal from './AddNewSecretModal' import DeleteSecretModal from './DeleteSecretModal' import EditSecretModal from './EditSecretModal' @@ -217,4 +216,4 @@ const SecretsManagement = () => { ) } -export default observer(SecretsManagement) +export default SecretsManagement diff --git a/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx b/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx index b7de3eea001..e3112dee147 100644 --- a/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx +++ b/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx @@ -1,6 +1,5 @@ import * as Tooltip from '@radix-ui/react-tooltip' import { PermissionAction } from '@supabase/shared-types/out/constants' -import { observer } from 'mobx-react-lite' import { useTheme } from 'next-themes' import Link from 'next/link' import { useState } from 'react' @@ -161,4 +160,4 @@ const VaultToggle = () => { ) } -export default observer(VaultToggle) +export default VaultToggle diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx index a1fc06afd64..bbac0394d9f 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx @@ -6,10 +6,11 @@ import { toast } from 'react-hot-toast' import { Modal } from 'ui' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' -import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' +import { ToastLoader } from 'components/ui/ToastLoader' import { useDatabasePublicationCreateMutation } from 'data/database-publications/database-publications-create-mutation' import { useDatabasePublicationsQuery } from 'data/database-publications/database-publications-query' import { useDatabasePublicationUpdateMutation } from 'data/database-publications/database-publications-update-mutation' +import type { Constraint } from 'data/database/constraints-query' import type { ForeignKeyConstraint } from 'data/database/foreign-key-constraints-query' import { entityTypeKeys } from 'data/entity-types/keys' import { sqlKeys } from 'data/sql/keys' @@ -17,10 +18,11 @@ import { useTableRowCreateMutation } from 'data/table-rows/table-row-create-muta import { useTableRowUpdateMutation } from 'data/table-rows/table-row-update-mutation' import { tableKeys } from 'data/tables/keys' import { getTables } from 'data/tables/tables-query' -import { useStore, useUrlState } from 'hooks' +import { useUrlState } from 'hooks' import { useGetImpersonatedRole } from 'state/role-impersonation-state' import { useTableEditorStateSnapshot } from 'state/table-editor' import type { Dictionary } from 'types' +import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' import { ColumnEditor, RowEditor, SpreadsheetImport, TableEditor } from '.' import type { ForeignKey } from './ForeignKeySelector/ForeignKeySelector.types' import ForeignRowSelector from './RowEditor/ForeignRowSelector/ForeignRowSelector' @@ -38,7 +40,6 @@ import { updateTable, } from './SidePanelEditor.utils' import type { ImportContent } from './TableEditor/TableEditor.types' -import type { Constraint } from 'data/database/constraints-query' export interface SidePanelEditorProps { editable?: boolean @@ -59,7 +60,6 @@ const SidePanelEditor = ({ const snap = useTableEditorStateSnapshot() const [_, setParams] = useUrlState({ arrayKeys: ['filter', 'sort'] }) - const { ui } = useStore() const queryClient = useQueryClient() const { project } = useProjectContext() @@ -508,12 +508,13 @@ const SidePanelEditor = ({ selectedTable, selectedHeaders, (progress: number) => { - ui.setNotification({ - id: toastId, - progress, - category: 'loading', - message: `Adding ${rowCount.toLocaleString()} rows to ${selectedTable.name}`, - }) + toast.loading( + , + { id: toastId } + ) } ) if (res.error) { @@ -529,14 +530,15 @@ const SidePanelEditor = ({ importContent.rows, selectedHeaders, (progress: number) => { - ui.setNotification({ - id: toastId, - progress, - category: 'loading', - message: `Adding ${importContent.rows.length.toLocaleString()} rows to ${ - selectedTable.name - }`, - }) + toast.loading( + , + { id: toastId } + ) } ) if (res.error) { diff --git a/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx b/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx index 8105dc325e4..e09e347138f 100644 --- a/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx @@ -1,10 +1,11 @@ import Editor from '@monaco-editor/react' import { useTheme } from 'next-themes' -import { useParams } from 'common' -import { observer } from 'mobx-react-lite' +import Link from 'next/link' import { useMemo, useRef } from 'react' import { format } from 'sql-formatter' +import { useParams } from 'common' +import Footer from 'components/grid/components/footer/Footer' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useTableDefinitionQuery } from 'data/database/table-definition-query' @@ -12,9 +13,7 @@ import { useViewDefinitionQuery } from 'data/database/view-definition-query' import { ENTITY_TYPE } from 'data/entity-types/entity-type-constants' import useEntityType from 'hooks/misc/useEntityType' import { timeout } from 'lib/helpers' -import Link from 'next/link' import { Button } from 'ui' -import Footer from 'components/grid/components/footer/Footer' export interface TableDefinitionProps { id?: number @@ -148,4 +147,4 @@ const TableDefinition = ({ id }: TableDefinitionProps) => { ) } -export default observer(TableDefinition) +export default TableDefinition diff --git a/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx index 9111f4a2576..cb3a61e490e 100644 --- a/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx @@ -1,12 +1,11 @@ import type { PostgresColumn, PostgresRelationship, PostgresTable } from '@supabase/postgres-meta' import { PermissionAction } from '@supabase/shared-types/out/constants' import { QueryKey, useQueryClient } from '@tanstack/react-query' -import { useParams } from 'common' import { find, isUndefined } from 'lodash' -import { observer } from 'mobx-react-lite' import { useRouter } from 'next/router' import toast from 'react-hot-toast' +import { useParams } from 'common' import { parseSupaTable, SupabaseGrid, SupaTable } from 'components/grid' import { ERROR_PRIMARY_KEY_NOTFOUND } from 'components/grid/constants' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' @@ -311,4 +310,4 @@ const TableGridEditor = ({ ) } -export default observer(TableGridEditor) +export default TableGridEditor diff --git a/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx b/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx index 4341217d156..735ebbaba78 100644 --- a/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx +++ b/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx @@ -1,4 +1,3 @@ -import { observer } from 'mobx-react-lite' import { useRouter } from 'next/router' import { PropsWithChildren } from 'react' @@ -46,4 +45,4 @@ const DatabaseLayout = ({ children }: PropsWithChildren) => ) } -export default withAuth(observer(DatabaseLayout)) +export default withAuth(DatabaseLayout) diff --git a/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx b/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx index ad906c325c3..30d63d082e4 100644 --- a/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx +++ b/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx @@ -1,4 +1,3 @@ -import { observer } from 'mobx-react-lite' import { useRouter } from 'next/router' import { ReactElement } from 'react' @@ -67,4 +66,4 @@ function DocsLayout({ title, children }: { title: string; children: ReactElement ) } -export default withAuth(observer(DocsLayout)) +export default withAuth(DocsLayout) diff --git a/apps/studio/components/layouts/FunctionsLayout.tsx b/apps/studio/components/layouts/FunctionsLayout.tsx index a41dd3b0ab1..689578617f6 100644 --- a/apps/studio/components/layouts/FunctionsLayout.tsx +++ b/apps/studio/components/layouts/FunctionsLayout.tsx @@ -1,16 +1,15 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' -import { useParams } from 'common' -import { observer } from 'mobx-react-lite' import Link from 'next/link' import type { PropsWithChildren } from 'react' -import { Button, IconCode, IconExternalLink } from 'ui' +import { useParams } from 'common' import { useIsAPIDocsSidePanelEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext' import APIDocsButton from 'components/ui/APIDocsButton' import NoPermission from 'components/ui/NoPermission' import { useEdgeFunctionQuery } from 'data/edge-functions/edge-function-query' import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query' import { useCheckPermissions, withAuth } from 'hooks' +import { Button, IconCode, IconExternalLink } from 'ui' import FunctionsNav from '../interfaces/Functions/FunctionsNav' import { ProjectLayout } from './' @@ -152,4 +151,4 @@ const FunctionsLayout = ({ title, children }: PropsWithChildren ) } -export default observer(BreadcrumbsView) +export default BreadcrumbsView diff --git a/apps/studio/components/layouts/WizardLayout.tsx b/apps/studio/components/layouts/WizardLayout.tsx index d181a263a1a..5725f7b652b 100644 --- a/apps/studio/components/layouts/WizardLayout.tsx +++ b/apps/studio/components/layouts/WizardLayout.tsx @@ -1,11 +1,10 @@ -import { observer } from 'mobx-react-lite' import Link from 'next/link' import { PropsWithChildren } from 'react' -import { IconChevronRight } from 'ui' import { withAuth } from 'hooks' import { BASE_PATH } from 'lib/constants' import type { Organization, Project } from 'types' +import { IconChevronRight } from 'ui' import { FeedbackDropdown } from './ProjectLayout/LayoutHeader/FeedbackDropdown' import HelpPopover from './ProjectLayout/LayoutHeader/HelpPopover' @@ -31,9 +30,9 @@ const WizardLayout = ({ ) } -export default withAuth(observer(WizardLayout)) +export default withAuth(WizardLayout) -export const WizardLayoutWithoutAuth = observer(WizardLayout) +export const WizardLayoutWithoutAuth = WizardLayout const Header = ({ organization, project }: WizardLayoutProps) => { let stepNumber = organization ? 1 : project ? 2 : 0 diff --git a/apps/studio/components/ui/ToastLoader.tsx b/apps/studio/components/ui/ToastLoader.tsx new file mode 100644 index 00000000000..6e88277acf6 --- /dev/null +++ b/apps/studio/components/ui/ToastLoader.tsx @@ -0,0 +1,27 @@ +// [Joshen] Just FYI eventually we're going to move to use toasts +// from the UI library, but this is a transition to move everything to +// react-hot-toast while we're trying to deprecate mobx entirely + +import SparkBar from './SparkBar' + +interface ToastLoaderProps { + progress: number + message: string + description?: string +} + +export const ToastLoader = ({ progress, message, description }: ToastLoaderProps) => { + return ( +
+ + {description !== undefined &&

{description}

} +
+ ) +} diff --git a/apps/studio/hooks/index.ts b/apps/studio/hooks/index.ts index b8238bfbc3d..d977689467a 100644 --- a/apps/studio/hooks/index.ts +++ b/apps/studio/hooks/index.ts @@ -2,10 +2,9 @@ export * from './deprecated' export * from './misc/useCheckPermissions' export * from './misc/useImmutableValue' export * from './misc/useIsFeatureEnabled' +export * from './misc/useLatest' export * from './misc/useLocalStorage' export * from './misc/useSelectedOrganization' export * from './misc/useSelectedProject' -export * from './misc/useStore' export * from './misc/withAuth' -export * from './misc/useLatest' export * from './ui' diff --git a/apps/studio/hooks/misc/useStore.tsx b/apps/studio/hooks/misc/useStore.tsx deleted file mode 100644 index 93d8629ce4a..00000000000 --- a/apps/studio/hooks/misc/useStore.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { autorun } from 'mobx' -import { createContext, PropsWithChildren, useContext, useEffect } from 'react' -import toast from 'react-hot-toast' - -import SparkBar from 'components/ui/SparkBar' -import { IUiStore } from 'stores/UiStore' - -const StoreContext = createContext<{ ui: IUiStore }>(undefined!) - -/** - * @deprecated use the toast.success/loading/error functions, imported from 'react-hot-toast' - */ -export function useStore() { - const context = useContext(StoreContext) - if (context === undefined) { - throw new Error('useStore must be used within StoreProvider') - } - - // returning in this way so that it's backwards compatible. - return context -} - -interface StoreProvider { - rootStore: { ui: IUiStore } -} -export const StoreProvider = ({ children, rootStore }: PropsWithChildren) => { - const { ui } = rootStore - useEffect(() => { - autorun(() => { - if (ui.notification) { - const { id, category, error, message, description, progress, duration } = ui.notification - const toastDuration = duration || 4000 - switch (category) { - case 'info': - return toast(message, { id, duration: toastDuration }) - case 'success': - return toast.success(message, { id, duration: toastDuration }) - case 'error': - console.error('Error:', { error, message }) - return toast.error(message, { id, duration: duration || Infinity }) - case 'loading': - if (progress !== undefined) { - return toast.loading( -
- - {description !== undefined && ( -

{description}

- )} -
, - { id } - ) - } else { - return toast.loading(message, { id }) - } - } - } - }) - }, []) - - return {children} -} diff --git a/apps/studio/localStores/storageExplorer/StorageExplorerStore.ts b/apps/studio/localStores/storageExplorer/StorageExplorerStore.tsx similarity index 95% rename from apps/studio/localStores/storageExplorer/StorageExplorerStore.ts rename to apps/studio/localStores/storageExplorer/StorageExplorerStore.tsx index 5581824837a..fd525d6b9b0 100644 --- a/apps/studio/localStores/storageExplorer/StorageExplorerStore.ts +++ b/apps/studio/localStores/storageExplorer/StorageExplorerStore.tsx @@ -1,5 +1,4 @@ // @ts-nocheck - import { createClient } from '@supabase/supabase-js' import { BlobReader, BlobWriter, ZipWriter } from '@zip.js/zip.js' import { chunk, compact, find, findIndex, has, isEqual, some, uniq, uniqBy } from 'lodash' @@ -13,7 +12,7 @@ import { STORAGE_SORT_BY, STORAGE_VIEWS, } from 'components/to-be-cleaned/Storage/Storage.constants' -import { useStore } from 'hooks' +import { ToastLoader } from 'components/ui/ToastLoader' import { delete_, post } from 'lib/common/fetch' import { API_URL, IS_PLATFORM } from 'lib/constants' import { PROJECT_ENDPOINT_PROTOCOL } from 'pages/api/constants' @@ -59,9 +58,6 @@ class StorageExplorerStore { sortBy: { column: this.sortBy, order: this.sortByOrder }, } - /* UI store */ - ui = null - /* Supabase client */ supabaseClient = null /* [Joshen] Move towards using API */ @@ -79,8 +75,6 @@ class StorageExplorerStore { constructor(projectRef) { makeAutoObservable(this, { supabaseClient: false }) this.projectRef = projectRef - // eslint-disable-next-line react-hooks/rules-of-hooks - this.ui = useStore().ui // ignore when in a non-browser environment if (typeof window !== 'undefined') { @@ -509,14 +503,15 @@ class StorageExplorerStore { .map((folder) => folder.name) .join('/') - const toastId = this.ui.setNotification({ - category: 'loading', - message: `Uploading ${formattedFilesToUpload.length} file${ - formattedFilesToUpload.length > 1 ? 's' : '' - }...`, - description: STORAGE_PROGRESS_INFO_TEXT, - progress: 0, - }) + const toastId = toast.loading( + 1 ? 's' : '' + }...`} + description={STORAGE_PROGRESS_INFO_TEXT} + /> + ) // Upload files in batches const promises = formattedFilesToUpload.map((file) => { @@ -582,15 +577,16 @@ class StorageExplorerStore { await batchedPromises.reduce(async (previousPromise, nextBatch) => { await previousPromise await Promise.allSettled(nextBatch.map((batch) => batch())) - this.ui.setNotification({ - id: toastId, - category: 'loading', - message: `Uploading ${formattedFilesToUpload.length} file${ - formattedFilesToUpload.length > 1 ? 's' : '' - }...`, - description: STORAGE_PROGRESS_INFO_TEXT, - progress: this.uploadProgress * 100, - }) + toast.loading( + 1 ? 's' : '' + }...`} + description={STORAGE_PROGRESS_INFO_TEXT} + />, + { id: toastId } + ) }, Promise.resolve()) if (numberOfFilesUploadedSuccess > 0) { @@ -738,12 +734,13 @@ class StorageExplorerStore { this.clearSelectedItems() - const toastId = this.ui.setNotification({ - category: 'loading', - message: `Deleting ${prefixes.length} file(s)...`, - description: STORAGE_PROGRESS_INFO_TEXT, - progress: 0, - }) + const toastId = toast.loading( + + ) // batch BATCH_SIZE prefixes per request const batches = chunk(prefixes, BATCH_SIZE).map((batch) => () => { @@ -757,13 +754,14 @@ class StorageExplorerStore { await chunk(batches, BATCH_SIZE).reduce(async (previousPromise, nextBatch) => { await previousPromise await Promise.all(nextBatch.map((batch) => batch())) - this.ui.setNotification({ - id: toastId, - category: 'loading', - message: `Deleting ${prefixes.length} file(s)...`, - description: STORAGE_PROGRESS_INFO_TEXT, - progress: progress * 100, - }) + toast.loading( + , + { id: toastId } + ) }, Promise.resolve()) // Clear file preview cache if deleted files exist in cache @@ -798,13 +796,14 @@ class StorageExplorerStore { const files = await this.getAllItemsAlongFolder(folder) - this.ui.setNotification({ - id: toastId, - category: 'loading', - message: `Downloading ${files.length} files...`, - description: STORAGE_PROGRESS_INFO_TEXT, - progress: 0, - }) + toast.loading( + 1 ? 's' : ''}...`} + desription={STORAGE_PROGRESS_INFO_TEXT} + />, + { id: toastId } + ) const promises = files.map((file) => { const fileMimeType = file.metadata?.mimetype ?? null @@ -835,13 +834,14 @@ class StorageExplorerStore { const downloadedFiles = await batchedPromises.reduce(async (previousPromise, nextBatch) => { const previousResults = await previousPromise const batchResults = await Promise.allSettled(nextBatch.map((batch) => batch())) - this.ui.setNotification({ - id: toastId, - category: 'loading', - message: `Downloading ${files.length} file${files.length > 1 ? 's' : ''}...`, - description: STORAGE_PROGRESS_INFO_TEXT, - progress: progress * 100, - }) + toast.loading( + 1 ? 's' : ''}...`} + desription={STORAGE_PROGRESS_INFO_TEXT} + />, + { id: toastId } + ) return (previousResults ?? []).concat(batchResults.map((x) => x.value).filter(Boolean)) }, Promise.resolve()) @@ -890,7 +890,9 @@ class StorageExplorerStore { let progress = 0 const returnBlob = true const showIndividualToast = false - const toastId = toast.loading(`Downloading ${files.length} files...`) + const toastId = toast.loading( + `Downloading ${files.length} file${files.length > 1 ? 's' : ''}...` + ) const promises = formattedFilesWithPrefix.map((file) => { return () => { @@ -906,13 +908,14 @@ class StorageExplorerStore { const downloadedFiles = await batchedPromises.reduce(async (previousPromise, nextBatch) => { const previousResults = await previousPromise const batchResults = await Promise.allSettled(nextBatch.map((batch) => batch())) - this.ui.setNotification({ - id: toastId, - category: 'loading', - message: `Downloading ${files.length} file${files.length > 1 ? 's' : ''}...`, - description: STORAGE_PROGRESS_INFO_TEXT, - progress: progress * 100, - }) + toast.loading( + 1 ? 's' : ''}...`} + description={STORAGE_PROGRESS_INFO_TEXT} + />, + { id: toastId } + ) return (previousResults ?? []).concat(batchResults.map((x) => x.value).filter(Boolean)) }, Promise.resolve()) @@ -1208,12 +1211,13 @@ class StorageExplorerStore { return this.updateRowStatus(originalName, STORAGE_ROW_STATUS.READY, columnIndex) } - const toastId = this.ui.setNotification({ - category: 'loading', - message: `Renaming folder to ${newName}`, - description: STORAGE_PROGRESS_INFO_TEXT, - progress: 0, - }) + const toastId = toast.loading( + + ) /** * Catch any folder names that contain slash or backslash @@ -1268,13 +1272,14 @@ class StorageExplorerStore { await batchedPromises.reduce(async (previousPromise, nextBatch) => { await previousPromise await Promise.all(nextBatch.map((batch) => batch())) - this.ui.setNotification({ - id: toastId, - category: 'loading', - message: `Renaming folder to ${newName}`, - description: STORAGE_PROGRESS_INFO_TEXT, - progress: progress * 100, - }) + toast.loader( + , + { id: toastId } + ) }, Promise.resolve()) if (!hasErrors) { diff --git a/apps/studio/pages/README.md b/apps/studio/pages/README.md index 32423b193de..77609973fa0 100644 --- a/apps/studio/pages/README.md +++ b/apps/studio/pages/README.md @@ -9,9 +9,7 @@ ```tsx import { NextPage } from 'next' -import { observer } from 'mobx-react-lite' - -import { useStore, withAuth } from 'hooks' +import { withAuth } from 'hooks' // Import the corresponding layout based on the page import { Layout } from 'components/layouts' @@ -25,9 +23,6 @@ import { ... } from 'components/ui/xxx' // Name your page accordingly const Page: NextPage = () => { - // Access the store via the useStore hook - const { meta } = useStore() - return (
Page content
@@ -35,5 +30,5 @@ const Page: NextPage = () => { ) } -export default withAuth(observer(Page)) +export default withAuth(Page) ``` diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx index bb4e9eef9fb..f2febfb2485 100644 --- a/apps/studio/pages/_app.tsx +++ b/apps/studio/pages/_app.tsx @@ -46,12 +46,10 @@ import FeaturePreviewModal from 'components/interfaces/App/FeaturePreview/Featur import FlagProvider from 'components/ui/Flag/FlagProvider' import PageTelemetry from 'components/ui/PageTelemetry' import { useRootQueryClient } from 'data/query-client' -import { StoreProvider } from 'hooks' import { AuthProvider } from 'lib/auth' import { BASE_PATH, IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'lib/constants' import { ProfileProvider } from 'lib/profile' import { useAppStateSnapshot } from 'state/app-state' -import UiStore from 'stores/UiStore' import HCaptchaLoadedStore from 'stores/hcaptcha-loaded-store' import { AppPropsWithLayout } from 'types' @@ -81,9 +79,7 @@ loader.config({ function CustomApp({ Component, pageProps }: AppPropsWithLayout) { const snap = useAppStateSnapshot() const queryClient = useRootQueryClient() - const consentToastId = useRef() - const [rootStore] = useState(() => ({ ui: new UiStore() })) // [Joshen] Some issues with using createBrowserSupabaseClient const [supabase] = useState(() => @@ -146,43 +142,41 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) { return ( - - - - - - Supabase - - - + + + + + Supabase + + + - - - - - - - - - {getLayout()} - - - - - - - - - + + + + + + + + + {getLayout()} + + + + + + + + + - - - - {!isTestEnv && } - - - - + + + + {!isTestEnv && } + + + ) diff --git a/apps/studio/pages/project/[ref]/reports/index.tsx b/apps/studio/pages/project/[ref]/reports/index.tsx index bbcb2d7d49c..3972cdc5b62 100644 --- a/apps/studio/pages/project/[ref]/reports/index.tsx +++ b/apps/studio/pages/project/[ref]/reports/index.tsx @@ -3,15 +3,14 @@ import { useRouter } from 'next/router' import { useEffect, useState } from 'react' import { useParams } from 'common/hooks' +import { CreateReportModal } from 'components/interfaces/Reports/Reports.CreateReportModal' import { ReportsLayout } from 'components/layouts' import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState' -import { createReport } from 'components/to-be-cleaned/Reports/Reports.utils' import { Loading } from 'components/ui/Loading' -import { useCheckPermissions, useStore } from 'hooks' +import { useCheckPermissions } from 'hooks' import { useProfile } from 'lib/profile' import { useProjectContentStore } from 'stores/projectContentStore' import type { NextPageWithLayout } from 'types' -import { CreateReportModal } from 'components/interfaces/Reports/Reports.CreateReportModal' export const UserReportPage: NextPageWithLayout = () => { const [loading, setLoading] = useState(true) @@ -20,7 +19,6 @@ export const UserReportPage: NextPageWithLayout = () => { const { ref } = useParams() const { profile } = useProfile() - const { ui } = useStore() const [showCreateReportModal, setShowCreateReportModal] = useState(false) const contentStore = useProjectContentStore(ref) diff --git a/apps/studio/pages/project/[ref]/sql/[id].tsx b/apps/studio/pages/project/[ref]/sql/[id].tsx index 57c26080ae9..7fa0997cde0 100644 --- a/apps/studio/pages/project/[ref]/sql/[id].tsx +++ b/apps/studio/pages/project/[ref]/sql/[id].tsx @@ -1,6 +1,5 @@ import { useMonaco } from '@monaco-editor/react' import { useParams } from 'common' -import { observer } from 'mobx-react-lite' import { useRouter } from 'next/router' import { useEffect, useRef } from 'react' @@ -158,4 +157,4 @@ const SqlEditor: NextPageWithLayout = () => { SqlEditor.getLayout = (page) => {page} -export default observer(SqlEditor) +export default SqlEditor diff --git a/apps/studio/pages/project/[ref]/storage/buckets/[bucketId].tsx b/apps/studio/pages/project/[ref]/storage/buckets/[bucketId].tsx index 38559efc142..81bf034da0f 100644 --- a/apps/studio/pages/project/[ref]/storage/buckets/[bucketId].tsx +++ b/apps/studio/pages/project/[ref]/storage/buckets/[bucketId].tsx @@ -1,6 +1,5 @@ import { useParams } from 'common' import { find } from 'lodash' -import { observer } from 'mobx-react-lite' import { StorageLayout } from 'components/layouts' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' @@ -40,4 +39,4 @@ const PageLayout: NextPageWithLayout = () => { PageLayout.getLayout = (page) => {page} -export default observer(PageLayout) +export default PageLayout diff --git a/apps/studio/pages/project/[ref]/storage/index.tsx b/apps/studio/pages/project/[ref]/storage/index.tsx index 23206ef662a..d0c2fcde310 100644 --- a/apps/studio/pages/project/[ref]/storage/index.tsx +++ b/apps/studio/pages/project/[ref]/storage/index.tsx @@ -1,5 +1,3 @@ -import { observer } from 'mobx-react-lite' - import { StorageLayout } from 'components/layouts' import type { NextPageWithLayout } from 'types' @@ -9,4 +7,4 @@ const Storage: NextPageWithLayout = () => { Storage.getLayout = (page) => {page} -export default observer(Storage) +export default Storage diff --git a/apps/studio/stores/README.md b/apps/studio/stores/README.md deleted file mode 100644 index fc5b9804f67..00000000000 --- a/apps/studio/stores/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# Store - -## Store structure - -At the root, there are currently 3 top-level stores in use: `app`, `meta` and `ui` (`content` is WIP at the moment). Each of them store the following information: - -- `app`: Application level data (Projects and organizations) -- `meta`: Database information (e.g Tables, Columns, Policies) -- `ui`: UI states that are common globally -- `content`: User-specific content (e.g Saved SQL snippets) - -## Accessing the store - -The `useStore` hook is the entry point to access the store in your pages and components. - -``` -import { useStore } from 'hooks' -const { app, meta, ui } = useStore() -``` - -## What is the jsonSchema folder - -The files here are used to populate form fields on the dashboard with the `ajv` library. We have in mind to move away from this way of rendering form fields due to its rigid nature but we've yet to decide. diff --git a/apps/studio/stores/UiStore.ts b/apps/studio/stores/UiStore.ts deleted file mode 100644 index 475fe3f08f9..00000000000 --- a/apps/studio/stores/UiStore.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { makeAutoObservable } from 'mobx' - -import { uuidv4 } from 'lib/helpers' -import type { Notification } from 'types' - -export interface IUiStore { - notification?: Notification - setNotification: (notification: Notification) => string -} -export default class UiStore implements IUiStore { - notification?: Notification - - constructor() { - makeAutoObservable(this) - } - - setNotification(notification: Notification): string { - const id = notification?.id ?? uuidv4() - this.notification = { ...notification, id } - return id - } -} diff --git a/apps/studio/stores/authConfig/schema/index.ts b/apps/studio/stores/authConfig/schema/index.ts deleted file mode 100644 index 43266b2cd49..00000000000 --- a/apps/studio/stores/authConfig/schema/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { PROVIDERS_SCHEMAS, PROVIDER_SAML } from './AuthProviders/AuthProvidersFormValidation' -export { TEMPLATES_SCHEMAS } from './AuthProviders/AuthTemplatesValidation' diff --git a/apps/studio/tests/helpers.tsx b/apps/studio/tests/helpers.tsx index 9e60805c266..0ea2d731498 100644 --- a/apps/studio/tests/helpers.tsx +++ b/apps/studio/tests/helpers.tsx @@ -1,11 +1,8 @@ -import { fireEvent, getByText, screen } from '@testing-library/react' +import { fireEvent, getByText, screen, render as originalRender } from '@testing-library/react' import React, { useState } from 'react' - import { TooltipProvider } from '@radix-ui/react-tooltip' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { render as originalRender } from '@testing-library/react' -import { StoreProvider } from 'hooks' -import UiStore from 'stores/UiStore' + interface SelectorOptions { container?: HTMLElement } @@ -48,8 +45,6 @@ export const clickDropdown = (elem: HTMLElement) => { * https://testing-library.com/docs/react-testing-library/setup/#custom-render */ const ReactQueryTestConfig: React.FC = ({ children }) => { - const [rootStore] = useState(() => ({ ui: new UiStore() })) - const [queryClient] = useState( () => new QueryClient({ @@ -68,11 +63,9 @@ const ReactQueryTestConfig: React.FC = ({ children }) = ) return ( - - - {children} - - + + {children} + ) } type renderParams = Parameters