Reinstate copy action for TextConfirmModal for staff only (supabase#41042)

joshenlim · awaseem · web-flow · commit e61d0e69cd8c · 2025-12-05T14:52:35.000Z
* Reinstate copy action for TextConfirmModal for staff only

* Clean

---------

Co-authored-by: Ali Waseem &lt;waseema393@gmail.com&gt;
diff --git a/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx b/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx
@@ -1,3 +1,4 @@
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import type { APIKeysData } from 'data/api-keys/api-keys-query'
 import { motion } from 'framer-motion'
 import { MoreVertical } from 'lucide-react'
@@ -9,7 +10,6 @@ import {
   TableCell,
   TableRow,
 } from 'ui'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { APIKeyDeleteDialog } from './APIKeyDeleteDialog'
 import { ApiKeyPill } from './ApiKeyPill'
 
diff --git a/apps/studio/components/interfaces/BranchManagement/Overview.tsx b/apps/studio/components/interfaces/BranchManagement/Overview.tsx
@@ -18,6 +18,7 @@ import { toast } from 'sonner'
 import { useParams } from 'common'
 import { useIsBranching2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { DropdownMenuItemTooltip } from 'components/ui/DropdownMenuItemTooltip'
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useBranchQuery } from 'data/branches/branch-query'
 import { useBranchResetMutation } from 'data/branches/branch-reset-mutation'
 import { useBranchUpdateMutation } from 'data/branches/branch-update-mutation'
@@ -34,8 +35,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from 'ui'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
+import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal'
 import { BranchLoader, BranchManagementSection, BranchRow, BranchRowLoader } from './BranchPanels'
 import { EditBranchModal } from './EditBranchModal'
 import { PreviewBranchesEmptyState } from './EmptyStates'
diff --git a/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx b/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
@@ -1,6 +1,6 @@
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import type { DatabaseFunction } from 'data/database-functions/database-functions-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface DeleteFunctionProps {
   func?: DatabaseFunction
@@ -36,26 +36,24 @@ export const DeleteFunction = ({
   }
 
   return (
-    <>
-      <TextConfirmModal
-        variant={'warning'}
-        visible={visible}
-        onCancel={() => setVisible(null)}
-        onConfirm={handleDelete}
-        title="Delete this function"
-        loading={isLoading}
-        confirmLabel={`Delete function ${name}`}
-        confirmPlaceholder="Type in name of function"
-        confirmString={name ?? 'Unknown'}
-        text={
-          <>
-            <span>This will delete the function</span>{' '}
-            <span className="text-bold text-foreground">{name}</span> <span>from the schema</span>{' '}
-            <span className="text-bold text-foreground">{schema}</span>
-          </>
-        }
-        alert={{ title: 'You cannot recover this function once deleted.' }}
-      />
-    </>
+    <TextConfirmModal
+      variant={'warning'}
+      visible={visible}
+      onCancel={() => setVisible(null)}
+      onConfirm={handleDelete}
+      title="Delete this function"
+      loading={isLoading}
+      confirmLabel={`Delete function ${name}`}
+      confirmPlaceholder="Type in name of function"
+      confirmString={name ?? 'Unknown'}
+      text={
+        <>
+          <span>This will delete the function</span>{' '}
+          <span className="text-bold text-foreground">{name}</span> <span>from the schema</span>{' '}
+          <span className="text-bold text-foreground">{schema}</span>
+        </>
+      }
+      alert={{ title: 'You cannot recover this function once deleted.' }}
+    />
   )
 }
diff --git a/apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx b/apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx
@@ -1,9 +1,9 @@
 import type { PostgresTrigger } from '@supabase/postgres-meta'
 import { toast } from 'sonner'
 
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useDatabaseTriggerDeleteMutation } from 'data/database-triggers/database-trigger-delete-mutation'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface DeleteHookModalProps {
   visible: boolean
diff --git a/apps/studio/components/interfaces/Database/Replication/DeleteDestination.tsx b/apps/studio/components/interfaces/Database/Replication/DeleteDestination.tsx
@@ -1,4 +1,4 @@
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 
 interface DeleteDestinationProps {
   visible: boolean
diff --git a/apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx b/apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx
@@ -1,7 +1,7 @@
 import type { PostgresTrigger } from '@supabase/postgres-meta'
 
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface DeleteTriggerProps {
   trigger?: PostgresTrigger
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/DeleteCronJob.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/DeleteCronJob.tsx
@@ -1,14 +1,14 @@
 import { parseAsString, useQueryState } from 'nuqs'
 import { toast } from 'sonner'
 
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useDatabaseCronJobDeleteMutation } from 'data/database-cron-jobs/database-cron-jobs-delete-mutation'
 import { CronJob } from 'data/database-cron-jobs/database-cron-jobs-infinite-query'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { cleanPointerEventsNoneOnBody } from 'lib/helpers'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
+import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal'
 
 interface DeleteCronJobProps {
   cronJob: CronJob
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/DeleteQueue.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/DeleteQueue.tsx
@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router'
 import { toast } from 'sonner'
 
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useDatabaseQueueDeleteMutation } from 'data/database-queues/database-queues-delete-mutation'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface DeleteQueueProps {
   queueName: string
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/PurgeQueue.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/PurgeQueue.tsx
@@ -1,8 +1,8 @@
 import { toast } from 'sonner'
 
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useDatabaseQueuePurgeMutation } from 'data/database-queues/database-queues-purge-mutation'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface PurgeQueueProps {
   queueName: string
diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx
@@ -6,6 +6,7 @@ import { toast } from 'sonner'
 import { useFlag, useParams } from 'common'
 import { useApiKeysVisibility } from 'components/interfaces/APIKeys/hooks/useApiKeysVisibility'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useLegacyAPIKeysStatusQuery } from 'data/api-keys/legacy-api-keys-status-query'
 import { useJWTSigningKeyDeleteMutation } from 'data/jwt-signing-keys/jwt-signing-key-delete-mutation'
 import { useJWTSigningKeyUpdateMutation } from 'data/jwt-signing-keys/jwt-signing-key-update-mutation'
@@ -37,7 +38,6 @@ import {
   TableHeader,
   TableRow,
 } from 'ui'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { SigningKeysComingSoonBanner } from '../signing-keys-coming-soon'
 import { StartUsingJwtSigningKeysBanner } from '../start-using-keys-banner'
 import { ActionPanel } from './action-panel'
diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx
@@ -4,20 +4,6 @@ import {
   JwtSecretUpdateProgress,
   JwtSecretUpdateStatus,
 } from '@supabase/shared-types/out/events'
-
-import { useFlag, useParams } from 'common'
-import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { FormActions } from 'components/ui/Forms/FormActions'
-import Panel from 'components/ui/Panel'
-import { useLegacyAPIKeysStatusQuery } from 'data/api-keys/legacy-api-keys-status-query'
-import { useAuthConfigQuery } from 'data/auth/auth-config-query'
-import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation'
-import { useJwtSecretUpdateMutation } from 'data/config/jwt-secret-update-mutation'
-import { useJwtSecretUpdatingStatusQuery } from 'data/config/jwt-secret-updating-status-query'
-import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
-import { useLegacyJWTSigningKeyQuery } from 'data/jwt-signing-keys/legacy-jwt-signing-key-query'
-import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { uuidv4 } from 'lib/helpers'
 import {
   AlertCircle,
   ChevronDown,
@@ -37,6 +23,21 @@ import {
 import Link from 'next/link'
 import { Dispatch, SetStateAction, useState } from 'react'
 import { toast } from 'sonner'
+
+import { useFlag, useParams } from 'common'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { FormActions } from 'components/ui/Forms/FormActions'
+import Panel from 'components/ui/Panel'
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
+import { useLegacyAPIKeysStatusQuery } from 'data/api-keys/legacy-api-keys-status-query'
+import { useAuthConfigQuery } from 'data/auth/auth-config-query'
+import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation'
+import { useJwtSecretUpdateMutation } from 'data/config/jwt-secret-update-mutation'
+import { useJwtSecretUpdatingStatusQuery } from 'data/config/jwt-secret-updating-status-query'
+import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
+import { useLegacyJWTSigningKeyQuery } from 'data/jwt-signing-keys/legacy-jwt-signing-key-query'
+import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { uuidv4 } from 'lib/helpers'
 import {
   Button,
   DropdownMenu,
@@ -50,7 +51,6 @@ import {
   Modal,
 } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { number, object } from 'yup'
 import { useApiKeysVisibility } from '../APIKeys/hooks/useApiKeysVisibility'
 import {
diff --git a/apps/studio/components/interfaces/Organization/Documents/DPA.tsx b/apps/studio/components/interfaces/Organization/Documents/DPA.tsx
@@ -7,12 +7,12 @@ import {
   ScaffoldSectionDetail,
 } from 'components/layouts/Scaffold'
 import { InlineLink } from 'components/ui/InlineLink'
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useDpaRequestMutation } from 'data/documents/dpa-request-mutation'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useProfile } from 'lib/profile'
 import { Button } from 'ui'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 export const DPA = () => {
   const { profile } = useProfile()
diff --git a/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectModal.tsx b/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectModal.tsx
@@ -4,14 +4,14 @@ import { toast } from 'sonner'
 
 import { LOCAL_STORAGE_KEYS } from 'common'
 import { CANCELLATION_REASONS } from 'components/interfaces/Billing/Billing.constants'
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useSendDowngradeFeedbackMutation } from 'data/feedback/exit-survey-send'
 import { useProjectDeleteMutation } from 'data/projects/project-delete-mutation'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { Input } from 'ui'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 export const DeleteProjectModal = ({
   visible,
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/DeleteAnalyticsBucketModal.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/DeleteAnalyticsBucketModal.tsx
@@ -1,9 +1,9 @@
 import { toast } from 'sonner'
 
 import { useParams } from 'common'
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useAnalyticsBucketDeleteMutation } from 'data/storage/analytics-bucket-delete-mutation'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useAnalyticsBucketDeleteCleanUp } from './AnalyticsBucketDetails/useAnalyticsBucketAssociatedEntities'
 
 export interface DeleteAnalyticsBucketModalProps {
diff --git a/apps/studio/components/interfaces/Storage/DeleteBucketModal.tsx b/apps/studio/components/interfaces/Storage/DeleteBucketModal.tsx
@@ -3,12 +3,12 @@ import { useRouter } from 'next/router'
 import { toast } from 'sonner'
 
 import { useParams } from 'common'
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
 import { useDatabasePolicyDeleteMutation } from 'data/database-policies/database-policy-delete-mutation'
 import { useBucketDeleteMutation } from 'data/storage/bucket-delete-mutation'
 import { Bucket, useBucketsQuery } from 'data/storage/buckets-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { TextConfirmModal } from 'ui-patterns/Dialogs/TextConfirmModal'
 import { formatPoliciesForStorage } from './Storage.utils'
 
 export interface DeleteBucketModalProps {
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/DeleteVectorBucketModal.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/DeleteVectorBucketModal.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react'
 import { toast } from 'sonner'
 
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useFDWDeleteMutation } from 'data/fdw/fdw-delete-mutation'
 import { useVectorBucketDeleteMutation } from 'data/storage/vector-bucket-delete-mutation'
 import { deleteVectorBucketIndex } from 'data/storage/vector-bucket-index-delete-mutation'
 import { useVectorBucketsIndexesQuery } from 'data/storage/vector-buckets-indexes-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useS3VectorsWrapperInstance } from './useS3VectorsWrapperInstance'
 
 export interface DeleteVectorBucketModalProps {
diff --git a/apps/studio/components/ui/ProjectSettings/ToggleLegacyApiKeys.tsx b/apps/studio/components/ui/ProjectSettings/ToggleLegacyApiKeys.tsx
@@ -5,6 +5,7 @@ import { toast } from 'sonner'
 import { useParams } from 'common'
 import { useApiKeysVisibility } from 'components/interfaces/APIKeys/hooks/useApiKeysVisibility'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useToggleLegacyAPIKeysMutation } from 'data/api-keys/legacy-api-key-toggle-mutation'
 import { useLegacyAPIKeysStatusQuery } from 'data/api-keys/legacy-api-keys-status-query'
 import { useLegacyJWTSigningKeyQuery } from 'data/jwt-signing-keys/legacy-jwt-signing-key-query'
@@ -21,7 +22,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from 'ui'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import Panel from '../Panel'
 
 export const ToggleLegacyApiKeysPanel = () => {
diff --git a/apps/studio/components/ui/TextConfirmModalWrapper.tsx b/apps/studio/components/ui/TextConfirmModalWrapper.tsx
@@ -0,0 +1,8 @@
+import { useFlag } from 'common'
+import { ComponentPropsWithoutRef } from 'react'
+import { TextConfirmModal as TextConfirmModalBase } from 'ui-patterns/Dialogs/TextConfirmModal'
+
+export const TextConfirmModal = (props: ComponentPropsWithoutRef<typeof TextConfirmModalBase>) => {
+  const enableCopyConfirmation = useFlag('textConfirmationModalClickToCopy')
+  return <TextConfirmModalBase {...props} enableCopy={enableCopyConfirmation} />
+}
diff --git a/apps/studio/pages/project/[ref]/branches/index.tsx b/apps/studio/pages/project/[ref]/branches/index.tsx
@@ -8,13 +8,14 @@ import { toast } from 'sonner'
 import { useParams } from 'common'
 import { Overview } from 'components/interfaces/BranchManagement/Overview'
 import BranchLayout from 'components/layouts/BranchLayout/BranchLayout'
-import DefaultLayout from 'components/layouts/DefaultLayout'
+import { DefaultLayout } from 'components/layouts/DefaultLayout'
 import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
-import AlertError from 'components/ui/AlertError'
+import { AlertError } from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { DocsButton } from 'components/ui/DocsButton'
-import NoPermission from 'components/ui/NoPermission'
+import { NoPermission } from 'components/ui/NoPermission'
+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'
 import { useBranchDeleteMutation } from 'data/branches/branch-delete-mutation'
 import { Branch, useBranchesQuery } from 'data/branches/branches-query'
 import { useGitHubConnectionsQuery } from 'data/integrations/github-connections-query'
@@ -26,7 +27,6 @@ import { DOCS_URL } from 'lib/constants'
 import { useAppStateSnapshot } from 'state/app-state'
 import type { NextPageWithLayout } from 'types'
 import { Button } from 'ui'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const BranchesPage: NextPageWithLayout = () => {
   const router = useRouter()
diff --git a/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx b/packages/ui-patterns/src/Dialogs/TextConfirmModal.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'`
	`1`	`+import { TextConfirmModal } from 'components/ui/TextConfirmModalWrapper'`
`2`	`2`
`3`	`3`	`interface DeleteDestinationProps {`
`4`	`4`	`visible: boolean`