feat(web): introduce templates

packages/web/src/pages/AdminCreateTemplate/index.jsx

@@ -0,0 +1,72 @@
+import LoadingButton from '@mui/lab/LoadingButton';
+import Grid from '@mui/material/Grid';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import * as URLS from 'config/urls';
+import Container from 'components/Container';
+import Form from 'components/Form';
+import PageTitle from 'components/PageTitle';
+import TextField from 'components/TextField';
+import useFlow from 'hooks/useFlow';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useAdminCreateTemplate from 'hooks/useAdminCreateTemplate.ee';
+
+function AdminCreateTemplatePage() {
+  const formatMessage = useFormatMessage();
+  const { flowId } = useParams();
+  const navigate = useNavigate();
+
+  const { data: flow, isLoading: isTemplateLoading } = useFlow(flowId);
+
+  const { mutateAsync: createTemplate, isPending } = useAdminCreateTemplate();
+
+  const handleFormSubmit = async (data) => {
+    await createTemplate({
+      name: data.name,
+      flowId: flowId,
+    });
+
+    navigate(URLS.ADMIN_TEMPLATES);
+  };
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={10} md={9}>
+        <Grid container item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>{formatMessage('adminTemplatePage.title')}</PageTitle>
+        </Grid>
+
+        <Grid item xs={12} sx={{ pt: 5, pb: 5 }}>
+          <Stack spacing={5}></Stack>
+          {!isTemplateLoading && (
+            <Form onSubmit={handleFormSubmit} defaultValues={flow.data}>
+              <Stack direction="column" gap={2}>
+                <TextField
+                  name="name"
+                  label={formatMessage('adminCreateTemplate.titleFieldLabel')}
+                  fullWidth
+                />
+
+                <LoadingButton
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  sx={{ boxShadow: 2 }}
+                  loading={isPending}
+                  data-test="update-button"
+                >
+                  {formatMessage('adminCreateTemplate.submit')}
+                </LoadingButton>
+              </Stack>
+            </Form>
+          )}
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+export default AdminCreateTemplatePage;

packages/web/src/pages/AdminTemplates/index.jsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import Grid from '@mui/material/Grid';
+import CircularProgress from '@mui/material/CircularProgress';
+import Divider from '@mui/material/Divider';
+
+import Switch from 'components/Switch';
+import Form from 'components/Form';
+import PageTitle from 'components/PageTitle';
+import Container from 'components/Container';
+import SearchInput from 'components/SearchInput';
+import TemplateItem from 'components/TemplatesDialog/TemplateItem/TemplateItem.ee.jsx';
+import * as URLS from 'config/urls';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useAdminTemplates from 'hooks/useAdminTemplates.ee';
+import useAdminUpdateConfig from 'hooks/useAdminUpdateConfig';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
+import NoResultFound from 'components/NoResultFound';
+
+function AdminTemplates() {
+  const formatMessage = useFormatMessage();
+  const [templateName, setTemplateName] = React.useState('');
+
+  const { data: config } = useAutomatischConfig();
+
+  const { data: templates, isLoading: isTemplatesLoading } = useAdminTemplates({
+    name: templateName,
+  });
+
+  const { mutateAsync: updateConfig, isPending: isUpdateConfigPending } =
+    useAdminUpdateConfig();
+
+  const onSearchChange = React.useCallback((event) => {
+    setTemplateName(event.target.value);
+  }, []);
+
+  const handleChangeOnFeatureToggle = async (event) => {
+    const value = event.target.checked;
+
+    await updateConfig({ enableTemplates: value });
+  };
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={10} md={9}>
+        <Grid container sx={{ mb: [0, 3] }} columnSpacing={1.5} rowSpacing={3}>
+          <Grid container item xs sm alignItems="center" order={{ xs: 0 }}>
+            <PageTitle>{formatMessage('adminTemplatesPage.title')}</PageTitle>
+          </Grid>
+
+          <Grid item xs={12} sm="auto" order={{ xs: 2, sm: 1 }}>
+            <SearchInput onChange={onSearchChange} />
+          </Grid>
+        </Grid>
+
+        <Grid item xs={12}>
+          <Divider sx={{ mt: [2, 0], mb: 2 }} />
+        </Grid>
+
+        <Grid item xs={12} sx={{ mb: 3 }}>
+          <Form
+            defaultValues={{ enableTemplates: config?.data.enableTemplates }}
+            noValidate
+            automaticValidation={false}
+            render={({ formState: { errors, isDirty } }) => (
+              <Switch
+                name="enableTemplates"
+                disabled={isUpdateConfigPending}
+                onChange={handleChangeOnFeatureToggle}
+                label={formatMessage('authenticationForm.active')}
+              />
+            )}
+          />
+        </Grid>
+
+        {isTemplatesLoading && (
+          <CircularProgress
+            data-test="templates-loader"
+            sx={{ display: 'block', margin: '20px auto' }}
+          />
+        )}
+
+        <Grid item xs={12}>
+          {!isTemplatesLoading &&
+            templates?.data?.map((template) => (
+              <TemplateItem
+                key={template.name}
+                template={template}
+                to={URLS.ADMIN_UPDATE_TEMPLATE(template.id)}
+              />
+            ))}
+
+          {!isTemplatesLoading && templates?.meta.count === 0 && (
+            <NoResultFound
+              text={formatMessage('adminTemplatesPage.noResult')}
+            />
+          )}
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default AdminTemplates;

packages/web/src/pages/AdminUpdateTemplate/index.jsx

@@ -0,0 +1,67 @@
+import LoadingButton from '@mui/lab/LoadingButton';
+import Grid from '@mui/material/Grid';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+import { useParams } from 'react-router-dom';
+
+import Container from 'components/Container';
+import Form from 'components/Form';
+import PageTitle from 'components/PageTitle';
+import TextField from 'components/TextField';
+import useAdminTemplate from 'hooks/useAdminTemplate.ee';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useAdminUpdateTemplate from 'hooks/useAdminUpdateTemplate.ee';
+
+function AdminUpdateTemplatePage() {
+  const formatMessage = useFormatMessage();
+  const { templateId } = useParams();
+
+  const { data: template, isLoading: isTemplateLoading } =
+    useAdminTemplate(templateId);
+
+  const { mutateAsync: updateTemplate, isPending } =
+    useAdminUpdateTemplate(templateId);
+
+  const handleFormSubmit = async (data) => {
+    updateTemplate(data);
+  };
+
+  return (
+    <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
+      <Grid container item xs={12} sm={10} md={9}>
+        <Grid container item xs={12} sx={{ mb: [2, 5] }}>
+          <PageTitle>{formatMessage('adminTemplatePage.title')}</PageTitle>
+        </Grid>
+
+        <Grid item xs={12} sx={{ pt: 5, pb: 5 }}>
+          <Stack spacing={5}></Stack>
+          {!isTemplateLoading && (
+            <Form onSubmit={handleFormSubmit} defaultValues={template.data}>
+              <Stack direction="column" gap={2}>
+                <TextField
+                  name="name"
+                  label={formatMessage('adminUpdateTemplate.titleFieldLabel')}
+                  fullWidth
+                />
+
+                <LoadingButton
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  sx={{ boxShadow: 2 }}
+                  loading={isPending}
+                  data-test="update-button"
+                >
+                  {formatMessage('adminUpdateTemplate.submit')}
+                </LoadingButton>
+              </Stack>
+            </Form>
+          )}
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+export default AdminUpdateTemplatePage;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 import * as URLS from 'config/urls';
@@ -10,21 +10,26 @@ import Box from '@mui/material/Box';
 export default function CreateFlow() {
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
-  const { mutateAsync: createFlow, isError } = useCreateFlow();
+  const [searchParams] = useSearchParams();
+  const { mutateAsync: createFlow, isCreateFlowError } = useCreateFlow();
+
+  const navigateToEditor = (flowId) =>
+    navigate(URLS.FLOW_EDITOR(flowId), { replace: true });
 
   React.useEffect(() => {
     async function initiate() {
-      const response = await createFlow();
+      const templateId = searchParams.get('templateId');
+      const response = await createFlow({ templateId });
 
       const flowId = response.data?.id;
 
-      navigate(URLS.FLOW_EDITOR(flowId), { replace: true });
+      navigateToEditor(flowId);
     }
 
     initiate();
-  }, [createFlow, navigate]);
+  }, [createFlow, navigate, searchParams]);
 
-  if (isError) {
+  if (isCreateFlowError) {
     return null;
   }
 
@@ -40,6 +45,7 @@ export default function CreateFlow() {
       }}
     >
       <CircularProgress size={16} thickness={7.5} />
+
       <Typography variant="body2">
         {formatMessage('createFlow.creating')}
       </Typography>

packages/web/src/pages/Flows/index.jsx

@@ -1,33 +1,35 @@
+import AddIcon from '@mui/icons-material/Add';
+import UploadIcon from '@mui/icons-material/Upload';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import Pagination from '@mui/material/Pagination';
+import PaginationItem from '@mui/material/PaginationItem';
 import * as React from 'react';
 import {
   Link,
+  Route,
+  Routes,
   useNavigate,
   useSearchParams,
-  Routes,
-  Route,
 } from 'react-router-dom';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import AddIcon from '@mui/icons-material/Add';
-import UploadIcon from '@mui/icons-material/Upload';
-import CircularProgress from '@mui/material/CircularProgress';
-import Divider from '@mui/material/Divider';
-import Pagination from '@mui/material/Pagination';
-import PaginationItem from '@mui/material/PaginationItem';
 
 import Can from 'components/Can';
-import Folders from 'components/Folders';
-import FlowRow from 'components/FlowRow';
-import NoResultFound from 'components/NoResultFound';
+import FlowsButtons from 'components/FlowsButtons';
 import ConditionalIconButton from 'components/ConditionalIconButton';
 import Container from 'components/Container';
+import FlowRow from 'components/FlowRow';
+import Folders from 'components/Folders';
+import ImportFlowDialog from 'components/ImportFlowDialog';
+import NoResultFound from 'components/NoResultFound';
 import PageTitle from 'components/PageTitle';
 import SearchInput from 'components/SearchInput';
-import ImportFlowDialog from 'components/ImportFlowDialog';
-import useFormatMessage from 'hooks/useFormatMessage';
-import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
+import TemplatesDialog from 'components/TemplatesDialog/index.ee';
 import * as URLS from 'config/urls';
+import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
 import useFlows from 'hooks/useFlows';
+import useFormatMessage from 'hooks/useFormatMessage';
 
 export default function Flows() {
   const formatMessage = useFormatMessage();
@@ -96,7 +98,7 @@ export default function Flows() {
               <PageTitle>{formatMessage('flows.title')}</PageTitle>
             </Grid>
 
-            <Grid item xs={12} sm="auto" order={{ xs: 2, sm: 1 }}>
+            <Grid item xs={12} md="auto" order={{ xs: 2, md: 1 }}>
               <SearchInput onChange={onSearchChange} defaultValue={flowName} />
             </Grid>
 
@@ -109,51 +111,19 @@ export default function Flows() {
               sm="auto"
               gap={1}
               alignItems="center"
-              order={{ xs: 1, sm: 2 }}
+              order={{ xs: 1 }}
             >
-              <Can I="create" a="Flow" passThrough>
-                {(allowed) => (
-                  <ConditionalIconButton
-                    type="submit"
-                    variant="outlined"
-                    color="info"
-                    size="large"
-                    component={Link}
-                    disabled={!allowed}
-                    icon={<UploadIcon />}
-                    to={URLS.IMPORT_FLOW}
-                    data-test="import-flow-button"
-                  >
-                    {formatMessage('flows.import')}
-                  </ConditionalIconButton>
-                )}
-              </Can>
-
-              <Can I="create" a="Flow" passThrough>
-                {(allowed) => (
-                  <ConditionalIconButton
-                    type="submit"
-                    variant="contained"
-                    color="primary"
-                    size="large"
-                    component={Link}
-                    disabled={!allowed}
-                    icon={<AddIcon />}
-                    to={URLS.CREATE_FLOW}
-                    data-test="create-flow-button"
-                  >
-                    {formatMessage('flows.create')}
-                  </ConditionalIconButton>
-                )}
-              </Can>
+              <FlowsButtons />
             </Grid>
           </Grid>
 
           <Divider sx={{ mt: [2, 0], mb: 2 }} />
 
-          <Grid container columnSpacing={2}>
+          <Grid container columnSpacing={2} rowSpacing={2}>
             <Grid item xs={12} sm={3}>
               <Folders />
+
+              <Divider sx={{ mt: { xs: 2 }, display: { sm: 'none' } }} />
             </Grid>
 
             <Grid item xs={12} sm={9}>
@@ -205,6 +175,7 @@ export default function Flows() {
 
       <Routes>
         <Route path="/import" element={<ImportFlowDialog />} />
+        <Route path="/templates" element={<TemplatesDialog />} />
       </Routes>
     </>
   );