chore: implement table with remaining cells

Unleash · Jan 25, 2024 · ddebd18 · ddebd18
1 parent 6621d60
commit ddebd18
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 49 deletions.
diff --git a/.../Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsActionsCell.tsx b/.../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 = ({
         <TextCell>
             <TooltipLink
                 tooltip={
-                    <>
+                    <StyledActionItems>
                         {actions.map(({ id, action, executionParams }) => (
-                            <StyledItem key={id}>
-                                {action}: {JSON.stringify(executionParams)}
-                            </StyledItem>
+                            <div key={id}>
+                                <strong>{action}</strong>
+                                <StyledParameterList>
+                                    {Object.entries(executionParams).map(
+                                        ([param, value]) => (
+                                            <li key={param}>
+                                                {param}: {value}
+                                            </li>
+                                        ),
+                                    )}
+                                </StyledParameterList>
+                            </div>
                         ))}
-                    </>
+                    </StyledActionItems>
                 }
             >
-                {actions.length === 1 ? '1 action' : `${actions.length} tokens`}
+                {actions.length === 1
+                    ? '1 action'
+                    : `${actions.length} actions`}
             </TooltipLink>
         </TextCell>
     );

diff --git a/...ct/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsActorCell.tsx b/...ct/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 <TextCell>No service account</TextCell>;
     }
 
-    return <TextCell>{actor.name}</TextCell>;
+    return <LinkCell to='/admin/service-accounts'>{actor.name}</LinkCell>;
 };
diff --git a/.../Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsFiltersCell.tsx b/.../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 <TextCell>0 filters</TextCell>;
@@ -26,9 +26,9 @@ export const ProjectActionsFiltersCell = ({
             <TooltipLink
                 tooltip={
                     <>
-                        {filters.map((filter) => (
-                            <StyledItem key={filter}>
-                                {filter} = {payload[filter]}
+                        {filters.map(([parameter, value]) => (
+                            <StyledItem key={parameter}>
+                                {parameter}: {value}
                             </StyledItem>
                         ))}
                     </>

diff --git a/...roject/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTable.tsx b/...roject/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 };
                 }) => <ProjectActionsFiltersCell action={action} />,
-                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/.../Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTriggerCell.tsx b/.../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<any>;
+    to?: string;
+}>(({ theme }) => ({
+    ...wrapperStyles(theme),
+    '&:hover, &:focus': {
+        textDecoration: 'underline',
+    },
 }));
 
 interface IProjectActionsTriggerCellProps {
@@ -32,18 +47,20 @@ export const ProjectActionsTriggerCell = ({
 
     return (
         <TextCell>
-            <StyledIcon
-                src={webhooksIcon}
-                alt='Incoming webhook'
-                variant='rounded'
-            />
-            <StyledLink
-                component={RouterLink}
-                to='/integrations/incoming-webhooks'
-                underline='hover'
-            >
-                {trigger.name}
-            </StyledLink>
+            <StyledCell>
+                <StyledIcon
+                    src={webhooksIcon}
+                    alt='Incoming webhook'
+                    variant='rounded'
+                />
+                <StyledLink
+                    component={RouterLink}
+                    to='/integrations/incoming-webhooks'
+                    underline='hover'
+                >
+                    {trigger.name}
+                </StyledLink>
+            </StyledCell>
         </TextCell>
     );
 };