Add support for removing users (#13329)

This PR adds support for removing `User` from an organization by the admin. The user is then removed entirely and all `Assets` are transfereed to the organization admin.

- Fix #13286
- Fix enso-org/cloud-v2#2045

Author: PabloBuchu

app/common/src/text.ts

@@ -174,6 +174,7 @@ interface PlaceholderOverrides {
   readonly planOverriddenToX: [planName: string]
   readonly 'manageLabelsModal.createLabelWithTitle': [labelName: string]
   readonly assetsTableBackgroundRefreshIntervalOverriddenToXMs: [ms: number]
+  readonly deleteUserConfirmation: [userUsername: string, userEmail: string]
   readonly willUploadUpToXFileChunksAtOnce: [parallelism: number]
 
   readonly commercialUseNotice: [originalTitle: string]

app/common/src/text/english.json

@@ -57,6 +57,8 @@
   "changeUserGroupsError": "Could not set user groups",
   "deleteUserGroupError": "Could not delete user group '$0'",
   "deleteUserError": "Could not delete user '$0'",
+  "deleteUserConfirmation": "permanently delete user: '$0 ($1)'",
+  "deleteUserAlert": "We will transfer all belonging assets to the organization admin account.",
   "anotherProjectIsBeingOpenedError": "Another project is currently being opened",
   "localBackendNotDetectedError": "Could not detect the local backend",
   "invalidInput": "Invalid input",

app/gui/src/dashboard/components/Alert/Alert.tsx

@@ -35,7 +35,7 @@ export const ALERT_STYLES = tv({
     },
   },
   slots: {
-    iconContainer: 'mt-1',
+    iconContainer: 'my-auto pt-1',
     children: 'flex flex-col items-stretch',
   },
   defaultVariants: {

app/gui/src/dashboard/layouts/Settings/MembersSettingsSection.tsx

@@ -6,7 +6,9 @@ import { Scroller } from '#/components/Scroller'
 import { Text } from '#/components/Text'
 import { backendMutationOptions, backendQueryOptions } from '#/hooks/backendHooks'
 import * as billingHooks from '#/hooks/billing'
+import ConfirmDeleteModal from '#/modals/ConfirmDeleteModal'
 import InviteUsersModal from '#/modals/InviteUsersModal'
+import { setModal } from '#/providers/ModalProvider'
 import type * as backendModule from '#/services/Backend'
 import type RemoteBackend from '#/services/RemoteBackend'
 import * as authProvider from '$/providers/react'
@@ -100,7 +102,12 @@ export default function MembersSettingsSection() {
                     {getText('active')}
                     {member.email !== user.email && isAdmin && (
                       <Button.Group gap="small" className="mt-0.5">
-                        <RemoveMemberButton backend={backend} userId={member.userId} />
+                        <RemoveMemberButton
+                          backend={backend}
+                          userId={member.userId}
+                          userEmail={member.email}
+                          userUsername={member.name}
+                        />
                       </Button.Group>
                     )}
                   </div>
@@ -178,11 +185,13 @@ function ResendInvitationButton(props: ResendInvitationButtonProps) {
 interface RemoveMemberButtonProps {
   readonly backend: RemoteBackend
   readonly userId: backendModule.UserId
+  readonly userEmail: string
+  readonly userUsername: string
 }
 
 /** Action button for removing a member. */
 function RemoveMemberButton(props: RemoveMemberButtonProps) {
-  const { backend, userId } = props
+  const { backend, userId, userUsername, userEmail } = props
   const { getText } = useText()
 
   const removeMutation = useMutation(
@@ -193,7 +202,24 @@ function RemoveMemberButton(props: RemoveMemberButtonProps) {
   )
 
   return (
-    <Button variant="icon" size="custom" onPress={() => removeMutation.mutateAsync([userId])}>
+    <Button
+      variant="icon"
+      size="custom"
+      onPress={() => {
+        setModal(
+          <ConfirmDeleteModal
+            defaultOpen={true}
+            cannotUndo={true}
+            actionText={getText('deleteUserConfirmation', userUsername, userEmail)}
+            alert={getText('deleteUserAlert')}
+            onConfirm={async () => {
+              await removeMutation.mutateAsync([userId])
+            }}
+            actionButtonLabel={getText('remove')}
+          />,
+        )
+      }}
+    >
       {getText('remove')}
     </Button>
   )

app/gui/src/dashboard/modals/ConfirmDeleteModal.tsx

@@ -7,6 +7,7 @@ import { useText } from '$/providers/react'
 /** Props for a {@link ConfirmDeleteModal}. */
 export interface ConfirmDeleteModalProps extends Confirmable {
   readonly defaultOpen?: boolean | undefined
+  readonly alert?: string | undefined
   readonly cannotUndo?: boolean | undefined
   /** Must fit in the sentence "Are you sure you want to <action>?". */
   readonly actionText: string
@@ -19,6 +20,7 @@ export default function ConfirmDeleteModal(props: ConfirmDeleteModalProps) {
   const {
     // MUST NOT be defaulted. Omitting this value should fall back to `Dialog`'s behavior.
     defaultOpen,
+    alert,
     cannotUndo = false,
     actionText,
     actionButtonLabel = 'Delete',
@@ -39,6 +41,12 @@ export default function ConfirmDeleteModal(props: ConfirmDeleteModalProps) {
     >
       <Text className="relative">{getText('confirmPrompt', actionText)}</Text>
 
+      {alert != null && (
+        <Alert variant="outline" icon="warning">
+          {alert}
+        </Alert>
+      )}
+
       {cannotUndo && (
         <Alert variant="outline" icon="warning">
           {getText('thisOperationCannotBeUndone')}

app/gui/src/dashboard/modals/InviteUsersModal/InviteUsersForm.tsx

@@ -1,6 +1,6 @@
 /** @file A modal with inputs for user email and permission level. */
 import { Form } from '#/components/Form'
-import { ResizableContentEditableInput } from '#/components/Inputs/ResizableInput'
+import { Input } from '#/components/Inputs/Input'
 import * as paywallComponents from '#/components/Paywall'
 import { backendMutationOptions } from '#/hooks/backendHooks'
 import * as billingHooks from '#/hooks/billing'
@@ -133,7 +133,7 @@ export function InviteUsersForm(props: InviteUsersFormProps) {
         })
       }}
     >
-      <ResizableContentEditableInput
+      <Input
         ref={inputRef}
         name="emails"
         label={getText('inviteEmailFieldLabel')}

app/gui/src/dashboard/services/RemoteBackend.ts

@@ -185,10 +185,14 @@ export default class RemoteBackend extends Backend {
 
   /**
    * Delete a user.
-   * FIXME: Not implemented on backend yet.
    */
-  override async removeUser(): Promise<void> {
-    return await this.throw(null, 'removeUserBackendError')
+  override async removeUser(userId: backend.UserId): Promise<void> {
+    const response = await this.delete(remoteBackendPaths.removeUserPath(userId))
+    if (!response.ok) {
+      return await this.throw(response, 'removeUserBackendError')
+    } else {
+      return
+    }
   }
 
   /** Invite a new user to the organization by email. */

app/gui/src/dashboard/services/remoteBackendPaths.ts

@@ -80,6 +80,10 @@ export function cancelSubscriptionPath(subscriptionId: backend.SubscriptionId) {
   return `payments/subscriptions/${subscriptionId}`
 }
 
+/** Relative HTTP path to the "delete user" endpoint of the Cloud backend API. */
+export function removeUserPath(userId: backend.UserId) {
+  return `users/${userId}`
+}
 /** Relative HTTP path to the "change user groups" endpoint of the Cloud backend API. */
 export function changeUserGroupPath(userId: backend.UserId) {
   return `users/${userId}/usergroups`