feat: add support to rename flow step

packages/web/src/components/ChooseAppAndEventSubstep/index.jsx

@@ -91,15 +91,15 @@ function ChooseAppAndEventSubstep(props) {
   const onEventChange = React.useCallback(
     (event, selectedOption) => {
       if (typeof selectedOption === 'object') {
-        // TODO: try to simplify type casting below.
+        const eventKey = selectedOption?.value;
-        const typedSelectedOption = selectedOption;
+        const eventLabel = selectedOption?.label;
-        const option = typedSelectedOption;
+
-        const eventKey = option?.value;
         if (step.key !== eventKey) {
           onChange({
             step: {
               ...step,
               key: eventKey,
+              keyLabel: eventLabel,
             },
           });
         }
@@ -111,10 +111,8 @@ function ChooseAppAndEventSubstep(props) {
   const onAppChange = React.useCallback(
     (event, selectedOption) => {
       if (typeof selectedOption === 'object') {
-        // TODO: try to simplify type casting below.
+        const appKey = selectedOption?.value;
-        const typedSelectedOption = selectedOption;
+
-        const option = typedSelectedOption;
-        const appKey = option?.value;
         if (step.appKey !== appKey) {
           onChange({
             step: {

packages/web/src/components/EditableTypography/index.jsx

@@ -7,37 +7,68 @@ import { Box, TextField } from './style';
 const noop = () => null;
 
 function EditableTypography(props) {
-  const { children, onConfirm = noop, sx, ...typographyProps } = props;
+  const {
+    children,
+    onConfirm = noop,
+    iconPosition = 'start',
+    iconSize = 'large',
+    sx,
+    disabledEditing = false,
+    prefixValue = '',
+    ...typographyProps
+  } = props;
+
   const [editing, setEditing] = React.useState(false);
+
   const handleClick = React.useCallback(() => {
+    if (disabledEditing) return;
+
     setEditing((editing) => !editing);
-  }, []);
+  }, [disabledEditing]);
+
   const handleTextFieldClick = React.useCallback((event) => {
     event.stopPropagation();
   }, []);
+
   const handleTextFieldKeyDown = React.useCallback(
     async (event) => {
       const target = event.target;
+
       if (event.key === 'Enter') {
         if (target.value !== children) {
           await onConfirm(target.value);
         }
+
+        setEditing(false);
+      }
+
+      if (event.key === 'Escape') {
         setEditing(false);
       }
     },
     [children],
   );
+
   const handleTextFieldBlur = React.useCallback(
     async (event) => {
       const value = event.target.value;
+
       if (value !== children) {
         await onConfirm(value);
       }
+
       setEditing(false);
     },
     [onConfirm, children],
   );
-  let component = <Typography {...typographyProps}>{children}</Typography>;
+
+  let component = (
+    <Typography {...typographyProps}>
+      {prefixValue}
+      {children}
+    </Typography>
+  );
+
   if (editing) {
     component = (
       <TextField
@@ -51,18 +82,34 @@ function EditableTypography(props) {
       />
     );
   }
+
   return (
-    <Box sx={sx} onClick={handleClick} editing={editing}>
+    <Box
-      <EditIcon sx={{ mr: 1 }} />
+      sx={sx}
+      onClick={handleClick}
+      editing={editing}
+      disabledEditing={disabledEditing}
+    >
+      {iconPosition === 'start' && editing === false && (
+        <EditIcon fontSize={iconSize} sx={{ mr: 1 }} />
+      )}
 
       {component}
+
+      {iconPosition === 'end' && editing === false && (
+        <EditIcon fontSize={iconSize} sx={{ ml: 1 }} />
+      )}
     </Box>
   );
 }
 
 EditableTypography.propTypes = {
   children: PropTypes.string.isRequired,
+  disabledEditing: PropTypes.bool,
+  iconPosition: PropTypes.oneOf(['start', 'end']),
+  iconSize: PropTypes.oneOf(['small', 'large']),
   onConfirm: PropTypes.func,
+  prefixValue: PropTypes.string,
   sx: PropTypes.object,
 };
 

packages/web/src/components/EditableTypography/style.js

@@ -2,17 +2,23 @@ import { styled } from '@mui/material/styles';
 import MuiBox from '@mui/material/Box';
 import MuiTextField from '@mui/material/TextField';
 import { inputClasses } from '@mui/material/Input';
-const boxShouldForwardProp = (prop) => !['editing'].includes(prop);
+
+const boxShouldForwardProp = (prop) =>
+  !['editing', 'disabledEditing'].includes(prop);
+
 export const Box = styled(MuiBox, {
   shouldForwardProp: boxShouldForwardProp,
 })`
   display: flex;
   flex: 1;
-  width: 300px;
+  min-width: 300px;
+  max-width: 90%;
   height: 33px;
   align-items: center;
+  ${({ disabledEditing }) => !disabledEditing && 'cursor: pointer;'}
   ${({ editing }) => editing && 'border-bottom: 1px dashed #000;'}
 `;
+
 export const TextField = styled(MuiTextField)({
   width: '100%',
   [`.${inputClasses.root}:before, .${inputClasses.root}:after, .${inputClasses.root}:hover`]:

packages/web/src/components/Editor/index.jsx

@@ -27,6 +27,10 @@ function Editor(props) {
         connectionId: step.connection?.id,
       };
 
+      if (step.name) {
+        payload.name = step.name;
+      }
+
       if (step.appKey) {
         payload.appKey = step.appKey;
       }

packages/web/src/components/EditorNew/EditorNew.jsx

@@ -90,6 +90,10 @@ const EditorNew = ({ flow }) => {
         connectionId: step.connection?.id,
       };
 
+      if (step.name) {
+        payload.name = step.name || step.keyLabel;
+      }
+
       if (step.appKey) {
         payload.appKey = step.appKey;
       }

packages/web/src/components/FlowStep/index.jsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
 import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
 import List from '@mui/material/List';
@@ -18,6 +19,7 @@ import { isEqual } from 'lodash';
 import { EditorContext } from 'contexts/Editor';
 import { StepExecutionsProvider } from 'contexts/StepExecutions';
 import TestSubstep from 'components/TestSubstep';
+import EditableTypography from 'components/EditableTypography';
 import FlowSubstep from 'components/FlowSubstep';
 import ChooseAppAndEventSubstep from 'components/ChooseAppAndEventSubstep';
 import ChooseConnectionSubstep from 'components/ChooseConnectionSubstep';
@@ -106,10 +108,9 @@ function generateValidationSchema(substeps) {
 }
 
 function FlowStep(props) {
-  const { collapsed, onChange, onContinue, flowId } = props;
+  const { collapsed, onChange, onContinue, flowId, step } = props;
   const editorContext = React.useContext(EditorContext);
   const contextButtonRef = React.useRef(null);
-  const step = props.step;
   const [anchorEl, setAnchorEl] = React.useState(null);
   const isTrigger = step.type === 'trigger';
   const isAction = step.type === 'action';
@@ -117,6 +118,10 @@ function FlowStep(props) {
   const [currentSubstep, setCurrentSubstep] = React.useState(0);
   const useAppsOptions = {};
 
+  const stepTypeName = isTrigger
+    ? formatMessage('flowStep.triggerType')
+    : formatMessage('flowStep.actionType');
+
   if (isTrigger) {
     useAppsOptions.onlyWithTriggers = true;
   }
@@ -183,6 +188,13 @@ function FlowStep(props) {
     }
   };
 
+  const handleStepNameChange = async (name) => {
+    await onChange({
+      ...step,
+      name,
+    });
+  };
+
   const stepValidationSchema = React.useMemo(
     () => generateValidationSchema(substeps),
     [substeps],
@@ -226,7 +238,7 @@ function FlowStep(props) {
       data-test="flow-step"
     >
       <Header collapsed={collapsed}>
-        <Stack direction="row" alignItems="center" gap={2}>
+        <Stack direction="row" alignItems="center" gap={3}>
           <AppIconWrapper>
             <AppIcon
               url={app?.iconUrl}
@@ -239,17 +251,30 @@ function FlowStep(props) {
             </AppIconStatusIconWrapper>
           </AppIconWrapper>
 
-          <div>
+          <Stack direction="column" gap={0.5} sx={{ width: '100%' }}>
-            <Typography variant="caption">
+            <Typography
-              {isTrigger
+              component={Stack}
-                ? formatMessage('flowStep.triggerType')
+              direction="row"
-                : formatMessage('flowStep.actionType')}
+              variant="stepApp"
+              alignItems="center"
+              gap={0.5}
+            >
+              <Chip label={stepTypeName} variant="stepType" size="small" />
+
+              {app?.name}
             </Typography>
 
-            <Typography variant="body2">
+            <EditableTypography
-              {step.position}. {app?.name}
+              iconPosition="end"
-            </Typography>
+              iconSize="small"
-          </div>
+              variant="body2"
+              onConfirm={handleStepNameChange}
+              prefixValue={`${step.position}. `}
+              disabledEditing={collapsed}
+            >
+              {step.name}
+            </EditableTypography>
+          </Stack>
 
           <Box display="flex" flex={1} justifyContent="end">
             {/* as there are no other actions besides "delete step", we hide the context menu. */}

packages/web/src/components/FlowSubstepTitle/style.jsx

@@ -1,9 +1,11 @@
 import { styled } from '@mui/material/styles';
 import MuiListItemButton from '@mui/material/ListItemButton';
 import MuiTypography from '@mui/material/Typography';
+
 export const ListItemButton = styled(MuiListItemButton)`
   justify-content: space-between;
 `;
+
 export const Typography = styled(MuiTypography)`
   display: flex;
   align-items: center;

packages/web/src/hooks/useUpdateStep.js

@@ -6,19 +6,20 @@ export default function useUpdateStep() {
   const queryClient = useQueryClient();
 
   const query = useMutation({
-    mutationFn: async ({ id, appKey, key, connectionId, parameters }) => {
+    mutationFn: async ({ id, appKey, key, connectionId, name, parameters }) => {
       const { data } = await api.patch(`/v1/steps/${id}`, {
         appKey,
         key,
         connectionId,
+        name,
         parameters,
       });
 
       return data;
     },
 
-    onSuccess: () => {
+    onSuccess: async () => {
-      queryClient.invalidateQueries({
+      await queryClient.invalidateQueries({
         queryKey: ['flows'],
       });
     },

packages/web/src/styles/theme.js

@@ -158,6 +158,10 @@ export const defaultTheme = createTheme({
         fontSize: referenceTheme.typography.pxToRem(16),
       },
     },
+    stepApp: {
+      fontSize: referenceTheme.typography.pxToRem(12),
+      color: '#5C5C5C',
+    },
   },
   components: {
     MuiAppBar: {
@@ -211,6 +215,23 @@ export const defaultTheme = createTheme({
         }),
       },
     },
+    MuiChip: {
+      variants: [
+        {
+          props: { variant: 'stepType' },
+          style: ({ theme }) => ({
+            color: '#001F52',
+            fontSize: theme.typography.pxToRem(12),
+            border: '1px solid',
+            borderColor: alpha(theme.palette.primary.main, 0.3),
+            bgcolor: alpha(
+              theme.palette.primary.main,
+              theme.palette.action.selectedOpacity,
+            ),
+          }),
+        },
+      ],
+    },
     MuiContainer: {
       defaultProps: {
         maxWidth: 'xl',
@@ -294,6 +315,7 @@ export const defaultTheme = createTheme({
     },
   },
 });
+
 export const mationTheme = createTheme(
   deepmerge(defaultTheme, {
     palette: {
@@ -315,4 +337,5 @@ export const mationTheme = createTheme(
     },
   }),
 );
+
 export default defaultTheme;