Unify and slightly reword account deletion

The `DeletionCard` was duplicated across the `Profile` for self hosted users, as well as the `Admin` for SaaS.

This now uses the same component for both, and slightly rewords the text.

Author: Swatinem

src/pages/AccountSettings/tabs/Admin/Admin.jsx

@@ -2,12 +2,13 @@ import { useParams } from 'react-router-dom'
 
 import { useUser } from 'services/user'
 
-import DeletionCard from './DeletionCard'
 import DetailsSection from './DetailsSection'
 import GithubIntegrationSection from './GithubIntegrationSection'
 import ManageAdminCard from './ManageAdminCard'
 import StudentSection from './StudentSection'
 
+import DeletionCard from '../DeletionCard'
+
 function Admin() {
   const { owner } = useParams()
   const { data: currentUser } = useUser()

src/pages/AccountSettings/tabs/Admin/Admin.test.jsx

@@ -14,7 +14,7 @@ vi.mock('./GithubIntegrationSection', () => ({
   default: () => 'GithubIntegrationSection',
 }))
 vi.mock('./ManageAdminCard', () => ({ default: () => 'ManageAdminCard' }))
-vi.mock('./DeletionCard', () => ({ default: () => 'DeletionCard' }))
+vi.mock('../DeletionCard', () => ({ default: () => 'DeletionCard' }))
 
 const user = {
   me: {

src/pages/AccountSettings/tabs/Admin/DeletionCard/DeletionCard.tsx

@@ -22,7 +22,7 @@ describe('DeletionCard', () => {
       render(<DeletionCard isPersonalSettings={true} />, { wrapper })
 
       const message = screen.getByText(
-        /Erase all my personal content and projects./
+        /Erase my personal account and all my repositories./
       )
       expect(message).toBeInTheDocument()
     })
@@ -33,7 +33,7 @@ describe('DeletionCard', () => {
       render(<DeletionCard isPersonalSettings={false} />, { wrapper })
 
       const message = screen.getByText(
-        /Erase all my organization content and projects./
+        /Erase organization and all its repositories./
       )
       expect(message).toBeInTheDocument()
     })

src/pages/AccountSettings/tabs/Admin/DeletionCard/DeletionCard.test.tsx renamed to src/pages/AccountSettings/tabs/DeletionCard/DeletionCard.test.tsx

@@ -0,0 +1,32 @@
+import Card from 'old_ui/Card'
+import A from 'ui/A'
+
+interface DeletionCardProps {
+  isPersonalSettings: boolean
+}
+
+function DeletionCard({ isPersonalSettings }: DeletionCardProps) {
+  return (
+    <div className="flex flex-col gap-4">
+      <h2 className="text-lg font-semibold">
+        {isPersonalSettings ? 'Delete account' : 'Delete organization'}
+      </h2>
+      <Card>
+        <p>
+          {isPersonalSettings
+            ? 'Erase my personal account and all my repositories. '
+            : 'Erase organization and all its repositories. '}
+          <A
+            to={{ pageName: 'support' }}
+            hook="contact-support-link"
+            isExternal
+          >
+            Contact support
+          </A>
+        </p>
+      </Card>
+    </div>
+  )
+}
+
+export default DeletionCard

src/pages/AccountSettings/tabs/DeletionCard/DeletionCard.tsx

@@ -6,9 +6,10 @@ import { SelfHostedCurrentUserQueryOpts } from 'services/selfHosted/SelfHostedCu
 
 import ActivationBanner from './ActivationBanner'
 import AdminBanner from './AdminBanner'
-import DeletionCard from './DeletionCard'
 import NameEmailCard from './NameEmailCard'
 
+import DeletionCard from '../DeletionCard'
+
 function Profile({ provider, owner }) {
   const yamlTab = `/account/${provider}/${owner}/yaml/`
   const { data: currentUser } = useSuspenseQueryV5(
@@ -27,7 +28,7 @@ function Profile({ provider, owner }) {
       {currentUser?.isAdmin && <AdminBanner />}
       <ActivationBanner />
       <NameEmailCard currentUser={currentUser} provider={provider} />
-      <DeletionCard />
+      <DeletionCard isPersonalSettings={isPersonalSettings} />
     </div>
   )
 }