From 7e23d8f7fbd645f5a9ce08aac6204763a84af839 Mon Sep 17 00:00:00 2001
From: "Ricardo M." <lordrip@gmail.com>
Date: Mon, 25 Nov 2024 11:24:24 +0100
Subject: [PATCH] feat(FlowsList): Toggle all flows visibility

Currently, there's no meechanism to toggle all flows visibility.

This commit enables that functionality by adding a top `Eye` icon to
show or hide all flows.

fix: https://github.com/KaotoIO/kaoto/issues/1655
---
 .../components/InlineEdit/InlineEdit.test.tsx |  14 +++
 .../src/components/InlineEdit/InlineEdit.tsx  |   5 +
 .../Visualization/Canvas/Canvas.test.tsx      |  18 +--
 .../Canvas/Form/CanvasForm.test.tsx           |  16 ++-
 .../ContextToolbar/Flows/FlowsList.scss       |  17 ++-
 .../ContextToolbar/Flows/FlowsList.test.tsx   | 104 +++++++++++++++++-
 .../ContextToolbar/Flows/FlowsList.tsx        |  41 ++++++-
 .../ContextToolbar/Flows/FlowsMenu.scss       |  19 ++--
 .../ContextToolbar/Flows/FlowsMenu.test.tsx   |  10 +-
 .../ContextToolbar/Flows/FlowsMenu.tsx        |  32 +++---
 .../src/providers/visible-flows.provider.tsx  |   9 +-
 .../ui/src/stubs/TestProvidersWrapper.tsx     |   7 +-
 12 files changed, 224 insertions(+), 68 deletions(-)

diff --git a/packages/ui/src/components/InlineEdit/InlineEdit.test.tsx b/packages/ui/src/components/InlineEdit/InlineEdit.test.tsx
index 4af7e5858..e17b3c147 100644
--- a/packages/ui/src/components/InlineEdit/InlineEdit.test.tsx
+++ b/packages/ui/src/components/InlineEdit/InlineEdit.test.tsx
@@ -270,5 +270,19 @@ describe('InlineEdit', () => {
 
       expect(preventDefaultSpy).toHaveBeenCalled();
     });
+
+    it('should set the edit icon title', () => {
+      const wrapper = render(<InlineEdit data-testid={DATA_TESTID} editTitle="Edit" />);
+
+      const editButton = wrapper.getByTestId('inline--edit');
+      expect(editButton).toHaveAttribute('title', 'Edit');
+    });
+
+    it('should set the text title', () => {
+      const wrapper = render(<InlineEdit data-testid={DATA_TESTID} textTitle="Edit" />);
+
+      const textSpan = wrapper.getByTestId(DATA_TESTID);
+      expect(textSpan).toHaveAttribute('title', 'Edit');
+    });
   });
 });
diff --git a/packages/ui/src/components/InlineEdit/InlineEdit.tsx b/packages/ui/src/components/InlineEdit/InlineEdit.tsx
index ac82ce0e7..33c32cd79 100644
--- a/packages/ui/src/components/InlineEdit/InlineEdit.tsx
+++ b/packages/ui/src/components/InlineEdit/InlineEdit.tsx
@@ -22,6 +22,8 @@ import { IDataTestID, ValidationResult, ValidationStatus } from '../../models';
 import './InlineEdit.scss';
 
 interface IInlineEdit extends IDataTestID {
+  editTitle?: string;
+  textTitle?: string;
   value?: string;
   validator?: (value: string) => ValidationResult;
   onChange?: (value: string) => void;
@@ -116,6 +118,8 @@ export const InlineEdit: FunctionComponent<IInlineEdit> = (props) => {
       {isReadOnly ? (
         <>
           <span
+            title={props.textTitle}
+            aria-label={props.textTitle}
             data-clickable={typeof props.onClick === 'function'}
             data-testid={props['data-testid']}
             onClick={props.onClick}
@@ -124,6 +128,7 @@ export const InlineEdit: FunctionComponent<IInlineEdit> = (props) => {
           </span>
           &nbsp;&nbsp;
           <Button
+            title={props.editTitle}
             variant="plain"
             data-testid={props['data-testid'] + '--edit'}
             onClick={onEdit}
diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.test.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.test.tsx
index 2262a8223..9d4c6b2a4 100644
--- a/packages/ui/src/components/Visualization/Canvas/Canvas.test.tsx
+++ b/packages/ui/src/components/Visualization/Canvas/Canvas.test.tsx
@@ -4,7 +4,7 @@ import { CamelRouteResource, KameletResource } from '../../../models/camel';
 import { CamelRouteVisualEntity } from '../../../models/visualization/flows';
 import { ActionConfirmationModalContextProvider } from '../../../providers';
 import { CatalogModalContext } from '../../../providers/catalog-modal.provider';
-import { VisibleFLowsContextResult } from '../../../providers/visible-flows.provider';
+import { VisibleFlowsContextResult } from '../../../providers/visible-flows.provider';
 import { TestProvidersWrapper } from '../../../stubs';
 import { camelRouteJson } from '../../../stubs/camel-route';
 import { kameletJson } from '../../../stubs/kamelet-route';
@@ -26,7 +26,7 @@ describe('Canvas', () => {
   it('should render correctly', async () => {
     jest.spyOn(console, 'error').mockImplementation(() => {});
     const { Provider } = TestProvidersWrapper({
-      visibleFlowsContext: { visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult,
+      visibleFlowsContext: { visibleFlows: { ['route-8888']: true } } as unknown as VisibleFlowsContextResult,
     });
 
     let result: RenderResult | undefined;
@@ -53,7 +53,7 @@ describe('Canvas', () => {
     const { Provider } = TestProvidersWrapper({
       visibleFlowsContext: {
         visibleFlows: { ['route-8888']: true, ['route-9999']: false },
-      } as unknown as VisibleFLowsContextResult,
+      } as unknown as VisibleFlowsContextResult,
     });
 
     let result: RenderResult | undefined;
@@ -85,7 +85,7 @@ describe('Canvas', () => {
       camelResource,
       visibleFlowsContext: {
         visibleFlows: { ['route-8888']: true },
-      } as unknown as VisibleFLowsContextResult,
+      } as unknown as VisibleFlowsContextResult,
     });
 
     let result: RenderResult | undefined;
@@ -146,7 +146,7 @@ describe('Canvas', () => {
       camelResource: kameletResource,
       visibleFlowsContext: {
         visibleFlows: { ['user-source']: true },
-      } as unknown as VisibleFLowsContextResult,
+      } as unknown as VisibleFlowsContextResult,
     });
 
     let result: RenderResult | undefined;
@@ -200,7 +200,7 @@ describe('Canvas', () => {
   describe('Catalog button', () => {
     it('should be present if `CatalogModalContext` is provided', async () => {
       const { Provider } = TestProvidersWrapper({
-        visibleFlowsContext: { visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult,
+        visibleFlowsContext: { visibleFlows: { ['route-8888']: true } } as unknown as VisibleFlowsContextResult,
       });
 
       let result: RenderResult | undefined;
@@ -227,7 +227,7 @@ describe('Canvas', () => {
 
     it('should NOT be present if `CatalogModalContext` is NOT provided', async () => {
       const { Provider } = TestProvidersWrapper({
-        visibleFlowsContext: { visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult,
+        visibleFlowsContext: { visibleFlows: { ['route-8888']: true } } as unknown as VisibleFlowsContextResult,
       });
 
       let result: RenderResult | undefined;
@@ -254,7 +254,7 @@ describe('Canvas', () => {
   describe('Empty state', () => {
     it('should render empty state when there is no visual entity', async () => {
       const { Provider } = TestProvidersWrapper({
-        visibleFlowsContext: { visibleFlows: {} } as unknown as VisibleFLowsContextResult,
+        visibleFlowsContext: { visibleFlows: {} } as unknown as VisibleFlowsContextResult,
       });
 
       let result: RenderResult | undefined;
@@ -279,7 +279,7 @@ describe('Canvas', () => {
 
     it('should render empty state when there is no visible flows', async () => {
       const { Provider } = TestProvidersWrapper({
-        visibleFlowsContext: { visibleFlows: { ['route-8888']: false } } as unknown as VisibleFLowsContextResult,
+        visibleFlowsContext: { visibleFlows: { ['route-8888']: false } } as unknown as VisibleFlowsContextResult,
       });
       let result: RenderResult | undefined;
 
diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx
index e7c1e79cb..81f73fcc2 100644
--- a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx
+++ b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx
@@ -151,7 +151,9 @@ describe('CanvasForm', () => {
 
     render(
       <EntitiesProvider>
-        <VisibleFlowsContext.Provider value={{ visibleFlows: { [flowId]: true }, visualFlowsApi }}>
+        <VisibleFlowsContext.Provider
+          value={{ visibleFlows: { [flowId]: true }, allFlowsVisible: true, visualFlowsApi }}
+        >
           <CanvasFormTabsContext.Provider
             value={{
               selectedTab: 'All',
@@ -186,7 +188,9 @@ describe('CanvasForm', () => {
 
     render(
       <EntitiesProvider>
-        <VisibleFlowsContext.Provider value={{ visibleFlows: { [flowId]: true }, visualFlowsApi }}>
+        <VisibleFlowsContext.Provider
+          value={{ visibleFlows: { [flowId]: true }, allFlowsVisible: true, visualFlowsApi }}
+        >
           <CanvasFormTabsContext.Provider
             value={{
               selectedTab: 'All',
@@ -222,7 +226,9 @@ describe('CanvasForm', () => {
 
     render(
       <EntitiesProvider>
-        <VisibleFlowsContext.Provider value={{ visibleFlows: { [flowId]: true }, visualFlowsApi }}>
+        <VisibleFlowsContext.Provider
+          value={{ visibleFlows: { [flowId]: true }, allFlowsVisible: true, visualFlowsApi }}
+        >
           <CanvasFormTabsContext.Provider
             value={{
               selectedTab: 'All',
@@ -260,7 +266,9 @@ describe('CanvasForm', () => {
 
     render(
       <EntitiesProvider>
-        <VisibleFlowsContext.Provider value={{ visibleFlows: { [flowId]: true }, visualFlowsApi }}>
+        <VisibleFlowsContext.Provider
+          value={{ visibleFlows: { [flowId]: true }, allFlowsVisible: true, visualFlowsApi }}
+        >
           <CanvasFormTabsProvider>
             <CanvasForm selectedNode={selectedNode} />
           </CanvasFormTabsProvider>
diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.scss b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.scss
index b1d5f77a9..c7b50bcbd 100644
--- a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.scss
+++ b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.scss
@@ -1,9 +1,14 @@
-/* This is to make the last two columns (Edit and Delete) to be the same width */
+table.flows-list-table {
+  & thead tr {
+    vertical-align: middle;
+  }
 
-/* Select the last two td elements from each tr */
+  /* This is to make the last two columns (Edit and Delete) to be the same width */
 
-table.flows-list-table tr td:last-child,
-table.flows-list-table tr td:nth-last-child(2) {
-  width: 1%;
-  white-space: nowrap;
+  /* Select the last two td elements from each tr */
+  & tr td:last-child,
+  & tr td:nth-last-child(2) {
+    width: 1%;
+    white-space: nowrap;
+  }
 }
diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx
index 33782fb4d..0bed73e62 100644
--- a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx
+++ b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.test.tsx
@@ -6,7 +6,7 @@ import {
   ActionConfirmationModalContext,
   ActionConfirmationModalContextProvider,
 } from '../../../../providers/action-confirmation-modal.provider';
-import { VisibleFLowsContextResult } from '../../../../providers/visible-flows.provider';
+import { VisibleFlowsContextResult } from '../../../../providers/visible-flows.provider';
 import { TestProvidersWrapper } from '../../../../stubs';
 import { FlowsList } from './FlowsList';
 
@@ -68,7 +68,8 @@ describe('FlowsList.tsx', () => {
       resId = id;
     });
 
-    const visibleFlowsContext: VisibleFLowsContextResult = {
+    const visibleFlowsContext: VisibleFlowsContextResult = {
+      allFlowsVisible: false,
       visibleFlows: { ['route-1234']: true, ['routeConfiguration-1234']: false },
       visualFlowsApi,
     };
@@ -183,7 +184,8 @@ describe('FlowsList.tsx', () => {
       resId = id;
     });
 
-    const visibleFlowsContext: VisibleFLowsContextResult = {
+    const visibleFlowsContext: VisibleFlowsContextResult = {
+      allFlowsVisible: false,
       visibleFlows: { ['route-1234']: true, ['routeConfiguration-1234']: false },
       visualFlowsApi,
     };
@@ -205,7 +207,8 @@ describe('FlowsList.tsx', () => {
   });
 
   it('should render the appropriate Eye icon', async () => {
-    const visibleFlowsContext: VisibleFLowsContextResult = {
+    const visibleFlowsContext: VisibleFlowsContextResult = {
+      allFlowsVisible: false,
       visibleFlows: { ['route-1234']: true, ['routeConfiguration-1234']: false },
       visualFlowsApi: new VisualFlowsApi(jest.fn),
     };
@@ -229,7 +232,8 @@ describe('FlowsList.tsx', () => {
     const visualFlowsApi = new VisualFlowsApi(jest.fn);
     const renameSpy = jest.spyOn(visualFlowsApi, 'renameFlow');
 
-    const visibleFlowsContext: VisibleFLowsContextResult = {
+    const visibleFlowsContext: VisibleFlowsContextResult = {
+      allFlowsVisible: false,
       visibleFlows: { ['route-1234']: true, ['routeConfiguration-1234']: false },
       visualFlowsApi,
     };
@@ -264,4 +268,94 @@ describe('FlowsList.tsx', () => {
     expect(camelResource.getVisualEntities()[0].id).toEqual('new-name');
     expect(updateEntitiesFromCamelResourceSpy).toHaveBeenCalledTimes(1);
   });
+
+  it('should show all flows when not all flows are visible', async () => {
+    const visualFlowsApi = new VisualFlowsApi(jest.fn);
+    const showAllFlowsSpy = jest.spyOn(visualFlowsApi, 'showAllFlows');
+
+    const visibleFlowsContext: VisibleFlowsContextResult = {
+      allFlowsVisible: false,
+      visibleFlows: { ['route-1234']: true, ['routeConfiguration-1234']: false },
+      visualFlowsApi,
+    };
+
+    const { Provider } = TestProvidersWrapper({ camelResource, visibleFlowsContext });
+    const wrapper = render(
+      <Provider>
+        <FlowsList />
+      </Provider>,
+    );
+
+    const toggleAllFlows = await wrapper.findByTestId('toggle-btn-all-flows');
+
+    act(() => {
+      fireEvent.click(toggleAllFlows);
+    });
+
+    expect(showAllFlowsSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should hide all flows when all flows are visible', async () => {
+    const visualFlowsApi = new VisualFlowsApi(jest.fn);
+    const hideAllFlowsSpy = jest.spyOn(visualFlowsApi, 'hideAllFlows');
+
+    const visibleFlowsContext: VisibleFlowsContextResult = {
+      allFlowsVisible: true,
+      visibleFlows: { ['route-1234']: true, ['routeConfiguration-1234']: true },
+      visualFlowsApi,
+    };
+
+    const { Provider } = TestProvidersWrapper({ camelResource, visibleFlowsContext });
+    const wrapper = render(
+      <Provider>
+        <FlowsList />
+      </Provider>,
+    );
+
+    const toggleAllFlows = await wrapper.findByTestId('toggle-btn-all-flows');
+
+    act(() => {
+      fireEvent.click(toggleAllFlows);
+    });
+
+    expect(hideAllFlowsSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should set the appropriate title when all flows are visible', async () => {
+    const visibleFlowsContext: VisibleFlowsContextResult = {
+      allFlowsVisible: true,
+      visibleFlows: { ['route-1234']: true, ['routeConfiguration-1234']: true },
+      visualFlowsApi: new VisualFlowsApi(jest.fn),
+    };
+
+    const { Provider } = TestProvidersWrapper({ camelResource, visibleFlowsContext });
+    const wrapper = render(
+      <Provider>
+        <FlowsList />
+      </Provider>,
+    );
+
+    const toggleAllFlows = await wrapper.findByTestId('toggle-btn-all-flows');
+
+    expect(toggleAllFlows).toHaveAttribute('title', 'Hide all flows');
+  });
+
+  it('should set the appropriate title when some flows are visible', async () => {
+    const visibleFlowsContext: VisibleFlowsContextResult = {
+      allFlowsVisible: false,
+      visibleFlows: { ['route-1234']: true, ['routeConfiguration-1234']: false },
+      visualFlowsApi: new VisualFlowsApi(jest.fn),
+    };
+
+    const { Provider } = TestProvidersWrapper({ camelResource, visibleFlowsContext });
+    const wrapper = render(
+      <Provider>
+        <FlowsList />
+      </Provider>,
+    );
+
+    const toggleAllFlows = await wrapper.findByTestId('toggle-btn-all-flows');
+
+    expect(toggleAllFlows).toHaveAttribute('title', 'Show all flows');
+  });
 });
diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx
index 7384fcda3..ca7738bc6 100644
--- a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx
+++ b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsList.tsx
@@ -1,7 +1,7 @@
 import { Button, Icon } from '@patternfly/react-core';
 import { EyeIcon, EyeSlashIcon, TrashIcon } from '@patternfly/react-icons';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
-import { FunctionComponent, useCallback, useContext, useRef } from 'react';
+import { FunctionComponent, MouseEvent, useCallback, useContext, useRef } from 'react';
 import { ValidationResult } from '../../../../models';
 import { BaseVisualCamelEntity } from '../../../../models/visualization/base-visual-entity';
 import {
@@ -21,7 +21,7 @@ interface IFlowsList {
 
 export const FlowsList: FunctionComponent<IFlowsList> = (props) => {
   const { visualEntities, camelResource, updateEntitiesFromCamelResource } = useContext(EntitiesContext)!;
-  const { visibleFlows, visualFlowsApi } = useContext(VisibleFlowsContext)!;
+  const { visibleFlows, allFlowsVisible, visualFlowsApi } = useContext(VisibleFlowsContext)!;
   const deleteModalContext = useContext(ActionConfirmationModalContext);
 
   const isListEmpty = visualEntities.length === 0;
@@ -48,6 +48,18 @@ export const FlowsList: FunctionComponent<IFlowsList> = (props) => {
     [visualEntities],
   );
 
+  const onToggleAll = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      if (allFlowsVisible) {
+        visualFlowsApi.hideAllFlows();
+      } else {
+        visualFlowsApi.showAllFlows();
+      }
+      event.stopPropagation();
+    },
+    [allFlowsVisible, visualFlowsApi],
+  );
+
   return isListEmpty ? (
     <FlowsListEmptyState data-testid="flows-list-empty-state" />
   ) : (
@@ -55,7 +67,23 @@ export const FlowsList: FunctionComponent<IFlowsList> = (props) => {
       <Thead>
         <Tr>
           <Th>{columnNames.current.id}</Th>
-          <Th>{columnNames.current.isVisible}</Th>
+          <Th>
+            <Button
+              title={allFlowsVisible ? 'Hide all flows' : 'Show all flows'}
+              data-testid="toggle-btn-all-flows"
+              onClick={onToggleAll}
+              icon={
+                <Icon isInline>
+                  {allFlowsVisible ? (
+                    <EyeIcon data-testid="toggle-btn-hide-all" />
+                  ) : (
+                    <EyeSlashIcon data-testid="toggle-btn-show-all" />
+                  )}
+                </Icon>
+              }
+              variant="plain"
+            />
+          </Th>
           <Th>{columnNames.current.delete}</Th>
         </Tr>
       </Thead>
@@ -64,6 +92,8 @@ export const FlowsList: FunctionComponent<IFlowsList> = (props) => {
           <Tr key={flow.id} data-testid={`flows-list-row-${flow.id}`}>
             <Td dataLabel={columnNames.current.id}>
               <InlineEdit
+                editTitle={`Rename ${flow.id}`}
+                textTitle={`Focus on ${flow.id}`}
                 data-testid={`goto-btn-${flow.id}`}
                 value={flow.id}
                 validator={routeIdValidator}
@@ -85,11 +115,11 @@ export const FlowsList: FunctionComponent<IFlowsList> = (props) => {
                 icon={
                   visibleFlows[flow.id] ? (
                     <Icon isInline>
-                      <EyeIcon data-testid={`toggle-btn-${flow.id}-visible`} />
+                      <EyeIcon title={`Hide ${flow.id}`} data-testid={`toggle-btn-${flow.id}-visible`} />
                     </Icon>
                   ) : (
                     <Icon isInline>
-                      <EyeSlashIcon data-testid={`toggle-btn-${flow.id}-hidden`} />
+                      <EyeSlashIcon title={`Show ${flow.id}`} data-testid={`toggle-btn-${flow.id}-hidden`} />
                     </Icon>
                   )
                 }
@@ -104,6 +134,7 @@ export const FlowsList: FunctionComponent<IFlowsList> = (props) => {
 
             <Td dataLabel={columnNames.current.delete}>
               <Button
+                title={`Delete ${flow.id}`}
                 data-testid={`delete-btn-${flow.id}`}
                 icon={<TrashIcon />}
                 variant="plain"
diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.scss b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.scss
index 60652333f..1d01fc0e9 100644
--- a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.scss
+++ b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.scss
@@ -1,14 +1,11 @@
-.flows-menu-display {
-  display: inline-grid;
-  max-width: 300px;
-  margin: 0 8px;
-  text-align: left;
-}
-
-.flows-menu-truncate {
-  min-width: 0;
-}
-
 .flows-menu {
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 300px;
+
+  .flows-menu-display {
+    margin: 0 8px;
+    text-align: left;
+  }
 }
diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.test.tsx b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.test.tsx
index 96ca19d1d..99a89c615 100644
--- a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.test.tsx
+++ b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.test.tsx
@@ -1,7 +1,7 @@
 import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import { CamelResource, CamelRouteResource } from '../../../../models/camel';
 import { EntityType } from '../../../../models/camel/entities';
-import { VisibleFLowsContextResult } from '../../../../providers/visible-flows.provider';
+import { VisibleFlowsContextResult } from '../../../../providers/visible-flows.provider';
 import { TestProvidersWrapper } from '../../../../stubs';
 import { FlowsMenu } from './FlowsMenu';
 
@@ -92,7 +92,7 @@ describe('FlowsMenu.tsx', () => {
 
     const { Provider } = TestProvidersWrapper({
       camelResource: singleFlowCamelResource,
-      visibleFlowsContext: { visibleFlows: { ['route-1234']: true } } as unknown as VisibleFLowsContextResult,
+      visibleFlowsContext: { visibleFlows: { ['route-1234']: true } } as unknown as VisibleFlowsContextResult,
     });
     const wrapper = render(
       <Provider>
@@ -110,7 +110,7 @@ describe('FlowsMenu.tsx', () => {
       camelResource,
       visibleFlowsContext: {
         visibleFlows: { ['route-1234']: true, ['routeConfiguration-1234']: true },
-      } as unknown as VisibleFLowsContextResult,
+      } as unknown as VisibleFlowsContextResult,
     });
     const wrapper = render(
       <Provider>
@@ -127,7 +127,7 @@ describe('FlowsMenu.tsx', () => {
       camelResource,
       visibleFlowsContext: {
         visibleFlows: { ['route-1234']: true, ['routeConfiguration-1234']: true },
-      } as unknown as VisibleFLowsContextResult,
+      } as unknown as VisibleFlowsContextResult,
     });
     const wrapper = render(
       <Provider>
@@ -144,7 +144,7 @@ describe('FlowsMenu.tsx', () => {
       camelResource,
       visibleFlowsContext: {
         visibleFlows: { ['route-1234']: true, ['routeConfiguration-1234']: true },
-      } as unknown as VisibleFLowsContextResult,
+      } as unknown as VisibleFlowsContextResult,
     });
     const wrapper = render(
       <Provider>
diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.tsx b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.tsx
index 63f2d1eda..32f731ac3 100644
--- a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.tsx
+++ b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.tsx
@@ -1,7 +1,6 @@
 import { Badge, Icon, MenuToggle, MenuToggleAction, MenuToggleElement, Select } from '@patternfly/react-core';
 import { ListIcon } from '@patternfly/react-icons';
 import { FunctionComponent, Ref, useCallback, useContext, useState } from 'react';
-import { Truncate } from '@patternfly/react-core';
 import { getVisibleFlowsInformation } from '../../../../models/visualization/flows/support/flows-visibility';
 import { VisibleFlowsContext } from '../../../../providers/visible-flows.provider';
 
@@ -15,6 +14,8 @@ export const FlowsMenu: FunctionComponent = () => {
     return getVisibleFlowsInformation(visibleFlows);
   }, [visibleFlows]);
 
+  const { singleFlowId, visibleFlowsCount, totalFlowsCount } = visibleFlowsInformation();
+
   /** Toggle the DSL dropdown */
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -40,15 +41,19 @@ export const FlowsMenu: FunctionComponent = () => {
               <Icon isInline>
                 <ListIcon />
               </Icon>
-              <span data-testid="flows-list-route-id" className="pf-v5-u-m-sm flows-menu-display">
-                <Truncate
-                  content={visibleFlowsInformation().singleFlowId ?? 'Routes'}
-                  tooltipPosition="top"
-                  className="flows-menu-truncate"
-                />
+              <span
+                title={singleFlowId ?? 'Routes'}
+                data-testid="flows-list-route-id"
+                className="pf-v5-u-m-sm flows-menu-display"
+              >
+                {`${singleFlowId ?? 'Routes'}`}
               </span>
-              <Badge data-testid="flows-list-route-count" isRead>
-                {visibleFlowsInformation().visibleFlowsCount}/{visibleFlowsInformation().totalFlowsCount}
+              <Badge
+                title={`Showing ${visibleFlowsCount} out of ${totalFlowsCount} flows`}
+                data-testid="flows-list-route-count"
+                isRead
+              >
+                {visibleFlowsCount}/{totalFlowsCount}
               </Badge>
             </div>
           </MenuToggleAction>,
@@ -58,14 +63,7 @@ export const FlowsMenu: FunctionComponent = () => {
   );
 
   return (
-    <Select
-      id="flows-list-select"
-      isOpen={isOpen}
-      onOpenChange={(isOpen) => {
-        setIsOpen(isOpen);
-      }}
-      toggle={toggle}
-    >
+    <Select id="flows-list-select" isOpen={isOpen} onOpenChange={setIsOpen} toggle={toggle}>
       <FlowsList
         onClose={() => {
           setIsOpen(false);
diff --git a/packages/ui/src/providers/visible-flows.provider.tsx b/packages/ui/src/providers/visible-flows.provider.tsx
index e7cbeca5d..fbd31d729 100644
--- a/packages/ui/src/providers/visible-flows.provider.tsx
+++ b/packages/ui/src/providers/visible-flows.provider.tsx
@@ -7,12 +7,13 @@ import {
 import { initVisibleFlows } from '../utils';
 import { EntitiesContext } from './entities.provider';
 
-export interface VisibleFLowsContextResult {
+export interface VisibleFlowsContextResult {
   visibleFlows: IVisibleFlows;
+  allFlowsVisible: boolean;
   visualFlowsApi: VisualFlowsApi;
 }
 
-export const VisibleFlowsContext = createContext<VisibleFLowsContextResult | undefined>(undefined);
+export const VisibleFlowsContext = createContext<VisibleFlowsContextResult | undefined>(undefined);
 
 export const VisibleFlowsProvider: FunctionComponent<PropsWithChildren> = (props) => {
   const entitiesContext = useContext(EntitiesContext);
@@ -22,6 +23,7 @@ export const VisibleFlowsProvider: FunctionComponent<PropsWithChildren> = (props
   );
 
   const [visibleFlows, dispatch] = useReducer(VisibleFlowsReducer, {}, () => initVisibleFlows(visualEntitiesIds));
+  const allFlowsVisible = Object.values(visibleFlows).every((visible) => visible);
   const visualFlowsApi = useMemo(() => {
     return new VisualFlowsApi(dispatch);
   }, [dispatch]);
@@ -33,9 +35,10 @@ export const VisibleFlowsProvider: FunctionComponent<PropsWithChildren> = (props
   const value = useMemo(() => {
     return {
       visibleFlows,
+      allFlowsVisible,
       visualFlowsApi,
     };
-  }, [visibleFlows, visualFlowsApi]);
+  }, [allFlowsVisible, visibleFlows, visualFlowsApi]);
 
   return <VisibleFlowsContext.Provider value={value}>{props.children}</VisibleFlowsContext.Provider>;
 };
diff --git a/packages/ui/src/stubs/TestProvidersWrapper.tsx b/packages/ui/src/stubs/TestProvidersWrapper.tsx
index dfead3956..fc5d2ec3a 100644
--- a/packages/ui/src/stubs/TestProvidersWrapper.tsx
+++ b/packages/ui/src/stubs/TestProvidersWrapper.tsx
@@ -3,12 +3,12 @@ import { EntitiesContextResult } from '../hooks';
 import { CamelResource } from '../models/camel/camel-resource';
 import { CamelRouteResource } from '../models/camel/camel-route-resource';
 import { VisualFlowsApi } from '../models/visualization/flows/support/flows-visibility';
-import { EntitiesContext, VisibleFLowsContextResult, VisibleFlowsContext } from '../providers';
+import { EntitiesContext, VisibleFlowsContextResult, VisibleFlowsContext } from '../providers';
 import { camelRouteJson } from './camel-route';
 
 interface TestProviderWrapperProps extends PropsWithChildren {
   camelResource?: CamelResource;
-  visibleFlowsContext?: VisibleFLowsContextResult;
+  visibleFlowsContext?: VisibleFlowsContextResult;
 }
 
 interface TestProvidersWrapperResult {
@@ -26,7 +26,8 @@ export const TestProvidersWrapper = (props: TestProviderWrapperProps = {}): Test
   const updateSourceCodeFromEntitiesSpy = jest.fn();
 
   const dispatchSpy = jest.fn();
-  const visibleFlowsContext: VisibleFLowsContextResult = {
+  const visibleFlowsContext: VisibleFlowsContextResult = {
+    allFlowsVisible: props.visibleFlowsContext?.allFlowsVisible ?? false,
     visibleFlows: props.visibleFlowsContext?.visibleFlows ?? {},
     visualFlowsApi: props.visibleFlowsContext?.visualFlowsApi ?? new VisualFlowsApi(dispatchSpy),
   };