diff --git a/frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsDetails/IntegrationEventsDetails.tsx b/frontend/src/component/integrations/IntegrationEvents/IntegrationEventsDetails/IntegrationEventsDetails.tsx similarity index 100% rename from frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsDetails/IntegrationEventsDetails.tsx rename to frontend/src/component/integrations/IntegrationEvents/IntegrationEventsDetails/IntegrationEventsDetails.tsx diff --git a/frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsDetails/IntegrationEventsDetailsAccordion.tsx b/frontend/src/component/integrations/IntegrationEvents/IntegrationEventsDetails/IntegrationEventsDetailsAccordion.tsx similarity index 100% rename from frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsDetails/IntegrationEventsDetailsAccordion.tsx rename to frontend/src/component/integrations/IntegrationEvents/IntegrationEventsDetails/IntegrationEventsDetailsAccordion.tsx diff --git a/frontend/src/component/integrations/IntegrationEvents/IntegrationEventsLastEvent.tsx b/frontend/src/component/integrations/IntegrationEvents/IntegrationEventsLastEvent.tsx new file mode 100644 index 0000000000..18ec71489f --- /dev/null +++ b/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 ( + e.preventDefault()} {...props}> + + + + Last event + + + {formatDateYMDHMS( + integrationEvent.createdAt, + locationSettings?.locale, + )} + + + + + } + > + + + + ); +}; diff --git a/frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsModal.tsx b/frontend/src/component/integrations/IntegrationEvents/IntegrationEventsModal.tsx similarity index 100% rename from frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsModal.tsx rename to frontend/src/component/integrations/IntegrationEvents/IntegrationEventsModal.tsx diff --git a/frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsStateIcon.tsx b/frontend/src/component/integrations/IntegrationEvents/IntegrationEventsStateIcon.tsx similarity index 100% rename from frontend/src/component/integrations/IntegrationEventsModal/IntegrationEventsStateIcon.tsx rename to frontend/src/component/integrations/IntegrationEvents/IntegrationEventsStateIcon.tsx diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx index 70824db941..bdae52fb65 100644 --- a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx +++ b/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 }) => ({ diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx index 4c2a665c79..b98349a7a5 100644 --- a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx +++ b/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 = ({ show={} elseShow={} /> + ); diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx index 7ea48e387b..6cdcecc1a0 100644 --- a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCardMenu/IntegrationCardMenu.tsx +++ b/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;