From 1cb632b561950b0beb2c6dfd67775637fbff9b56 Mon Sep 17 00:00:00 2001
From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com>
Date: Fri, 22 Jul 2022 13:34:39 +0300
Subject: [PATCH] Comment fixes and polishing

---
 .../RestrictiveLegalValues.tsx                | 54 +++++++++----------
 .../SingleLegalValue/SingleLegalValue.tsx     |  2 +-
 .../StyledToggleButton/StyledToggleButton.tsx |  7 ++-
 .../ConstraintAccordionHeaderActions.tsx      |  4 +-
 .../ConstraintAccordionList.tsx               | 15 ++++--
 .../ConstraintViewHeaderOperator.tsx          |  2 +-
 ...raintAccordionViewHeaderMultipleValues.tsx |  2 +-
 .../StyledIconWrapper/StyledIconWrapper.tsx   | 12 ++---
 8 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
index c32fa68a75..c455065b87 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
@@ -64,37 +64,37 @@ export const RestrictiveLegalValues = ({
     };
 
     return (
-        <ConditionallyRender
-            condition={Boolean(values.length > 500)}
-            show={
-                <>
-                    <ConstraintFormHeader>
-                        Select values from a predefined set
-                    </ConstraintFormHeader>
+        <>
+            <ConstraintFormHeader>
+                Select values from a predefined set
+            </ConstraintFormHeader>
+            <ConditionallyRender
+                condition={Boolean(legalValues.length > 100)}
+                show={
                     <ConstraintValueSearch
                         filter={filter}
                         setFilter={setFilter}
                     />
-                    {filteredValues.map(match => (
-                        <LegalValueLabel
-                            key={match.value}
-                            legal={match}
-                            control={
-                                <Checkbox
-                                    checked={Boolean(valuesMap[match.value])}
-                                    onChange={() => onChange(match.value)}
-                                    name={match.value}
-                                    color="primary"
-                                />
-                            }
+                }
+            />
+            {filteredValues.map(match => (
+                <LegalValueLabel
+                    key={match.value}
+                    legal={match}
+                    control={
+                        <Checkbox
+                            checked={Boolean(valuesMap[match.value])}
+                            onChange={() => onChange(match.value)}
+                            name={match.value}
+                            color="primary"
                         />
-                    ))}
-                    <ConditionallyRender
-                        condition={Boolean(error)}
-                        show={<p className={styles.error}>{error}</p>}
-                    />
-                </>
-            }
-        />
+                    }
+                />
+            ))}
+            <ConditionallyRender
+                condition={Boolean(error)}
+                show={<p className={styles.error}>{error}</p>}
+            />
+        </>
     );
 };
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
index f62dc67d3c..b83db6fa1e 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
@@ -37,7 +37,7 @@ export const SingleLegalValue = ({
                 Add a single {type.toLowerCase()} value
             </ConstraintFormHeader>
             <ConditionallyRender
-                condition={Boolean(legalValues.length > 500)}
+                condition={Boolean(legalValues.length > 100)}
                 show={
                     <ConstraintValueSearch
                         filter={filter}
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx
index b661756514..09a162dd1b 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx
@@ -1,12 +1,11 @@
 import { styled } from '@mui/system';
-import { Button } from '@mui/material';
+import { IconButton } from '@mui/material';
 
-export const StyledToggleButtonOff = styled(Button)(({ theme }) => ({
+export const StyledToggleButtonOff = styled(IconButton)(({ theme }) => ({
     width: 28,
     minWidth: '28px!important',
     minHeight: 40,
     backgroundColor: 'white',
-    color: theme.palette.inactiveIcon,
     borderRadius: theme.shape.borderRadius,
     padding: '0 1px 0',
     marginRight: '1rem',
@@ -15,7 +14,7 @@ export const StyledToggleButtonOff = styled(Button)(({ theme }) => ({
     },
 }));
 
-export const StyledToggleButtonOn = styled(Button)(({ theme }) => ({
+export const StyledToggleButtonOn = styled(IconButton)(({ theme }) => ({
     width: 28,
     minWidth: '28px!important',
     minHeight: 40,
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx
index 202eafc065..8ac0b0564b 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx
@@ -7,11 +7,13 @@ import { useStyles } from '../ConstraintAccordion.styles';
 interface ConstraintAccordionHeaderActionsProps {
     onDelete?: () => void;
     onEdit?: () => void;
+    disableEdit?: boolean;
 }
 
 export const ConstraintAccordionHeaderActions = ({
     onEdit,
     onDelete,
+    disableEdit = false
 }: ConstraintAccordionHeaderActionsProps) => {
     const { classes: styles } = useStyles();
     const onEditClick =
@@ -31,7 +33,7 @@ export const ConstraintAccordionHeaderActions = ({
     return (
         <div className={styles.headerActions}>
             <ConditionallyRender
-                condition={Boolean(onEditClick)}
+                condition={Boolean(onEditClick) && !disableEdit}
                 show={() => (
                     <Tooltip title="Edit constraint" arrow>
                         <IconButton
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
index 2f33d8563b..d4ab4bab84 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
@@ -8,7 +8,8 @@ import { objectId } from 'utils/objectId';
 import { useStyles } from './ConstraintAccordionList.styles';
 import { createEmptyConstraint } from 'component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Button } from '@mui/material';
+import { Button, IconButton } from '@mui/material';
+import { Help } from '@mui/icons-material';
 
 interface IConstraintAccordionListProps {
     constraints: IConstraint[];
@@ -102,11 +103,19 @@ export const ConstraintAccordionList = forwardRef<
                 condition={Boolean(showCreateButton && onAdd)}
                 show={
                     <div>
+                        <p>
+                            Add any number of custom constraints
+                            <a href={'https://docs.getunleash.io/advanced/strategy_constraints'}>
+                                <IconButton>
+                                    <Help />
+                                </IconButton>
+                            </a>
+                        </p>
                         <Button
                             type="button"
                             onClick={onAdd}
-                            variant="text"
-                            color="primary"
+                            variant="outlined"
+                            color="secondary"
                         >
                             Add custom constraint
                         </Button>
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx
index 98022eddeb..9cd51b9269 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx
@@ -22,7 +22,7 @@ export const ConstraintViewHeaderOperator = ({
                 condition={Boolean(constraint.inverted)}
                 show={
                     <Tooltip title={'Operator is negated'} arrow>
-                        <StyledIconWrapper marginRight={'0'}>
+                        <StyledIconWrapper marginright={'0'}>
                             <NegatedIcon />
                         </StyledIconWrapper>
                     </Tooltip>
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx
index 98b130a78e..5cb8d6e14b 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx
@@ -70,7 +70,7 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({
                 }
                 show={
                     <Tooltip title="Case sensitive is active" arrow>
-                        <StyledIconWrapper marginTop={'7px'}>
+                        <StyledIconWrapper margintop={'auto'}>
                             <CaseSensitive />{' '}
                         </StyledIconWrapper>
                     </Tooltip>
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx
index 0d84e094fb..dd6568c427 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx
@@ -1,16 +1,16 @@
 import { styled } from '@mui/material';
 
 export const StyledIconWrapper = styled('div')<{
-    marginRight?: string;
-    marginTop?: string;
-}>(({ theme, marginRight, marginTop }) => ({
+    marginright?: string;
+}>(({ theme, marginright }) => ({
     backgroundColor: theme.palette.grey[200],
     width: 28,
-    height: 47,
+    height: 48,
     display: 'inline-flex',
     justifyContent: 'center',
     padding: '10px 0',
     color: theme.palette.primary.main,
-    marginRight: marginRight ? marginRight : '0.75rem',
-    marginTop: marginTop ? marginTop : 0,
+    marginRight: marginright ? marginright : '1rem',
+    marginTop: 'auto',
+    marginBottom: 'auto',
 }));