feat: make flow name updatable

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

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import type { TypographyProps }  from '@mui/material/Typography';
+import EditIcon from '@mui/icons-material/Edit';
+
+import { Box, TextField } from './style';
+
+type EditableTypographyProps = TypographyProps & {
+  children: string;
+  onNameSubmit?: (value: string) => void;
+};
+
+const noop = () => null;
+
+function EditableTypography(props: EditableTypographyProps) {
+  const { children, onNameSubmit = noop, sx, ...typographyProps } = props;
+  const [editing, setEditing] = React.useState(false);
+
+  const handleClick = React.useCallback(() => {
+    setEditing(editing => !editing);
+  }, []);
+
+  const handleTextFieldClick = React.useCallback((event: React.SyntheticEvent) => {
+    event.stopPropagation();
+  }, []);
+
+  const handleTextFieldKeyDown = React.useCallback(async (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    if (event.key === 'Enter') {
+      if (target.value !== children) {
+        await onNameSubmit(target.value);
+      }
+
+      setEditing(false);
+    }
+  }, [children]);
+
+  const handleTextFieldBlur = React.useCallback(async (event: React.FocusEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+
+    if (value !== children) {
+      await onNameSubmit(value);
+    }
+
+    setEditing(false);
+  }, [onNameSubmit, children]);
+
+  let component = (
+    <Typography {...typographyProps}>
+      {children}
+    </Typography>
+  );
+
+  if (editing) {
+    component = (
+      <TextField
+        onClick={handleTextFieldClick}
+        onKeyDown={handleTextFieldKeyDown}
+        onBlur={handleTextFieldBlur}
+        variant="standard"
+        autoFocus
+        defaultValue={children}
+      />
+    );
+  };
+
+  return (
+    <Box sx={sx} onClick={handleClick} editing={editing}>
+      <EditIcon sx={{ mr: 1 }} />
+
+      {component}
+    </Box>
+  );
+}
+
+export default EditableTypography;

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

@@ -0,0 +1,25 @@
+import { styled } from '@mui/material/styles';
+import MuiBox from '@mui/material/Box';
+import MuiTextField from '@mui/material/TextField';
+import { inputClasses } from '@mui/material/Input';
+
+type BoxProps = {
+  editing?: boolean;
+}
+
+const boxShouldForwardProp = (prop: string) => !['editing'].includes(prop);
+export const Box = styled(MuiBox, { shouldForwardProp: boxShouldForwardProp })<BoxProps>`
+  display: flex;
+  flex: 1;
+  width: 300px;
+  height: 33px;
+  align-items: center;
+  ${({ editing }) => editing && `border-bottom: 1px dashed #000;`}
+`;
+
+export const TextField = styled(MuiTextField)({
+  width: '100%',
+  [`.${inputClasses.root}:before, .${inputClasses.root}:after, .${inputClasses.root}:hover`]: {
+    borderBottom: '0 !important',
+  }
+});