chore: project actions table (#6039)

https://linear.app/unleash/issue/2-1877/ui-add-actions-table

Implements the new project actions table.


![image](https://github.com/Unleash/unleash/assets/14320932/2ce96669-4b8f-46cd-9a87-8b14f0682694)


![image](https://github.com/Unleash/unleash/assets/14320932/d73327f2-1e1a-4d57-8ef8-1f4518c4b5d9)


![image](https://github.com/Unleash/unleash/assets/14320932/27b9ffab-4fff-4fdf-808f-b778987fa198)

frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActions.tsx

@@ -57,7 +57,12 @@ export const ProjectActions = () => {
             }
         >
             <PermissionGuard permissions={ADMIN}>
-                <ProjectActionsTable />
+                <ProjectActionsTable
+                    modalOpen={actionModalOpen}
+                    setModalOpen={setActionModalOpen}
+                    selectedAction={selectedAction}
+                    setSelectedAction={setSelectedAction}
+                />
             </PermissionGuard>
         </PageContent>
     );

frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsActionsCell.tsx

@@ -0,0 +1,64 @@
+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 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;
+}
+
+export const ProjectActionsActionsCell = ({
+    action,
+    onCreateAction,
+}: IProjectActionsActionsCellProps) => {
+    const { actions } = action;
+
+    if (actions.length === 0) {
+        if (!onCreateAction) return <TextCell>0 actions</TextCell>;
+        else return <LinkCell title='Create action' onClick={onCreateAction} />;
+    }
+
+    return (
+        <TextCell>
+            <TooltipLink
+                tooltip={
+                    <StyledActionItems>
+                        {actions.map(({ id, action, executionParams }) => (
+                            <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} actions`}
+            </TooltipLink>
+        </TextCell>
+    );
+};

frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsActorCell.tsx

@@ -0,0 +1,23 @@
+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';
+
+interface IProjectActionsActorCellProps {
+    action: IActionSet;
+    serviceAccounts: IServiceAccount[];
+}
+
+export const ProjectActionsActorCell = ({
+    action,
+    serviceAccounts,
+}: IProjectActionsActorCellProps) => {
+    const { actorId } = action;
+    const actor = serviceAccounts.find(({ id }) => id === actorId);
+
+    if (!actor) {
+        return <TextCell>No service account</TextCell>;
+    }
+
+    return <LinkCell to='/admin/service-accounts'>{actor.name}</LinkCell>;
+};

frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsDeleteDialog.tsx

@@ -0,0 +1,31 @@
+import { Dialogue } from 'component/common/Dialogue/Dialogue';
+import { IActionSet } from 'interfaces/action';
+
+interface IProjectActionsDeleteDialogProps {
+    action?: IActionSet;
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    onConfirm: (action: IActionSet) => void;
+}
+
+export const ProjectActionsDeleteDialog = ({
+    action,
+    open,
+    setOpen,
+    onConfirm,
+}: IProjectActionsDeleteDialogProps) => (
+    <Dialogue
+        title='Delete action?'
+        open={open}
+        primaryButtonText='Delete action'
+        secondaryButtonText='Cancel'
+        onClick={() => onConfirm(action!)}
+        onClose={() => {
+            setOpen(false);
+        }}
+    >
+        <p>
+            You are about to delete action: <strong>{action?.name}</strong>
+        </p>
+    </Dialogue>
+);

frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsFiltersCell.tsx

@@ -0,0 +1,43 @@
+import { styled, Typography } from '@mui/material';
+import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
+import { IActionSet } from 'interfaces/action';
+import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
+
+const StyledItem = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.smallerBody,
+}));
+
+interface IProjectActionsFiltersCellProps {
+    action: IActionSet;
+}
+
+export const ProjectActionsFiltersCell = ({
+    action,
+}: IProjectActionsFiltersCellProps) => {
+    const { payload } = action.match;
+    const filters = Object.entries(payload);
+
+    if (filters.length === 0) {
+        return <TextCell>0 filters</TextCell>;
+    }
+
+    return (
+        <TextCell>
+            <TooltipLink
+                tooltip={
+                    <>
+                        {filters.map(([parameter, value]) => (
+                            <StyledItem key={parameter}>
+                                {parameter}: {value}
+                            </StyledItem>
+                        ))}
+                    </>
+                }
+            >
+                {filters.length === 1
+                    ? '1 filter'
+                    : `${filters.length} filters`}
+            </TooltipLink>
+        </TextCell>
+    );
+};