mirror of
https://github.com/Unleash/unleash.git
synced 2025-06-09 01:17:06 +02:00
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">
This commit is contained in:
parent
8a20ae999f
commit
d8c5466099
@ -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>
|
||||||
|
);
|
||||||
|
};
|
@ -53,7 +53,7 @@ import { IntegrationStateSwitch } from './IntegrationStateSwitch/IntegrationStat
|
|||||||
import { capitalizeFirst } from 'utils/capitalizeFirst';
|
import { capitalizeFirst } from 'utils/capitalizeFirst';
|
||||||
import { IntegrationHowToSection } from '../IntegrationHowToSection/IntegrationHowToSection';
|
import { IntegrationHowToSection } from '../IntegrationHowToSection/IntegrationHowToSection';
|
||||||
import { useUiFlag } from 'hooks/useUiFlag';
|
import { useUiFlag } from 'hooks/useUiFlag';
|
||||||
import { IntegrationEventsModal } from '../IntegrationEventsModal/IntegrationEventsModal';
|
import { IntegrationEventsModal } from '../IntegrationEvents/IntegrationEventsModal';
|
||||||
import AccessContext from 'contexts/AccessContext';
|
import AccessContext from 'contexts/AccessContext';
|
||||||
|
|
||||||
const StyledHeader = styled('div')(({ theme }) => ({
|
const StyledHeader = styled('div')(({ theme }) => ({
|
||||||
|
@ -9,6 +9,7 @@ import { IntegrationCardMenu } from './IntegrationCardMenu/IntegrationCardMenu';
|
|||||||
import type { AddonSchema } from 'openapi';
|
import type { AddonSchema } from 'openapi';
|
||||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||||
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
||||||
|
import { IntegrationEventsLastEvent } from 'component/integrations/IntegrationEvents/IntegrationEventsLastEvent';
|
||||||
|
|
||||||
type CardVariant = 'default' | 'stacked';
|
type CardVariant = 'default' | 'stacked';
|
||||||
|
|
||||||
@ -177,6 +178,10 @@ export const IntegrationCard: VFC<IIntegrationCardProps> = ({
|
|||||||
show={<StyledOpenInNewIcon />}
|
show={<StyledOpenInNewIcon />}
|
||||||
elseShow={<ChevronRightIcon />}
|
elseShow={<ChevronRightIcon />}
|
||||||
/>
|
/>
|
||||||
|
<IntegrationEventsLastEvent
|
||||||
|
integration={addon}
|
||||||
|
sx={{ ml: 'auto' }}
|
||||||
|
/>
|
||||||
</StyledAction>
|
</StyledAction>
|
||||||
</StyledCard>
|
</StyledCard>
|
||||||
);
|
);
|
||||||
|
@ -29,7 +29,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
|
|||||||
import { useUiFlag } from 'hooks/useUiFlag';
|
import { useUiFlag } from 'hooks/useUiFlag';
|
||||||
import Visibility from '@mui/icons-material/Visibility';
|
import Visibility from '@mui/icons-material/Visibility';
|
||||||
import { PermissionHOC } from 'component/common/PermissionHOC/PermissionHOC';
|
import { PermissionHOC } from 'component/common/PermissionHOC/PermissionHOC';
|
||||||
import { IntegrationEventsModal } from 'component/integrations/IntegrationEventsModal/IntegrationEventsModal';
|
import { IntegrationEventsModal } from 'component/integrations/IntegrationEvents/IntegrationEventsModal';
|
||||||
|
|
||||||
interface IIntegrationCardMenuProps {
|
interface IIntegrationCardMenuProps {
|
||||||
addon: AddonSchema;
|
addon: AddonSchema;
|
||||||
|
Loading…
Reference in New Issue
Block a user