From ad97fae883fbfd8a271af16da60f46d46cc2f941 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Thu, 11 Aug 2022 18:44:44 +0200
Subject: [PATCH] feat: show related flows for connections

---
 .../web/src/components/AppConnectionContextMenu/index.tsx  | 2 +-
 packages/web/src/components/AppFlows/index.tsx             | 7 ++++++-
 packages/web/src/config/urls.ts                            | 1 +
 packages/web/src/graphql/queries/get-flows.ts              | 4 ++--
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/AppConnectionContextMenu/index.tsx b/packages/web/src/components/AppConnectionContextMenu/index.tsx
index 3ee2873c..f9229f40 100644
--- a/packages/web/src/components/AppConnectionContextMenu/index.tsx
+++ b/packages/web/src/components/AppConnectionContextMenu/index.tsx
@@ -40,7 +40,7 @@ export default function ContextMenu(props: ContextMenuProps): React.ReactElement
     >
       <MenuItem
         component={Link}
-        to={URLS.APP_FLOWS(appKey)}
+        to={URLS.APP_FLOWS_FOR_CONNECTION(appKey, connectionId)}
         onClick={createActionHandler({ type: 'viewFlows' })}
       >
         {formatMessage('connection.viewFlows')}
diff --git a/packages/web/src/components/AppFlows/index.tsx b/packages/web/src/components/AppFlows/index.tsx
index 1b61d07d..4aceae12 100644
--- a/packages/web/src/components/AppFlows/index.tsx
+++ b/packages/web/src/components/AppFlows/index.tsx
@@ -21,8 +21,13 @@ const getLimitAndOffset = (page: number) => ({
 export default function AppFlows(props: AppFlowsProps): React.ReactElement {
   const { appKey } = props;
   const [searchParams, setSearchParams] = useSearchParams();
+  const connectionId = searchParams.get('connectionId') || null;
   const page = parseInt(searchParams.get('page') || '', 10) || 1;
-  const { data } = useQuery(GET_FLOWS, { variables: { appKey, ...getLimitAndOffset(page) }});
+  const { data } = useQuery(GET_FLOWS, { variables: {
+    appKey,
+    connectionId,
+    ...getLimitAndOffset(page)
+  }});
   const getFlows = data?.getFlows || {};
   const { pageInfo, edges } = getFlows;
 
diff --git a/packages/web/src/config/urls.ts b/packages/web/src/config/urls.ts
index 306b4db5..36273839 100644
--- a/packages/web/src/config/urls.ts
+++ b/packages/web/src/config/urls.ts
@@ -16,6 +16,7 @@ export const APP_ADD_CONNECTION_PATTERN = '/app/:appKey/connections/add';
 export const APP_RECONNECT_CONNECTION = (appKey: string, connectionId: string): string => `/app/${appKey}/connections/${connectionId}/reconnect`;
 export const APP_RECONNECT_CONNECTION_PATTERN = '/app/:appKey/connections/:connectionId/reconnect';
 export const APP_FLOWS = (appKey: string): string => `/app/${appKey}/flows`;
+export const APP_FLOWS_FOR_CONNECTION = (appKey: string, connectionId: string): string => `/app/${appKey}/flows?connectionId=${connectionId}`;
 export const APP_FLOWS_PATTERN = '/app/:appKey/flows';
 
 export const EDITOR = '/editor';
diff --git a/packages/web/src/graphql/queries/get-flows.ts b/packages/web/src/graphql/queries/get-flows.ts
index 71cd5d86..d5925296 100644
--- a/packages/web/src/graphql/queries/get-flows.ts
+++ b/packages/web/src/graphql/queries/get-flows.ts
@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const GET_FLOWS = gql`
-  query GetFlows($limit: Int!, $offset: Int!, $appKey: String, $name: String) {
-    getFlows(limit: $limit, offset: $offset, appKey: $appKey, name: $name) {
+  query GetFlows($limit: Int!, $offset: Int!, $appKey: String, $connectionId: String, $name: String) {
+    getFlows(limit: $limit, offset: $offset, appKey: $appKey, connectionId: $connectionId, name: $name) {
       pageInfo {
         currentPage
         totalPages