diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionItem.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionItem.tsx
index a323463ec3b..a413e9d86ca 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionItem.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionItem.tsx
@@ -2,14 +2,13 @@ import { Alert, IconButton, Tooltip, styled } from '@mui/material';
import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
import Delete from '@mui/icons-material/Delete';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
-import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
import { ActionsActionState } from '../../useProjectActionsForm';
import { ProjectActionsFormItem } from '../ProjectActionsFormItem';
-import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useServiceAccountAccessMatrix } from 'hooks/api/getters/useServiceAccountAccessMatrix/useServiceAccountAccessMatrix';
import { useEffect, useMemo } from 'react';
import { ACTIONS } from '@server/util/constants/actions';
+import { ProjectActionsActionParameterAutocomplete } from './ProjectActionsActionParameter/ProjectActionsActionParameterAutocomplete';
const StyledItemBody = styled('div')(({ theme }) => ({
display: 'flex',
@@ -35,6 +34,8 @@ interface IProjectActionsItemProps {
stateChanged: (action: ActionsActionState) => void;
actorId: number;
onDelete: () => void;
+ featureToggles: string[];
+ environments: string[];
validated: boolean;
}
@@ -44,11 +45,12 @@ export const ProjectActionsActionItem = ({
stateChanged,
actorId,
onDelete,
+ featureToggles,
+ environments,
validated,
}: IProjectActionsItemProps) => {
const { action: actionName, executionParams, error } = action;
const projectId = useRequiredPathParam('projectId');
- const { project } = useProjectOverview(projectId);
const { permissions } = useServiceAccountAccessMatrix(
actorId,
projectId,
@@ -97,12 +99,6 @@ export const ProjectActionsActionItem = ({
}
}, [actionDefinition, executionParams]);
- const environments = project.environments.map(
- ({ environment }) => environment,
- );
-
- const { features } = useFeatureSearch({ project: `IS:${projectId}` });
-
const header = (
<>
Action {index + 1}
@@ -139,13 +135,8 @@ export const ProjectActionsActionItem = ({
/>
- ({
- label: environment,
- key: environment,
- }))}
value={executionParams.environment as string}
onChange={(selected) =>
stateChanged({
@@ -156,17 +147,12 @@ export const ProjectActionsActionItem = ({
},
})
}
- fullWidth
+ options={environments}
/>
- ({
- label: feature.name,
- key: feature.name,
- }))}
value={executionParams.featureName as string}
onChange={(selected) =>
stateChanged({
@@ -177,7 +163,7 @@ export const ProjectActionsActionItem = ({
},
})
}
- fullWidth
+ options={featureToggles}
/>
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionParameter/ProjectActionsActionParameterAutocomplete.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionParameter/ProjectActionsActionParameterAutocomplete.tsx
new file mode 100644
index 00000000000..d13be4b1f7f
--- /dev/null
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionParameter/ProjectActionsActionParameterAutocomplete.tsx
@@ -0,0 +1,26 @@
+import { Autocomplete, TextField } from '@mui/material';
+
+interface IProjectActionsActionParameterAutocompleteProps {
+ label: string;
+ value: string;
+ onChange: (value: string) => void;
+ options: string[];
+}
+
+export const ProjectActionsActionParameterAutocomplete = ({
+ label,
+ value,
+ onChange,
+ options,
+}: IProjectActionsActionParameterAutocompleteProps) => (
+ onChange(parameter)}
+ renderInput={(params) => (
+
+ )}
+ />
+);
diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsFormStepActions.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsFormStepActions.tsx
index 35e0ff54cbc..057b35fed2f 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsFormStepActions.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsModal/ProjectActionsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsFormStepActions.tsx
@@ -9,6 +9,8 @@ import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
import Add from '@mui/icons-material/Add';
import { IServiceAccount } from 'interfaces/service-account';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
+import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
const StyledDivider = styled(Divider)(({ theme }) => ({
margin: theme.spacing(2, 0),
@@ -44,6 +46,14 @@ export const ProjectActionsFormStepActions = ({
validated,
}: IProjectActionsFormStepActionsProps) => {
const projectId = useRequiredPathParam('projectId');
+ const { project } = useProjectOverview(projectId);
+ const { features } = useFeatureSearch({ project: `IS:${projectId}` });
+
+ const featureToggles = features.map(({ name }) => name).sort();
+
+ const environments = project.environments.map(
+ ({ environment }) => environment,
+ );
const addAction = (projectId: string) => {
const id = uuidv4();
@@ -112,6 +122,8 @@ export const ProjectActionsFormStepActions = ({
actions.filter((a) => a.id !== action.id),
)
}
+ featureToggles={featureToggles}
+ environments={environments}
validated={validated}
/>
))}