Admin should be able to disable or enable users

src/common/api/userApi.ts

@@ -40,6 +40,8 @@ export type UpdateProfilePictureRequest = {
   profilePicture: FormData;
 };
 export type DeleteProfilePictureRequest = Pick<User, 'id'>;
+export type DisableUserRequest = Pick<User, 'id'>;
+export type EnableUserRequest = Pick<User, 'id'>;
 
 export const userApi = createApi({
   reducerPath: 'userApi',
@@ -76,7 +78,7 @@ export const userApi = createApi({
     }),
 
     getUserHistory: builder.query<PaginatedResult<HistoricalRecord<User>>, string>({
-      query: url => url
+      query: url => url,
     }),
 
     inviteUser: builder.mutation<User, CreateUserRequest>({
@@ -215,6 +217,22 @@ export const userApi = createApi({
       }),
       invalidatesTags: ['User'],
     }),
+
+    disableUser: builder.mutation<User, DisableUserRequest>({
+      query: ({ id }) => ({
+        url: `/users/${id}/disable/`,
+        method: 'POST',
+      }),
+      invalidatesTags: ['User'],
+    }),
+
+    enableUser: builder.mutation<User, EnableUserRequest>({
+      query: ({ id }) => ({
+        url: `/users/${id}/enable/`,
+        method: 'POST',
+      }),
+      invalidatesTags: ['User'],
+    }),
   }),
 });
 
@@ -240,4 +258,6 @@ export const {
   useUpdateProfilePictureMutation,
   useDeleteProfilePictureMutation,
   useGetUserHistoryQuery,
+  useDisableUserMutation,
+  useEnableUserMutation,
 } = userApi;

src/common/models/user.ts

@@ -10,4 +10,6 @@ export interface User {
   profilePicture: Image | null;
   role: Role;
   newEmail: string | null;
+  isActive: boolean;
+  disabledAt: string | null;
 }

src/features/user-dashboard/components/UserDetailForm.tsx

@@ -5,14 +5,31 @@ import WithUnsavedChangesPrompt from 'common/components/WithUnsavedChangesPrompt
 import { addServerErrors } from 'common/error/utilities';
 import { Role, User, RoleOption, ServerValidationErrors } from 'common/models';
 import { FC, useEffect } from 'react';
-import { Col, Row } from 'react-bootstrap';
+import { Button, Col, Row } from 'react-bootstrap';
 import Form from 'react-bootstrap/Form';
 import { Controller, useForm } from 'react-hook-form';
 import * as yup from 'yup';
+import styled from 'styled-components';
+import { useModalWithData } from 'common/hooks/useModalWithData';
+import { SimpleConfirmModal } from 'common/components/SimpleConfirmModal';
+import * as notificationService from 'common/services/notification';
+import { useDisableUserMutation, useEnableUserMutation } from 'common/api/userApi';
+import { handleApiError, isFetchBaseQueryError } from 'common/api/handleApiError';
 import { Trans, useTranslation } from 'react-i18next';
 import { Constants } from 'utils/constants';
 
-export type FormData = Pick<User, 'email' | 'firstName' | 'lastName' | 'role'>;
+const DisableButton = styled(Button)`
+  margin-left: 100px;
+  .spinner-container {
+    padding-right: 8px;
+  }
+`;
+
+export type DisableUserRequest = {
+  id: string;
+};
+
+export type FormData = Pick<User, 'email' | 'firstName' | 'lastName' | 'role' | 'id' | 'isActive'>;
 
 export interface Props {
   availableRoles: Role[];
@@ -26,9 +43,9 @@ export interface Props {
 export const UserDetailForm: FC<Props> = ({
   availableRoles,
   defaultValues = {},
-  isRoleSelectorDisabled,
   onSubmit,
   submitButtonLabel = 'Submit',
+  isRoleSelectorDisabled,
   serverValidationErrors,
 }) => {
   const { t } = useTranslation(['translation', 'common']);
@@ -66,6 +83,62 @@ export const UserDetailForm: FC<Props> = ({
     }
   }, [serverValidationErrors, setError]);
 
+  const [disableUser] = useDisableUserMutation();
+  const [enableUser] = useEnableUserMutation();
+
+  const [showDisableModal, hideDisableModal] = useModalWithData<User>(
+    user =>
+      // eslint-disable-next-line react/no-unstable-nested-components
+      ({ in: open, onExited }) => {
+        const onSubmit = async () => {
+          try {
+            if (user.isActive) {
+              await disableUser({ id: user.id }).unwrap();
+              notificationService.showSuccessMessage('User disabled.');
+            } else {
+              await enableUser({ id: user.id }).unwrap();
+              notificationService.showSuccessMessage('User enabled.');
+            }
+
+            hideDisableModal();
+          } catch (error) {
+            if (isFetchBaseQueryError(error)) {
+              handleApiError(error);
+            } else {
+              if (user.isActive) {
+                notificationService.showErrorMessage('Could not disable user.');
+              } else {
+                notificationService.showErrorMessage('Could not enable user.');
+              }
+              throw error;
+            }
+          }
+        };
+
+        return (
+          <SimpleConfirmModal
+            title={user.isActive ? 'Disable User' : 'Enable User'}
+            show={open}
+            onCancel={hideDisableModal}
+            onConfirm={onSubmit}
+            confirmLabel={user.isActive ? 'Disable User' : 'Enable User'}
+            confirmVariant='danger'
+            onExited={onExited}
+            body={
+              <div>
+                <p className='m-0'>
+                  {user.isActive
+                    ? 'Are you sure you want to disable this user?'
+                    : 'Are you sure you want to enable this user?'}
+                </p>
+              </div>
+            }
+          />
+        );
+      },
+    [],
+  );
+
   return (
     <WithUnsavedChangesPrompt when={isDirty && !(isSubmitting || isSubmitted)}>
       <Form name='create-user-form' onSubmit={handleSubmit(onSubmit)}>
@@ -138,10 +211,19 @@ export const UserDetailForm: FC<Props> = ({
           </Form.Text>
         </Form.Group>
 
-        <div className='mt-3'>
-          <LoadingButton type='submit' disabled={!isValid} loading={isSubmitting}>
-            {submitButtonLabel}
-          </LoadingButton>
+        <div className='mt-3 d-flex justify-content-between'>
+          <div>
+            <LoadingButton type='submit' disabled={!isValid} loading={isSubmitting}>
+              {submitButtonLabel}
+            </LoadingButton>
+          </div>
+          <div>
+            {defaultValues.id ? (
+              <DisableButton onClick={() => showDisableModal(defaultValues as User)} variant='btn btn-danger'>
+                {defaultValues.isActive ? 'Disable' : 'Enable'}
+              </DisableButton>
+            ) : null}
+          </div>
         </div>
       </Form>
     </WithUnsavedChangesPrompt>

src/features/user-dashboard/hooks/useUserTableData.tsx

@@ -23,8 +23,10 @@ export type UserTableItem = {
   role: RoleType;
   profilePicture: Image | null;
   actions: ActionButtonProps[];
+  isActive: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  disabledAt: string | null | any;
 };
-
 export const useUserTableData = (users: User[] = []) => {
   const { userHasPermission } = useRbac();
   const { t, i18n } = useTranslation(['translation', 'common']);
@@ -194,6 +196,11 @@ export const useUserTableData = (users: User[] = []) => {
           </SubtleBadge>
         ),
       },
+      {
+        accessor: 'isActive',
+        Header: 'Account Status',
+        Cell: ({ value: isActive }) => <span>{isActive ? 'Enabled' : 'Disabled'}</span>,
+      },
       {
         accessor: 'activatedAt',
         Header: t('activatedDate', { ns: 'common' })!,
@@ -212,6 +219,21 @@ export const useUserTableData = (users: User[] = []) => {
           </>
         ),
       },
+      {
+        accessor: 'disabledAt',
+        Header: 'Disabled On',
+        Cell: ({ value: disabledAt }) => (
+          <>
+            {disabledAt instanceof Date ? (
+              <time dateTime={disabledAt.toISOString()}>
+                {new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(disabledAt)}
+              </time>
+            ) : (
+              <></>
+            )}
+          </>
+        ),
+      },
       {
         accessor: 'actions',
         Header: '',
@@ -246,7 +268,9 @@ export const useUserTableData = (users: User[] = []) => {
         firstName: user.firstName,
         email: user.email,
         role: user.role,
+        isActive: user.isActive,
         profilePicture: user.profilePicture,
+        disabledAt: user.disabledAt ? new Date(user.disabledAt) : '',
         activatedAt: user.activatedAt
           ? new Date(user.activatedAt)
           : {

src/features/user-dashboard/pages/UserListView.tsx

@@ -57,11 +57,24 @@ export const UserListView: FC = () => {
           { label: t('admin', { ns: 'common' }), value: 'ADMIN' },
         ]),
       },
+      {
+        attribute: 'active',
+        attributeLabel: 'Account Status',
+        FilterUI: EnumFilter([
+          { label: 'Enabled', value: 'ENABLED' },
+          { label: 'Disabled', value: 'DISABLED' },
+        ]),
+      },
       {
         attribute: 'activatedAt',
         attributeLabel: t('activatedDate', { ns: 'common' }),
         FilterUI: RecentDateFilter([30, 90, 180]),
       },
+      {
+        attribute: 'deactivatedAt',
+        attributeLabel: 'Deactivated Date',
+        FilterUI: RecentDateFilter([30, 90, 180]),
+      },
     ],
     [t],
   );