feat: add status in flow row

packages/web/src/components/FlowRow/index.tsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import Card from '@mui/material/Card';
 import IconButton from '@mui/material/IconButton';
 import CardActionArea from '@mui/material/CardActionArea';
+import Chip from '@mui/material/Chip';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import { DateTime } from 'luxon';
 
@@ -65,6 +66,13 @@ export default function FlowRow(props: FlowRowProps): React.ReactElement {
             </Title>
 
             <ContextMenu>
+              <Chip
+                size="small"
+                color={flow?.active ? 'success' : 'info'}
+                variant={flow?.active ? 'filled': 'outlined'}
+                label={formatMessage(flow?.active ? 'flow.published' : 'flow.draft')}
+              />
+
               <IconButton
                 size="large"
                 edge="start"

packages/web/src/components/FlowRow/style.ts

@@ -31,6 +31,10 @@ export const Title = styled(MuiStack)(() => ({
 }));
 
 export const ContextMenu = styled(MuiBox)(() => ({
+  flexDirection: 'row',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
   gridArea: 'menu',
 }));
 export const Typography = styled(MuiTypography)(() => ({

packages/web/src/graphql/queries/get-flows.ts

@@ -13,6 +13,7 @@ export const GET_FLOWS = gql`
           name
           createdAt
           updatedAt
+          active
           steps {
             iconUrl
           }

packages/web/src/locales/en.json

@@ -40,6 +40,8 @@
   "createFlow.creating": "Creating a flow...",
   "flow.active": "ON",
   "flow.inactive": "OFF",
+  "flow.published": "Published",
+  "flow.draft": "Draft",
   "flowEditor.publish": "PUBLISH",
   "flowEditor.unpublish": "UNPUBLISH",
   "flowEditor.publishFlowCannotBeUpdated": "To edit this flow, you must first unpublish it.",