Merge pull request #4187 from Jr7468/MailPermissions

Enhance CippExchangeSettingsForm and user exchange page with mailbox permissions management

Author: JohnDuprey

src/components/CippCards/CippBannerListCard.jsx

@@ -39,8 +39,8 @@ export const CippBannerListCard = (props) => {
                 </Box>
               </Stack>
               <Stack alignItems="center" direction="row" spacing={2}>
-                <Skeleton variant="circular" width={24} height={24} />
                 <Skeleton variant="text" width={60} />
+                <Skeleton variant="circular" width={24} height={24} />
               </Stack>
             </Stack>
           </Card>
@@ -74,7 +74,16 @@ export const CippBannerListCard = (props) => {
                     direction="row"
                     flexWrap="wrap"
                     justifyContent="space-between"
-                    sx={{ p: 3 }}
+                    sx={{
+                      p: 3,
+                      ...(isCollapsible && {
+                        cursor: "pointer",
+                        "&:hover": {
+                          bgcolor: "action.hover",
+                        },
+                      }),
+                    }}
+                    onClick={isCollapsible ? () => handleExpand(item.id) : undefined}
                   >
                     {/* Left Side: cardLabelBox */}
                     <Stack direction="row" spacing={2} alignItems="center">
@@ -127,8 +136,16 @@ export const CippBannerListCard = (props) => {
                           <Typography variant="body2">{item.statusText}</Typography>
                         </Stack>
                       )}
+                      {item?.cardLabelBoxActions && (
+                        <Box onClick={(e) => e.stopPropagation()}>{item.cardLabelBoxActions}</Box>
+                      )}
                       {isCollapsible && (
-                        <IconButton onClick={() => handleExpand(item.id)}>
+                        <IconButton
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleExpand(item.id);
+                          }}
+                        >
                           <SvgIcon
                             fontSize="small"
                             sx={{
@@ -190,6 +207,7 @@ CippBannerListCard.propTypes = {
       actionButton: PropTypes.element,
       isFetching: PropTypes.bool,
       children: PropTypes.node,
+      cardLabelBoxActions: PropTypes.element,
     })
   ).isRequired,
   isCollapsible: PropTypes.bool,