User Management UI (#511)

* Start setup on user management feature

* User form

* Add set-up for some actions and profile page with form

* Work on new user

* Update row

* Clean-up navbar

* Set active classnames in nav links

* Add privileges

* Cancel functionality on new user form

* User slice

* Delete user modal

* Breadcrumbs and delete user modal as menuitem

* User POST in slice

* Update slice

* Create through slice

* Set-up for future api work

* Start get

* Create and Delete set-up

* Delete user validation

* Amend

* User search

* Edit tweaks

* User privileges

* Ui tweaks

* Permissions

* Add additional user info to table

* Checkboxes

* Some small form fixes

* Refreshes and checkboxes on load

* Default values

* Split out edit and new forms for easier flow and initial value in formik handlin

* Type checking

* Some file cleanup

* Pagination;

* Some style tweaks

* Change checkbox color

* Checkboxes

* Cleanup

* Remove unused effect

* Update session with user info and fix client console warning for controlled input

* Update session in pages

* Some form cleanup

* Clean index page

* Edit user permissions checks

* Feedback

* Remove duplicate

* Fix checkbox bug

* Password update

* Add error handling on new user form

* Change password modal

* Remove rogue console

Co-authored-by: Laura Smith <[email protected]>

.gitignore

@@ -103,6 +103,7 @@ __pypackages__/
 
 # Environments
 .venv
+.env.local
 env/
 venv/
 ENV/

clients/admin-ui/src/app/store.ts

@@ -6,17 +6,21 @@ import {
   privacyRequestApi,
   reducer as privacyRequestsReducer,
 } from '../features/privacy-requests';
-import { reducer as userReducer } from '../features/user';
+import { reducer as userReducer, userApi } from '../features/user';
 
 const makeStore = () => {
   const store = configureStore({
     reducer: {
       [privacyRequestApi.reducerPath]: privacyRequestApi.reducer,
       subjectRequests: privacyRequestsReducer,
+      [userApi.reducerPath]: userApi.reducer,
       user: userReducer,
     },
     middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware().concat(privacyRequestApi.middleware),
+      getDefaultMiddleware().concat(
+        privacyRequestApi.middleware,
+        userApi.middleware
+      ),
     devTools: true,
   });
   setupListeners(store.dispatch);

clients/admin-ui/src/features/common/Header.tsx

@@ -45,9 +45,10 @@ const Header: React.FC<HeaderProps> = ({ username }) => (
           <MenuList shadow="xl">
             <Stack px={3} py={2} spacing={0}>
               <Text fontWeight="medium">{username}</Text>
-              <Text fontSize="sm" color="gray.600">
+              {/* This text should only show if actually an admin */}
+              {/* <Text fontSize="sm" color="gray.600">
                 Administrator
-              </Text>
+              </Text> */}
             </Stack>
             <MenuDivider />
             <MenuItem

clients/admin-ui/src/features/common/NavBar.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {Flex, Button } from '@fidesui/react';
+import { useSession } from "next-auth/react"
+import NextLink from 'next/link'
+import { useRouter } from "next/router";
+
+import { ArrowDownLineIcon } from '../../features/common/Icon';
+
+import Header from './Header';
+
+const NavBar = () => {
+  const { data: session } = useSession();
+  const router = useRouter();
+  const username: string | any = session?.username
+
+  return (
+  <>
+    <Header username={username} />
+    <Flex
+      borderBottom="1px"
+      borderTop="1px"
+      px={9}
+      py={1}
+      borderColor="gray.100"
+    >
+      <NextLink href="/" passHref>
+        <Button as="a" variant="ghost" mr={4} colorScheme={router.pathname === "/" ? "complimentary" : "ghost"}>
+          Subject Requests
+        </Button>
+      </NextLink>
+
+      <NextLink href="#" passHref>
+        <Button as="a" variant="ghost" disabled mr={4}>
+          Datastore Connections
+        </Button>
+      </NextLink>
+
+      <NextLink href="/user-management" passHref>
+        <Button as="a" variant="ghost" mr={4} colorScheme={router.pathname.startsWith("/user-management") ? "complimentary" : "ghost"}>
+          User Management
+        </Button>
+      </NextLink>
+
+      <NextLink href="#" passHref>
+        <Button as="a" variant="ghost" disabled rightIcon={<ArrowDownLineIcon />}>
+          More
+        </Button>
+      </NextLink>
+    </Flex>
+  </>
+  )
+}
+
+export default NavBar;

clients/admin-ui/src/features/user-management/DeleteUserModal.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  FormControl,
+  Input,
+  MenuItem,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  Text,
+  useDisclosure,
+} from '@fidesui/react';
+
+import { User } from '../user/types';
+import { useDeleteUserMutation } from '../user/user.slice';
+
+function DeleteUserModal(user: User) {
+  const [usernameValue, setUsernameValue] = useState('');
+  const [confirmValue, setConfirmValue] = useState('');
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [deleteUser, deleteUserResult] = useDeleteUserMutation();
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.name === 'username') {
+      setUsernameValue(event.target.value);
+    } else {
+      setConfirmValue(event.target.value);
+    }
+  };
+
+  const deletionValidation =
+    user.id &&
+    confirmValue &&
+    usernameValue &&
+    user.username === usernameValue &&
+    user.username === confirmValue
+      ? true
+      : false;
+
+  const handleDeleteUser = () => {
+    if (deletionValidation && user.id) {
+      deleteUser(user.id);
+      onClose();
+    }
+  };
+
+  return (
+    <>
+      <MenuItem
+        _focus={{ color: 'complimentary.500', bg: 'gray.100' }}
+        onClick={onOpen}
+      >
+        <Text fontSize="sm">Delete</Text>
+      </MenuItem>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Delete User</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            <Stack direction={'column'} spacing="15px">
+              <FormControl>
+                <Input
+                  isRequired
+                  name="username"
+                  onChange={handleChange}
+                  placeholder="Enter username"
+                  value={usernameValue}
+                />
+              </FormControl>
+              <FormControl>
+                <Input
+                  isRequired
+                  name="confirmUsername"
+                  onChange={handleChange}
+                  placeholder="Confirm username"
+                  value={confirmValue}
+                />
+              </FormControl>
+            </Stack>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button
+              onClick={onClose}
+              marginRight={'10px'}
+              size={'sm'}
+              variant={'solid'}
+              bg="white"
+              width={'50%'}
+            >
+              Cancel
+            </Button>
+            <Button
+              disabled={!deletionValidation}
+              onClick={handleDeleteUser}
+              mr={3}
+              size={'sm'}
+              variant="solid"
+              bg="primary.800"
+              color="white"
+              width={'50%'}
+            >
+              Delete User
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+export default DeleteUserModal;