diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsActionsCell.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsActionsCell.tsx index 356bea877877..b10bbce1036c 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsActionsCell.tsx +++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsActionsCell.tsx @@ -1,13 +1,22 @@ -import { styled, Typography } from '@mui/material'; +import { styled } from '@mui/material'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import { IActionSet } from 'interfaces/action'; import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell'; import { TooltipLink } from 'component/common/TooltipLink/TooltipLink'; -const StyledItem = styled(Typography)(({ theme }) => ({ +const StyledActionItems = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), fontSize: theme.fontSizes.smallerBody, })); +const StyledParameterList = styled('ul')(({ theme }) => ({ + listStyle: 'none', + paddingLeft: theme.spacing(1), + margin: 0, +})); + interface IProjectActionsActionsCellProps { action: IActionSet; onCreateAction?: () => void; @@ -28,16 +37,27 @@ export const ProjectActionsActionsCell = ({ + {actions.map(({ id, action, executionParams }) => ( - - {action}: {JSON.stringify(executionParams)} - +
+ {action} + + {Object.entries(executionParams).map( + ([param, value]) => ( +
  • + {param}: {value} +
    • + ), + )} +     +
    ))} - +     } > - {actions.length === 1 ? '1 action' : `${actions.length} tokens`} + {actions.length === 1 + ? '1 action' + : `${actions.length} actions`}     ); diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsActorCell.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsActorCell.tsx index d8179715209b..d3427841112a 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsActorCell.tsx +++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsActorCell.tsx @@ -1,3 +1,4 @@ +import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import { IActionSet } from 'interfaces/action'; import { IServiceAccount } from 'interfaces/service-account'; @@ -11,12 +12,12 @@ export const ProjectActionsActorCell = ({ action, serviceAccounts, }: IProjectActionsActorCellProps) => { - const { sourceId } = action.match; - const actor = serviceAccounts.find(({ id }) => id === sourceId); + const { actorId } = action; + const actor = serviceAccounts.find(({ id }) => id === actorId); if (!actor) { return No service account; } - return {actor.name}; + return {actor.name}; }; diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsFiltersCell.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsFiltersCell.tsx index b135fd530944..41d8c69628a7 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsFiltersCell.tsx +++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsFiltersCell.tsx @@ -15,7 +15,7 @@ export const ProjectActionsFiltersCell = ({ action, }: IProjectActionsFiltersCellProps) => { const { payload } = action.match; - const filters = Object.keys(payload); + const filters = Object.entries(payload); if (filters.length === 0) { return 0 filters; @@ -26,9 +26,9 @@ export const ProjectActionsFiltersCell = ({ - {filters.map((filter) => ( - - {filter} = {payload[filter]} + {filters.map(([parameter, value]) => ( + + {parameter}: {value} ))} diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTable.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTable.tsx index 21db0edc5cd7..9f0208a1e80e 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTable.tsx +++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTable.tsx @@ -7,7 +7,6 @@ import { useMediaQuery } from '@mui/material'; import { useFlexLayout, useSortBy, useTable } from 'react-table'; import { sortTypes } from 'utils/sortTypes'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; -import { DateCell } from 'component/common/Table/cells/DateCell/DateCell'; import theme from 'themes/theme'; import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; import { useActions } from 'hooks/api/getters/useActions/useActions'; @@ -78,13 +77,15 @@ export const ProjectActionsTable = ({ } }; - const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); + const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm')); + const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg')); const columns = useMemo( () => [ { Header: 'Name', accessor: 'name', + minWidth: 60, }, { id: 'trigger', @@ -106,7 +107,7 @@ export const ProjectActionsTable = ({ }: { row: { original: IActionSet }; }) => , - maxWidth: 120, + maxWidth: 90, }, { id: 'actor', @@ -121,7 +122,7 @@ export const ProjectActionsTable = ({ serviceAccounts={serviceAccounts} /> ), - maxWidth: 120, + minWidth: 160, }, { id: 'actions', @@ -139,14 +140,7 @@ export const ProjectActionsTable = ({ }} /> ), - maxWidth: 120, - }, - { - Header: 'Created', - accessor: 'createdAt', - Cell: DateCell, - width: 120, - maxWidth: 120, + maxWidth: 130, }, { Header: 'Enabled', @@ -184,15 +178,15 @@ export const ProjectActionsTable = ({ }} /> ), - width: 90, + width: 50, disableSortBy: true, }, ], - [], + [actions, incomingWebhooks, serviceAccounts], ); const [initialState] = useState({ - sortBy: [{ id: 'createdAt', desc: true }], + sortBy: [{ id: 'name', desc: true }], }); const { headerGroups, rows, prepareRow, setHiddenColumns } = useTable( @@ -216,8 +210,12 @@ export const ProjectActionsTable = ({ useConditionallyHiddenColumns( [ { - condition: isSmallScreen, - columns: ['createdAt'], + condition: isMediumScreen, + columns: ['actor', 'enabled'], + }, + { + condition: isExtraSmallScreen, + columns: ['filters', 'actions'], }, ], setHiddenColumns, diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTriggerCell.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTriggerCell.tsx index ce8533f1a63c..02b3db621220 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTriggerCell.tsx +++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTriggerCell.tsx @@ -1,17 +1,32 @@ -import { Avatar, styled } from '@mui/material'; +import { Avatar, Box, Link, styled } from '@mui/material'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import { IActionSet } from 'interfaces/action'; import { IIncomingWebhook } from 'interfaces/incomingWebhook'; import webhooksIcon from 'assets/icons/webhooks.svg'; import { Link as RouterLink } from 'react-router-dom'; -import { StyledLink } from 'component/common/Table/cells/LinkCell/LinkCell.styles'; +import { ComponentType } from 'react'; +import { wrapperStyles } from 'component/common/Table/cells/LinkCell/LinkCell.styles'; + +const StyledCell = styled(Box)({ + display: 'flex', + alignItems: 'center', +}); const StyledIcon = styled(Avatar)(({ theme }) => ({ - marginRight: theme.spacing(2), borderRadius: theme.shape.borderRadius, overflow: 'hidden', - width: theme.spacing(4), - height: theme.spacing(4), + width: theme.spacing(3), + height: theme.spacing(3), +})); + +const StyledLink = styled(Link)<{ + component?: ComponentType; + to?: string; +}>(({ theme }) => ({ + ...wrapperStyles(theme), + '&:hover, &:focus': { + textDecoration: 'underline', + }, })); interface IProjectActionsTriggerCellProps { @@ -32,18 +47,20 @@ export const ProjectActionsTriggerCell = ({ return ( - - - {trigger.name} - + + + + {trigger.name} + + ); };