feat(web): introduce templates

packages/web/src/components/TemplatesDialog/TemplateItem/TemplateItem.ee.jsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import Card from '@mui/material/Card';
+import CardActionArea from '@mui/material/CardActionArea';
+import { DateTime } from 'luxon';
+import IconButton from '@mui/material/IconButton';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+
+import FlowAppIcons from 'components/FlowAppIcons';
+import AdminTemplateContextMenu from 'components/AdminTemplateContextMenu';
+import useFormatMessage from 'hooks/useFormatMessage';
+import * as URLS from 'config/urls';
+import { Apps, CardContent, ContextMenu, Title, Typography } from './style';
+import { FlowPropType } from 'propTypes/propTypes';
+import useIsCurrentUserAdmin from 'hooks/useIsCurrentUserAdmin';
+
+function TemplateItem(props) {
+  const formatMessage = useFormatMessage();
+  const contextButtonRef = React.useRef(null);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const isCurrentUserAdmin = useIsCurrentUserAdmin();
+  const { template, to } = props;
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const onContextMenuClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    setAnchorEl(contextButtonRef.current);
+  };
+
+  return (
+    <>
+      <Card sx={{ mb: 1 }} data-test="template-row">
+        <CardActionArea component={Link} to={to} data-test="card-action-area">
+          <CardContent>
+            <Apps direction="row" gap={1} sx={{ gridArea: 'apps' }}>
+              <FlowAppIcons steps={template.flowData.steps} />
+            </Apps>
+
+            <Title
+              justifyContent="center"
+              alignItems="flex-start"
+              spacing={1}
+              sx={{ gridArea: 'title' }}
+            >
+              <Typography variant="h6" noWrap>
+                {template?.name}
+              </Typography>
+            </Title>
+
+            {isCurrentUserAdmin && (
+              <ContextMenu>
+                <IconButton
+                  size="large"
+                  color="inherit"
+                  aria-label="open context menu"
+                  ref={contextButtonRef}
+                  onClick={onContextMenuClick}
+                >
+                  <MoreHorizIcon />
+                </IconButton>
+              </ContextMenu>
+            )}
+          </CardContent>
+        </CardActionArea>
+      </Card>
+
+      {anchorEl && (
+        <AdminTemplateContextMenu
+          templateId={template.id}
+          onClose={handleClose}
+          anchorEl={anchorEl}
+        />
+      )}
+    </>
+  );
+}
+
+TemplateItem.propTypes = {
+  template: FlowPropType.isRequired,
+  to: PropTypes.string.isRequired,
+};
+
+export default TemplateItem;