Redesign user interface like Okta#77
Conversation
Major UI redesign to provide a cleaner, more focused user experience: User Dashboard: - New OktaStyleDashboard with grid of app tiles (chicklets) - Search and filter applications - Star/favorite apps for quick access - One-click app launching with session creation - Shows active session status on tiles Admin Portal: - Separate AdminPortalLayout for admin functionality - Admin icon button in header opens admin in new window - Moved plugin catalog/management to admin portal - Moved repository management to admin portal - Moved template catalog to admin portal User Menu Simplified: - Only shows: My Applications, My Sessions, Shared with Me, Scheduling, Security - Removed catalog, plugins, repositories (now admin-only) All admin pages updated to use AdminPortalLayout instead of Layout for consistent admin portal experience.
User Settings Page: - New /settings route for user account management - Displays resource quota usage - Password change functionality - MFA (TOTP) setup and management - Light/dark mode preference toggle Admin Portal Updates: - Moved Scheduling to /admin/scheduling - Moved Security Settings to /admin/security - Added Scheduling and Security to admin navigation User Menu Simplified: - Replaced Scheduling and Security with Settings - Now shows: My Applications, My Sessions, Shared with Me, Settings All pages using correct layouts (Layout for user, AdminPortalLayout for admin).
JoshuaAFerguson
deleted the
claude/redesign-user-ui-01UhbehkdjGjK91SmeRPFGiS
branch
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| import { | ||
| Box, | ||
| Grid, | ||
| Card, | ||
| CardContent, | ||
| CardActionArea, | ||
| Typography, | ||
| TextField, | ||
| InputAdornment, | ||
| Chip, | ||
| Avatar, | ||
| CircularProgress, | ||
| IconButton, | ||
| Tooltip, | ||
| } from '@mui/material'; |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 7 months ago
To fix the unused import warning, remove Tooltip from the destructured import list from @mui/material on line 15. No further changes are required, as this only concerns the import statement and does not affect the component logic or functionality. The edit only applies to the code block starting at line 2 and ending at line 16 in ui/src/pages/OktaStyleDashboard.tsx.
| @@ -12,7 +12,7 @@ | ||
| Avatar, | ||
| CircularProgress, | ||
| IconButton, | ||
| Tooltip, | ||
|
|
||
| } from '@mui/material'; | ||
| import { | ||
| Search as SearchIcon, |
| @@ -0,0 +1,457 @@ | |||
| import { useState, useEffect } from 'react'; | |||
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 7 months ago
To fix the problem, simply remove useEffect from the named imports on line 1. This makes the imports cleaner and avoids confusion for future readers or maintainers, while preventing unnecessary code from being included in the bundle. Only the useState import should remain from the 'react' library on line 1. No new imports, methods, or variables are needed for this fix.
| @@ -1,4 +1,4 @@ | ||
| import { useState, useEffect } from 'react'; | ||
| import { useState } from 'react'; | ||
| import { | ||
| Box, | ||
| Typography, |
| import { | ||
| Box, | ||
| Typography, | ||
| Card, | ||
| CardContent, | ||
| Grid, | ||
| TextField, | ||
| Button, | ||
| Switch, | ||
| FormControlLabel, | ||
| Divider, | ||
| Alert, | ||
| Dialog, | ||
| DialogTitle, | ||
| DialogContent, | ||
| DialogActions, | ||
| Stepper, | ||
| Step, | ||
| StepLabel, | ||
| Paper, | ||
| Chip, | ||
| List, | ||
| ListItem, | ||
| ListItemText, | ||
| ListItemSecondaryAction, | ||
| IconButton, | ||
| } from '@mui/material'; |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 7 months ago
To fix this problem, we should remove the unused imports from the import statement on lines 2-28. Specifically, we should delete Chip, Divider, IconButton, List, ListItem, ListItemSecondaryAction, and ListItemText from the list of imported modules from @mui/material. No other code or functionality should be affected.
This change should be made only within the import statement in ui/src/pages/UserSettings.tsx, lines 2-28. No other imports need to be changed unless their usage is also absent, but only the flagged ones are guaranteed unused in this context.
| @@ -9,7 +9,6 @@ | ||
| Button, | ||
| Switch, | ||
| FormControlLabel, | ||
| Divider, | ||
| Alert, | ||
| Dialog, | ||
| DialogTitle, | ||
| @@ -18,13 +17,7 @@ | ||
| Stepper, | ||
| Step, | ||
| StepLabel, | ||
| Paper, | ||
| Chip, | ||
| List, | ||
| ListItem, | ||
| ListItemText, | ||
| ListItemSecondaryAction, | ||
| IconButton, | ||
| Paper | ||
| } from '@mui/material'; | ||
| import { | ||
| Settings as SettingsIcon, |
| import { | ||
| Settings as SettingsIcon, | ||
| Security as SecurityIcon, | ||
| Palette as PaletteIcon, | ||
| Lock as LockIcon, | ||
| VpnKey as KeyIcon, | ||
| Delete as DeleteIcon, | ||
| Check as CheckIcon, | ||
| Warning as WarningIcon, | ||
| } from '@mui/icons-material'; |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 7 months ago
To fix the problem, we should remove the unused Settings as SettingsIcon from the import statement on line 30. This only requires editing the named import block from @mui/icons-material. All other imports from this module should be left intact unless further flagged by the static analysis tool. No other code changes, method definitions, or imports are required. This change should be made directly where the imports are declared, in the file ui/src/pages/UserSettings.tsx.
| @@ -27,7 +27,6 @@ | ||
| IconButton, | ||
| } from '@mui/material'; | ||
| import { | ||
| Settings as SettingsIcon, | ||
| Security as SecurityIcon, | ||
| Palette as PaletteIcon, | ||
| Lock as LockIcon, |
| * @access user - All authenticated users | ||
| */ | ||
| export default function UserSettings() { | ||
| const { user } = useUserStore(); |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 7 months ago
To address the problem, simply remove the destructured assignment of the user variable from the line calling useUserStore. Change
const { user } = useUserStore();to
useUserStore();This ensures the hook itself still runs (in case there are internal effects), but we do not declare the unused variable. No other changes are required.
| @@ -59,7 +59,7 @@ | ||
| * @access user - All authenticated users | ||
| */ | ||
| export default function UserSettings() { | ||
| const { user } = useUserStore(); | ||
| useUserStore(); | ||
| const queryClient = useQueryClient(); | ||
| const { data: mfaMethods = [], isLoading: mfaLoading } = useMFAMethods(); | ||
|
|
| export default function UserSettings() { | ||
| const { user } = useUserStore(); | ||
| const queryClient = useQueryClient(); | ||
| const { data: mfaMethods = [], isLoading: mfaLoading } = useMFAMethods(); |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 7 months ago
To fix the unused variable error:
- Remove
isLoading: mfaLoadingfrom the destructuring assignment on line 64. - Change
{ data: mfaMethods = [], isLoading: mfaLoading } = useMFAMethods();to{ data: mfaMethods = [] } = useMFAMethods();.
No changes to imports, definitions, or other code are required, as mfaLoading is unused in this file.
Only line 64, within ui/src/pages/UserSettings.tsx, needs to be edited.
| @@ -61,7 +61,7 @@ | ||
| export default function UserSettings() { | ||
| const { user } = useUserStore(); | ||
| const queryClient = useQueryClient(); | ||
| const { data: mfaMethods = [], isLoading: mfaLoading } = useMFAMethods(); | ||
| const { data: mfaMethods = [] } = useMFAMethods(); | ||
|
|
||
| // Password change state | ||
| const [passwordForm, setPasswordForm] = useState({ |
3 participants
No description provided.