fix(ui): Move audit logs into Manage menu + small screen layout fix

Author: bogdan-ts

ui/packages/platform/src/components/AuditSettingsForm/AuditSettingsForm.tsx

@@ -91,6 +91,9 @@ const useStyles = makeStyles(
         'margin-top': '20px',
       },
     },
+    formContainer: {
+      flexWrap: 'nowrap'
+    },
     textField: {
       ...styles.inputField,
     },
@@ -304,7 +307,7 @@ const AuditSettingsForm: React.FC<AuditSettingsFormProps> = (props) => {
       <form onSubmit={formik.handleSubmit}>
         <Grid container spacing={3}>
           <Grid item xs={12} sm={12} lg={12} className={classes.container}>
-            <Grid container item xs={12} sm={12} lg={8} direction={'column'}>
+            <Grid container item lg={8} direction={'column'} className={classes.formContainer}>
               {!isAuditLogsSettingsAvailable && <Typography variant="body2" className={classes.unlockNote}>
                 <Link external to="https://postgres.ai/contact/" target="_blank">
                   Become an Enterprise customer

ui/packages/platform/src/components/IndexPage/IndexPage.tsx

@@ -602,27 +602,6 @@ function OrganizationMenu(parentProps: OrganizationMenuProps) {
                 </ListItem>
               </List>
             </Collapse>
-            {orgPermissions && orgPermissions.auditLogView && (<ListItem
-              button
-              className={cn(parentProps.classes.menuSectionHeader, parentProps.classes.menuSectionHeaderCollapsible)}
-              disabled={isBlocked}
-              id="menuSettingsTitle"
-            >
-              <NavLink
-                className={parentProps.classes.menuSectionHeaderLink}
-                activeClassName={cn(parentProps.classes.menuSectionHeaderActiveLink, parentProps.classes.menuSingleSectionHeaderActiveLink)}
-                to={
-                  orgPermissions && orgPermissions.settingsOrganizationUpdate
-                    ? '/' + org + '/audit'
-                    : '#'
-                }
-              >
-                <span className={parentProps.classes.menuSectionHeaderIcon}>
-                  {icons.auditLogIcon}
-                </span>
-                Audit
-              </NavLink>
-            </ListItem>)}
             <ListItem
               button
               className={cn(parentProps.classes.menuSectionHeader, parentProps.classes.menuSectionHeaderCollapsible)}
@@ -728,14 +707,32 @@ function OrganizationMenu(parentProps: OrganizationMenuProps) {
                     </NavLink>
                   </ListItem>
                 )}
+                {orgPermissions && orgPermissions.auditLogView && (
+                  <ListItem
+                    disabled={
+                      (orgPermissions && !orgPermissions.auditLogView) || isBlocked
+                    }
+                    button
+                    className={parentProps.classes.menuItem}
+                    id="menuSettingsAuditLogs"
+                  >
+                    <NavLink
+                      className={parentProps.classes.menuItemLink}
+                      activeClassName={parentProps.classes.menuItemActiveLink}
+                      to={'/' + org + '/audit'}
+                    >
+                      Audit logs
+                    </NavLink>
+                  </ListItem>
+                )}
                 {orgData !== null && orgPermissions && Permissions.isAdmin(orgData) && orgPermissions.auditLogView && (
                   <ListItem
                     disabled={
                       (orgPermissions && !orgPermissions.auditLogView) || isBlocked
                     }
                     button
                     className={parentProps.classes.menuItem}
-                    id="menuSettingsAudit"
+                    id="menuSettingsAuditSettings"
                   >
                     <NavLink
                       className={parentProps.classes.menuItemLink}