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