chore: show latest integration event on card (#7656)

https://linear.app/unleash/issue/2-2443/show-the-latest-integration-event-result-on-that-integrations-card

Shows the latest event on the integration card.

Also renames one of the folders to make its contents clearer.

<img width="1184" alt="image"
src="https://github.com/user-attachments/assets/2465d68b-d580-4fc9-9376-c6d55d0f19e0">

frontend/src/component/integrations/IntegrationEvents/IntegrationEventsLastEvent.tsx

@@ -0,0 +1,74 @@
+import type { AddonSchema } from 'openapi';
+import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
+import { useIntegrationEvents } from 'hooks/api/getters/useIntegrationEvents/useIntegrationEvents';
+import { IntegrationEventsDetails } from './IntegrationEventsDetails/IntegrationEventsDetails';
+import { Box, type BoxProps, styled } from '@mui/material';
+import { useLocationSettings } from 'hooks/useLocationSettings';
+import { formatDateYMDHMS } from 'utils/formatDate';
+import { IntegrationEventsStateIcon } from './IntegrationEventsStateIcon';
+
+const StyledTooltipLink = styled(TooltipLink)({
+    display: 'flex',
+    alignItems: 'center',
+});
+
+const StyledTitle = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    margin: theme.spacing(0, 2),
+    marginTop: theme.spacing(2),
+}));
+
+const StyledLastEventSpan = styled('span')(({ theme }) => ({
+    fontSize: theme.fontSizes.bodySize,
+}));
+
+interface IIntegrationEventsLastEventProps extends BoxProps {
+    integration?: AddonSchema;
+}
+
+export const IntegrationEventsLastEvent = ({
+    integration,
+    ...props
+}: IIntegrationEventsLastEventProps) => {
+    const { integrationEvents } = useIntegrationEvents(integration?.id, 1, {
+        refreshInterval: 5000,
+    });
+    const { locationSettings } = useLocationSettings();
+
+    if (integrationEvents.length === 0) {
+        return null;
+    }
+
+    const integrationEvent = integrationEvents[0];
+
+    return (
+        <Box onClick={(e) => e.preventDefault()} {...props}>
+            <StyledTooltipLink
+                tooltipProps={{
+                    maxWidth: 500,
+                    maxHeight: 600,
+                }}
+                tooltip={
+                    <>
+                        <StyledTitle>
+                            <StyledLastEventSpan>
+                                Last event
+                            </StyledLastEventSpan>
+                            <span>
+                                {formatDateYMDHMS(
+                                    integrationEvent.createdAt,
+                                    locationSettings?.locale,
+                                )}
+                            </span>
+                        </StyledTitle>
+                        <IntegrationEventsDetails {...integrationEvent} />
+                    </>
+                }
+            >
+                <IntegrationEventsStateIcon {...integrationEvent} />
+            </StyledTooltipLink>
+        </Box>
+    );
+};

frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx

@@ -53,7 +53,7 @@ import { IntegrationStateSwitch } from './IntegrationStateSwitch/IntegrationStat
 import { capitalizeFirst } from 'utils/capitalizeFirst';
 import { IntegrationHowToSection } from '../IntegrationHowToSection/IntegrationHowToSection';
 import { useUiFlag } from 'hooks/useUiFlag';
-import { IntegrationEventsModal } from '../IntegrationEventsModal/IntegrationEventsModal';
+import { IntegrationEventsModal } from '../IntegrationEvents/IntegrationEventsModal';
 import AccessContext from 'contexts/AccessContext';
 
 const StyledHeader = styled('div')(({ theme }) => ({

frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx

@@ -9,6 +9,7 @@ import { IntegrationCardMenu } from './IntegrationCardMenu/IntegrationCardMenu';
 import type { AddonSchema } from 'openapi';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { IntegrationEventsLastEvent } from 'component/integrations/IntegrationEvents/IntegrationEventsLastEvent';
 
 type CardVariant = 'default' | 'stacked';
 
@@ -177,6 +178,10 @@ export const IntegrationCard: VFC<IIntegrationCardProps> = ({
                     show={<StyledOpenInNewIcon />}
                     elseShow={<ChevronRightIcon />}
                 />
+                <IntegrationEventsLastEvent
+                    integration={addon}
+                    sx={{ ml: 'auto' }}
+                />
             </StyledAction>
         </StyledCard>
     );

frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx

@@ -29,7 +29,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { useUiFlag } from 'hooks/useUiFlag';
 import Visibility from '@mui/icons-material/Visibility';
 import { PermissionHOC } from 'component/common/PermissionHOC/PermissionHOC';
-import { IntegrationEventsModal } from 'component/integrations/IntegrationEventsModal/IntegrationEventsModal';
+import { IntegrationEventsModal } from 'component/integrations/IntegrationEvents/IntegrationEventsModal';
 
 interface IIntegrationCardMenuProps {
     addon: AddonSchema;