feat: make flow name updatable

packages/backend/src/models/flow.ts

@@ -2,7 +2,7 @@ import Base from './base';
 import Step from './step';
 
 class Flow extends Base {
-  id!: number;
+  id!: string;
   name: string;
   userId!: number;
   active: boolean;
@@ -14,7 +14,7 @@ class Flow extends Base {
     type: 'object',
 
     properties: {
-      id: { type: 'integer' },
+      id: { type: 'string' },
       name: { type: 'string' },
       userId: { type: 'integer' },
       active: { type: 'boolean' },

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',
+  }
+});

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

@@ -1,17 +1,18 @@
 import * as React from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { useQuery } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
 import IconButton from '@mui/material/IconButton';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 
+import EditableTypography from 'components/EditableTypography';
 import Container from 'components/Container';
 import Editor from 'components/Editor';
 import useFormatMessage from 'hooks/useFormatMessage';
+import { UPDATE_FLOW } from 'graphql/mutations/update-flow';
 import { GET_FLOW } from 'graphql/queries/get-flow';
 import type { Flow } from 'types/flow';
 import * as URLS from 'config/urls';
@@ -19,9 +20,26 @@ import * as URLS from 'config/urls';
 export default function EditorLayout(): React.ReactElement {
   const { flowId } = useParams();
   const formatMessage = useFormatMessage();
-  const { data } = useQuery(GET_FLOW, { variables: { id: flowId }});
+  const [updateFlow] = useMutation(UPDATE_FLOW);
+  const { data, loading } = useQuery(GET_FLOW, { variables: { id: flowId }});
   const flow: Flow = data?.getFlow;
 
+  const onFlowNameUpdate = React.useCallback(async (name: string) => {
+    await updateFlow({
+      variables: {
+        id: flowId,
+        name,
+      },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        updateFlow: {
+          id: flow?.id,
+          name,
+        }
+      }
+    });
+  }, [flow?.id]);
+
   return (
     <>
       <Stack direction="column" height="100%">
@@ -35,9 +53,16 @@ export default function EditorLayout(): React.ReactElement {
               <ArrowBackIosNewIcon fontSize="small" />
             </IconButton>
 
-            <Typography variant="body1" noWrap sx={{ display: 'flex', flex: 1, maxWidth: '50vw' }}>
-              {flow?.name}
-            </Typography>
+            {!loading && (
+              <EditableTypography
+                variant="body1"
+                onNameSubmit={onFlowNameUpdate}
+                noWrap
+                sx={{ display: 'flex', flex: 1, maxWidth: '50vw', ml: 2 }}
+              >
+                {flow?.name}
+              </EditableTypography>
+            )}
           </Box>
 
           <Box pr={1}>
@@ -52,7 +77,7 @@ export default function EditorLayout(): React.ReactElement {
         </Stack>
 
         <Container maxWidth="md">
-          {!flow && 'not found'}
+          {!flow && !loading && 'not found'}
 
           {flow && <Editor flow={flow} />}
         </Container>

packages/web/src/graphql/mutations/update-flow.ts

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const UPDATE_FLOW = gql`
+  mutation UpdateFlow($id: String!, $name: String!) {
+    updateFlow(id: $id, name: $name) {
+      id
+      name
+    }
+  }
+`;