chore: project actions tab (#6009)

https://linear.app/unleash/issue/2-1858/add-new-actions-tab-to-project-settings

Adds the new actions tab to project settings, hidden behind the
`automatedActions` feature flag.


![image](https://github.com/Unleash/unleash/assets/14320932/594ed7e0-6e1a-464e-b649-bee368e14aea)

frontend/src/component/common/PremiumFeature/PremiumFeature.tsx

@@ -113,6 +113,11 @@ const PremiumFeatures = {
         url: 'https://docs.getunleash.io/reference/incoming-webhooks',
         label: 'Incoming Webhooks',
     },
+    actions: {
+        plan: FeaturePlan.ENTERPRISE,
+        url: 'https://docs.getunleash.io/reference/actions',
+        label: 'Actions',
+    },
 };
 
 type PremiumFeatureType = keyof typeof PremiumFeatures;

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

@@ -0,0 +1,64 @@
+import { PageContent } from 'component/common/PageContent/PageContent';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import { ADMIN } from '@server/types/permissions';
+import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { usePageTitle } from 'hooks/usePageTitle';
+import { useProjectOverviewNameOrId } from 'hooks/api/getters/useProjectOverview/useProjectOverview';
+import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
+import { PermissionGuard } from 'component/common/PermissionGuard/PermissionGuard';
+import { ProjectActionsTable } from './ProjectActionsTable/ProjectActionsTable';
+import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
+import { useTheme } from '@mui/material';
+import { Add } from '@mui/icons-material';
+import { IActionSet } from 'interfaces/action';
+import { useState } from 'react';
+
+export const ProjectActions = () => {
+    const projectId = useRequiredPathParam('projectId');
+    const projectName = useProjectOverviewNameOrId(projectId);
+    const { isEnterprise } = useUiConfig();
+    const theme = useTheme();
+
+    usePageTitle(`Project actions – ${projectName}`);
+
+    const [selectedAction, setSelectedAction] = useState<IActionSet>();
+    const [actionModalOpen, setActionModalOpen] = useState(false);
+
+    const onNewAction = () => {
+        setSelectedAction(undefined);
+        setActionModalOpen(true);
+    };
+
+    if (!isEnterprise()) {
+        return (
+            <PageContent header={<PageHeader title='Actions' />}>
+                <PremiumFeature feature='actions' />
+            </PageContent>
+        );
+    }
+
+    return (
+        <PageContent
+            header={
+                <PageHeader
+                    title='Actions'
+                    actions={
+                        <ResponsiveButton
+                            onClick={onNewAction}
+                            maxWidth={`${theme.breakpoints.values.sm}px`}
+                            Icon={Add}
+                            permission={ADMIN}
+                        >
+                            New action
+                        </ResponsiveButton>
+                    }
+                />
+            }
+        >
+            <PermissionGuard permissions={ADMIN}>
+                <ProjectActionsTable />
+            </PermissionGuard>
+        </PageContent>
+    );
+};

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

@@ -0,0 +1,3 @@
+export const ProjectActionsTable = () => {
+    return <span>TODO</span>;
+};

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

@@ -16,12 +16,16 @@ import { Settings } from './Settings/Settings';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';
 import { Box } from '@mui/material';
+import { ProjectActions } from './ProjectActions/ProjectActions';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 export const ProjectSettings = () => {
     const location = useLocation();
     const { isPro, isEnterprise } = useUiConfig();
     const navigate = useNavigate();
 
+    const actionsEnabled = useUiFlag('automatedActions');
+
     const tabs: ITab[] = [
         ...(isPro() || isEnterprise()
             ? [
@@ -62,6 +66,18 @@ export const ProjectSettings = () => {
         },
     ];
 
+    if (actionsEnabled) {
+        tabs.push({
+            id: 'actions',
+            label: 'Actions',
+            icon: isPro() ? (
+                <Box sx={{ marginLeft: 'auto' }}>
+                    <EnterpriseBadge />
+                </Box>
+            ) : undefined,
+        });
+    }
+
     const onChange = (tab: ITab) => {
         navigate(tab.id);
     };
@@ -93,6 +109,7 @@ export const ProjectSettings = () => {
                     path='default-strategy/*'
                     element={<ProjectDefaultStrategySettings />}
                 />
+                <Route path='actions/*' element={<ProjectActions />} />
                 <Route
                     path='*'
                     element={<Navigate replace to={tabs[0].id} />}