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: #1655
KaotoIO · Nov 25, 2024 · d0fed6a · d0fed6a
1 parent 51012ff
commit d0fed6a
Show file tree

Hide file tree

Showing 12 changed files with 227 additions and 71 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -2,7 +2,7 @@ import { act, fireEvent, render } from '@testing-library/react';
 import { CamelRouteResource } from '../../../../models/camel';
 import { EntityType } from '../../../../models/camel/entities';
 import { VisualFlowsApi } from '../../../../models/visualization/flows/support/flows-visibility';
-import { VisibleFLowsContextResult } from '../../../../providers/visible-flows.provider';
+import { VisibleFlowsContextResult } from '../../../../providers/visible-flows.provider';
 import { TestProvidersWrapper } from '../../../../stubs';
 import { FlowsList } from './FlowsList';
 import { ActionConfirmationModalContext } from '../../../../providers/action-confirmation-modal.provider';
@@ -65,7 +65,8 @@ describe('FlowsList.tsx', () => {
       resId = id;
     });
 
-    const visibleFlowsContext: VisibleFLowsContextResult = {
+    const visibleFlowsContext: VisibleFlowsContextResult = {
+      allFlowsVisible: false,
       visibleFlows: { ['route-1234']: true, ['routeConfiguration-1234']: false },
       visualFlowsApi,
     };
@@ -134,7 +135,8 @@ describe('FlowsList.tsx', () => {
       resId = id;
     });
 
-    const visibleFlowsContext: VisibleFLowsContextResult = {
+    const visibleFlowsContext: VisibleFlowsContextResult = {
+      allFlowsVisible: false,
       visibleFlows: { ['route-1234']: true, ['routeConfiguration-1234']: false },
       visualFlowsApi,
     };
@@ -156,7 +158,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),
     };
@@ -180,7 +183,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,
     };
@@ -215,4 +219,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');
+  });
 });