From e3dae9ec368ac1e19f2d30d2e5d68833cbd308e9 Mon Sep 17 00:00:00 2001 From: Alaister Young Date: Wed, 2 Apr 2025 16:41:47 +0800 Subject: [PATCH] chore: only load data in modals when they're visible (#34617) * chore: only load data in modals when they're visible * SidePanelGitHubRepoLinker * scrolling is not my strong suit * simple loading state for add new secret * fix button width * update to use shadcn * fix ts --- .../Extensions/EnableExtensionModal.tsx | 11 +- .../Vault/Keys/EncryptionKeySelector.tsx | 81 +++++---- .../Vault/Secrets/AddNewSecretModal.tsx | 161 ++++++++++-------- .../Vault/Secrets/EditSecretModal.tsx | 5 +- .../Integrations/Vault/Secrets/SecretRow.tsx | 4 +- .../Subscription/MembersExceedLimitModal.tsx | 5 +- .../SidePanelGitHubRepoLinker.tsx | 23 ++- .../interfaces/SQLEditor/RenameQueryModal.tsx | 5 +- .../Addons/ComputeInstanceSidePanel.tsx | 9 +- .../Database/DiskSizeConfigurationModal.tsx | 2 +- .../AddRestrictionModal.tsx | 2 +- .../RemoveRestrictionModal.tsx | 2 +- .../TransferProjectButton.tsx | 5 +- .../interfaces/Storage/CreateBucketModal.tsx | 5 +- .../interfaces/Storage/EditBucketModal.tsx | 5 +- .../EnableBranchingModal.tsx | 7 +- 16 files changed, 195 insertions(+), 137 deletions(-) diff --git a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx index 014769ea3b3..f8b19680cc0 100644 --- a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx +++ b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx @@ -37,10 +37,13 @@ const EnableExtensionModal = ({ visible, extension, onCancel }: EnableExtensionM const [defaultSchema, setDefaultSchema] = useState() const [fetchingSchemaInfo, setFetchingSchemaInfo] = useState(false) - const { data: schemas, isLoading: isSchemasLoading } = useSchemasQuery({ - projectRef: project?.ref, - connectionString: project?.connectionString, - }) + const { data: schemas, isLoading: isSchemasLoading } = useSchemasQuery( + { + projectRef: project?.ref, + connectionString: project?.connectionString, + }, + { enabled: visible } + ) const { mutate: enableExtension, isLoading: isEnabling } = useDatabaseExtensionEnableMutation({ onSuccess: () => { toast.success(`Extension "${extension.name}" is now enabled`) diff --git a/apps/studio/components/interfaces/Integrations/Vault/Keys/EncryptionKeySelector.tsx b/apps/studio/components/interfaces/Integrations/Vault/Keys/EncryptionKeySelector.tsx index adfd5e9f3f4..071eae7ef06 100644 --- a/apps/studio/components/interfaces/Integrations/Vault/Keys/EncryptionKeySelector.tsx +++ b/apps/studio/components/interfaces/Integrations/Vault/Keys/EncryptionKeySelector.tsx @@ -1,12 +1,18 @@ import { noop } from 'lodash' import { Plus } from 'lucide-react' -import { Input, Listbox, Modal } from 'ui' +import { + Input, + SelectContent_Shadcn_, + SelectGroup_Shadcn_, + SelectItem_Shadcn_, + SelectTrigger_Shadcn_, + Select_Shadcn_, +} from 'ui' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import { usePgSodiumKeysQuery } from 'data/pg-sodium-keys/pg-sodium-keys-query' interface EncryptionKeySelectorProps { - id?: string nameId?: string label?: string labelOptional?: string @@ -17,7 +23,6 @@ interface EncryptionKeySelectorProps { } const EncryptionKeySelector = ({ - id = 'keyId', nameId = 'keyName', label = 'Encryption key', labelOptional, @@ -37,36 +42,46 @@ const EncryptionKeySelector = ({ return ( <> - - } - > - Create a new Encryption Key - - {keys.length > 0 && } - {keys.map((key) => ( - -
-

{key.name || 'No name provided'}

-

- ID: {key.id} -

-
- - ))} - +
+ {label && ( +
+ + {labelOptional && ( + {labelOptional} + )} +
+ )} + + + {keys.find((key) => key.id === selectedKeyId)?.name || 'Select an encryption key'} + + + + + + + Create a new Encryption Key + + + {keys.length > 0 && ( + <> +
+ {keys.map((key) => ( + +
+

{key.name || 'No name provided'}

+

+ ID: {key.id} +

+
+ + ))} + + )} + + + +
{selectedKeyId === 'create-new' && ( { const { mutateAsync: addKeyMutation } = usePgSodiumKeyCreateMutation() const { mutateAsync: addSecret } = useVaultSecretCreateMutation() - const { data: keys } = usePgSodiumKeysQuery({ - projectRef: project?.ref, - connectionString: project?.connectionString, - }) + const { data: keys, isLoading } = usePgSodiumKeysQuery( + { + projectRef: project?.ref, + connectionString: project?.connectionString, + }, + { + enabled: visible, + } + ) useEffect(() => { if (visible && keys) { @@ -87,76 +93,81 @@ const AddNewSecretModal = ({ visible, onClose }: AddNewSecretModalProps) => { onCancel={onClose} header="Add new secret" > -
- {({ isSubmitting }: any) => { - return ( - <> - - - - -
- } - /> - - - - - } - url="https://github.com/supabase/vault" - urlLabel="Vault documentation" - title="What is a key?" - description={ -
-

- Keys are used to encrypt data inside your database, and every secret in the - Vault is encrypted with a key. -

-

- You may create different keys for different purposes, such as one for - encrypting user data, and another for application data. -

-
- } - /> - - - - - - - - ) - }} - + {isLoading ? ( + + + + ) : ( +
+ {({ isSubmitting }: any) => { + return ( + <> + + + + + + + + + ) + }} +
+ )} ) } diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx index 36f93d9633c..f0ffbcf03f8 100644 --- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx +++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx @@ -55,7 +55,7 @@ const EditSecretModal = ({ selectedSecret, onClose }: EditSecretModalProps) => { payload.description = values.description if (selectedKeyId !== selectedSecret?.key_id) { let encryptionKeyId = selectedKeyId - if (values.keyId === 'create-new') { + if (encryptionKeyId === 'create-new') { const addKeyRes = await addKeyMutation({ projectRef: project?.ref!, connectionString: project?.connectionString, @@ -122,7 +122,7 @@ const EditSecretModal = ({ selectedSecret, onClose }: EditSecretModalProps) => { id: selectedSecret?.id!, connectionString: project?.connectionString, }, - { enabled: !!(project?.ref && selectedSecret?.id) } + { enabled: selectedSecret !== undefined && !!(project?.ref && selectedSecret?.id) } ) // [Joshen] JFYI this is breaking rules of hooks, will be fixed once we move to @@ -164,7 +164,6 @@ const EditSecretModal = ({ selectedSecret, onClose }: EditSecretModalProps) => { - + - + { const selectedOrganization = useSelectedOrganization() const slug = selectedOrganization?.slug - const { data: membersExceededLimit } = useFreeProjectLimitCheckQuery({ slug }) + const { data: membersExceededLimit } = useFreeProjectLimitCheckQuery( + { slug }, + { enabled: visible } + ) return ( until the typegen is fixed const { data: githubReposData, isLoading: isLoadingGitHubRepos } = useGitHubRepositoriesQuery< any[] >({ - enabled: Boolean(gitHubAuthorization), + enabled: visible && Boolean(gitHubAuthorization), }) /** * Supabase projects available */ - const { data: supabaseProjectsData, isLoading: isLoadingSupabaseProjects } = useProjectsQuery() + const { data: supabaseProjectsData, isLoading: isLoadingSupabaseProjects } = useProjectsQuery({ + enabled: visible, + }) const supabaseProjects = useMemo( () => @@ -68,9 +72,14 @@ const SidePanelGitHubRepoLinker = ({ projectRef }: SidePanelGitHubRepoLinkerProp [githubReposData] ) - const { data: connections } = useGitHubConnectionsQuery({ - organizationId: selectedOrganization?.id, - }) + const { data: connections } = useGitHubConnectionsQuery( + { + organizationId: selectedOrganization?.id, + }, + { + enabled: visible, + } + ) const { mutate: createConnection, isLoading: isCreatingConnection } = useGitHubConnectionCreateMutation({ @@ -116,7 +125,7 @@ const SidePanelGitHubRepoLinker = ({ projectRef }: SidePanelGitHubRepoLinkerProp sidePanelStateSnapshot.setGithubConnectionsOpen(false)} > diff --git a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx index 23a3e6b1fd6..5956e1e1034 100644 --- a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx +++ b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx @@ -35,7 +35,10 @@ const RenameQueryModal = ({ const organization = useSelectedOrganization() const snapV2 = useSqlEditorV2StateSnapshot() - const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: organization?.slug }) + const { data: subscription } = useOrgSubscriptionQuery( + { orgSlug: organization?.slug }, + { enabled: visible } + ) const isSQLSnippet = snippet.type === 'sql' const isSQLEditorTabsEnabled = useIsSQLEditorTabsEnabled() diff --git a/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx index 8e5d326e465..838e438022e 100644 --- a/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx @@ -57,9 +57,12 @@ const ComputeInstanceSidePanel = () => { const { panel, setPanel, closePanel } = useAddonsPagePanel() const visible = panel === 'computeInstance' - const { data: databases } = useReadReplicasQuery({ projectRef }) - const { data: addons, isLoading } = useProjectAddonsQuery({ projectRef }) - const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: organization?.slug }) + const { data: databases } = useReadReplicasQuery({ projectRef }, { enabled: visible }) + const { data: addons, isLoading } = useProjectAddonsQuery({ projectRef }, { enabled: visible }) + const { data: subscription } = useOrgSubscriptionQuery( + { orgSlug: organization?.slug }, + { enabled: visible } + ) const { mutate: updateAddon, isLoading: isUpdating } = useProjectAddonUpdateMutation({ onSuccess: () => { toast.success( diff --git a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx index 6a63584472e..88854128c21 100644 --- a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx +++ b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx @@ -41,7 +41,7 @@ const DiskSizeConfigurationModal = ({ const organization = useSelectedOrganization() const { data: projectSubscriptionData, isLoading: isLoadingSubscription } = - useOrgSubscriptionQuery({ orgSlug: organization?.slug }) + useOrgSubscriptionQuery({ orgSlug: organization?.slug }, { enabled: visible }) const isLoading = isLoadingProject || isLoadingSubscription diff --git a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx index 516c4d64775..a57804265de 100644 --- a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx +++ b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx @@ -30,7 +30,7 @@ const AddRestrictionModal = ({ const formId = 'add-restriction-form' const { ref } = useParams() - const { data } = useNetworkRestrictionsQuery({ projectRef: ref }) + const { data } = useNetworkRestrictionsQuery({ projectRef: ref }, { enabled: type !== undefined }) const ipv4Restrictions = data?.config?.dbAllowedCidrs ?? [] // @ts-ignore [Joshen] API typing issue const ipv6Restrictions = data?.config?.dbAllowedCidrsV6 ?? [] diff --git a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx index 67bec6cbe47..b60a18f61c9 100644 --- a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx +++ b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx @@ -19,7 +19,7 @@ const RemoveRestrictionModal = ({ }: RemoveRestrictionModalProps) => { const { ref } = useParams() - const { data } = useNetworkRestrictionsQuery({ projectRef: ref }) + const { data } = useNetworkRestrictionsQuery({ projectRef: ref }, { enabled: visible }) const ipv4Restrictions = data?.config?.dbAllowedCidrs ?? [] // @ts-ignore [Joshen] API typing issue const ipv6Restrictions: string[] = data?.config?.dbAllowedCidrsV6 ?? [] diff --git a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx index 4335a3567d5..55f20ca6952 100644 --- a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx +++ b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx @@ -18,12 +18,13 @@ const TransferProjectButton = () => { const project = useSelectedProject() const projectRef = project?.ref const projectOrgId = project?.organization_id - const { data: allOrganizations } = useOrganizationsQuery() + const [isOpen, setIsOpen] = useState(false) + + const { data: allOrganizations } = useOrganizationsQuery({ enabled: isOpen }) const disableProjectTransfer = useFlag('disableProjectTransfer') const organizations = (allOrganizations || []).filter((it) => it.id !== projectOrgId) - const [isOpen, setIsOpen] = useState(false) const [selectedOrg, setSelectedOrg] = useState() const { diff --git a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx index 955e12706ac..f0c41e6e951 100644 --- a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx +++ b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx @@ -32,7 +32,10 @@ const CreateBucketModal = ({ visible, onClose }: CreateBucketModalProps) => { }, }) - const { data } = useProjectStorageConfigQuery({ projectRef: ref }, { enabled: IS_PLATFORM }) + const { data } = useProjectStorageConfigQuery( + { projectRef: ref }, + { enabled: IS_PLATFORM && visible } + ) const { value, unit } = convertFromBytes(data?.fileSizeLimit ?? 0) const formattedGlobalUploadLimit = `${value} ${unit}` diff --git a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx index 913ecd364dc..53815b39e63 100644 --- a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx +++ b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx @@ -30,7 +30,10 @@ const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalProps) => onClose() }, }) - const { data } = useProjectStorageConfigQuery({ projectRef: ref }, { enabled: IS_PLATFORM }) + const { data } = useProjectStorageConfigQuery( + { projectRef: ref }, + { enabled: IS_PLATFORM && visible } + ) const { value, unit } = convertFromBytes(data?.fileSizeLimit ?? 0) const formattedGlobalUploadLimit = `${value} ${unit}` diff --git a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx index a62d752c95d..8946bcff73b 100644 --- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx +++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx @@ -41,7 +41,12 @@ const EnableBranchingModal = () => { isLoading: isLoadingConnections, isSuccess: isSuccessConnections, isError: isErrorConnections, - } = useGitHubConnectionsQuery({ organizationId: selectedOrg?.id }) + } = useGitHubConnectionsQuery( + { + organizationId: selectedOrg?.id, + }, + { enabled: snap.showEnableBranchingModal } + ) const project = useSelectedProject() const hasMinimumPgVersion =