[Feature]: Support activating/deactivating users via the UI #2427 (#2440)

Author: olgenn

frontend/src/locale/en.json

@@ -512,6 +512,10 @@
     "token": "Token",
     "token_description": "Specify use your personal access token",
     "global_role": "Global role",
+    "active": "Active",
+    "active_description": "Specify user activation",
+    "activated": "Activated",
+    "deactivated": "Deactivated",
     "email": "Email",
     "created_at": "Created at",
     "account": "User",

frontend/src/pages/User/Edit/index.tsx

@@ -84,7 +84,7 @@ export const UserEdit: React.FC = () => {
     const onSubmitHandler = async (userData: Partial<IUser>) => {
         try {
             const data = await updateUser({
-                ...pick(userData, ['global_role', 'email']),
+                ...pick(userData, ['global_role', 'email', 'active']),
                 username: paramUserName,
             }).unwrap();
 

frontend/src/pages/User/Form/index.tsx

@@ -19,7 +19,7 @@ import {
 
 import { copyToClipboard } from 'libs';
 
-import { TRoleSelectOption } from './types';
+import { TActiveSelectOption, TRoleSelectOption } from './types';
 
 export interface Props {
     initialValues?: IUserWithCreds;
@@ -44,22 +44,37 @@ export const UserForm: React.FC<Props> = ({
     const isEditing = !!initialValues;
 
     const { handleSubmit, control } = useForm<IUser>({
-        defaultValues: initialValues ?? {
-            global_role: 'user',
-        },
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        defaultValues: initialValues
+            ? { ...initialValues, active: initialValues.active ? 'active' : 'inactive' }
+            : {
+                  global_role: 'user',
+                  active: 'active',
+              },
     });
 
     const roleSelectOptions: TRoleSelectOption[] = [
         { label: t('roles.admin'), value: 'admin' },
         { label: t('roles.user'), value: 'user' },
     ];
 
+    const activeSelectOptions: TActiveSelectOption[] = [
+        { label: t('users.activated'), value: 'active' },
+        { label: t('users.deactivated'), value: 'inactive' },
+    ];
+
     const onCopyToken = () => {
         copyToClipboard(initialValues?.creds.token ?? '');
     };
 
     const onSubmit = (data: IUser) => {
-        onSubmitProp(data);
+        onSubmitProp({
+            ...data,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            active: data.active === 'active',
+        });
     };
 
     const isDisabledEmailAndRoleField = () => {
@@ -124,6 +139,15 @@ export const UserForm: React.FC<Props> = ({
                                 options={roleSelectOptions}
                                 disabled={isDisabledEmailAndRoleField()}
                             />
+
+                            <FormSelect
+                                label={t('users.active')}
+                                description={t('users.active_description')}
+                                control={control}
+                                name="active"
+                                options={activeSelectOptions}
+                                disabled={isDisabledEmailAndRoleField()}
+                            />
                         </ColumnLayout>
 
                         {initialValues && (

frontend/src/pages/User/Form/types.ts

@@ -1 +1,2 @@
 export type TRoleSelectOption = { label: string; value: TProjectRole; disabled?: boolean };
+export type TActiveSelectOption = { label: string; value: 'active' | 'inactive'; disabled?: boolean };

frontend/src/types/user.d.ts

@@ -1,35 +1,36 @@
 declare type TUserRole = 'user' | 'admin';
-declare type TUserPermission = 'CAN_CREATE_PROJECTS'
-declare type TUserPermissionKeys = 'can_create_projects'
+declare type TUserPermission = 'CAN_CREATE_PROJECTS';
+declare type TUserPermissionKeys = 'can_create_projects';
 
 declare interface IUserResponseData {
-    id: string,
+    id: string;
     username: string;
-    global_role: TUserRole
-    email: string | null,
-    permissions: Record<TUserPermissionKeys, boolean>
+    global_role: TUserRole;
+    email: string | null;
+    permissions: Record<TUserPermissionKeys, boolean>;
 }
 
 declare interface IUser {
-    id: string,
+    id: string;
     username: string;
-    global_role: TUserRole
-    email: string | null,
-    permissions: TUserPermission[],
-    created_at: string
+    global_role: TUserRole;
+    email: string | null;
+    permissions: TUserPermission[];
+    created_at: string;
+    active: boolean;
 }
 
 declare interface IUserWithCreds extends IUser {
-    "creds": {
-        "token": string
-    }
+    creds: {
+        token: string;
+    };
 }
 
-declare interface IUserAuthData extends Pick<IUserWithCreds['creds'], 'token'>{}
+declare interface IUserAuthData extends Pick<IUserWithCreds['creds'], 'token'> {}
 
 declare interface IUserBillingInfo {
-    balance: number
-    is_payment_method_attached: boolean,
-    default_payment_amount: number,
-    billing_history: IPayment[]
+    balance: number;
+    is_payment_method_attached: boolean;
+    default_payment_amount: number;
+    billing_history: IPayment[];
 }