From ffc0c0a2298d2b1ff49758fed8ee7c63b49942d9 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Wed, 20 Jul 2022 10:17:26 +0300 Subject: [PATCH 01/23] Make accordion expand dependent on text width --- .../ConstraintAccordionView.tsx | 16 +++-- .../ConstraintAccordionViewHeader.tsx | 63 +++++++++++++++---- 2 files changed, 64 insertions(+), 15 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index a56da12348..cc45a41c55 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -12,6 +12,7 @@ import { } from 'constants/operators'; import { useStyles } from '../ConstraintAccordion.styles'; +import {useState} from "react"; interface IConstraintAccordionViewProps { constraint: IConstraint; onDelete?: () => void; @@ -26,27 +27,34 @@ export const ConstraintAccordionView = ({ onDelete, }: IConstraintAccordionViewProps) => { const { classes: styles } = useStyles(); + const [expandable, setExpandable] = useState(true) + const [expanded, setExpanded] = useState(false); const singleValue = oneOf( [...semVerOperators, ...numOperators, ...dateOperators], constraint.operator ); + const handleChange = + () => (event: React.SyntheticEvent, isExpanded: boolean) => { + setExpanded((!isExpanded && expandable)); + }; + return ( - } - > + setExpandable(shouldExpand)} /> diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index 8521bdadf4..ac600f3ca4 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -5,11 +5,12 @@ import { IConstraint } from 'interfaces/strategy'; import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import React from 'react'; +import React, { useEffect, useRef, useState } from 'react'; 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'; const StyledHeaderText = styled('span')(({ theme }) => ({ display: '-webkit-box', @@ -54,6 +55,7 @@ interface IConstraintAccordionViewHeaderProps { onDelete?: () => void; onEdit?: () => void; singleValue: boolean; + allowExpand: (shouldExpand: boolean) => void; } export const ConstraintAccordionViewHeader = ({ @@ -62,9 +64,14 @@ export const ConstraintAccordionViewHeader = ({ onEdit, onDelete, singleValue, + allowExpand }: IConstraintAccordionViewHeaderProps) => { const { classes: styles } = useStyles(); const { locationSettings } = useLocationSettings(); + const [height, setHeight] = useState(0); + const [width, setWidth] = useState(0); + const [textWidth, setTextWidth] = useState(0); + const elementRef = useRef(null); const onEditClick = onEdit && @@ -80,6 +87,35 @@ export const ConstraintAccordionViewHeader = ({ onDelete(); }); + useEffect(() => { + if (elementRef && elementRef.current != null) { + console.log(elementRef.current.clientHeight); + console.log(elementRef.current.clientWidth); + setTextWidth( + Math.round(getTextWidth(elementRef.current.innerText) / 2) // 2 lines + ); + setHeight(elementRef.current.clientHeight); + setWidth(elementRef.current.clientWidth); + allowExpand(textWidth > width) + } + }, []); + + function getTextWidth(text: string | null) { + if (text != null) { + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + + if (context != null) { + context.font = getComputedStyle(document.body).font; + + return context.measureText(text).width; + } + } + return 0; + } + + const shouldBeExpandable = textWidth > width; + return (
@@ -104,20 +140,25 @@ export const ConstraintAccordionViewHeader = ({ } elseShow={
- + {constraint?.values ?.map(value => value) .join(', ')} -

- Expand to view all ({constraint?.values?.length} - ) -

+ + Expand to view all ( + {constraint?.values?.length}) +

+ } + />
} /> From e33ed6b8e76a1f6e89f62c3cb1c1c98239e83d47 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Wed, 20 Jul 2022 13:01:25 +0300 Subject: [PATCH 02/23] Make accordion expand dependent on text width --- .../ConstraintAccordionView.tsx | 18 +++++++++++------- .../ConstraintAccordionViewHeader.tsx | 4 ++-- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index cc45a41c55..6bb1468a28 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -35,26 +35,30 @@ export const ConstraintAccordionView = ({ constraint.operator ); - const handleChange = - () => (event: React.SyntheticEvent, isExpanded: boolean) => { - setExpanded((!isExpanded && expandable)); - }; + const handleClick = () => { + console.log('click') + if (expandable) { + setExpanded(!expanded); + } + }; return ( - + setExpandable(shouldExpand)} + allowExpand={(shouldExpand) => { + console.log(shouldExpand) + setExpandable(shouldExpand) + }} /> diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index ac600f3ca4..5771cbcc49 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -89,13 +89,13 @@ export const ConstraintAccordionViewHeader = ({ useEffect(() => { if (elementRef && elementRef.current != null) { - console.log(elementRef.current.clientHeight); - console.log(elementRef.current.clientWidth); setTextWidth( Math.round(getTextWidth(elementRef.current.innerText) / 2) // 2 lines ); setHeight(elementRef.current.clientHeight); setWidth(elementRef.current.clientWidth); + console.log(textWidth) + console.log(width) allowExpand(textWidth > width) } }, []); From 7f0a0afb84931af4710e7c9ad36c21fd441f13cd Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Wed, 20 Jul 2022 15:42:13 +0300 Subject: [PATCH 03/23] Constrain card adjustments --- frontend/src/assets/icons/24_Negator off.svg | 3 ++ frontend/src/assets/icons/24_Negator.svg | 3 ++ .../src/assets/icons/24_Text format off.svg | 3 ++ frontend/src/assets/icons/24_Text format.svg | 3 ++ .../ConstraintAccordion.styles.ts | 3 +- .../ConstraintAccordion.tsx | 1 + .../ConstraintAccordionEdit.tsx | 5 +- .../ConstraintAccordionEditBody.tsx | 35 ------------ .../FreeTextInput/FreeTextInput.tsx | 4 +- .../ConstraintAccordionEditHeader.tsx | 53 ++++++++++++------- .../InvertedOperator.tsx | 43 +++++++++++++++ .../ConstraintAccordionView.tsx | 19 +++---- .../ConstraintAccordionViewHeader.tsx | 30 ++++------- .../common/ConstraintAccordion/utils.ts | 13 +++++ 14 files changed, 131 insertions(+), 87 deletions(-) create mode 100644 frontend/src/assets/icons/24_Negator off.svg create mode 100644 frontend/src/assets/icons/24_Negator.svg create mode 100644 frontend/src/assets/icons/24_Text format off.svg create mode 100644 frontend/src/assets/icons/24_Text format.svg create mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/InvertedOperatorButton/InvertedOperator.tsx create mode 100644 frontend/src/component/common/ConstraintAccordion/utils.ts diff --git a/frontend/src/assets/icons/24_Negator off.svg b/frontend/src/assets/icons/24_Negator off.svg new file mode 100644 index 0000000000..c802090b74 --- /dev/null +++ b/frontend/src/assets/icons/24_Negator off.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/24_Negator.svg b/frontend/src/assets/icons/24_Negator.svg new file mode 100644 index 0000000000..fa578d427a --- /dev/null +++ b/frontend/src/assets/icons/24_Negator.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/24_Text format off.svg b/frontend/src/assets/icons/24_Text format off.svg new file mode 100644 index 0000000000..08ecc7d372 --- /dev/null +++ b/frontend/src/assets/icons/24_Text format off.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/icons/24_Text format.svg b/frontend/src/assets/icons/24_Text format.svg new file mode 100644 index 0000000000..56ee9d2842 --- /dev/null +++ b/frontend/src/assets/icons/24_Text format.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index 61e799332e..48bb81ad1b 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts @@ -106,7 +106,8 @@ export const useStyles = makeStyles()(theme => ({ marginTop: '1rem', }, }, - headerSelect: { marginRight: '2rem', width: '200px' }, + invertedOperatorButton: { marginRight: '1rem', marginLeft: 'auto', }, + headerSelect: { marginRight: '1rem', width: '200px' }, chip: { margin: '0 0.5rem 0.5rem 0', }, diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx index c6abd4e958..c849d74e2e 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx @@ -33,6 +33,7 @@ export const ConstraintAccordion = ({ constraint={constraint} onCancel={onCancel} onSave={onSave!} + onDelete={onDelete} compact={compact} /> } diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx index 0f7051ae2f..3bd9898fb8 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx @@ -19,6 +19,7 @@ interface IConstraintAccordionEditProps { onCancel: () => void; onSave: (constraint: IConstraint) => void; compact: boolean; + onDelete?: () => void; } export const CANCEL = 'cancel'; @@ -48,6 +49,7 @@ export const ConstraintAccordionEdit = ({ compact, onCancel, onSave, + onDelete, }: IConstraintAccordionEditProps) => { const [localConstraint, setLocalConstraint] = useState( cleanConstraint(constraint) @@ -203,6 +205,8 @@ export const ConstraintAccordionEdit = ({ setOperator={setOperator} action={action} compact={compact} + setInvertedOperator={setInvertedOperator} + onDelete={onDelete} /> @@ -217,7 +221,6 @@ export const ConstraintAccordionEdit = ({ setCaseInsensitive={setCaseInsensitive} triggerTransition={triggerTransition} setAction={setAction} - setInvertedOperator={setInvertedOperator} onSubmit={onSubmit} > void; setAction: React.Dispatch>; setCaseInsensitive: () => void; - setInvertedOperator: () => void; onSubmit: () => void; } @@ -40,10 +39,6 @@ export const ConstraintAccordionEditBody: React.FC< condition={oneOf(newOperators, localConstraint.operator)} show={} /> - {children}
@@ -71,33 +66,3 @@ export const ConstraintAccordionEditBody: React.FC< ); }; - -interface IInvertedOperatorProps { - inverted: boolean; - setInvertedOperator: () => void; -} - -const InvertedOperator = ({ - inverted, - setInvertedOperator, -}: IInvertedOperatorProps) => { - return ( - <> - - Should the operator be negated? (this will make the operator do - the opposite) - - setInvertedOperator()} - color="primary" - /> - } - label="Negated" - /> - - ); -}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx index 406c14a249..91c9e2b190 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx @@ -110,8 +110,8 @@ export const FreeTextInput = ({
+ + ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index 6bb1468a28..3a2bb8016a 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -12,7 +12,7 @@ import { } from 'constants/operators'; import { useStyles } from '../ConstraintAccordion.styles'; -import {useState} from "react"; +import { useState } from 'react'; interface IConstraintAccordionViewProps { constraint: IConstraint; onDelete?: () => void; @@ -27,7 +27,7 @@ export const ConstraintAccordionView = ({ onDelete, }: IConstraintAccordionViewProps) => { const { classes: styles } = useStyles(); - const [expandable, setExpandable] = useState(true) + const [expandable, setExpandable] = useState(true); const [expanded, setExpanded] = useState(false); const singleValue = oneOf( @@ -35,8 +35,8 @@ export const ConstraintAccordionView = ({ constraint.operator ); - const handleClick = () => { - console.log('click') + const handleClick = () => { + console.log('click'); if (expandable) { setExpanded(!expanded); } @@ -48,17 +48,18 @@ export const ConstraintAccordionView = ({ classes={{ root: styles.accordionRoot }} expanded={expanded} > - + { - console.log(shouldExpand) - setExpandable(shouldExpand) - }} + allowExpand={setExpandable} /> diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index 5771cbcc49..64dee38820 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -11,6 +11,7 @@ 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'; const StyledHeaderText = styled('span')(({ theme }) => ({ display: '-webkit-box', @@ -64,13 +65,13 @@ export const ConstraintAccordionViewHeader = ({ onEdit, onDelete, singleValue, - allowExpand + allowExpand, }: IConstraintAccordionViewHeaderProps) => { const { classes: styles } = useStyles(); const { locationSettings } = useLocationSettings(); - const [height, setHeight] = useState(0); const [width, setWidth] = useState(0); const [textWidth, setTextWidth] = useState(0); + const [expandable, setExpandable] = useState(false); const elementRef = useRef(null); const onEditClick = @@ -92,29 +93,16 @@ export const ConstraintAccordionViewHeader = ({ setTextWidth( Math.round(getTextWidth(elementRef.current.innerText) / 2) // 2 lines ); - setHeight(elementRef.current.clientHeight); setWidth(elementRef.current.clientWidth); - console.log(textWidth) - console.log(width) - allowExpand(textWidth > width) } }, []); - function getTextWidth(text: string | null) { - if (text != null) { - const canvas = document.createElement('canvas'); - const context = canvas.getContext('2d'); - - if (context != null) { - context.font = getComputedStyle(document.body).font; - - return context.measureText(text).width; - } + useEffect(() => { + if (textWidth && width) { + setExpandable(textWidth > width); + allowExpand(textWidth > width); } - return 0; - } - - const shouldBeExpandable = textWidth > width; + }, [textWidth, width, allowExpand]); return (
@@ -146,7 +134,7 @@ export const ConstraintAccordionViewHeader = ({ .join(', ')} Date: Thu, 21 Jul 2022 14:12:30 +0300 Subject: [PATCH 04/23] Create/edit constraint adjustments --- frontend/src/assets/icons/24_Negator off.svg | 4 +- frontend/src/assets/icons/24_Negator.svg | 4 +- .../src/assets/icons/24_Text format off.svg | 4 +- frontend/src/assets/icons/24_Text format.svg | 4 +- .../ConstraintAccordion.styles.ts | 2 +- .../ConstraintAccordionEdit.tsx | 3 +- .../CaseInsensitive/CaseInsensitive.tsx | 31 ----------- .../ConstraintAccordionEditBody.styles.ts | 3 +- .../ConstraintAccordionEditBody.tsx | 10 +--- .../ResolveInput/ResolveInput.tsx | 15 ------ .../ConstraintAccordionEditHeader.tsx | 48 +++++++++++------ .../InvertedOperator.tsx | 43 ---------------- .../CaseSensitiveButton.tsx | 51 +++++++++++++++++++ .../InvertedOperatorButton.tsx | 46 +++++++++++++++++ .../StyledToggleButton/StyledToggleButton.tsx | 31 +++++++++++ 15 files changed, 173 insertions(+), 126 deletions(-) delete mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/CaseInsensitive/CaseInsensitive.tsx delete mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/InvertedOperatorButton/InvertedOperator.tsx create mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx create mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx create mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx diff --git a/frontend/src/assets/icons/24_Negator off.svg b/frontend/src/assets/icons/24_Negator off.svg index c802090b74..a3dababecf 100644 --- a/frontend/src/assets/icons/24_Negator off.svg +++ b/frontend/src/assets/icons/24_Negator off.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/icons/24_Negator.svg b/frontend/src/assets/icons/24_Negator.svg index fa578d427a..84e1638591 100644 --- a/frontend/src/assets/icons/24_Negator.svg +++ b/frontend/src/assets/icons/24_Negator.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/icons/24_Text format off.svg b/frontend/src/assets/icons/24_Text format off.svg index 08ecc7d372..c4e0102f8a 100644 --- a/frontend/src/assets/icons/24_Text format off.svg +++ b/frontend/src/assets/icons/24_Text format off.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/assets/icons/24_Text format.svg b/frontend/src/assets/icons/24_Text format.svg index 56ee9d2842..ea8ae72501 100644 --- a/frontend/src/assets/icons/24_Text format.svg +++ b/frontend/src/assets/icons/24_Text format.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index 48bb81ad1b..3f8c0bfcc6 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts @@ -105,8 +105,8 @@ export const useStyles = makeStyles()(theme => ({ [theme.breakpoints.down(770)]: { marginTop: '1rem', }, + display: 'inline-flex', }, - invertedOperatorButton: { marginRight: '1rem', marginLeft: 'auto', }, headerSelect: { marginRight: '1rem', width: '200px' }, chip: { margin: '0 0.5rem 0.5rem 0', diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx index 3bd9898fb8..73b30eb261 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx @@ -206,6 +206,7 @@ export const ConstraintAccordionEdit = ({ action={action} compact={compact} setInvertedOperator={setInvertedOperator} + setCaseInsensitive={setCaseInsensitive} onDelete={onDelete} /> @@ -218,7 +219,6 @@ export const ConstraintAccordionEdit = ({ localConstraint={localConstraint} setValues={setValues} setValue={setValue} - setCaseInsensitive={setCaseInsensitive} triggerTransition={triggerTransition} setAction={setAction} onSubmit={onSubmit} @@ -232,7 +232,6 @@ export const ConstraintAccordionEdit = ({ error={error} contextDefinition={contextDefinition} removeValue={removeValue} - setCaseInsensitive={setCaseInsensitive} /> diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/CaseInsensitive/CaseInsensitive.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/CaseInsensitive/CaseInsensitive.tsx deleted file mode 100644 index f0c2a71711..0000000000 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/CaseInsensitive/CaseInsensitive.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { FormControlLabel, Switch } from '@mui/material'; -import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader'; - -interface ICaseInsensitiveProps { - caseInsensitive: boolean; - setCaseInsensitive: (caseInsensitive: boolean) => void; -} - -export const CaseInsensitive = ({ - caseInsensitive, - setCaseInsensitive, -}: ICaseInsensitiveProps) => { - return ( - <> - - Should the constraint be case insensitive? - - setCaseInsensitive(!caseInsensitive)} - color="primary" - /> - } - label="Case insensitive" - /> - - ); -}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts index 017450106d..0acfd24ad1 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts @@ -1,8 +1,9 @@ -import { makeStyles } from 'tss-react/mui'; +import {makeStyles} from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ inputContainer: { padding: '1rem', + backgroundColor: theme.palette.grey[100] }, buttonContainer: { display: 'flex', diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx index 9701394923..4058690ba5 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx @@ -16,20 +16,12 @@ interface IConstraintAccordionBody { triggerTransition: () => void; setValue: (value: string) => void; setAction: React.Dispatch>; - setCaseInsensitive: () => void; onSubmit: () => void; } export const ConstraintAccordionEditBody: React.FC< IConstraintAccordionBody -> = ({ - localConstraint, - children, - triggerTransition, - setInvertedOperator, - setAction, - onSubmit, -}) => { +> = ({ localConstraint, children, triggerTransition, setAction, onSubmit }) => { const { classes: styles } = useStyles(); return ( diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx index 813ff1a112..8fd61494de 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx @@ -25,7 +25,6 @@ interface IResolveInputProps { localConstraint: IConstraint; setValue: (value: string) => void; setValues: (values: string[]) => void; - setCaseInsensitive: () => void; setError: React.Dispatch>; removeValue: (index: number) => void; input: Input; @@ -38,7 +37,6 @@ export const ResolveInput = ({ localConstraint, setValue, setValues, - setCaseInsensitive, setError, removeValue, error, @@ -58,12 +56,6 @@ export const ResolveInput = ({ case STRING_OPERATORS_LEGAL_VALUES: return ( <> - - {' '} - void; setInvertedOperator: () => void; + setCaseInsensitive: () => void; } export const ConstraintAccordionEditHeader = ({ @@ -41,10 +45,13 @@ export const ConstraintAccordionEditHeader = ({ setOperator, onDelete, setInvertedOperator, + setCaseInsensitive, }: IConstraintAccordionViewHeader) => { const { classes: styles } = useStyles(); const { context } = useUnleashContext(); const { contextName, operator } = localConstraint; + const [showCaseSensitiveButton, setShowCaseSensitiveButton] = + useState(false); /* We need a special case to handle the currenTime context field. Since this field will be the only one to allow DATE_BEFORE and DATE_AFTER operators @@ -66,6 +73,8 @@ export const ConstraintAccordionEditHeader = ({ oneOf(dateOperators, operator) ) { setOperator(IN); + } else if (oneOf(stringOperators, operator)) { + setShowCaseSensitiveButton(true); } }, [contextName, setOperator, operator, setLocalConstraint]); @@ -85,6 +94,9 @@ export const ConstraintAccordionEditHeader = ({ value: new Date().toISOString(), })); } else { + if (oneOf(stringOperators, operator)) { + setShowCaseSensitiveButton(true); + } setOperator(operator); } }; @@ -112,14 +124,11 @@ export const ConstraintAccordionEditHeader = ({ className={styles.headerSelect} />
-
- + -
-
+ + } + />
- - - - - + + + diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/InvertedOperatorButton/InvertedOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/InvertedOperatorButton/InvertedOperator.tsx deleted file mode 100644 index b35da08ee5..0000000000 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/InvertedOperatorButton/InvertedOperator.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Button, IconButton, Tooltip } from '@mui/material'; -import { ReactComponent as NegatedIcon } from '../../../../../../assets/icons/24_Negator.svg'; -import { ReactComponent as NegatedIconOff } from '../../../../../../assets/icons/24_Negator off.svg'; -import React, { useMemo } from 'react'; -import { IConstraint } from '../../../../../../interfaces/strategy'; - -interface InvertedOperatorProps { - localConstraint: IConstraint; - setInvertedOperator: () => void; - className: any; -} - -export const InvertedOperator = ({ - localConstraint, - setInvertedOperator, - className -}: InvertedOperatorProps) => { - const icon = useMemo(() => { - return localConstraint.inverted ? ( - - ) : ( - - ); - }, [localConstraint]); - - return ( - - - - ); -}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx new file mode 100644 index 0000000000..f8cfa239cc --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx @@ -0,0 +1,51 @@ +import { Tooltip } from '@mui/material'; +import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg'; +import { ReactComponent as CaseSensitiveOff } from 'assets/icons/24_Text format off.svg'; +import React from 'react'; +import { + StyledToggleButtonOff, + StyledToggleButtonOn, +} from '../StyledToggleButton'; +import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; +import { IConstraint } from '../../../../../../interfaces/strategy'; + +interface CaseSensitiveButtonProps { + localConstraint: IConstraint; + setCaseInsensitive: () => void; +} + +export const CaseSensitiveButton = ({ + localConstraint, + setCaseInsensitive, +}: CaseSensitiveButtonProps) => { + return ( + + + + + } + elseShow={ + + + + } + /> + + ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx new file mode 100644 index 0000000000..32d37c9dae --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx @@ -0,0 +1,46 @@ +import { Button, IconButton, Tooltip } from '@mui/material'; +import { ReactComponent as NegatedIcon } from '../../../../../../assets/icons/24_Negator.svg'; +import { ReactComponent as NegatedIconOff } from '../../../../../../assets/icons/24_Negator off.svg'; +import React, { useMemo } from 'react'; +import { IConstraint } from '../../../../../../interfaces/strategy'; +import { + StyledToggleButtonOff, + StyledToggleButtonOn, +} from '../StyledToggleButton'; +import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; + +interface InvertedOperatorButtonProps { + localConstraint: IConstraint; + setInvertedOperator: () => void; +} + +export const InvertedOperatorButton = ({ + localConstraint, + setInvertedOperator, +}: InvertedOperatorButtonProps) => { + return ( + + + + + + } + elseShow={ + + + + + + } + /> + ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx new file mode 100644 index 0000000000..15fa4c4cd7 --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx @@ -0,0 +1,31 @@ +import { styled } from '@mui/system'; +import { Button } from '@mui/material'; + +export const StyledToggleButtonOff = styled(Button)(({ theme }) => ({ + width: 28, + minWidth: '28px!important', + minHeight: 40, + backgroundColor: 'white', + color: theme.palette.grey[600], + borderRadius: theme.shape.borderRadius, + padding: '0 1px 0', + marginRight: '1rem', + '&:hover': { + background: theme.palette.grey[300], + }, +})); + +export const StyledToggleButtonOn = styled(Button)(({ theme }) => ({ + width: 28, + minWidth: '28px!important', + minHeight: 40, + color: theme.palette.primary.contrastText, + backgroundColor: theme.palette.primary.main, + borderRadius: theme.shape.borderRadius, + marginRight: '1rem', + padding: '0 1px 0', + '&:hover': { + color: theme.palette.primary.contrastText, + backgroundColor: theme.palette.primary.main, + }, +})); From f34aafade54cb31963f5d5d224e21ed6423dbe85 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 21 Jul 2022 14:15:21 +0300 Subject: [PATCH 05/23] Create/edit constraint adjustments --- .../ConstraintAccordionEditBody.styles.ts | 4 +-- .../ConstraintAccordionEditHeader.tsx | 2 +- .../CaseSensitiveButton.tsx | 29 ++++++++----------- 3 files changed, 15 insertions(+), 20 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts index 0acfd24ad1..cf2730bcd6 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts @@ -1,9 +1,9 @@ -import {makeStyles} from 'tss-react/mui'; +import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ inputContainer: { padding: '1rem', - backgroundColor: theme.palette.grey[100] + backgroundColor: theme.palette.grey[100], }, buttonContainer: { display: 'flex', diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx index dd6c31ee11..2ef2de188c 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx @@ -73,7 +73,7 @@ export const ConstraintAccordionEditHeader = ({ oneOf(dateOperators, operator) ) { setOperator(IN); - } else if (oneOf(stringOperators, operator)) { + } else if (oneOf(stringOperators, operator)) { setShowCaseSensitiveButton(true); } }, [contextName, setOperator, operator, setLocalConstraint]); diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx index f8cfa239cc..c003c539ec 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx @@ -1,7 +1,7 @@ import { Tooltip } from '@mui/material'; import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg'; import { ReactComponent as CaseSensitiveOff } from 'assets/icons/24_Text format off.svg'; -import React from 'react'; +import React from 'react'; import { StyledToggleButtonOff, StyledToggleButtonOn, @@ -19,33 +19,28 @@ export const CaseSensitiveButton = ({ setCaseInsensitive, }: CaseSensitiveButtonProps) => { return ( - - - } - elseShow={ + + } + elseShow={ + - } - /> - + + } + /> ); }; 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 06/23] 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} /> 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} -
- +
+ + + + + + } + /> +
+ +
- } - elseShow={ -
- - {constraint?.values - ?.map(value => value) - .join(', ')} - +
- Expand to view all ( - {constraint?.values?.length}) -

+ + {' '} + + } /> + +
+ } + elseShow={ +
+ + + {' '} + + + } + /> +
+ + {constraint?.values + ?.map(value => value) + .join(', ')} + + + {!expanded ? `Expand to view all ( + ${constraint?.values?.length})` : 'Collapse to view less' } +

+ } + /> +
} /> 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 && ( -
- NOT -
- ); - return (
- {notLabel}
{operatorName}
{operatorText}
From c16272ec26b5cc4a9d589c9f1d26d9b5a3f58e21 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Thu, 21 Jul 2022 15:27:29 +0300 Subject: [PATCH 07/23] Constraint View header adjustments --- .../ConstraintAccordion.styles.ts | 2 +- .../ConstraintAccordionEditBody.tsx | 3 +- .../ResolveInput/ResolveInput.tsx | 1 - .../ConstraintAccordionEditHeader.tsx | 2 +- .../InvertedOperatorButton.tsx | 4 +-- .../ConstraintAccordionView.tsx | 1 - .../ConstraintAccordionViewHeader.tsx | 33 ++++++++++--------- .../ConstraintOperator/ConstraintOperator.tsx | 3 -- 8 files changed, 23 insertions(+), 26 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index f208f27ee7..0aa5b91745 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts @@ -49,7 +49,7 @@ export const useStyles = makeStyles()(theme => ({ headerValuesContainerWrapper: { display: 'flex', flexDirection: 'row', - justifyContent: 'center' + justifyContent: 'center', }, headerValuesContainer: { display: 'flex', diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx index 4058690ba5..ebfcb4d3a9 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx @@ -1,8 +1,7 @@ -import { Button, FormControlLabel, Switch } from '@mui/material'; +import { Button } from '@mui/material'; import { IConstraint } from 'interfaces/strategy'; import { CANCEL } from '../ConstraintAccordionEdit'; -import { ConstraintFormHeader } from './ConstraintFormHeader/ConstraintFormHeader'; import { useStyles } from './ConstraintAccordionEditBody.styles'; import React from 'react'; import { newOperators } from 'constants/operators'; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx index 8fd61494de..a957d1df4e 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx @@ -1,6 +1,5 @@ import { IUnleashContextDefinition } from 'interfaces/context'; import { IConstraint } from 'interfaces/strategy'; -import { CaseInsensitive } from '../CaseInsensitive/CaseInsensitive'; import { DateSingleValue } from '../DateSingleValue/DateSingleValue'; import { FreeTextInput } from '../FreeTextInput/FreeTextInput'; import { RestrictiveLegalValues } from '../RestrictiveLegalValues/RestrictiveLegalValues'; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx index 2ef2de188c..4761cb9601 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx @@ -4,7 +4,7 @@ import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccord import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon'; -import { Delete, Edit, Help } from '@mui/icons-material'; +import { Delete, Edit } from '@mui/icons-material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { dateOperators, diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx index 32d37c9dae..b05667b4d0 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/InvertedOperatorButton/InvertedOperatorButton.tsx @@ -1,7 +1,7 @@ -import { Button, IconButton, Tooltip } from '@mui/material'; +import { Tooltip } from '@mui/material'; import { ReactComponent as NegatedIcon } from '../../../../../../assets/icons/24_Negator.svg'; import { ReactComponent as NegatedIconOff } from '../../../../../../assets/icons/24_Negator off.svg'; -import React, { useMemo } from 'react'; +import React from 'react'; import { IConstraint } from '../../../../../../interfaces/strategy'; import { StyledToggleButtonOff, diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index c266cb1f43..f068f2aa82 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -1,5 +1,4 @@ import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material'; -import { ExpandMore } from '@mui/icons-material'; import { IConstraint } from 'interfaces/strategy'; import { ConstraintAccordionViewBody } from './ConstraintAccordionViewBody/ConstraintAccordionViewBody'; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index cc0f9d9db4..69d682ea08 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -53,19 +53,20 @@ 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 - }) -); +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; @@ -208,8 +209,10 @@ export const ConstraintAccordionViewHeader = ({ 'valuesExpandLabel' )} > - {!expanded ? `Expand to view all ( - ${constraint?.values?.length})` : 'Collapse to view less' } + {!expanded + ? `Expand to view all ( + ${constraint?.values?.length})` + : 'Collapse to view less'}

} /> diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx index c275825059..b21c6159a1 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx @@ -1,9 +1,6 @@ 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 { From f6b6aa0ae8ea663c4a132e2ebff7a31cfb16ecf8 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 22 Jul 2022 09:40:08 +0300 Subject: [PATCH 08/23] Refactored to single responsibility components --- .../ConstraintAccordion.styles.ts | 4 +- .../RestrictiveLegalValues.tsx | 54 ++-- .../SingleLegalValue/SingleLegalValue.tsx | 10 +- .../ConstraintAccordionEditHeader.tsx | 21 +- .../ConstraintAccordionHeaderActions.tsx | 63 +++++ .../ConstraintAccordionViewHeader.tsx | 230 ++---------------- .../ConstraintAccordionViewHeaderInfo.tsx | 65 +++++ .../ConstraintViewHeaderOperator.tsx | 36 +++ ...raintAccordionViewHeaderMultipleValues.tsx | 102 ++++++++ ...ontraintAccordionViewHeaderSingleValue.tsx | 49 ++++ .../StyledIconWrapper/StyledIconWrapper.tsx | 16 ++ .../{utils.ts => helpers.ts} | 0 12 files changed, 389 insertions(+), 261 deletions(-) create mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx create mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx create mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx create mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx create mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ContraintAccordionViewHeaderSingleValue.tsx create mode 100644 frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx rename frontend/src/component/common/ConstraintAccordion/{utils.ts => helpers.ts} (100%) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index 0aa5b91745..7ed5067e05 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts @@ -17,8 +17,8 @@ export const useStyles = makeStyles()(theme => ({ fill: '#fff', }, accordion: { - border: `1px solid ${theme.palette.grey[300]}`, - borderRadius: '5px', + border: `1px solid ${theme.palette.grey[400]}`, + borderRadius: '8px', backgroundColor: '#fff', boxShadow: 'none', margin: 0, 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 f269a3c171..c32fa68a75 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx @@ -64,29 +64,37 @@ export const RestrictiveLegalValues = ({ }; return ( - <> - - Select values from a predefined set - - - {filteredValues.map(match => ( - onChange(match.value)} - name={match.value} - color="primary" + 500)} + show={ + <> + + Select values from a predefined set + + + {filteredValues.map(match => ( + onChange(match.value)} + name={match.value} + color="primary" + /> + } /> - } - /> - ))} - {error}

} - /> - + ))} + {error}

} + /> + + } + /> ); }; 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 158cd221af..f62dc67d3c 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx @@ -36,7 +36,15 @@ export const SingleLegalValue = ({ Add a single {type.toLowerCase()} value - + 500)} + show={ + + } + /> { - event.stopPropagation(); - onDelete(); - }); - return (
@@ -155,16 +147,7 @@ export const ConstraintAccordionEditHeader = ({

} /> -
- - - - - - - - -
+
); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx new file mode 100644 index 0000000000..202eafc065 --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender'; +import { IconButton, Tooltip } from '@mui/material'; +import { Delete, Edit } from '@mui/icons-material'; +import { useStyles } from '../ConstraintAccordion.styles'; + +interface ConstraintAccordionHeaderActionsProps { + onDelete?: () => void; + onEdit?: () => void; +} + +export const ConstraintAccordionHeaderActions = ({ + onEdit, + onDelete, +}: ConstraintAccordionHeaderActionsProps) => { + const { classes: styles } = useStyles(); + const onEditClick = + onEdit && + ((event: React.SyntheticEvent) => { + event.stopPropagation(); + onEdit(); + }); + + const onDeleteClick = + onDelete && + ((event: React.SyntheticEvent) => { + event.stopPropagation(); + onDelete(); + }); + + return ( +
+ ( + + + + + + )} + /> + ( + + + + + + )} + /> +
+ ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index 69d682ea08..c0061cc650 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -1,72 +1,10 @@ -import { Chip, IconButton, Tooltip, styled } from '@mui/material'; import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon'; -import { Delete, Edit } from '@mui/icons-material'; import { IConstraint } from 'interfaces/strategy'; import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import React, { useEffect, useRef, useState } from 'react'; -import { formatConstraintValue } from 'utils/formatConstraintValue'; -import { useLocationSettings } from 'hooks/useLocationSettings'; -import { ConstraintOperator } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator'; -import classnames from 'classnames'; -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', - WebkitLineClamp: 3, - WebkitBoxOrient: 'vertical', - overflow: 'hidden', - maxWidth: '100px', - minWidth: '100px', - marginRight: '10px', - wordBreak: 'break-word', - fontSize: theme.fontSizes.smallBody, - [theme.breakpoints.down(710)]: { - textAlign: 'center', - padding: theme.spacing(1, 0), - marginRight: 'inherit', - maxWidth: 'inherit', - }, -})); - -const StyledValuesSpan = styled('span')(({ theme }) => ({ - display: '-webkit-box', - WebkitLineClamp: 2, - WebkitBoxOrient: 'vertical', - overflow: 'hidden', - wordBreak: 'break-word', - fontSize: theme.fontSizes.smallBody, - [theme.breakpoints.down(710)]: { - margin: theme.spacing(1, 0), - textAlign: 'center', - }, -})); - -const StyledSingleValueChip = styled(Chip)(({ theme }) => ({ - [theme.breakpoints.down(710)]: { - margin: theme.spacing(1, 0), - }, -})); - -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, -})); +import React from 'react'; +import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo'; +import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions'; interface IConstraintAccordionViewHeaderProps { compact: boolean; @@ -88,161 +26,21 @@ export const ConstraintAccordionViewHeader = ({ expanded, }: IConstraintAccordionViewHeaderProps) => { const { classes: styles } = useStyles(); - const { locationSettings } = useLocationSettings(); - const [width, setWidth] = useState(0); - const [textWidth, setTextWidth] = useState(0); - const [expandable, setExpandable] = useState(false); - const elementRef = useRef(null); - - const onEditClick = - onEdit && - ((event: React.SyntheticEvent) => { - event.stopPropagation(); - onEdit(); - }); - - const onDeleteClick = - onDelete && - ((event: React.SyntheticEvent) => { - event.stopPropagation(); - onDelete(); - }); - - useEffect(() => { - if (elementRef && elementRef.current != null) { - setTextWidth( - Math.round(getTextWidth(elementRef.current.innerText) / 2) // 2 lines - ); - setWidth(elementRef.current.clientWidth); - } - }, []); - - useEffect(() => { - if (textWidth && width) { - setExpandable(textWidth > width); - allowExpand(textWidth > width); - } - }, [textWidth, width, allowExpand]); return (
-
- - - {constraint.contextName} - - -
- - - - - - } - /> -
- -
-
- - - - {' '} - - - } - /> - -
- } - elseShow={ -
- - - {' '} - - - } - /> -
- - {constraint?.values - ?.map(value => value) - .join(', ')} - - - {!expanded - ? `Expand to view all ( - ${constraint?.values?.length})` - : 'Collapse to view less'} -

- } - /> -
-
- } - /> -
-
- ( - - - - - - )} - /> - ( - - - - - - )} - /> -
+ +
); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx new file mode 100644 index 0000000000..3e2fc4e282 --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx @@ -0,0 +1,65 @@ +import { styled, Tooltip } from '@mui/material'; +import { ConstraintViewHeaderOperator } from '../ConstraintViewHeaderOperator/ConstraintViewHeaderOperator'; +import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; +import { ContraintAccordionViewHeaderSingleValue } from '../ContraintAccordionViewHeaderSingleValue/ContraintAccordionViewHeaderSingleValue'; +import { ConstraintAccordionViewHeaderMultipleValues } from '../ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues'; +import React from 'react'; +import { IConstraint } from '../../../../../../interfaces/strategy'; +import { useStyles } from '../../../ConstraintAccordion.styles'; + +const StyledHeaderText = styled('span')(({ theme }) => ({ + display: '-webkit-box', + WebkitLineClamp: 3, + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + maxWidth: '100px', + minWidth: '100px', + marginRight: '10px', + wordBreak: 'break-word', + fontSize: theme.fontSizes.smallBody, + [theme.breakpoints.down(710)]: { + textAlign: 'center', + padding: theme.spacing(1, 0), + marginRight: 'inherit', + maxWidth: 'inherit', + }, +})); + +interface ConstraintAccordionViewHeaderMetaInfoProps { + constraint: IConstraint; + singleValue: boolean; + expanded: boolean; + allowExpand: (shouldExpand: boolean) => void; +} + +export const ConstraintAccordionViewHeaderInfo = ({ + constraint, + singleValue, + allowExpand, + expanded, +}: ConstraintAccordionViewHeaderMetaInfoProps) => { + const { classes: styles } = useStyles(); + return ( +
+ + {constraint.contextName} + + + + } + elseShow={ + + } + /> +
+ ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx new file mode 100644 index 0000000000..98022eddeb --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx @@ -0,0 +1,36 @@ +import { IConstraint } from '../../../../../../interfaces/strategy'; +import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; +import { Tooltip } from '@mui/material'; +import { ReactComponent as NegatedIcon } from '../../../../../../assets/icons/24_Negator.svg'; +import { ConstraintOperator } from '../../../ConstraintOperator/ConstraintOperator'; +import React from 'react'; +import { useStyles } from '../../../ConstraintAccordion.styles'; +import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper'; + +interface ConstraintViewHeaderOperatorProps { + constraint: IConstraint; +} + +export const ConstraintViewHeaderOperator = ({ + constraint, +}: ConstraintViewHeaderOperatorProps) => { + const { classes: styles } = useStyles(); + + return ( +
+ + + + + + } + /> +
+ +
+
+ ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx new file mode 100644 index 0000000000..606c6c099d --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx @@ -0,0 +1,102 @@ +import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; +import { oneOf } from '../../../../../../utils/oneOf'; +import { stringOperators } from '../../../../../../constants/operators'; +import { styled, Tooltip } from '@mui/material'; +import { ReactComponent as CaseSensitive } from '../../../../../../assets/icons/24_Text format.svg'; +import React, { useEffect, useRef, useState } from 'react'; +import classnames from 'classnames'; +import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper'; +import { IConstraint } from '../../../../../../interfaces/strategy'; +import { useStyles } from '../../../ConstraintAccordion.styles'; +import { getTextWidth } from '../../../helpers'; + +const StyledValuesSpan = styled('span')(({ theme }) => ({ + display: '-webkit-box', + WebkitLineClamp: 2, + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + wordBreak: 'break-word', + fontSize: theme.fontSizes.smallBody, + [theme.breakpoints.down(710)]: { + margin: theme.spacing(1, 0), + textAlign: 'center', + }, +})); + +interface ConstraintSingleValueProps { + constraint: IConstraint; + expanded: boolean; + allowExpand: (shouldExpand: boolean) => void; +} + +export const ConstraintAccordionViewHeaderMultipleValues = ({ + constraint, + expanded, + allowExpand, +}: ConstraintSingleValueProps) => { + const { classes: styles } = useStyles(); + + const elementRef = useRef(null); + + const [width, setWidth] = useState(0); + const [textWidth, setTextWidth] = useState(0); + const [expandable, setExpandable] = useState(false); + + useEffect(() => { + if (elementRef && elementRef.current != null) { + setTextWidth( + Math.round(getTextWidth(elementRef.current.innerText) / 2) // 2 lines + ); + setWidth(elementRef.current.clientWidth); + } + }, []); + + useEffect(() => { + if (textWidth && width) { + setExpandable(textWidth > width); + } + }, [textWidth, width]); + + useEffect(() => { + allowExpand(expandable); + }, [expandable, allowExpand]); + + return ( +
+ + + {' '} + + + } + /> +
+ + {constraint?.values?.map(value => value).join(', ')} + + + {!expanded + ? `Expand to view all ( + ${constraint?.values?.length})` + : 'Collapse to view less'} +

+ } + /> +
+
+ ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ContraintAccordionViewHeaderSingleValue.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ContraintAccordionViewHeaderSingleValue.tsx new file mode 100644 index 0000000000..00818af583 --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ContraintAccordionViewHeaderSingleValue.tsx @@ -0,0 +1,49 @@ +import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; +import { oneOf } from '../../../../../../utils/oneOf'; +import { stringOperators } from '../../../../../../constants/operators'; +import { Chip, styled, Tooltip } from '@mui/material'; +import { ReactComponent as CaseSensitive } from '../../../../../../assets/icons/24_Text format.svg'; +import { formatConstraintValue } from '../../../../../../utils/formatConstraintValue'; +import React from 'react'; +import { useStyles } from '../../../ConstraintAccordion.styles'; +import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper'; +import { IConstraint } from '../../../../../../interfaces/strategy'; +import { useLocationSettings } from '../../../../../../hooks/useLocationSettings'; + +const StyledSingleValueChip = styled(Chip)(({ theme }) => ({ + [theme.breakpoints.down(710)]: { + margin: theme.spacing(1, 0), + }, +})); + +interface ConstraintSingleValueProps { + constraint: IConstraint; +} + +export const ContraintAccordionViewHeaderSingleValue = ({ + constraint, +}: ConstraintSingleValueProps) => { + const { locationSettings } = useLocationSettings(); + const { classes: styles } = useStyles(); + + return ( +
+ + + {' '} + + + } + /> + +
+ ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx new file mode 100644 index 0000000000..0d84e094fb --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx @@ -0,0 +1,16 @@ +import { styled } from '@mui/material'; + +export 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, +})); diff --git a/frontend/src/component/common/ConstraintAccordion/utils.ts b/frontend/src/component/common/ConstraintAccordion/helpers.ts similarity index 100% rename from frontend/src/component/common/ConstraintAccordion/utils.ts rename to frontend/src/component/common/ConstraintAccordion/helpers.ts From d6d8a9ddb4d81a1205c66f9cafa22f5a9da51edd Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 22 Jul 2022 09:40:51 +0300 Subject: [PATCH 09/23] Refactored to single responsibility components --- .../ConstraintAccordionViewHeader.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index c0061cc650..e9eddc7f85 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -7,7 +7,6 @@ import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHead import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions'; interface IConstraintAccordionViewHeaderProps { - compact: boolean; constraint: IConstraint; onDelete?: () => void; onEdit?: () => void; @@ -17,7 +16,6 @@ interface IConstraintAccordionViewHeaderProps { } export const ConstraintAccordionViewHeader = ({ - compact, constraint, onEdit, onDelete, @@ -31,7 +29,6 @@ export const ConstraintAccordionViewHeader = ({
Date: Fri, 22 Jul 2022 09:53:42 +0300 Subject: [PATCH 10/23] Fix build --- frontend/package.json | 3 ++- frontend/src/component/addons/AddonForm/AddonForm.tsx | 8 +------- .../AddonForm/AddonMultiSelector/AddonMultiSelector.tsx | 9 +-------- .../common/ConstraintAccordion/ConstraintAccordion.tsx | 1 - .../ConstraintAccordionView/ConstraintAccordionView.tsx | 3 --- 5 files changed, 4 insertions(+), 20 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 3d2b9daa96..8730d75282 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -35,7 +35,8 @@ "fmt": "prettier src --write --loglevel warn", "fmt:check": "prettier src --check", "e2e": "yarn run cypress open --config baseUrl='http://localhost:3000' --env AUTH_USER=admin,AUTH_PASSWORD=unleash4all", - "e2e:heroku": "yarn run cypress open --config baseUrl='http://localhost:3000' --env AUTH_USER=example@example.com" + "e2e:heroku": "yarn run cypress open --config baseUrl='http://localhost:3000' --env AUTH_USER=example@example.com", + "isready": "yarn lint && yarn fmt && yarn prepare" }, "devDependencies": { "@emotion/react": "11.9.3", diff --git a/frontend/src/component/addons/AddonForm/AddonForm.tsx b/frontend/src/component/addons/AddonForm/AddonForm.tsx index 0909ae38d6..f7bf2a49e2 100644 --- a/frontend/src/component/addons/AddonForm/AddonForm.tsx +++ b/frontend/src/component/addons/AddonForm/AddonForm.tsx @@ -6,13 +6,7 @@ import React, { useState, VFC, } from 'react'; -import { - Button, - Divider, - FormControlLabel, - Switch, - TextField, -} from '@mui/material'; +import { Button, Divider, FormControlLabel, Switch } from '@mui/material'; import produce from 'immer'; import { trim } from 'component/common/util'; import { IAddon, IAddonProvider } from 'interfaces/addons'; diff --git a/frontend/src/component/addons/AddonForm/AddonMultiSelector/AddonMultiSelector.tsx b/frontend/src/component/addons/AddonForm/AddonMultiSelector/AddonMultiSelector.tsx index 0d657c2b7a..6019204c23 100644 --- a/frontend/src/component/addons/AddonForm/AddonMultiSelector/AddonMultiSelector.tsx +++ b/frontend/src/component/addons/AddonForm/AddonMultiSelector/AddonMultiSelector.tsx @@ -7,14 +7,7 @@ import { AutocompleteRenderOptionState, } from '@mui/material/Autocomplete'; import { styled } from '@mui/system'; -import { - Autocomplete, - Box, - capitalize, - Checkbox, - Paper, - TextField, -} from '@mui/material'; +import { capitalize, Checkbox, Paper, TextField } from '@mui/material'; import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'; import CheckBoxIcon from '@mui/icons-material/CheckBox'; import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender'; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx index c849d74e2e..ffb54cc4a1 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx @@ -42,7 +42,6 @@ export const ConstraintAccordion = ({ constraint={constraint} onEdit={onEdit} onDelete={onDelete} - compact={compact} /> } /> diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index f068f2aa82..9d1015adfb 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -16,11 +16,9 @@ interface IConstraintAccordionViewProps { constraint: IConstraint; onDelete?: () => void; onEdit?: () => void; - compact: boolean; } export const ConstraintAccordionView = ({ - compact, constraint, onEdit, onDelete, @@ -53,7 +51,6 @@ export const ConstraintAccordionView = ({ onClick={handleClick} > Date: Fri, 22 Jul 2022 12:27:04 +0300 Subject: [PATCH 11/23] Bug fixes --- .../CaseSensitiveButton/CaseSensitiveButton.tsx | 2 +- .../StyledToggleButton/StyledToggleButton.tsx | 2 +- .../ConstraintAccordionViewHeaderMultipleValues.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx index c003c539ec..16edba2e5a 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx @@ -32,7 +32,7 @@ export const CaseSensitiveButton = ({ } elseShow={ - + ({ minWidth: '28px!important', minHeight: 40, backgroundColor: 'white', - color: theme.palette.grey[600], + color: theme.palette.inactiveIcon, borderRadius: theme.shape.borderRadius, padding: '0 1px 0', marginRight: '1rem', 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 606c6c099d..98b130a78e 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx @@ -90,9 +90,9 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({ )} > {!expanded - ? `Expand to view all ( + ? `View all ( ${constraint?.values?.length})` - : 'Collapse to view less'} + : 'View less'}

} /> 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 12/23] 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 ( - 500)} - show={ - <> - - Select values from a predefined set - + <> + + Select values from a predefined set + + 100)} + show={ - {filteredValues.map(match => ( - onChange(match.value)} - name={match.value} - color="primary" - /> - } + } + /> + {filteredValues.map(match => ( + onChange(match.value)} + name={match.value} + color="primary" /> - ))} - {error}

} - /> - - } - /> + } + /> + ))} + {error}

} + /> + ); }; 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 500)} + condition={Boolean(legalValues.length > 100)} show={ ({ +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 (
( +

+ Add any number of custom constraints + + + + + +

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={ - + 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={ - + {' '} 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', })); From d23092ca8af579aff332d273394be2cf728b6e28 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 22 Jul 2022 13:40:22 +0300 Subject: [PATCH 13/23] bug fix --- .../ConstraintAccordionHeaderActions.tsx | 2 +- .../ConstraintAccordionList/ConstraintAccordionList.tsx | 6 +++++- .../ConstraintAccordionViewHeaderMultipleValues.tsx | 4 ++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx index 8ac0b0564b..8bae30ddaf 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx @@ -13,7 +13,7 @@ interface ConstraintAccordionHeaderActionsProps { export const ConstraintAccordionHeaderActions = ({ onEdit, onDelete, - disableEdit = false + disableEdit = false, }: ConstraintAccordionHeaderActionsProps) => { const { classes: styles } = useStyles(); const onEditClick = diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx index d4ab4bab84..0e8ff29a89 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx @@ -105,7 +105,11 @@ export const ConstraintAccordionList = forwardRef<

Add any number of custom constraints - + 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 5cb8d6e14b..2ddb041d2b 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx @@ -70,8 +70,8 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({ } show={ - - {' '} + + } From 47c33e62e1e48db80b430bf6864e136f42e0bd1d Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 22 Jul 2022 13:56:27 +0300 Subject: [PATCH 14/23] bug fix --- .../ConstraintAccordionHeaderActions.tsx | 49 +++++++------------ 1 file changed, 18 insertions(+), 31 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx index 8bae30ddaf..a1022a9dff 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender'; import { IconButton, Tooltip } from '@mui/material'; import { Delete, Edit } from '@mui/icons-material'; import { useStyles } from '../ConstraintAccordion.styles'; @@ -7,13 +6,11 @@ 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 = @@ -32,34 +29,24 @@ export const ConstraintAccordionHeaderActions = ({ return (

); }; From d617eaaefc93f703e30eb7d4800a68c2149cd313 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Fri, 22 Jul 2022 14:05:15 +0300 Subject: [PATCH 15/23] bug fix --- .../ConstraintAccordion/ConstraintAccordion.styles.ts | 6 ------ .../ConstraintAccordionList.styles.ts | 6 ++++++ .../ConstraintAccordionList/ConstraintAccordionList.tsx | 8 ++++---- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index 7ed5067e05..45fc481d0b 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts @@ -86,12 +86,6 @@ export const useStyles = makeStyles()(theme => ({ top: '-10px', }, }, - help: { - fill: theme.palette.grey[600], - [theme.breakpoints.down(860)]: { - display: 'none', - }, - }, headerText: { maxWidth: '400px', fontSize: theme.fontSizes.smallBody, diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts index 43067815e7..8b4a8c0508 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts @@ -6,4 +6,10 @@ export const useStyles = makeStyles()(theme => ({ display: 'grid', gap: '1rem', }, + help: { + fill: theme.palette.grey[600], + [theme.breakpoints.down(860)]: { + display: 'none', + }, + }, })); diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx index 0e8ff29a89..fe9860b8f9 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx @@ -8,7 +8,7 @@ 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, IconButton } from '@mui/material'; +import { Button } from '@mui/material'; import { Help } from '@mui/icons-material'; interface IConstraintAccordionListProps { @@ -109,10 +109,10 @@ export const ConstraintAccordionList = forwardRef< href={ 'https://docs.getunleash.io/advanced/strategy_constraints' } + target="_blank" + rel="noopener noreferrer" > - - - +

); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx index a1022a9dff..c02fbcfdf2 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx @@ -2,15 +2,20 @@ import React from 'react'; import { IconButton, Tooltip } from '@mui/material'; import { Delete, Edit } from '@mui/icons-material'; import { useStyles } from '../ConstraintAccordion.styles'; +import {ConditionallyRender} from "../../ConditionallyRender/ConditionallyRender"; interface ConstraintAccordionHeaderActionsProps { onDelete?: () => void; onEdit?: () => void; + disableEdit?: boolean; + disableDelete?: boolean } export const ConstraintAccordionHeaderActions = ({ onEdit, onDelete, + disableDelete = false, + disableEdit = false }: ConstraintAccordionHeaderActionsProps) => { const { classes: styles } = useStyles(); const onEditClick = @@ -29,24 +34,26 @@ export const ConstraintAccordionHeaderActions = ({ return (
+ - + } /> + - + } />
); }; From 37669fadb88a3a6587bb2749df5e148b8ac4b791 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Mon, 25 Jul 2022 11:13:21 +0300 Subject: [PATCH 21/23] bug fix --- .../ConstraintAccordionEditHeader.tsx | 2 +- .../ConstraintAccordionHeaderActions.tsx | 54 +++++++++++-------- .../ConstraintAccordionView.tsx | 1 + .../PlaygroundConnectionFieldset.tsx | 1 - .../PlaygroundResultsTable.tsx | 1 - 5 files changed, 33 insertions(+), 26 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx index 5edb1eb890..3e474a34f9 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx @@ -147,7 +147,7 @@ export const ConstraintAccordionEditHeader = ({

} /> - +
); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx index c02fbcfdf2..810a3b9e63 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx @@ -2,20 +2,20 @@ import React from 'react'; import { IconButton, Tooltip } from '@mui/material'; import { Delete, Edit } from '@mui/icons-material'; import { useStyles } from '../ConstraintAccordion.styles'; -import {ConditionallyRender} from "../../ConditionallyRender/ConditionallyRender"; +import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender'; interface ConstraintAccordionHeaderActionsProps { onDelete?: () => void; onEdit?: () => void; disableEdit?: boolean; - disableDelete?: boolean + disableDelete?: boolean; } export const ConstraintAccordionHeaderActions = ({ onEdit, onDelete, disableDelete = false, - disableEdit = false + disableEdit = false, }: ConstraintAccordionHeaderActionsProps) => { const { classes: styles } = useStyles(); const onEditClick = @@ -34,26 +34,34 @@ export const ConstraintAccordionHeaderActions = ({ return (
- - - - - } /> - - - - - } /> + + + + + + } + /> + + + + + + } + />
); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index 9d1015adfb..9668b0070b 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -44,6 +44,7 @@ export const ConstraintAccordionView = ({ className={styles.accordion} classes={{ root: styles.accordionRoot }} expanded={expanded} + sx={{ cursor: expandable ? 'pointer' : 'default' }} > = { id: 'name' }; From 9ce7572ba0c2fb5c03219958541187a8ccc07cb6 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Tue, 26 Jul 2022 13:10:30 +0300 Subject: [PATCH 22/23] PR comments --- .../ConstraintAccordionEditBody.styles.ts | 2 +- .../RestrictiveLegalValues.tsx | 2 +- .../StyledToggleButton/StyledToggleButton.tsx | 16 ++++++++-------- .../ConstraintAccordionView.tsx | 1 - frontend/src/themes/theme.ts | 2 ++ frontend/src/themes/themeTypes.ts | 2 ++ 6 files changed, 14 insertions(+), 11 deletions(-) diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts index cf2730bcd6..82c2efa82a 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts @@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui'; export const useStyles = makeStyles()(theme => ({ inputContainer: { padding: '1rem', - backgroundColor: theme.palette.grey[100], + backgroundColor: theme.palette.neutral.light, }, buttonContainer: { display: 'flex', 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 c455065b87..930db206da 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx @@ -69,7 +69,7 @@ export const RestrictiveLegalValues = ({ Select values from a predefined set 100)} + condition={legalValues.length > 100} show={ ({ - width: 28, - minWidth: '28px!important', - minHeight: 40, - backgroundColor: 'white', + width: '28px', + minWidth: '28px', + maxWidth: '28px', + backgroundColor: theme.palette.tertiary.background, borderRadius: theme.shape.borderRadius, padding: '0 1px 0', marginRight: '1rem', '&:hover': { - background: theme.palette.grey[300], + background: theme.palette.tertiary.contrast[300], }, })); export const StyledToggleButtonOn = styled(IconButton)(({ theme }) => ({ - width: 28, - minWidth: '28px!important', - minHeight: 40, + width: '28px', + minWidth: '28px', + maxWidth: '28px', color: theme.palette.primary.contrastText, backgroundColor: theme.palette.primary.main, borderRadius: theme.shape.borderRadius, diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx index 9668b0070b..033f5b6c18 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx @@ -33,7 +33,6 @@ export const ConstraintAccordionView = ({ ); const handleClick = () => { - console.log('click'); if (expandable) { setExpanded(!expanded); } diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts index 0e9b54d8ba..1a2727318c 100644 --- a/frontend/src/themes/theme.ts +++ b/frontend/src/themes/theme.ts @@ -95,6 +95,8 @@ export default createTheme({ light: colors.grey[200], main: colors.grey[400], dark: colors.grey[600], + background: 'white', + contrast: colors.grey[300] }, divider: colors.grey[300], dividerAlternative: colors.grey[400], diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts index cb59be8a6e..f4a11048e8 100644 --- a/frontend/src/themes/themeTypes.ts +++ b/frontend/src/themes/themeTypes.ts @@ -88,6 +88,8 @@ declare module '@mui/material/styles' { main: string; light: string; dark: string; + background: string; + contrast: string }; } From a13e771f0e379e8fab5f9c306544d52492556c50 Mon Sep 17 00:00:00 2001 From: andreas-unleash <104830839+andreas-unleash@users.noreply.github.com> Date: Tue, 26 Jul 2022 13:39:58 +0300 Subject: [PATCH 23/23] Lint and fmt --- .../GroupCardAvatars/GroupPopover/GroupPopover.tsx | 9 ++------- .../ProjectAccessTable/ProjectAccessTable.tsx | 1 - .../api/getters/useProjectAccess/useProjectAccess.ts | 3 +-- frontend/src/themes/theme.ts | 2 +- frontend/src/themes/themeTypes.ts | 2 +- 5 files changed, 5 insertions(+), 12 deletions(-) diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupPopover/GroupPopover.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupPopover/GroupPopover.tsx index dcd4f2d6b8..f032f3e930 100644 --- a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupPopover/GroupPopover.tsx +++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardAvatars/GroupPopover/GroupPopover.tsx @@ -1,14 +1,9 @@ -import { Popover, Badge, styled, Tooltip } from '@mui/material'; -import { IGroup, IGroupUser, Role } from 'interfaces/group'; -import { Link } from 'react-router-dom'; +import { Badge, Popover, styled } from '@mui/material'; +import { IGroupUser, Role } from 'interfaces/group'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { Badge as StyledBadge } from 'component/common/Badge/Badge'; - -import { RemoveGroup } from 'component/admin/groups/RemoveGroup/RemoveGroup'; -import { useState } from 'react'; import StarIcon from '@mui/icons-material/Star'; -import { IUser } from '../../../../../../../interfaces/user'; const StyledPopover = styled(Popover)(({ theme }) => ({ pointerEvents: 'none', diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx index fd75a7224a..6fc76c2828 100644 --- a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx +++ b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx @@ -32,7 +32,6 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { IUser } from 'interfaces/user'; import { IGroup } from 'interfaces/group'; import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell'; -import { mapGroupUsers } from '../../../../hooks/api/getters/useGroup/useGroup'; const StyledAvatar = styled(Avatar)(({ theme }) => ({ width: theme.spacing(4), diff --git a/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts b/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts index 9d67f266eb..445d74201f 100644 --- a/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts +++ b/frontend/src/hooks/api/getters/useProjectAccess/useProjectAccess.ts @@ -1,11 +1,10 @@ import useSWR, { mutate, SWRConfiguration } from 'swr'; -import { useState, useEffect, useMemo } from 'react'; +import { useState, useEffect } from 'react'; import { formatApiPath } from 'utils/formatPath'; import handleErrorResponses from '../httpErrorResponseHandler'; import { IProjectRole } from 'interfaces/role'; import { IGroup } from 'interfaces/group'; import { IUser } from 'interfaces/user'; -import { useGroups } from '../useGroups/useGroups'; import { mapGroupUsers } from '../useGroup/useGroup'; export enum ENTITY_TYPE { diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts index 1a2727318c..8f23875c5e 100644 --- a/frontend/src/themes/theme.ts +++ b/frontend/src/themes/theme.ts @@ -96,7 +96,7 @@ export default createTheme({ main: colors.grey[400], dark: colors.grey[600], background: 'white', - contrast: colors.grey[300] + contrast: colors.grey[300], }, divider: colors.grey[300], dividerAlternative: colors.grey[400], diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts index f4a11048e8..9e61141b28 100644 --- a/frontend/src/themes/themeTypes.ts +++ b/frontend/src/themes/themeTypes.ts @@ -89,7 +89,7 @@ declare module '@mui/material/styles' { light: string; dark: string; background: string; - contrast: string + contrast: string; }; }