feat: add /editor/create to create a flow

packages/web/src/config/urls.ts

@@ -3,6 +3,7 @@ export const APPS = '/apps';
 export const CONNECTIONS = '/connections';
 export const FLOWS = '/flows';
 export const EXPLORE = '/explore';
+export const EDITOR = '/editor';
 export const APP = (appKey: string) => `/app/${appKey}`;
 export const APP_PATTERN = '/app/:appKey';
 export const APP_CONNECTIONS = (appKey: string) => `/app/${appKey}/connections`;
@@ -14,5 +15,6 @@ export const APP_RECONNECT_CONNECTION_PATTERN = '/app/:appKey/connections/:conne
 export const APP_FLOWS = (appKey: string) => `/app/${appKey}/flows`;
 export const APP_FLOWS_PATTERN = '/app/:appKey/flows';
 export const NEW_APP_CONNECTION = '/apps/new';
+export const CREATE_FLOW = '/editor/create';
 export const FLOW = (flowKey: string) => `/flows/${flowKey}`;
-export const FLOW_PATTERN = '/flows/:flowKey';
+export const FLOW_PATTERN = '/flows/:flowKey';

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

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_FLOW = gql`
+  mutation createFlow {
+    createFlow {
+      id
+      name
+    }
+  }
+`;

packages/web/src/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Layout from 'components/Layout';
 import ThemeProvider from 'components/ThemeProvider';
 import IntlProvider from 'components/IntlProvider';
 import ApolloProvider from 'components/ApolloProvider';
@@ -14,11 +13,9 @@ ReactDOM.render(
     <ApolloProvider>
       <IntlProvider>
         <ThemeProvider>
-            <Router>
-              <Layout>
-                {routes}
-              </Layout>
-            </Router>
+          <Router>
+            {routes}
+          </Router>
         </ThemeProvider>
       </IntlProvider>
     </ApolloProvider>

packages/web/src/locales/en.json

@@ -29,6 +29,6 @@
   "connection.reconnect": "Reconnect",
   "connection.delete": "Delete",
   "connection.deletedMessage": "The connection has been deleted.",
-  "connection.addedAt": "added {datetime}"
-
+  "connection.addedAt": "added {datetime}",
+  "createFlow.creating": "Creating a flow..."
 }

packages/web/src/pages/Application/index.tsx

@@ -70,9 +70,9 @@ export default function Application() {
         linkProps,
         ref,
       ) {
-        return <Link ref={ref} to={URLS.APP_ADD_CONNECTION(appKey)} {...linkProps} />;
+        return <Link ref={ref} to={URLS.CREATE_FLOW} {...linkProps} />;
       }),
-    [appKey],
+    [],
   );
 
   return (

packages/web/src/pages/Editor/create.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@apollo/client';
+import CircularProgress from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+
+import * as URLS from 'config/urls';
+import useFormatMessage from 'hooks/useFormatMessage';
+import { CREATE_FLOW } from 'graphql/mutations/create-flow';
+
+import Box from '@mui/material/Box';
+
+export default function CreateFlow() {
+  const navigate = useNavigate();
+  const formatMessage = useFormatMessage();
+  const [createFlow] = useMutation(CREATE_FLOW);
+
+  React.useEffect(() => {
+    async function initiate() {
+      const response = await createFlow();
+      const flowId = response.data?.createFlow?.id;
+
+      setTimeout(() => {
+        navigate(URLS.FLOW(flowId));
+      }, 1234);
+    }
+
+    initiate();
+  }, [createFlow, navigate]);
+
+  return (
+    <Box sx={{ display: 'flex', flex: 1, height: '100vh', justifyContent: 'center', alignItems: 'center', gap: 2 }}>
+      <CircularProgress size={16} thickness={7.5} />
+
+      <Typography variant="body2">
+        {formatMessage('createFlow.creating')}
+      </Typography>
+    </Box>
+  )
+}

packages/web/src/pages/Editor/index.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import CreateFlowPage from './create';
+
+export default function Editor() {
+  return (
+    <Routes>
+      <Route path="/create" element={<CreateFlowPage />} />
+    </Routes>
+  )
+}

packages/web/src/routes.tsx

@@ -1,22 +1,26 @@
 import { Route, Routes, Navigate } from 'react-router-dom';
+import Layout from 'components/Layout';
 import Applications from 'pages/Applications';
 import Application from 'pages/Application';
 import Flows from 'pages/Flows';
 import Explore from 'pages/Explore';
+import Editor from 'pages/Editor';
 import * as URLS from 'config/urls';
 
 export default (
   <Routes>
-    <Route path={URLS.FLOWS} element={<Flows />} />
+    <Route path={URLS.FLOWS} element={<Layout><Flows /></Layout>} />
 
-    <Route path={`${URLS.APPS}/*`} element={<Applications />} />
+    <Route path={`${URLS.APPS}/*`} element={<Layout><Applications /></Layout>} />
 
-    <Route path={URLS.EXPLORE} element={<Explore />} />
+    <Route path={URLS.EXPLORE} element={<Layout><Explore /></Layout>} />
 
-    <Route path={`${URLS.APP_PATTERN}/*`} element={<Application />} />
+    <Route path={`${URLS.APP_PATTERN}/*`} element={<Layout><Application /></Layout>} />
+
+    <Route path={`${URLS.EDITOR}/*`} element={<Editor />} />
 
     <Route path="/" element={<Navigate to={URLS.FLOWS} />} />
 
-    <Route element={<div>404</div>} />
+    <Route element={<Layout><div>404</div></Layout>} />
   </Routes>
 );