From 9316b633a24cd309cccdb6e51c3df6b0c4c9a672 Mon Sep 17 00:00:00 2001
From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com>
Date: Thu, 21 Jul 2022 15:22:49 +0300
Subject: [PATCH] Constraint View header adjustments

---
 .../ConstraintAccordion.styles.ts             |   5 +
 .../ConstraintAccordionView.tsx               |   1 +
 .../ConstraintAccordionViewHeader.tsx         | 119 ++++++++++++++----
 .../ConstraintOperator/ConstraintOperator.tsx |  11 +-
 4 files changed, 103 insertions(+), 33 deletions(-)

diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
index 3f8c0bfcc6..f208f27ee7 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
@@ -46,6 +46,11 @@ export const useStyles = makeStyles()(theme => ({
             position: 'relative',
         },
     },
+    headerValuesContainerWrapper: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center'
+    },
     headerValuesContainer: {
         display: 'flex',
         flexDirection: 'column',
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
index 3a2bb8016a..c266cb1f43 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
@@ -60,6 +60,7 @@ export const ConstraintAccordionView = ({
                     onDelete={onDelete}
                     singleValue={singleValue}
                     allowExpand={setExpandable}
+                    expanded={expanded}
                 />
             </AccordionSummary>
 
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
index 64dee38820..cc0f9d9db4 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
@@ -10,8 +10,11 @@ import { formatConstraintValue } from 'utils/formatConstraintValue';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { ConstraintOperator } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator';
 import classnames from 'classnames';
-import ReactDOM from 'react-dom';
 import { getTextWidth } from '../../utils';
+import { ReactComponent as NegatedIcon } from 'assets/icons/24_Negator.svg';
+import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
+import { stringOperators } from 'constants/operators';
+import { oneOf } from 'utils/oneOf';
 
 const StyledHeaderText = styled('span')(({ theme }) => ({
     display: '-webkit-box',
@@ -50,12 +53,27 @@ const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
     },
 }));
 
+const StyledIconWrapper = styled('div')<{ marginRight?: string, marginTop?: string  }>(
+    ({ theme, marginRight, marginTop }) => ({
+        backgroundColor: theme.palette.grey[200],
+        width: 28,
+        height: 47,
+        display: 'inline-flex',
+        justifyContent: 'center',
+        padding: '10px 0',
+        color: theme.palette.primary.main,
+        marginRight: marginRight ? marginRight : '0.75rem',
+        marginTop: marginTop ? marginTop: 0
+    })
+);
+
 interface IConstraintAccordionViewHeaderProps {
     compact: boolean;
     constraint: IConstraint;
     onDelete?: () => void;
     onEdit?: () => void;
     singleValue: boolean;
+    expanded: boolean;
     allowExpand: (shouldExpand: boolean) => void;
 }
 
@@ -66,6 +84,7 @@ export const ConstraintAccordionViewHeader = ({
     onDelete,
     singleValue,
     allowExpand,
+    expanded,
 }: IConstraintAccordionViewHeaderProps) => {
     const { classes: styles } = useStyles();
     const { locationSettings } = useLocationSettings();
@@ -113,40 +132,88 @@ export const ConstraintAccordionViewHeader = ({
                         {constraint.contextName}
                     </StyledHeaderText>
                 </Tooltip>
-                <div className={styles.headerConstraintContainer}>
-                    <ConstraintOperator constraint={constraint} />
+                <div className={styles.headerValuesContainerWrapper}>
+                    <ConditionallyRender
+                        condition={Boolean(constraint.inverted)}
+                        show={
+                            <Tooltip title={'Operator is negated'} arrow>
+                                <StyledIconWrapper marginRight={'0'}>
+                                    <NegatedIcon />
+                                </StyledIconWrapper>
+                            </Tooltip>
+                        }
+                    />
+                    <div className={styles.headerConstraintContainer}>
+                        <ConstraintOperator constraint={constraint} />
+                    </div>
                 </div>
                 <ConditionallyRender
                     condition={singleValue}
                     show={
-                        <StyledSingleValueChip
-                            label={formatConstraintValue(
-                                constraint,
-                                locationSettings
-                            )}
-                        />
-                    }
-                    elseShow={
-                        <div className={styles.headerValuesContainer}>
-                            <StyledValuesSpan ref={elementRef}>
-                                {constraint?.values
-                                    ?.map(value => value)
-                                    .join(', ')}
-                            </StyledValuesSpan>
+                        <div className={styles.headerValuesContainerWrapper}>
                             <ConditionallyRender
-                                condition={expandable}
+                                condition={
+                                    !Boolean(constraint.caseInsensitive) &&
+                                    oneOf(stringOperators, constraint.operator)
+                                }
                                 show={
-                                    <p
-                                        className={classnames(
-                                            styles.headerValuesExpand,
-                                            'valuesExpandLabel'
-                                        )}
+                                    <Tooltip
+                                        title="Case sensitive is active"
+                                        arrow
                                     >
-                                        Expand to view all (
-                                        {constraint?.values?.length})
-                                    </p>
+                                        <StyledIconWrapper>
+                                            <CaseSensitive />{' '}
+                                        </StyledIconWrapper>
+                                    </Tooltip>
                                 }
                             />
+                            <StyledSingleValueChip
+                                label={formatConstraintValue(
+                                    constraint,
+                                    locationSettings
+                                )}
+                            />
+                        </div>
+                    }
+                    elseShow={
+                        <div className={styles.headerValuesContainerWrapper}>
+                            <ConditionallyRender
+                                condition={
+                                    !Boolean(constraint.caseInsensitive) &&
+                                    oneOf(stringOperators, constraint.operator)
+                                }
+                                show={
+                                    <Tooltip
+                                        title="Case sensitive is active"
+                                        arrow
+                                    >
+                                        <StyledIconWrapper marginTop={'7px'}>
+                                            <CaseSensitive />{' '}
+                                        </StyledIconWrapper>
+                                    </Tooltip>
+                                }
+                            />
+                            <div className={styles.headerValuesContainer}>
+                                <StyledValuesSpan ref={elementRef}>
+                                    {constraint?.values
+                                        ?.map(value => value)
+                                        .join(', ')}
+                                </StyledValuesSpan>
+                                <ConditionallyRender
+                                    condition={expandable}
+                                    show={
+                                        <p
+                                            className={classnames(
+                                                styles.headerValuesExpand,
+                                                'valuesExpandLabel'
+                                            )}
+                                        >
+                                            {!expanded ? `Expand to view all (
+                                            ${constraint?.values?.length})` : 'Collapse to view less' }
+                                        </p>
+                                    }
+                                />
+                            </div>
                         </div>
                     }
                 />
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
index 9cd3a5cf61..c275825059 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
@@ -1,6 +1,10 @@
 import { IConstraint } from 'interfaces/strategy';
 import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
 import { useStyles } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles';
+import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender';
+import { ReactComponent as NegatedIcon } from '../../../../assets/icons/24_Negator.svg';
+import { colors } from '../../../../themes/colors';
+import React from 'react';
 
 interface IConstraintOperatorProps {
     constraint: IConstraint;
@@ -14,15 +18,8 @@ export const ConstraintOperator = ({
     const operatorName = constraint.operator;
     const operatorText = formatOperatorDescription(constraint.operator);
 
-    const notLabel = constraint.inverted && (
-        <div className={styles.not}>
-            <span>NOT</span>
-        </div>
-    );
-
     return (
         <div className={styles.container}>
-            {notLabel}
             <div className={styles.name}>{operatorName}</div>
             <div className={styles.text}>{operatorText}</div>
         </div>