From c361b9af8d1b737231192aec863c5f31b01679fa Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Wed, 24 Aug 2022 23:22:56 +0200
Subject: [PATCH] feat: add status in flow row

---
 packages/web/src/components/FlowRow/index.tsx | 8 ++++++++
 packages/web/src/components/FlowRow/style.ts  | 4 ++++
 packages/web/src/graphql/queries/get-flows.ts | 1 +
 packages/web/src/locales/en.json              | 2 ++
 4 files changed, 15 insertions(+)

diff --git a/packages/web/src/components/FlowRow/index.tsx b/packages/web/src/components/FlowRow/index.tsx
index a33bdc19..2cf69943 100644
--- a/packages/web/src/components/FlowRow/index.tsx
+++ b/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"
diff --git a/packages/web/src/components/FlowRow/style.ts b/packages/web/src/components/FlowRow/style.ts
index e992a210..608d1a16 100644
--- a/packages/web/src/components/FlowRow/style.ts
+++ b/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)(() => ({
diff --git a/packages/web/src/graphql/queries/get-flows.ts b/packages/web/src/graphql/queries/get-flows.ts
index d5925296..04b78565 100644
--- a/packages/web/src/graphql/queries/get-flows.ts
+++ b/packages/web/src/graphql/queries/get-flows.ts
@@ -13,6 +13,7 @@ export const GET_FLOWS = gql`
           name
           createdAt
           updatedAt
+          active
           steps {
             iconUrl
           }
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index 6e7ed750..bf1ae9a0 100644
--- a/packages/web/src/locales/en.json
+++ b/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.",