1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

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)
This commit is contained in:
Nuno Góis 2024-01-24 10:05:04 +00:00 committed by GitHub
parent e087f4226f
commit 5d1d428746
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 89 additions and 0 deletions

View File

@ -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;

View File

@ -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>
);
};

View File

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

View File

@ -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} />}