From 06f069743885fa663a55d37daa086c5504e4531e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dro=C5=84?= <dron.official@yahoo.com>
Date: Mon, 22 Nov 2021 12:57:32 +0100
Subject: [PATCH] Fix partially cut checkboxes in channel dialogs (#1560)
 (#1613)

* wip logic for indeterminate icon

* wip remove unused imports

* fix cutted off checkbox ripples

* refactor & cleanup
---
 ...sWithVariantsAvailabilityDialogContent.tsx | 22 ++++++++++---------
 .../ChannelsAvailabilityDialogWrapper.tsx     |  5 +++++
 src/components/ControlledCheckbox.tsx         |  3 +++
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/channels/components/ChannelsWithVariantsAvailabilityDialog/ChannelsWithVariantsAvailabilityDialogContent.tsx b/src/channels/components/ChannelsWithVariantsAvailabilityDialog/ChannelsWithVariantsAvailabilityDialogContent.tsx
index 79bb51a9d..aa3bff53c 100644
--- a/src/channels/components/ChannelsWithVariantsAvailabilityDialog/ChannelsWithVariantsAvailabilityDialogContent.tsx
+++ b/src/channels/components/ChannelsWithVariantsAvailabilityDialog/ChannelsWithVariantsAvailabilityDialogContent.tsx
@@ -6,8 +6,6 @@ import {
   Typography
 } from "@material-ui/core";
 import { ChannelData } from "@saleor/channels/utils";
-import IconCheckboxChecked from "@saleor/icons/CheckboxChecked";
-import IconCheckboxSemiChecked from "@saleor/icons/CheckboxSemiChecked";
 import IconChevronDown from "@saleor/icons/ChevronDown";
 import { makeStyles } from "@saleor/macaw-ui";
 import Label from "@saleor/orders/components/OrderHistory/Label";
@@ -126,15 +124,19 @@ const ChannelsWithVariantsAvailabilityDialogContent: React.FC<ChannelsWithVarian
       ? addVariantToChannel(channelId, variantId)
       : removeVariantFromChannel(channelId, variantId);
 
-  const selectChannelIcon = (channelId: string) =>
-    areAllChannelVariantsSelected(
+  const isChannelPartiallySelected = (channelId: string) => {
+    const selectedVariants = channelVariantListingDiffToDict(
+      channelsWithVariants
+    )[channelId];
+
+    if (selectedVariants.length === 0) {
+      return false;
+    }
+    return !areAllChannelVariantsSelected(
       allVariants?.map(variant => variant.id),
-      channelVariantListingDiffToDict(channelsWithVariants)[channelId]
-    ) ? (
-      <IconCheckboxChecked />
-    ) : (
-      <IconCheckboxSemiChecked />
+      selectedVariants
     );
+  };
 
   return (
     <>
@@ -172,7 +174,7 @@ const ChannelsWithVariantsAvailabilityDialogContent: React.FC<ChannelsWithVarian
                 <div className={classes.channelCheckboxContainer}>
                   <ControlledCheckbox
                     checked={isChannelSelected(channelId)}
-                    checkedIcon={selectChannelIcon(channelId)}
+                    indeterminate={isChannelPartiallySelected(channelId)}
                     name={name}
                     label={
                       <div className={classes.channelTitleContainer}>
diff --git a/src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx b/src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx
index 15fc75d5d..1cda4c8bc 100644
--- a/src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx
+++ b/src/components/ChannelsAvailabilityDialogWrapper/ChannelsAvailabilityDialogWrapper.tsx
@@ -38,6 +38,11 @@ export const useStyles = makeStyles(
       },
       overflowY: "scroll",
       overflowX: "hidden",
+      // overflowX can't be "visible" when overflowY is "scroll"
+      // workaround for visible button ripples:
+      marginLeft: -15,
+      paddingLeft: 15,
+
       marginBottom: theme.spacing(3)
     },
     text: {
diff --git a/src/components/ControlledCheckbox.tsx b/src/components/ControlledCheckbox.tsx
index 081c203ff..d0fc09f83 100644
--- a/src/components/ControlledCheckbox.tsx
+++ b/src/components/ControlledCheckbox.tsx
@@ -6,6 +6,7 @@ interface ControlledCheckboxProps {
   name: string;
   label?: React.ReactNode;
   checked: boolean;
+  indeterminate?: boolean;
   disabled?: boolean;
   checkedIcon?: React.ReactNode;
   onChange(event: any);
@@ -18,6 +19,7 @@ export const ControlledCheckbox: React.FC<ControlledCheckboxProps> = ({
   label,
   onChange,
   checkedIcon,
+  indeterminate,
   ...props
 }) => (
   <FormControlLabel
@@ -26,6 +28,7 @@ export const ControlledCheckbox: React.FC<ControlledCheckboxProps> = ({
       <Checkbox
         checkedIcon={checkedIcon}
         checked={!!checked}
+        indeterminate={indeterminate}
         disabled={disabled}
         name={name}
         onChange={() => onChange({ target: { name, value: !checked } })}