feat(editor): add folder breadcrumb

packages/web/src/components/EditorLayout/FlowFolder.jsx

@@ -0,0 +1,34 @@
+import { Link, useParams } from 'react-router-dom';
+import CircularProgress from '@mui/material/CircularProgress';
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+
+import * as URLS from 'config/urls';
+import useFlowFolder from 'hooks/useFlowFolder';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+export default function FlowFolder(props) {
+  const { flowId } = props;
+
+  const formatMessage = useFormatMessage();
+  const { data: folder, isLoading, isError } = useFlowFolder(flowId);
+
+  const name = folder?.data?.name || formatMessage('flowFolder.uncategorized');
+  const id = folder?.data?.id || 'null';
+
+  return (
+    <Typography
+      component={Link}
+      to={URLS.FOLDER_FLOWS(id)}
+      variant="body1"
+      noWrap
+      iconColor="action"
+      color="inherit"
+    >
+      {!isLoading && name}
+      {isLoading && (
+        <CircularProgress data-test="search-for-app-loader" size={12} />
+      )}
+    </Typography>
+  );
+}