refactor: checkbox component visible flag (#1780)

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/fields/Checkbox.test.tsx

@@ -9,8 +9,25 @@ describe('renderer/components/fields/Checkbox.tsx', () => {
     onChange: jest.fn(),
   };
 
-  it('should render', () => {
+  it('should render - visible', () => {
     const tree = render(<Checkbox {...props} />);
     expect(tree).toMatchSnapshot();
   });
+
+  it('should render - not visible', () => {
+    const tree = render(<Checkbox visible={false} {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render - disabled', () => {
+    const tree = render(<Checkbox disabled={true} {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render - tooltip', () => {
+    const tree = render(
+      <Checkbox {...props} tooltip={<div>Hello world</div>} />,
+    );
+    expect(tree).toMatchSnapshot();
+  });
 });

src/renderer/components/fields/Checkbox.tsx

@@ -11,39 +11,45 @@ export interface ICheckbox {
   tooltip?: ReactNode | string;
   checked: boolean;
   disabled?: boolean;
+  visible?: boolean;
   onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
+export const Checkbox: FC<ICheckbox> = ({
+  visible = true,
+  ...props
+}: ICheckbox) => {
   return (
-    <Stack
-      direction="horizontal"
-      gap="condensed"
-      align="center"
-      className="text-sm"
-    >
-      <input
-        type="checkbox"
-        id={props.name}
-        className="size-4 rounded-sm cursor-pointer"
-        checked={props.checked}
-        onChange={props.onChange}
-        disabled={props.disabled}
-        data-testid={`checkbox-${props.name}`}
-      />
+    visible && (
+      <Stack
+        direction="horizontal"
+        gap="condensed"
+        align="center"
+        className="text-sm"
+      >
+        <input
+          type="checkbox"
+          id={props.name}
+          className="size-4 rounded-sm cursor-pointer"
+          checked={props.checked}
+          onChange={props.onChange}
+          disabled={props.disabled}
+          data-testid={`checkbox-${props.name}`}
+        />
 
-      <label
-        htmlFor={props.name}
-        className={cn(
-          'font-medium text-gitify-font cursor-pointer',
-          props.disabled && 'line-through',
+        <label
+          htmlFor={props.name}
+          className={cn(
+            'font-medium text-gitify-font cursor-pointer',
+            props.disabled && 'line-through',
+          )}
+        >
+          {props.label}
+        </label>
+        {props.tooltip && (
+          <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
         )}
-      >
-        {props.label}
-      </label>
-      {props.tooltip && (
-        <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
-      )}
-    </Stack>
+      </Stack>
+    )
   );
 };