feat(web): introduce templates

packages/web/src/components/FlowContextMenu/index.jsx

@@ -2,10 +2,8 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { useQueryClient } from '@tanstack/react-query';
 import PropTypes from 'prop-types';
-
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import Can from 'components/Can';
 import FlowFolderChangeDialog from 'components/FlowFolderChangeDialog';
@@ -13,16 +11,22 @@ import * as URLS from 'config/urls';
 import useDeleteFlow from 'hooks/useDeleteFlow';
 import useDownloadJsonAsFile from 'hooks/useDownloadJsonAsFile';
 import useDuplicateFlow from 'hooks/useDuplicateFlow';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import useExportFlow from 'hooks/useExportFlow';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useIsCurrentUserAdmin from 'hooks/useIsCurrentUserAdmin';
 
 function ContextMenu(props) {
   const { flowId, onClose, anchorEl, onDuplicateFlow, appKey } = props;
+
   const [showFlowFolderChangeDialog, setShowFlowFolderChangeDialog] =
     React.useState(false);
+
+  const navigate = useNavigate();
   const enqueueSnackbar = useEnqueueSnackbar();
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
+  const isCurrentUserAdmin = useIsCurrentUserAdmin();
   const { mutateAsync: duplicateFlow } = useDuplicateFlow(flowId);
   const { mutateAsync: deleteFlow } = useDeleteFlow(flowId);
   const { mutateAsync: exportFlow } = useExportFlow(flowId);
@@ -56,6 +60,10 @@ function ContextMenu(props) {
     formatMessage,
   ]);
 
+  const onCreateTemplate = React.useCallback(async () => {
+    navigate(URLS.ADMIN_CREATE_TEMPLATE(flowId));
+  }, [flowId]);
+
   const onFlowDelete = React.useCallback(async () => {
     await deleteFlow();
 
@@ -126,6 +134,16 @@ function ContextMenu(props) {
           )}
         </Can>
 
+        {isCurrentUserAdmin && (
+          <Can I="create" a="Flow" passThrough>
+            {(allowed) => (
+              <MenuItem disabled={!allowed} onClick={onCreateTemplate}>
+                {formatMessage('flow.createTemplateFromFlow')}
+              </MenuItem>
+            )}
+          </Can>
+        )}
+
         <Can I="update" a="Flow" passThrough>
           {(allowed) => (
             <MenuItem disabled={!allowed} onClick={onFlowFolderUpdate}>