Minor UI fixes

src/main/frontend/components/ProfileMenu.tsx

@@ -4,6 +4,7 @@ import {Dropdown, DropdownItem, DropdownMenu, DropdownTrigger} from "@nextui-org
 import {useNavigate} from "react-router-dom";
 import {ConfigEndpoint} from "Frontend/generated/endpoints";
 import Avatar from "Frontend/components/general/Avatar";
+import {CollectionElement} from "@react-types/shared";
 
 export default function ProfileMenu() {
     const auth = useAuth();
@@ -42,6 +43,7 @@ export default function ProfileMenu() {
         },
     ];
 
+    // @ts-ignore
     return (
         <Dropdown placement="bottom-end">
             <DropdownTrigger>
@@ -57,23 +59,24 @@ export default function ProfileMenu() {
                     />
                 </div>
             </DropdownTrigger>
-            <DropdownMenu>
+            <DropdownMenu disabledKeys={["username"]}>
-                {/* @ts-ignore */}
+                <DropdownItem key="username">
-                {profileMenuItems.map(({label, icon, onClick, showIf, color}) => {
+                    <p className="font-bold">Signed in as {auth.state.user?.username}</p>
+                </DropdownItem>
+                {profileMenuItems.filter(item => item.showIf !== false).map(({label, icon, onClick, color}) => {
                     return (
-                        (showIf === undefined || showIf === true) ?
+                        <DropdownItem
-                            <DropdownItem
+                            key={label}
-                                key={label}
+                            onClick={onClick}
-                                onClick={onClick}
+                            startContent={<div color={color}>{icon}</div>}
-                                startContent={<div color={color}>{icon}</div>}
+                            /* @ts-ignore */
-                                /* @ts-ignore */
+                            color={color ? color : ""}
-                                color={color ? color : ""}
+                            className={`text-${color} hover:bg-primary/20`}
-                                className={`text-${color} hover:bg-primary/20`}
+                        >
-                            >
+                            {label}
-                                {label}
+                        </DropdownItem>
-                            </DropdownItem> : null
                     );
-                })}
+                }) as unknown as CollectionElement<object>}
             </DropdownMenu>
         </Dropdown>
     );

src/main/frontend/components/administration/UserManagement.tsx

@@ -37,6 +37,10 @@ function UserManagementLayout({getConfig, formik}: any) {
 
             <div className="flex flex-row items-baseline justify-between">
                 <h2 className={"text-xl font-bold mt-8 mb-1"}>Users</h2>
+                {!autoRegisterNewUsers &&
+                    <SmallInfoField className="mb-4 text-warning" icon={Info}
+                                    message="Automatic user registration for SSO users is disabled"/>
+                }
                 <Tooltip content="Invite new user">
                     <Button isIconOnly variant="faded" onPress={inviteUserModal.onOpen}>
                         <UserPlus/>
@@ -44,10 +48,6 @@ function UserManagementLayout({getConfig, formik}: any) {
                 </Tooltip>
             </div>
             <Divider className="mb-4"/>
-            {!autoRegisterNewUsers &&
-                <SmallInfoField className="mb-4 text-warning" icon={Info}
-                                message="Automatic user registration for SSO users is disabled"/>
-            }
             <div className="grid grid-cols-300px gap-4">
                 {users.map((user) => <UserManagementCard user={user} key={user.username}/>)}
             </div>

src/main/frontend/components/wizard/Wizard.tsx

@@ -49,7 +49,7 @@ const Wizard = ({children, initialValues, onSubmit}: {
             /*// @ts-ignore*/
             validationSchema={step.props.validationSchema}
         >
-            {(formik: { values: any; isSubmitting: any; }) => (
+            {(formik) => (
                 <Form className="flex flex-col h-full">
                     <div className="w-full mb-8">
                         <Stepper activeStep={stepNumber} activeLineClassName="bg-primary"
@@ -76,7 +76,7 @@ const Wizard = ({children, initialValues, onSubmit}: {
                     </div>
                     <div className="left-8 right-8 absolute bottom-8 -z-1">
                         <div className="flex justify-between">
-                            <Button color="primary" onClick={() => previous(formik.values)} disabled={isFirstStep}>
+                            <Button color="primary" onClick={() => previous(formik.values)} isDisabled={isFirstStep}>
                                 <ArrowLeft/>
                             </Button>
                             <Button