chore: improve action parameters UI (#6549)

https://linear.app/unleash/issue/2-2041/improve-action-parameters-ui Improves the UI of action parameters, implementing a new `ProjectActionsActionParameterAutocomplete` component that allows search. ![image](https://github.com/Unleash/unleash/assets/14320932/b87de507-2feb-433b-846f-0f3cc61721fa)
Unleash · Mar 14, 2024 · a1af0dd · a1af0dd
1 parent a2c4b8c
commit a1af0dd
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 23 deletions.
diff --git a/...onsForm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsActionItem.tsx b/...onsForm/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 = (
         <>
             <span>Action {index + 1}</span>
@@ -139,13 +135,8 @@ export const ProjectActionsActionItem = ({
                         />
                     </StyledFieldContainer>
                     <StyledFieldContainer>
-                        <GeneralSelect
+                        <ProjectActionsActionParameterAutocomplete
                             label='Environment'
-                            name='environment'
-                            options={environments.map((environment) => ({
-                                label: environment,
-                                key: environment,
-                            }))}
                             value={executionParams.environment as string}
                             onChange={(selected) =>
                                 stateChanged({
@@ -156,17 +147,12 @@ export const ProjectActionsActionItem = ({
                                     },
                                 })
                             }
-                            fullWidth
+                            options={environments}
                         />
                     </StyledFieldContainer>
                     <StyledFieldContainer>
-                        <GeneralSelect
+                        <ProjectActionsActionParameterAutocomplete
                             label='Flag name'
-                            name='flag'
-                            options={features.map((feature) => ({
-                                label: feature.name,
-                                key: feature.name,
-                            }))}
                             value={executionParams.featureName as string}
                             onChange={(selected) =>
                                 stateChanged({
@@ -177,7 +163,7 @@ export const ProjectActionsActionItem = ({
                                     },
                                 })
                             }
-                            fullWidth
+                            options={featureToggles}
                         />
                     </StyledFieldContainer>
                 </StyledItemRow>

diff --git a/...rmStepActions/ProjectActionsActionParameter/ProjectActionsActionParameterAutocomplete.tsx b/...rmStepActions/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) => (
+    <Autocomplete
+        options={options}
+        autoHighlight
+        autoSelect
+        value={value}
+        onInputChange={(_, parameter) => onChange(parameter)}
+        renderInput={(params) => (
+            <TextField {...params} size='small' label={label} />
+        )}
+    />
+);
diff --git a/...rm/ProjectActionsFormStep/ProjectActionsFormStepActions/ProjectActionsFormStepActions.tsx b/...rm/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}
                 />
             ))}