@@ -875,7 +884,7 @@ exports[`snapshot rsu 1`] = `
/>
@@ -883,12 +892,12 @@ exports[`snapshot rsu 1`] = `
class="MuiInputBase-root MuiInputBase-colorPrimary MuiTablePagination-input css-mocked-MuiInputBase-root-MuiTablePagination-select"
>
@@ -1050,67 +1059,6 @@ exports[`snapshot user 1`] = `
class="scroll-div"
>
-
-
-
+
@@ -1198,7 +1146,74 @@ exports[`snapshot user 1`] = `
+ >
+
+
+
@@ -1479,7 +1494,7 @@ exports[`snapshot user 1`] = `
/>
@@ -1487,12 +1502,12 @@ exports[`snapshot user 1`] = `
class="MuiInputBase-root MuiInputBase-colorPrimary MuiTablePagination-input css-mocked-MuiInputBase-root-MuiTablePagination-select"
>
diff --git a/webapp/src/components/__snapshots__/AdminTable.test.tsx.snap b/webapp/src/components/__snapshots__/AdminTable.test.tsx.snap
index 40e9ff03f..bd0133ec2 100644
--- a/webapp/src/components/__snapshots__/AdminTable.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/AdminTable.test.tsx.snap
@@ -11,9 +11,6 @@ exports[`should take a snapshot 1`] = `
class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-mocked-MuiToolbar-root"
>
-
@@ -76,6 +73,9 @@ exports[`should take a snapshot 1`] = `
diff --git a/webapp/src/features/adminAddIntersection/AdminAddIntersection.tsx b/webapp/src/features/adminAddIntersection/AdminAddIntersection.tsx
index 8b66411f5..d5edf0c59 100644
--- a/webapp/src/features/adminAddIntersection/AdminAddIntersection.tsx
+++ b/webapp/src/features/adminAddIntersection/AdminAddIntersection.tsx
@@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react'
import { Form } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
-import { Multiselect } from 'react-widgets'
import {
selectOrganizations,
selectSelectedOrganizations,
@@ -22,8 +21,19 @@ import { RootState } from '../../store'
import toast from 'react-hot-toast'
import { useNavigate } from 'react-router-dom'
import Dialog from '@mui/material/Dialog'
-import { DialogActions, DialogContent, DialogTitle } from '@mui/material'
-import { AdminButton } from '../../styles/components/AdminButton'
+import CloseIcon from '@mui/icons-material/Close'
+import {
+ Button,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ FormControl,
+ IconButton,
+ InputLabel,
+ MenuItem,
+ OutlinedInput,
+ Select,
+} from '@mui/material'
import { ErrorMessageText } from '../../styles/components/Messages'
export type AdminAddIntersectionForm = {
@@ -83,132 +93,184 @@ const AdminAddIntersection = () => {
return (
)
diff --git a/webapp/src/features/adminAddNotification/AdminAddNotification.test.tsx b/webapp/src/features/adminAddNotification/AdminAddNotification.test.tsx
index 31dbc4919..76d425869 100644
--- a/webapp/src/features/adminAddNotification/AdminAddNotification.test.tsx
+++ b/webapp/src/features/adminAddNotification/AdminAddNotification.test.tsx
@@ -6,12 +6,17 @@ import { ThemeProvider } from '@mui/material'
import { testTheme } from '../../styles'
import { setupStore } from '../../store'
import { replaceChaoticIds } from '../../utils/test-utils'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
it('should take a snapshot', () => {
const { container } = render(
-
+
+
+ } />
+
+
)
diff --git a/webapp/src/features/adminAddNotification/AdminAddNotification.tsx b/webapp/src/features/adminAddNotification/AdminAddNotification.tsx
index fa920ecbe..6fb38ab01 100644
--- a/webapp/src/features/adminAddNotification/AdminAddNotification.tsx
+++ b/webapp/src/features/adminAddNotification/AdminAddNotification.tsx
@@ -1,7 +1,6 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
import { Form } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
-import { DropdownList } from 'react-widgets'
import {
selectSuccessMsg,
selectSelectedType,
@@ -25,8 +24,22 @@ import '../adminRsuTab/Admin.css'
import 'react-widgets/styles.css'
import { AnyAction, ThunkDispatch } from '@reduxjs/toolkit'
import { RootState } from '../../store'
-import { AdminButton } from '../../styles/components/AdminButton'
import { ErrorMessageText, SuccessMessageText } from '../../styles/components/Messages'
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ FormControl,
+ IconButton,
+ InputLabel,
+ MenuItem,
+ Select,
+ Typography,
+} from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+import { useNavigate } from 'react-router-dom'
const AdminAddNotification = () => {
const dispatch: ThunkDispatch
= useDispatch()
@@ -38,8 +51,9 @@ const AdminAddNotification = () => {
const selectedType = useSelector(selectSelectedType)
const availableTypes = useSelector(selectAvailableTypes)
const userEmail = useSelector(selectEmail)
+ const [open, setOpen] = useState(true)
+ const navigate = useNavigate()
const {
- register,
handleSubmit,
reset,
formState: { errors },
@@ -59,43 +73,91 @@ const AdminAddNotification = () => {
}
return (
-
+ {successMsg && {successMsg}}
+ {errorState && (
+ Failed to add email notification due to error: {errorMsg}
+ )}
+
+
+
+
+
+
+
)
}
diff --git a/webapp/src/features/adminAddNotification/__snapshots__/AdminAddNotification.test.tsx.snap b/webapp/src/features/adminAddNotification/__snapshots__/AdminAddNotification.test.tsx.snap
index 357afa823..261c5b8ba 100644
--- a/webapp/src/features/adminAddNotification/__snapshots__/AdminAddNotification.test.tsx.snap
+++ b/webapp/src/features/adminAddNotification/__snapshots__/AdminAddNotification.test.tsx.snap
@@ -1,105 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should take a snapshot 1`] = `
-
+
`;
diff --git a/webapp/src/features/adminAddOrganization/AdminAddOrganization.tsx b/webapp/src/features/adminAddOrganization/AdminAddOrganization.tsx
index e457c849b..59730b2c9 100644
--- a/webapp/src/features/adminAddOrganization/AdminAddOrganization.tsx
+++ b/webapp/src/features/adminAddOrganization/AdminAddOrganization.tsx
@@ -5,7 +5,7 @@ import {
// actions
addOrg,
} from './adminAddOrganizationSlice'
-import { useSelector, useDispatch } from 'react-redux'
+import { useDispatch } from 'react-redux'
import toast from 'react-hot-toast'
import '../adminRsuTab/Admin.css'
@@ -14,9 +14,18 @@ import { AnyAction, ThunkDispatch } from '@reduxjs/toolkit'
import { RootState } from '../../store'
import Dialog from '@mui/material/Dialog'
-import { DialogActions, DialogContent, DialogTitle } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+import {
+ Button,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ FormControl,
+ IconButton,
+ InputLabel,
+ OutlinedInput,
+} from '@mui/material'
import { useNavigate } from 'react-router-dom'
-import { AdminButton } from '../../styles/components/AdminButton'
export type AdminAddOrgForm = {
name: string
@@ -48,6 +57,21 @@ const AdminAddOrganization = () => {
return (
)
diff --git a/webapp/src/features/adminAddRsu/AdminAddRsu.tsx b/webapp/src/features/adminAddRsu/AdminAddRsu.tsx
index f73cf68f8..d94479df5 100644
--- a/webapp/src/features/adminAddRsu/AdminAddRsu.tsx
+++ b/webapp/src/features/adminAddRsu/AdminAddRsu.tsx
@@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react'
import { Form } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
-import { Multiselect, DropdownList } from 'react-widgets'
import {
selectPrimaryRoutes,
selectSelectedRoute,
@@ -36,8 +35,19 @@ import { RootState } from '../../store'
import toast from 'react-hot-toast'
import { useNavigate } from 'react-router-dom'
import Dialog from '@mui/material/Dialog'
-import { DialogActions, DialogContent, DialogTitle } from '@mui/material'
-import { AdminButton } from '../../styles/components/AdminButton'
+import CloseIcon from '@mui/icons-material/Close'
+import {
+ Button,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ FormControl,
+ IconButton,
+ InputLabel,
+ MenuItem,
+ OutlinedInput,
+ Select,
+} from '@mui/material'
import { ErrorMessageText } from '../../styles/components/Messages'
export type AdminAddRsuForm = {
@@ -103,232 +113,325 @@ const AdminAddRsu = () => {
return (
)
diff --git a/webapp/src/features/adminAddUser/AdminAddUser.tsx b/webapp/src/features/adminAddUser/AdminAddUser.tsx
index 5364f2454..7d70042b8 100644
--- a/webapp/src/features/adminAddUser/AdminAddUser.tsx
+++ b/webapp/src/features/adminAddUser/AdminAddUser.tsx
@@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react'
import { Form } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
-import { Multiselect, DropdownList } from 'react-widgets'
import {
selectSelectedOrganizationNames,
selectSelectedOrganizations,
@@ -28,8 +27,20 @@ import { RootState } from '../../store'
import toast from 'react-hot-toast'
import { useNavigate } from 'react-router-dom'
import Dialog from '@mui/material/Dialog'
-import { DialogActions, DialogContent, DialogTitle } from '@mui/material'
-import { AdminButton } from '../../styles/components/AdminButton'
+import CloseIcon from '@mui/icons-material/Close'
+import {
+ Button,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ FormControl,
+ IconButton,
+ InputLabel,
+ MenuItem,
+ OutlinedInput,
+ Select,
+ Typography,
+} from '@mui/material'
import { ErrorMessageText } from '../../styles/components/Messages'
const AdminAddUser = () => {
@@ -73,62 +84,86 @@ const AdminAddUser = () => {
return (
)
diff --git a/webapp/src/features/adminEditIntersection/AdminEditIntersection.tsx b/webapp/src/features/adminEditIntersection/AdminEditIntersection.tsx
index 5b744f122..9c263c944 100644
--- a/webapp/src/features/adminEditIntersection/AdminEditIntersection.tsx
+++ b/webapp/src/features/adminEditIntersection/AdminEditIntersection.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'
import { Form } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import { ErrorMessage } from '@hookform/error-message'
-import { Multiselect } from 'react-widgets'
import {
selectApiData,
selectOrganizations,
@@ -24,8 +23,22 @@ import { RootState } from '../../store'
import { AdminIntersection } from '../../models/Intersection'
import { useNavigate, useParams } from 'react-router-dom'
import { selectTableData, updateTableData } from '../adminIntersectionTab/adminIntersectionTabSlice'
-import { Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material'
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ FormControl,
+ IconButton,
+ InputLabel,
+ MenuItem,
+ OutlinedInput,
+ Select,
+ Typography,
+} from '@mui/material'
import toast from 'react-hot-toast'
+import CloseIcon from '@mui/icons-material/Close'
import { AdminButton } from '../../styles/components/AdminButton'
import { ErrorMessageText } from '../../styles/components/Messages'
@@ -128,174 +141,230 @@ const AdminEditIntersection = () => {
return (
)
}
diff --git a/webapp/src/features/adminEditNotification/__snapshots__/AdminEditNotification.test.tsx.snap b/webapp/src/features/adminEditNotification/__snapshots__/AdminEditNotification.test.tsx.snap
index d3a9a1536..261c5b8ba 100644
--- a/webapp/src/features/adminEditNotification/__snapshots__/AdminEditNotification.test.tsx.snap
+++ b/webapp/src/features/adminEditNotification/__snapshots__/AdminEditNotification.test.tsx.snap
@@ -1,105 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should take a snapshot 1`] = `
-
+
`;
diff --git a/webapp/src/features/adminEditOrganization/AdminEditOrganization.tsx b/webapp/src/features/adminEditOrganization/AdminEditOrganization.tsx
index 1b2ba84f4..ad1ed48fb 100644
--- a/webapp/src/features/adminEditOrganization/AdminEditOrganization.tsx
+++ b/webapp/src/features/adminEditOrganization/AdminEditOrganization.tsx
@@ -25,9 +25,19 @@ import {
setSelectedOrg,
} from '../adminOrganizationTab/adminOrganizationTabSlice'
import { Link, useParams, useNavigate } from 'react-router-dom'
-import { DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material'
+import {
+ Button,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ FormControl,
+ IconButton,
+ InputLabel,
+ OutlinedInput,
+ Typography,
+} from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
import Dialog from '@mui/material/Dialog'
-import { AdminButton } from '../../styles/components/AdminButton'
const AdminEditOrganization = () => {
const dispatch: ThunkDispatch = useDispatch()
@@ -86,6 +96,21 @@ const AdminEditOrganization = () => {
return (
)
diff --git a/webapp/src/features/adminEditRsu/AdminEditRsu.tsx b/webapp/src/features/adminEditRsu/AdminEditRsu.tsx
index 72636584d..07785079b 100644
--- a/webapp/src/features/adminEditRsu/AdminEditRsu.tsx
+++ b/webapp/src/features/adminEditRsu/AdminEditRsu.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'
import { Form } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import { ErrorMessage } from '@hookform/error-message'
-import { Multiselect, DropdownList } from 'react-widgets'
import {
selectApiData,
selectPrimaryRoutes,
@@ -39,9 +38,22 @@ import { RootState } from '../../store'
import { AdminRsu } from '../../models/Rsu'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { selectTableData, updateTableData } from '../adminRsuTab/adminRsuTabSlice'
-import { Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material'
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ FormControl,
+ IconButton,
+ InputLabel,
+ MenuItem,
+ OutlinedInput,
+ Select,
+ Typography,
+} from '@mui/material'
import toast from 'react-hot-toast'
-import { AdminButton } from '../../styles/components/AdminButton'
+import CloseIcon from '@mui/icons-material/Close'
import { ErrorMessageText } from '../../styles/components/Messages'
export type AdminEditRsuFormType = {
@@ -156,7 +168,22 @@ const AdminEditRsu = () => {
return (
)
diff --git a/webapp/src/features/adminEditUser/AdminEditUser.tsx b/webapp/src/features/adminEditUser/AdminEditUser.tsx
index 4fb50026f..f3b617d8b 100644
--- a/webapp/src/features/adminEditUser/AdminEditUser.tsx
+++ b/webapp/src/features/adminEditUser/AdminEditUser.tsx
@@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react'
import { Form } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
-import { Multiselect, DropdownList } from 'react-widgets'
import {
selectSelectedOrganizationNames,
selectSelectedOrganizations,
@@ -25,10 +24,22 @@ import { ThunkDispatch, AnyAction } from '@reduxjs/toolkit'
import { RootState } from '../../store'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { getAvailableUsers, selectTableData } from '../adminUserTab/adminUserTabSlice'
-import { DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material'
+import {
+ Button,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ FormControl,
+ IconButton,
+ InputLabel,
+ MenuItem,
+ OutlinedInput,
+ Select,
+ Typography,
+} from '@mui/material'
import Dialog from '@mui/material/Dialog'
import toast from 'react-hot-toast'
-import { AdminButton } from '../../styles/components/AdminButton'
+import CloseIcon from '@mui/icons-material/Close'
import { ErrorMessageText } from '../../styles/components/Messages'
const AdminEditUser = () => {
@@ -101,7 +112,22 @@ const AdminEditUser = () => {
return (
)
diff --git a/webapp/src/features/adminIntersectionTab/AdminIntersectionTab.tsx b/webapp/src/features/adminIntersectionTab/AdminIntersectionTab.tsx
index e428ee1f8..1ec609f87 100644
--- a/webapp/src/features/adminIntersectionTab/AdminIntersectionTab.tsx
+++ b/webapp/src/features/adminIntersectionTab/AdminIntersectionTab.tsx
@@ -2,8 +2,6 @@ import React from 'react'
import AdminAddIntersection from '../adminAddIntersection/AdminAddIntersection'
import AdminEditIntersection, { AdminEditIntersectionFormType } from '../adminEditIntersection/AdminEditIntersection'
import AdminTable from '../../components/AdminTable'
-import { IoRefresh } from 'react-icons/io5'
-import { AiOutlinePlusCircle } from 'react-icons/ai'
import { confirmAlert } from 'react-confirm-alert'
import { Options } from '../../components/AdminDeletionOptions'
import {
@@ -25,7 +23,8 @@ import { Action } from '@material-table/core'
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'
import { NotFound } from '../../pages/404'
import toast from 'react-hot-toast'
-import { ContainedIconButton } from '../../styles/components/ContainedIconButton'
+import { Button } from '@mui/material'
+import { AddCircleOutline, DeleteOutline, ModeEditOutline, Refresh } from '@mui/icons-material'
const getTitle = (activeTab: string) => {
if (activeTab === undefined) {
@@ -53,7 +52,13 @@ const AdminIntersectionTab = () => {
const tableActions: Action[] = [
{
- icon: 'delete',
+ icon: () => ,
+ tooltip: 'Edit Intersection',
+ position: 'row',
+ onClick: (_, rowData: AdminEditIntersectionFormType) => onEdit(rowData),
+ },
+ {
+ icon: () => ,
tooltip: 'Delete Intersection',
position: 'row',
onClick: (_, rowData: AdminEditIntersectionFormType) => {
@@ -69,15 +74,10 @@ const AdminIntersectionTab = () => {
confirmAlert(alertOptions)
},
},
- {
- icon: 'edit',
- tooltip: 'Edit Intersection',
- position: 'row',
- onClick: (_, rowData: AdminEditIntersectionFormType) => onEdit(rowData),
- },
{
tooltip: 'Remove All Selected From Organization',
icon: 'delete',
+ position: 'toolbarOnSelect',
onClick: (_, rowData: AdminEditIntersectionFormType[]) => {
const buttons = [
{ label: 'Yes', onClick: () => multiDelete(rowData) },
@@ -91,6 +91,30 @@ const AdminIntersectionTab = () => {
confirmAlert(alertOptions)
},
},
+ {
+ tooltip: 'Refresh Data',
+ icon: () => (
+ }>
+ Refresh
+
+ ),
+ position: 'toolbar',
+ onClick: () => {
+ updateTableData()
+ },
+ },
+ {
+ tooltip: 'Add New Intersection',
+ icon: () => (
+ }>
+ Add
+
+ ),
+ position: 'toolbar',
+ onClick: () => {
+ navigate('addIntersection')
+ },
+ },
]
const onEdit = (row: AdminEditIntersectionFormType) => {
@@ -116,43 +140,6 @@ const AdminIntersectionTab = () => {
return (
-
-
- {title}
- {activeTab === undefined && [
- <>
- navigate('addIntersection')}
- title="Add Intersection"
- sx={{
- float: 'right',
- margin: 2,
- mt: -0.5,
- mr: 0,
- ml: 0.5,
- }}
- >
-
-
- dispatch(updateTableData())}
- sx={{
- float: 'right',
- margin: 2,
- mt: -0.5,
- mr: 0,
- ml: 0.5,
- }}
- >
-
-
- ,
- ]}
-
-
-
-
- {title}
-
+ {activeTab !== undefined && (
- {activeTab !== undefined && (
-
navigate('.')}>
-
-
- )}
-
- {activeTab === undefined && [
- <>
-
navigate('addNotification')}
- sx={{
- float: 'right',
- margin: 2,
- mt: -0.5,
- mr: 0,
- ml: 0.5,
- }}
- >
-
-
-
updateTableData()}
- sx={{
- float: 'right',
- mt: -0.5,
- mr: 0.5,
- }}
- >
-
-
- ,
- ]}
+
navigate('.')}>
+
+
-
+ )}
{
loading === false && (
)
diff --git a/webapp/src/features/adminNotificationTab/__snapshots__/AdminNotificationTab.test.tsx.snap b/webapp/src/features/adminNotificationTab/__snapshots__/AdminNotificationTab.test.tsx.snap
index 7e58d5e57..7bb41df5a 100644
--- a/webapp/src/features/adminNotificationTab/__snapshots__/AdminNotificationTab.test.tsx.snap
+++ b/webapp/src/features/adminNotificationTab/__snapshots__/AdminNotificationTab.test.tsx.snap
@@ -5,80 +5,11 @@ exports[`should take a snapshot 1`] = `
-
-
-
-
-
-
-
-
-
-
+
@@ -173,7 +95,74 @@ exports[`should take a snapshot 1`] = `
+ >
+
+
+
@@ -328,7 +317,7 @@ exports[`should take a snapshot 1`] = `
/>
@@ -336,12 +325,12 @@ exports[`should take a snapshot 1`] = `
class="MuiInputBase-root MuiInputBase-colorPrimary MuiTablePagination-input css-mocked-MuiInputBase-root-MuiTablePagination-select"
>
diff --git a/webapp/src/features/adminOrganizationTab/AdminOrganizationTab.tsx b/webapp/src/features/adminOrganizationTab/AdminOrganizationTab.tsx
index 5f8bc102d..f83e72b80 100644
--- a/webapp/src/features/adminOrganizationTab/AdminOrganizationTab.tsx
+++ b/webapp/src/features/adminOrganizationTab/AdminOrganizationTab.tsx
@@ -5,10 +5,7 @@ import AdminOrganizationTabIntersection from '../adminOrganizationTabIntersectio
import AdminOrganizationTabUser from '../adminOrganizationTabUser/AdminOrganizationTabUser'
import AdminEditOrganization from '../adminEditOrganization/AdminEditOrganization'
import AdminOrganizationDeleteMenu from '../../components/AdminOrganizationDeleteMenu'
-import { IoChevronBackCircleOutline, IoRefresh } from 'react-icons/io5'
-import { AiOutlinePlusCircle } from 'react-icons/ai'
import Grid2 from '@mui/material/Grid2'
-import EditIcon from '@mui/icons-material/Edit'
import { DropdownList } from 'react-widgets'
import {
selectOrgData,
@@ -37,6 +34,8 @@ import toast from 'react-hot-toast'
import { changeOrganization, selectOrganizationName, setOrganizationList } from '../../generalSlices/userSlice'
import { ConditionalRenderIntersection, ConditionalRenderRsu } from '../../feature-flags'
import { ContainedIconButton } from '../../styles/components/ContainedIconButton'
+import { alpha, Button, useTheme } from '@mui/material'
+import { AddCircleOutline, EditOutlined, Refresh } from '@mui/icons-material'
const getTitle = (activeTab: string) => {
if (activeTab === undefined) {
@@ -52,10 +51,10 @@ const getTitle = (activeTab: string) => {
const AdminOrganizationTab = () => {
const dispatch: ThunkDispatch
= useDispatch()
const navigate = useNavigate()
+ const theme = useTheme()
const location = useLocation()
const activeTab = location.pathname.split('/')[4]
- const title = getTitle(activeTab)
const orgData = useSelector(selectOrgData)
const selectedOrg = useSelector(selectSelectedOrg)
@@ -135,85 +134,93 @@ const AdminOrganizationTab = () => {
}
return (
-
-
-
- {title}
- {activeTab === undefined && [
- <>
- navigate('addOrganization')}
- sx={{
- float: 'right',
- margin: 2,
- mt: -0.5,
- mr: 0,
- ml: 0.5,
- }}
- >
-
-
- refresh()}
- sx={{
- float: 'right',
- margin: 2,
- mt: -0.5,
- mr: 0,
- ml: 0.5,
- }}
- >
-
-
- ,
- ]}
-
-
-
+
-
-
- dispatch(setSelectedOrg(value))}
- />
-
-
- navigate('editOrganization/' + selectedOrg?.name)}
- sx={{
- float: 'left',
- margin: 2,
- mt: 0.5,
- mr: 0,
- ml: 0.5,
- }}
- >
-
-
+
+
+
+ dispatch(setSelectedOrg(value))}
+ />
+
+
+ navigate('editOrganization/' + selectedOrg?.name)}
+ sx={{
+ backgroundColor: 'transparent',
+ color: theme.palette.text.primary,
+ borderRadius: '2px',
+ '&:hover': {
+ backgroundColor: alpha(theme.palette.text.primary, 0.1),
+ },
+ }}
+ >
+
+
+
+
+ handleOrgDelete(selectedOrgName)}
+ selectedOrganization={selectedOrgName}
+ />
+
-
- handleOrgDelete(selectedOrgName)}
- selectedOrganization={selectedOrgName}
- />
+
+ {activeTab === undefined && [
+
+
+ ,
+
+
+ ,
+ ]}
-
+
<>
diff --git a/webapp/src/features/adminOrganizationTab/__snapshots__/AdminOrganizationTab.test.tsx.snap b/webapp/src/features/adminOrganizationTab/__snapshots__/AdminOrganizationTab.test.tsx.snap
index 0f4d46c97..2d40748f6 100644
--- a/webapp/src/features/adminOrganizationTab/__snapshots__/AdminOrganizationTab.test.tsx.snap
+++ b/webapp/src/features/adminOrganizationTab/__snapshots__/AdminOrganizationTab.test.tsx.snap
@@ -2,180 +2,183 @@
exports[`should take a snapshot 1`] = `
-
-
-
-
+
-
@@ -187,8 +190,8 @@ exports[`should take a snapshot 1`] = `
class="accordion"
>
- RSUs
+ RSUs
- Intersections
+ Intersections
- Users
+ Users
[]>([
- { title: 'ID', field: 'intersection_id', id: 0, width: '31%' },
- { title: 'Name', field: 'intersection_name', id: 1, width: '31%' },
+ { title: 'ID', field: 'intersection_id', id: 0, width: '45%' },
+ { title: 'Name', field: 'intersection_name', id: 1, width: '45%' },
])
let intersectionActions: Action
[] = [
{
- icon: 'delete',
+ icon: () => ,
tooltip: 'Remove From Organization',
position: 'row',
onClick: (event, rowData: AdminOrgIntersection) => {
@@ -84,6 +83,35 @@ const AdminOrganizationTabIntersection = (props: AdminOrganizationTabIntersectio
confirmAlert(alertOptions)
},
},
+ {
+ position: 'toolbar',
+ icon: () => (
+ {
+ dispatch(setSelectedIntersectionList(value))
+ }}
+ style={{
+ fontSize: '1rem',
+ }}
+ />
+ ),
+ onClick: () => {},
+ },
+ {
+ tooltip: 'Add Intersections To Organization',
+ position: 'toolbar',
+ icon: () => (
+ }>
+ Add Intersection
+
+ ),
+ onClick: () => intersectionMultiAdd(selectedIntersectionList),
+ },
]
useEffect(() => {
@@ -127,41 +155,15 @@ const AdminOrganizationTabIntersection = (props: AdminOrganizationTabIntersectio
return (
-
+
} aria-controls="panel1a-content" id="panel1a-header">
- {selectedOrg} Intersections
+ Intersections
{loadingGlobal === false && [
-
-
-
-
{
- dispatch(setSelectedIntersectionList(value))
- }}
- />
-
- intersectionMultiAdd(selectedIntersectionList)}
- title="Add Intersections To Organization"
- >
-
-
-
-
-
-
- Intersections
+ Intersections
{
const { selectedOrg, selectedOrgEmail, updateTableData } = props
const dispatch: ThunkDispatch
= useDispatch()
+ const theme = useTheme()
const availableRsuList = useSelector(selectAvailableRsuList)
const selectedRsuList = useSelector(selectSelectedRsuList)
@@ -54,7 +54,7 @@ const AdminOrganizationTabRsu = (props: AdminOrganizationTabRsuProps) => {
let rsuActions: Action[] = [
{
- icon: 'delete',
+ icon: () => ,
tooltip: 'Remove From Organization',
position: 'row',
onClick: (event, rowData: AdminOrgRsu) => {
@@ -86,6 +86,35 @@ const AdminOrganizationTabRsu = (props: AdminOrganizationTabRsuProps) => {
confirmAlert(alertOptions)
},
},
+ {
+ position: 'toolbar',
+ icon: () => (
+ {
+ dispatch(setSelectedRsuList(value))
+ }}
+ style={{
+ fontSize: '1rem',
+ }}
+ />
+ ),
+ onClick: () => {},
+ },
+ {
+ tooltip: 'Add RSUs To Organization',
+ position: 'toolbar',
+ icon: () => (
+ }>
+ Add RSU
+
+ ),
+ onClick: () => rsuMultiAdd(selectedRsuList),
+ },
]
useEffect(() => {
@@ -125,43 +154,14 @@ const AdminOrganizationTabRsu = (props: AdminOrganizationTabRsuProps) => {
return (
-
+
} aria-controls="panel1a-content" id="panel1a-header">
- {selectedOrg} RSUs
+ RSUs
{loadingGlobal === false && [
-
-
-
{
- dispatch(setSelectedRsuList(value))
- }}
- />
-
- rsuMultiAdd(selectedRsuList)}
- title="Add RSUs To Organization"
- >
-
-
-
-
-
- RSUs
+ RSUs
{
let userActions: Action
[] = [
{
- icon: 'delete',
+ icon: () => ,
tooltip: 'Remove From Organization',
position: 'row',
onClick: (event, rowData: AdminOrgUser) => {
@@ -129,6 +128,60 @@ const AdminOrganizationTabUser = (props: AdminOrganizationTabUserProps) => {
confirmAlert(alertOptions)
},
},
+ {
+ position: 'toolbar',
+ icon: () => (
+ dispatch(setSelectedUserList(value))}
+ style={{
+ fontSize: '1rem',
+ }}
+ />
+ ),
+ onClick: () => {},
+ },
+ {
+ position: 'toolbar',
+ icon: () => (
+ <>
+ {selectedUserList.length > 0 &&
+ selectedUserList.map((user) => (
+
+ {
+ dispatch(setSelectedUserRole({ email: user.email, role: value.role }))
+ }}
+ style={{
+ fontSize: '1rem',
+ }}
+ />
+
+ ))}
+
+ ),
+ onClick: () => {},
+ },
+ {
+ tooltip: 'Add Users To Organization',
+ position: 'toolbar',
+ icon: () => (
+ }>
+ Add User
+
+ ),
+ onClick: () => userMultiAdd(selectedUserList),
+ },
]
let userTableEditable = {
@@ -253,60 +306,15 @@ const AdminOrganizationTabUser = (props: AdminOrganizationTabUserProps) => {
return (
-
+
} aria-controls="panel1a-content" id="panel1a-header">
- {props.selectedOrg} Users
+ Users
{loadingGlobal === false && [
-
-
-
dispatch(setSelectedUserList(value))}
- />
- userMultiAdd(selectedUserList)}
- title="Add Users To Organization"
- >
-
-
-
- {selectedUserList.length > 0 && (
-
- Please select a role for:
-
- )}
- {selectedUserList.length > 0 && [
- selectedUserList.map((user) => {
- return (
-
-
{user.email}
-
{
- dispatch(setSelectedUserRole({ email: user.email, role: value.role }))
- }}
- />
-
- )
- }),
- ]}
-
-
- Users
+ Users
{
if (activeTab === undefined) {
@@ -60,7 +62,13 @@ const AdminRsuTab = () => {
const tableActions: Action
[] = [
{
- icon: 'delete',
+ icon: () => ,
+ tooltip: 'Edit RSU',
+ position: 'row',
+ onClick: (event, rowData: AdminEditRsuFormType) => onEdit(rowData),
+ },
+ {
+ icon: () => ,
tooltip: 'Delete RSU',
position: 'row',
onClick: (event, rowData: AdminEditRsuFormType) => {
@@ -72,15 +80,10 @@ const AdminRsuTab = () => {
confirmAlert(alertOptions)
},
},
- {
- icon: 'edit',
- tooltip: 'Edit RSU',
- position: 'row',
- onClick: (event, rowData: AdminEditRsuFormType) => onEdit(rowData),
- },
{
tooltip: 'Remove All Selected From Organization',
icon: 'delete',
+ position: 'toolbarOnSelect',
onClick: (event, rowData: AdminEditRsuFormType[]) => {
const buttons = [
{ label: 'Yes', onClick: () => multiDelete(rowData) },
@@ -94,6 +97,30 @@ const AdminRsuTab = () => {
confirmAlert(alertOptions)
},
},
+ {
+ tooltip: 'Refresh Data',
+ icon: () => (
+ }>
+ Refresh
+
+ ),
+ position: 'toolbar',
+ onClick: () => {
+ updateTableData()
+ },
+ },
+ {
+ tooltip: 'Add New RSU',
+ icon: () => (
+ }>
+ Add
+
+ ),
+ position: 'toolbar',
+ onClick: () => {
+ navigate('addRsu')
+ },
+ },
]
const onEdit = (row: AdminEditRsuFormType) => {
@@ -117,43 +144,6 @@ const AdminRsuTab = () => {
return (
-
-
- {title}
- {activeTab === undefined && [
- <>
- navigate('addRsu')}
- sx={{
- float: 'right',
- margin: 2,
- mt: -0.5,
- mr: 0,
- ml: 0.5,
- }}
- >
-
-
- dispatch(updateTableData())}
- sx={{
- float: 'right',
- margin: 2,
- mt: -0.5,
- mr: 0,
- ml: 0.5,
- }}
- >
-
-
- ,
- ]}
-
-
-
-
- {title}
- {activeTab === undefined && [
- <>
- navigate('addUser')}
- sx={{
- float: 'right',
- margin: 2,
- mt: -0.5,
- mr: 0,
- ml: 0.5,
- }}
- >
-
-
-
- updateTableData()}
- sx={{
- float: 'right',
- margin: 2,
- mt: -0.5,
- mr: 0,
- ml: 0.5,
- }}
- >
-
-
- ,
- ]}
-
-
@@ -151,7 +90,74 @@ exports[`should take a snapshot 1`] = `
+ >
+
+
+
diff --git a/webapp/src/features/css/multiselect.css b/webapp/src/features/css/multiselect.css
new file mode 100644
index 000000000..d42b0e6a2
--- /dev/null
+++ b/webapp/src/features/css/multiselect.css
@@ -0,0 +1,35 @@
+.rw-widget-input {
+ background-color: transparent !important;
+ color: var(--mui-palette-text-primary) !important;
+ border: 1px solid var(--mui-palette-text-primary) !important;
+}
+
+.rw-picker-btn,
+.rw-picker-caret {
+ color: var(--mui-palette-text-primary) !important;
+}
+
+.rw-multiselect-tag {
+ background-color: transparent !important;
+}
+
+.rw-popup {
+ background-color: var(--mui-palette-background-paper) !important;
+ color: var(--mui-palette-text-primary) !important;
+ border: 1px solid var(--mui-palette-text-primary) !important;
+}
+
+.rw-list-option {
+ color: var(--mui-palette-text-primary) !important;
+}
+
+.rw-list-option:hover {
+ opacity: 0.8 !important;
+ background-color: var(--mui-palette-primary-main) !important;
+ border: 1px solid var(--mui-palette-primary-main) !important;
+}
+
+.rw-state-selected {
+ background-color: var(--mui-palette-primary-main) !important;
+ color: var(--mui-palette-text-primary) !important;
+}
diff --git a/webapp/src/pages/Admin.tsx b/webapp/src/pages/Admin.tsx
index c462903d4..a0f729f5c 100644
--- a/webapp/src/pages/Admin.tsx
+++ b/webapp/src/pages/Admin.tsx
@@ -35,9 +35,8 @@ function Admin() {
) : (
-
CV Manager Admin Interface