From 65382f8800365c61b67ffc6dc50d8d657dc7369d Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongg1409@gmail>
Date: Thu, 17 Oct 2024 11:41:29 +0200
Subject: [PATCH] rename toggle icon component

Signed-off-by: Huong Nguyen <huongg1409@gmail>
---
 .../node-list-row-toggle.test.js              | 44 ---------
 src/components/node-list/filter-row.js        |  4 +-
 src/components/node-list/node-list-row.js     |  6 +-
 src/components/node-list/row.js               | 10 +-
 .../toggle-icon/toggle-icon.js}               |  6 +-
 .../toggle-icon/toggle-icon.scss}             | 10 +-
 .../ui/toggle-icon/toggle-icon.test.js        | 94 +++++++++++++++++++
 7 files changed, 112 insertions(+), 62 deletions(-)
 delete mode 100644 src/components/node-list-row-toggle/node-list-row-toggle.test.js
 rename src/components/{node-list-row-toggle/node-list-row-toggle.js => ui/toggle-icon/toggle-icon.js} (92%)
 rename src/components/{node-list-row-toggle/node-list-row-toggle.scss => ui/toggle-icon/toggle-icon.scss} (96%)
 create mode 100644 src/components/ui/toggle-icon/toggle-icon.test.js

diff --git a/src/components/node-list-row-toggle/node-list-row-toggle.test.js b/src/components/node-list-row-toggle/node-list-row-toggle.test.js
deleted file mode 100644
index a4e117afe..000000000
--- a/src/components/node-list-row-toggle/node-list-row-toggle.test.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { NodeListRowToggle } from './node-list-row-toggle';
-
-describe('NodeListRowToggle', () => {
-  const baseProps = {
-    name: 'Test Node',
-    onChange: jest.fn(),
-    onToggleHoveredFocusMode: jest.fn(),
-  };
-
-  it('applies "all-unchecked" class when allUnchecked is true', () => {
-    const props = { ...baseProps, allUnchecked: true };
-    const wrapper = shallow(<NodeListRowToggle {...props} />);
-    expect(wrapper.hasClass('node-list-row-toggle--icon--all-unchecked')).toBe(true);
-  });
-
-  it('applies "disabled" class when disabled is true', () => {
-    const props = { ...baseProps, disabled: true };
-    const wrapper = shallow(<NodeListRowToggle {...props} />);
-    expect(wrapper.hasClass('node-list-row-toggle--disabled')).toBe(true);
-  });
-
-  it('applies "checked" class when isChecked is true', () => {
-    const props = { ...baseProps, isChecked: true };
-    const wrapper = shallow(<NodeListRowToggle {...props} />);
-    expect(wrapper.hasClass('node-list-row-toggle--icon--checked')).toBe(true);
-  });
-
-  it('applies "parent" class when isParent is true', () => {
-    const props = { ...baseProps, isParent: true };
-    const wrapper = shallow(<NodeListRowToggle {...props} />);
-    expect(wrapper.hasClass('node-list-row-toggle--icon--parent')).toBe(true);
-  });
-
-  it('applies correct class for kind prop', () => {
-    const kinds = ['modularPipeline', 'data', 'task'];
-    kinds.forEach(kind => {
-      const props = { ...baseProps, kind };
-      const wrapper = shallow(<NodeListRowToggle {...props} />);
-      expect(wrapper.hasClass(`node-list-row-toggle--kind-${kind}`)).toBe(true);
-    });
-  });
-});
\ No newline at end of file
diff --git a/src/components/node-list/filter-row.js b/src/components/node-list/filter-row.js
index 347dc0ec1..7c0f76c32 100755
--- a/src/components/node-list/filter-row.js
+++ b/src/components/node-list/filter-row.js
@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { replaceAngleBracketMatches } from '../../utils';
 import VisibleIcon from '../icons/visible';
 import InvisibleIcon from '../icons/invisible';
-import { NodeListRowToggle } from '../node-list-row-toggle/node-list-row-toggle';
+import { ToggleIcon } from '../ui/toggle-icon/toggle-icon';
 
 // The exact fixed height of a row as measured by getBoundingClientRect()
 export const nodeListRowHeight = 32;
@@ -66,7 +66,7 @@ export const FilterRow = ({
         {count}
       </span>
       {VisibilityIcon && (
-        <NodeListRowToggle
+        <ToggleIcon
           allUnchecked={allUnchecked}
           className={'node-list-row__icon'}
           IconComponent={VisibilityIcon}
diff --git a/src/components/node-list/node-list-row.js b/src/components/node-list/node-list-row.js
index 8132e29ae..3b84d33d0 100644
--- a/src/components/node-list/node-list-row.js
+++ b/src/components/node-list/node-list-row.js
@@ -5,7 +5,7 @@ import NodeIcon from '../icons/node-icon';
 import VisibleIcon from '../icons/visible';
 import InvisibleIcon from '../icons/invisible';
 import FocusModeIcon from '../icons/focus-mode';
-import { NodeListRowToggle } from '../node-list-row-toggle/node-list-row-toggle';
+import { ToggleIcon } from '../ui/toggle-icon/toggle-icon';
 
 // The exact fixed height of a row as measured by getBoundingClientRect()
 export const nodeListRowHeight = 32;
@@ -138,7 +138,7 @@ export const NodeListRow = memo(
           </span>
         )}
         {VisibilityIcon && (
-          <NodeListRowToggle
+          <ToggleIcon
             allUnchecked={allUnchecked}
             className={'node-list-row__icon'}
             isParent={Boolean(children)}
@@ -154,7 +154,7 @@ export const NodeListRow = memo(
           />
         )}
         {FocusIcon && (
-          <NodeListRowToggle
+          <ToggleIcon
             allUnchecked={allUnchecked}
             className={'node-list-row__icon'}
             isParent={Boolean(children)}
diff --git a/src/components/node-list/row.js b/src/components/node-list/row.js
index 353246a46..56850b564 100644
--- a/src/components/node-list/row.js
+++ b/src/components/node-list/row.js
@@ -5,7 +5,7 @@ import NodeIcon from '../icons/node-icon';
 import VisibleIcon from '../icons/visible';
 import InvisibleIcon from '../icons/invisible';
 import FocusModeIcon from '../icons/focus-mode';
-import { NodeListRowToggle } from '../node-list-row-toggle/node-list-row-toggle';
+import { ToggleIcon } from '../ui/toggle-icon/toggle-icon';
 
 // The exact fixed height of a row as measured by getBoundingClientRect()
 export const nodeListRowHeight = 32;
@@ -106,8 +106,8 @@ export const Row = ({
         />
       </TextButton>
       {VisibilityIcon && (
-        <NodeListRowToggle
-          allUnchecked={allUnchecked}
+        <ToggleIcon
+          //   allUnchecked={allUnchecked}
           className={'node-list-row__icon'}
           disabled={isModularPipeline ? focused : disabled}
           focusChecked={isModularPipeline ? false : focused}
@@ -121,8 +121,8 @@ export const Row = ({
         />
       )}
       {FocusIcon && (
-        <NodeListRowToggle
-          allUnchecked={allUnchecked}
+        <ToggleIcon
+          //   allUnchecked={allUnchecked}
           className={'node-list-row__icon'}
           disabled={disabled}
           focusChecked={focused}
diff --git a/src/components/node-list-row-toggle/node-list-row-toggle.js b/src/components/ui/toggle-icon/toggle-icon.js
similarity index 92%
rename from src/components/node-list-row-toggle/node-list-row-toggle.js
rename to src/components/ui/toggle-icon/toggle-icon.js
index 6c17a51c4..edcf70ef2 100644
--- a/src/components/node-list-row-toggle/node-list-row-toggle.js
+++ b/src/components/ui/toggle-icon/toggle-icon.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import classnames from 'classnames';
-import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
+import { getDataTestAttribute } from '../../../utils/get-data-test-attribute';
 
-import './node-list-row-toggle.scss';
+import './toggle-icon.scss';
 
-export const NodeListRowToggle = ({
+export const ToggleIcon = ({
   allUnchecked,
   className,
   disabled,
diff --git a/src/components/node-list-row-toggle/node-list-row-toggle.scss b/src/components/ui/toggle-icon/toggle-icon.scss
similarity index 96%
rename from src/components/node-list-row-toggle/node-list-row-toggle.scss
rename to src/components/ui/toggle-icon/toggle-icon.scss
index acaea7fef..048f8f018 100644
--- a/src/components/node-list-row-toggle/node-list-row-toggle.scss
+++ b/src/components/ui/toggle-icon/toggle-icon.scss
@@ -1,6 +1,6 @@
-@use '../../styles/mixins' as mixins;
-@use '../../styles/variables' as colors;
-@use '../node-list/styles/variables';
+@use '../../../styles/mixins' as mixins;
+@use '../../../styles/variables' as colors;
+@use '../../node-list/styles/variables';
 
 .node-list-row-toggle {
   cursor: pointer;
@@ -177,7 +177,7 @@ $filter-icon-opacity-3: 1;
     }
   }
 
-// --- Toggle (kind=filter) icon fills and strokes ---//
+  // --- Toggle (kind=filter) icon fills and strokes ---//
 
   &.node-list-row-toggle--icon--checked {
     fill: var(--color-nodelist-filter-indicator-on);
@@ -194,4 +194,4 @@ $filter-icon-opacity-3: 1;
     fill: colors.$blue-300;
     stroke: colors.$blue-300;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/ui/toggle-icon/toggle-icon.test.js b/src/components/ui/toggle-icon/toggle-icon.test.js
new file mode 100644
index 000000000..59559976d
--- /dev/null
+++ b/src/components/ui/toggle-icon/toggle-icon.test.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { ToggleIcon } from './node-list-row-toggle';
+
+describe('ToggleIcon', () => {
+  const baseProps = {
+    name: 'Test Node',
+    onChange: jest.fn(),
+    onToggleHoveredFocusMode: jest.fn(),
+  };
+
+  it('applies "all-unchecked" class when allUnchecked is true', () => {
+    const props = { ...baseProps, allUnchecked: true };
+    const wrapper = shallow(<ToggleIcon {...props} />);
+    expect(wrapper.hasClass('node-list-row-toggle--icon--all-unchecked')).toBe(
+      true
+    );
+  });
+
+  it('applies "disabled" class when disabled is true', () => {
+    const props = { ...baseProps, disabled: true };
+    const wrapper = shallow(<ToggleIcon {...props} />);
+    expect(wrapper.hasClass('node-list-row-toggle--disabled')).toBe(true);
+  });
+
+  it('applies "checked" class when isChecked is true', () => {
+    const props = { ...baseProps, isChecked: true };
+    const wrapper = shallow(<ToggleIcon {...props} />);
+    expect(wrapper.hasClass('node-list-row-toggle--icon--checked')).toBe(true);
+  });
+
+  it('applies "parent" class when isParent is true', () => {
+    const props = { ...baseProps, isParent: true };
+    const wrapper = shallow(<ToggleIcon {...props} />);
+    expect(wrapper.hasClass('node-list-row-toggle--icon--parent')).toBe(true);
+  });
+
+  it('applies correct class for kind prop', () => {
+    const kinds = ['modularPipeline', 'data', 'task'];
+    kinds.forEach((kind) => {
+      const props = { ...baseProps, kind };
+      const wrapper = shallow(<ToggleIcon {...props} />);
+      expect(wrapper.hasClass(`node-list-row-toggle--kind-${kind}`)).toBe(true);
+    });
+  });
+
+  it('does not apply "all-unchecked" class when allUnchecked is false', () => {
+    const props = { ...baseProps, allUnchecked: false };
+    const wrapper = shallow(<ToggleIcon {...props} />);
+    expect(wrapper.hasClass('node-list-row-toggle--icon--all-unchecked')).toBe(
+      false
+    );
+  });
+
+  it('does not apply "disabled" class when disabled is false', () => {
+    const props = { ...baseProps, disabled: false };
+    const wrapper = shallow(<ToggleIcon {...props} />);
+    expect(wrapper.hasClass('node-list-row-toggle--disabled')).toBe(false);
+  });
+
+  it('does not apply "checked" class when isChecked is false', () => {
+    const props = { ...baseProps, isChecked: false };
+    const wrapper = shallow(<ToggleIcon {...props} />);
+    expect(wrapper.hasClass('node-list-row-toggle--icon--checked')).toBe(false);
+  });
+
+  it('does not apply "parent" class when isParent is false', () => {
+    const props = { ...baseProps, isParent: false };
+    const wrapper = shallow(<ToggleIcon {...props} />);
+    expect(wrapper.hasClass('node-list-row-toggle--icon--parent')).toBe(false);
+  });
+
+  it('triggers onChange callback when clicked', () => {
+    const props = { ...baseProps };
+    const wrapper = shallow(<ToggleIcon {...props} />);
+    wrapper.simulate('click');
+    expect(props.onChange).toHaveBeenCalled();
+  });
+
+  it('does not trigger onToggleHoveredFocusMode when not provided', () => {
+    const props = { ...baseProps, onToggleHoveredFocusMode: undefined };
+    const wrapper = shallow(<ToggleIcon {...props} />);
+    wrapper.simulate('click');
+    // Since onToggleHoveredFocusMode is not provided, it should not throw an error
+    expect(() => wrapper.simulate('click')).not.toThrow();
+  });
+
+  it('triggers onToggleHoveredFocusMode when provided and clicked', () => {
+    const props = { ...baseProps };
+    const wrapper = shallow(<ToggleIcon {...props} />);
+    wrapper.simulate('click');
+    expect(props.onToggleHoveredFocusMode).toHaveBeenCalled();
+  });
+});